/*
  OTSeen design tokens
  - App-shell redesign (2026-09): a near-black, blue-tinted dark theme is the
    flagship; the light theme is the same structure re-derived for a white
    ground. Panels are raised surfaces with 1px hairlines and 10-12px radii.
  - Vivid blue accent for interactive/branding elements. Two blues on
    purpose: --color-accent is the *text/border* blue (it must clear 4.5:1
    on the page and panel backgrounds) and --color-accent-solid is the
    *button-fill* blue, one step darker so white text on it clears 4.5:1 too.
    Using one hex for both fails one side or the other - see the a11y notes.
  - Green/red are reserved for market up/down values only. Never chrome.
*/

:root {
  color-scheme: light;

  --font-ui: Archivo, "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --color-bg: #f4f6fa;
  /* Panels/cards. Distinct from --color-bg-raised, which stays the older
     "slightly tinted strip" token the pre-redesign components use. */
  --color-surface: #ffffff;
  --color-surface-2: #f7f9fc;
  --color-bg-raised: #f7f9fc;
  --color-border: #dde3ec;
  /* Stronger border for actual UI-component boundaries (inputs, textareas,
     selects) - WCAG 2.2 SC 1.4.11 Non-text Contrast requires 3:1 against
     the adjacent background for these; the hairline --color-border above
     stays reserved for purely decorative dividers (panels, tables, cards),
     which the SC doesn't cover. ~4.1:1 on white. */
  --color-border-control: #767e86;
  --color-text: #0f172a;
  --color-text-muted: #515c70;
  --color-accent: #1d4ed8;
  --color-accent-solid: #2563eb;
  --color-accent-text: #ffffff;
  --color-accent-soft: rgba(37, 99, 235, 0.1);
  --color-accent-line: rgba(37, 99, 235, 0.35);
  --color-link: #1d4ed8;
  --color-link-visited: #1d4ed8;
  --color-focus-ring: #1d4ed8;
  --color-danger: #b3261e;
  --color-danger-bg: #fdecea;

  --color-value-up: #0f7a3d;
  --color-value-down: #b3261e;

  /* Hover wash for rail/menu rows, and the modal scrim. */
  --color-hover: #e9edf4;
  --color-scrim: rgba(15, 23, 42, 0.45);

  /* Type chips (feed cards). Foreground is the text colour; the wash behind
     it is deliberately faint so the chip never competes with the post. */
  --chip-discussion: #1d4ed8;
  --chip-prediction: #15803d;
  --chip-dd: #6d28d9;
  --chip-question: #0f766e;
  --chip-catalyst: #92400e;
  --chip-filings: #7e22ce;
  --chip-statement: #b3261e;
  --chip-wash: 0.09;

  --radius: 2px;
  /* Buttons only: rounded per Rev 2. Tags/labels/inputs stay flat. */
  --radius-btn: 8px;
  /* Redesign surfaces: cards, panels, chips. */
  --radius-card: 12px;
  --radius-pill: 999px;
  --border-width: 1px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* App-shell metrics (theme-independent). */
  --tape-h: 34px;
  --topbar-h: 64px;
  --sidebar-w: 230px;
  /* Kept: several pre-redesign rules still reference it. */
  --rail-w: 230px;
  --tabbar-h: 58px;
  --side-col-w: 380px;
}

/* Dark theme values live once, in a custom property block applied from both
   the media query (system preference) and the explicit [data-theme="dark"]
   override below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #0a0e17;
    --color-surface: #10182a;
    --color-surface-2: #141d33;
    --color-bg-raised: #131b2c;
    --color-border: #1e293b;
    --color-border-control: #7c8ba5;
    --color-text: #e6edf7;
    --color-text-muted: #97a3b8;
    --color-accent: #3b82f6;
    --color-accent-solid: #2563eb;
    --color-accent-text: #ffffff;
    --color-accent-soft: rgba(59, 130, 246, 0.16);
    --color-accent-line: rgba(59, 130, 246, 0.45);
    --color-link: #3b82f6;
    --color-link-visited: #3b82f6;
    --color-focus-ring: #60a5fa;
    --color-danger: #ff8a80;
    --color-danger-bg: #3a1f1c;

    --color-value-up: #22c55e;
    --color-value-down: #f87171;

    --color-hover: #1a2338;
    --color-scrim: rgba(0, 0, 0, 0.65);

    --chip-discussion: #60a5fa;
    --chip-prediction: #4ade80;
    --chip-dd: #c4b5fd;
    --chip-question: #5eead4;
    --chip-catalyst: #fbbf24;
    --chip-filings: #d8b4fe;
    --chip-statement: #fca5a5;
    --chip-wash: 0.14;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0a0e17;
  --color-surface: #10182a;
  --color-surface-2: #141d33;
  --color-bg-raised: #131b2c;
  --color-border: #1e293b;
  --color-border-control: #7c8ba5;
  --color-text: #e6edf7;
  --color-text-muted: #97a3b8;
  --color-accent: #3b82f6;
  --color-accent-solid: #2563eb;
  --color-accent-text: #ffffff;
  --color-accent-soft: rgba(59, 130, 246, 0.16);
  --color-accent-line: rgba(59, 130, 246, 0.45);
  --color-link: #3b82f6;
  --color-link-visited: #3b82f6;
  --color-focus-ring: #60a5fa;
  --color-danger: #ff8a80;
  --color-danger-bg: #3a1f1c;

  --color-value-up: #22c55e;
  --color-value-down: #f87171;

  --color-hover: #1a2338;
  --color-scrim: rgba(0, 0, 0, 0.65);

  --chip-discussion: #60a5fa;
  --chip-prediction: #4ade80;
  --chip-dd: #c4b5fd;
  --chip-question: #5eead4;
  --chip-catalyst: #fbbf24;
  --chip-filings: #d8b4fe;
  --chip-statement: #fca5a5;
  --chip-wash: 0.14;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* WCAG 2.2 SC 2.3.3 / user preference: near-eliminate motion for anyone who
   has asked their OS for it, site-wide, rather than special-casing each of
   the handful of transitions we have (collapse-toggle's caret rotation, the
   hover/focus states below). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visually hidden but available to assistive tech. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  /* Sticky footer: body is a full-viewport flex column so the footer hugs
     the bottom on short pages and simply follows content on long ones (see
     .layout's flex: 1 0 auto below). 100vh first as a fallback for browsers
     without dvh support; 100dvh overrides it where available so mobile
     browser chrome doesn't leave a gap. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.mono {
  font-family: var(--font-mono);
}

a {
  color: var(--color-link);
  text-decoration: underline;
}

a:visited {
  color: var(--color-link-visited);
}

a:hover {
  text-decoration: none;
}

/* Visible focus states everywhere (WCAG 2.2 AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--color-accent-solid);
  color: var(--color-accent-text);
  padding: var(--space-2) var(--space-3);
}

.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

/* ---------------------------------------------------------------------- */
/* Header / footer                                                        */
/* ---------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 45;
  min-height: var(--topbar-h);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  min-height: var(--topbar-h);
}

/* Drawer trigger - only below the sidebar breakpoint, and only with JS
   (without it the sidebar renders inline instead, see .sidebar below). */
.topbar__menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-btn);
  background: none;
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
}

.topbar__menu:hover {
  background: var(--color-hover);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
  flex-shrink: 0;
}

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.brand__mark .icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand__name {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.brand__tagline {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

.wordmark {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.wordmark:hover {
  text-decoration: none;
  color: var(--color-accent);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}

.topbar__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-btn);
  background: none;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

.topbar__icon-btn:hover:not(:disabled) {
  background: var(--color-hover);
}

.topbar__icon-btn:disabled {
  color: var(--color-text-muted);
  cursor: default;
}

/* Unread marker on the mail icon - paired with the link's own
   "N unread" accessible name, never the only signal. */
.topbar__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  border: 2px solid var(--color-surface);
}

/* The sidebar owns Messages on desktop. */
@media (min-width: 1024px) {
  .topbar__mail {
    display: none;
  }
}

/*
  Light/dark toggle (sits between the bell and the avatar). Both icons are
  always in the DOM; which one paints is decided by the same cascade that
  drives the color tokens at the top of this file (prefers-color-scheme,
  overridden by an explicit [data-theme]) rather than by JS, so the icon is
  never a frame behind the theme it names. The sun means "it's dark, click
  to go light"; the moon means "it's light, click to go dark". Selectors are
  two classes deep so they always outrank the later, single-class `.icon`
  rule regardless of source order.
*/
.topbar__theme-toggle .theme-toggle__icon--sun {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar__theme-toggle .theme-toggle__icon--sun {
    display: block;
  }
  :root:not([data-theme="light"]) .topbar__theme-toggle .theme-toggle__icon--moon {
    display: none;
  }
}

:root[data-theme="dark"] .topbar__theme-toggle .theme-toggle__icon--sun {
  display: block;
}

:root[data-theme="dark"] .topbar__theme-toggle .theme-toggle__icon--moon {
  display: none;
}

.topbar__login {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

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

/* Narrow phones: the tagline and the wide gaps push the avatar off the
   edge, so both shrink and the search collapses to its icon (site.js). */
@media (max-width: 560px) {
  .topbar__inner {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  .brand__tagline {
    display: none;
  }

  .topbar__actions {
    gap: 2px;
  }

  .topbar__icon-btn {
    min-width: 30px;
  }
}

/* ---------------------------------------------------------------------- */
/* Header ticker search (typeahead combobox)                              */
/* ---------------------------------------------------------------------- */

/* Grows to fill the space the top bar's mini quote widgets used to occupy
   (removed 2026-09: "dual marquee" cleanup, the tape is now the single
   price strip) - wider caps at the breakpoints with more room to give. */
.header-search {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
  max-width: 480px;
  display: flex;
  align-items: center;
}

@media (min-width: 1280px) {
  .header-search {
    max-width: 560px;
  }
}

@media (min-width: 1536px) {
  .header-search {
    max-width: 640px;
  }
}

.header-search__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-btn);
  background: none;
  color: var(--color-text);
  cursor: pointer;
}

.header-search__toggle:hover {
  background: var(--color-hover);
  border-color: var(--color-border);
}

.header-search__field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Redesign: magnifier on the left, keycap hint on the right. */
.header-search__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.header-search__input {
  width: 100%;
  font: inherit;
  font-size: 0.875rem;
  padding: var(--space-2) 68px var(--space-2) calc(var(--space-3) * 2 + 0.9em);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  color: var(--color-text);
}

.header-search__input::placeholder {
  color: var(--color-text-muted);
}

/* Keycap hint for the Cmd/Ctrl+K shortcut (site.js). Decorative: the
   shortcut works regardless, and the input already has a real label. */
.header-search__kbd {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 2px;
  pointer-events: none;
}

.header-search__kbd kbd {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1;
  padding: 3px 4px;
  border: var(--border-width) solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text-muted);
}

@media (max-width: 1023.98px) {
  .header-search__kbd {
    display: none;
  }

  .header-search__input {
    padding-right: var(--space-3);
  }
}

.header-search__close {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-left: var(--space-1);
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.header-search__listbox {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  max-height: 360px;
  overflow-y: auto;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 20px var(--color-scrim);
}

.header-search__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-top: var(--border-width) solid var(--color-border);
}

.header-search__option:first-child {
  border-top: none;
}

.header-search__option:hover,
.header-search__option[aria-selected="true"] {
  background: var(--color-hover);
}

.header-search__option--empty,
.header-search__option--empty:hover {
  cursor: default;
  color: var(--color-text-muted);
  background: none;
}

.header-search__symbol-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

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

.header-search__name {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-search__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.8125rem;
  flex-shrink: 0;
}

.header-search__change {
  font-size: 0.75rem;
}

@media (max-width: 640px) {
  .js .header-search__toggle {
    display: inline-flex;
  }

  .js .header-search__field {
    display: none;
  }

  .js .header-search__close {
    display: inline-flex;
  }

  .js .header-search.is-open {
    position: absolute;
    inset: 0;
    z-index: 55;
    padding: 0 var(--space-3);
    background: var(--color-bg);
  }

  .js .header-search.is-open .header-search__toggle {
    display: none;
  }

  .js .header-search.is-open .header-search__field {
    display: flex;
    max-width: none;
  }

  .js .header-search.is-open .header-search__listbox {
    left: var(--space-3);
    right: var(--space-3);
  }
}

/* .user-identity / .header-mail (the pre-redesign header's spelled-out
   identity and mail icon) were removed with the old .site-header - the
   top bar shows an avatar button, and Messages lives in the sidebar. */

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-link);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.link-button:hover {
  text-decoration: none;
}

.site-footer {
  /* flex-shrink: 0 keeps the footer at its natural height even though
     body is a flex column - without it a very short viewport could
     compress it. */
  flex-shrink: 0;
  border-top: var(--border-width) solid var(--color-border);
  margin-top: var(--space-6);
}

.site-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
  justify-content: space-between;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.disclaimer {
  margin: 0;
}

.footer-nav {
  display: flex;
  gap: var(--space-4);
}

.footer-nav a {
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Layout                                                                  */
/* ---------------------------------------------------------------------- */

.layout {
  /* Grows to fill any leftover space in the body flex column, so the
     footer sits at the viewport bottom on short pages instead of floating
     above a dead band of background. */
  flex: 1 0 auto;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-4);
}

.layout--narrow {
  max-width: 720px;
}

/* ---------------------------------------------------------------------- */
/* Global trending tape (top of every page, guests included)              */
/* ---------------------------------------------------------------------- */

.tape {
  /* Not sticky below the sidebar breakpoint: the sticky top bar sits above
     it, and two stacked sticky strips would eat a third of a phone
     viewport, so here the tape scrolls away with the page. From 1024px it
     becomes sticky and pins above the top bar instead (see that media
     query below) - kept at every width from there up. It is the single
     price strip; the top bar's mini quote widgets were removed 2026-09. */
  position: relative;
  z-index: 40;
  height: var(--tape-h);
  display: flex;
  align-items: center;
  background: var(--color-bg-raised);
  border-bottom: var(--border-width) solid var(--color-border);
  /* The crawl (.tape__track) supplies its own motion, so the outer strip
     just clips it - see the auto-scroll rules below for the
     prefers-reduced-motion fallback, which restores manual side-scrolling. */
  overflow-x: hidden;
  overflow-y: hidden;
  /* Never wraps: it scrolls sideways instead. */
  white-space: nowrap;
  scrollbar-width: thin;
}

.tape__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: max-content;
}

.tape__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
}

.tape__item + .tape__item {
  padding-left: var(--space-4);
  border-left: var(--border-width) solid var(--color-border);
}

.tape__pin {
  color: var(--color-accent);
  display: inline-flex;
  font-size: 0.8125rem;
}

.tape__symbol {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
}

.tape__symbol:hover,
.tape__symbol:focus-visible {
  color: var(--color-accent);
}

.tape__pct--none {
  color: var(--color-text-muted);
}

.tape__empty {
  margin: 0;
  padding: 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* ---------------------------------------------------------------------- */
/* Left sidebar (desktop app shell) + mobile drawer                        */
/* ---------------------------------------------------------------------- */

/*
  Below 1024px the sidebar is a drawer. Without JS it never opens - so it
  is NOT hidden there, it simply renders inline at the end of the document
  (after the footer, before the tab bar), where it is still reachable. The
  `.js` class - set by site.js on <html> - is what turns it into an
  off-canvas panel with a trigger.
*/
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
}

.js .sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(300px, 84vw);
  z-index: 60;
  border-top: none;
  border-right: var(--border-width) solid var(--color-border);
  overflow-y: auto;
  transform: translateX(-102%);
  transition: transform 0.18s ease;
}

.js .sidebar.is-open {
  transform: translateX(0);
}

.sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--color-scrim);
}

@media (min-width: 1024px) {
  body {
    /* Everything below the tape/top bar sits to the right of the sidebar. */
    padding-left: var(--sidebar-w);
  }

  .tape,
  .topbar {
    /* ...except the two full-bleed strips across the top. */
    margin-left: calc(-1 * var(--sidebar-w));
    padding-left: var(--sidebar-w);
  }

  /* Desktop has the height to spare, so the tape pins above the top bar
     rather than scrolling away - which also keeps the fixed sidebar's top
     offset constant instead of drifting as the page scrolls. */
  .tape {
    position: sticky;
    top: 0;
  }

  .topbar {
    top: calc(var(--tape-h) + var(--border-width));
  }

  .sidebar,
  .js .sidebar {
    position: fixed;
    top: calc(var(--tape-h) + var(--topbar-h) + var(--border-width) * 2);
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    z-index: 30;
    transform: none;
    transition: none;
    border-top: none;
    border-right: var(--border-width) solid var(--color-border);
    overflow-y: auto;
  }

  .sidebar-scrim,
  .topbar__menu {
    display: none !important;
  }
}

@media (max-width: 1023.98px) {
  .js .topbar__menu {
    display: inline-flex;
  }
}

.sidebar__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The visual gap the mock puts between the section nav and the personal
   rows (Messages / Notifications / Profile / Settings). */
.sidebar__nav--secondary {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-btn);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
}

.sidebar__link:hover {
  background: var(--color-hover);
}

.sidebar__link .icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.sidebar__link--active {
  background: var(--color-accent-solid);
  color: var(--color-accent-text);
}

.sidebar__link--active:hover {
  background: var(--color-accent-solid);
}

.sidebar__link--active .icon {
  color: var(--color-accent-text);
}

.sidebar__label {
  flex: 1;
  min-width: 0;
}

.sidebar__count {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.sidebar__link--active .sidebar__count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--color-accent-text);
}

/* Provisional destination: styled like a row, but not operable (see the
   a11y audit's finding #8 - an aria-disabled link is still a link). */
.sidebar__link--soon {
  color: var(--color-text-muted);
  cursor: default;
}

.sidebar__link--soon:hover {
  background: none;
}

.sidebar__soon,
.rail__soon,
.tabbar__soon {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: 0 4px;
}

/* ---------------------------------------------------------------------- */
/* "Your Progress" card (pinned to the bottom of the sidebar)              */
/* ---------------------------------------------------------------------- */

.progress-card {
  margin-top: auto;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-2);
}

.progress-card__level {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  font-size: 0.875rem;
}

.progress-card__track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-hover);
  overflow: hidden;
}

.progress-card__bar {
  height: 100%;
  background: var(--color-accent-solid);
  border-radius: var(--radius-pill);
}

.progress-card__stat {
  margin: var(--space-2) 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.progress-card__hint {
  margin: var(--space-2) 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.progress-card__link {
  color: var(--color-accent);
  font-weight: 600;
}

.progress-card__cta {
  margin-top: var(--space-3);
  width: 100%;
  justify-content: center;
}

/* ---------------------------------------------------------------------- */
/* Mobile bottom tab bar (< 768px, signed in)                             */
/* ---------------------------------------------------------------------- */

.tabbar {
  display: none;
}

@media (max-width: 767px) {
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    min-height: var(--tabbar-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--color-bg);
    border-top: var(--border-width) solid var(--color-border);
  }

  /* Reserve the bar's height only on pages that actually render one
     (signed-in views); guests keep the full viewport. */
  body:has(.tabbar) {
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  }
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: var(--space-1);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.625rem;
  letter-spacing: 0.02em;
}

.tabbar__item .icon {
  font-size: 1.25rem;
}

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

.tabbar__item--soon {
  opacity: 0.75;
}

.tabbar__soon {
  margin-left: 2px;
}

.tabbar__item--primary {
  /* Raised centre action. */
  justify-content: flex-start;
  margin-top: -18px;
}

.tabbar__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-accent-solid);
  color: var(--color-accent-text);
  border: 2px solid var(--color-bg);
}

.tabbar__disc .icon {
  font-size: 1.375rem;
}

.value-up {
  color: var(--color-value-up);
}

.value-down {
  color: var(--color-value-down);
}

/* ---------------------------------------------------------------------- */
/* Feed                                                                    */
/* ---------------------------------------------------------------------- */

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

.feed__item {
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-3) 0;
}

.feed__empty {
  border: var(--border-width) dashed var(--color-border);
  padding: var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */

.form-field {
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}

.form-field--checkbox label {
  font-weight: 400;
}

label {
  font-weight: 500;
  font-size: 0.875rem;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
}

input[type="checkbox"] {
  margin-top: 3px;
}

.field-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.field-error {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-danger);
}

.form-error {
  border: var(--border-width) solid var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 0.875rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: inherit;
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius-btn);
  background: var(--color-bg);
  color: var(--color-accent);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--color-bg-raised);
}

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

/* Solid blue fill: white label needs the darker of the two accent blues to
   clear 4.5:1 - see the token block's note. */
.btn--primary {
  background: var(--color-accent-solid);
  border-color: var(--color-accent-solid);
  color: var(--color-accent-text);
}

/* Header / composer sized button. */
.btn--compact {
  padding: var(--space-1) var(--space-3);
  min-height: 32px;
  font-size: 0.875rem;
}

.btn--primary:hover {
  opacity: 0.92;
}

/*
  Root-cause fix for anchors styled as buttons (<a class="btn ...">, e.g.
  ticker.ejs's "Log in to post"/"New DD", filing.ejs's "Open on SEC.gov",
  pagination links, etc). The global `a { color: var(--color-link) }` above
  is a plain element selector (specificity 0,0,1), so a single
  .btn/.btn--primary class (0,1,0) already beats it - but `a:visited`
  is an element+pseudo-class (specificity 0,1,1), which DOES beat a bare
  .btn/.btn--primary (0,1,0). Once the visitor's browser has ever visited
  the href (trivially true for "/login" - the founder had certainly opened
  it before), a:visited's color wins the cascade. Because
  --color-link-visited intentionally reuses the same accent hue as
  --color-accent/--color-accent-text, that makes a visited
  <a class="btn btn--primary"> collapse to background-colored text - or
  for a bare <a class="btn">, muted accent-on-accent-bordered text that
  reads as barely-there. Focus/hover don't set color at all, so tabbing to
  the link (outline appears) or hovering (background/opacity shifts) can
  look like it "fixes" the contrast without the text itself changing -
  matching the reported "invisible until clicked/focused" symptom.
  Compounding the element selector back in (a.btn, a.btn--primary) plus an
  explicit :visited re-declaration raises specificity to (0,2,0)/(0,2,1),
  which beats `a`/`a:visited` in every link state, in both themes, without
  touching the non-anchor .btn/.btn--primary rules above (buttons don't
  have a :visited state).
*/
a.btn,
a.btn:visited {
  color: var(--color-accent);
}

a.btn--primary,
a.btn--primary:visited {
  color: var(--color-accent-text);
}

.btn--pill {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.btn--up {
  border-color: var(--color-value-up);
  color: var(--color-value-up);
}

.btn--down {
  border-color: var(--color-value-down);
  color: var(--color-value-down);
}

/* ---------------------------------------------------------------------- */
/* Icons                                                                   */
/* ---------------------------------------------------------------------- */

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  fill: none;
}

/* Non-color cue for an above/below-entry price (see .data-bar__item "Now"
   cell in partials/thread-expanded.ejs) - SC 1.4.1 Use of Color: the
   value-up/value-down text color alone isn't a reliable signal for
   colorblind readers, so a direction glyph rides along with it. */
.value-dir-icon {
  width: 0.7em;
  height: 0.7em;
  margin-right: 2px;
  vertical-align: 0;
}

/* ---------------------------------------------------------------------- */
/* Identity (shared partial: username / rating / display_tag)             */
/* ---------------------------------------------------------------------- */

.identity {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 0.875rem;
}

/*
  Username color is theme-aware: identity.ejs emits both hexes as custom
  properties (--uc-l light, --uc-d dark) and each theme picks its own. With
  no color set neither property exists and the name inherits body text.
  See src/lib/palette.ts for the measured contrast ratios.
*/
.identity__name {
  font-weight: 600;
  color: var(--uc-l, inherit);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .identity__name {
    color: var(--uc-d, inherit);
  }
}

:root[data-theme="dark"] .identity__name {
  color: var(--uc-d, inherit);
}

.identity__rating {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.identity__tag {
  color: var(--color-text-muted);
}

/* Flat small-caps "OFFICIAL" label for a verified company rep's post -
   accent color, never a chip/badge (see partials/identity.ejs). */
.identity__official {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

/* ---------------------------------------------------------------------- */
/* Cred level + badge strip (profile) - two-track rule: cred (accuracy      */
/* authority) and badges (engagement decoration) are always visually       */
/* separate sections. Badges render as flat small-caps text, never chips.  */
/* ---------------------------------------------------------------------- */

.cred-level {
  margin: var(--space-2) 0 0;
  font-weight: 600;
  color: var(--color-text-muted);
}

.badge-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.badge-strip__item {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Lounge board header                                                    */
/* ---------------------------------------------------------------------- */

.lounge-header {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.lounge-header__desc {
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

/* ---------------------------------------------------------------------- */
/* Ticker header                                                          */
/* ---------------------------------------------------------------------- */

.ticker-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.ticker-header__symbol-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ticker-header__symbol {
  font-size: 1.5rem;
  font-weight: 600;
}

.ticker-header__name {
  margin: var(--space-1) 0 0 0;
  font-size: 1.125rem;
  font-weight: 500;
}

.ticker-header__sub {
  margin: 2px 0 0 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.ticker-header__price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.ticker-header__last {
  font-size: 1.375rem;
  font-weight: 600;
}

.ticker-header__change {
  font-weight: 500;
}

.ticker-header__delayed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.watch-form {
  display: inline-flex;
}

.watch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  background: none;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-btn);
  line-height: 0;
}

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

.watch-btn--active {
  color: var(--color-accent);
}

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

/* ---------------------------------------------------------------------- */
/* Report affordance (thread cards, expanded threads, comments) - a quiet   */
/* flag-icon button, same muted-until-hover treatment as .watch-btn.        */
/* ---------------------------------------------------------------------- */

.report-form {
  display: inline-flex;
}

.report-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  background: none;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-btn);
  line-height: 0;
  font-size: 0.8125rem;
}

.report-btn:hover {
  color: var(--color-danger);
  background: var(--color-hover);
}

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

/* ---------------------------------------------------------------------- */
/* Panels (sentiment, share structure)                                    */
/* ---------------------------------------------------------------------- */

.ticker-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (max-width: 640px) {
  .ticker-panels {
    grid-template-columns: 1fr;
  }
}

.panel {
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-4);
}

.panel-title {
  margin: 0 0 var(--space-3) 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.panel-empty {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin: 0;
}

/* Sentiment meter */

.sentiment-meter__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

.sentiment-meter__label--up {
  color: var(--color-value-up);
}

.sentiment-meter__label--down {
  color: var(--color-value-down);
}

.sentiment-meter__bar {
  display: flex;
  width: 100%;
  height: 10px;
  background: var(--color-bg-raised);
  border: var(--border-width) solid var(--color-border);
  overflow: hidden;
}

.sentiment-meter__bar--empty {
  background: repeating-linear-gradient(
    45deg,
    var(--color-bg-raised),
    var(--color-bg-raised) 6px,
    var(--color-border) 6px,
    var(--color-border) 7px
  );
}

.sentiment-meter__fill--up {
  background: var(--color-value-up);
}

.sentiment-meter__fill--down {
  background: var(--color-value-down);
}

.sentiment-meter__stats {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-2);
  font-size: 0.8125rem;
}

.sentiment-meter__count {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
}

.sentiment-meter__empty {
  margin: var(--space-2) 0 0 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* Share structure */

.share-structure__grid {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  font-size: 0.875rem;
}

.share-structure__row {
  display: contents;
}

.share-structure__row dt {
  color: var(--color-text-muted);
}

.share-structure__row dd {
  margin: 0;
  text-align: right;
}

.share-structure__note {
  margin: var(--space-3) 0 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

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

.ticker-compose {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* "Ask the company" hint - wraps to its own line under the compose buttons
   rather than squeezing into the flex row alongside them. */
.ticker-compose__hint {
  flex-basis: 100%;
  margin-top: var(--space-1);
}

/* ---------------------------------------------------------------------- */
/* Sort tabs                                                              */
/* ---------------------------------------------------------------------- */

.sort-tabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-3);
}

.sort-tab {
  padding: var(--space-2) 0;
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

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

.sort-tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

/* ---------------------------------------------------------------------- */
/* Thread type label                                                      */
/* ---------------------------------------------------------------------- */

.type-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: var(--border-width) solid var(--color-border);
  padding: 1px 6px;
}

/* ---------------------------------------------------------------------- */
/* Thread cards / feed                                                    */
/* ---------------------------------------------------------------------- */

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

.thread-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.thread-card__votes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 28px;
}

.vote-form {
  display: inline-flex;
}

.vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  background: none;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-btn);
  padding: 2px;
  line-height: 0;
  color: var(--color-text-muted);
  cursor: pointer;
}

.vote-btn:hover {
  border-color: var(--color-border);
}

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

.vote-btn--active-up {
  color: var(--color-value-up);
}

.vote-btn--active-down {
  color: var(--color-value-down);
}

.thread-card__score {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.thread-card__body {
  flex: 1;
  min-width: 0;
}

.thread-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.thread-card__symbol {
  font-size: 0.8125rem;
  text-decoration: none;
  color: var(--color-text-muted);
}

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

.thread-card__title {
  display: block;
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
  margin-bottom: var(--space-2);
}

.thread-card__title:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.thread-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.thread-card__comments {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* Inline expanded thread (progressive enhancement target) */

.thread-inline {
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-raised);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

/* ---------------------------------------------------------------------- */
/* Thread expanded (full page + inline fragment)                         */
/* ---------------------------------------------------------------------- */

.breadcrumb {
  font-size: 0.8125rem;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--color-text-muted);
}

.thread-expanded__head {
  display: flex;
  gap: var(--space-4);
}

.thread-expanded__body {
  flex: 1;
  min-width: 0;
}

.thread-expanded__title {
  font-size: 1.25rem;
  margin: var(--space-1) 0 var(--space-2) 0;
}

.thread-expanded__author {
  margin-bottom: var(--space-3);
}

.thread-expanded__text,
.thread-expanded__thesis {
  white-space: pre-wrap;
  line-height: 1.6;
}

.statement-quote {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-raised);
  font-style: italic;
}

/*
  Flat data bar: one bordered strip of cells, hairline separators, mono
  figures. The prediction variant is the six-cell version
  (TARGET / BY / ENTRY / NOW / AGREE-DISAGREE / STATUS).
*/
.data-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  /* 1px gaps over a border-colored ground draw the cell separators, so they
     stay correct however the cells wrap. */
  gap: var(--border-width);
  margin: var(--space-3) 0;
  padding: 0;
  background: var(--color-border);
  border: var(--border-width) solid var(--color-border);
  font-size: 0.8125rem;
}

.data-bar--six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .data-bar--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .data-bar--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.data-bar__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-raised);
  min-width: 0;
}

.data-bar__item dt {
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* Labels wrap rather than truncate - a clipped "AGREE / DIS…" tells the
     reader less than a two-line label does. */
  overflow-wrap: anywhere;
}

.data-bar__item dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.data-bar__split {
  color: var(--color-text-muted);
  margin: 0 2px;
}

.data-bar__n {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  margin-left: var(--space-1);
}

.vote-pair {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

/* ---------------------------------------------------------------------- */
/* Comments                                                                */
/* ---------------------------------------------------------------------- */

.comments {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.comment-form {
  margin-bottom: var(--space-4);
}

textarea {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  resize: vertical;
}

input[type="number"],
input[type="date"],
input[type="datetime-local"] {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
}

select {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
}

.comment-list,
.comment-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Every .comment sits flush with its list, however deep the reply chain -
   only .comment__row is offset, by its own (server-capped 0-6) --depth, so
   indentation reflects that value directly instead of compounding once per
   nested <ul class="comment-children">. */
.comment {
  --comment-indent-step: 16px;
}

.comment__row {
  padding: var(--space-3) 0;
  margin-left: calc(var(--depth, 0) * var(--comment-indent-step));
  border-bottom: var(--border-width) solid var(--color-border);
}

.comment--nested > .comment__row {
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border);
}

@media (max-width: 640px) {
  .comment {
    --comment-indent-step: 10px;
  }
}

.comment__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.comment__body {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
}

.comment-form--reply {
  margin: var(--space-2) 0 0;
}

/* Collapse/expand toggle for a comment with replies - JS-only (no-JS
   fallback: comments simply always render expanded), same pattern as
   .mod-kebab above. */
.collapse-toggle {
  display: none;
}

.js .collapse-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.collapse-toggle__icon {
  width: 14px;
  height: 14px;
  transition: transform 0.1s ease;
}

.collapse-toggle[aria-expanded="false"] .collapse-toggle__icon {
  transform: rotate(-90deg);
}

/* ---------------------------------------------------------------------- */
/* Held / pending-review badge                                            */
/* ---------------------------------------------------------------------- */

.held-badge {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-danger);
  border: var(--border-width) solid var(--color-danger);
  padding: 1px 6px;
}

/* ---------------------------------------------------------------------- */
/* Removed-post generic notice                                            */
/* ---------------------------------------------------------------------- */

.removed-notice {
  padding: var(--space-3);
  color: var(--color-text-muted);
  font-style: italic;
  border: var(--border-width) dashed var(--color-border);
}

/* ---------------------------------------------------------------------- */
/* Private messages                                                       */
/* ---------------------------------------------------------------------- */

.message-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--border-width) solid var(--color-border);
}

.message-list__item {
  border-bottom: var(--border-width) solid var(--color-border);
}

.message-list__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--color-text);
  text-decoration: none;
}

.message-list__link:hover {
  background: var(--color-hover);
}

.message-list__identity {
  flex: 0 0 auto;
  min-width: 0;
}

.message-list__preview {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* "Unread" is bold text, not an unread dot/bubble - flat by design. */
.message-list__item--unread .message-list__identity,
.message-list__item--unread .message-list__preview {
  font-weight: 600;
  color: var(--color-text);
}

.message-list__meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.message-list__time {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Unread count: flat mono text, never a bubble/badge shape. */
.message-list__unread {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.75rem;
}

.message-thread-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.message-thread-head h1 {
  margin: 0;
}

.message-thread {
  list-style: none;
  margin: 0 0 var(--space-4) 0;
  padding: 0;
}

.message {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border: var(--border-width) solid var(--color-border);
}

/* Own messages are distinguished by background only - no alignment games. */
.message--own {
  background: var(--color-bg-raised);
}

.message__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.message__time {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.message__report {
  display: inline;
}

.message__report .link-button {
  font-size: 0.75rem;
}

.message__body {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
}

/* ---------------------------------------------------------------------- */
/* Admin / mod panels                                                     */
/* ---------------------------------------------------------------------- */

.admin-shell {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.admin-nav {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: sticky;
  top: var(--space-4);
}

.admin-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border: var(--border-width) solid transparent;
}

.admin-nav a:hover {
  border-color: var(--color-border);
}

.admin-nav a.admin-nav__active {
  border-color: var(--color-border);
  background: var(--color-bg-raised);
  color: var(--color-accent);
}

.admin-main {
  flex: 1;
  min-width: 0;
}

.admin-main h1 {
  margin-top: 0;
}

.admin-table-wrap {
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: top;
}

.admin-table th {
  background: var(--color-bg-raised);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-section {
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.admin-section__title {
  margin: 0 0 var(--space-3) 0;
  font-size: 1rem;
}

.admin-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.admin-inline-form .form-field {
  margin-bottom: 0;
  min-width: 160px;
}

.status-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
  display: inline-block;
}

.status-tag--active {
  color: var(--color-value-up);
  border-color: var(--color-value-up);
}

.status-tag--timeout {
  color: #a5760a;
  border-color: #a5760a;
}

.status-tag--banned {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn--small {
  padding: 2px var(--space-2);
  font-size: 0.8125rem;
}

.btn--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.btn--danger:hover {
  background: var(--color-danger-bg);
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 720px) {
  .admin-shell {
    flex-direction: column;
  }
  .admin-nav {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }
  .admin-detail-grid {
    grid-template-columns: 1fr;
  }
}

.help-text {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3) 0;
}

.ip-list {
  margin: 0;
  padding-left: 1.1em;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------- */
/* Google sign-in button                                                  */
/* ---------------------------------------------------------------------- */

.btn--google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn--google:hover {
  background: var(--color-bg-raised);
}

/* Same a:visited specificity gap as a.btn/a.btn--primary above - /auth/google
   is a real, frequently-visited href, so harden this one too. */
a.btn--google,
a.btn--google:visited {
  color: var(--color-text);
}

.auth-card__divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.auth-card__divider::before,
.auth-card__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ---------------------------------------------------------------------- */
/* Standalone auth pages (login/register) - no app shell                  */
/* ---------------------------------------------------------------------- */

.auth-body {
  margin: 0;
  /* Override the app shell's left-rail reservation (body { padding-left:
     var(--rail-w) } at >=1024px, see "Left rail" below): these are
     standalone pages with no rail, and that leftover padding was pushing
     the centered card off to the right of true viewport center. */
  padding-left: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-raised);
  color: var(--color-text);
  font-family: var(--font-ui);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  margin: var(--space-5);
  padding: var(--space-5);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
}

.auth-card .btn--primary {
  /* The Google button and inputs stay full-width; only the primary submit
     button shrinks to its label and centers under them. */
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.auth-card__logo {
  display: block;
  margin-bottom: var(--space-4);
}

.auth-card__title {
  margin: 0 0 var(--space-4) 0;
  font-size: 1.25rem;
}

.auth-card__alt {
  margin-top: var(--space-4);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Official links panel                                                   */
/* ---------------------------------------------------------------------- */

.official-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.official-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------------- */
/* Filings (ticker page panel + /t/:symbol/filings + /filing/:id)         */
/* ---------------------------------------------------------------------- */

.filings-list {
  list-style: none;
  margin: 0 0 var(--space-3) 0;
  padding: 0;
}

.filings-list__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.filings-list__row:last-child {
  border-bottom: none;
}

.filings-list__date {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.filings-list__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 0.8125rem;
}

.filings-table-wrap {
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border);
}

.filings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.filings-table th,
.filings-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: top;
}

.filings-table th {
  background: var(--color-bg-raised);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}

.filings-table tr:last-child td {
  border-bottom: none;
}

.filing-detail__meta {
  margin: 0 0 var(--space-4) 0;
}

.filing-detail__meta .share-structure__row {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}

.filing-detail__meta dt {
  color: var(--color-text-muted);
  min-width: 90px;
}

.filing-detail__frame {
  width: 100%;
  height: 80vh;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-raised);
}

.filing-detail__unarchived {
  border: var(--border-width) dashed var(--color-border);
  padding: var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Ticker activity timeline                                               */
/* ---------------------------------------------------------------------- */

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

.timeline-list__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.timeline-list__row:last-child {
  border-bottom: none;
}

.timeline-list__date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.timeline-list__title {
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------------- */
/* Home: latest filings module                                            */
/* ---------------------------------------------------------------------- */

/* .home-filings (home's old filings module) was replaced by the right
   column's "Latest Filings" card. */


/* ---------------------------------------------------------------------- */
/* Settings                                                               */
/* ---------------------------------------------------------------------- */

.settings-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
}

.settings-fieldset legend {
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0 0 var(--space-2) 0;
}

.settings-fieldset:disabled label {
  color: var(--color-text-muted);
}

.page-title {
  margin-top: 0;
}

.settings-panel {
  margin-bottom: var(--space-5);
}

/* Two-factor backup codes - shown exactly once (see
   views/settings-totp-backup-codes.ejs). */
.backup-code-list {
  list-style: none;
  margin: var(--space-3) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  max-width: 360px;
}

.backup-code-list li {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  font-size: 0.9375rem;
}

.settings-rule {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-5) 0;
}

.settings-help--tight {
  margin: var(--space-2) 0 0 0;
}

.settings-preview {
  margin: 0 0 var(--space-4) 0;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-raised);
}

.form-notice {
  border: var(--border-width) solid var(--color-value-up);
  color: var(--color-value-up);
  background: transparent;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 0.875rem;
}

/* Radio rows: flat, no bubbles. */

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
  cursor: pointer;
}

.choice input[type="radio"] {
  margin: 0;
  accent-color: var(--color-accent);
}

.choice__label {
  font-size: 0.875rem;
}

.settings-fieldset:disabled .choice {
  cursor: not-allowed;
}

/* Username-color swatches: circles with a selected ring. */

.swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
}

.swatch-option {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 62px;
  font-weight: 400;
  cursor: pointer;
}

/* The real radio stays focusable but invisible; the swatch is its skin. */
.swatch-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-block;
  background: var(--sw-l, var(--color-bg));
  border: var(--border-width) solid var(--color-border);
  box-shadow: 0 0 0 0 var(--color-focus-ring);
}

.swatch--default {
  background: linear-gradient(135deg, var(--color-bg) 50%, var(--color-bg-raised) 50%);
}

.swatch-option input[type="radio"]:checked + .swatch {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

.swatch-option input[type="radio"]:focus-visible + .swatch {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.swatch-option__name {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
}

.swatch-option input[type="radio"]:checked ~ .swatch-option__name {
  color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .swatch {
    background: var(--sw-d, var(--color-bg));
  }
  :root:not([data-theme="light"]) .swatch--default {
    background: linear-gradient(135deg, var(--color-bg) 50%, var(--color-bg-raised) 50%);
  }
}

:root[data-theme="dark"] .swatch {
  background: var(--sw-d, var(--color-bg));
}

:root[data-theme="dark"] .swatch--default {
  background: linear-gradient(135deg, var(--color-bg) 50%, var(--color-bg-raised) 50%);
}

/* ---------------------------------------------------------------------- */
/* Avatar button + account menu (header, signed in)                       */
/* ---------------------------------------------------------------------- */

.user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

/* Without JS the panel is just three inline links; the button would be
   inert, so it stays hidden until site.js marks the document. */
.avatar-btn {
  display: none;
}

.js .avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
}

.avatar-btn__img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: var(--border-width) solid var(--color-border);
}

.avatar-btn:hover .avatar-btn__img,
.avatar-btn[aria-expanded="true"] .avatar-btn__img {
  border-color: var(--color-accent);
}

.user-menu__panel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.js .user-menu__panel {
  display: block;
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 60;
  min-width: 200px;
  padding: var(--space-1);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
}

.user-menu__form {
  display: inline;
  margin: 0;
}

.js .user-menu__form {
  display: block;
}

.user-menu__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: inherit;
  font-size: 0.875rem;
  color: var(--color-link);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.js .user-menu__item {
  /* Block-level inside the dropdown; the inline fallback stays inline-flex. */
  display: flex;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  text-align: left;
}

.js .user-menu__item:hover,
.js .user-menu__item:focus-visible {
  background: var(--color-hover);
}

/* ---------------------------------------------------------------------- */
/* Moderation: kebab, context menu, reason dialog, toasts                 */
/* ---------------------------------------------------------------------- */

.mod-kebab {
  display: none;
}

.js .mod-kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  margin-left: auto;
  padding: 2px;
  line-height: 0;
  background: none;
  color: var(--color-text-muted);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
}

.js .mod-kebab:hover,
.js .mod-kebab[aria-expanded="true"] {
  color: var(--color-text);
  border-color: var(--color-border);
}

.mod-menu {
  /* Fixed, positioned from a viewport rect - no offset-parent surprises
     inside the cards and comment lists it opens over. */
  position: fixed;
  z-index: 70;
  min-width: 208px;
  padding: var(--space-1);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
}

.mod-menu__label {
  display: block;
  padding: var(--space-1) var(--space-3) var(--space-2) var(--space-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-1);
}

.mod-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
}

.mod-menu__item:hover,
.mod-menu__item:focus-visible {
  background: var(--color-hover);
}

.mod-menu__item--danger {
  color: var(--color-danger);
}

.mod-menu__chevron {
  margin-left: auto;
  color: var(--color-text-muted);
}

.mod-dialog {
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  max-width: 420px;
  width: calc(100% - var(--space-5) * 2);
}

.mod-dialog::backdrop {
  background: var(--color-scrim);
}

.mod-dialog__form {
  padding: var(--space-4);
  margin: 0;
}

.mod-dialog__title {
  margin: 0 0 var(--space-3) 0;
  font-size: 1rem;
}

.mod-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.mod-dialog input[type="text"] {
  width: 100%;
}

.toast-stack {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 320px;
}

@media (max-width: 767px) {
  .toast-stack {
    bottom: calc(var(--tabbar-h) + var(--space-3));
  }
}

.toast {
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
  background: var(--color-bg-raised);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text);
}

.toast--error {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

.mod-menu__icon {
  display: inline-flex;
  color: var(--color-text-muted);
  line-height: 0;
}

.mod-menu__item--danger .mod-menu__icon {
  color: inherit;
}

/* Reflected in place after a moderator removes a post or bans an account:
   the container dims, the title/name takes the strike. */
.is-removed {
  opacity: 0.65;
}

.thread-card__title.is-removed,
.thread-expanded__title.is-removed,
.identity.is-removed {
  text-decoration: line-through;
}

.pin-flag {
  display: inline-flex;
  color: var(--color-accent);
}

/* ---------------------------------------------------------------------- */
/* Ticker page: two-column layout + right-column panels                   */
/* ---------------------------------------------------------------------- */

.ticker-layout__side {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  /* Under 1200px the side panels stack below the threads rather than vanish -
     the numbers are the point of the page. */
  margin-top: var(--space-5);
}

.ticker-layout__side > .panel {
  margin: 0;
}

/* [data-resolutions-panel] ("Upcoming resolutions") is authored as the last
   panel inside .ticker-layout__side and normally picks up its spacing from
   that grid's own gap, same as every other panel there (see the ">.panel"
   rule above, which zeroes this out whenever it's actually nested inside
   the aside). This margin only takes effect in the one state where it
   isn't nested: below 1200px, once site.js's initTickerTabs() has moved the
   node out to sit directly under .ticker-layout, right before .thread-feed,
   for the mobile Threads tab. */
.resolutions-panel {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

@media (min-width: 1200px) {
  .ticker-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-5);
    align-items: start;
    /* Threads sits directly under the sentiment meter in the main column
       (founder request), with filings/timeline below it - same source
       order as < 1200px, just no longer stacked full-height. "aside" fills
       both rows of the right column, same as always. */
    grid-template-areas:
      "threads aside"
      "filings aside";
  }

  .ticker-layout > .thread-feed {
    grid-area: threads;
  }

  .ticker-layout > .ticker-panels {
    grid-area: filings;
    /* The grid's own row gap now provides this spacing (see .ticker-panels'
       unconditional margin-bottom below, meant for its stacked/mobile
       context). */
    margin-bottom: 0;
  }

  .ticker-layout__side {
    grid-area: aside;
    margin-top: 0;
    position: sticky;
    top: calc(var(--tape-h) + var(--space-4));
  }

  /* Thread feed: shows roughly its first 4 cards, the rest scrolling
     inside the panel instead of pushing filings/timeline further down the
     column. Scoped to .thread-feed__scroll (wraps just the card list/empty
     state in views/ticker.ejs) so the sort tabs and compose row above it
     stay put rather than scrolling out of view. Inert below 1200px - the
     Threads tab there keeps scrolling with the page like every other tab. */
  .thread-feed__scroll {
    position: relative;
  }

  .thread-feed__scroll > .thread-card-list {
    max-height: 26rem; /* ~4 cards; a 5th peeks in to hint at more below */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* Padding + matching negative margin keep the focus ring (2px outline,
       2px offset = --space-1) from being clipped by the overflow box,
       without shifting the list's own layout. */
    padding: var(--space-1);
    margin: calc(var(--space-1) * -1);
  }

  /* Bottom fade signals more cards below. Lives on the non-scrolling
     wrapper (not the list) so it stays pinned in place while the list
     scrolls underneath it. */
  .thread-feed__scroll::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.75rem;
    background: linear-gradient(to bottom, transparent, var(--color-bg));
    pointer-events: none;
  }
}

.ticker-panels--single {
  grid-template-columns: 1fr;
}

/* ---------------------------------------------------------------------- */
/* Ticker page tab bar (< 1200px, JS-only) - founder-requested reorder so   */
/* threads/predictions are the first tab, ahead of filings/info.           */
/* ---------------------------------------------------------------------- */

.ticker-tabbar {
  display: none;
}

.js .ticker-tabbar {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  margin-bottom: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--color-bg-raised);
}

@media (min-width: 1200px) {
  /* The layout below reverts to its unchanged 2-column grid at this width,
     so the tab bar (and the tab-scoped hiding below) never applies here,
     JS or not. */
  .ticker-tabbar,
  .js .ticker-tabbar {
    display: none;
  }
}

.ticker-tab {
  flex: 1;
  text-align: center;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: calc(var(--radius-btn) - 2px);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
}

.ticker-tab[aria-selected="true"] {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 0 0 var(--border-width) var(--color-border);
}

@media (max-width: 1199.98px) {
  /* Tab panels: hide everything tagged for a tab other than the active one.
     Elements matching the active tab (or untagged entirely, e.g. the
     sentiment panel above the tab bar) are left alone - whatever their
     normal display value is applies, so nothing needs restoring here.
     A tag can name more than one tab (space-separated, matched via ~=) -
     .ticker-panels itself is tagged "filings info" so it - and its own
     margin-bottom - disappears too when Threads is active, rather than
     leaving an empty gap where its now-hidden children were.
     With no JS, .ticker-layout never gets [data-active-tab] at all, so none
     of these rules match and every section stays visible, stacked in
     source order - the no-JS fallback. */
  .ticker-layout[data-active-tab="threads"] [data-tab-group]:not([data-tab-group~="threads"]),
  .ticker-layout[data-active-tab="filings"] [data-tab-group]:not([data-tab-group~="filings"]),
  .ticker-layout[data-active-tab="info"] [data-tab-group]:not([data-tab-group~="info"]) {
    display: none;
  }
}

.stat-figure {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.stat-figure--empty {
  color: var(--color-text-muted);
}

.stat-figure__caption {
  margin: var(--space-2) 0 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.predictor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: predictor;
}

.predictor-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.predictor-list__row:last-child {
  border-bottom: none;
}

.predictor-list__record {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

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

.resolution-list__row {
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.resolution-list__row:last-child {
  border-bottom: none;
}

.resolution-list__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.resolution-list__date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.resolution-list__label {
  display: block;
  font-size: 0.875rem;
  /* Two lines, then ellipsis: quotes and theses can be long. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

/* ---------------------------------------------------------------------- */
/* Revenue panel (ticker page right column, below share structure)        */
/* ---------------------------------------------------------------------- */

.revenue-list__group-label {
  margin: var(--space-3) 0 var(--space-1) 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.revenue-list__group-label:first-child {
  margin-top: 0;
}

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

.revenue-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.revenue-list__row:last-child {
  border-bottom: none;
}

.revenue-list__label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.revenue-list__right {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.revenue-list__value {
  font-size: 0.875rem;
}

/* Flat small-caps note, same treatment as .identity__official /
   .badge-strip__item - never a chip/badge. */
.revenue-list__derived {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.revenue-list__source {
  margin: var(--space-3) 0 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Home: trending ticker list (the tape's data, browsable)                */
/* ---------------------------------------------------------------------- */

/* .mover-list (home's old "Trending now" list) was removed with the
   homepage redesign - the OTC Radar panel replaced it. */


/* ---------------------------------------------------------------------- */
/* Trending tape - Wall Street crawl (appended; see .tape rules above)    */
/* ---------------------------------------------------------------------- */

/* .tape__track wraps two identical copies of .tape__list (the second,
   .tape__list--dup, is aria-hidden with its links tabindex="-1"). Sliding
   the track from translateX(0) to translateX(-50%) - exactly one copy's
   width, since the copies are identical - reads as an infinite crawl: the
   moment the first copy has scrolled fully out of view, the second is
   sitting in the exact spot the first started from. --tape-duration is set
   inline per-page from the item count (min 30s) so the crawl speed feels
   the same whether the tape holds 5 tickers or 30. */
.tape__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: tape-crawl var(--tape-duration, 30s) linear infinite;
}

.tape__track:hover,
.tape__track:focus-within {
  animation-play-state: paused;
}

.tape__list--dup {
  /* Presentation-only duplicate for the seamless loop; screen readers get
     the primary .tape__list via the region's one accessible copy. */
  flex: 0 0 auto;
}

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

@media (prefers-reduced-motion: reduce) {
  /* Fall back to the pre-crawl static strip: no animation, one visible
     copy, manual horizontal scrolling on the outer .tape like before. */
  .tape {
    overflow-x: auto;
  }

  .tape__track {
    animation: none;
    width: auto;
  }

  .tape__list--dup {
    display: none;
  }
}

/* ---------------------------------------------------------------------- */
/* Homepage (2026-09 redesign)                                             */
/* ---------------------------------------------------------------------- */

.home {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 1180px) {
  .home {
    grid-template-columns: minmax(0, 1fr) var(--side-col-w);
  }
}

.home__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.home__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

@media (min-width: 1180px) {
  .home__side {
    position: sticky;
    top: calc(var(--topbar-h) + var(--border-width) + var(--space-4));
    max-height: calc(100vh - var(--topbar-h) - var(--space-5));
    overflow-y: auto;
    /* Keeps the sticky column's own scrollbar off the card edges. */
    padding-right: 2px;
  }
}

/* --- Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

/*
  The mock's night-mountain photograph, rebuilt without an image: a layered
  gradient "sky" with an inline-SVG ridgeline over it. It sits behind the
  right half of the card on wide viewports and is dropped entirely on
  narrow ones, where the text needs the full width.
*/
.hero__scene {
  position: absolute;
  inset: 0 0 0 40%;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 80% 10%, var(--color-accent-soft), transparent 60%),
    linear-gradient(90deg, var(--color-surface) 0%, rgba(0, 0, 0, 0) 35%),
    linear-gradient(180deg, var(--color-surface-2) 0%, var(--color-surface) 100%);
}

.hero__ridge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 78%;
}

.hero__ridge-far {
  fill: var(--color-accent-soft);
}

.hero__ridge-mid {
  fill: var(--color-hover);
}

.hero__ridge-near {
  fill: var(--color-border);
}

@media (max-width: 720px) {
  .hero__scene {
    display: none;
  }
}

.hero__body {
  position: relative;
  flex: 1 1 340px;
  min-width: 0;
}

.hero__heading {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hero__accent {
  color: var(--color-accent);
}

.hero__sub {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

.hero__features {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.hero__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.hero__feature .icon {
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.hero__feature strong {
  display: block;
  font-weight: 600;
}

.hero__feature-sub {
  display: block;
  color: var(--color-text-muted);
}

.hero__cta {
  position: relative;
  flex: 0 0 auto;
}

/* --- Feed tabs -------------------------------------------------------- */

.feedtabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: thin;
}

.feedtab {
  position: relative;
  padding: var(--space-3) 2px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  min-height: 24px;
}

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

.feedtab--active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* --- Composer --------------------------------------------------------- */

.composer {
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.composer__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.composer__title {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-btn);
  background: var(--color-surface-2);
  color: var(--color-text);
}

.composer__more {
  margin-top: var(--space-3);
}

/*
  With JS the extra fields stay collapsed until a type chip is picked or the
  title gets focus (site.js toggles [hidden]); without JS they are simply
  always visible - the same form, just taller.
*/
.composer__fields {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .composer__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.composer__field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.composer__field input,
.composer__field textarea {
  width: 100%;
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-btn);
  background: var(--color-surface-2);
  color: var(--color-text);
}

.composer__kinds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  border: none;
}

.composer__post {
  margin-left: auto;
}

.composer__hint {
  margin: var(--space-3) 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.composer__guest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.composer__guest p {
  margin: 0;
  color: var(--color-text-muted);
}

.composer__guest-actions {
  display: flex;
  gap: var(--space-2);
}

/*
  Post-type chips: real radio inputs, visually hidden, with the label's span
  carrying the chip. Focus lands on the input, so the ring is drawn on the
  span through the sibling selector below.
*/
.kindchip {
  display: inline-flex;
}

.kindchip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.kindchip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}

.kindchip span .icon {
  width: 15px;
  height: 15px;
  font-size: 15px;
}

.kindchip input:checked + span {
  color: var(--color-accent-text);
  background: var(--color-accent-solid);
  border-color: var(--color-accent-solid);
}

.kindchip input:focus-visible + span {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

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

.kindchip input:checked + span:hover {
  color: var(--color-accent-text);
}

/* --- Sort control ----------------------------------------------------- */

.feedsort {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

.feedsort__select {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  min-height: 24px;
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  color: var(--color-text);
}

/* With JS the select submits on change, so the fallback button is dropped. */
.js .feedsort__go {
  display: none;
}

/* --- Feed cards ------------------------------------------------------- */

.fcard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fcard {
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.fcard__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.fcard__time {
  color: var(--color-text-muted);
}

.fcard__author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.fcard__verified {
  display: inline-flex;
  color: var(--color-accent);
}

.fcard__verified .icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

.fcard__top-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.fcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* min-height/inline-flex on the small symbol links: they sit in a row of
   text, so SC 2.5.8's inline exception would cover them, but padding them
   out to 24px removes the argument entirely. */
.fcard__symbol {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}

.fcard__symbol:hover {
  text-decoration: underline;
}

.fcard__company {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.fcard__title {
  display: block;
  margin-top: var(--space-1);
  padding: 2px 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  text-decoration: none;
}

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

.fcard__preview {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.fcard__target {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.fcard__target-price {
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fcard__target-move {
  font-size: 0.9375rem;
  font-weight: 600;
}

.fcard__basis {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.fcard__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.fcard__votes {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.fcard__score {
  min-width: 1.5em;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
}

.fcard__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 var(--space-1);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.8125rem;
}

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

.fcard__footer-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 480px) {
  .fcard__action-label {
    display: none;
  }
}

/* --- Chips and pills -------------------------------------------------- */

/*
  color-mix gives each chip its own faint wash from one foreground hex, so a
  chip colour is defined once per theme. Browsers without color-mix fall back
  to a transparent background, which still reads correctly (coloured text on
  the card, 1px border) - so nothing is lost, only softened.
*/
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--chip-fg, var(--color-text-muted));
  background: color-mix(in srgb, var(--chip-fg, var(--color-text-muted)) calc(var(--chip-wash) * 100%), transparent);
  border: var(--border-width) solid color-mix(in srgb, var(--chip-fg, var(--color-text-muted)) 30%, transparent);
}

.chip .icon {
  width: 13px;
  height: 13px;
  font-size: 13px;
}

.chip--discussion { --chip-fg: var(--chip-discussion); }
.chip--prediction { --chip-fg: var(--chip-prediction); }
.chip--dd { --chip-fg: var(--chip-dd); }
.chip--question { --chip-fg: var(--chip-question); }
.chip--catalyst { --chip-fg: var(--chip-catalyst); }
.chip--filings { --chip-fg: var(--chip-filings); }
.chip--statement { --chip-fg: var(--chip-statement); }
.chip--cred { --chip-fg: var(--color-text-muted); }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid currentColor;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.7;
}

.pill--bull {
  color: var(--color-value-up);
}

.pill--bear {
  color: var(--color-value-down);
}

.pill--status {
  color: var(--color-text-muted);
}

.pill--status-hit {
  color: var(--color-value-up);
}

.pill--status-miss {
  color: var(--color-value-down);
}

/* --- Prediction stat grid + progress track ---------------------------- */

.statgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

@media (max-width: 560px) {
  .statgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.statgrid__cell {
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--color-surface-2);
  min-width: 0;
}

.statgrid__cell dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.statgrid__cell dd {
  margin: 2px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  word-break: break-word;
}

.statgrid__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;
  margin-left: 4px;
}

.statgrid__sub {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.ptrack {
  margin-top: var(--space-3);
}

.ptrack__rail {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-hover);
}

.ptrack__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-accent-line);
}

.ptrack__dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  transform: translateY(-50%);
  border-radius: var(--radius-pill);
  background: var(--color-accent-solid);
  border: 2px solid var(--color-surface);
}

.ptrack__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* --- Avatar dots ------------------------------------------------------ */

.avatar-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.avatar-dot--sm {
  width: 20px;
  height: 20px;
  font-size: 0.625rem;
  margin-right: 6px;
  vertical-align: middle;
}

.avatar-dot--lg {
  width: 36px;
  height: 36px;
  font-size: 1rem;
}

/* --- Right column cards ----------------------------------------------- */

.side-card {
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.side-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.side-card__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

.side-card__flag {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.side-card__all {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

.side-card__all:hover {
  text-decoration: underline;
}

.side-card__note {
  margin: var(--space-3) 0 0;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

.minitabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  overflow-x: auto;
  scrollbar-width: thin;
}

.minitab {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

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

.minitab--active {
  color: var(--color-accent-text);
  background: var(--color-accent-solid);
}

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

.radar-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--color-border);
  font-size: 0.75rem;
}

.radar-row:first-child {
  border-top: none;
}

.radar-row__rank {
  width: 1.4em;
  color: var(--color-text-muted);
}

.radar-row__symbol {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  min-width: 4.2em;
}

.radar-row__symbol:hover {
  text-decoration: underline;
}

.radar-row__prices {
  display: flex;
  gap: var(--space-2);
  min-width: 0;
}

.radar-row__price {
  color: var(--color-text);
}

.radar-row__pct--none {
  color: var(--color-text-muted);
}

.radar-row__posts {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--color-text-muted);
  margin-left: auto;
}

.radar-row__posts .icon {
  width: 13px;
  height: 13px;
  font-size: 13px;
}

.radar-row__bull {
  color: var(--color-text-muted);
}

.spark--up {
  color: var(--color-value-up);
}

.spark--down {
  color: var(--color-value-down);
}

.spark--none {
  color: var(--color-text-muted);
  display: inline-block;
  width: 60px;
  text-align: center;
}

/* Filings rows: compact summary, full GMT stamps behind a disclosure. */
.filing-rows,
.res-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.filing-row {
  border-top: var(--border-width) solid var(--color-border);
}

.filing-row:first-child {
  border-top: none;
}

.filing-row__summary {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  cursor: pointer;
  font-size: 0.75rem;
  min-height: 24px;
  list-style: none;
}

.filing-row__summary::-webkit-details-marker {
  display: none;
}

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

.filing-row__icon {
  display: inline-flex;
  color: var(--color-text-muted);
}

.filing-row__symbol {
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

.filing-row__form {
  font-weight: 600;
  white-space: nowrap;
}

.filing-row__date {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.filing-row__title {
  grid-column: 2 / -1;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filing-row__body {
  padding: 0 0 var(--space-3) calc(var(--space-4) + var(--space-2));
  font-size: 0.75rem;
}

.filing-row__stamp,
.filing-row__caveat {
  margin: 0 0 var(--space-1);
  color: var(--color-text-muted);
}

.filing-row__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}

.filing-row__links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
}

.senti {
  justify-self: end;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.senti--pos { color: var(--color-value-up); }
.senti--neu { color: var(--color-text-muted); }
.senti--dil { color: var(--color-value-down); }
.senti--neg { color: var(--color-value-down); }

.res-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--color-border);
  font-size: 0.75rem;
}

.res-row:first-child {
  border-top: none;
}

.res-row__dir {
  display: inline-flex;
  flex-shrink: 0;
}

.res-row__dir--pred {
  color: var(--color-value-up);
}

.res-row__dir--stmt {
  color: var(--color-text-muted);
}

.res-row__symbol {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}

.res-row__label {
  flex: 1;
  min-width: 0;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.res-row__date {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.res-rows__days {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.res-rows__days--near {
  color: var(--color-text);
}

.res-rows__days--soon {
  color: var(--color-value-down);
  font-weight: 600;
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.mini-table th,
.mini-table td {
  text-align: left;
  padding: var(--space-2) var(--space-1);
  border-top: var(--border-width) solid var(--color-border);
}

.mini-table thead th {
  border-top: none;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-weight: 600;
}

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

.mini-table td a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
}

.mini-table td a:hover {
  color: var(--color-accent);
}

/* Empty states with a call to action (a guest's personalized feed tabs). */
.panel-empty--cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.panel-empty--cta p {
  margin: 0;
}

/* --- Lounges index ---------------------------------------------------- */

.lounge-index {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lounge-index__link {
  display: block;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
}

.lounge-index__link:hover {
  border-color: var(--color-accent-line);
}

.lounge-index__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lounge-index__name {
  font-weight: 700;
}

.lounge-index__level {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.lounge-index__desc {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/*
  The tape stays visible at every width from 1024px up as the single price
  strip, so the 1024px shell block's tape-aware .topbar/.sidebar offsets
  apply unchanged here too - no width-specific override needed above 1024px.
*/