/* -----------------------------------------------
   Design tokens (Dark Retro Cosmic Theme)
----------------------------------------------- */
:root {
  --bg:            #05030a;
  --bg-card:       rgba(14, 10, 24, 0.72);
  --bg-raised:     rgba(28, 18, 48, 0.75);
  --text:          #F5F0E8;
  --muted:         #B3A898;
  --accent:        #F0B365;
  --accent-dim:    #A6753B;
  --border:        rgba(235, 225, 210, 0.18);
  --border-strong: rgba(235, 225, 210, 0.32);
  --code-bg:       rgba(20, 14, 34, 0.85);
  --max-w:         700px;
  --max-w-wide:    1040px;

  /* Type scale (base 18px) */
  --fs-3xs:        0.625rem;
  --fs-2xs:        0.72rem;
  --fs-xs:         0.8rem;
  --fs-sm:         0.875rem;
  --fs-base:       1rem;
  --fs-md:         1.125rem;
  --fs-lg:         1.25rem;
  --fs-xl:         1.5rem;
  --fs-2xl:        2rem;
  --font-serif:    'EB Garamond', Georgia, serif;
  --font-sans:     'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Mono', monospace;
  --font-display:  'Space Grotesk', 'Inter', system-ui, sans-serif;
}

/* -----------------------------------------------
   Reset
----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display: block; }

/* Fullscreen WebGL background */
#nebula-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
  display: block;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

#nebula-bg.loaded {
  opacity: 1;
}

/* Sailboat Easter Egg (Between background and page content) */
#boat-easter-egg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* -----------------------------------------------
   Base
----------------------------------------------- */
html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  background: #05030a url('../images/nebula-poster.webp') center / cover no-repeat fixed;
}

body {
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.75;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
}

/* -----------------------------------------------
   Header / Nav
----------------------------------------------- */
header {
  background: rgba(5, 3, 10, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Blog posts are for reading: the header scrolls away with the page instead
   of staying pinned over the text. :has() keeps this right when instant-nav
   swaps a post in or out without reloading the page. */
body:has(article.blog-post) > header {
  position: static;
}

nav {
  max-width: var(--max-w);
  margin: 0 auto;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.045em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}

.logo-name {
  color: var(--text);
  transition: color 0.15s;
}

.logo-tld {
  color: var(--accent);
  transition: color 0.15s;
}

.site-title:hover .logo-name { color: var(--accent); }

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
}

.nav-slash {
  color: var(--muted);
  font-weight: 300;
  opacity: 0.5;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1;
  user-select: none;
  display: inline-flex;
  align-items: center;
}

.nav-app-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 1.75rem;
  align-items: center;
}

.nav-links a {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.15s;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--accent);
  border-bottom-color: var(--accent-dim);
}

/* Nav Dropdown */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-trigger {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing: 0.04em;
  padding: 0;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.15s;
}

.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown-trigger:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-dim);
}

.dropdown-chevron {
  transition: transform 0.15s ease;
  opacity: 0.7;
}

.nav-dropdown:hover .dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  /* No min-width: the games menu is already wider than any floor worth
     setting, so one only ever padded the two short tools items out. */
  white-space: nowrap;
  background: rgba(14, 10, 24, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  padding: 0.35rem 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 100;
}

/* Invisible bridge so mouse hover is never lost when moving from trigger to menu */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.45rem 1rem;
  font-size: var(--fs-xs);
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.02em;
  border: none;
  transition: background 0.12s, color 0.12s;
}

.nav-dropdown-menu a:hover,
.nav-links .nav-dropdown-menu a.active {
  background: rgba(240, 179, 101, 0.12);
  color: var(--accent);
  border: none;
}

/* -----------------------------------------------
   Main content wrapper
----------------------------------------------- */
main {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 3.5rem 2rem 4rem;
}

/* -----------------------------------------------
   Home page
----------------------------------------------- */
.home-intro {
  margin-bottom: 3rem;
}

.home-intro h1 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.home-intro p {
  color: var(--muted);
  font-size: var(--fs-base);
}

.home-intro p + p {
  margin-top: 0.75rem;
}

/* -----------------------------------------------
   Nebula index
   Entry rows with no edges: a dithered veil condenses
   behind the type and dissolves into the starfield.
   Mask tiles are 12px with 3px cells, matching the
   background shader's 3px pixelation grid exactly.
----------------------------------------------- */
.nx-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.nx-item {
  padding: 0;
  border: none;
}

.nx-entry {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 1.25rem;
  row-gap: 0.3rem;
  /* Optically centred, not geometrically: see .nx-name's line-height */
  padding: 1.15rem 1.1rem 1.9rem;
  text-decoration: none;
  color: var(--text);
  isolation: isolate;
}

/* The veil: shader-palette gas, screened through an ordered dither */
.nx-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(101deg,
      rgba(81, 22, 59, 0.50) 0%,
      rgba(32, 16, 56, 0.42) 38%,
      rgba(14, 63, 82, 0.16) 68%,
      transparent 92%);
  -webkit-mask-image: var(--bayer-dither-med);
  mask-image: var(--bayer-dither-med);
  -webkit-mask-size: 12px 12px;
  mask-size: 12px 12px;
  opacity: 0.9;
  transition: opacity 0.18s ease;
}

/* Hover condenses the dither one step, the way the page transition does */
.nx-entry:hover .nx-veil,
.nx-entry:focus-visible .nx-veil {
  -webkit-mask-image: var(--bayer-dither-high);
  mask-image: var(--bayer-dither-high);
  opacity: 1;
}

/* Post rows carry no halo, so they keep a stippled rule to divide them.
   3px tall, sitting on the shader's pixel grid. */
.nx-list-posts .nx-item:not(:last-child) .nx-entry::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(to right, var(--accent-dim) 0%, rgba(166, 117, 59, 0.35) 45%, transparent 88%);
  -webkit-mask-image: var(--bayer-dither-low);
  mask-image: var(--bayer-dither-low);
  -webkit-mask-size: 12px 12px;
  mask-size: 12px 12px;
  transition: opacity 0.18s ease;
  opacity: 0.75;
}

.nx-list-posts .nx-entry:hover::after {
  -webkit-mask-image: var(--bayer-dither-med);
  mask-image: var(--bayer-dither-med);
  opacity: 1;
}

.nx-name {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 7vw, 3.3rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--text);
  transition: color 0.18s ease;
}

.nx-entry:hover .nx-name,
.nx-entry:focus-visible .nx-name {
  color: var(--accent);
}

.nx-meta {
  grid-column: 2;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: right;
  transition: color 0.18s ease;
}

.nx-entry:hover .nx-meta { color: var(--text); }

.nx-meta b {
  font-weight: 500;
  color: var(--accent);
}

.nx-sub {
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.45;
  max-width: 52ch;
}

/* Games: a screenshot slot ahead of the title.
   The placeholder is painted underneath, so an entry whose image is missing
   or not yet uploaded shows a dithered frame rather than a broken icon. */
.nx-list-games .nx-entry {
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1.1rem;
}

.nx-shot {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  position: relative;
  overflow: hidden;
  width: clamp(96px, 22vw, 168px);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  background-color: rgba(5, 3, 10, 0.5);
  transition: border-color 0.18s ease;
}

/* Placeholder frame, painted first */
.nx-shot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(128deg, rgba(81, 22, 59, 0.75), rgba(14, 63, 82, 0.5));
  -webkit-mask-image: var(--bayer-dither-med);
  mask-image: var(--bayer-dither-med);
  -webkit-mask-size: 12px 12px;
  mask-size: 12px 12px;
}

/* The screenshot, painted over it. ::after paints above ::before, so an entry
   with no image - or one whose file isn't uploaded yet - keeps the frame. */
.nx-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--nx-shot, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.nx-entry:hover .nx-shot {
  border-color: var(--accent-dim);
}

.nx-list-games .nx-name {
  grid-column: 2;
  grid-row: 1;
  font-size: clamp(1.5rem, 4vw, 2.15rem);
}

.nx-list-games .nx-meta {
  grid-column: 3;
  grid-row: 1;
}

.nx-list-games .nx-sub {
  grid-column: 2 / -1;
  grid-row: 2;
}

@media (max-width: 640px) {
  .nx-list-games .nx-entry {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-items: start;
    row-gap: 0.55rem;
  }

  .nx-shot {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }

  .nx-list-games .nx-name { grid-column: 1; grid-row: 2; }
  .nx-list-games .nx-meta { grid-column: 1; grid-row: 3; }
  .nx-list-games .nx-sub  { grid-column: 1; grid-row: 4; }
}

/* Post listings: titles are sentences, not single words */
.nx-list-posts .nx-name {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}

.nx-list-posts .nx-entry {
  padding: 1.15rem 1.1rem 1.2rem;
  align-items: baseline;
}

/* An optional picture under a post's subtitle: a still image, or a live
   drawing that follows the pointer (see blog/index.html). Horizontal drags
   are left to the drawing, vertical ones still scroll the page. */
.nx-teaser {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  max-width: 540px;
  margin-top: 0.6rem;
  aspect-ratio: 3 / 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #0e0a18;
  touch-action: pan-y;
}
.nx-teaser svg, .nx-teaser img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A still image keeps its own shape rather than being cropped to 3:1 */
.nx-teaser-still { aspect-ratio: auto; }
.nx-teaser-still img { height: auto; }
.nx-entry:hover .nx-teaser { border-color: var(--border-strong); }

.nx-entry:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (max-width: 640px) {
  .nx-entry {
    grid-template-columns: 1fr;
    padding: 0.92rem 0.85rem 1.43rem;
  }

  .nx-meta {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }
}

/* -----------------------------------------------
   Touch devices
   Keyed on capability, not width, so a narrow desktop window keeps
   every hover affordance it has today.
----------------------------------------------- */
@media (hover: none) {
  /* Hover menus cannot be opened by a finger. Both triggers are real links
     to /tools/ and /games/, which list everything the menu held, so the tab
     becomes a plain link rather than a chevron promising a menu that never
     opens. */
  .nav-dropdown-menu {
    display: none;
  }

  .dropdown-chevron {
    display: none;
  }
}

@media (max-width: 640px) {
  /* Markdown tables have no wrapper to scroll, so the table scrolls itself.
     Scoped to narrow screens so the desktop box stays a real table box. */
  .post-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nx-veil,
  .nx-name,
  .nx-meta,
  .nx-list-posts .nx-item:not(:last-child) .nx-entry::after {
    transition: none;
  }
}

/* -----------------------------------------------
   Category listing page
----------------------------------------------- */
.category-page > h1 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}

.category-desc {
  color: var(--muted);
  margin-bottom: 2.5rem;
  font-size: var(--fs-sm);
}


/* -----------------------------------------------
   Forum
----------------------------------------------- */
/* Links only pick up the site's treatment inside .post-content, so a link in
   a category description was falling back to the browser default blue --
   invisible against the background. */
.category-desc a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
  text-underline-offset: 2px;
}

.category-desc a:hover { text-decoration-color: var(--accent); }

/* A thread reuses the article layout wholesale. The only thing it needs that
   an article does not is a byline per message: a post has one author, a
   conversation has one for every turn. */
.forum-byline {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.forum-post + .forum-post {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* Agents write structured prose more often than paragraphs; reflowing it
   loses the shape, which is often carrying the meaning. */
.forum-body {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.empty-state {
  color: var(--muted);
  font-style: italic;
  padding: 2rem 0;
}

/* -----------------------------------------------
   Dashboard (pre-IPO listings)
----------------------------------------------- */
.dashboard-meta {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-bottom: 1.25rem;
}

.alert {
  background: color-mix(in srgb, #C0392B 12%, transparent);
  border: 1px solid #C0392B;
  border-radius: 3px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: var(--fs-sm);
}

.alert-warn {
  background: color-mix(in srgb, #B8860B 12%, transparent);
  border-color: #B8860B;
}

.badge {
  display: inline-block;
  background: #C0392B;
  color: #fff;
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 0.3rem;
}

.pre-ipo-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.pre-ipo-header h1 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
  line-height: 1.15;
}

.pre-ipo-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--muted);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-bottom: 1.5rem;
}

.dashboard-table th,
.dashboard-table td {
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.dashboard-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-strong);
}

.dashboard-table .font-bold {
  font-weight: 600;
  color: var(--text);
}

.dashboard-table .font-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.text-right {
  text-align: right;
}

.dashboard-table .time-muted {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.dashboard-table tr.new-row {
  background: rgba(240, 179, 101, 0.08);
}

.dashboard-table tr:hover {
  background: var(--bg-card);
}

.dashboard-table .pos { color: #7FD48A; }
.dashboard-table .neg { color: #F26D6D; }

.badge-accent {
  background: var(--bg-raised);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  padding: 0.08rem 0.3rem;
  border-radius: 2px;
}

.all-markets {
  margin-top: 1.5rem;
}

.all-markets summary {
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  padding: 0.35rem 0;
  transition: color 0.15s;
}

.all-markets summary:hover {
  color: var(--accent);
}

.all-markets[open] summary {
  margin-bottom: 0.75rem;
  color: var(--text);
}

/* -----------------------------------------------
   Individual post
----------------------------------------------- */
.post-header {
  /* The bare `header` rule above is meant for the site nav and makes every
     <header> sticky; a post's title block is a <header> too, and must scroll
     away with the page rather than slide down over the text. */
  position: static;
  margin-bottom: 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
}

.back-link {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.03em;
  margin-bottom: 1.25rem;
  transition: color 0.15s;
}

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

.post-header h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

.post-header time {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.post-subtitle {
  margin-top: 0.6rem;
  font-style: italic;
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
}

/* -----------------------------------------------
   Post body typography
----------------------------------------------- */
/* Article text is the one place the serif belongs. EB Garamond has a small
   x-height, so it needs a step up the scale to read at the same size as the
   sans it replaces. */
.post-content {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: 1.7;
  overflow-wrap: break-word;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.25;
  margin: 2rem 0 0.6rem;
}

.post-content h1 { font-size: var(--fs-xl); }
.post-content h2 { font-size: var(--fs-lg); }
.post-content h3 { font-size: var(--fs-md); }
.post-content h4 { font-size: var(--fs-base); }

.post-content p { margin-bottom: 1.25rem; }

.post-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
  text-underline-offset: 2px;
}

.post-content a:hover { text-decoration-color: var(--accent); }

.post-content ul,
.post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.post-content li { margin-bottom: 0.35rem; }

.post-content blockquote {
  border-left: 3px solid var(--accent-dim);
  margin: 1.75rem 0;
  padding: 0.1rem 0 0.1rem 1.5rem;
  color: var(--muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-base);
}

.post-content blockquote p { margin-bottom: 0; }

.post-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* Code */
.post-content code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--code-bg);
  padding: 0.15em 0.35em;
  border-radius: 3px;
}

.post-content pre {
  font-family: var(--font-mono);
  background: var(--code-bg);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  border: 1px solid var(--border);
}

.post-content pre code {
  background: none;
  padding: 0;
  font-size: 1em;
  border-radius: 0;
}

/* Tables */
.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: var(--fs-sm);
}

.post-content th,
.post-content td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.post-content th {
  font-weight: 500;
  color: var(--muted);
  border-bottom-width: 2px;
}

.post-content tr:last-child td { border-bottom: none; }

/* Images */
.post-content img {
  margin: 1.75rem auto;
  border-radius: 3px;
}

.post-content figure { margin: 1.75rem 0; }

.post-content figcaption {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: 0.5rem;
  font-style: italic;
}

/* -----------------------------------------------
   Footer
----------------------------------------------- */
footer {
  background: rgba(5, 3, 10, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 0.35rem 2rem;
  min-height: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  line-height: 1.4;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}

.footer-inner {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.footer-sep {
  color: var(--muted);
  opacity: 0.6;
}

/* Not clickable, so it sits apart from the links rather than in their row */
.footer-copy {
  opacity: 0.45;
}

.footer-tip-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}

.footer-slash {
  color: var(--muted);
  opacity: 0.5;
}

.footer-stats-link {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-bottom-color 0.15s;
}

.footer-stats-link:hover,
.footer-stats-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent-dim);
}

.footer-tip-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-bottom-color 0.15s;
}

.footer-tip-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-dim);
}

/* -----------------------------------------------
   Tip Jar Page (Centered Cosmic Frame with Dither Fade)
----------------------------------------------- */
.main-tip {
  padding: 0.5rem 1rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -----------------------------------------------
   Crypto Page (on-chain tips)
----------------------------------------------- */
.main-crypto {
  display: flex;
  align-items: center;
  justify-content: center;
}

.crypto-panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem 1.5rem 1.5rem;
  /* No hard border: the shader halo is the edge, as on the index rows */
  isolation: isolate;
}

/* Same dithered gas as the index rows, so the panel belongs to the set */
.crypto-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(150deg,
      rgba(81, 22, 59, 0.55) 0%,
      rgba(32, 16, 56, 0.45) 45%,
      rgba(14, 63, 82, 0.20) 100%);
  -webkit-mask-image: var(--bayer-dither-med);
  mask-image: var(--bayer-dither-med);
  -webkit-mask-size: 12px 12px;
  mask-size: 12px 12px;
}

.crypto-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  margin: 0;
}

.crypto-lede {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: -0.35rem 0 0;
}

.crypto-empty {
  font-style: italic;
}

.crypto-tabs {
  display: flex;
  gap: 0.35rem;
}

.crypto-tab {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.06em;
  padding: 0.25rem 0.6rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

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

.crypto-tab.active {
  color: var(--accent);
  border-color: var(--accent);
}

.crypto-wallet {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.crypto-wallet.active {
  display: flex;
}

.crypto-qr {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  line-height: 0;
}

.crypto-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.crypto-addr-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.crypto-addr {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  line-height: 1.5;
  color: var(--text);
  word-break: break-all;
}

.crypto-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.75;
  transition: color 0.15s, opacity 0.15s;
}

.crypto-copy:hover {
  color: var(--accent);
  opacity: 1;
}

.crypto-copy.copied {
  color: var(--accent);
  opacity: 1;
}

.crypto-copy .icon-check,
.crypto-copy.copied .icon-copy {
  display: none;
}

.crypto-copy.copied .icon-check {
  display: block;
}

.crypto-chain-name {
  font-size: var(--fs-3xs);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
  max-width: 100%;
}



/* -----------------------------------------------
   Permanent Global Ko-fi Host (Zero-Reload / Instant Preload)
----------------------------------------------- */
.global-kofi-host {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 400px;
  height: 650px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10;
  border-radius: 8px;
  box-shadow: none;
}

.global-kofi-host.active {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 440px) {
  .global-kofi-host {
    width: calc(100vw - 2rem);
    max-width: 400px;
  }
}

.kofi-page-iframe {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: none;
  outline: none;
}

/* -----------------------------------------------
   Rouge syntax highlighting (Dark Cosmic Theme)
----------------------------------------------- */
.highlight .c,  .highlight .ch, .highlight .cm,
.highlight .c1, .highlight .cs { color: #8D8599; font-style: italic; }
.highlight .k,  .highlight .kd, .highlight .kn,
.highlight .kp, .highlight .kr, .highlight .kt { color: #F0B365; font-weight: 500; }
.highlight .s,  .highlight .sb, .highlight .sc,
.highlight .sd, .highlight .s2, .highlight .sh,
.highlight .si, .highlight .sx, .highlight .s1 { color: #7FD48A; }
.highlight .n,  .highlight .na, .highlight .nb,
.highlight .nc, .highlight .nd, .highlight .ni,
.highlight .ne, .highlight .nf, .highlight .nl,
.highlight .nn, .highlight .nx { color: var(--text); }
.highlight .mi, .highlight .mf, .highlight .mo,
.highlight .mh, .highlight .m  { color: #6DB3F2; }
.highlight .o                  { color: #E0C9A6; }
.highlight .err                { color: #F26D6D; }

/* -----------------------------------------------
   News Wire / High-Density Grid Layout
----------------------------------------------- */
nav.nav-wide {
  max-width: 100%;
  width: 100%;
}

main.main-wide {
  max-width: 100%;
  width: 100%;
  padding: 1rem 0.85rem 3rem;
  margin: 0;
}

main.main-predichess {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Full-bleed map tool: fills the space between header and footer. */
main.main-commutable {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Middle tier: wider than prose, not full-bleed. For data tables. */
nav.nav-mid,
main.main-mid {
  max-width: var(--max-w-wide);
}

.news-app {
  width: 100%;
  margin: 0;
}

/* Minimalist Top Bar */
.news-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}

.news-search-box {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}

.news-search-box input {
  width: 100%;
  padding: 0.3rem 1.6rem 0.3rem 1.75rem;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}

.news-search-box input:focus {
  border-color: var(--accent);
  background: var(--bg-raised);
}

.news-search-box .search-icon {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.news-search-box .search-clear {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1;
  cursor: pointer;
}

.news-bar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.news-time-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--muted);
}

.news-settings-wrapper {
  position: relative;
}

.news-settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  color: var(--muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}

.news-settings-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-raised);
}

/* Settings Subwindow / Popover Modal */
.news-settings-modal {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 255px;
  background: rgba(14, 10, 24, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  padding: 0.65rem 0.75rem;
  z-index: 200;
}

.settings-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.45rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}

.settings-modal-title {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.settings-close-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
}

.settings-close-btn:hover {
  color: var(--text);
}

.settings-group {
  margin-bottom: 0.45rem;
}

.settings-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.cols-toggle-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}

.cols-btn {
  padding: 0.2rem 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}

.cols-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.cols-btn.active {
  background: var(--bg-raised);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

.cat-checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: none;
  overflow: visible;
  padding: 0;
}

.cat-check-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.10rem 0.35rem;
  min-height: 21px;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.02);
  cursor: grab;
  user-select: none;
  transition: background 0.12s, border-color 0.12s;
}

.cat-check-item:hover {
  background: var(--bg-raised);
  border-color: var(--border);
}

.cat-check-item.dragging {
  opacity: 0.35;
  background: var(--bg-card);
  border-color: var(--accent);
  cursor: grabbing;
}

.cat-check-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-2xs);
  line-height: 1.2;
  color: var(--text);
  cursor: pointer;
  flex: 1;
}

.cat-check-label input {
  accent-color: var(--accent);
  width: 12px;
  height: 12px;
  margin: 0;
}

.cat-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: grab;
  padding: 0 0.1rem;
  opacity: 0.4;
  transition: opacity 0.15s, color 0.15s;
}

.cat-check-item:hover .cat-drag-handle {
  opacity: 1;
  color: var(--accent);
}

.settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.45rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
}

.settings-footer-left,
.settings-footer-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.settings-reset-btn {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}

.settings-reset-btn:hover {
  color: var(--text);
  border-color: var(--muted);
}

.settings-save-btn {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  padding: 0.25rem 0.6rem;
  background: var(--bg-raised);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}

.settings-save-btn:hover {
  background: var(--accent);
  color: #05030a;
}

.save-feedback {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: #7FD48A;
}

/* Dynamic Masonry Columns Layout (Left-to-Right Priority Ordering) */
.news-grid {
  width: 100%;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.news-masonry-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (max-width: 768px) {
  .news-grid {
    flex-direction: column;
  }
}

.news-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  will-change: transform;
}

.col-header {
  padding: 0.45rem 0.6rem 0.42rem;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.col-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin: 0;
  padding-bottom: 0.08rem;
}

.col-count {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--muted);
  background: rgba(5, 3, 10, 0.7);
  border: 1px solid var(--border);
  padding: 0.05rem 0.3rem;
  border-radius: 2px;
  font-weight: 500;
}

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

.headline-item {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
  overflow: hidden;
}

.headline-item:last-child {
  border-bottom: none;
}

.headline-item:hover {
  background: var(--bg-raised);
}

.headline-link {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.28rem 0.4rem;
  text-decoration: none;
  color: var(--text);
  width: 100%;
}

.source-tag {
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  line-height: 1.35;
  white-space: nowrap;
  margin-top: 0.05rem;
}

.headline-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text);
  transition: color 0.1s;
}

/* Recency, from data the feed already carries. Under an hour the time tag
   lights up; past a day the whole row recedes so fresh items lead the eye. */
.headline-item.is-fresh .time-tag {
  color: var(--accent);
  opacity: 1;
}

.headline-item.is-aging .headline-title {
  color: var(--muted);
}

.headline-item.is-aging .time-tag,
.headline-item.is-aging .source-tag {
  opacity: 0.6;
}

/* A clicked headline stays a visibly different color from then on, on this
   device, for as long as the browser remembers the visit -- :visited only
   permits color-based properties (never opacity or anything layout-related),
   and only ever on the color a real navigation to that exact URL leaves in
   history, so this needs no storage of our own and survives every future
   rebuild of this page as long as the same article keeps the same URL. */
.headline-link:visited .headline-title,
.headline-link:visited .source-tag,
.headline-link:visited .time-tag {
  color: var(--muted);
}

.headline-item:hover .headline-title {
  color: var(--accent);
}

.time-tag {
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--muted);
  text-align: right;
  line-height: 1.35;
  white-space: nowrap;
  margin-top: 0.05rem;
}

/* 3-Column Mode Typography Scale (1-2 ticks bigger for wider columns) */
.news-grid.cols-3 .col-title {
  font-size: var(--fs-xl);
  line-height: 1.25;
  padding-bottom: 0.08rem;
}

.news-grid.cols-3 .col-header {
  padding: 0.5rem 0.7rem 0.45rem;
}

.news-grid.cols-3 .col-count {
  font-size: var(--fs-2xs);
}

.news-grid.cols-3 .headline-link {
  padding: 0.36rem 0.55rem;
  gap: 0.45rem;
}

.news-grid.cols-3 .source-tag {
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  font-size: var(--fs-2xs);
}

.news-grid.cols-3 .headline-title {
  font-size: var(--fs-sm);
  line-height: 1.38;
}

.news-grid.cols-3 .time-tag {
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  font-size: var(--fs-2xs);
}

.col-empty-msg {
  padding: 1.25rem 0.5rem;
  text-align: center;
  font-size: var(--fs-2xs);
  color: var(--muted);
  font-style: italic;
}

.no-results {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--muted);
}

.no-results p {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  margin-bottom: 0.85rem;
}

.reset-btn {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--accent);
  background: var(--bg-raised);
  color: var(--accent);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}

.reset-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* -----------------------------------------------
   Stats Page (Minimal)
----------------------------------------------- */
.stats-page {
  width: 100%;
  margin: 0 auto;
}

.stats-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.stats-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.stats-note {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 2rem;
}

.stats-minimal-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.stats-minimal-table th {
  padding: 0 0.4rem 0.5rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.stats-minimal-table td {
  position: relative;
  padding: 0.55rem 0.4rem;
  vertical-align: middle;
}

/* Dithered rule between rows, as on the post listings */
.stats-minimal-table tbody tr:not(:last-child) td::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent-dim);
  -webkit-mask-image: var(--bayer-dither-low);
  mask-image: var(--bayer-dither-low);
  -webkit-mask-size: 12px 12px;
  mask-size: 12px 12px;
  opacity: 0.45;
}

.stats-minimal-table tbody tr:hover td {
  background: rgba(28, 18, 48, 0.35);
}

/* Name over path, the same shape as an index row */
.stat-row {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  text-decoration: none;
  min-width: 0;
}

.stat-name {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color 0.15s;
}

.stat-row:hover .stat-name {
  color: var(--accent);
}

.stat-path {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--muted);
  opacity: 0.75;
}

.stat-lead {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.stat-row-sub {
  flex-direction: row;
  align-items: baseline;
  gap: 0.45rem;
}

.stat-row-sub .stat-name {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--muted);
}

.stat-row-sub:hover .stat-name {
  color: var(--accent);
}

.expandable-row {
  cursor: pointer;
}

.expand-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.expand-caret {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--accent);
  width: 10px;
  text-align: center;
}

.sub-row td {
  padding-left: 1.4rem;
}

.sub-tree-branch {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: var(--fs-3xs);
  opacity: 0.55;
}

.count-24h,
.count-total {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.count-24h .view-num {
  color: var(--muted);
}

.count-total .view-num {
  color: var(--text);
  font-weight: 500;
}

/* -----------------------------------------------
   Responsive
----------------------------------------------- */
@media (max-width: 640px) {
  html { font-size: 16px; }

  header { padding: 0 1rem; }
  main   { padding: 2.5rem 1.25rem 3rem; }
  main.main-wide { padding: 1rem 0.5rem 2.5rem; }
  footer { padding: 0.35rem 1rem; }

  nav { height: auto; padding: 0.75rem 0; flex-direction: column; align-items: flex-start; gap: 0.6rem; }

  .nav-links {
    flex-wrap: wrap;
    gap: 1.25rem;
  }

  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: auto;
  }

  .post-header h1 { font-size: var(--fs-xl); }

  .search-wrapper {
    max-width: 100%;
  }

  .news-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .category-filters {
    overflow-x: auto;
    padding-bottom: 0.3rem;
  }

  .stats-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  .stats-section-box {
    padding: 1rem 0.85rem;
  }
}

/* -----------------------------------------------
   Cosmic 3px Bayer Dither Page Transitions (<= 220ms)
----------------------------------------------- */
:root {
  --bayer-dither-high: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Crect width='12' height='12' fill='%23000'/%3E%3Crect x='0' y='0' width='3' height='3' fill='none'/%3E%3Crect x='6' y='6' width='3' height='3' fill='none'/%3E%3C/svg%3E");
  --bayer-dither-med: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Crect x='0' y='0' width='3' height='3' fill='%23000'/%3E%3Crect x='6' y='0' width='3' height='3' fill='%23000'/%3E%3Crect x='3' y='3' width='3' height='3' fill='%23000'/%3E%3Crect x='9' y='3' width='3' height='3' fill='%23000'/%3E%3Crect x='0' y='6' width='3' height='3' fill='%23000'/%3E%3Crect x='6' y='6' width='3' height='3' fill='%23000'/%3E%3Crect x='3' y='9' width='3' height='3' fill='%23000'/%3E%3Crect x='9' y='9' width='3' height='3' fill='%23000'/%3E%3C/svg%3E");
  --bayer-dither-low: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Crect x='3' y='0' width='3' height='3' fill='%23000'/%3E%3Crect x='0' y='3' width='3' height='3' fill='%23000'/%3E%3Crect x='6' y='6' width='3' height='3' fill='%23000'/%3E%3Crect x='9' y='9' width='3' height='3' fill='%23000'/%3E%3C/svg%3E");
}

@keyframes ditherExit {
  0% {
    opacity: 1;
    transform: scale(1);
    -webkit-mask-image: none;
    mask-image: none;
  }
  33% {
    opacity: 0.75;
    transform: scale(0.998);
    -webkit-mask-image: var(--bayer-dither-high);
    mask-image: var(--bayer-dither-high);
    -webkit-mask-size: 12px 12px;
    mask-size: 12px 12px;
  }
  66% {
    opacity: 0.45;
    transform: scale(0.994);
    -webkit-mask-image: var(--bayer-dither-med);
    mask-image: var(--bayer-dither-med);
    -webkit-mask-size: 12px 12px;
    mask-size: 12px 12px;
  }
  90% {
    opacity: 0.15;
    transform: scale(0.990);
    -webkit-mask-image: var(--bayer-dither-low);
    mask-image: var(--bayer-dither-low);
    -webkit-mask-size: 12px 12px;
    mask-size: 12px 12px;
  }
  100% {
    opacity: 0;
    transform: scale(0.988);
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@keyframes ditherEnter {
  0% {
    opacity: 0;
    transform: translateY(3px) scale(0.990);
    -webkit-mask-image: var(--bayer-dither-low);
    mask-image: var(--bayer-dither-low);
    -webkit-mask-size: 12px 12px;
    mask-size: 12px 12px;
  }
  33% {
    opacity: 0.45;
    transform: translateY(2px) scale(0.994);
    -webkit-mask-image: var(--bayer-dither-med);
    mask-image: var(--bayer-dither-med);
    -webkit-mask-size: 12px 12px;
    mask-size: 12px 12px;
  }
  66% {
    opacity: 0.80;
    transform: translateY(1px) scale(0.998);
    -webkit-mask-image: var(--bayer-dither-high);
    mask-image: var(--bayer-dither-high);
    -webkit-mask-size: 12px 12px;
    mask-size: 12px 12px;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.dither-exit {
  animation: ditherExit 85ms steps(4) forwards !important;
  pointer-events: none !important;
}

.dither-enter {
  animation: ditherEnter 130ms steps(4) forwards !important;
}