/* ============================================================
   Forum Design System — PAGES
   Per-surface layout wrappers for the three designed surfaces,
   plus shared scaffolding (panels, forms, tables, buttons) and
   legacy-class bridges that bring every remaining forum page into
   the system without rewriting all markup. Depends on tokens.css +
   components.css.
   ============================================================ */

/* ── FORUM HOME layout ─────────────────────────────────── */
.forum-header{padding:6px 0 22px;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px}
.forum-header .eyebrow{margin:0 0 8px;color:var(--nd-gold);font-weight:600}
.forum-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(2rem, 3vw, 2.5rem);line-height:1.06;letter-spacing:-.018em;color:var(--nd-navy);margin:0}
.forum-title .sub{font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--ink-3);letter-spacing:0;display:inline-block;margin-left:10px;vertical-align:middle;position:relative;top:-6px}
.board-switch{display:flex;gap:0;border:1px solid var(--line);border-radius:6px;background:#fff;padding:3px;align-self:end}
.board-switch a{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);padding:8px 14px;border-radius:4px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;line-height:1}
.board-switch a:hover{background:var(--bg-muted);color:var(--nd-navy);text-decoration:none}
.board-switch a[aria-current="page"]{background:var(--nd-navy);color:#fff}
.board-switch a[aria-current="page"]:hover{background:var(--nd-navy-2)}
.board-switch .count{font-family:var(--font-mono);font-size:10px;color:inherit;opacity:.7;font-weight:500}
.forum-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 16px}
.forum-meta-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--font-sans);font-size:12.5px;color:var(--ink-3)}
.forum-meta-left .stat{display:inline-flex;align-items:center;gap:6px}
.forum-meta-left .stat strong{color:var(--nd-navy);font-weight:600;font-variant-numeric:tabular-nums}
.forum-meta-left .stat .mono{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.forum-meta-left .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-4);flex-shrink:0}
.forum-meta-left .sort{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink-2);padding:4px 8px;border-radius:4px}
.forum-meta-left .sort:hover{background:var(--bg-muted)}
.forum-meta-left .sort .lbl{color:var(--ink-3);font-weight:400}
.forum-meta-left .sort .val{font-weight:600}

/* ── SINGLE POST layout ────────────────────────────────── */
.sp-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;padding:6px 0 56px}
.sp-main{min-width:0}
.sp-rail{min-width:0}
.threaded-toggle{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.02em;padding:6px 10px;border-radius:4px;cursor:default;background:color-mix(in srgb, var(--nd-green) 12%, transparent)}
.threaded-toggle .toggle{width:26px;height:14px;border-radius:9999px;background:var(--nd-green);position:relative}
.threaded-toggle .toggle::after{content:"";position:absolute;top:1px;right:1px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.threaded-toggle .lock{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--ink-4);text-transform:uppercase;font-weight:500}

/* ── VIEW ALL layout ───────────────────────────────────── */
.va-layout{max-width:880px;margin:0 auto;padding:6px 0 56px}
.va-back-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 0 18px;flex-wrap:wrap}
.va-back-strip a.back{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--nd-navy)}
.va-back-strip a.back:hover{color:var(--accent-hover);text-decoration:none}
.va-back-strip a.back svg{transition:transform .15s ease}
.va-back-strip a.back:hover svg{transform:translateX(-2px)}
.va-back-strip .view-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.va-back-strip .view-status .pip{width:6px;height:6px;border-radius:50%;background:var(--nd-gold)}
.va-layout .op-card{padding:32px 36px 28px}
.va-layout .op-body{max-width:none}
.va-layout .op-signature{max-width:none}

/* ── RESPONSIVE (surfaces) ─────────────────────────────── */
/* Indent plateau — stop adding indent past a fixed number of levels, so the row
   keeps a width floor no matter how deep the thread runs. Defence in depth: the
   tree is windowed server-side (docs/forum-deep-thread-navigation.md), so this
   should not normally be reached. Desktop plateaus at 8. */
.rt-list .rt-list .rt-list .rt-list .rt-list .rt-list .rt-list .rt-list .rt-list{
  margin-left:0;border-left:0;
}
.rt-list .rt-list .rt-list .rt-list .rt-list .rt-list .rt-list .rt-list .rt-list > .rt-node > .rt-row::before{
  display:none;
}

@media (max-width:980px){
  .forum-header{grid-template-columns:1fr;gap:14px}
  .board-switch{align-self:start;overflow-x:auto}
  .topic{grid-template-columns:44px 1fr;gap:12px;padding:14px 14px 14px 10px}
  .topic-meta .view-all{margin-left:0}
  .sp-layout{grid-template-columns:1fr;gap:24px}
  .sp-rail{display:none}
  .op-card{padding:22px 22px 20px}
  .rt-list .rt-list{margin-left:14px}
  /* plateau at 6 */
  .rt-list .rt-list .rt-list .rt-list .rt-list .rt-list .rt-list{margin-left:0;border-left:0}
  .rt-list .rt-list .rt-list .rt-list .rt-list .rt-list .rt-list > .rt-node > .rt-row::before{display:none}
}
@media (max-width:760px){
  .va-tree .va-tree{margin-left:14px}
  .va-tree .va-tree .va-tree .va-tree{margin-left:0;border-left:0;padding-left:0}
  .va-tree .va-tree .va-tree .va-tree > .va-node > .va-card{margin-left:0}
  .va-tree .va-tree .va-tree .va-tree > .va-node > .va-card::before{display:none}
  .va-layout .op-card{padding:22px 22px 18px}
  .va-card{padding:16px 18px 14px}
}
@media (max-width:640px){
  .topic-title{font-size:17px}
  .reply-preview .pr-row{font-size:12.5px}
  /* State badges + byline leave the title almost no room at this width,
     so give the title its own line and let the rest wrap beneath it. */
  .reply-preview .pr-row{flex-wrap:wrap;gap:5px 8px}
  .reply-preview .pr-title{flex:1 1 100%}
  /* Same problem in the reply tree: .rt-meta never shrinks, so at this width it
     leaves the title nothing. Give the title its own line. */
  .rt-row{flex-wrap:wrap;gap:2px 8px}
  .rt-title{flex:1 1 100%}
  /* plateau at 4 */
  .rt-list .rt-list .rt-list .rt-list .rt-list{margin-left:0;border-left:0}
  .rt-list .rt-list .rt-list .rt-list .rt-list > .rt-node > .rt-row::before{display:none}
  .rt-ancestors{padding:9px 10px 10px}
}

/* ============================================================
   SHARED SCAFFOLDING + LEGACY BRIDGES
   Everything below derives from the design system to cover pages
   the mockups don't draw (forum index, auth, profile, mail,
   search, sysop, post form). Legacy class names emitted by the
   existing templates are mapped to the new look here.
   ============================================================ */

/* Vertical rhythm wrapper used by legacy layouts */
.wrapcontent{padding:0 0 48px}

/* Generic content panel — the workhorse card for long-tail pages */
.forum-panel{
  background:var(--card-raised);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);padding:26px 28px;margin:18px 0;
}
.forum-panel + .forum-panel{margin-top:24px}

/* Page-level headings (legacy .title / .subtitle / hN inside content) */
.page h1,.page h2.title,.title,.page .forum-h1{
  font-family:var(--font-serif);font-weight:600;color:var(--nd-navy);
  letter-spacing:-.012em;line-height:1.15;margin:18px 0 12px;
}
.title{font-size:1.7rem}
h2.title,.page h2{font-size:1.5rem}
.subtitle,h3.subtitle{font-family:var(--font-serif);font-weight:600;font-size:1.15rem;color:var(--nd-navy);margin:0 0 4px}
.basic,.basicbold{font-family:var(--font-sans);color:var(--ink-2)}
.basicbold{font-weight:600}
.basicbolditalic{font-family:var(--font-sans);font-weight:600;font-style:italic;color:var(--ink-3)}
.tinytext{font-family:var(--font-sans);font-size:12px;color:var(--ink-3)}
.tinylink{font-weight:600;color:var(--nd-green-ink)}
.specialtext{color:var(--nd-navy);font-weight:600}

/* ── FORMS & INPUTS (legacy bridges) ───────────────────── */
input[type=text],input[type=password],input[type=email],input[type=search],
input[type=url],input[type=number],textarea,select,
.formfield,.form-control{
  font-family:var(--font-sans);font-size:14px;color:var(--text);line-height:1.5;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-input);
  padding:9px 12px;width:100%;max-width:620px;display:block;margin:4px 0 12px;
}
textarea,.formfield[name=bodytext]{min-height:220px;resize:vertical;font-size:15px}
input[type=checkbox],input[type=radio]{width:auto;display:inline-block;margin:0 6px 0 0}
select{max-width:320px}
input:focus,textarea:focus,select:focus,.formfield:focus,.form-control:focus{
  outline:none;border-color:var(--nd-green);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--nd-green) 20%, transparent);
}
input::placeholder,textarea::placeholder{color:var(--ink-4)}

/* Typeahead suggestion menu (typeahead.bundle.js — mail compose recipient).
   The plugin injects .twitter-typeahead/.tt-* markup; unstyled it renders
   transparent over the fields below. */
.twitter-typeahead{width:100%;max-width:620px}
.tt-menu{width:100%;margin-top:4px;padding:4px 0;background:var(--card-raised);border:1px solid var(--line);border-radius:var(--r-input);box-shadow:var(--shadow-card);z-index:30}
.tt-suggestion{padding:7px 12px;font-family:var(--font-sans);font-size:14px;color:var(--ink-2);cursor:pointer}
.tt-suggestion:hover,.tt-cursor{background:var(--bg-sunk);color:var(--nd-navy)}
.tt-highlight{font-weight:600;color:var(--nd-navy)}
.tt-hint{color:var(--ink-4)}
label{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);display:block;margin:14px 0 0}
.form-inline label,label.sr-only{display:inline-block}

/* Buttons (legacy bridges). Primary = green; secondary = navy outline. */
.btn,button[type=submit],input[type=submit],.create-post-button a{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.02em;
  color:#fff;background:var(--nd-green);
  padding:10px 18px;border:0;border-radius:6px;width:auto;max-width:none;
  box-shadow:0 1px 0 oklch(1 0 0 / .25) inset, 0 1px 2px rgba(12,35,64,0.1);
  transition:background .12s ease;text-decoration:none;
}
.btn:hover,button[type=submit]:hover,input[type=submit]:hover,.create-post-button a:hover{
  background:var(--nd-green-hover);color:#fff;text-decoration:none;
}
.btn-default,.btn.btn-default,a.btn{
  background:#fff;color:var(--nd-navy);border:1px solid var(--line);box-shadow:none;
}
.btn-default:hover,a.btn:hover{background:var(--bg-muted);border-color:var(--line-strong);color:var(--nd-navy)}
.btn[disabled],button[disabled],input[disabled]{opacity:.55;cursor:not-allowed}

/* ── TABLES (forum index + sysop lists) ────────────────── */
.table,table.table{
  width:100%;border-collapse:collapse;background:var(--card-raised);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  font-family:var(--font-sans);font-size:13.5px;color:var(--ink-2);margin:10px 0 22px;
}
.table th,.index-table-header,.headerRow th{
  text-align:left;font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  background:var(--bg-sunk);padding:10px 14px;border-bottom:1px solid var(--line);
}
.table td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.indexRow:hover,.table tbody tr:hover{background:oklch(0.99 0.005 82)}
.table a{color:var(--nd-navy);font-weight:600}
.table a:hover{color:var(--accent-hover);text-decoration:none}

/* ── FORUM INDEX (categories list) ─────────────────────── */
.forum-cat{margin:28px 0 8px}
.forum-cat h2.title{margin:0 0 4px}
.forum-cat .basic{margin:0 0 10px;font-size:13.5px;color:var(--ink-3)}
.table td.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--nd-navy)}
.table .subtitle{margin:0}
.table .subtitle a{font-size:1.05rem}
.new-badge{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:9px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--nd-green);
  padding:2px 6px;border-radius:9999px;
  vertical-align:middle;position:relative;top:-1px;
  margin-left:4px;
}

/* ── LEGACY FORUM BAR / NAV (forum_main top strip) ─────── */
#forum-bar{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:18px 0 4px}
#forum-title h4.title{margin:0;font-size:1.6rem}
#forum-nav,#forum-nav-mobile{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#forum-nav span,#forum-nav-mobile span{display:inline-flex;align-items:center;gap:8px}
#forum-nav a,#forum-nav-mobile a{color:var(--ink-2)}
#forum-nav a:hover{color:var(--nd-navy);text-decoration:none}
.server-time{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);display:block;margin:8px 0 14px}
.create-post-button{margin:12px 0}
.boardPages{font-family:var(--font-sans);font-size:13px;color:var(--ink-3);padding:18px 0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.boardPages a{min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink-2);font-weight:600;padding:0 8px}
.boardPages a:hover{background:var(--bg-muted);text-decoration:none;color:var(--nd-navy)}

/* ── POST / REPLY FORM ─────────────────────────────────── */
#individualPost{margin:18px 0}
#individualPost .post{background:var(--card-raised);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:24px 26px}
#individualPost h4.newPost{font-family:var(--font-serif);font-size:1.05rem;color:var(--nd-navy);margin:22px 0 4px;border-top:1px solid var(--line-soft);padding-top:18px}
.postTips{display:block;font-family:var(--font-sans);font-size:11.5px;color:var(--ink-4);margin:2px 0 2px}

/* ── LEGACY POST DISPLAY (postHeader / postTools / post) ── */
.postHeader{background:var(--card-raised);border:1px solid var(--line);border-bottom:0;border-radius:var(--r-card) var(--r-card) 0 0;padding:18px 22px}
.postHeader h3.title{margin:0 0 6px;font-size:1.35rem}
.postHeader h6{margin:4px 0 0;font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--ink-3);text-transform:none;letter-spacing:.02em}
.forum-user-icon img{border-radius:50%;border:1px solid var(--line)}
.postTools{background:var(--bg-sunk);border:1px solid var(--line);border-bottom:0;padding:9px 22px;font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.02em}
.postTools a{color:var(--ink-2)}
.postTools a:hover{color:var(--nd-navy);text-decoration:none}
.post,.post-bottom-bar{background:var(--card-raised);border:1px solid var(--line);border-radius:0 0 var(--r-card) var(--r-card);padding:22px;font-family:var(--font-serif)}
.postContents{font-family:var(--font-serif);font-size:16px;line-height:1.7;color:var(--text)}
.postFooter{border-top:1px dashed var(--line);margin-top:16px;padding-top:12px;font-family:var(--font-sans);font-size:12.5px;font-style:italic;color:var(--ink-4)}
h4.replies,h3.replies{font-family:var(--font-serif);font-weight:600;font-size:1.3rem;color:var(--nd-navy);border-bottom:1px solid var(--line-strong);padding-bottom:12px;margin:26px 0 8px}
.viewallpost{font-family:var(--font-serif);font-size:15.5px;line-height:1.62;color:var(--text);padding:4px 0 8px}

/* ── MAIL ──────────────────────────────────────────────── */
.mail-message-header{background:var(--bg-sunk);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border-radius:var(--r-input) var(--r-input) 0 0;border:1px solid var(--line);overflow:hidden}
.mail-message{font-family:var(--font-sans);font-size:14px;color:var(--ink-2);border-bottom:1px solid var(--line-soft)}
.mail-message:nth-child(even){background:var(--bg-sunk)}
.mail-subject{font-weight:600;color:var(--nd-navy)}

/* ── LOGIN / AUTH compact form (legacy #forum-login) ───── */
#forum-login{margin:18px 0}
.form-inline .form-group{display:inline-block;margin:0 8px 8px 0}
.form-inline .form-control{display:inline-block;width:auto;margin:0}
.remember-me{margin-right:6px}

/* ============================================================
   LONG-TAIL BRIDGE
   Neutralizes leftover Bootstrap grid + inline bgcolor from
   legacy templates and provides centered wrappers + readable
   prose so auth/account/mail/search/profile pages sit on-system.
   ============================================================ */

/* Neutralize Bootstrap grid leftovers (no framework loaded now) */
.row{display:block}
[class^="col-"],[class*=" col-"]{width:auto;float:none;padding:0;margin:0}
.col-sm-offset-4,.col-md-offset-1,.col-md-offset-2,.col-md-offset-3,.col-lg-offset-3{margin-left:0}

/* Neutralize legacy inline bgcolor attributes so cells inherit the clean look */
.wrapcontent [bgcolor],.page [bgcolor]{background-color:transparent !important}

/* Centered wrapper for auth + account + search pages */
.auth-wrap,#register,.forum-search,#forum-logincontainer,#register-form,
.accountPage,#mail-headline{max-width:560px;margin:22px auto}
.forum-search{max-width:620px}
.accountPage{max-width:760px}

.headline{text-align:center;margin:8px 0 6px}
.headline h3,.headline .title{margin:0}

/* Login box */
.login-box{max-width:420px;margin:24px auto}
/* A message crossing a redirect is not necessarily a failure — a completed
   registration lands here too — so the tone is carried by the message rather
   than assumed from the element. */
.login-note,.login-error{
  border-radius:var(--r-input);
  font-family:var(--font-sans);font-size:13.5px;line-height:1.5;
  padding:10px 14px;
  margin-bottom:16px;
  text-align:center;
}
.login-note.is-error,.login-error{
  background:var(--danger-tint);
  border:1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  color:var(--danger);
}
.login-note.is-success{
  background:var(--success-tint);
  border:1px solid color-mix(in srgb, var(--success) 25%, transparent);
  color:var(--nd-green-ink, var(--success));
}
.login-box h3{font-family:var(--font-serif);font-weight:600;font-size:1.5rem;color:var(--nd-navy);margin:0 0 14px;text-align:center}
.login-box .form-group{margin:0 0 12px}
.login-box .checkbox{font-family:var(--font-sans);font-size:13px;color:var(--ink-2);margin:6px 0 14px}
.login-box .btn{width:100%;justify-content:center}

/* Account settings menu links */
.account-options{background:var(--nd-navy)!important;color:#fff!important}
.account-options *{color:#fff!important}

/* Search page */
.forum-search h3{font-family:var(--font-serif);font-weight:600;font-size:1.2rem;color:var(--nd-navy);margin:18px 0 6px}
.search-text{font-family:var(--font-sans);font-size:13.5px;color:var(--ink-2);margin:8px 0}

/* Mail folder nav + message list (bridged from retired forums.css) */
.mail-nav-container{max-width:560px;margin:0 auto;overflow:hidden}
#mail-headline h3{margin-top:12px}
.mail-messages{padding:.5em 0;position:relative}
.mail-message{text-align:left;padding:.6em 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:64px;cursor:pointer}
.mail-message-checkbox{padding:6px 10px 0 0;float:left}
.mail-message-linked{overflow:hidden}
.mail-subject{float:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Header row: the mono label is short, so without its own padding the
   select-all box sits flush against the panel border. */
.mail-message-header{display:flex;align-items:center;padding:8px 12px}
.mail-message-header .mail-message-checkbox{float:none;padding:0 10px 0 0}
.mail-message-header .mail-message-linked{flex:1;min-width:0}
/* One action per row: submit and its select share a baseline. The shared
   input rule gives selects a bottom margin, which is what knocked them
   out of line with the buttons. */
.mail-actions{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.mail-actions select{margin:0;width:auto;min-width:150px}
.mail-actions .btn{min-width:118px;justify-content:center}

/* Long-form prose (rules, help text) */
.prose{max-width:760px;margin:18px auto;font-family:var(--font-serif);font-size:16px;line-height:1.7;color:var(--text)}
.prose h3{font-family:var(--font-serif);font-weight:600;color:var(--nd-navy);font-size:1.25rem;margin:22px 0 8px}
.prose ol,.prose ul{padding-left:1.3em}
.prose ol li,.prose ul li{margin:0 0 10px}
.prose strong{color:var(--nd-navy)}

/* ══ ADMIN (sysop) ═══════════════════════════════════════
   The sysop templates are original bSpeak markup: wide tables built from
   <td> soup, sized with width="1%" and held open with nowrap, plus Bootstrap
   classes that stopped resolving when the redesign dropped Bootstrap.
   Rather than rewrite that markup, the legacy attributes are neutralised
   here and the tables restack as cards on a phone. ── */

/* Page shell. The admin pages are dense and utilitarian — full width, not
   the 560px reading measure the public auth pages use. */
.sysop-page{max-width:var(--page-max);margin:0 auto}
.sysop-page .headline{text-align:left;margin:18px 0 4px}
.sysop-title{
  font-family:var(--font-title);font-size:var(--type-section-title-size);
  color:var(--nd-navy);margin:0 0 2px;
}
.sysop-intro{font-size:13px;color:var(--ink-3);margin:0 0 14px;max-width:70ch}

/* Any wide table can scroll inside its own box above the stack breakpoint,
   so the page body itself never scrolls sideways. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 22px}
.table-wrap > .table{margin:0}

/* A full-width banner row inside a legacy table (the "Record of Suspensions"
   bars) — a <td colspan> acting as a caption. */
.table-banner td,td.table-banner{
  background:var(--bg-sunk) !important;
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  padding:10px 14px;
}

/* Legacy sizing attributes fight every responsive rule below. */
.table-stack td[width],.table-stack th[width]{width:auto}

@media (max-width:760px){
  /* ── Wide tables become one card per row ── */
  .table-stack,.table-stack tbody,.table-stack tr,.table-stack td{
    display:block;width:auto;
  }
  .table-stack{border:0;background:none;overflow:visible}
  .table-stack thead,.table-stack .table-head{display:none}

  .table-stack tr{
    background:var(--card-raised);
    border:1px solid var(--line);border-radius:var(--r-card);
    margin:0 0 12px;overflow:hidden;
  }
  .table-stack tr:hover{background:var(--card-raised)}

  /* Unlabelled cells (the 2-column "label above input" edit forms) simply
     stack; labelled ones become a label/value pair. */
  .table-stack td{
    display:block;
    padding:8px 14px;border-bottom:1px solid var(--line-soft);
    white-space:normal;text-align:left;
  }
  .table-stack td[data-label]{display:flex;align-items:baseline;gap:12px}
  .table-stack tr td:last-child{border-bottom:0}

  /* Form controls in a stacked edit form get the full card width. */
  .table-stack input[type=text],.table-stack input[type=password],
  .table-stack input[type=email],.table-stack input[type=date],
  .table-stack select,.table-stack textarea{width:100%;max-width:none}
  .table-stack input[type=checkbox],.table-stack input[type=radio]{width:auto}

  /* The column header, reinstated per cell. */
  .table-stack td[data-label]::before{
    content:attr(data-label);
    flex:0 0 40%;min-width:0;
    font-family:var(--font-mono);font-size:10px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  }

  /* Cells that carry their own meaning (action links, banners) take the
     full width instead of a label/value split. */
  .table-stack td.cell-actions{
    display:flex;flex-wrap:wrap;gap:8px;
    background:var(--bg-sunk);padding:10px 14px;
  }
  .table-stack td.cell-actions::before{content:none}
  .table-stack td.cell-full::before{content:none}
  .table-stack .table-banner td,.table-stack td.table-banner{
    display:block;background:var(--bg-sunk) !important;
  }
  .table-stack .table-banner td::before{content:none}

  /* An empty value would collapse to just a label, which reads as a bug. */
  .table-stack td:empty{display:none}

  /* Legacy attributes, overridden rather than removed from 21 templates. */
  .table-stack td[nowrap],.table-stack th[nowrap]{white-space:normal}
  .table-stack td[align],.table-stack th[align]{text-align:left}

  .table-wrap{overflow-x:visible}

  /* ── Filter / edit forms stack instead of sitting in a table row ── */
  .sysop-filters{display:flex;flex-wrap:wrap;gap:10px}
  .sysop-filters > *{flex:1 1 100%}
  .sysop-page .form-control{width:100%;max-width:none}
}

/* ── Filter bar (audit log) ── */
.sysop-filters{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;
  background:var(--card-raised);border:1px solid var(--line);
  border-radius:var(--r-card);padding:14px 16px;margin:0 0 16px;
}
.sysop-filters .field{display:flex;flex-direction:column;gap:4px;min-width:0}
.sysop-filters .field > label{
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.sysop-filters .field-actions{
  display:flex;gap:8px;align-items:flex-end;margin-left:auto;
}

/* ── Confirmation pages ── */
.confirm-card{
  max-width:520px;margin:28px auto;
  background:var(--card-raised);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow-card);
  padding:24px 26px;
}
.confirm-card h1{
  font-family:var(--font-title);font-size:1.25rem;
  color:var(--nd-navy);margin:0 0 10px;
}
.confirm-card p{margin:0 0 12px;font-size:14px;color:var(--ink-2);line-height:1.55}
.confirm-card .subject{font-weight:700;color:var(--danger)}
.confirm-card .note{
  font-size:13px;color:var(--ink-3);
  background:var(--bg-sunk);border-radius:var(--r-input);
  padding:10px 12px;margin:0 0 14px;
}
.confirm-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.confirm-actions .btn{flex:0 1 auto}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(.94);color:#fff}
.btn-quiet{background:transparent;border:1px solid var(--line-strong);color:var(--ink-2)}
.btn-quiet:hover{background:var(--bg-sunk);color:var(--ink)}

/* Status output from the action pages (plain sentences echoed in a loop). */
.sysop-status{
  background:var(--card-raised);border:1px solid var(--line);
  border-left:3px solid var(--nd-green);border-radius:var(--r-input);
  padding:14px 16px;margin:16px 0;font-size:14px;line-height:1.6;color:var(--ink-2);
}
.sysop-status.is-error{border-left-color:var(--danger)}

/* "Select / unselect all" sits beside the submit button on the queue pages. */
.check-all{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--ink-2);cursor:pointer;
}
.check-all input{margin:0}

/* ══ REGISTRATION ════════════════════════════════════════
   Honeypot field. Off-screen rather than display:none or visibility:hidden —
   the cheap scrapers explicitly skip those two, so hiding that way trains the
   trap to catch nobody. Kept focusable-but-unreachable (tabindex="-1" on the
   input) so a keyboard user never lands in it either. ── */
.nectar{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* The Turnstile widget ships its own iframe sizing; this just gives it the
   same rhythm as the fields around it. */
.cf-turnstile,.h-captcha{margin:2px 0 6px}