/* ==========================================================================
   AfterDark — dark editorial theme
   Type: Inter (UI) + Newsreader (display). Both self-hosted; no external
   requests, which keeps the CSP tight and leaks nothing about who reads what.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================================================================
   Theme — black and neon yellow
   ---------------------------------------------------------------------------
   One accent, not two. The previous build split green (action) from yellow
   (live), which is a defensible system and the wrong one here: two neons on
   black fight, and the site reads as a dashboard rather than a place.

   So the hue is fixed and the *intensity* carries the meaning:
     --accent      full neon — buttons, current state, selection
     --accent-lit  brighter, with a glow — live counts, unread, upvoted
     --accent-dim  recessed — hover hints, rules, borders

   Yellow at this chroma is close to white in luminance, so ink on top of an
   accent fill is always near-black; there is no legible light-on-yellow.
   =========================================================================== */

:root {
  --bg: #000000;
  --bg-elev: #060604;
  --surface: #0c0c09;
  --surface-2: #141410;
  --surface-3: #1d1d17;
  --line: #20201a;
  --line-soft: #161612;
  --line-strong: #33332a;

  --text: #f5f5ee;
  --text-dim: #9d9d90;
  --text-faint: #6b6b60;

  --accent: #e9ff1a;
  --accent-hover: #f4ff70;
  --accent-lit: #fbff8c;
  --accent-ink: #e9ff1a;
  --on-accent: #100f00;
  --accent-soft: rgb(233 255 26 / 0.12);
  --accent-line: rgb(233 255 26 / 0.34);

  /* Kept as aliases so every rule written against the two-accent system keeps
     working — they now resolve to the same hue at a different intensity. */
  --accent-2: #fbff8c;
  --accent-2-ink: #fbff8c;
  --on-accent-2: #100f00;
  --accent-2-soft: rgb(251 255 140 / 0.13);
  --accent-2-line: rgb(251 255 140 / 0.36);

  --accent-warm: #ff8a1a;
  --up: #e9ff1a;
  --down: #6b6b60;
  --ok: #e9ff1a;
  --warn: #ff8a1a;

  --topbar-bg: rgb(0 0 0 / 0.9);
  --backdrop: rgb(0 0 0 / 0.88);
  --mix-ink: #ffffff;
  --hairline: rgb(255 255 255 / 0.045);
  --cover-glyph: rgb(233 255 26 / 0.12);
  --cover-l1: 19%;
  --cover-l2: 12%;
  --cover-s: 40%;

  --scrim: rgb(0 0 0 / 0.72);
  --scrim-soft: rgb(0 0 0 / 0.34);
  --on-scrim: #ffffff;

  --radius: 7px;
  --radius-sm: 5px;
  --radius-lg: 12px;

  --shadow: 0 1px 2px rgb(0 0 0 / 0.85), 0 12px 32px -18px rgb(0 0 0 / 1);
  --shadow-lg: 0 30px 70px -26px rgb(0 0 0 / 1);
  --glow: 0 0 0 1px var(--accent-line), 0 6px 30px -10px rgb(233 255 26 / 0.45);
  --glow-2: 0 0 0 1px var(--accent-2-line), 0 6px 30px -10px rgb(251 255 140 / 0.42);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --topbar-h: 58px;
  --rail-w: 244px;
  --rail-right-w: 312px;
  --content-max: 760px;

  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

/* Neon yellow is a dark-room colour: on white it has almost no contrast at
   all. The light theme keeps it as a fill with near-black ink and drops to a
   deep olive wherever the accent has to be text. */
:root[data-theme='light'] {
  --bg: #efefe9;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4ee;
  --surface-3: #e7e7df;
  --line: #e1e1d8;
  --line-soft: #eeeee7;
  --line-strong: #c6c6ba;

  --text: #101008;
  --text-dim: #55554a;
  --text-faint: #83837a;

  --accent: #d9ec00;
  --accent-hover: #c6d800;
  --accent-lit: #b8c900;
  --accent-ink: #5a6600;
  --on-accent: #14150a;
  --accent-soft: rgb(150 168 0 / 0.16);
  --accent-line: rgb(150 168 0 / 0.42);

  --accent-2: #b8c900;
  --accent-2-ink: #4e5800;
  --on-accent-2: #14150a;
  --accent-2-soft: rgb(150 168 0 / 0.18);
  --accent-2-line: rgb(150 168 0 / 0.44);

  --accent-warm: #c25a08;
  --up: #5a6600;
  --down: #4a4a58;
  --ok: #4e6b00;
  --warn: #9a5a00;

  --topbar-bg: rgb(255 255 255 / 0.9);
  --backdrop: rgb(14 14 8 / 0.46);
  --mix-ink: #101008;
  --hairline: rgb(0 0 0 / 0.05);
  --cover-glyph: rgb(0 0 0 / 0.16);
  --cover-l1: 90%;
  --cover-l2: 82%;
  --cover-s: 50%;

  --shadow: 0 1px 2px rgb(18 18 10 / 0.07), 0 8px 24px -16px rgb(18 18 10 / 0.24);
  --shadow-lg: 0 24px 60px -22px rgb(18 18 10 / 0.3);
  --glow: 0 0 0 1px var(--accent-line), 0 6px 22px -12px rgb(150 168 0 / 0.34);
  --glow-2: var(--glow);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

body.is-gated {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 5px;
}

img {
  max-width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 20px 0;
}

.ico {
  display: block;
  flex-shrink: 0;
}

/* ==========================================================================
   Age gate
   ========================================================================== */

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 560px at 50% -8%, #35101d 0%, transparent 68%),
    rgba(4, 4, 7, 0.97);
  backdrop-filter: blur(14px);
}

.age-gate[hidden] {
  display: none;
}

.age-gate__panel {
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 38px 34px 30px;
  background: linear-gradient(180deg, #15151e 0%, #0c0c12 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.age-gate h1 {
  margin: 20px 0 12px;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.age-gate p {
  margin: 0 0 18px;
  color: var(--text-dim);
  font-size: 14.5px;
}

.age-gate__rules {
  margin: 0 0 24px;
  padding: 16px 18px;
  list-style: none;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--text-dim);
}

.age-gate__rules li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 9px;
}

.age-gate__rules li:last-child {
  margin-bottom: 0;
}

.age-gate__rules li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.age-gate__actions {
  display: grid;
  gap: 10px;
}

.age-gate__legal {
  margin: 20px 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.5;
}

/* ==========================================================================
   Top bar
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--topbar-bg);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--topbar-h);
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--accent) 0%, #c00f37 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 3px 14px -3px var(--accent-line);
}

.brand__word {
  font-size: 17px;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand--lg {
  justify-content: center;
}

.brand--lg .brand__mark {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  font-size: 18px;
}

.search {
  position: relative;
  flex: 1;
  max-width: 480px;
}

.search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  translate: 0 -50%;
  color: var(--text-faint);
  pointer-events: none;
}

.search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 38px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.search input::placeholder {
  color: var(--text-faint);
}

.search input:focus {
  border-color: var(--accent-line);
  background: var(--surface-2);
  outline: none;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.topbar__menu {
  display: none;
}

/* ==========================================================================
   Ticker
   ========================================================================== */

.ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 18px;
  border-top: 1px solid var(--line-soft);
  overflow: hidden;
  font-size: 12.5px;
}

.ticker[hidden] {
  display: none;
}

.ticker__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 3px 9px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 6px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ticker__label::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.ticker__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent);
}

.ticker__track {
  display: flex;
  gap: 28px;
  white-space: nowrap;
  width: max-content;
  animation: ticker-scroll 95s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker__item {
  color: var(--text-dim);
  transition: color 0.15s;
}

.ticker__item:hover {
  color: var(--text);
}

.ticker__item b {
  color: var(--accent);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 7px;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker__viewport { overflow-x: auto; }
  .ticker__label::before { animation: none; }
}

/* ==========================================================================
   Layout
   ========================================================================== */

.layout {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--rail-right-w);
  gap: 26px;
  max-width: 1460px;
  margin: 0 auto;
  padding: 22px 18px 72px;
  align-items: start;
}

.rail {
  position: sticky;
  top: calc(var(--topbar-h) + 48px);
  display: grid;
  gap: 14px;
  max-height: calc(100vh - var(--topbar-h) - 72px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.rail::-webkit-scrollbar {
  width: 6px;
}

.rail::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 3px;
}

.content {
  min-width: 0;
  max-width: var(--content-max);
  width: 100%;
  justify-self: center;
}

.content:focus {
  outline: none;
}

/* ==========================================================================
   Cards & panels
   ========================================================================== */

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

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
}

.panel__title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 11px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.panel__title .ico {
  color: var(--accent);
}

.panel--accent {
  background: linear-gradient(165deg, #1d1220 0%, var(--surface) 62%);
  border-color: var(--accent-line);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
}

.btn:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--line-strong);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn--ghost {
  background: transparent;
}

.btn--sm {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}

.btn--lg {
  height: 46px;
  padding: 0 22px;
  font-size: 15px;
}

.btn--block {
  width: 100%;
}

.btn--danger {
  color: #ff8f8f;
  border-color: #4d2530;
}

.btn--danger:hover:not(:disabled) {
  background: #2b141c;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-dim);
  cursor: pointer;
}

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

/* ==========================================================================
   Tabs & toolbar
   ========================================================================== */

.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 8px;
  margin-bottom: 14px;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs--sticky {
  position: sticky;
  top: calc(var(--topbar-h) + 42px);
  z-index: 20;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s, color 0.14s;
}

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

.tab[aria-selected='true'] {
  background: var(--accent-soft);
  color: var(--accent);
}

.tabs__spacer {
  flex: 1;
}

.select {
  height: 32px;
  padding: 0 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

/* View-mode switch */
.viewswitch {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.viewswitch button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--text-faint);
  cursor: pointer;
}

.viewswitch button:hover {
  color: var(--text);
}

.viewswitch button[aria-pressed='true'] {
  background: var(--surface-3);
  color: var(--accent);
}

/* ==========================================================================
   Media
   ========================================================================== */

.media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--tint, var(--surface-2));
  isolation: isolate;
}

.media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease), opacity 0.35s;
}

.media img[data-loaded='false'] {
  opacity: 0;
}

.post:hover .media img,
.newscard:hover .media img {
  transform: scale(1.035);
}

/* Generated cover for posts with no picture of their own. Deterministic from
   the post id, so a given thread always looks the same. */
.cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 15% 0%, hsl(var(--h1, 220) var(--cover-s) var(--cover-l1)) 0%, transparent 62%),
    radial-gradient(120% 120% at 85% 100%, hsl(var(--h2, 260) var(--cover-s) var(--cover-l2)) 0%, transparent 58%),
    var(--bg-elev);
  overflow: hidden;
}

.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    var(--angle, 115deg),
    var(--hairline) 0 1px,
    transparent 1px 11px
  );
}

.cover__glyph {
  position: relative;
  color: var(--cover-glyph);
}

.cover__glyph .ico {
  width: 46px;
  height: 46px;
}

/* Video click-to-play facade: nothing loads from YouTube until the reader
   actually asks for it. */
.media--video .media__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 0.45));
  cursor: pointer;
  z-index: 2;
}

.media__play-btn {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgb(255 45 85 / 0.94);
  color: #fff;
  box-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.8);
  transition: transform 0.2s var(--ease), background 0.2s;
}

.media__play-btn .ico {
  width: 30px;
  height: 30px;
  margin-left: 2px;
}

.media--video:hover .media__play-btn {
  transform: scale(1.08);
  background: var(--accent);
}

.media__badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgb(0 0 0 / 0.72);
  backdrop-filter: blur(6px);
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.media__badge .ico {
  width: 13px;
  height: 13px;
}

.media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
}

/* ==========================================================================
   Feed rows
   --------------------------------------------------------------------------
   A timeline, not a magazine. Three decisions carry the whole thing:

   1. Rows, not cards. A bordered rounded box per post turns a feed into a
      stack of floating rectangles; Reddit and X both put posts on one surface
      separated by hairlines, and move the border to :hover instead.
   2. Sans headlines. The serif is beautiful at 32px on an article page and
      unreadable as a scanning surface — a feed is scanned, not read.
   3. No picture unless there is a picture. A generated gradient square is
      130px of nothing; X simply omits the media slot, and the row gets denser
      for free.

   Target density is 7–8 rows per 1100px viewport, against the 3 this replaces.
   ========================================================================== */

.feed {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.post {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.12s var(--ease);
}

.post:last-child { border-bottom: 0; }
.post:hover { background: var(--surface-2); }

.post--pinned::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}

/* --- identity ------------------------------------------------------------ */

.post__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--board-accent, #8a8a9c) 16%, var(--surface));
  color: color-mix(in srgb, var(--board-accent, #8a8a9c) 88%, var(--mix-ink));
  border: 1px solid color-mix(in srgb, var(--board-accent, #8a8a9c) 24%, transparent);
  flex: none;
}

.post__avatar .ico { width: 18px; height: 18px; }

.post__main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.post__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.4;
}

.post__board {
  font-weight: 700;
  color: var(--text);
}
.post__board:hover { color: var(--accent); text-decoration: none; }

.post__author { color: var(--text-dim); font-weight: 500; }
.post__author:hover { color: var(--text); }
.post__dot { opacity: 0.6; }

/* --- body ---------------------------------------------------------------- */

.post__title {
  margin: 1px 0 0;
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 640;
  line-height: 1.32;
  letter-spacing: -0.011em;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post__title a { color: inherit; }
.post__title a:hover { text-decoration: none; color: var(--accent); }

.post__excerpt {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post__source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin-top: 3px;
  max-width: 100%;
  padding: 1px 8px 1px 6px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 600;
}
.post__source:hover { color: var(--accent); text-decoration: none; }
.post__source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- media --------------------------------------------------------------- */

.post__media {
  grid-column: 2;
  display: block;
  margin-top: 8px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.post__media .media { aspect-ratio: 2 / 1; }

/* A row with a small side thumbnail rather than a banner: used by compact and
   by any row whose picture is incidental to the headline. */
.post--thumb { grid-template-columns: 38px minmax(0, 1fr) 92px; }
.post--thumb .post__media {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  margin-top: 0;
  width: 92px;
}
.post--thumb .post__media .media { aspect-ratio: 4 / 3; }

/* --- actions ------------------------------------------------------------- */

.post__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 29px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: 600 12.5px/1 var(--sans);
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}

.action:hover { background: var(--surface-3); color: var(--text); }
.action .ico { width: 16px; height: 16px; opacity: 0.9; }
.action[data-on='true'] { color: var(--accent); }

.votepill {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 29px;
  padding: 0 2px;
  border-radius: 999px;
  background: var(--surface-3);
}

.vote-btn {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.12s var(--ease);
}

.vote-btn .ico { width: 15px; height: 15px; }
.vote-btn:hover { background: var(--surface); color: var(--text); }
.vote-btn[data-active='up'] { color: var(--up); transform: translateY(-1px); }
.vote-btn[data-active='down'] { color: var(--down); transform: translateY(1px); }

.vote-score {
  min-width: 22px;
  padding: 0 2px;
  text-align: center;
  font: 700 12.5px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.vote-score[data-state='up'] { color: var(--up); }
.vote-score[data-state='down'] { color: var(--down); }

/* --- compact view -------------------------------------------------------- */

.feed--compact .post { padding: 9px 14px; gap: 10px; grid-template-columns: 28px minmax(0, 1fr) 64px; }
.feed--compact .post__avatar { width: 28px; height: 28px; }
.feed--compact .post__avatar .ico { width: 14px; height: 14px; }
.feed--compact .post__title { font-size: 14.5px; -webkit-line-clamp: 2; }
.feed--compact .post__excerpt,
.feed--compact .post__source,
.feed--compact .topics { display: none; }
.feed--compact .post__media { grid-column: 3; grid-row: 1; margin-top: 0; width: 64px; }
.feed--compact .post__media .media { aspect-ratio: 1 / 1; }
.feed--compact .post__actions { margin-top: 4px; }
.feed--compact .action { height: 26px; padding: 0 7px; font-size: 12px; }
.feed--compact .votepill { height: 26px; }
.feed--compact .vote-btn { width: 24px; height: 24px; }

/* --- classic view: the old-Reddit vote rail ------------------------------ */

.feed--classic .post { grid-template-columns: 34px 38px minmax(0, 1fr) 92px; gap: 10px; }
.feed--classic .votes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding-top: 2px;
}
.feed--classic .votes .vote-btn { width: 26px; height: 26px; }
.feed--classic .votes .vote-score { font-size: 12px; }
.feed--classic .post__media { grid-column: 4; grid-row: 1; margin-top: 0; width: 92px; }
.feed--classic .post__media .media { aspect-ratio: 4 / 3; }
.feed--classic .post__actions .votepill { display: none; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 760px) {
  .feed { border-left: 0; border-right: 0; border-radius: 0; }
  .post { padding: 11px 13px; grid-template-columns: 32px minmax(0, 1fr); gap: 9px; }
  .post--thumb { grid-template-columns: 32px minmax(0, 1fr) 74px; }
  .post--thumb .post__media { width: 74px; }
  .post__avatar { width: 32px; height: 32px; }
  .post__title { font-size: 15.5px; }
  .post__excerpt { font-size: 13px; -webkit-line-clamp: 2; }
  .feed--classic .post { grid-template-columns: 30px minmax(0, 1fr) 74px; }
  .feed--classic .post__media { grid-column: 3; }
  .action .btn-label { display: none; }
  .action { padding: 0 8px; }
}


/* ==========================================================================
   Flair & badges
   ========================================================================== */

.flair {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.flair--wire {
  background: rgb(47 212 138 / 0.14);
  color: #6fe0ab;
}

.flair--news {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge--admin {
  background: var(--accent-soft);
  color: var(--accent);
}

.badge--mod {
  background: rgb(47 212 138 / 0.14);
  color: var(--ok);
}

.badge--removed {
  background: rgb(255 77 77 / 0.16);
  color: #ff9a9a;
}

/* ==========================================================================
   Newsroom
   ========================================================================== */

.news-hero {
  padding: 24px 24px 22px;
  margin-bottom: 16px;
  background:
    radial-gradient(90% 140% at 0% 0%, rgb(255 45 85 / 0.14) 0%, transparent 60%),
    var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
}

.news-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px 10px;
  background: var(--accent-soft);
  border-radius: 6px;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.news-hero h1 {
  margin: 0 0 9px;
  font-family: var(--serif);
  font-size: 33px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.022em;
}

.news-hero p {
  margin: 0;
  color: var(--text-dim);
  font-size: 14.5px;
  max-width: 62ch;
}

/* Lead story */
.newslead {
  position: relative;
  display: block;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: border-color 0.18s, box-shadow 0.18s;
}

.newslead:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow);
}

.newslead .media {
  aspect-ratio: 16 / 8;
}

.newslead__body {
  padding: 18px 20px 18px;
}

.newslead h2 {
  margin: 8px 0 8px;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.newslead p {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: 14.5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Two-up grid beneath the lead */
.newsgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.newscard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.newscard:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.newscard .media {
  aspect-ratio: 16 / 9;
}

.newscard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 14px 12px;
}

.newscard h3 {
  margin: 6px 0 6px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: -0.008em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.newscard__foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-faint);
}

.source-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 12px;
}

.section-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.section-head__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ==========================================================================
   Board header
   ========================================================================== */

.board-head {
  position: relative;
  padding: 22px 22px 18px;
  margin-bottom: 14px;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--board-accent, #ff2d55) 18%, transparent) 0%, var(--surface) 58%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.board-head__top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.board-head__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--board-accent, #ff2d55) 20%, var(--surface-2));
  border: 1px solid var(--line);
  color: color-mix(in srgb, var(--board-accent, #ff2d55) 75%, white);
  flex-shrink: 0;
}

.board-head__icon .ico {
  width: 25px;
  height: 25px;
}

.board-head h1 {
  margin: 0 0 3px;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.018em;
}

.board-head__tagline {
  margin: 0;
  color: var(--text-dim);
  font-size: 13.5px;
}

.board-head__desc {
  margin: 13px 0 0;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.55;
}

.board-head__stats {
  display: flex;
  gap: 18px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-faint);
}

.board-head__stats b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Post detail & prose
   ========================================================================== */

.detail {
  padding: 0;
}


.detail__head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
}

.detail__body {
  padding: 14px 20px 16px;
  min-width: 0;
}

.detail .post__title {
  font-size: 31px;
  line-height: 1.16;
  letter-spacing: -0.022em;
  margin-bottom: 12px;
}

.prose {
  font-size: 16px;
  line-height: 1.7;
  color: #d8dae2;
}

.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }

.prose p {
  margin: 0 0 15px;
}

.prose h3 {
  margin: 24px 0 10px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.prose strong {
  color: #fff;
  font-weight: 650;
}

.prose ul,
.prose ol {
  margin: 0 0 15px;
  padding-left: 22px;
}

.prose li {
  margin-bottom: 7px;
}

.prose blockquote {
  margin: 0 0 15px;
  padding: 3px 0 3px 16px;
  border-left: 3px solid var(--accent-line);
  color: var(--text-dim);
}

.prose code {
  padding: 1px 6px;
  background: var(--surface-3);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.87em;
}

.prose a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--accent);
}

/* ==========================================================================
   Comments
   ========================================================================== */

.comments {
  margin-top: 16px;
}

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

.comments__count {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dim);
}

.comment {
  position: relative;
}

.comment__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 0;
}

.comment__gutter {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.comment__thread-line {
  flex: 1;
  width: 2px;
  margin-top: 7px;
  border-radius: 1px;
  border: 0;
  padding: 0;
  background: var(--line);
  cursor: pointer;
  transition: background 0.15s;
}

.comment__thread-line:hover {
  background: var(--accent);
}

.comment__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--av-a, #333) 0%, var(--av-b, #555) 100%);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #08080c;
  flex-shrink: 0;
}

.comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.comment__author {
  font-weight: 700;
  color: var(--text);
}

.comment__author:hover {
  color: var(--accent);
}

.comment__author--op {
  color: #7aa5ff;
}

.comment__text {
  font-size: 14.5px;
  line-height: 1.62;
  color: #d3d5df;
}

.comment__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  margin-left: -6px;
}

.comment__vote {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.comment__vote .vote-btn {
  width: 24px;
  height: 22px;
}

.comment__vote .vote-btn .ico {
  width: 13px;
  height: 13px;
}

.comment__score {
  min-width: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.comment__children {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--line-soft);
}

.comment.is-collapsed > .comment__children,
.comment.is-collapsed .comment__text,
.comment.is-collapsed .comment__actions {
  display: none;
}

.comment__toggle {
  padding: 0 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text-faint);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.comment__toggle:hover {
  color: var(--text);
}

.comment--removed .comment__text {
  color: var(--text-faint);
  font-style: italic;
}

/* ==========================================================================
   Composer & forms
   ========================================================================== */

.composer {
  margin-top: 6px;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 15px;
}

.field__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.field__hint {
  font-size: 12px;
  color: var(--text-faint);
}

.input,
.textarea {
  width: 100%;
  padding: 11px 13px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  resize: vertical;
}

.textarea {
  min-height: 112px;
  line-height: 1.6;
}

.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--surface);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-faint);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.form-error {
  padding: 10px 13px;
  margin-bottom: 12px;
  background: rgb(255 45 85 / 0.1);
  border: 1px solid rgb(255 45 85 / 0.32);
  border-radius: var(--radius-sm);
  color: #ffadad;
  font-size: 13.5px;
}

.form-note {
  padding: 10px 13px;
  margin-bottom: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 12.5px;
}

/* ==========================================================================
   Rails
   ========================================================================== */

.board-list {
  display: grid;
  gap: 1px;
}

.board-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.12s, color 0.12s;
}

.board-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.board-link[aria-current='page'] {
  background: var(--accent-soft);
  color: var(--text);
}

.board-link__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--board-accent, #6e6f82) 18%, transparent);
  color: color-mix(in srgb, var(--board-accent, #9a9aab) 82%, var(--mix-ink));
  flex-shrink: 0;
}

.board-link__icon .ico {
  width: 15px;
  height: 15px;
}

.board-link__count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.stat {
  padding: 10px 11px;
  background: var(--surface);
}

.stat__value {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stat__label {
  font-size: 11px;
  color: var(--text-faint);
}

.stat--live .stat__value {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ok);
}

.stat--live .stat__value::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgb(47 212 138 / 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}

/* Trending list */
.trend {
  display: flex;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}

.trend:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.trend__rank {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-faint);
  line-height: 1;
  min-width: 18px;
}

.trend:hover .trend__rank {
  color: var(--accent);
}

.trend__title {
  font-size: 13px;
  line-height: 1.38;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trend:hover .trend__title {
  color: var(--text);
}

.trend__meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-faint);
}

.trend__meta b {
  color: var(--accent);
}

.wire-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.42;
  color: var(--text-dim);
}

.wire-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.wire-item:hover {
  color: var(--text);
}

.wire-item__thumb {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.wire-item__src {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}

.rule-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

.rule-list li {
  margin-bottom: 7px;
}

/* ==========================================================================
   Profile
   ========================================================================== */

.profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  margin-bottom: 14px;
  background:
    radial-gradient(80% 160% at 0% 0%, rgb(255 45 85 / 0.1) 0%, transparent 62%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.profile-head__avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--av-a, #333) 0%, var(--av-b, #555) 100%);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  color: #08080c;
  flex-shrink: 0;
}

.profile-head h1 {
  margin: 0 0 2px;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.profile-head__bio {
  margin: 5px 0 0;
  color: var(--text-dim);
  font-size: 13.5px;
}

.profile-karma {
  display: flex;
  gap: 16px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.profile-karma b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Mod queue
   ========================================================================== */

.report {
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
}

.report__reason {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 3px;
}

.report__meta {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 9px;
}

.report__target {
  padding: 11px 13px;
  margin-bottom: 10px;
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-dim);
  max-height: 160px;
  overflow: auto;
}

/* ==========================================================================
   Modal
   ========================================================================== */

.modal-root:empty {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--backdrop);
  backdrop-filter: blur(8px);
  animation: fade-in 0.14s ease-out;
}

.modal {
  width: min(470px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px 26px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: pop-in 0.17s var(--ease);
}

.modal h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.modal__sub {
  margin: 0 0 18px;
  color: var(--text-dim);
  font-size: 13.5px;
}

.modal__close {
  float: right;
  margin: -8px -8px 0 0;
}

.modal--wide {
  width: min(680px, 100%);
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

/* Keyboard shortcut help */
.keys {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  font-size: 13.5px;
  color: var(--text-dim);
}

kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 7px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11.5px;
  text-align: center;
}

/* ==========================================================================
   Toasts
   ========================================================================== */

.toasts {
  position: fixed;
  bottom: 18px;
  left: 50%;
  translate: -50% 0;
  z-index: 180;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  animation: toast-in 0.2s var(--ease);
}

.toast--error {
  border-color: rgb(255 45 85 / 0.4);
  background: #26131b;
  color: #ffc0c0;
}

.toast--ok {
  border-color: rgb(47 212 138 / 0.32);
  background: #0f2119;
  color: #a7f3d0;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ==========================================================================
   States
   ========================================================================== */

.empty {
  padding: 48px 22px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.empty h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
}

.empty p {
  margin: 0 0 16px;
  color: var(--text-dim);
  font-size: 14px;
}

.skeleton {
  display: grid;
  gap: 14px;
}

.skeleton__row {
  height: 210px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .skeleton__row { animation: none; }
  .media img { transition: none; }
  .post:hover .media img,
  .newscard:hover .media img { transform: none; }
}

.loader {
  padding: 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

.sentinel {
  height: 1px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}

.footer__inner {
  max-width: 1460px;
  margin: 0 auto;
  padding: 28px 18px 36px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.footer__inner p {
  margin: 0 0 8px;
}

.footer__legal {
  max-width: 76ch;
  line-height: 1.6;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
}

.footer__links a:hover {
  color: var(--accent);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .layout {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
  }
  .rail--right {
    display: none;
  }
}

.mobile-only {
  display: none;
}

@media (max-width: 880px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 12px 56px;
  }

  .rail--left {
    position: fixed;
    inset: var(--topbar-h) auto 0 0;
    z-index: 70;
    width: 268px;
    max-height: none;
    height: calc(100vh - var(--topbar-h));
    padding: 16px 12px;
    background: var(--bg-elev);
    border-right: 1px solid var(--line);
    transform: translateX(-102%);
    transition: transform 0.22s var(--ease);
  }

  body.nav-open .rail--left {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .topbar__menu {
    display: grid;
  }

  .mobile-only {
    display: block;
  }

  .brand__word {
    display: none;
  }

  .newsgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-hero h1 { font-size: 26px; }
  .newslead h2 { font-size: 24px; }
  .detail .post__title { font-size: 25px; }
  .post__title { font-size: 19px; }

  .comment__children {
    margin-left: 8px;
    padding-left: 9px;
  }

  .tabs--sticky {
    top: calc(var(--topbar-h) + 2px);
  }
}

@media (max-width: 720px) {
  .topbar__nav .nav-desktop,
  .topbar__nav .btn-label {
    display: none;
  }
  .topbar__nav .btn {
    padding: 0 10px;
  }
}

@media (max-width: 560px) {
  .topbar__inner {
    gap: 8px;
    padding: 0 12px;
  }
  .search {
    max-width: none;
    min-width: 0;
  }
  .post__body {
    padding: 12px 13px 10px;
  }
  .detail__body {
    padding: 13px 15px;
  }
  .detail__head {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .feed--classic .post {
    grid-template-columns: 42px 90px minmax(0, 1fr);
  }
  .news-hero { padding: 18px 16px 16px; }
  .newslead__body { padding: 14px 15px; }
}

/* ===========================================================================
   Explicit-media gate
   ---------------------------------------------------------------------------
   Blurred artwork still needs to look deliberate rather than broken. The image
   itself is rendered pre-blurred by the proxy at 18% scale; CSS adds a slight
   extra blur and a scale so no hard edge survives at the frame boundary.
   =========================================================================== */

.media--gated img {
  filter: blur(6px) saturate(0.75);
  transform: scale(1.12);
}

.media__gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  background: linear-gradient(180deg, var(--scrim-soft), var(--scrim));
  backdrop-filter: saturate(0.8);
  transition: background 0.18s var(--ease);
}

.media__gate:hover { background: linear-gradient(180deg, rgb(10 10 16 / 0.22), rgb(10 10 16 / 0.48)); }
.media__gate:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

.media__gate-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.22);
}

.media__gate-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.7);
}

/* Compact and thumbnail slots have no room for the caption. */
.feed--compact .media__gate-label,
.post--text .media__gate-label,
.wire-item .media__gate-label { display: none; }
.feed--compact .media__gate-icon,
.post--text .media__gate-icon,
.wire-item .media__gate-icon { width: 30px; height: 30px; }

.media__runtime {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 2px 6px;
  border-radius: 5px;
  font: 600 11.5px/1.5 var(--mono);
  color: #fff;
  background: rgb(0 0 0 / 0.78);
  letter-spacing: 0.02em;
  pointer-events: none;
}

.nsfw-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.nsfw-bar__icon { display: grid; place-items: center; color: var(--text-dim); flex: none; }
.nsfw-bar__text { flex: 1; min-width: 0; font-size: 13px; color: var(--text-dim); }
.nsfw-bar__text b { color: var(--text); font-weight: 600; }

/* ===========================================================================
   Reactions
   =========================================================================== */

.reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  position: relative;
}

.reactions--compact { margin-top: 6px; }

.reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  min-height: 25px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-dim);
  font: 600 12px/1 var(--sans);
  cursor: pointer;
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease), transform 0.14s var(--ease);
}

.reaction:hover { background: var(--surface-3); transform: translateY(-1px); }

.reaction--mine {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}

.reaction__emoji { font-size: 13px; line-height: 1; }
.reaction__n { font-variant-numeric: tabular-nums; }

.reaction--add { padding: 2px 7px; color: var(--text-faint); }
.reaction--add:hover { color: var(--text); }
/* An empty reaction row should not draw the eye — it is an offer, not a control. */
.reactions:not(:has(.reaction:not(.reaction--add))) .reaction--add {
  background: transparent;
  border-color: transparent;
}
.reactions:not(:has(.reaction:not(.reaction--add))) .reaction--add:hover {
  background: var(--surface-2);
  border-color: var(--line);
}

.react-picker {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 7px);
  left: 0;
  display: flex;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  animation: pickerIn 0.14s var(--ease);
}

@keyframes pickerIn {
  from { opacity: 0; transform: translateY(5px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.react-picker__btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.12s var(--ease), transform 0.12s var(--ease);
}

.react-picker__btn:hover { background: var(--surface-3); transform: scale(1.18); }

/* ===========================================================================
   Topics
   =========================================================================== */

.topics { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }

.topic {
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease);
}

.topic::before { content: '#'; opacity: 0.5; margin-right: 2px; }
.topic:hover { color: var(--text); border-color: var(--accent-line); }

.topiclist { list-style: none; margin: 0; padding: 0; }

.topiclist a {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 4px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background 0.14s var(--ease);
}

.topiclist a:hover { background: var(--surface-2); }
.topiclist__rank { font: 700 12px/1 var(--mono); color: var(--text-faint); }
.topiclist__label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topiclist__n {
  font: 600 11px/1 var(--mono);
  color: var(--text-faint);
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--surface-2);
}

.news-hero--topic h1::before { content: '#'; color: var(--accent); margin-right: 4px; }

/* ===========================================================================
   Theatre — media-first shelf for the video boards
   =========================================================================== */

.feed--theatre {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px;
}

.tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.16s var(--ease), transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.tile:hover {
  border-color: var(--line);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.tile__media { position: relative; display: block; text-decoration: none; }
.tile__media .media { aspect-ratio: 16 / 9; border-radius: 0; }

.tile__watch {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--scrim);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}

.tile:hover .tile__watch { opacity: 1; transform: none; }
/* Never advertise the outbound click over a gated thumbnail. */
.tile__media:has(.media--gated) .tile__watch { display: none; }

.tile__body { display: flex; flex-direction: column; gap: 7px; padding: 11px 13px 12px; }

.tile__title { margin: 0; font-size: 14.5px; line-height: 1.35; font-weight: 620; }
.tile__title a { color: var(--text); text-decoration: none; }
.tile__title a:hover { color: var(--accent); }

.tile__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  font-size: 11.5px;
  color: var(--text-faint);
}
.tile__stats span { display: inline-flex; align-items: center; gap: 4px; }
.tile__stats .ico { opacity: 0.75; }

.tile__actions { display: flex; align-items: center; gap: 5px; margin-top: 2px; }

/* ===========================================================================
   Wire status + new-posts pill
   =========================================================================== */

.panel--warn { border-color: rgb(251 191 36 / 0.28); background: rgb(251 191 36 / 0.05); }
.panel__note { margin: 0 0 9px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.panel__note b { color: var(--text); }

.sourcelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sourcelist li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.sourcelist__kind {
  margin-left: auto;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dot--down { background: var(--warn); box-shadow: 0 0 0 3px rgb(251 191 36 / 0.14); }

.newpill-slot { display: flex; justify-content: center; margin-bottom: 10px; }

.newpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text);
  font: 600 13px/1 var(--sans);
  cursor: pointer;
  backdrop-filter: blur(8px);
  animation: pillIn 0.24s var(--ease);
  transition: background 0.14s var(--ease);
}

.newpill:hover { background: rgb(255 45 85 / 0.2); }

@keyframes pillIn {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: none; }
}

.detail__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 10px 0 2px;
  font-size: 12.5px;
  color: var(--text-faint);
}
.detail__stats span { display: inline-flex; align-items: center; gap: 5px; }

.empty__note { font-size: 12.5px; color: var(--text-faint); margin-top: 8px; }

@media (max-width: 640px) {
  .feed--theatre { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 11px; }
  .tile__body { padding: 9px 10px 10px; gap: 5px; }
  .tile__title { font-size: 13px; }
  .tile__watch { display: none; }
  .nsfw-bar { flex-wrap: wrap; }
  .nsfw-bar__text { flex-basis: 100%; order: 3; }
}

/* The reaction row lives inside the action bar rather than on a line of its
   own: a solitary emoji button under a card reads as an artefact, where the
   same control beside vote/comment/save reads as one more thing you can do. */
.post__actions .reactions,
.tile__actions .reactions { margin-top: 0; }

.post__actions { flex-wrap: wrap; }

/* Denser shelf. Two 370px tiles in a 760px column is a magazine spread, not a
   listing of what is being watched — three reads as a shelf. */
.feed--theatre { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }

/* Mobile overrides must come after the desktop shelf rule above, or the wider
   minmax wins on equal specificity and the grid collapses to one column. */
@media (max-width: 640px) {
  .feed--theatre { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }

  /* Icon and copy on one line, the control on its own — a primary button
     wedged between an icon and its own explanation reads as unrelated. */
  .nsfw-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 10px;
    align-items: start;
  }
  .nsfw-bar__icon { margin-top: 1px; }
  .nsfw-bar__text { flex-basis: auto; order: 0; }
  .nsfw-bar .btn { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
}

.empty__actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 14px; }

/* ===========================================================================
   Theme toggle
   =========================================================================== */

.theme-toggle { position: relative; flex: none; }
.theme-toggle .ico { transition: opacity 0.18s var(--ease), transform 0.28s var(--ease); }
.theme-toggle__moon { position: absolute; inset: 0; margin: auto; }

/* Show the destination, not the current state: the sun means "go light". */
.theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.theme-toggle__moon { opacity: 1; transform: none; }

:root[data-theme='dark'] .theme-toggle__sun { opacity: 1; transform: none; }
:root[data-theme='dark'] .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle__sun { opacity: 1; transform: none; }
  :root:not([data-theme='light']) .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
}

/* ===========================================================================
   Ad slots
   ---------------------------------------------------------------------------
   Collapsed until the frame says a creative arrived. No border, no filled
   well, no reserved grey box — just the creative and a 9px label, so a page
   with no inventory looks like a page with no ads rather than a page of holes.
   =========================================================================== */

.adslot {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  /* Collapsed: zero height, zero margin, invisible. */
  height: 0;
  margin: 0;
  opacity: 0;
  transition: height 0.18s var(--ease-out), margin 0.18s var(--ease-out), opacity 0.2s var(--ease-out);
}

.adslot[data-state='filled'] {
  height: auto;
  margin: 0 auto 14px;
  opacity: 1;
  text-align: center;
}

.adslot__label {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0.55;
}

.adslot__frame {
  display: block;
  margin: 0 auto;
  border: 0;
  width: var(--ad-w, 100%);
  height: var(--ad-h, 90px);
  max-width: 100%;
  color-scheme: light;
}

.adslot--native,
.adslot--native .adslot__frame { width: 100%; }
.adslot--native .adslot__frame { height: var(--ad-h, 320px); }

/* Until the verdict arrives the frame still has to be in the document to load
   at all, so it is laid out but clipped to nothing by the collapsed host. */
.adslot:not([data-state]) .adslot__frame,
.adslot[data-state='empty'] .adslot__frame { visibility: hidden; }

/* ===========================================================================
   Rails, de-boxed
   ---------------------------------------------------------------------------
   The nav was three bordered panels stacked in a column, which reads as three
   unrelated widgets rather than one list of places to go. Reddit's sidebar is
   a single continuous column with hairline dividers, and that is all this is.
   =========================================================================== */

.rail--left .panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 12px;
}

.rail--left .panel + .panel {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.rail--left .panel__title {
  margin-bottom: 6px;
  padding: 0 9px;
  font-size: 10px;
  letter-spacing: 0.13em;
}

.rail--left .board-link { padding: 7px 9px; font-size: 13.5px; }
.rail--left .board-link__icon { width: 24px; height: 24px; border-radius: 7px; }
.rail--left .board-link__icon .ico { width: 14px; height: 14px; }

.rail { gap: 0; }
.rail--right { gap: 12px; display: grid; }
.rail--right .panel { padding: 13px 14px; }

/* ===========================================================================
   Composer bar
   ---------------------------------------------------------------------------
   Reddit puts a fake input at the top of every feed. It is the single highest-
   converting affordance on the page: a text box that already looks like the
   thing you would type into beats a button labelled "submit" by a wide margin,
   because it costs nothing to imagine yourself using it.
   =========================================================================== */

.composer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.composer-bar__avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-dim);
  font: 800 12px/1 var(--sans);
}

.composer-bar__field {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s var(--ease), background 0.14s var(--ease);
}

.composer-bar__field:hover {
  border-color: var(--accent-line);
  background: var(--surface);
}

.composer-bar__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.composer-bar__btn:hover { background: var(--surface-3); color: var(--text); }

@media (max-width: 760px) {
  .composer-bar { border-radius: 0; border-left: 0; border-right: 0; }
  .composer-bar__btn { display: none; }
}

/* A banner sits inside the post body, above the action bar — the picture is
   part of the post, not a footnote to it. Capped because a 2:1 image in a
   940px column is 470px tall, which is one post per screen. */
.post__main .post__media {
  grid-column: auto;
  margin: 9px 0 2px;
  max-width: 100%;
}

.post__main .post__media .media {
  aspect-ratio: 16 / 9;
  max-height: 330px;
}

.post__main .post__media .media img { object-fit: cover; }

/* ===========================================================================
   Expando
   ---------------------------------------------------------------------------
   A side thumbnail that grows into a banner in place. This is the single
   decision that separates a feed you can scan from one you scroll past: a
   banner on every row fits two posts on a screen, a thumbnail fits eight, and
   the picture is still one click away without leaving the feed.
   =========================================================================== */

button.post__media {
  position: relative;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  cursor: zoom-in;
  transition: border-color 0.14s var(--ease);
}

button.post__media:hover { border-color: var(--line-strong); }

.post__expand {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--scrim);
  color: var(--on-scrim);
  transition: transform 0.16s var(--ease);
}

.post--expanded button.post__media { cursor: zoom-out; }
.post--expanded .post__expand { transform: rotate(45deg); }

/* Expanded: the thumbnail column collapses and the picture spans the body. */
.post--expanded.post--thumb { grid-template-columns: 38px minmax(0, 1fr); }

.post--expanded .post__media {
  grid-column: 2;
  grid-row: auto;
  width: 100% !important;
  margin-top: 9px;
}

.post--expanded .post__media .media {
  aspect-ratio: auto;
  max-height: 460px;
}

.post--expanded .post__media .media img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  background: var(--surface-2);
}

@media (max-width: 760px) {
  .post--expanded.post--thumb { grid-template-columns: 32px minmax(0, 1fr); }
  .post--expanded .post__media .media,
  .post--expanded .post__media .media img { max-height: 320px; }
}

/* --- density pass --------------------------------------------------------
   The source moved onto the meta line, and the chrome above the first post
   was 330px against Reddit's ~110. Every value below is one of those two. */

.post__source {
  align-self: auto;
  margin-top: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--text-faint);
  font-size: 12.5px;
  font-weight: 500;
  gap: 3px;
}
.post__source .ico { opacity: 0.6; }

.post { padding: 11px 14px; }
.post__main { gap: 2px; }
.post__title { font-size: 16px; -webkit-line-clamp: 2; }
.post__excerpt { -webkit-line-clamp: 2; font-size: 13px; margin-top: 3px; }
.post__actions { margin-top: 6px; }
.topics { margin-top: 6px; }

.adslot[data-state='filled'] { padding: 2px 0; }
.composer-bar { padding: 7px 9px; margin-bottom: 11px; }
.composer-bar__avatar, .composer-bar__btn { width: 32px; height: 32px; }
.composer-bar__field { height: 34px; }
.tabs { margin-bottom: 11px; padding: 5px 7px; }

/* ===========================================================================
   LN — typographic and chrome pass
   ---------------------------------------------------------------------------
   The palette change alone is a recolour. What makes it read as a motorsport
   brand is the type: uppercase micro-labels with wide tracking against tight,
   heavy headlines, and hard-edged chrome instead of soft consumer roundels.
   =========================================================================== */

/* Anything sitting on an accent fill needs dark ink — the fill is electric in
   both themes, so white text on it is unreadable in both. */
.btn--primary,
.brand__mark,
.newpill,
.badge--admin { color: var(--on-accent) !important; }

.btn--primary { border-color: var(--accent); font-weight: 700; letter-spacing: 0.01em; }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

.brand__mark {
  background: var(--accent);
  border-radius: 6px;
  font-weight: 900;
  letter-spacing: -0.02em;
  box-shadow: none;
}

.brand__word {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  font-size: 16px;
}

/* --- micro-labels --------------------------------------------------------
   Section headers, flair, stat captions: 10px, 800, wide tracking, uppercase.
   This is the single most recognisable move in the reference and it costs
   nothing but discipline about where it is allowed. */

.panel__title,
.adslot__label,
.ticker__label,
.stat__label,
.news-hero__kicker,
.section-head h2 {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
}

.stat__label { font-size: 9.5px; color: var(--text-faint); }
.section-head h2 { font-size: 12px; }
.panel__title .ico { color: var(--accent-ink); }

.flair {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 800;
  font-size: 9.5px;
  border-radius: 3px;
}

/* --- headlines ------------------------------------------------------------ */

.post__title { font-weight: 700; letter-spacing: -0.018em; }

.board-head h1,
.news-hero h1,
.detail .post__title {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-transform: uppercase;
}

.board-head h1 { font-size: clamp(28px, 4vw, 44px); }
.news-hero h1 { font-size: clamp(30px, 4.6vw, 52px); }

/* The article page keeps the serif — a body of prose is read, not scanned. */
.detail .post__title {
  font-family: var(--serif);
  text-transform: none;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.14;
}

/* --- chrome --------------------------------------------------------------- */

.stat__value { font-weight: 800; letter-spacing: -0.03em; }
.vote-score, .topiclist__rank, .trend__rank { font-variant-numeric: tabular-nums; }

/* Selected tab gets an accent underline rather than a filled pill: a bright
   lime lozenge at 14px is a traffic cone. */
.tab[aria-selected='true'] {
  background: transparent;
  color: var(--text);
  position: relative;
}
.tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.tab[aria-selected='true'] .ico { color: var(--accent-ink); }

.board-link[aria-current='page'] {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}

.vote-btn[data-active='up'] { color: var(--on-accent); background: var(--accent); }
.vote-btn[data-active='up']:hover { background: var(--accent-hover); }
.vote-score[data-state='up'] { color: var(--accent-ink); }

.post__avatar { border-radius: 8px; }
.composer-bar__avatar { border-radius: 8px; }

/* --- motion --------------------------------------------------------------- */

.post { transition: background 0.14s var(--ease), box-shadow 0.14s var(--ease); }
.post:hover { box-shadow: inset 3px 0 0 var(--accent-line); }

.btn, .action, .reaction, .topic, .board-link {
  transition: background 0.14s var(--ease), color 0.14s var(--ease),
              border-color 0.14s var(--ease), transform 0.14s var(--ease);
}
.btn--primary:hover:not(:disabled) { transform: translateY(-1px); }

.tile:hover { border-color: var(--accent-line); box-shadow: var(--glow); }
.topic:hover { border-color: var(--accent-line); color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===========================================================================
   Communities
   =========================================================================== */

.commgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
}

.comm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.14s var(--ease), transform 0.14s var(--ease), box-shadow 0.14s var(--ease);
}

.comm:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: var(--glow);
}

.comm__head { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }

.comm__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 8px;
  background: color-mix(in srgb, var(--board-accent, #8a8a9c) 18%, var(--surface));
  color: color-mix(in srgb, var(--board-accent, #8a8a9c) 88%, var(--mix-ink));
  border: 1px solid color-mix(in srgb, var(--board-accent, #8a8a9c) 26%, transparent);
}

.comm__names { display: flex; flex-direction: column; min-width: 0; }
.comm__name { font-weight: 700; font-size: 14px; letter-spacing: -0.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm__slug { font: 500 11.5px/1.4 var(--mono); color: var(--text-faint); }

.comm__tagline {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.comm__stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--text-faint); }
.comm__stats b { color: var(--text); font-weight: 700; }
.comm__live b { color: var(--accent-ink); }

.comm__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.comm__owner { flex: 1; min-width: 0; font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- rules panel ---------------------------------------------------------- */

.rules {
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.rules__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.rules__summary::-webkit-details-marker { display: none; }
.rules__count { margin-left: auto; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.rules__list { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 1px; }

.rule {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 10px;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
}
.rule:hover { background: var(--surface-2); }

.rule__n {
  font: 800 12px/1.5 var(--mono);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.rule__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rule__title { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.rule__detail { font-size: 12px; color: var(--text-dim); line-height: 1.45; }

/* The citation count is the point of the whole system, so it is a real number
   with a real weight, not a footnote. Zero stays grey; anything above it goes
   accent, because "this rule is actually used" is the signal. */
.rule__cited {
  min-width: 30px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-faint);
  font: 800 11.5px/1.5 var(--mono);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rule__cited--live { background: var(--accent-soft); color: var(--accent-ink); }

.rules__mods { margin: 11px 0 0; font-size: 12px; color: var(--text-dim); }
.rules__mods a { color: var(--text); }
.rules .btn { margin-top: 11px; }

/* --- founding form -------------------------------------------------------- */

.slugfield { display: flex; align-items: center; gap: 0; }
.slugfield span {
  padding: 0 10px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-faint);
  font: 600 13px/1 var(--mono);
}
.slugfield .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--mono); }

.rulerow {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  margin-bottom: 8px;
}
.rulerow__n { font: 800 12px/2.6 var(--mono); color: var(--text-faint); text-align: center; }
.rulerow__fields { display: grid; gap: 6px; min-width: 0; }
.input--sm { height: 32px; font-size: 12.5px; }

.field--row { display: flex; align-items: center; gap: 10px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.check input { accent-color: var(--accent); width: 15px; height: 15px; }

.modlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.modlist li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; }
.modlist li a { color: var(--text); font-weight: 600; }
.modlist .icon-btn { margin-left: auto; }

@media (max-width: 760px) {
  .commgrid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Scroll
   =========================================================================== */

html { scroll-behavior: smooth; }

/* Rows rise as they arrive. Small on purpose — a long slide on every post is
   nauseating by the fifth screen, and this has to survive infinite scroll. */
[data-enter] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out);
}
[data-enter][data-entered='true'] { opacity: 1; transform: none; }

.topbar {
  transition: transform 0.26s var(--ease-out), box-shadow 0.2s var(--ease),
              border-color 0.2s var(--ease);
  will-change: transform;
}
.topbar[data-hidden='true'] { transform: translateY(-100%); }
.topbar[data-stuck='true'] { box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgb(0 0 0 / 0.9); }

/* Reading progress: a hairline of accent across the top of an article. */
.read-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 90;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.1s linear;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-enter] { opacity: 1; transform: none; }
  .topbar[data-hidden='true'] { transform: none; }
}

/* ===========================================================================
   Directory
   =========================================================================== */

.dircat { margin-bottom: 26px; }

.dircat__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 11px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.dircat__head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.dircat__head p { margin: 0; font-size: 12.5px; color: var(--text-faint); }

.dirgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 9px; }

.dirsite {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.14s var(--ease), transform 0.14s var(--ease), background 0.14s var(--ease);
}
.dirsite:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
  transform: translateY(-2px);
  text-decoration: none;
}

.dirsite__top { display: flex; align-items: center; gap: 7px; }
.dirsite__name { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }

.dirsite__flag {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--text-faint);
  font: 800 8.5px/1.6 var(--sans);
  letter-spacing: 0.08em;
}

.dirsite__blurb {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dirsite__go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 4px;
  font: 500 11px/1.4 var(--mono);
  color: var(--text-faint);
}
.dirsite:hover .dirsite__go { color: var(--accent-ink); }

.news-hero--slim { padding-top: 18px; padding-bottom: 18px; }
.news-hero--slim h1 { font-size: clamp(24px, 3vw, 34px); }

@media (max-width: 760px) {
  .dirgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ===========================================================================
   Inbox, messages, awards, settings
   =========================================================================== */

.iconbtn { position: relative; }

.dot-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 800 9.5px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}

.tab__n {
  display: inline-block;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-dim);
  font: 700 10.5px/1.6 var(--mono);
}

/* --- notifications -------------------------------------------------------- */

.notifs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.notif { border-bottom: 1px solid var(--line-soft); }
.notif:last-child { border-bottom: 0; }
.notif a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px; padding: 12px 14px; text-decoration: none; color: inherit; transition: background 0.12s var(--ease); }
.notif a:hover { background: var(--surface-2); }

/* Unread carries an accent edge rather than a different background — a block of
   tinted rows reads as an error state, an edge reads as "new". */
.notif--unread { box-shadow: inset 2px 0 0 var(--accent); }

.notif__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); color: var(--text-dim); }
.notif--unread .notif__icon { background: var(--accent-soft); color: var(--accent-ink); }
.notif__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif__title { font-size: 13.5px; font-weight: 600; }
.notif__text { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif__meta { font-size: 11px; color: var(--text-faint); }

/* --- direct messages ------------------------------------------------------ */

.dm { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; align-items: start; }

.dm__list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.dm__empty { padding: 18px 14px; margin: 0; font-size: 13px; color: var(--text-faint); text-align: center; }

.dmrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px 11px; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: inherit; }
.dmrow:hover { background: var(--surface-2); }
.dmrow--on { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.dmrow__avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font: 800 11px/1 var(--sans); color: #0a0c0d; }
.dmrow__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dmrow__top { display: flex; align-items: baseline; gap: 6px; }
.dmrow__name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmrow__top time { margin-left: auto; font-size: 10.5px; color: var(--text-faint); flex: none; }
.dmrow__preview { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmrow--unread .dmrow__preview { color: var(--text); font-weight: 500; }
.dmrow__n { min-width: 17px; padding: 1px 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 800 10px/1.5 var(--mono); text-align: center; }

.dm__new { display: flex; gap: 6px; padding: 9px 10px; border-top: 1px solid var(--line); }
.dm__new .input { height: 32px; }

.dm__thread { display: flex; flex-direction: column; min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.dm__head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-weight: 700; }
.dm__head .btn { margin-left: auto; }
.dm__scroll { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 14px; max-height: 52vh; overflow-y: auto; }

.bubble { align-self: flex-start; max-width: 78%; padding: 8px 12px; border-radius: 12px 12px 12px 3px; background: var(--surface-2); font-size: 13.5px; line-height: 1.5; }
.bubble--mine { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.bubble__body p { margin: 0; }
.bubble__time { display: block; margin-top: 3px; font-size: 10px; color: var(--text-faint); }

.dm__compose { display: flex; gap: 8px; padding: 11px; border-top: 1px solid var(--line); }
.dm__compose .textarea { flex: 1; min-height: 44px; }

/* --- awards --------------------------------------------------------------- */

.awards { display: inline-flex; align-items: center; gap: 3px; }
.award { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; border-radius: 999px; background: var(--surface-3); font-size: 11px; }
.award__n { font: 700 10px/1 var(--mono); color: var(--text-dim); }
.award-btn { position: relative; }

.award-picker {
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 8px);
  left: 0;
  width: 268px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  animation: pickerIn 0.14s var(--ease);
}
.award-picker__head { margin: 4px 6px 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.award-picker__row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; width: 100%; padding: 7px 6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.award-picker__row:hover:not(:disabled) { background: var(--surface-3); }
.award-picker__row:disabled { opacity: 0.4; cursor: not-allowed; }
.award-picker__emoji { font-size: 17px; }
.award-picker__row span span { display: block; font-size: 11.5px; color: var(--text-dim); font-weight: 400; }
.award-picker__row b { font-size: 13px; }

/* --- settings ------------------------------------------------------------- */

.pref { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.pref:last-of-type { border-bottom: 0; }
.pref input { margin-top: 2px; accent-color: var(--accent); width: 16px; height: 16px; }
.pref__label { display: block; font-size: 13.5px; font-weight: 600; }
.pref__hint { display: block; font-size: 12px; color: var(--text-faint); line-height: 1.45; }

.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px; }
.pick { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 12.5px; cursor: pointer; }
.pick:hover { background: var(--surface-2); }
.pick input { accent-color: var(--accent); }

.peoplelist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.peoplelist li { border-bottom: 1px solid var(--line-soft); }
.peoplelist li:last-child { border-bottom: 0; }
.peoplelist a { display: flex; align-items: center; gap: 11px; padding: 11px 14px; text-decoration: none; color: inherit; }
.peoplelist a:hover { background: var(--surface-2); }
.peoplelist b { display: block; font-size: 13.5px; }
.peoplelist span span { display: block; font-size: 11.5px; color: var(--text-faint); }

@media (max-width: 860px) {
  .dm { grid-template-columns: 1fr; }
  .dm__list { max-height: 300px; overflow-y: auto; }
}

/* Community card, shown beside a post being read. */
.commcard__head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; text-decoration: none; color: inherit; }
.commcard__tagline { margin: 0 0 9px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.commcard .btn--block { margin-top: 11px; }
.commcard__rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.commcard__rules li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 7px; font-size: 12.5px; line-height: 1.4; color: var(--text-dim); }
.commcard__rules li span { font: 800 11px/1.4 var(--mono); color: var(--text-faint); }
.commcard__rules li b { font: 800 10px/1 var(--mono); color: var(--accent-ink); }
.commcard__mods { margin: 11px 0 0; font-size: 11.5px; color: var(--text-faint); }
.commcard__mods a { color: var(--text-dim); }

/* ===========================================================================
   Two accents, two jobs
   ---------------------------------------------------------------------------
   Green is for what you can DO and where you ARE — buttons, current nav,
   selected tab, focus. Fluoro yellow is for what is LIVE — unread counts,
   upvoted, trending, new. Anything that is both would be neither, so nothing
   uses both at once.
   =========================================================================== */

/* --- live / count: fluoro yellow ----------------------------------------- */

.dot-badge,
.dmrow__n {
  background: var(--accent-2);
  color: var(--on-accent-2) !important;
  box-shadow: 0 0 12px -2px var(--accent-2-line);
}

.vote-btn[data-active='up'] { background: var(--accent-2); color: var(--on-accent-2); }
.vote-btn[data-active='up']:hover { background: var(--accent-2); filter: brightness(1.12); }
.vote-score[data-state='up'] { color: var(--accent-2-ink); }

.stat--live .stat__value,
.comm__live b,
.topiclist__n,
.rule__cited--live { color: var(--accent-2-ink); }
.rule__cited--live { background: var(--accent-2-soft); }

.newpill {
  border-color: var(--accent-2-line);
  background: var(--accent-2-soft);
  color: var(--accent-2-ink);
}
.newpill:hover { background: rgb(233 255 43 / 0.2); }

.ticker__label {
  border-color: var(--accent-2-line);
  background: var(--accent-2-soft);
  color: var(--accent-2-ink);
}
.ticker__label::before { background: var(--accent-2); }

.notif--unread { box-shadow: inset 2px 0 0 var(--accent-2); }
.notif--unread .notif__icon { background: var(--accent-2-soft); color: var(--accent-2-ink); }
.dmrow--unread { box-shadow: inset 2px 0 0 var(--accent-2); }

.panel--warn { border-color: var(--accent-2-line); background: var(--accent-2-soft); }
.dot--down { background: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-2-soft); }

/* Trending list: the rank number is the live signal, not the label. */
.trend__rank, .topiclist__rank { color: var(--accent-2-ink); }

/* --- state / action: neon green ------------------------------------------ */

.board-link[aria-current='page'] { box-shadow: inset 2px 0 0 var(--accent); }
.tab[aria-selected='true']::after { background: var(--accent); }
.post:hover { box-shadow: inset 3px 0 0 var(--accent-line); }

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

::selection { background: var(--accent); color: var(--on-accent); }

/* Neon reads as emitted light, so the primary button glows rather than casting
   a shadow. On black a drop shadow is invisible anyway. */
.btn--primary {
  box-shadow: 0 0 22px -8px var(--accent);
}
.btn--primary:hover:not(:disabled) {
  box-shadow: 0 0 28px -6px var(--accent);
}

.brand__mark { box-shadow: 0 0 20px -6px var(--accent); }
.media__gate-icon { border-color: var(--accent-line); }

.comm:hover, .tile:hover, .dirsite:hover { box-shadow: var(--glow); }

.footer-ad { max-width: 1460px; margin: 0 auto; padding: 0 18px 8px; }
.rail .adslot[data-state='filled'] { margin-bottom: 12px; }

/* ===========================================================================
   Sticky phone bar
   ---------------------------------------------------------------------------
   The highest-yielding unit on this kind of traffic and the most intrusive, so:
   phones only, dismissible, and it sits above the safe-area inset rather than
   under the home indicator. It inherits the collapse behaviour, so an unsold
   slot leaves nothing pinned to the bottom of the screen.
   =========================================================================== */

.sticky-ad { display: none; }

@media (max-width: 760px) {
  .sticky-ad {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    pointer-events: none;   /* the empty wrapper must not eat taps */
  }

  .sticky-ad .adslot {
    position: relative;
    pointer-events: auto;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .sticky-ad .adslot[data-state='filled'] {
    margin: 0;
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-elev);
    border-top: 1px solid var(--line);
  }

  /* Give the page somewhere to end, so the last row is not pinned under the
     bar. Only once the bar is actually showing something. */
  body:has(.sticky-ad .adslot[data-state='filled']) .footer { padding-bottom: 74px; }
}

.adslot__close {
  position: absolute;
  top: 2px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-dim);
  cursor: pointer;
}
.adslot__close:hover { background: var(--surface-2); color: var(--text); }

/* An in-flow slot that carries a close button still needs room for it. */
.adslot--feed { position: relative; }

/* Wire heartbeat. The dot is the whole point — a pull that finds nothing is
   silent, so the panel has to say "I checked" rather than only "I found". */
.wirelive__line { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 13px; color: var(--text-dim); }
.wirelive__line b { color: var(--text); font-weight: 600; }
.wirelive__meta { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }
.wirelive .btn { margin-top: 11px; }

.wirelive__dot {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-line);
  animation: wirePulse 2.6s ease-out infinite;
}
@keyframes wirePulse {
  0%   { box-shadow: 0 0 0 0 rgb(233 255 26 / 0.5); }
  70%  { box-shadow: 0 0 0 7px rgb(233 255 26 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(233 255 26 / 0); }
}

/* Older than three polling intervals: something is wrong, say so quietly. */
.wirelive--stale { border-color: var(--accent-2-line); }
.wirelive--stale .wirelive__dot { background: var(--text-faint); animation: none; }

@media (prefers-reduced-motion: reduce) { .wirelive__dot { animation: none; } }

/* Preview mode (?ads=preview): show every slot as a labelled outline so the
   placements can be audited without live inventory. Never seen by a reader. */
.adslot--preview {
  display: grid;
  place-items: center;
  height: auto;
  min-height: var(--ad-h, 90px);
  margin: 0 auto 14px;
  opacity: 1;
  border: 1px dashed var(--accent-line);
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(
    -45deg, var(--accent-soft) 0 8px, transparent 8px 16px
  );
}

.adslot__ghost {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font: 700 11px/1.3 var(--mono);
  color: var(--accent-ink);
  text-align: center;
}
.adslot__ghost span { font-weight: 500; opacity: 0.75; font-size: 10px; }

.sticky-ad .adslot--preview { margin: 0; }

/* ===========================================================================
   Admin panel
   =========================================================================== */

.agrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; }

.atile { display: flex; flex-direction: column; gap: 1px; padding: 12px 13px; background: var(--surface); }
.atile__value { font: 800 22px/1.1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.atile__label { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.atile__hint { font-size: 11px; color: var(--text-faint); }

/* Bar chart made of spans. No canvas, no library, no reflow per frame. */
.spark { display: flex; align-items: flex-end; gap: 1px; height: var(--spark-h, 34px); margin: 4px 0 6px; }
.spark i {
  flex: 1;
  min-width: 1px;
  background: var(--accent);
  opacity: 0.55;
  border-radius: 1px 1px 0 0;
  transition: height 0.3s var(--ease-out);
}
.spark i:last-child { opacity: 1; }

.alist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 1px; }
.alist li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 6px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.alist li:hover { background: var(--surface-2); }
.alist li a { color: var(--text); font-weight: 600; }
.alist li em { font-style: normal; font-size: 11px; color: var(--text-faint); }
.alist li span { color: var(--text-dim); font-size: 12px; }
.alist li b {
  margin-left: auto;
  font: 700 12px/1 var(--mono);
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.alist--warn li b { color: var(--text-faint); font-weight: 500; }

.apanel { position: relative; }

/* ===========================================================================
   Navigation drawer
   ---------------------------------------------------------------------------
   Opens at every width. On a phone it is the only navigation; on a desktop it
   is the overflow — every board, the whole account menu, and the tall ad column
   the 244px rail cannot hold.
   =========================================================================== */

.drawer { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
body.nav-open .drawer { pointer-events: auto; }

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.22s var(--ease-out);
}
body.nav-open .drawer__backdrop { opacity: 1; }

.drawer__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(320px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border-right: 1px solid var(--line);
  box-shadow: 24px 0 60px -30px rgb(0 0 0 / 0.9);
  transform: translateX(-100%);
  transition: transform 0.26s var(--ease-out);
}
body.nav-open .drawer__panel { transform: none; }

.drawer__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  height: var(--topbar-h);
  padding: 0 10px 0 18px;
  border-bottom: 1px solid var(--line);
}
.drawer__title {
  flex: 1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.drawer__scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 10px calc(20px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: thin;
}
.drawer__scroll::-webkit-scrollbar { width: 6px; }
.drawer__scroll::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }

.drawer__group { display: grid; gap: 1px; margin-bottom: 14px; }

.drawer__label {
  margin: 4px 0 6px;
  padding: 0 8px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.drawer__link {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-dim);
  font: 600 13.5px/1 var(--sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.drawer__link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.drawer__link[aria-current='page'] {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}

.drawer__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-dim);
}
.drawer__icon--board {
  background: color-mix(in srgb, var(--board-accent, #8a8a9c) 18%, transparent);
  color: color-mix(in srgb, var(--board-accent, #8a8a9c) 86%, var(--mix-ink));
}
.drawer__link:hover .drawer__icon { color: var(--text); }

.drawer__count {
  margin-left: auto;
  font: 600 11px/1 var(--mono);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.drawer__found {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 4px 0 14px;
  padding: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font: 600 12.5px/1 var(--sans);
  text-decoration: none;
}
.drawer__found:hover { border-color: var(--accent-line); color: var(--accent-ink); text-decoration: none; }

/* Ads in the drawer centre themselves and never widen it. */
.adslot--drawer { margin-left: auto; margin-right: auto; max-width: 100%; }
.adslot--drawer .adslot__frame { max-width: 100%; }

/* The topbar button is real navigation at every width now, not phone-only. */
.topbar__menu { display: grid; }

@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .drawer__backdrop { transition: none; }
}

/* ===========================================================================
   Sponsored tile (Adsterra direct link)
   ---------------------------------------------------------------------------
   A URL, not a script — the one high-yield format that needs no CSP exception.
   Styled to sit in the layout without pretending to be navigation: it carries
   its own label and an outbound arrow.
   =========================================================================== */

.smartlink {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 4px 0 12px;
  padding: 11px 12px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--text);
  text-decoration: none;
  transition: background 0.14s var(--ease), transform 0.14s var(--ease);
}
.smartlink:hover { background: rgb(233 255 26 / 0.18); transform: translateY(-1px); text-decoration: none; }
.smartlink .ico { margin-left: auto; color: var(--accent-ink); flex: none; }

.smartlink__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.smartlink__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.smartlink__body b { font-size: 13.5px; font-weight: 700; }
.smartlink__body span { font-size: 11.5px; color: var(--text-dim); }

.smartlink::before {
  content: 'AD';
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--on-accent);
  font: 800 10px/1 var(--sans);
  letter-spacing: 0.04em;
}