/* ============================================================
 * Simutum — instrument-grade community surface
 *
 * Design posture: dark by default, dense, monospace-leaning, single
 * cool-cyan accent. Aim is "operator's tool" — engineer-friendly,
 * not consumer-cute. Borrows the dashboard's instrument vocabulary
 * without copying its look.
 *
 * Authored by Claude Design. See /design_folder/ for briefs.
 * ============================================================ */

:root {
  /* ── Palette ── */
  --s-bg:       #0a0e1a;     /* near-black with a slight blue cast */
  --s-bg-2:    #0f1320;
  --s-panel:    #131826;
  --s-panel-2:  #1a2030;
  --s-border:   #232a3d;
  --s-border-2: #2e3852;

  --s-text-1:   #e8ecf2;
  --s-text-2:   #aeb6c5;
  --s-text-3:   #6b7488;

  --s-accent:    #46d9c5;     /* sea-cyan. Reads as instrument, not consumer. */
  --s-accent-2:  #28a190;
  --s-accent-3:  #155e54;     /* deep variant for hover wells */
  --s-accent-glow: rgba(70,217,197,0.45);

  --s-ok:       #5ee36a;
  --s-warn:     #ecc94b;
  --s-bad:      #f17171;
  --s-info:     #6db8ff;

  /* Per-rank accent (subtle hue progression) */
  --s-r-initiate:  #8a91a6;
  --s-r-operator:  #6db8ff;
  --s-r-engineer:  #46d9c5;
  --s-r-pilot:     #5ee36a;
  --s-r-captain:   #ecc94b;
  --s-r-commander: #f59842;
  --s-r-architect: #c879ff;
  --s-r-founder:   #ff5d8f;

  /* ── Typography ── */
  --s-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --s-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --s-font-serif: "Iowan Old Style", Charter, Georgia, serif;

  /* ── Rhythm ── */
  --s-r-1: 4px;
  --s-r-2: 8px;
  --s-r-3: 12px;
  --s-r-4: 16px;
  --s-r-5: 24px;
  --s-r-6: 32px;
  --s-r-7: 48px;
  --s-r-8: 64px;

  /* ── Radii ── */
  --s-rad-1: 2px;
  --s-rad-2: 3px;
  --s-rad-3: 5px;
  --s-rad-4: 8px;

  --s-shell-max: 1180px;
  --s-content-max: 760px;       /* long-form content + thread width */

  --s-shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.18);
  --s-shadow-2: 0 8px 28px rgba(0,0,0,0.5);
}

/* ── Reset, base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--s-bg);
  color: var(--s-text-1);
  font-family: var(--s-font-sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--s-accent); text-decoration: none; }
a:hover { color: var(--s-text-1); }
hr { border: 0; border-top: 1px solid var(--s-border); margin: var(--s-r-5) 0; }

h1, h2, h3, h4 {
  font-family: var(--s-font-sans);
  font-weight: 600;
  color: var(--s-text-1);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-r-3);
}
h1 { font-size: 32px; line-height: 1.15; }
h2 { font-size: 22px; line-height: 1.2; }
h3 { font-size: 16px; }
h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--s-text-2); }

p { margin: 0 0 var(--s-r-3); color: var(--s-text-2); }
code, pre, .s-mono { font-family: var(--s-font-mono); }
code {
  background: var(--s-panel);
  border: 1px solid var(--s-border);
  border-radius: var(--s-rad-1);
  padding: 1px 5px;
  font-size: 0.9em;
}
pre {
  background: var(--s-bg-2);
  border: 1px solid var(--s-border);
  border-radius: var(--s-rad-3);
  padding: var(--s-r-3);
  overflow-x: auto;
  font-size: 12.5px;
}

/* ============================================================
 * Layout — shell, nav, footer
 * ============================================================ */
.s-shell {
  max-width: var(--s-shell-max);
  margin: 0 auto;
  padding: 0 var(--s-r-4);
}
.s-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.s-page > main { flex: 1; }

/* ── Top nav ── */
.s-nav {
  border-bottom: 1px solid var(--s-border);
  background: rgba(10,14,26,0.92);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(6px);
}
.s-nav__inner {
  max-width: var(--s-shell-max);
  margin: 0 auto;
  padding: var(--s-r-3) var(--s-r-4);
  display: flex;
  align-items: center;
  gap: var(--s-r-4);
}
.s-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--s-font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--s-text-1);
  text-transform: uppercase;
}
.s-nav__brand:hover { color: var(--s-accent); }
.s-nav__brand .cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--s-accent);
  margin-left: 4px;
  vertical-align: -2px;
  box-shadow: 0 0 6px var(--s-accent-glow);
  animation: s-blink 1.1s steps(2, end) infinite;
}
@keyframes s-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.s-nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-r-4);
  margin-left: var(--s-r-5);
}
.s-nav__links a {
  font-family: var(--s-font-mono);
  font-size: 11.5px;
  color: var(--s-text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.s-nav__links a:hover,
.s-nav__links a.is-active { color: var(--s-accent); }

.s-nav__spacer { flex: 1; }

.s-nav__user {
  display: flex;
  align-items: center;
  gap: var(--s-r-3);
}
.s-nav__user .s-rank-badge { transform: translateY(-1px); }

/* ── Footer ── */
.s-foot {
  border-top: 1px solid var(--s-border);
  margin-top: var(--s-r-7);
  padding: var(--s-r-5) 0;
  font-family: var(--s-font-mono);
  font-size: 11px;
  color: var(--s-text-3);
}
.s-foot__inner {
  max-width: var(--s-shell-max);
  margin: 0 auto;
  padding: 0 var(--s-r-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-r-3);
}
.s-foot a { color: var(--s-text-3); }
.s-foot a:hover { color: var(--s-text-1); }
.s-foot__poweredby {
  letter-spacing: 0.06em;
}
.s-foot__poweredby strong {
  color: var(--s-text-2);
  font-weight: 500;
}

/* ============================================================
 * Buttons, inputs, controls
 * ============================================================ */
.s-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--s-font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 9px 18px;
  border: 1px solid var(--s-accent);
  border-radius: var(--s-rad-2);
  background: var(--s-accent);
  color: var(--s-bg);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
  text-decoration: none;
  white-space: nowrap;
}
.s-btn:hover {
  background: var(--s-text-1);
  border-color: var(--s-text-1);
  color: var(--s-bg);
}
.s-btn:active { transform: translateY(1px); }
.s-btn[disabled], .s-btn.is-disabled {
  background: var(--s-panel);
  color: var(--s-text-3);
  border-color: var(--s-border);
  cursor: not-allowed;
}

.s-btn--ghost {
  background: transparent;
  color: var(--s-accent);
  border-color: var(--s-border-2);
}
.s-btn--ghost:hover {
  background: var(--s-panel-2);
  color: var(--s-text-1);
  border-color: var(--s-accent);
}

.s-btn--quiet {
  background: transparent;
  color: var(--s-text-2);
  border-color: var(--s-border);
  font-weight: 500;
}
.s-btn--quiet:hover {
  color: var(--s-text-1);
  border-color: var(--s-border-2);
  background: var(--s-panel-2);
}

.s-btn--danger {
  background: transparent;
  color: var(--s-bad);
  border-color: var(--s-bad);
}
.s-btn--danger:hover {
  background: var(--s-bad);
  color: var(--s-bg);
}

.s-btn--sm { padding: 5px 11px; font-size: 10.5px; }
.s-btn--lg { padding: 12px 22px; font-size: 13px; }

.s-input, .s-textarea, .s-select {
  display: block;
  width: 100%;
  background: var(--s-bg-2);
  color: var(--s-text-1);
  font-family: var(--s-font-mono);
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid var(--s-border-2);
  border-radius: var(--s-rad-2);
  transition: border-color 0.12s, background 0.12s;
}
.s-input:focus, .s-textarea:focus, .s-select:focus {
  outline: none;
  border-color: var(--s-accent);
  background: var(--s-bg);
  box-shadow: 0 0 0 3px rgba(70,217,197,0.12);
}
.s-textarea {
  font-family: var(--s-font-mono);
  min-height: 220px;
  resize: vertical;
  line-height: 1.55;
}
.s-input::placeholder, .s-textarea::placeholder { color: var(--s-text-3); }

.s-field { margin-bottom: var(--s-r-3); }
.s-field label,
.s-label {
  display: block;
  font-family: var(--s-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--s-text-3);
  margin-bottom: 6px;
  font-weight: 600;
}

.s-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--s-text-2);
  cursor: pointer;
}

/* ============================================================
 * Card, row, list patterns
 * ============================================================ */
.s-card {
  background: var(--s-panel);
  border: 1px solid var(--s-border);
  border-radius: var(--s-rad-3);
  overflow: hidden;
}
.s-card__head {
  padding: var(--s-r-3) var(--s-r-4);
  border-bottom: 1px solid var(--s-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-r-3);
  background: var(--s-panel-2);
}
.s-card__title {
  font-family: var(--s-font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: var(--s-accent);
}
.s-card__meta {
  font-family: var(--s-font-mono);
  font-size: 10.5px;
  color: var(--s-text-3);
}
.s-card__body { padding: var(--s-r-4); }

.s-row {
  display: flex;
  align-items: center;
  gap: var(--s-r-3);
  padding: var(--s-r-3) var(--s-r-4);
  border-bottom: 1px solid var(--s-border);
  transition: background 0.1s;
}
.s-row:last-child { border-bottom: 0; }
.s-row:hover { background: var(--s-panel-2); }
.s-row__main { flex: 1; min-width: 0; }
.s-row__meta {
  font-family: var(--s-font-mono);
  font-size: 11px;
  color: var(--s-text-3);
  flex-shrink: 0;
}

/* ============================================================
 * Rank badge
 *
 * Usage: <span class="s-rank-badge" data-rank="pilot">PILOT</span>
 * Sizes: add .s-rank-badge--sm / --lg
 * ============================================================ */
.s-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--s-font-mono);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 2px 6px 2px 5px;
  border-radius: var(--s-rad-1);
  border: 1px solid currentColor;
  color: var(--s-r-initiate);
  background: transparent;
  white-space: nowrap;
  line-height: 1.4;
}
.s-rank-badge::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 5px currentColor;
}
.s-rank-badge[data-rank="initiate"]  { color: var(--s-r-initiate); }
.s-rank-badge[data-rank="operator"]  { color: var(--s-r-operator); }
.s-rank-badge[data-rank="engineer"]  { color: var(--s-r-engineer); }
.s-rank-badge[data-rank="pilot"]     { color: var(--s-r-pilot); }
.s-rank-badge[data-rank="captain"]   { color: var(--s-r-captain); }
.s-rank-badge[data-rank="commander"] { color: var(--s-r-commander); }
.s-rank-badge[data-rank="architect"] { color: var(--s-r-architect); }
.s-rank-badge[data-rank="founder"]   { color: var(--s-r-founder); }

.s-rank-badge--sm { font-size: 8px; padding: 1px 5px; }
.s-rank-badge--sm::before { width: 4px; height: 4px; }
.s-rank-badge--lg {
  font-size: 11px;
  padding: 5px 10px;
  letter-spacing: 0.14em;
}
.s-rank-badge--lg::before { width: 7px; height: 7px; }

/* ============================================================
 * Tag chips, stats
 * ============================================================ */
.s-tag {
  display: inline-block;
  font-family: var(--s-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--s-text-3);
  background: var(--s-bg-2);
  border: 1px solid var(--s-border);
  border-radius: var(--s-rad-1);
  padding: 2px 6px;
  white-space: nowrap;
}
.s-tag--accent { color: var(--s-accent); border-color: var(--s-accent-3); }
.s-tag--warn   { color: var(--s-warn);   border-color: var(--s-warn); opacity: 0.75; }
.s-tag--info   { color: var(--s-info);   border-color: var(--s-info); opacity: 0.85; }

.s-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--s-font-mono);
}
.s-stat__n {
  font-size: 22px;
  font-weight: 700;
  color: var(--s-text-1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.s-stat__l {
  font-size: 9.5px;
  color: var(--s-text-3);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.s-stat--lg .s-stat__n { font-size: 40px; }

/* ============================================================
 * Landing
 * ============================================================ */
.s-landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(70,217,197,0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 110%, rgba(70,217,197,0.04), transparent 60%),
    var(--s-bg);
  position: relative;
  overflow: hidden;
}
.s-landing::before {
  /* faint grid texture — sells "instrument plane" */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(70,217,197,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,217,197,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 70%);
  pointer-events: none;
}
.s-landing__nav,
.s-landing__main,
.s-landing__foot { position: relative; }

.s-landing__main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--s-r-5) var(--s-r-4);
}
.s-landing__inner {
  max-width: 940px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-r-5);
  align-items: center;
}
.s-landing__eyebrow {
  font-family: var(--s-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.30em;
  color: var(--s-accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.s-landing__eyebrow::before,
.s-landing__eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--s-accent);
  opacity: 0.5;
}
.s-landing__headline {
  font-family: var(--s-font-sans);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--s-text-1);
  max-width: 16ch;
}
.s-landing__headline em {
  font-style: normal;
  color: var(--s-accent);
  position: relative;
}
.s-landing__sub {
  font-family: var(--s-font-sans);
  font-size: 17px;
  color: var(--s-text-2);
  max-width: 56ch;
  line-height: 1.5;
}
.s-landing__cta {
  display: flex;
  align-items: center;
  gap: var(--s-r-3);
  flex-wrap: wrap;
  justify-content: center;
}
.s-landing__signup {
  display: flex;
  gap: 8px;
  align-items: stretch;
  background: var(--s-panel);
  border: 1px solid var(--s-border-2);
  border-radius: var(--s-rad-3);
  padding: 6px;
  width: min(440px, 90vw);
  transition: border-color 0.15s;
}
.s-landing__signup:focus-within { border-color: var(--s-accent); }
.s-landing__signup input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--s-text-1);
  font-family: var(--s-font-mono);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
}
.s-landing__signup input::placeholder { color: var(--s-text-3); }
.s-landing__signup button {
  font-family: var(--s-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--s-accent);
  color: var(--s-bg);
  border: 0;
  padding: 0 14px;
  border-radius: var(--s-rad-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.s-landing__signup button:hover { background: var(--s-text-1); }
.s-landing__signup-note {
  font-family: var(--s-font-mono);
  font-size: 10.5px;
  color: var(--s-text-3);
}

.s-landing__pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-r-3);
  margin-top: var(--s-r-6);
  width: 100%;
  max-width: 860px;
}
.s-landing__pillar {
  text-align: left;
  padding: var(--s-r-4);
  border: 1px solid var(--s-border);
  border-radius: var(--s-rad-3);
  background: var(--s-panel);
}
.s-landing__pillar h3 {
  font-family: var(--s-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--s-accent);
  margin: 0 0 6px;
}
.s-landing__pillar p {
  margin: 0;
  color: var(--s-text-2);
  font-size: 13px;
  line-height: 1.5;
}

/* ============================================================
 * Forum index
 * ============================================================ */
.s-forum-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-r-3);
  margin: var(--s-r-5) 0 var(--s-r-3);
  flex-wrap: wrap;
}
.s-forum-sort {
  display: inline-flex;
  border: 1px solid var(--s-border);
  border-radius: var(--s-rad-2);
  overflow: hidden;
}
.s-forum-sort a {
  font-family: var(--s-font-mono);
  font-size: 11px;
  padding: 6px 12px;
  color: var(--s-text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-right: 1px solid var(--s-border);
}
.s-forum-sort a:last-child { border-right: 0; }
.s-forum-sort a.is-active {
  background: var(--s-panel-2);
  color: var(--s-accent);
}
.s-forum-sort a:hover { background: var(--s-panel); color: var(--s-text-1); }

.s-thread-row {
  display: grid;
  grid-template-columns: 56px 1fr 110px 110px;
  gap: var(--s-r-3);
  align-items: center;
  padding: var(--s-r-3) var(--s-r-4);
  border-bottom: 1px solid var(--s-border);
  transition: background 0.1s;
  cursor: pointer;
}
.s-thread-row:hover { background: var(--s-panel-2); }
.s-thread-row__votes {
  text-align: center;
  font-family: var(--s-font-mono);
}
.s-thread-row__votes .n {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--s-text-1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.s-thread-row__votes .l {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--s-text-3);
  margin-top: 2px;
}
.s-thread-row__title {
  font-family: var(--s-font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--s-text-1);
  margin: 0 0 4px;
  line-height: 1.3;
}
.s-thread-row__title a { color: inherit; }
.s-thread-row__meta {
  font-family: var(--s-font-mono);
  font-size: 11px;
  color: var(--s-text-3);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.s-thread-row__meta .a { color: var(--s-text-2); }
.s-thread-row__meta .sep { opacity: 0.5; }
.s-thread-row__cat,
.s-thread-row__replies {
  font-family: var(--s-font-mono);
  text-align: right;
}
.s-thread-row__cat {
  text-align: left;
  color: var(--s-text-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.s-thread-row__replies {
  color: var(--s-text-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.s-thread-row__replies .l {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--s-text-3);
  margin-top: 1px;
}

.s-thread-row.is-pinned { border-left: 2px solid var(--s-accent); padding-left: calc(var(--s-r-4) - 2px); }
.s-thread-row.is-unanswered .s-thread-row__replies { color: var(--s-warn); }

@media (max-width: 720px) {
  .s-thread-row {
    grid-template-columns: 48px 1fr;
  }
  .s-thread-row__cat, .s-thread-row__replies { display: none; }
}

/* ── Categories sidebar ── */
.s-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.s-cat-list li a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: var(--s-rad-1);
  font-family: var(--s-font-mono);
  font-size: 11.5px;
  color: var(--s-text-2);
}
.s-cat-list li a:hover { background: var(--s-panel-2); color: var(--s-accent); }
.s-cat-list li a .n {
  color: var(--s-text-3);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

/* Two-column forum layout */
.s-2col {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--s-r-5);
  margin-top: var(--s-r-4);
}
@media (max-width: 880px) {
  .s-2col { grid-template-columns: 1fr; }
}

/* ============================================================
 * Thread view (post + replies)
 * ============================================================ */
.s-thread-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-r-3);
  margin: var(--s-r-5) 0 var(--s-r-3);
  flex-wrap: wrap;
}
.s-thread-head__title {
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1;
  min-width: 0;
}
.s-thread-head__meta {
  font-family: var(--s-font-mono);
  font-size: 11px;
  color: var(--s-text-3);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.s-thread-head__meta a { color: var(--s-text-2); }

.s-post {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--s-r-4);
  padding: var(--s-r-4) 0;
  border-bottom: 1px solid var(--s-border);
}
.s-post:last-of-type { border-bottom: 0; }
.s-post.is-op { background: var(--s-bg-2); padding: var(--s-r-4); margin: var(--s-r-3) calc(0px - var(--s-r-4)) 0; border-left: 2px solid var(--s-accent); border-bottom: 0; border-radius: var(--s-rad-3); }
.s-post__author {
  text-align: center;
  font-family: var(--s-font-mono);
}
.s-post__author .av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--s-panel-2);
  border: 1px solid var(--s-border-2);
  color: var(--s-accent);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
}
.s-post__author .name {
  display: block;
  font-size: 12px;
  color: var(--s-text-1);
  font-weight: 600;
  margin-bottom: 3px;
}
.s-post__author .tests {
  display: block;
  font-size: 9.5px;
  color: var(--s-text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
}
.s-post__body {
  font-family: var(--s-font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--s-text-1);
}
.s-post__body p { color: var(--s-text-1); }
.s-post__body code, .s-post__body pre { background: var(--s-panel); }
.s-post__meta {
  margin-top: var(--s-r-3);
  display: flex;
  align-items: center;
  gap: var(--s-r-3);
  font-family: var(--s-font-mono);
  font-size: 11px;
  color: var(--s-text-3);
}
.s-post__meta .actions { margin-left: auto; display: flex; gap: 6px; }
.s-post__action {
  background: transparent;
  border: 0;
  color: var(--s-text-3);
  cursor: pointer;
  font-family: var(--s-font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--s-rad-1);
}
.s-post__action:hover { color: var(--s-accent); background: var(--s-panel-2); }

.s-thread-reply-form {
  margin-top: var(--s-r-5);
  padding-top: var(--s-r-4);
  border-top: 1px dashed var(--s-border-2);
}

/* ============================================================
 * Compose
 * ============================================================ */
.s-compose {
  max-width: var(--s-content-max);
  margin: var(--s-r-6) auto var(--s-r-7);
  padding: 0 var(--s-r-4);
}
.s-compose h1 { font-family: var(--s-font-mono); font-size: 18px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--s-accent); }

.s-compose .s-input--title {
  font-family: var(--s-font-sans);
  font-size: 22px;
  padding: 14px 14px;
  font-weight: 600;
}
.s-compose-footer {
  display: flex;
  align-items: center;
  gap: var(--s-r-3);
  margin-top: var(--s-r-4);
}
.s-compose-footer .s-select { max-width: 260px; }
.s-compose-footer .spacer { flex: 1; }

/* ============================================================
 * Profile
 * ============================================================ */
.s-profile {
  margin: var(--s-r-5) 0 var(--s-r-7);
}
.s-profile__head {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: var(--s-r-4);
  align-items: center;
  padding: var(--s-r-4);
  background: var(--s-panel);
  border: 1px solid var(--s-border);
  border-radius: var(--s-rad-3);
}
.s-profile__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--s-panel-2);
  border: 1px solid var(--s-border-2);
  display: grid;
  place-items: center;
  font-family: var(--s-font-mono);
  font-size: 32px;
  font-weight: 800;
  color: var(--s-accent);
}
.s-profile__name {
  font-family: var(--s-font-mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--s-text-1);
  margin: 0 0 6px;
}
.s-profile__handle {
  font-family: var(--s-font-mono);
  font-size: 12px;
  color: var(--s-text-3);
  margin-right: 8px;
}
.s-profile__bio {
  margin: 8px 0 0;
  color: var(--s-text-2);
  font-size: 13.5px;
  max-width: 60ch;
}
.s-profile__stats {
  display: flex;
  gap: var(--s-r-5);
  align-items: flex-end;
}
.s-profile__section {
  margin-top: var(--s-r-5);
}
.s-profile__section h4 { margin-bottom: var(--s-r-3); }

/* ============================================================
 * Ranks (leaderboard)
 * ============================================================ */
.s-rank-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-r-3);
  margin: var(--s-r-4) 0 var(--s-r-6);
}
.s-rank-ladder__rank {
  padding: var(--s-r-3);
  border: 1px solid var(--s-border);
  border-radius: var(--s-rad-3);
  background: var(--s-panel);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.s-rank-ladder__rank .threshold {
  font-family: var(--s-font-mono);
  font-size: 10.5px;
  color: var(--s-text-3);
}
.s-rank-ladder__rank .desc {
  font-size: 12.5px;
  color: var(--s-text-2);
  margin: 0;
}

.s-leaderboard {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--s-font-mono);
  font-size: 12.5px;
}
.s-leaderboard th, .s-leaderboard td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--s-border);
}
.s-leaderboard th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--s-text-3);
  font-weight: 700;
  background: var(--s-panel-2);
}
.s-leaderboard tr:hover td { background: var(--s-panel); }
.s-leaderboard td.rank-n {
  width: 56px;
  font-weight: 700;
  font-size: 14px;
  color: var(--s-text-1);
  font-variant-numeric: tabular-nums;
}
.s-leaderboard td.score {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--s-text-1);
  font-weight: 600;
}
.s-leaderboard tr.is-self {
  background: rgba(70,217,197,0.07);
}
.s-leaderboard tr.is-self td.rank-n { color: var(--s-accent); }

.s-leaderboard__self {
  display: flex;
  align-items: center;
  gap: var(--s-r-4);
  margin: var(--s-r-3) 0 var(--s-r-4);
  padding: var(--s-r-3) var(--s-r-4);
  background: var(--s-panel-2);
  border: 1px dashed var(--s-accent);
  border-radius: var(--s-rad-3);
}
.s-leaderboard__self .label {
  font-family: var(--s-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--s-accent);
}

/* ============================================================
 * Mods
 * ============================================================ */
.s-mods-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--s-r-4);
  margin-top: var(--s-r-4);
}
@media (max-width: 880px) { .s-mods-grid { grid-template-columns: 1fr; } }

.s-mods-queue-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: var(--s-r-3);
  padding: var(--s-r-3);
  border-bottom: 1px solid var(--s-border);
  align-items: center;
}
.s-mods-queue-row__reason {
  font-family: var(--s-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: var(--s-rad-1);
  background: rgba(241,113,113,0.15);
  color: var(--s-bad);
  display: inline-block;
  text-align: center;
}
.s-mods-queue-row__reason.spam   { background: rgba(236,201,75,0.18); color: var(--s-warn); }
.s-mods-queue-row__reason.off    { background: rgba(109,184,255,0.18); color: var(--s-info); }
.s-mods-actions { display: flex; gap: 4px; }

/* ============================================================
 * Auth surfaces
 * ============================================================ */
.s-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-r-5) var(--s-r-4);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(70,217,197,0.08), transparent 60%),
    var(--s-bg);
}
.s-auth__card {
  width: min(440px, 100%);
  background: var(--s-panel);
  border: 1px solid var(--s-border);
  border-radius: var(--s-rad-3);
  padding: var(--s-r-5);
  box-shadow: var(--s-shadow-2);
}
.s-auth__brand {
  text-align: center;
  margin-bottom: var(--s-r-4);
}
.s-auth__title {
  font-family: var(--s-font-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--s-accent);
  text-align: center;
  margin: 0 0 var(--s-r-4);
}
.s-auth__sub {
  font-size: 13px;
  color: var(--s-text-2);
  text-align: center;
  margin-bottom: var(--s-r-4);
}
.s-auth__alt {
  margin-top: var(--s-r-4);
  padding-top: var(--s-r-4);
  border-top: 1px solid var(--s-border);
  text-align: center;
  font-family: var(--s-font-mono);
  font-size: 11.5px;
  color: var(--s-text-3);
}
.s-auth__sent {
  margin-top: var(--s-r-3);
  padding: var(--s-r-3);
  background: var(--s-bg-2);
  border: 1px solid var(--s-accent-3);
  border-radius: var(--s-rad-2);
  font-family: var(--s-font-mono);
  font-size: 12px;
  color: var(--s-accent);
}

/* ============================================================
 * Challenges
 * ============================================================ */
.s-challenge {
  padding: var(--s-r-4);
  border: 1px solid var(--s-border);
  border-radius: var(--s-rad-3);
  background: var(--s-panel);
  margin-bottom: var(--s-r-3);
}
.s-challenge.is-active { border-color: var(--s-accent); box-shadow: 0 0 0 1px var(--s-accent-3); }
.s-challenge__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-r-3);
  margin-bottom: var(--s-r-3);
  flex-wrap: wrap;
}
.s-challenge__title { margin: 0; font-size: 18px; }
.s-challenge__when {
  font-family: var(--s-font-mono);
  font-size: 11px;
  color: var(--s-text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.s-challenge__progress {
  display: flex;
  align-items: center;
  gap: var(--s-r-3);
  margin-top: var(--s-r-3);
}
.s-progress {
  flex: 1;
  height: 6px;
  background: var(--s-bg-2);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--s-border);
}
.s-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--s-accent-2), var(--s-accent));
  transition: width 0.4s;
}

/* ============================================================
 * About / install
 * ============================================================ */
.s-prose {
  max-width: var(--s-content-max);
  margin: var(--s-r-6) auto;
  padding: 0 var(--s-r-4);
  font-family: var(--s-font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--s-text-2);
}
.s-prose h1 { margin-bottom: var(--s-r-4); }
.s-prose h2 { margin-top: var(--s-r-5); }
.s-prose p { color: var(--s-text-2); }
.s-prose ul { padding-left: 1.4em; }
.s-prose li { margin: 6px 0; color: var(--s-text-2); }
.s-prose code { font-size: 13px; }

/* ============================================================
 * Utility classes
 * ============================================================ */
.s-muted { color: var(--s-text-3); }
.s-mono  { font-family: var(--s-font-mono); }
.s-row-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s-r-3); }
.s-stack-sm { display: flex; flex-direction: column; gap: var(--s-r-2); }
.s-stack-md { display: flex; flex-direction: column; gap: var(--s-r-3); }
.s-stack-lg { display: flex; flex-direction: column; gap: var(--s-r-5); }
.s-hidden { display: none !important; }

/* ============================================================
 * Rendered markdown (forum posts, replies, preview pane)
 * ============================================================ */
.s-md-rendered {
  font-family: var(--s-font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--s-text-1);
}
.s-md-rendered > *:first-child { margin-top: 0; }
.s-md-rendered > *:last-child  { margin-bottom: 0; }
.s-md-rendered p {
  color: var(--s-text-1);
  margin: 0 0 var(--s-r-3);
}
.s-md-rendered h1, .s-md-rendered h2, .s-md-rendered h3, .s-md-rendered h4 {
  font-family: var(--s-font-sans);
  font-weight: 600;
  color: var(--s-text-1);
  margin: var(--s-r-4) 0 var(--s-r-2);
  line-height: 1.25;
}
.s-md-rendered h1 { font-size: 22px; }
.s-md-rendered h2 { font-size: 18px; }
.s-md-rendered h3 { font-size: 15px; }
.s-md-rendered h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--s-text-2);
}
.s-md-rendered strong { color: var(--s-text-1); font-weight: 600; }
.s-md-rendered em { color: var(--s-text-2); font-style: italic; }
.s-md-rendered del { color: var(--s-text-3); text-decoration: line-through; }
.s-md-rendered a {
  color: var(--s-accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--s-accent-3);
}
.s-md-rendered a:hover { color: var(--s-text-1); border-bottom-color: var(--s-text-1); }
.s-md-rendered ul, .s-md-rendered ol {
  padding-left: 1.4em;
  margin: 0 0 var(--s-r-3);
}
.s-md-rendered li {
  color: var(--s-text-1);
  margin: 4px 0;
}
.s-md-rendered li > p { margin: 0 0 6px; }
.s-md-rendered code {
  font-family: var(--s-font-mono);
  font-size: 0.9em;
  background: var(--s-bg-2);
  border: 1px solid var(--s-border);
  border-radius: var(--s-rad-1);
  padding: 1px 5px;
}
.s-md-rendered pre {
  font-family: var(--s-font-mono);
  background: var(--s-bg-2);
  border: 1px solid var(--s-border);
  border-left: 2px solid var(--s-accent-3);
  border-radius: var(--s-rad-3);
  padding: var(--s-r-3);
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0 0 var(--s-r-3);
}
.s-md-rendered pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
}
.s-md-rendered blockquote {
  margin: 0 0 var(--s-r-3);
  padding: 6px 14px;
  border-left: 2px solid var(--s-border-2);
  color: var(--s-text-2);
  font-style: italic;
}
.s-md-rendered table {
  border-collapse: collapse;
  margin: 0 0 var(--s-r-3);
  font-family: var(--s-font-mono);
  font-size: 12.5px;
}
.s-md-rendered th, .s-md-rendered td {
  border: 1px solid var(--s-border);
  padding: 6px 10px;
  text-align: left;
}
.s-md-rendered th {
  background: var(--s-panel-2);
  color: var(--s-text-2);
  font-weight: 600;
}
.s-md-rendered hr {
  border: 0;
  border-top: 1px dashed var(--s-border-2);
  margin: var(--s-r-3) 0;
}

/* Forum/reply post bodies inherit the markdown look */
.s-post__body { font-family: var(--s-font-sans); font-size: 14.5px; line-height: 1.6; color: var(--s-text-1); }
.s-post__body > *:first-child { margin-top: 0; }
.s-post__body > *:last-child  { margin-bottom: 0; }
.s-post__body p,
.s-post__body li,
.s-post__body strong,
.s-post__body em { color: var(--s-text-1); }
.s-post__body a { color: var(--s-accent); border-bottom: 1px dotted var(--s-accent-3); }
.s-post__body a:hover { color: var(--s-text-1); }
.s-post__body code { background: var(--s-bg-2); border: 1px solid var(--s-border); }
.s-post__body pre {
  background: var(--s-bg-2);
  border: 1px solid var(--s-border);
  border-left: 2px solid var(--s-accent-3);
  border-radius: var(--s-rad-3);
  padding: var(--s-r-3);
  overflow-x: auto;
  font-size: 12.5px;
}
.s-post__body pre code { background: transparent; border: 0; padding: 0; }
.s-post__body blockquote {
  margin: 0 0 var(--s-r-3);
  padding: 6px 14px;
  border-left: 2px solid var(--s-border-2);
  color: var(--s-text-2);
  font-style: italic;
}
.s-post__body ul, .s-post__body ol { padding-left: 1.4em; margin: 0 0 var(--s-r-3); }

/* ── Preview pane (composer + reply form) ── */
.s-preview {
  margin-top: var(--s-r-3);
  border: 1px solid var(--s-border);
  border-radius: var(--s-rad-3);
  background: var(--s-bg-2);
  overflow: hidden;
}
.s-preview__head {
  padding: 6px 12px;
  background: var(--s-panel-2);
  border-bottom: 1px solid var(--s-border);
  font-family: var(--s-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--s-text-3);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.s-preview__body {
  padding: var(--s-r-3) var(--s-r-4);
  min-height: 80px;
}
.s-preview__body:empty::before {
  content: "Nothing yet. Type into the textarea above, then click Preview.";
  color: var(--s-text-3);
  font-family: var(--s-font-mono);
  font-size: 11.5px;
  font-style: italic;
}
.s-preview[hidden] { display: none; }

/* ── Inline nav search ── */
.s-nav__search {
  flex: 0 1 240px;
  margin-left: auto;
  margin-right: var(--s-r-3);
  display: flex;
  align-items: center;
  background: var(--s-bg-2);
  border: 1px solid var(--s-border);
  border-radius: var(--s-rad-2);
  padding: 0 8px;
  transition: border-color 0.12s;
}
.s-nav__search:focus-within { border-color: var(--s-accent); }
.s-nav__search input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--s-text-1);
  font-family: var(--s-font-mono);
  font-size: 12px;
  padding: 6px 4px;
  outline: none;
}
.s-nav__search input::placeholder { color: var(--s-text-3); }
.s-nav__search .glyph {
  color: var(--s-text-3);
  font-size: 12px;
  padding-right: 4px;
}
@media (max-width: 880px) {
  .s-nav__search { display: none; }
}

/* ── Toast (success messages, like share-link copy) ── */
.s-toast {
  position: fixed;
  top: 60px;
  right: 20px;
  background: var(--s-panel-2);
  color: var(--s-text-1);
  border: 1px solid var(--s-accent);
  border-radius: var(--s-rad-3);
  padding: 10px 16px;
  font-family: var(--s-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  box-shadow: var(--s-shadow-2);
  z-index: 2000;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
}
.s-toast.show { opacity: 1; transform: translateY(0); }
.s-toast.err  { border-color: var(--s-bad); color: var(--s-bad); }

/* ============================================================
   Avatar — deterministic gradient + monogram
   Inline `style` attribute supplies the per-handle gradient.
   These rules just set the structural / typographic baseline.
   ============================================================ */
.av--gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* gradient + box-shadow set inline by the avatar_style filter */
}
.av--gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.18) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.av__monogram {
  position: relative;
  z-index: 1;
  font-family: var(--s-font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  font-size: 13px;
  text-transform: uppercase;
}
.av--sm { width: 24px; height: 24px; }
.av--sm .av__monogram { font-size: 10px; }
.av--md { width: 36px; height: 36px; }
.av--lg { width: 64px; height: 64px; }
.av--lg .av__monogram { font-size: 22px; }
.av--xl { width: 96px; height: 96px; }
.av--xl .av__monogram { font-size: 32px; }

/* Photo avatar — img fills the circle. Same dimensions as av--gradient. */
.av--photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
.av--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Override the legacy flat avatar in s-post__author when gradient is present. */
.s-post__author .av.av--gradient,
.s-post__author .av.av--photo {
  width: 44px;
  height: 44px;
  background: unset;
  border: none;
  color: inherit;
  font-weight: 700;
  font-size: 16px;
}
.s-post__author .av.av--gradient .av__monogram { font-size: 15px; }

/* Profile-page big avatar — uses the gradient style attribute too. */
.s-profile__avatar.av--gradient {
  width: 80px;
  height: 80px;
}
.s-profile__avatar.av--gradient .av__monogram { font-size: 28px; }