/* T3rMy's Forum
   ---------------------------------------------------------------------------
   Styled to match the t3rmy.com landing hub: same tokens, same hairlines, same
   16px radius, same mono uppercase labels, same body wash. The hub is four big
   cards; a board is dense. What carries over is the hub's RESTRAINT, not its
   sparsity -- rows stay rows and tables stay tables; the palette does the talking.

   FONT DISCIPLINE: every font-weight below is a cut that exists in fonts.css.
   Asking for a weight that is not on disk makes the browser synthesise it and
   the metrics drift. Available cuts:
     Space Grotesk 500,700 | Inter 400,500,600 (NO 700) | JetBrains Mono 400,500
     Rajdhani 600,700 | Share Tech Mono 400 | Exo 2 400,600
     Cinzel 700 | Marcellus 400 | Black Ops One 400 | Saira 400,600
   `strong`/`b` therefore resolve to 600 (Inter's top cut), never bold/700, and
   counters are pinned to the mono face so no theme can ask a 400-only game font
   for a bold it does not have.
   --------------------------------------------------------------------------- */

:root{
  --bg:#0a0b0e;--surface:#13151b;--surface-2:#171a22;--line:#23262f;
  --text:#e9ebf1;--muted:#828a9c;--accent:#ff3a2f;
  --arc:#e8a33d;--apex:#da292a;--valheim:#e98e4a;--warzone:#f96800;
  --ok:#4ea760;--warn:#e3b341;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:16px;
  --radius-sm:10px;
  --wrap:1080px;

  /* Per-category theme. These are the defaults -- Community, and any category
     name the templates do not recognise, keeps them and renders clean. */
  --game:var(--accent);
  --gdisp:var(--disp);
  --gdisp-w:700;
  --gdisp-ls:.4px;
  --gdisp-tt:uppercase;
  --gbody:var(--body);
}

/* Game themes: colour + display face + body face, exactly the pairings the hub
   uses on its four cards. Set on a category section (index) or on the page
   wrapper (forum/thread, derived from crumbs[0] = the category). Inherited, so
   the Call of Duty container -> subforum nesting keeps its theme. */
.t-arc{
  --game:var(--arc);
  --gdisp:'Rajdhani',system-ui,sans-serif;--gdisp-w:700;--gdisp-ls:1.2px;
  --gbody:'Share Tech Mono',ui-monospace,monospace;
}
.t-apex{
  --game:var(--apex);
  --gdisp:'Rajdhani',system-ui,sans-serif;--gdisp-w:700;--gdisp-ls:1.2px;
  --gbody:'Exo 2',system-ui,sans-serif;
}
.t-valheim{
  --game:var(--valheim);
  --gdisp:'Cinzel',Georgia,serif;--gdisp-w:700;--gdisp-ls:1px;--gdisp-tt:none;
  --gbody:'Marcellus',Georgia,serif;
}
.t-warzone{
  --game:var(--warzone);
  --gdisp:'Black Ops One',system-ui,sans-serif;--gdisp-w:400;--gdisp-ls:.5px;
  --gbody:'Saira',system-ui,sans-serif;
}

/* ----------------------------------------------------------------- base ---- */

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

html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-weight:400;
  font-size:14.5px;
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;                       /* the page never scrolls sideways */
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 70% at 50% -10%,rgba(255,58,47,0.06),transparent 60%);
  background-attachment:fixed;
}

a{color:var(--text);text-decoration:none}
a:hover{color:var(--accent)}
strong,b{font-weight:600}                  /* Inter tops out at 600 -- see header */
img{max-width:100%;height:auto}

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

.text-dim{color:var(--muted)}
.mono{font-family:var(--mono);font-weight:400;font-size:12px}

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

.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(10,11,14,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
  min-height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}

/* Wordmark: the hub's, verbatim -- T3rMy's with the 3 in lab red, then a mono
   uppercase label, the same pairing the hub uses for T3rMy's + GAME DATABASES. */
.logo{display:inline-flex;align-items:center;gap:11px;min-width:0}
.logo:hover{color:var(--text)}
.brand{
  font-family:var(--disp);font-weight:700;font-size:22px;
  letter-spacing:-.5px;line-height:1;color:var(--text);
  display:inline-flex;align-items:center;
}
.brand .three{color:var(--accent)}
.logo-label{
  font-family:var(--mono);font-weight:500;font-size:10.5px;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);
  line-height:1;
  padding-left:11px;border-left:1px solid var(--line);
  transition:color .18s ease;
}
.logo:hover .logo-label{color:var(--text)}

.primary-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.primary-nav a{
  font-family:var(--mono);font-weight:400;font-size:11.5px;
  letter-spacing:1px;text-transform:uppercase;color:var(--muted);
  padding:7px 10px;border-radius:8px;border:1px solid transparent;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.primary-nav a:hover{color:var(--text);border-color:var(--line);background:var(--surface)}

/* ----------------------------------------------------------------- main ---- */

.site-main{
  max-width:var(--wrap);
  margin:0 auto;
  padding:30px 24px 56px;
  display:flex;flex-direction:column;gap:22px;
}

h1{
  font-family:var(--gdisp);font-weight:var(--gdisp-w);letter-spacing:var(--gdisp-ls);
  font-size:27px;line-height:1.25;
}
h2{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.2px}
h3{
  font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);
}

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

.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  display:flex;flex-direction:column;gap:12px;
  min-width:0;
}

.notice{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:2px solid var(--game);
  border-radius:var(--radius-sm);
  padding:13px 16px;
  color:var(--muted);
  font-size:13px;line-height:1.6;
}
.notice a{color:var(--accent)}
.notice a:hover{text-decoration:underline}
.notice-pending{border-left-color:var(--warn)}

/* ----------------------------------------------------------- breadcrumbs ---- */

.crumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--mono);font-weight:400;font-size:11px;
  letter-spacing:1px;text-transform:uppercase;color:var(--muted);
}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--game)}
.crumb-sep{color:var(--line)}
.crumb-text{color:var(--text)}

/* The forum/thread pages wrap their content in a themed div, which becomes the
   flow container .site-main would otherwise be. */
.page-theme{display:flex;flex-direction:column;gap:22px;min-width:0}

/* ------------------------------------------------------------ board grid ---- */

.board-layout{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:20px;align-items:start}
.board-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.board-sidebar{display:flex;flex-direction:column;gap:16px;min-width:0}

/* ------------------------------------------------------------- category ---- */

.category{display:flex;flex-direction:column;gap:10px;min-width:0}
.category-bar{display:flex;align-items:center;gap:10px;padding:0 2px}
/* the hub's accent rail, stood on end: a short bar in the category's colour */
.category-bar::before{
  content:'';width:2px;height:15px;border-radius:2px;background:var(--game);flex:none;
}
.category-bar h2{
  font-family:var(--gdisp);font-weight:var(--gdisp-w);
  letter-spacing:var(--gdisp-ls);text-transform:var(--gdisp-tt);
  font-size:16px;line-height:1.2;color:var(--text);
}

/* Forum rows live in one panel per category, split by hairlines. Rows, not
   cards: a board is scanned top-to-bottom, and twenty lifting tiles is noise. */
.forum-list{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.forum-list > .panel{border:0;border-radius:0;background:none}

.forum-row{
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 104px 216px;
  gap:16px;align-items:center;
  padding:15px 20px;
  border-top:1px solid var(--line);
  transition:background .18s ease;
}
.forum-list > .forum-row:first-child,
.forum-children > .forum-row:first-child{border-top:0}
/* the hub's accent rail, revealed on hover -- rotated to suit a row */
.forum-row::before{
  content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;
  border-radius:0 2px 2px 0;background:var(--game);
  opacity:0;transition:opacity .18s ease;
}
.forum-row:hover{background:var(--surface-2)}
.forum-row:hover::before{opacity:.9}

.forum-icon{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:500;font-size:13px;
  color:var(--muted);
  transition:border-color .18s ease,color .18s ease;
}
.forum-row:hover .forum-icon{border-color:var(--game);color:var(--game)}

.forum-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.forum-main .badge{align-self:flex-start;margin-top:2px}
.forum-title{
  font-family:var(--gdisp);font-weight:var(--gdisp-w);letter-spacing:var(--gdisp-ls);
  font-size:15px;line-height:1.35;color:var(--text);
  transition:color .18s ease;
}
.forum-row:hover .forum-title{color:var(--game)}
/* Whole-row click: the section title's ::after overlays the entire row so a click
   anywhere opens the forum (not just the title text). The last-post block is lifted
   above the overlay so its thread + username links still work. No JS -- the CSP is
   script-src 'self' with no inline handlers. */
.forum-row .forum-title::after{content:'';position:absolute;inset:0;z-index:1}
.forum-lastpost{position:relative;z-index:2}

/* ---- Whole-row click across every list (stretched-link, no JS -> CSP-safe) ----
   The row's PRIMARY link gets an ::after overlay covering the whole positioned row; the
   link itself stays static so the overlay anchors to the ROW, not the link. Secondary
   links in the row are lifted above the overlay so they stay clickable. Matches the
   section-row behaviour so every list opens on a click anywhere. */
.thread-list tbody tr{position:relative}
.thread-list .col-title > a::after{content:'';position:absolute;inset:0;z-index:1}
.thread-list .thread-meta a,.thread-list .col-last > a{position:relative;z-index:2}
.pm-list tbody tr{position:relative}
.pm-list td:first-child > a::after{content:'';position:absolute;inset:0;z-index:1}
.search-result{position:relative}
.search-result .search-title::after{content:'';position:absolute;inset:0;z-index:1}
.search-result .thread-meta a{position:relative;z-index:2}
/* profile Recent Posts only -- the a is the li's first child there; the Reputation list's
   li starts with a <span>, so a:first-child skips it and its username link stays a plain link */
.simple-list li{position:relative}
.simple-list li > a:first-child::after{content:'';position:absolute;inset:0;z-index:1}
/* clickability affordance on the table rows */
.thread-list tbody tr:hover,.pm-list tbody tr:hover{background:var(--surface-2);cursor:pointer}
.forum-desc{
  font-family:var(--gbody);font-weight:400;
  font-size:12.5px;line-height:1.55;color:var(--muted);
}

.forum-stats{
  display:flex;flex-direction:column;gap:2px;
  font-family:var(--mono);font-weight:400;font-size:10.5px;
  letter-spacing:.3px;text-transform:uppercase;color:var(--muted);
}
/* Counters stay mono whatever the category's body face is: numbers should line
   up column-wise, and the mono cuts (400/500) exist under every theme. */
.forum-stats strong{font-family:var(--mono);font-weight:500;color:var(--text)}

.forum-lastpost{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  font-family:var(--gbody);font-weight:400;font-size:12.5px;
}
.forum-lastpost > a{
  color:var(--text);
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.forum-lastpost > a:hover{color:var(--game)}
.lastpost-meta{
  font-size:11px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lastpost-meta a{color:var(--muted)}
.lastpost-meta a:hover{color:var(--game)}

/* A container section (post_policy = locked, e.g. Call of Duty > Black Ops 7):
   a heading that happens to be a row, not a destination. */
.forum-section{background:rgba(255,255,255,.02);grid-template-columns:minmax(0,1fr) 104px}
.forum-section .forum-icon{display:none}
.forum-section .forum-title{
  font-size:12.5px;letter-spacing:calc(var(--gdisp-ls) + 1px);
  text-transform:var(--gdisp-tt);color:var(--muted);
}
.forum-section:hover .forum-title{color:var(--game)}
.forum-section .forum-desc{display:none}

.forum-children{border-top:1px solid var(--line)}
.forum-children .forum-row{padding-left:34px}

.forum-header{display:flex;flex-direction:column;gap:6px}
.forum-header .forum-desc{font-size:13.5px}

/* -------------------------------------------------------------- sidebar ---- */

.stat-list,.online-list,.profile-stats,.simple-list{list-style:none;display:flex;flex-direction:column}
.stat-list,.profile-stats{gap:0}
.stat-list li,.profile-stats li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0;border-top:1px solid var(--line);
}
.stat-list li:first-child,.profile-stats li:first-child{border-top:0}
.stat-list span,.profile-stats span{
  font-family:var(--mono);font-weight:400;font-size:10.5px;
  letter-spacing:1px;text-transform:uppercase;color:var(--muted);
}
.stat-list strong,.profile-stats strong{
  font-family:var(--mono);font-weight:500;font-size:13px;color:var(--text);
}

.online-list{gap:7px}
.online-list li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}

/* Presence -- a CSS-only green dot driven purely by real last_seen (no JS, no heartbeat).
   Rendered wherever the server decided the member is within the online window. */
.online-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--ok);display:inline-block;
  box-shadow:0 0 0 2px rgba(78,167,96,.18);
}
.online-dot-lg{width:11px;height:11px;vertical-align:middle;margin-left:2px}
.presence-online{
  font-family:var(--mono);font-weight:500;font-size:10px;
  letter-spacing:1px;text-transform:uppercase;color:var(--ok);
}
.profile-stats strong.is-online{color:var(--ok)}
/* Keeps the postbit username and its dot on one centred line inside the flex column. */
.post-username-line{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0}

.simple-list{gap:9px}
.simple-list li{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:13px;line-height:1.5;
  padding-bottom:9px;border-bottom:1px solid var(--line);
}
.simple-list li:last-child{padding-bottom:0;border-bottom:0}
.simple-list .text-dim{font-family:var(--mono);font-size:11px}

/* ----------------------------------------------------------- forum jump ---- */

.jump-box{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  min-width:0;
}
.new-thread-box{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  min-width:0;
}
.jump-box summary,.new-thread-box summary{
  cursor:pointer;list-style:none;
  font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);
  padding:15px 20px;
  display:flex;align-items:center;gap:9px;
  transition:color .18s ease;
}
.jump-box summary::-webkit-details-marker,
.new-thread-box summary::-webkit-details-marker{display:none}
.jump-box summary::before,.new-thread-box summary::before{
  content:'+';font-size:13px;line-height:1;color:var(--game);
}
.jump-box[open] summary::before,.new-thread-box[open] summary::before{content:'-'}
.jump-box summary:hover,.new-thread-box summary:hover{color:var(--text)}

.jump-list{
  display:flex;flex-direction:column;gap:5px;
  padding:16px 20px 18px;
  border-top:1px solid var(--line);
}
.jump-cat{
  font-family:var(--mono);font-weight:500;font-size:10px;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);
  margin-top:10px;
}
.jump-cat:first-child{margin-top:0}
.jump-list a{font-size:13px;color:var(--text)}
.jump-list a:hover{color:var(--accent)}
.jump-child{padding-left:14px;color:var(--muted);font-size:12.5px}

/* --------------------------------------------------------------- badges ---- */

.badge{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-weight:500;font-size:9.5px;
  letter-spacing:.8px;text-transform:uppercase;
  padding:3px 7px;border-radius:6px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  white-space:nowrap;
  line-height:1.3;
}
.badge-trading{color:var(--arc);border-color:rgba(232,163,61,.35)}
.badge-announce{color:var(--muted)}
.badge-sticky{color:var(--accent);border-color:rgba(255,58,47,.35)}
.badge-locked{color:var(--muted)}
.badge-ok{color:var(--ok);border-color:rgba(78,167,96,.35)}
.badge-warn{color:var(--warn);border-color:rgba(227,179,65,.35)}
.badge-unread{color:var(--accent);border-color:rgba(255,58,47,.35)}
.badge-member{color:var(--muted)}
.badge-premium{color:var(--arc);border-color:rgba(232,163,61,.35)}
.badge-moderator{color:#5aa9e6;border-color:rgba(90,169,230,.35)}
.badge-admin{color:var(--accent);border-color:rgba(255,58,47,.35)}
.primary-nav .badge{margin-left:2px}

/* Thread prefixes -- one modifier class per allowlisted prefix (app.py THREAD_PREFIXES). */
.badge-prefix{color:var(--muted);border-color:var(--line)}
.badge-prefix.prefix-guide{color:var(--ok);border-color:rgba(78,167,96,.35)}
.badge-prefix.prefix-question{color:#5aa9e6;border-color:rgba(90,169,230,.35)}
.badge-prefix.prefix-discussion{color:var(--arc);border-color:rgba(232,163,61,.35)}
.badge-prefix.prefix-news{color:var(--accent);border-color:rgba(255,58,47,.35)}
.badge-prefix.prefix-help{color:var(--warn);border-color:rgba(227,179,65,.35)}
a.badge-prefix{transition:filter .18s ease}
a.badge-prefix:hover{filter:brightness(1.2)}

/* Thread-list sort tabs (server-rendered links; active state carries no JS). */
.sort-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.sort-tab{
  font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.4px;
  padding:6px 12px;border-radius:8px;
  border:1px solid var(--line);
  color:var(--muted);background:var(--surface);
  transition:color .18s ease,border-color .18s ease;
}
.sort-tab:hover{color:var(--text);border-color:var(--game)}
.sort-tab.active{color:var(--text);background:var(--surface-2);border-color:var(--game)}
.filter-active{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted);margin:0 0 12px;
}
.filter-active a{color:var(--accent)}
.filter-active a:hover{text-decoration:underline}

/* --------------------------------------------------------------- tables ---- */

/* Wide tables scroll inside their own box so the page body never has to. */
.table-scroll{
  overflow-x:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.table-scroll table{width:100%;border-collapse:collapse;min-width:600px}

thead th{
  font-family:var(--mono);font-weight:500;font-size:10px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
  text-align:left;
  padding:13px 18px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
tbody td{
  padding:14px 18px;
  border-top:1px solid var(--line);
  vertical-align:top;
  font-size:13.5px;
}
tbody tr:first-child td{border-top:0}
tbody tr{transition:background .18s ease}
tbody tr:hover{background:var(--surface-2)}

.thread-list .col-title{font-family:var(--gbody);font-weight:400}
.thread-list .col-title > a{font-size:14.5px;line-height:1.4;color:var(--text)}
.thread-list tr:hover .col-title > a{color:var(--game)}
.thread-list .col-title .badge{margin-right:6px;vertical-align:1px}
.thread-list .col-stat{
  width:92px;text-align:right;white-space:nowrap;
  font-family:var(--mono);font-weight:400;font-size:12.5px;color:var(--muted);
}
.thread-list .col-last{width:200px;font-family:var(--gbody);font-weight:400;font-size:12.5px}
.thread-list .col-last a{color:var(--text)}
.thread-list tr:hover .col-last a{color:var(--game)}
.thread-meta{
  font-family:var(--mono);font-weight:400;font-size:10.5px;
  letter-spacing:.3px;color:var(--muted);
  margin-top:5px;
}
.thread-meta a{color:var(--muted)}
.thread-meta a:hover{color:var(--game)}
.is-sticky{background:rgba(255,58,47,.035)}
.is-sticky:hover{background:rgba(255,58,47,.06)}

.pm-list .is-unread{background:rgba(255,58,47,.035)}
.pm-list .is-unread a{color:var(--text)}
.admin-table td{font-size:13px}
.admin-table .inline-form{flex-wrap:wrap}

/* ---------------------------------------------------------------- forms ---- */

label{
  font-family:var(--mono);font-weight:400;font-size:10.5px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
}
input[type=text],textarea,select{
  display:block;width:100%;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-family:var(--body);font-weight:400;font-size:13.5px;line-height:1.5;
  transition:border-color .18s ease,box-shadow .18s ease;
}
textarea{resize:vertical;min-height:96px;font-family:var(--mono);font-size:13px;line-height:1.65}
select{cursor:pointer;max-width:220px}
input[type=text]:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,58,47,.14);
}
input[type=text]::placeholder{color:var(--muted)}
input[type=radio]{accent-color:var(--accent)}

.stack-form{display:grid;gap:10px;padding:0 20px 20px}
.new-thread-box > .stack-form{border-top:1px solid var(--line);padding-top:16px}
.panel .stack-form,.postbit .stack-form{padding:0}
.stack-form button{justify-self:start;margin-top:2px}

.inline-form{display:inline-flex;align-items:center;gap:8px}
.mod-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.watch-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.radio-label{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:12px;letter-spacing:.5px;text-transform:none;
  color:var(--text);cursor:pointer;
}
.radio-label input{width:auto;display:inline-block}

.trade-fields{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px 16px;
  display:grid;gap:10px;
}
.trade-fields legend{
  font-family:var(--mono);font-weight:500;font-size:10px;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);
  padding:0 6px;
}

button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.2px;
  color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:9px 15px;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
button:hover,.btn:hover{border-color:var(--accent);color:var(--accent)}
button[type=submit]{border-color:rgba(255,58,47,.3)}
button[type=submit]:hover{background:rgba(255,58,47,.08)}
.btn-danger{color:var(--muted)}
.btn-danger:hover{border-color:var(--accent);color:var(--accent);background:rgba(255,58,47,.08)}
.btn-secondary{border-color:var(--line);color:var(--muted)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);background:transparent}

/* Composer: Post + Preview share one row; the server-rendered preview panel sits above the
   composer form and reuses the .panel + .post-content aesthetic so a draft renders exactly
   as the live postbit will. */
.composer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.composer-preview{gap:10px;margin:0 0 14px;border-left:2px solid var(--game)}
.composer-preview > h3{
  font-family:var(--mono);font-weight:500;font-size:10px;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);
}
.composer-preview-title{
  font-family:var(--head,var(--body));font-weight:600;font-size:17px;
  color:var(--text);line-height:1.35;
}

/* Search: the input is display:block on purpose. An inline (baseline-aligned)
   search input has already cost this codebase a 1px drift when the font changed. */
.search-form{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;
}
.search-field{display:flex;flex-direction:column;gap:5px}
.search-field-q{flex:1 1 220px}
.search-form label{font-size:12px;color:var(--muted)}
.search-form input[type=text],.search-form select{display:block;width:100%}
.search-form button{align-self:flex-end}
.search-heading{font-family:var(--disp);font-weight:500;font-size:16px;color:var(--muted)}
.search-results{list-style:none;display:flex;flex-direction:column;gap:12px}
.search-result{gap:5px}
.search-title{font-family:var(--disp);font-weight:700;font-size:15px}
.search-title:hover{color:var(--accent)}
.search-snip{font-size:13px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
.search-snip mark{background:rgba(255,58,47,.18);color:var(--text);border-radius:3px;padding:0 2px}

/* -------------------------------------------------------------- postbit ---- */

.postbit{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  scroll-margin-top:80px;
}
.postbit-user{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  text-align:center;
  padding:20px 16px;
  background:rgba(255,255,255,.02);
  border-right:1px solid var(--line);
  min-width:0;
}
.avatar{
  width:60px;height:60px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg);
  display:block;
}
.avatar-lg{width:96px;height:96px;border-radius:16px}
.post-username{
  font-family:var(--gbody);font-weight:400;font-size:14px;color:var(--text);
  overflow-wrap:anywhere;
}
.post-username:hover{color:var(--game)}
.post-rank{
  font-family:var(--mono);font-weight:400;font-size:10px;
  letter-spacing:.8px;text-transform:uppercase;color:var(--game);
  overflow-wrap:anywhere;
}
.post-stat{
  font-family:var(--mono);font-weight:400;font-size:10px;
  letter-spacing:.3px;color:var(--muted);
}

.postbit-body{display:flex;flex-direction:column;gap:12px;padding:18px 20px;min-width:0}
.post-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:11px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-weight:400;font-size:10.5px;
  letter-spacing:.5px;color:var(--muted);
}
.post-permalink{color:var(--muted)}
.post-permalink:hover{color:var(--game)}
.post-rep-badge{
  font-family:var(--mono);font-weight:500;font-size:10px;
  border:1px solid var(--line);border-radius:6px;padding:2px 6px;
}
.rep-pos{color:var(--ok)}
.rep-neg{color:var(--accent)}
.post-rep-badge.rep-pos{border-color:rgba(78,167,96,.35)}
.post-rep-badge.rep-neg{border-color:rgba(255,58,47,.35)}

/* Post prose stays Inter. The category's game face is a brand mark, not a
   reading face -- Share Tech Mono is right for a label and wrong for 400 words. */
.post-content{
  font-family:var(--body);font-weight:400;font-size:14.5px;line-height:1.75;
  overflow-wrap:anywhere;
}
.post-content a{color:var(--accent)}
.post-content a:hover{text-decoration:underline}
.post-content img{border-radius:var(--radius-sm);border:1px solid var(--line);margin:6px 0}
.post-content ul{margin:8px 0 8px 20px}
.post-content li{margin:3px 0}
.post-content blockquote{
  margin:10px 0;padding:12px 16px;
  background:var(--bg);
  border:1px solid var(--line);border-left:2px solid var(--game);
  border-radius:var(--radius-sm);
  color:var(--muted);font-size:13.5px;
}
.bb-quote-author{
  font-family:var(--mono);font-weight:500;font-size:10px;
  letter-spacing:1px;text-transform:uppercase;color:var(--muted);
  margin-bottom:6px;
}
.post-content pre{
  margin:10px 0;padding:14px 16px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow-x:auto;
}
.post-content pre code{
  font-family:var(--mono);font-weight:400;font-size:12.5px;line-height:1.6;color:var(--text);
}
.bb-spoiler{
  background:var(--line);color:transparent;border-radius:4px;
  transition:color .15s ease,background .15s ease;
}
.bb-spoiler:hover,.bb-spoiler:active{background:var(--surface-2);color:var(--text)}

.post-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:2px}
.edit-box,.rep-box{min-width:0}
.edit-box summary,.rep-box summary{
  cursor:pointer;list-style:none;
  font-family:var(--body);font-weight:600;font-size:12.5px;
  color:var(--text);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 15px;
  display:inline-flex;align-items:center;
  transition:border-color .18s ease,color .18s ease;
}
.edit-box summary::-webkit-details-marker,.rep-box summary::-webkit-details-marker{display:none}
.edit-box summary:hover,.rep-box summary:hover{border-color:var(--accent);color:var(--accent)}
.edit-box[open],.rep-box[open]{
  flex:1 1 100%;
  display:flex;flex-direction:column;gap:10px;
}
.edit-box[open] summary,.rep-box[open] summary{align-self:flex-start}
.rep-box .stack-form input[type=text]{max-width:340px}

.postbit-sig{
  grid-column:1 / -1;
  padding:12px 20px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.015);
  font-family:var(--body);font-weight:400;font-size:12px;line-height:1.6;color:var(--muted);
  overflow-wrap:anywhere;
}
.postbit-sig a{color:var(--muted);text-decoration:underline}
.postbit-sig a:hover{color:var(--accent)}
.panel .postbit-sig{grid-column:auto;border-top:0;background:none;padding:0}

.pm-message .postbit-user{justify-content:flex-start}

.reply-box{gap:14px}
.trade-panel{gap:8px}
.trade-panel h3{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:11px;color:var(--text);
}
.trade-panel p{font-size:13.5px}
.trade-panel .inline-form{margin-top:6px}

.thread-header{display:flex;flex-direction:column;gap:7px}
.thread-header h1{display:flex;align-items:center;gap:10px;flex-wrap:wrap;overflow-wrap:anywhere}
.thread-header h1 .badge{position:relative;top:-1px}
.thread-sub{
  font-family:var(--mono);font-weight:400;font-size:11px;
  letter-spacing:1px;text-transform:uppercase;color:var(--muted);
}

/* -------------------------------------------------------------- profile ---- */

.profile-layout{display:grid;grid-template-columns:288px minmax(0,1fr);gap:20px;align-items:start}
.profile-card{align-items:center;text-align:center;gap:10px}
.profile-card h1{
  font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.2px;
  overflow-wrap:anywhere;
}
.profile-title{
  font-family:var(--mono);font-weight:400;font-size:10.5px;
  letter-spacing:1px;text-transform:uppercase;color:var(--muted);
}
.profile-card .profile-stats{width:100%;margin-top:6px}
.profile-card .btn{margin-top:6px}
.profile-main{display:flex;flex-direction:column;gap:16px;min-width:0}

/* ---------------------------------------------------------------- pager ---- */

.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;padding-top:4px}
.pager-link,.pager-current,.pager-ellipsis{
  font-family:var(--mono);font-weight:400;font-size:11.5px;
  min-width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 10px;border-radius:8px;
  border:1px solid var(--line);
}
.pager-link{color:var(--muted);background:var(--surface);transition:color .18s ease,border-color .18s ease}
.pager-link:hover{color:var(--text);border-color:var(--game)}
.pager-current{color:var(--text);background:var(--surface-2);border-color:var(--game)}
.pager-ellipsis{border-color:transparent;color:var(--muted)}

/* ---------------------------------------------------------------- error ---- */

.error-panel{align-items:center;text-align:center;gap:12px;padding:44px 24px}
.error-panel h1{font-family:var(--disp);font-weight:700;font-size:30px}
.error-panel p{color:var(--muted);font-size:13.5px}

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

.site-footer{
  border-top:1px solid var(--line);
  margin-top:24px;
  padding:26px 24px 34px;
  text-align:center;
}
.site-footer p{
  font-family:var(--mono);font-weight:400;font-size:11px;
  letter-spacing:.6px;color:var(--muted);
}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--accent)}

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

@media (max-width:980px){
  .board-layout{grid-template-columns:minmax(0,1fr)}
  .profile-layout{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:760px){
  .site-main{padding:22px 14px 44px;gap:18px}
  .header-inner{padding:10px 14px;gap:10px;flex-wrap:wrap}
  .primary-nav{gap:2px}
  .primary-nav a{padding:6px 8px;font-size:10.5px;letter-spacing:.6px}
  h1{font-size:22px}

  /* Row -> block: identity first, then the counters and last post as a compact
     strip underneath. Nothing is dropped; it re-flows. */
  .forum-row{
    grid-template-columns:34px minmax(0,1fr);
    row-gap:8px;padding:14px 16px;align-items:start;
  }
  .forum-icon{width:34px;height:34px;font-size:12px}
  .forum-stats{grid-column:2;flex-direction:row;gap:14px}
  .forum-lastpost{grid-column:2}
  .forum-section{grid-template-columns:minmax(0,1fr)}
  .forum-section .forum-stats{grid-column:1}
  .forum-children .forum-row{padding-left:22px}

  .postbit{grid-template-columns:minmax(0,1fr)}
  .postbit-user{
    flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;
    text-align:left;gap:8px;padding:12px 16px;
    border-right:0;border-bottom:1px solid var(--line);
  }
  .avatar{width:40px;height:40px;border-radius:10px}
  .postbit-body{padding:16px}
  .postbit-sig{padding:12px 16px}

  .search-form{padding:16px}
  .search-form .search-field{flex:1 1 100%}
  .search-form button{align-self:flex-start}
  .stack-form,.new-thread-box > .stack-form{padding-left:16px;padding-right:16px}
  .panel .stack-form,.postbit .stack-form{padding-left:0;padding-right:0}
  .jump-box summary,.new-thread-box summary{padding:13px 16px}
  .jump-list{padding:16px}
  .panel{padding:16px}
}

@media (max-width:420px){
  .brand{font-size:19px}
  .logo-label{font-size:9.5px;letter-spacing:1.8px;padding-left:9px}
  .site-main{padding:18px 10px 36px}
  .thread-list .col-stat{width:64px}
  .thread-list .col-last{width:150px}
  select{max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ----------------------------------------------------------------- auth ---- */

/* The forms above this point only ever needed a text input, so the type
   selectors stop at [type=text]. Auth is the first place the board asks for a
   password or an email, and an unstyled input here would render as a raw
   platform control in the middle of a themed card. Same declarations as the
   text input, same focus ring -- these types are joining that rule, not
   inventing a look of their own. */
input[type=password],input[type=email]{
  display:block;width:100%;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-family:var(--body);font-weight:400;font-size:13.5px;line-height:1.5;
  transition:border-color .18s ease,box-shadow .18s ease;
}
input[type=password]:focus,input[type=email]:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,58,47,.14);
}
input[type=password]::placeholder,input[type=email]::placeholder{color:var(--muted)}

/* A narrow card on the board background. .site-main is a flex column, so the
   layout only has to centre one child and cap its width. */
.auth-layout{
  display:flex;justify-content:center;
  padding:14px 0 30px;
}
.auth-card{
  width:100%;max-width:430px;
  gap:16px;padding:26px 26px 24px;
}

.auth-head{display:flex;flex-direction:column;gap:6px}
.auth-head h1{font-family:var(--disp);font-weight:700;font-size:23px;letter-spacing:-.2px}
.auth-sub{color:var(--muted);font-size:13px;line-height:1.6}

/* Label over input, never beside it. An inline (baseline-aligned) input has
   already cost this codebase a 1px drift when the font changed -- see the note
   on .search-form. Every input on these pages is display:block for that reason. */
.auth-form{gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field input{display:block}
.field-hint{
  font-family:var(--mono);font-weight:400;font-size:10.5px;
  letter-spacing:.3px;color:var(--muted);line-height:1.5;
}
.auth-form button{justify-self:stretch;width:100%;margin-top:4px;padding:11px 15px}
.auth-form button[disabled]{opacity:.6;cursor:default}
.auth-form button[disabled]:hover{border-color:rgba(255,58,47,.3);color:var(--text);background:var(--surface-2)}

/* Status line. Hidden until auth.js has something to say, then coloured by
   outcome -- red for a rejection, green for the ones that worked. */
.auth-msg{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px 13px;
  font-size:12.5px;line-height:1.55;
  overflow-wrap:anywhere;
}
.auth-msg-error{
  color:var(--text);
  border-color:rgba(255,58,47,.35);
  background:rgba(255,58,47,.08);
}
.auth-msg-ok{
  color:var(--text);
  border-color:rgba(78,167,96,.35);
  background:rgba(78,167,96,.08);
}

.auth-alt{
  font-size:12.5px;color:var(--muted);
  padding-top:12px;border-top:1px solid var(--line);
}
/* A second alt line tucks under the first: one hairline above the group, not one
   per link. Keyed off the adjacent sibling, NOT :first-of-type -- the status
   line above these is also a <p>, so :first-of-type would match IT and strip the
   border from both links instead of just the trailing one. */
.auth-alt + .auth-alt{border-top:0;margin-top:-10px;padding-top:0}
.auth-alt a{color:var(--accent)}
.auth-alt a:hover{text-decoration:underline}

/* The post-register / post-reset state. Replaces the form in place: the card
   keeps its frame and the outcome is explained where the fields were. */
.auth-done{display:flex;flex-direction:column;gap:12px}
.auth-done:focus{outline:none}
.auth-done h2{font-family:var(--disp);font-weight:700;font-size:17px}
.auth-done p{font-size:13px;line-height:1.65;color:var(--muted)}
.auth-steps{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0}
.auth-steps li{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;
  font-size:13px;line-height:1.6;color:var(--muted);
}
.auth-steps li strong{color:var(--text);font-weight:600}
.auth-step-n{
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:500;font-size:10px;color:var(--muted);
}

@media (max-width:760px){
  .auth-layout{padding:6px 0 22px}
  .auth-card{padding:20px 18px}
  .auth-head h1{font-size:21px}
}

/* ---- Reactions ---------------------------------------------------------------
   Counts render only for kinds with >0 (the .has class). The picker is a native
   <details> popover -- no JS needed to open it; app.js only makes the toggle inline. */
.reactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 2px}
.reaction-counts{display:inline-flex;gap:6px;flex-wrap:wrap}
.reaction-count{display:none;align-items:center;gap:4px;font-size:12.5px;
  padding:2px 9px;border:1px solid var(--line);border-radius:20px;background:var(--surface-2);color:var(--muted)}
.reaction-count.has{display:inline-flex}
.reaction-count.mine{border-color:var(--game);color:var(--text);
  background:color-mix(in srgb,var(--game) 14%,var(--surface-2))}
.reaction-count .rc-emoji{font-size:14px;line-height:1}
.react-picker{position:relative}
.react-picker > summary{list-style:none;cursor:pointer;font-size:12px;color:var(--muted);
  padding:3px 11px;border:1px solid var(--line);border-radius:20px;user-select:none;
  transition:color .15s ease,border-color .15s ease}
.react-picker > summary::-webkit-details-marker{display:none}
.react-picker > summary:hover,.react-picker[open] > summary{color:var(--text);border-color:var(--game)}
.react-choices{position:absolute;z-index:5;top:calc(100% + 6px);left:0;display:flex;gap:2px;
  padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 28px -10px rgba(0,0,0,.7)}
.react-form{margin:0}
.react-btn{font-size:20px;line-height:1;padding:4px 6px;border:0;background:transparent;
  border-radius:8px;cursor:pointer;transition:transform .1s ease,background .1s ease}
.react-btn:hover{transform:scale(1.25);background:var(--surface-2)}
.react-btn.mine{background:color-mix(in srgb,var(--game) 22%,transparent)}