/*
 * Forum visual refresh, 2026-10-17. Loaded AFTER blue.css in header.php so it
 * only overrides/extends the existing legacy skin -- it never replaces
 * blue.css and never removes a class blue.css or the inline PHP markup
 * depends on (tborder/trow1-6/tcat/thead/thead2, .gradient{N} from
 * gradient.js, .pagination_*, .post_author_info, etc.). Page-controller
 * logic, permissions, pagination, moderation actions and SEO/schema output
 * in the PHP files are untouched; this file only changes how the existing
 * markup looks, plus a few small additive classes (fr-*) for avatar rings,
 * presence dots and unread markers that the PHP now also emits.
 *
 * Palette below is blue.css's own real colors (body #080808, .tborder
 * #0d0f0f, .thead #040404, .trow1 gradient #353b48->#2f3640, link accents
 * #ffce43/#fdcb6e/#ffff59) -- not a new brand, just tokenized and reused
 * consistently. --fr-online matches the #3ddc5b "online" green already used
 * sitewide in css/shell.css's .railbadge-dot.
 */
:root{
  --fr-bg:#080808;
  --fr-panel:#0d0f0f;
  --fr-panel-alt:#111313;
  --fr-head:#040404;
  --fr-row-a:#2f3640;
  --fr-row-b:#272d36;
  --fr-border:#222424;
  --fr-text:#f5f6fa;
  --fr-dim:#9a9a9a;
  --fr-gold:#ffce43;
  --fr-gold-soft:#fdcb6e;
  --fr-link:#ffff59;
  --fr-online:#3ddc5b;
  --fr-radius:8px;
}

/* ---------- base + legacy table skin, modernized in place ---------- */
body{
  background:var(--fr-bg);
  font-family:'Montserrat',-apple-system,'Segoe UI',Roboto,sans-serif;
}
#container{ background:transparent; }
#content{ padding:0 16px; }
.wrapper{ max-width:1180px; margin:0 auto; }

table.tborder{
  background:var(--fr-panel);
  border:1px solid var(--fr-border);
  border-radius:var(--fr-radius);
  border-collapse:separate;
  overflow:hidden;
  margin-bottom:16px;
}
table.tborder td,table.tborder th{ border:none; }

td.thead,.thead{
  background:var(--fr-head) !important;
  color:#fff !important;
  font-weight:800;
  letter-spacing:.02em;
  padding:12px 16px !important;
  text-align:left;
}
td.thead strong,.thead strong{ font-weight:800; }
td.thead h1{ font-size:17px; margin:0; color:#fff; }
h1.fr-board-h1{ font-size:inherit; font-weight:inherit; margin:0; display:inline; }
td.thead2,.thead2{
  background:var(--fr-head) !important;
  border-bottom:2px solid var(--fr-gold);
}

tr.tcat-row td.tcat,td.tcat{
  background:var(--fr-panel-alt) !important;
  border-bottom:1px solid var(--fr-border) !important;
  border-top:none !important;
  color:var(--fr-dim) !important;
  padding:8px 16px !important;
}
td.tcat a:link,td.tcat a:visited{ color:var(--fr-dim); }
td.tcat a:hover{ color:var(--fr-gold); }

td.trow1,td.trow2,td.trow3,td.trow4,td.trow5,td.trow6{
  background:var(--fr-panel) !important;
  color:var(--fr-text);
  padding:12px 16px !important;
  border-bottom:1px solid var(--fr-border) !important;
}
tr:last-child > td.trow1,tr:last-child > td.trow2,tr:last-child > td.trow3{ border-bottom:none !important; }

/* blue.css's "a:link,a:visited{text-shadow:1px 1px 1px #000}" smudges the
   new flat buttons/pills (.fr-btn, .button) with an unwanted drop-shadow on
   their label text -- same specificity/selector, so override it explicitly
   rather than relying on load order. */
a:link,a:visited{ color:var(--fr-text); text-shadow:none !important; }
a:hover{ color:var(--fr-gold); }
a.subject_editable.subject_old,.last-post a{ color:var(--fr-gold-soft); font-weight:700; }
a.subject_editable.subject_old:hover{ color:var(--fr-gold); }
.post_body a,.post_body a:visited,.post_body a:hover,.post_body a:active{ color:var(--fr-link); }
.smalltext{ color:var(--fr-dim); font-size:12px; }

input,textarea,select{
  background:var(--fr-panel-alt);
  border:1px solid var(--fr-border);
  color:var(--fr-text);
  border-radius:6px;
  padding:7px 10px;
  font-family:'Montserrat',sans-serif;
}
/* .button is also used on plain <a> tags (not just <input>) across the forum
   (e.g. homepage.php's "Choose a forum") -- blue.css's own ".button" rule
   (background:#ff8229, an orange unrelated to this palette) otherwise still
   wins there since the input-only selector below doesn't match an anchor. */
input[type="submit"],input.button,input[type="submit"].button,a.button,.button{
  background:var(--fr-gold);
  color:#1a1a0a !important;
  border:none;
  font-weight:800;
  cursor:pointer;
  padding:9px 16px;
  border-radius:6px;
  text-decoration:none !important;
  display:inline-block;
}
input[type="submit"]:hover,input.button:hover,a.button:hover,.button:hover{ background:var(--fr-gold-soft); text-decoration:none !important; }

.pagination{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 2px; }
.pagination .pages{ color:var(--fr-dim); margin-right:4px; }
.pagination_page,.pagination_previous,.pagination_next,.pagination_current{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 8px; border-radius:6px;
  background:var(--fr-panel-alt); border:1px solid var(--fr-border); color:var(--fr-text) !important;
  text-decoration:none; font-size:12.5px;
}
.pagination_current{ background:var(--fr-gold); color:#1a1a0a !important; font-weight:800; border-color:var(--fr-gold); }
.pagination_page:hover,.pagination_previous:hover,.pagination_next:hover{ border-color:var(--fr-gold); color:var(--fr-gold) !important; }

/* blue.css defines TWO competing ".navigation" rulesets of its own (a plain
   breadcrumb text style, and a separate 40px arrow-tab-shaped nav with
   50px CSS-triangle ::before/::after borders meant for a totally different
   component) -- both target the same ".navigation li"/"::after" selectors we
   reuse for the breadcrumb, and CSS cascades per PROPERTY, not per rule, so
   only overriding `content` left blue.css's own border/position/width/height
   on that same ::after still active underneath ours. Reset every property
   those old rules set, not just the ones we want to change. */
ul.navigation,ul.navigation li{ background:none !important; height:auto !important; }
ul.navigation{ list-style:none; display:flex; flex-wrap:wrap; gap:0; padding:12px 2px 6px; margin:0; font-size:12.5px; color:var(--fr-dim); }
ul.navigation li{ display:flex !important; align-items:center; float:none !important; position:static !important; padding:0 !important; margin:0 !important; }
ul.navigation li:first-child{ padding-left:0 !important; }
ul.navigation li:not(.active)::before,ul.navigation li:not(.active)::after{
  content:none !important; display:none !important; border:none !important; width:0 !important; height:0 !important;
}
ul.navigation li:not(:last-child)::after{
  content:">" !important; display:inline !important; margin:0 8px !important; color:var(--fr-dim) !important;
  border:none !important; width:auto !important; height:auto !important; position:static !important;
}
ul.navigation li.active{ color:var(--fr-text); font-weight:700; }
ul.navigation a.listlink{ color:var(--fr-dim); }
ul.navigation a.listlink:hover{ color:var(--fr-gold); }

/* ---------- logo / category strip / submenu (header.php) ---------- */
#logo{ background:var(--fr-head); padding:14px 0 10px; }
#logo img{ opacity:1 !important; filter:none !important; max-width:260px; height:auto; }
.fr-catstrip{
  display:flex; gap:14px; overflow-x:auto; padding:12px 16px; background:var(--fr-head);
  border-top:1px solid var(--fr-border);
}
.fr-catstrip a{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.fr-catstrip img.navz{ width:48px !important; height:48px !important; image-rendering:pixelated; }

#submenu{
  background:var(--fr-row-a);
  height:auto; min-height:44px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px;
  padding:4px 12px; border-top:1px solid var(--fr-border); border-bottom:1px solid var(--fr-border);
}
#submenu_left,#submenu_right{ display:flex; flex-wrap:wrap; align-items:center; gap:2px; float:none; }
/* justify-content:space-between on #submenu alone wasn't reliably pinning
   this to the right edge in testing (some interaction with flex-wrap we
   couldn't pin down); margin-left:auto on the last flex item is the more
   robust way to push it flush right regardless. */
#submenu_right{ margin-left:auto; }
/* blue.css's own "#submenu a{display:block}" (unconditional, no media query)
   stacks each link onto its own line regardless of viewport -- the <strong>
   wrapper around the links also needs to become a flex row, not just the
   outer #submenu_left/#submenu_right div, since the <strong> is the actual
   direct parent of the <a> tags. */
#submenu_left strong,#submenu_right strong{ display:flex !important; flex-wrap:wrap; align-items:center; gap:2px; font-weight:inherit; }
#submenu a{ display:inline-flex !important; align-items:center; float:none; padding:9px 10px; font-size:13px; font-weight:600; color:var(--fr-text); white-space:nowrap; }
#submenu a:hover{ background:var(--fr-gold); color:#1a1a0a; border-radius:6px; }

/* ---------- consistent CSS buttons, replacing old bitmap img buttons ---------- */
.fr-btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:6px;
  font-size:12.5px; font-weight:700; text-decoration:none !important; border:1px solid var(--fr-border);
  background:var(--fr-panel-alt); color:var(--fr-text) !important; cursor:pointer; white-space:nowrap;
}
.fr-btn:hover{ border-color:var(--fr-gold); color:var(--fr-gold) !important; }
.fr-btn-primary{ background:var(--fr-gold); border-color:var(--fr-gold); color:#1a1a0a !important; }
.fr-btn-primary:hover{ background:var(--fr-gold-soft); color:#1a1a0a !important; }
.fr-btn-fb{ background:#3b5998; border-color:#3b5998; color:#fff !important; }
.fr-btn-fb:hover{ background:#2d4373; border-color:#2d4373; color:#fff !important; }
.fr-btn-x{ background:#000; border-color:#333; color:#fff !important; }
.fr-btn-x:hover{ background:#222; border-color:#444; color:#fff !important; }
.fr-btn-reddit{ background:#ff4500; border-color:#ff4500; color:#fff !important; }
.fr-btn-reddit:hover{ background:#cc3700; border-color:#cc3700; color:#fff !important; }
.fr-discord{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  background:#5865F2; border:1px solid #5865F2; border-radius:8px; padding:16px; color:#fff !important; text-decoration:none !important;
}
.fr-discord:hover{ background:#4752c4; border-color:#4752c4; }
.fr-discord strong{ font-size:14px; }
.fr-discord span{ font-size:12px; opacity:.85; }
.fr-btn[disabled],.fr-btn-locked{ opacity:.6; cursor:default; }
.fr-btn-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.fr-icon{ width:14px; height:14px; flex:0 0 auto; }
.menu-toggle{ background:var(--fr-panel-alt) !important; border:1px solid var(--fr-border) !important; }

/* identity / welcome box, added by header.php next to the submenu */
.fr-welcome{ display:flex; align-items:center; gap:10px; padding:6px 10px; font-size:12.5px; color:var(--fr-dim); }
.fr-welcome b{ color:var(--fr-gold); }
.fr-login-cta{
  background:var(--fr-gold); color:#1a1a0a !important; font-weight:800; padding:8px 16px;
  border-radius:6px; font-size:13px; text-decoration:none !important;
}
.fr-search-form input[type="text"],.fr-search-form select{ max-width:100%; box-sizing:border-box; }
@media (max-width:640px){
  table.fr-header-panel,table.fr-header-panel tbody,table.fr-header-panel tr{ display:block; width:100%; }
  table.fr-header-panel td.fr-header-categories,table.fr-header-panel td.fr-header-account{
    display:block; width:auto !important; max-width:none !important; box-sizing:border-box;
  }
  table.fr-header-panel td.fr-header-account{ padding:10px 12px !important; text-align:center; }
  .fr-header-account form{ margin:0; }
  .fr-header-account .fr-login-cta{ max-width:100%; white-space:normal; }
  table.fr-search-form > tbody > tr{ display:block; }
  table.fr-search-form > tbody > tr > td{ display:block; width:auto !important; box-sizing:border-box; }
  table.fr-search-form > tbody > tr > td.fr-search-label{ padding-bottom:0 !important; }
  table.fr-search-form > tbody > tr > td.fr-search-label br{ display:none; }
}

/* ---------- avatar ring / presence dot / rank pill (additive) ---------- */
.fr-avatar{
  --fr-size:40px; width:var(--fr-size); height:var(--fr-size); border-radius:50%;
  position:relative; flex:0 0 auto; display:inline-flex; background:var(--fr-panel-alt);
  border:1px solid var(--fr-border); overflow:visible;
}
.fr-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.fr-dot{
  position:absolute; right:-2px; bottom:-2px; width:28%; height:28%; min-width:8px; min-height:8px;
  border-radius:50%; border:2px solid var(--fr-panel); background:var(--fr-dim); box-shadow:none;
}
.fr-dot.fr-online{ background:var(--fr-online); box-shadow:0 0 5px var(--fr-online); }
.fr-rankpill{
  display:inline-block; font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:4px;
  background:rgba(255,206,67,.16); color:var(--fr-gold); letter-spacing:.02em;
}
.fr-unread-ping{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--fr-online); box-shadow:0 0 5px var(--fr-online); margin-right:4px; vertical-align:middle;
}

/* ---------- board / thread row layout (index.php, forum.php) ---------- */
.fr-board-row,.fr-thread-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; width:100%; }
.fr-board-icon img,.fr-thread-icon img{ width:44px; height:44px; image-rendering:pixelated; display:block; }
.fr-row-main{ flex:1 1 220px; min-width:0; }
.fr-row-main .fr-title{ font-weight:700; color:#fff; font-size:14.5px; }
.fr-row-main .fr-desc{ font-size:12.5px; color:var(--fr-dim); margin-top:3px; }
.fr-stats-col{ display:flex; gap:16px; text-align:center; flex:0 0 auto; font-size:12px; color:var(--fr-dim); }
.fr-stats-col b{ display:block; color:var(--fr-text); font-size:13px; }
.fr-lastpost-col{ min-width:170px; text-align:right; flex:0 0 auto; font-size:12px; color:var(--fr-dim); }
@media (max-width:640px){
  .fr-stats-col,.fr-lastpost-col{ display:none; }
}

/* ---------- thread view: author sidebar + post body (viewthread.php) ---------- */
/* .fr-post-side + .fr-post-content sit as the two cells of ONE <tr> (display:
   flex on that tr -- the browser treats a flex-container tr's <td> children
   as ordinary flex items, so this works without otherwise touching table
   layout elsewhere). post-meta-table's 3 cells (avatar/author/stats) stack
   vertically inside the now-narrow left column instead of sitting side by
   side as 3 table columns, which only had room in the old full-width row. */
tr.fr-post-row{ display:flex; flex-wrap:wrap; }
td.fr-post-side{ flex:0 0 190px; }
/* Only td.trow1/trow2/etc get a background from the legacy-class rules
   above; fr-post-content has none of those classes, so without this it's
   fully transparent (page black showing through) while the sidebar next to
   it is visibly panelled -- same fix for cellpadding="5" cramming the long
   post text flush against the cell edge. */
td.fr-post-content{ flex:1 1 420px; min-width:0; background:var(--fr-panel); padding:16px 20px !important; border-left:1px solid var(--fr-border); }
table.post-meta-table,table.post-meta-table tbody,table.post-meta-table tr{ display:block; width:100% !important; }
table.post-meta-table td{ display:block; width:auto !important; padding:0 0 10px !important; }
td.post_avatar{ padding-right:0 !important; vertical-align:top; }
td.post_author{ vertical-align:top; }
td.post_author_info{
  background:var(--fr-panel-alt); border-radius:6px; padding:10px 12px !important;
  font-size:11.5px; line-height:1.7; color:var(--fr-dim);
}
@media (max-width:680px){
  tr.fr-post-row{ flex-direction:column; }
  td.fr-post-side{ flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
  table.post-meta-table,table.post-meta-table tbody,table.post-meta-table tr{ display:flex !important; flex-wrap:wrap; align-items:center; gap:10px; }
  table.post-meta-table td{ padding:0 !important; width:auto !important; }
  td.post_author_info{ width:100% !important; order:3; }
}
td.post_author_info strong,.reputation_positive,.reputation_neutral,.reputation_negative{ color:var(--fr-text); }
.reputation_positive{ color:#5fd96a !important; }
.reputation_negative{ color:#e05c5c !important; }
.post_body{ line-height:1.7; padding:4px 2px; }
@media (max-width:640px){
  .post_author_info{ width:auto !important; }
  .post_body{ text-align:left; }
  .post_body img{ max-width:100% !important; height:auto !important; }
}

/* ---------- forum stats footer card ---------- */
.bottommenu{ background:var(--fr-head); color:var(--fr-dim); padding:14px; text-align:center; }
.bottommenu a{ color:var(--fr-gold); }