/* forum.css - the forum and thread pages

   PORTED VERBATIM FROM THE FIRST EDITION: every declaration
   below is the first edition's Forum.aspx and Thread.aspx <style> block, in
   its own order, with its own values. Nothing was redesigned, modernised or
   re-derived. Two mechanical changes were forced and neither is visible:

   1. TWO PAGES, ONE SHEET. The first edition carried its rules inline in each
      page, so .wrap could be 1080px on Forum and 820px on Thread, .crumb
      could have two paddings and .badge two margins. A shared sheet cannot,
      so each page's own container carries a class of its own (.forumwrap,
      .threadwrap) and only the three rules that genuinely differ are scoped
      to it. Everything else is written once.

   2. THE SHEET DOES NOT REACH THE CHROME. The first edition's blocks carried
      bare element selectors (section, label, textarea, input[type=text],
      footer) which, inline on a page, restyled that page's master chrome as
      well. Here they are scoped under the page container, so the forum's form
      styling cannot reach the site header, the site footer or the account
      nav. The content column looks identical; the chrome is left alone.

   DUPLICATES COLLAPSED, and this is the centralization rule doing its job:
   the two first edition blocks each carried their own copy of .crumb a,
   .badge.lock, .modbar, .modtag, .modform, .modbtn and .modbtn:hover, with
   identical values. There is one copy of each here. The moderation bar in
   particular existed twice and would have had to be fixed twice.

   ACCESSIBILITY. Every size is rem or em, as the first edition's already
   were, so the A-/A+ control moves all of it. .thread is a flex row whose
   text member carries min-width:0, and every other flex row wraps. No
   overflow-x:hidden anywhere.
*/

/* ============================================================
   The two page containers. The first edition's .wrap, once per page.
   ============================================================ */
.forumwrap{max-width:1080px;margin:0 auto;padding:0 20px}
.threadwrap{max-width:820px;margin:0 auto;padding:0 20px}

/* ============================================================
   Forum: the hero
   ============================================================ */
.forumwrap .hero{padding:44px 0 8px}
.forumwrap .eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.22em;font-size:.7rem;font-weight:600;margin-bottom:12px}
.forumwrap .hero h2{font-family:var(--serif);font-size:2.2rem;line-height:1.1;margin:0 0 10px;font-weight:600}
.forumwrap .hero p{color:var(--muted);max-width:70ch;margin:0;font-size:1rem}
.forumwrap .who{margin:16px 0 0;color:var(--faint);font-size:.86rem}
.forumwrap .who a{color:var(--gold-soft);text-decoration:none}
.forumwrap .who a:hover{color:var(--gold)}
.forumwrap section{padding:26px 0 10px}

/* ============================================================
   Forum: a room and its threads
   ============================================================ */
.cat{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--edge);border-radius:16px;padding:18px 18px 6px;margin-bottom:20px}
.cathd{display:flex;align-items:baseline;gap:12px;margin:0 2px 6px;flex-wrap:wrap}
.cathd h3{font-family:var(--serif);font-size:1.3rem;margin:0;font-weight:600}
.cathd p{color:var(--faint);font-size:.86rem;margin:0;flex:1 1 240px}
.newlink{margin-left:auto;font-size:.8rem;color:#1a1508;background:var(--gold);border-radius:9px;padding:7px 13px;text-decoration:none;font-weight:650;white-space:nowrap}
.newlink:hover{background:var(--gold-soft)}
.thread{display:flex;align-items:center;gap:12px;padding:13px 8px;border-top:1px solid var(--edge)}
.thread .main{min-width:0;flex:1 1 auto}
.thread .tt{font-family:var(--serif);font-size:1.06rem;text-decoration:none;color:var(--ink)}
.thread .tt:hover{color:var(--gold-soft)}
.thread .meta{color:var(--faint);font-size:.8rem;margin-top:3px}
.thread .nums{text-align:right;color:var(--muted);font-size:.8rem;white-space:nowrap;flex:0 0 auto}
.thread .nums b{color:var(--ink);font-family:var(--serif)}
.empty{color:var(--faint);font-style:italic;padding:12px 8px;border-top:1px solid var(--edge)}
.catlink{color:inherit;text-decoration:none}
.catlink:hover{color:var(--gold-soft)}

/* ============================================================
   Badges. Shared shape; the two pages differ only in which side the
   badge sits on, which is the one rule that has to be scoped.
   ============================================================ */
.badge{display:inline-block;font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;border-radius:99px;padding:1px 7px;vertical-align:middle}
.forumwrap .badge{margin-right:6px}
.threadwrap .badge{margin-left:8px}
.badge.pin{color:var(--gold);border:1px solid var(--gold)}
.badge.lock{color:var(--dark-c);border:1px solid var(--dark-c);background:var(--dark-bg)}

/* ============================================================
   Crumbline. Same colours on both pages; only the padding differs.
   ============================================================ */
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--gold-soft)}
.forumwrap .crumb{padding:6px 2px 10px;color:var(--faint);font-size:.84rem}
.threadwrap .crumb{padding:22px 0 4px;color:var(--faint);font-size:.84rem}

/* ============================================================
   Forum: toolbar, search boxes, sort tabs, pager
   ============================================================ */
.toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:8px 0 8px}
.searchform,.catsearch{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.catsearch{margin:0 2px 8px;padding:2px 0}
input.search{background:var(--ground);border:1px solid var(--edge2);color:var(--ink);border-radius:9px;padding:9px 11px;font-size:.9rem;font-family:var(--sans);min-width:220px}
input.search:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.bodytoggle{color:var(--faint);font-size:.78rem;display:flex;align-items:center;gap:5px;cursor:pointer}
.toollinks{margin-left:auto;display:flex;gap:4px}
.toollinks a{font-size:.82rem;color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:9px}
.toollinks a:hover{color:var(--ink);background:var(--panel2)}
.tabs{display:flex;gap:4px;margin:2px 2px 4px;flex-wrap:wrap}
.tab{font-size:.82rem;color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:9px;border:1px solid transparent}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);background:var(--panel2);border-color:var(--edge)}
.searchmeta{color:var(--faint);font-size:.84rem;padding:6px 2px 2px}
.morerow{border-top:1px solid var(--edge);padding:12px 8px}
.morelink{color:var(--gold-soft);text-decoration:none;font-size:.86rem}
.morelink:hover{color:var(--gold)}
.catpill{display:inline-block;font-size:.66rem;color:var(--muted);border:1px solid var(--edge2);border-radius:99px;padding:1px 8px;margin-left:6px;text-decoration:none;vertical-align:middle}
.catpill:hover{color:var(--ink);border-color:var(--gold)}
.pager{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;margin:18px 0 8px}
.pager .pg{font-size:.85rem;color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:9px;border:1px solid var(--edge)}
.pager .pg:hover{color:var(--ink);border-color:var(--edge2)}
.pager .pg.on{color:#1a1508;background:var(--gold);border-color:var(--gold);font-weight:650}

/* ============================================================
   Moderation controls. ONE copy, used by both pages; the first
   edition carried this block twice.
   ============================================================ */
.modbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
.threadwrap .modbar{margin-top:12px}
.modtag{font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--dark-c);border:1px solid var(--dark-c);border-radius:99px;padding:1px 7px}
.modform{display:inline;margin:0}
.post .ph .modform{margin-left:8px}
.modbtn{background:var(--panel);color:var(--muted);border:1px solid var(--edge2);border-radius:8px;padding:6px 11px;font-size:.78rem;cursor:pointer;font-family:var(--sans)}
.modbtn:hover{color:var(--ink);border-color:var(--gold);background:var(--panel2)}

/* ============================================================
   Thread: the head and the posts
   ============================================================ */
.thead{padding:6px 0 14px}
.thead h2{font-family:var(--serif);font-size:2rem;line-height:1.12;margin:0 0 8px;font-weight:600}
@media (max-width:560px){.thead h2{font-size:1.6rem}}
.thead .sub{color:var(--faint);font-size:.86rem}
.post{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--edge);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.post.op{border-color:var(--edge2)}
.post .ph{display:flex;align-items:baseline;gap:10px;margin-bottom:9px;padding-bottom:9px;border-bottom:1px solid var(--edge);flex-wrap:wrap}
.post .who{font-family:var(--serif);font-weight:600;color:var(--gold-soft)}
.post .when{color:var(--faint);font-size:.8rem;margin-left:auto}
.post .body{color:var(--ink);font-size:.98rem;white-space:normal;word-wrap:break-word}
/* The Report control added per post. Reuses .threadwrap
   textarea below this block for colour, border and font family; only the
   layout and the compact sizing are specific to sitting under a post
   rather than inside the full-width reply card. A textarea rather than a
   one-line input, deliberately: see the comment on Thread.aspx.vb's
   ReportBlock for why a one-line field on this shared-form page is unsafe.
   min-width:0 on the shrinkable field is the accessibility rule for a flex
   row of text, so the field shrinks rather than pushing the button off
   narrow viewports. */
.reportbox{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}
/* .post .reportbox textarea, not .reportbox textarea alone, because
   .threadwrap textarea{min-height:130px} below sits LATER in this file: at
   equal specificity the later rule wins regardless of source order intent,
   so the compact box was inheriting the full reply card's height until this
   was raised to two classes plus the element, which outranks one class plus
   the element however the rules are ordered. */
.post .reportbox textarea{flex:1 1 220px;min-width:0;min-height:0;padding:8px 10px;font-size:.85rem;line-height:1.4}
.reportbox .modbtn{flex:0 0 auto}

/* ============================================================
   Thread: the write forms and the notices
   ============================================================ */
.threadwrap .card{background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--edge);border-radius:16px;padding:20px;margin:8px 0 40px}
.threadwrap .card h3{font-family:var(--serif);margin:0 0 12px;font-size:1.2rem;font-weight:600}
.threadwrap .fld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.threadwrap label{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--faint)}
.threadwrap input[type=text],.threadwrap textarea{background:var(--ground);border:1px solid var(--edge2);color:var(--ink);border-radius:10px;padding:11px 12px;font-size:1rem;font-family:var(--sans)}
.threadwrap textarea{min-height:130px;resize:vertical;line-height:1.5}
.threadwrap .btn{background:var(--gold);color:#1a1508;border:none;border-radius:10px;padding:12px 20px;font-weight:700;cursor:pointer;font-size:.95rem}
.notice{background:var(--panel);border:1px solid var(--edge);border-radius:14px;padding:16px 18px;color:var(--muted);margin:8px 0 40px}
.notice a{color:var(--gold-soft);text-decoration:none;font-weight:650}
.notice a:hover{color:var(--gold)}
.err{color:var(--dark-c);font-size:.86rem;margin:0 0 12px}

/* The first edition hides the reply/view counts on a narrow screen rather
   than wrapping them under the title. Ported as it stands. */
@media(max-width:620px){.thread .nums{display:none}}