/* ==========================================================================
   GXA — genx.forum
   ONE stylesheet. It must be the LAST one the theme loads.
   --------------------------------------------------------------------------
   This file is the whole board: what used to be global.css followed by what
   used to be gxa-responsive.css, merged, with the duplicate rules removed and
   a final section (33) that answers MyBB's own stylesheets.

   IT GOES IN THE LAST SLOT, and global.css is reduced to a pointer. That is
   not housekeeping. Sean's pages loaded

       global.css -> css3.css -> color_black.css -> gxa-responsive.css

   with two STOCK MyBB stylesheets sitting between the theme and the patch,
   restyling .tborder, .thead, a.button, .post_author, .pagination, .pollbar
   and div.error on their way past. Everything written in global.css was a
   suggestion. Only the patch file ever took effect. One file, loading last,
   is what makes the rest of this stylesheet mean anything.
   ========================================================================== */

/* ==========================================================================
   GXA — genx.forum
   Complete stylesheet. Replaces global.css.
   MyBB 1.8.40 · dark and light · mobile-first
   --------------------------------------------------------------------------
   Built against MyBB 1.8.40's own templates (the mybb_1840 tag). Every colour
   comes from a token in section 1; nothing below it hardcodes one except the
   gold User CP bar, which is a fixed object in both themes and says so.

   CONTENTS
     1  Tokens (dark + light, and the legacy aliases five pasted blocks need)
     2  Base            3  Type           4  Links          5  Buttons
     6  Forms           7  Tables         8  Status
     9  Shell          10  Posts         11  Quotes/code   12  Pagination
    13  Page-bottom tools              14  Quick Reply     15  Posting form
    16  Narrow (reading)
    17  Forum status   18  Forum rows    19  Inline moderation
    20  Legends/polls/attachments/reputation            21  Popups
    22  Narrow (lists)
    23  Header         24  Drawer        25  Footer        26  User CP
    27  Portal         28  Chat strip    29  Shoutbox      30  Overlays
    31  User CP icons

   It needs three footer-template blocks to do their half of the work: the
   slim header, the User CP toggles, and the theme toggle. They are additive
   and documented in their own files.
   ========================================================================== */

/* ==========================================================================
   GXA — FOUNDATION
   The token layer and the primitives everything else is built from.
   MyBB 1.8.40 · genx.forum
   --------------------------------------------------------------------------
   This is step one of replacing global.css, not another section appended to
   it. It is deliberately reviewable on its own: tokens, type, links, buttons,
   forms and table furniture, and nothing page-specific. Once this is agreed,
   the rest of the stylesheet gets rebuilt on top of it.

   THE ONE IDEA THAT MAKES A LIGHT THEME CHEAP
     Your chat strip, arcade strip, banner, User CP toggles and header block
     all reference var(--gold), var(--ink), var(--cream) directly — 80-odd
     references across five pasted blocks. Rather than rewrite them, the
     legacy names are kept and ALIASED onto the new semantic tokens at the
     bottom of section 1. Switch theme and all five follow, untouched.

     It also means --gold has to be legible as TEXT, because that is how those
     blocks use it (.gxu-sub, .gxaq-ttl, .gxc-nm are all gold text) as well as
     for borders. So --gold aliases to the text-safe gold, never the fill one.

   COLOUR WAS MEASURED, NOT PICKED
     Every pair below was run through a WCAG contrast check in both themes.
     The result that shaped the palette: #C9922E, your gold, is 2.40:1 on warm
     paper — it fails as body text AND as an indicator. So the brand splits
     three ways rather than being one colour used everywhere:

       --brand       fills and indicators, >= 3:1 on the dimmest surface it
                     sits on (forum status dots live on raised rows, not the
                     page, so that is what it was measured against)
       --brand-ink   anything that is read as text, >= 4.5:1
       --brand-deep  underlines, shadows, pressed states

     In dark mode --brand and --brand-ink are both #C9922E, so your current
     look is unchanged. Only light mode needed the darker golds.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

/* The [data-gxa-theme] scopes alongside :root exist so a preview page can show
   both themes at once on one screen, rendering THIS file rather than a copy of
   it — a preview built from a second set of values drifts from what ships. On
   the live forum nothing carries that attribute and only :root applies. */
:root,
[data-gxa-theme] {
	/* ---- type ---- */
	--display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
	--body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--mono:    'SF Mono', Consolas, Menlo, monospace;

	/* ---- measure ---- */
	--shell: 1180px;
	--read:  72ch;              /* post bodies; longer lines are harder to scan */

	/* ---- spacing ----
	   A 4px scale. Every margin and padding below comes from it, which is most
	   of what stops a layout drifting out of rhythm. */
	--s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
	--s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

	--radius:    3px;
	--radius-lg: 6px;

	/* ---- dark, the default ---- */
	--bg:        #0C0A09;       /* page */
	--bg-2:      #16120F;       /* cards, rows */
	--bg-3:      #1E1917;       /* raised, alternate rows */
	--bg-4:      #221C19;       /* hover */
	--bg-sunk:   #0C0A09;       /* inputs */

	--fg:        #EDE6D8;
	--fg-2:      rgba(237, 230, 216, 0.68);
	--fg-3:      rgba(237, 230, 216, 0.42);

	--line:      rgba(237, 230, 216, 0.13);
	--line-2:    rgba(237, 230, 216, 0.26);

	--brand:      #C9922E;
	--brand-ink:  #C9922E;
	--brand-deep: #8A6116;

	--accent:     #B23A2B;      /* the primary action, and only that */
	--accent-2:   #7E2317;
	--on-accent:  #F6EEE2;

	--ok:    #9CC46A;
	--warn:  #D9903F;
	--bad:   #E8836F;

	--focus: #C9922E;

	--shadow: 0 8px 24px rgba(0, 0, 0, 0.45);

	/* Checkboxes, radios, scrollbars and the select menu are drawn by the
	   browser, not by this file. Without this they stay in light dress — which
	   is the white checkbox sitting in the middle of every post header. */
	color-scheme: dark;

	/* Sampled from the logo. Fixed in both themes — it is artwork, not UI. */
	--logo-red:    #C4342B;
	--logo-red-dk: #9B2820;
	--logo-orange: #E8791C;
	--logo-amber:  #EF9A1E;
}

/* ---------- light ----------
   Warm paper rather than white: the identity here is a 1980s arcade, and
   #FFFFFF reads as a tax form. */
:root[data-theme="light"],
[data-gxa-theme="light"] {
	--bg:        #F4EFE4;
	--bg-2:      #FFFDF8;
	--bg-3:      #EBE3D3;
	--bg-4:      #E3D9C5;
	--bg-sunk:   #FFFFFF;

	--fg:        #1C1713;
	--fg-2:      rgba(28, 23, 19, 0.72);
	--fg-3:      rgba(28, 23, 19, 0.50);

	--line:      rgba(28, 23, 19, 0.14);
	--line-2:    rgba(28, 23, 19, 0.28);

	--brand:      #A87718;      /* 3.10:1 on the dimmest row it appears on */
	--brand-ink:  #7A5410;      /* 5.30:1 as text on that same row */
	--brand-deep: #5E3F0A;

	--accent:     #A8291C;
	--accent-2:   #8A1F13;
	--on-accent:  #FFF8EE;

	--ok:    #4E7A24;
	--warn:  #8A5A10;
	--bad:   #A32B18;

	--focus: #7A5410;

	--shadow: 0 8px 24px rgba(28, 23, 19, 0.16);
	color-scheme: light;
}

/* Follow the device unless the member has chosen. The :not() is what makes a
   manual choice stick — without it, someone on a light phone who picked dark
   would be overruled by their own OS on every page load.

   If you would rather everyone start dark regardless, delete this one block;
   the toggle keeps working. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--bg: #F4EFE4;  --bg-2: #FFFDF8;  --bg-3: #EBE3D3;
		--bg-4: #E3D9C5; --bg-sunk: #FFFFFF;
		--fg: #1C1713;
		--fg-2: rgba(28, 23, 19, 0.72);
		--fg-3: rgba(28, 23, 19, 0.50);
		--line: rgba(28, 23, 19, 0.14);
		--line-2: rgba(28, 23, 19, 0.28);
		--brand: #A87718;  --brand-ink: #7A5410;  --brand-deep: #5E3F0A;
		--accent: #A8291C; --accent-2: #8A1F13;   --on-accent: #FFF8EE;
		--ok: #4E7A24;     --warn: #8A5A10;       --bad: #A32B18;
		--focus: #7A5410;
		--shadow: 0 8px 24px rgba(28, 23, 19, 0.16);
		color-scheme: light;
	}
}


/* Scoped panels need the surface and text applied too, since body does it on
   the live site. */
[data-gxa-theme] { background: var(--bg); color: var(--fg); }


/* ---------- legacy aliases ------------------------------------------------
   DO NOT DELETE. The arcade strip, chat strip, banner, User CP toggles and
   header block all resolve their colours through these names. Aliasing them
   is what gives those five blocks a light theme without touching a line of
   any of them.

   --gold points at the TEXT gold, not the fill gold, because that is how
   those blocks use it: .gxu-sub, .gxaq-ttl and .gxc-nm are all gold text. */
:root,
[data-gxa-theme] {
	--ink:         var(--bg);
	--charcoal:    var(--bg-2);
	--raised:      var(--bg-3);
	--raised-alt:  var(--bg-4);
	--cream:       var(--fg);
	--cream-dim:   var(--fg-2);
	--cream-faint: var(--fg-3);
	--rule:        var(--line);
	--rule-strong: var(--line-2);
	--gold:        var(--brand-ink);
	--gold-deep:   var(--brand-deep);
	--red:         var(--accent);
	--red-deep:    var(--accent-2);
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
	/* The theme flip should feel like a light going on, not a page reload —
	   but never while someone is reading, so it is opt-in per element below
	   rather than a blanket transition on everything. */
	transition: background-color .18s ease, color .18s ease;
}

img { max-width: 100%; height: auto; border: 0; }

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

hr {
	border: 0;
	height: 1px;
	margin: var(--s5) 0;
	background: var(--line);
}

::selection { background: var(--brand); color: var(--bg); }


/* ==========================================================================
   3. TYPE
   --------------------------------------------------------------------------
   One scale. The old sheet set font sizes in forty places and they did not
   agree; these are the only sizes the rebuilt theme uses.
   ========================================================================== */

h1, h2, h3, h4 {
	margin: 0 0 var(--s3);
	font-family: var(--display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--fg);
}

h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

small, .smalltext { font-size: 13px; color: var(--fg-2); }

.largetext {
	font-family: var(--display);
	font-size: 21px;
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* A section label — the uppercase gold-rule heading the forum uses above
   every table. Flatter than before: the rule is a hairline, not a 2px slab. */
.gxa-eyebrow {
	font-family: var(--display);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-ink);
}


/* ==========================================================================
   4. LINKS
   --------------------------------------------------------------------------
   The old sheet underlined every link with a 1px border, including the ones
   wrapping whole rows and images — which is where the stray line under the
   arcade strip came from. Underline is for links inside running text only.
   ========================================================================== */

a {
	color: var(--fg);
	text-decoration: none;
	transition: color .14s ease;
}
a:hover, a:active { color: var(--brand-ink); }

/* Links in prose keep their underline, because in a paragraph colour alone is
   not enough to tell you something is a link. */
.post_body a,
.gxa-prose a {
	color: var(--brand-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}


/* ==========================================================================
   5. BUTTONS
   --------------------------------------------------------------------------
   Three levels and no more. The screenshots showed four GO buttons on one
   screen, all identical red, none of them the main thing on the page — which
   is the same as having no hierarchy at all.

     .gxa-btn            quiet. Borders only. The default for anything that
                         is not the one action the page is for.
     .gxa-btn--primary   solid. ONE per view. Post Thread, New Reply, Send.
     .gxa-btn--ghost     no border until hovered. Tool rows, inline controls.

   Flatter than the old theme: the 3px bevel shadows are gone, and so are the
   gradients. Depth now comes from the border and the fill.
   ========================================================================== */

button,
input[type="submit"],
input[type="button"],
input.button,
a.button,
.gxa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	min-height: 44px;
	padding: 0 var(--s4);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	background: var(--bg-3);
	color: var(--fg);
	font-family: var(--display);
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .14s ease, border-color .14s ease, color .14s ease;
	-webkit-tap-highlight-color: transparent;
}

button:hover,
input.button:hover,
a.button:hover,
.gxa-btn:hover {
	border-color: var(--brand);
	color: var(--brand-ink);
	background: var(--bg-4);
}

button:disabled,
input.button:disabled,
.gxa-btn:disabled,
.gxa-btn[aria-disabled="true"] {
	opacity: .45;
	cursor: default;
	pointer-events: none;
}

/* ---- the one action ---- */
.gxa-btn--primary,
input[name="submit"],
input.button.submit_button {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}
.gxa-btn--primary:hover,
input[name="submit"]:hover,
input.button.submit_button:hover {
	background: var(--accent-2);
	border-color: var(--accent-2);
	color: var(--on-accent);
}

/* ---- preview and draft keep their old meaning, quieter ---- */
input[name="previewpost"] {
	background: transparent;
	border-color: var(--brand);
	color: var(--brand-ink);
}
input[name="previewpost"]:hover { background: var(--bg-4); }

input[name="savedraft"] {
	background: transparent;
	border-color: var(--line-2);
	color: var(--fg-2);
}

/* ---- ghost ---- */
.gxa-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--fg-2);
}
.gxa-btn--ghost:hover { background: var(--bg-3); border-color: var(--line); }

/* ---- small, for tool rows and postbit controls ---- */
.gxa-btn--sm {
	min-height: 34px;
	padding: 0 var(--s3);
	font-family: var(--body);
	font-size: 12.5px;
	letter-spacing: 0.02em;
	text-transform: none;
}


/* ==========================================================================
   6. FORMS
   --------------------------------------------------------------------------
   The clipped selects in the screenshot — "Sort by: La", "Order: Des",
   "From: The" — are three fixed-width controls in a row too narrow to hold
   them. A select cannot ellipsis its own text, so the only fix is to stop
   forcing them side by side. .gxa-controls below wraps instead.
   ========================================================================== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input.textbox,
textarea {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 10px var(--s3);
	background: var(--bg-sunk);
	color: var(--fg);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	font-family: var(--body);
	font-size: 16px;          /* under 16px, iOS zooms the page on focus */
	line-height: 1.4;
	outline: 0;
	transition: border-color .14s ease, box-shadow .14s ease;
}

textarea { min-height: 160px; line-height: 1.6; resize: vertical; }

input:focus, textarea:focus, select:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

::placeholder { color: var(--fg-3); opacity: 1; }

/* A select sizes to its own longest option, NOT to 100%. forumdisplay_forumsort
   puts three of them in one <td class="tfoot">; at 100% each that is 300% of
   the cell, and the second and third run off the edge. Only the containers
   that are known to hold one select stretch it. */
select {
	width: auto;
	max-width: 100%;
	min-height: 44px;
	padding: 10px var(--s3);
	padding-right: var(--s6);
	background: var(--bg-sunk);
	color: var(--fg);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	font-family: var(--body);
	font-size: 16px;
	outline: 0;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
	                  linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	-webkit-appearance: none;
	appearance: none;
}

label { display: inline-block; margin-bottom: var(--s1); color: var(--fg-2); font-size: 14px; }

/* A row of controls that wraps rather than clipping. Each one gets room for
   its longest option; below that they stack. */
.gxa-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	margin: var(--s4) 0;
}
.gxa-controls > * { flex: 1 1 170px; min-width: 0; }
.gxa-controls > button,
.gxa-controls > input[type="submit"],
.gxa-controls > .gxa-btn { flex: 0 0 auto; }

/* Checkboxes and radios big enough to hit */
input[type="checkbox"],
input[type="radio"] {
	width: 18px; height: 18px;
	min-height: 0;
	margin: 0 var(--s2) 0 0;
	accent-color: var(--brand);
	vertical-align: -3px;
}

fieldset {
	margin: 0 0 var(--s4);
	padding: var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
legend {
	padding: 0 var(--s2);
	font-family: var(--display);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fg-2);
}


/* ==========================================================================
   7. TABLE FURNITURE
   --------------------------------------------------------------------------
   MyBB builds nearly every page out of .tborder / .thead / .tcat / .trow1.
   Flatter than before: hairlines instead of the 2px gold slab, and no
   alternating row fill — the rule between rows is enough, and the stripe was
   doing most of the work of making the old theme feel busy.
   ========================================================================== */

table { width: 100%; border-collapse: collapse; color: var(--fg); font-size: 15px; }

.tborder {
	width: 100%;
	margin: 0 0 var(--s5);
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);

	/* `auto`, never `hidden`. Both make the radius clip the first and last
	   rows; only `hidden` also throws away anything too wide to fit, with no
	   scrollbar and no sign that it happened. That is what made the private
	   message list render as an empty box on a phone — six columns of messages
	   in a container that could not show them. See section 22.6. */
	overflow: auto;
}

.tfixed { table-layout: fixed; word-wrap: break-word; }

.thead {
	padding: var(--s3) var(--s4);
	background: var(--bg-2);
	border-bottom: 1px solid var(--brand);
	color: var(--fg);
	font-family: var(--display);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.thead a { color: var(--fg); }
.thead a:hover { color: var(--brand-ink); }

.tcat {
	padding: var(--s2) var(--s4);
	background: var(--bg-3);
	border-bottom: 1px solid var(--line);
	color: var(--fg-2);
	font-size: 13px;
	letter-spacing: 0.04em;
}

.trow1, .trow2 {
	padding: var(--s4);
	background: var(--bg-2);
	border: 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
/* Deliberately the same. See the section note. */
.trow2 { background: var(--bg-2); }

tr:last-child > .trow1,
tr:last-child > .trow2 { border-bottom: 0; }

.trow_shaded { background: color-mix(in srgb, var(--accent) 14%, var(--bg-2)); }
.trow_selected, tr.trow_selected td {
	background: color-mix(in srgb, var(--brand) 15%, var(--bg-2));
}

.tfoot {
	padding: var(--s3) var(--s4);
	background: var(--bg-2);
	border-top: 1px solid var(--line);
	color: var(--fg-2);
	font-size: 14px;
}

.no_bottom_border { border-bottom: 0; }


/* ==========================================================================
   8. STATUS AND MESSAGES
   ========================================================================== */

.gxa-note,
div.error,
.pm_alert,
.red_alert {
	margin: 0 0 var(--s5);
	padding: var(--s3) var(--s4);
	border: 0;
	border-left: 3px solid var(--brand);
	border-radius: 0;
	background: color-mix(in srgb, var(--brand) 12%, var(--bg-2));
	color: var(--fg);
	font-size: 15px;
}
.red_alert {
	border-left-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
}

.success_message { color: var(--ok); }
.error_message   { color: var(--bad); }

.online  { color: var(--ok); }
.offline { color: var(--fg-3); }


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


/* ==========================================================================
   GXA — READING AND REPLYING
   Thread view, postbit, the page-bottom tool rows, and the reply form.
   Loads after gxa-foundation.css. Every colour here comes from its tokens.
   --------------------------------------------------------------------------
   Written against MyBB 1.8.40's own templates (the mybb_1840 tag), not
   against a rendered page. Worth saying because the templates I had been
   using earlier in this project were the 1.6-era Master Style — which is why
   its footer never matched yours. The 1.8.40 set does, exactly.

   The two screenshots came down to three things:

     DEAD SPACE   MyBB separates every tool block with <br />. Four blocks at
                  the bottom of a forum came to roughly 400px of nothing.
     NO HIERARCHY Four identical red GO buttons on one screen, none of them
                  the action the page is for.
     WRONG ORDER  Quick Reply puts its label and option checkboxes in a
                  <td width="22%"> beside the textarea's cell. Stack that on a
                  phone and the options come first — you tick Signature and
                  Close Thread before you have written anything.
   ========================================================================== */


/* ==========================================================================
   9. SHELL
   ========================================================================== */

#container { width: 100%; min-width: 0; background: var(--bg); overflow-x: hidden; }

.wrapper {
	width: 100%;
	min-width: 0;
	max-width: var(--shell);
	margin: 0 auto;
	padding-inline: var(--s4);
}

#content { padding-block: var(--s5) var(--s7); background: transparent; }

.navigation {
	margin-bottom: var(--s4);
	color: var(--fg-2);
	font-size: 13.5px;
}
.navigation a { color: var(--fg-2); }
.navigation a:hover { color: var(--brand-ink); }
.navigation .active { color: var(--fg); font-weight: 500; }

.float_left  { float: left; }
.float_right { float: right; }
.clear { clear: both; }
.hidden { display: none; }


/* ==========================================================================
   10. POSTS
   --------------------------------------------------------------------------
   One post is one card. The old theme drew a border round the post, another
   round the author column, a third round the controls, and alternated the row
   fill on top — four edges where one does the job.

   Layout is a grid rather than the float pair MyBB ships: author rail then
   body on desktop, author strip then body on a phone. Grid is what lets the
   rail collapse to a horizontal strip without the body needing to know.
   ========================================================================== */

.post {
	margin: 0 0 var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-2);
	overflow: hidden;
}

.post.classic { display: grid; grid-template-columns: 190px minmax(0, 1fr); }

.post .post_author {
	padding: var(--s4);
	background: var(--bg-3);
	border: 0;
	border-right: 1px solid var(--line);
	text-align: center;
}

.post .post_author .author_information { padding: 0; }
.post .post_author .largetext { font-size: 16px; }
.post .post_author a { color: var(--brand-ink); }

.post .post_author .author_avatar { margin: 0 0 var(--s2); }
.post .post_author .author_avatar img {
	width: 56px; height: 56px;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--line-2);
	background: var(--bg-2);
}

.post .post_author .author_statistics {
	margin-top: var(--s3);
	padding-top: var(--s3);
	border-top: 1px solid var(--line);
	color: var(--fg-3);
	font-size: 12px;
	line-height: 1.6;
}

.post .post_content { min-width: 0; padding: var(--s4); background: var(--bg-2); }

.post .post_head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s2);
	margin: 0 0 var(--s3);
	padding: 0 0 var(--s2);
	border-bottom: 1px solid var(--line);
	color: var(--fg-3);
	font-size: 12px;
}
.post .post_head .post_date { color: var(--fg-3); }
.post .post_head a { color: var(--fg-3); }

.post_body {
	max-width: var(--read);
	padding: 0;
	font-size: 16px;
	line-height: 1.7;
	overflow-wrap: break-word;
}
.post_body img { max-width: 100%; height: auto; }

/* A YouTube embed is a fixed-width iframe in the post source. Without this it
   keeps its 560px and runs off a phone screen. aspect-ratio keeps the frame
   the right shape once the width is capped. */
.post_body iframe,
.post_body embed,
.post_body object,
.post_body video {
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}
.post_body table { max-width: 100%; }
.post_body pre { overflow-x: auto; }

.post_content .signature {
	margin-top: var(--s4);
	padding-top: var(--s3);
	border-top: 1px solid var(--line);
	color: var(--fg-3);
	font-size: 13.5px;
}

.post .post_meta { margin-top: var(--s3); color: var(--fg-3); font-size: 12px; }

/* ---- controls ----
   Quiet by default. Seven identical bordered buttons across two ragged rows
   was the thread screenshot; these sit on one line, wrap cleanly, and only
   show their edges on hover. */
.post_controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	grid-column: 1 / -1;
	padding: var(--s2) var(--s4);
	background: var(--bg-3);
	border-top: 1px solid var(--line);
}
.post_controls .postbit_buttons { display: flex; flex-wrap: wrap; gap: var(--s1); float: none; }
.post_controls .post_management_buttons { margin-left: auto; }

.postbit_buttons > a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 var(--s3);
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: transparent;
	color: var(--fg-2);
	font-size: 12.5px;
	white-space: nowrap;
}
.postbit_buttons > a:hover {
	border-color: var(--line-2);
	background: var(--bg-4);
	color: var(--brand-ink);
}
.postbit_buttons a span { padding-left: 0; background-image: none !important; }

.post.unapproved_post { background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); }
.post.deleted_post    { background: color-mix(in srgb, var(--accent) 16%, var(--bg-2)); }


/* ==========================================================================
   10.9  THE THREAD, AS CARDS
   --------------------------------------------------------------------------
   The second half of the look Sean asked for: a post reads as a card with a
   byline, not as a row in a table with a sidebar of statistics.

   MyBB's postbit_classic puts the author in a rail down the left. Section 16
   already turns that rail into a strip across the top on a phone; this makes
   the strip read like a byline — @handle in gold, then the quiet details —
   and gives the card its edges.
   ========================================================================== */

.post {
	margin-bottom: var(--s4);
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* The handle. Generated, so nothing in the database changes and a rename
   still reads correctly. */
.post .post_author .author_information strong a::before {
	content: "@";
	opacity: .55;
}
.post .post_author .author_information strong a {
	color: var(--brand-ink);
	border-bottom: 0;
	font-weight: 700;
}

/* Usertitle, stars and group image are the 2009 forum's status furniture.
   They stay on desktop, where there is a rail for them, and go on a phone,
   where they push the first line of the post below the fold. */
@media (max-width: 760px) {
	.post .post_author .author_information .smalltext { display: none; }
	.post .post_author { gap: var(--s2); }
	.post .post_head { font-size: 12.5px; color: var(--fg-3); }
	.post_body { font-size: 16px; line-height: 1.6; }
}

/* ---- the controls ----
   MyBB draws Quote, Edit, Report and the rest as a row of buttons, which
   gives a thread as many loud rectangles as it has posts. Sean's reference
   has them as small text links under the post, which is the right weight:
   they are for the one person who needs them, not for everyone reading. */
.post_controls {
	padding: var(--s2) var(--s4);
	background: none;
	border-top: 1px solid var(--line);
}
.post_controls .postbit_buttons a,
.post_controls .postbit_buttons a.button {
	display: inline-block;
	min-height: 0;
	margin: 0 var(--s3) 0 0;
	padding: var(--s2) 0;
	background: none !important;
	border: 0 !important;
	border-radius: 0;
	color: var(--fg-3) !important;
	font-family: var(--body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
.post_controls .postbit_buttons a:hover { color: var(--fg) !important; }

/* Except the one that is destructive, which should never be the same colour
   as "Quote". */
.post_controls .postbit_buttons a[href*="action=deletepost"],
.post_controls .postbit_buttons a[href*="delete"] { color: var(--bad) !important; }

/* Reply is the action the page is for, so it keeps its weight while the
   housekeeping links lose theirs. */
.post_controls .postbit_buttons a.quote_button,
.post_controls .postbit_buttons a[href*="newreply.php"] {
	color: var(--brand-ink) !important;
	font-weight: 600;
}


/* ==========================================================================
   11. QUOTES, CODE, EDITOR
   ========================================================================== */

blockquote {
	margin: var(--s3) 0;
	padding: var(--s3) var(--s4);
	border: 0;
	border-left: 2px solid var(--brand);
	border-radius: 0;
	background: var(--bg-3);
}
blockquote cite {
	display: block;
	margin: 0 0 var(--s2);
	padding: 0 0 var(--s2);
	border-bottom: 1px solid var(--line);
	color: var(--brand-ink);
	font-style: normal;
	font-weight: 500;
}
blockquote cite > span { float: right; color: var(--fg-3); font-size: 12px; font-weight: 400; }

.codeblock {
	margin: var(--s3) 0;
	padding: var(--s3) var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-sunk);
}
.codeblock .title {
	margin: 0 0 var(--s2);
	padding: 0 0 var(--s2);
	border-bottom: 1px solid var(--line);
	color: var(--fg-2);
	font-size: 12px;
}
.codeblock code {
	display: block;
	max-height: 320px;
	overflow: auto;
	font-family: var(--mono);
	font-size: 13.5px;
	white-space: pre;
	tab-size: 4;
	color: var(--fg);
}

.editor, .editor_control_bar {
	background: var(--bg-3);
	border: 1px solid var(--line-2);
}


/* ==========================================================================
   12. PAGINATION
   ========================================================================== */

.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s1);
	margin: 0 0 var(--s3);
	font-size: 14px;
}
.pagination .pages { margin-right: var(--s2); color: var(--fg-3); font-size: 13px; }

.pagination a,
.pagination .pagination_current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 0 var(--s2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-variant-numeric: tabular-nums;
}
.pagination a { background: var(--bg-2); color: var(--fg-2); }
.pagination a:hover { border-color: var(--brand); color: var(--brand-ink); }
.pagination .pagination_current {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--bg);
	font-weight: 600;
}


/* ==========================================================================
   13. THE PAGE-BOTTOM TOOL ROWS
   --------------------------------------------------------------------------
   This is the mess in both screenshots. MyBB emits each tool as its own block
   with a <br /> between, so they drift apart down the page with no grouping
   and no order of importance.

   The approach: one band, hairline-separated, holding the quiet tools — and
   the one action the page is for kept out of it and solid.
   ========================================================================== */

/* The <br /> tags doing MyBB's spacing. Scoped to direct children of the
   content wrapper, so line breaks inside posts and signatures are untouched.

   `:not(.clear)` is doing real work. forumdisplay_threadlist emits THREE
   <br class="clear" /> elements, and they are the only thing clearing the
   .float_left / .float_right pairs around the legend, the subscribe link and
   the Post Thread button. Hide them and the floats escape the wrapper — which
   is why the arcade strip and banner ended up laid out beside them instead of
   below. */
#content > .wrapper > br:not(.clear) { display: none; }
br.clear, .clear { clear: both; }

/* Belt and braces: whatever MyBB leaves floating at the end of a page, the
   footer and anything between it and the content starts on its own line. */
#footer, .gxaq, .gxa-arcade-banner { clear: both; }

.gxa-toolband {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2) var(--s4);
	margin: var(--s5) 0 0;
	padding: var(--s3) 0 0;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--fg-2);
}

/* Sort / Order / From live in one <td class="tfoot"> inside the thread table
   (forumdisplay_forumsort). Make that form a wrapping row so they drop onto
   their own lines rather than off the edge — a select cannot ellipsis its own
   text, so wrapping is the only fix. */
td.tfoot form,
.tfoot form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--s2);
}
td.tfoot form select { flex: 1 1 180px; min-width: 0; }

/* Inline Thread Moderation: a staff tool, and for the people who do see it,
   not the thing they came for. Quiet until used. */
#inlinemoderation_options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	margin: var(--s4) 0 0;
	padding: var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-2);
	opacity: .78;
	transition: opacity .14s ease;
}
#inlinemoderation_options:hover,
#inlinemoderation_options:focus-within { opacity: 1; }
#inlinemoderation_options .smalltext { flex: 0 0 auto; color: var(--fg-3); }
#inlinemoderation_options select { flex: 1 1 180px; }
#inlinemoderation_options input.button { min-height: 38px; font-size: 12px; }

/* "Search this Forum" / "Search Thread" — useful, not headline.

   `:not(:has(table))` is what keeps this off search.php. Three different
   forms on this board contain <input name="keywords">: the two one-line ones
   here, and the full search page. Matching on the field name alone turned
   that whole page into a flex ROW, which shrink-wrapped its Search button to
   102px and would have done stranger things to anything else placed beside
   the table. Only the big one has a table in it. */
#content form:has(input[name="keywords"]):not(:has(table)) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	margin: var(--s4) 0 0;
}
#content form:has(input[name="keywords"]):not(:has(table)) input[type="text"] {
	flex: 1 1 200px;
}

/* « Next Oldest | Next Newest » — raw text links in the screenshot. */
.gxa-threadnav { display: flex; gap: var(--s4); margin: var(--s4) 0; font-size: 13px; }
.gxa-threadnav a { color: var(--fg-2); }
.gxa-threadnav a:hover { color: var(--brand-ink); }


/* ==========================================================================
   14. QUICK REPLY
   --------------------------------------------------------------------------
   MyBB's markup:

       <tr>
         <td width="22%">  Message, the note, and the option checkboxes
         <td>              the textarea
       </tr>

   On a phone those two cells stack in source order, so Signature / Disable
   Smilies / Close Thread / Stick Thread appear ABOVE the box — you are asked
   to choose how to post before you have written anything. That is the second
   screenshot.

   The row becomes a column at every width, not only on phones: a label column
   beside a reply box is wasted space on a desktop too. The textarea goes
   first; the options follow it, where they read as "and when you post, …".
   ========================================================================== */

#quick_reply_form .tborder { overflow: visible; }

#quickreply_e > tr:first-child,
#quick_reply_form tbody > tr:first-child {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	padding: var(--s4);
	background: var(--bg-2);
}

/* The label-and-options cell, moved after the box. width="22%" is an HTML
   attribute on the cell, so it needs overriding rather than simply unsetting. */
#quickreply_e > tr:first-child > td:first-child,
#quick_reply_form tbody > tr:first-child > td:first-child {
	order: 2;
	width: auto !important;
	padding: 0;
	border: 0;
	background: none;
}

#quickreply_e > tr:first-child > td + td,
#quick_reply_form tbody > tr:first-child > td + td {
	order: 1;
	width: auto !important;
	padding: 0;
	border: 0;
	background: none;
}

/* MyBB sets width:95% inline on the textarea's wrapper and the control bar. */
#quick_reply_form td > div[style] { width: 100% !important; }
#quick_reply_form textarea { width: 100% !important; padding: var(--s3) !important; }

/* "Message" and the note above it are saying what the box already says. */
#quickreply_e > tr:first-child > td:first-child > strong { display: none; }

/* The options themselves: a wrapped row of real targets rather than a column
   of 13px text. */
#quickreply_e > tr:first-child > td:first-child .smalltext {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s4);
	align-items: center;
	color: var(--fg-2);
	font-size: 13px;
}
#quickreply_e label {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	min-height: 36px;
	margin: 0;
	cursor: pointer;
}
#quickreply_e label strong { font-weight: 400; }
#quickreply_e br { display: none; }

#quick_reply_form .tfoot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	padding: var(--s3) var(--s4);
	text-align: left;
}


/* ==========================================================================
   15. THE POSTING FORM  (newreply / newthread)
   --------------------------------------------------------------------------
   newthread and newreply are a two-column table: a <td width="20%"> holding
   the label, and a <td> holding the control. On a 390px phone that is a 78px
   label column and a 300px field column, so "Thread Subject:" wraps to three
   lines beside a subject box too narrow to read back what you typed.

   Both label and field pair up INSIDE one row here, unlike the search form,
   so simply stacking the table gets it right: label, then its field, in
   order, all the way down.

   Two things are hidden on a phone, and both are deliberate:

     POST ICONS   MyBB renders roughly twenty radio buttons each paired with
                  a 16px image. On a phone that is a screen and a half of
                  grid between the subject and the message box — the two
                  fields someone actually came to fill in — and the icon is
                  decoration. "no icon" stays checked, which is the default.
     SMILIE BOX   A 170px fixed-width panel of forty images, beside a message
                  box that is already full width. The phone keyboard has an
                  emoji key.

   Neither is removed on desktop.

   The rule that was here before aimed at `.smilie_box`, a class MyBB does
   not use. The smilieinsert template is an unclassed <div> wrapping a table
   that contains <table id="clickable_smilies">, so that id is the only
   reliable handle on it.
   ========================================================================== */

#content form .tborder { margin-bottom: var(--s4); }

/* Three identical slabs give no signal about which one submits. Section 5 of
   the foundation already colours them; this is only the layout. */
.gxa-postbuttons,
#content form .tfoot:has(input[name="submit"]) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	align-items: center;
}


@media (max-width: 900px) {

	/* ---- the form stacks ----
	   Scoped to a table that contains the message box, so this cannot reach
	   a thread list or the User CP. All of it or none of it, for the colspan
	   reason set out in section 22. */
	#content .tborder:has(textarea[name="message"]),
	#content .tborder:has(textarea[name="message"]) > tbody,
	#content .tborder:has(textarea[name="message"]) > tbody > tr,
	#content .tborder:has(textarea[name="message"]) > tr,
	#content .tborder:has(textarea[name="message"]) > tbody > tr > td,
	#content .tborder:has(textarea[name="message"]) > tr > td {
		display: block;
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* The label cell becomes a label: above its field, quiet, and not a slab
	   of bold 15px competing with the thing it names. */
	#content .tborder:has(textarea[name="message"]) tr > td:first-child:has(> strong) {
		padding: var(--s3) var(--s4) 0 !important;
	}
	#content .tborder:has(textarea[name="message"]) tr > td:first-child > strong {
		display: block;
		color: var(--fg-2);
		font-family: var(--body);
		font-size: 12px;
		font-weight: 400;
		letter-spacing: .08em;
		text-transform: uppercase;
	}
	#content .tborder:has(textarea[name="message"]) tr > td:last-child {
		padding: var(--s2) var(--s4) var(--s4) !important;
	}

	/* Every control fills the width it has been given. MyBB writes size= and
	   cols= on these, which is its own idea of how wide they should be. */
	#content .tborder:has(textarea[name="message"]) input[type="text"],
	#content .tborder:has(textarea[name="message"]) input[size],
	#content .tborder:has(textarea[name="message"]) select,
	#content .tborder:has(textarea[name="message"]) textarea {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	#content .tborder:has(textarea[name="message"]) input[type="checkbox"],
	#content .tborder:has(textarea[name="message"]) input[type="radio"],
	#content .tborder:has(textarea[name="message"]) input[type="submit"],
	#content .tborder:has(textarea[name="message"]) input[type="button"] {
		width: auto !important;
	}

	/* The subject is the first thing you write and the thing the whole thread
	   is named after. It gets to look like it. */
	#content input[name="subject"] {
		min-height: 48px;
		font-size: 17px;
	}

	/* MyBB asks for rows="20", which on a phone is about 950px of empty box —
	   the Post Thread button ends up two full screens below the subject line.
	   Tall enough to write in, short enough to see where you are going. */
	#content textarea[name="message"] {
		height: 42vh !important;
		min-height: 220px;
		max-height: 420px;
		font-size: 16px;
	}
	#content .sceditor-container,
	#content .sceditor-container iframe {
		height: 42vh !important;
		min-height: 220px;
		max-height: 420px;
	}

	/* ---- the two things that go ---- */
	#content form:has(textarea[name="message"]) tr:has(input[name="icon"]) {
		display: none;
	}
	#content form:has(textarea[name="message"]) div:has(#clickable_smilies) {
		display: none;
	}
	/* The old, wrong handle. Harmless, and left in case a plugin uses it. */
	#content form:has(textarea) .smilie_box { display: none; }

	/* ---- the buttons ----
	   Post Thread is the action; Preview and Save Draft are not. Centred
	   inline buttons give all three the same weight and none of them a target
	   worth aiming at. */
	#content form:has(textarea[name="message"]) > div[style*="text-align:center"],
	#content form:has(textarea[name="message"]) > div[style*="text-align: center"] {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s2);
		text-align: left !important;
	}
	#content form:has(textarea[name="message"]) input[name="submit"] {
		flex: 1 1 100%;
		min-height: 48px;
		font-size: 14px;
	}
	#content form:has(textarea[name="message"]) input[name="previewpost"],
	#content form:has(textarea[name="message"]) input[name="savedraft"] {
		flex: 1 1 0;
		min-height: 44px;
	}
}


/* ==========================================================================
   15.1  THE EDITOR
   --------------------------------------------------------------------------
   SCEditor is gone. The codebuttons template no longer loads it, so the
   textarea MyBB prints is just a textarea and these rules reach it — which
   the old white iframe never allowed, because an iframe is a separate
   document and no stylesheet here could cross into it.

   Labels, not icons. A row of small pictograms is a quiz; "Link" is a word.
   ========================================================================== */

.gxe-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 var(--s3);
}

.gxe-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	min-width: 38px;
	padding: 0 12px;
	background: var(--bg-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--fg-2);
	font-family: var(--body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1;
	cursor: pointer;
}
.gxe-btn:hover { background: var(--bg-4); color: var(--fg); border-color: var(--line-2); }
.gxe-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.gxe-btn[aria-pressed="true"] {
	background: var(--brand);
	border-color: var(--brand);
	color: #1A1206;
}

/* The letterforms the buttons are named after, so B reads as bold. */
.gxe-b { font-weight: 800; }
.gxe-i { font-style: italic; font-family: Georgia, serif; }
.gxe-u { text-decoration: underline; }
.gxe-s { text-decoration: line-through; }

.gxe-sep {
	width: 1px;
	height: 22px;
	margin: 0 2px;
	background: var(--line);
}

.gxe-hint {
	margin-top: var(--s2);
	color: var(--fg-3);
	font-size: 12.5px;
	line-height: 1.45;
}

.gxe-preview-pane {
	min-height: 220px;
	padding: var(--s4);
	background: var(--bg-sunk);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
}
.gxe-preview-note {
	margin: 0 0 var(--s3);
	padding-bottom: var(--s2);
	border-bottom: 1px solid var(--line);
	color: var(--fg-3);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.gxe-preview-body { color: var(--fg); font-size: 16px; line-height: 1.55; }
.gxe-preview-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.gxe-preview-body blockquote {
	margin: var(--s3) 0;
	padding: var(--s2) var(--s4);
	border-left: 3px solid var(--brand);
	background: var(--bg-3);
	color: var(--fg-2);
}
.gxe-preview-body pre {
	margin: var(--s3) 0;
	padding: var(--s3);
	overflow-x: auto;
	background: var(--bg-3);
	border-radius: var(--radius);
	font-family: var(--mono);
	font-size: 13.5px;
}
.gxe-preview-body ul,
.gxe-preview-body ol { margin: var(--s3) 0; padding-left: var(--s5); }
.gxe-preview-body a { color: var(--brand-ink); }

/* The box itself. It is the point of the page, so it gets the room. */
#content textarea[name="message"],
#quick_reply_form textarea[name="message"] {
	min-height: 180px;
	padding: var(--s4) !important;
	background: var(--bg-sunk);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	color: var(--fg);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.55;
	resize: vertical;
}
#content textarea[name="message"]::placeholder { color: var(--fg-3); }
#content textarea[name="message"]:focus {
	outline: 2px solid var(--focus);
	outline-offset: 1px;
	border-color: var(--focus);
}

/* Nothing on the board should ever look like SCEditor again, including a
   half-loaded one if a cached page still carries its markup. */
.sceditor-container { display: none !important; }


/* Quick Reply's submit is the same action as Post Reply on the full form, but
   MyBB gives it no name attribute — only id="quick_reply_submit" — so the
   rule in section 5 that colours the primary button
   (input[name="submit"]) never matched it, and the one button that posts
   your reply looked like the one that previews it. */
#quick_reply_submit {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	min-height: 48px;
	padding: 0 24px;
}
#quick_reply_submit:hover {
	background: var(--accent-2);
	border-color: var(--accent-2);
	color: var(--on-accent);
}


/* ==========================================================================
   16. NARROW
   ========================================================================== */

@media (max-width: 760px) {

	/* The author rail becomes a strip across the top of the post. */
	.post.classic { grid-template-columns: minmax(0, 1fr); }

	.post .post_author {
		display: flex;
		align-items: center;
		gap: var(--s3);
		padding: var(--s3) var(--s4);
		border-right: 0;
		border-bottom: 1px solid var(--line);
		text-align: left;
	}
	.post .post_author .author_avatar { margin: 0; flex: 0 0 auto; }
	.post .post_author .author_avatar img { width: 40px; height: 40px; }
	.post .post_author .author_information { flex: 1 1 auto; min-width: 0; }
	.post .post_author .largetext { font-size: 15px; }

	/* Post counts and join dates are not worth a third of a phone screen. */
	.post .post_author .author_statistics { display: none; }

	.post .post_content { padding: var(--s4); }
	.post_body { font-size: 16px; }

	.post_controls { padding: var(--s2) var(--s3); }
	.post_controls .post_management_buttons { margin-left: 0; }

	.gxa-toolband { gap: var(--s2); }
}


/* ==========================================================================
   GXA — FORUM INDEX AND THREAD LISTS
   Layer 3. Loads after gxa-02-reading.css.
   --------------------------------------------------------------------------
   Both pages are the same shape: a table whose first columns are tiny status
   icons, whose middle column is the only thing anyone reads, and whose last
   columns are counts. MyBB gives every column the same weight.

   Section 19.3 of the old stylesheet dealt with this on phones by hiding the
   last two columns:

       .tborder tr:has(td:nth-child(5)) > td:nth-last-child(-n+2) { display: none }

   counting from the END because counting from the start deleted thread titles
   on any page with two icon columns. That rule stays — it is correct and it
   was hard won — but the layout underneath it is now a grid, so the counts
   can move under the title on a phone instead of vanishing.
   ========================================================================== */


/* ==========================================================================
   17. FORUM STATUS
   --------------------------------------------------------------------------
   A dot, not a sprite. --brand was measured to clear 3:1 against the raised
   row these sit on, not just against the page, because that is the surface
   they actually appear over.
   ========================================================================== */

.forum_status,
.thread_status {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background-image: none !important;
	border: 2px solid var(--fg-3);
	vertical-align: middle;
}

.forum_on, .thread_hot, .thread_newhot {
	background: var(--brand);
	border-color: var(--brand);
}
.forum_off, .forum_offclose, .forum_offlink,
.thread_dot, .thread_lock { background: transparent; border-color: var(--fg-3); }

.thread_lock { border-color: var(--accent); }

.subforumicon {
	display: inline-block;
	width: 6px; height: 6px;
	margin: 0 var(--s1);
	border-radius: 50%;
	background-color: var(--fg-3);
	background-image: none !important;
	vertical-align: middle;
}
.subforum_minion { background-color: var(--brand); }

/* The collapse arrow MyBB loads as a PNG. The old theme inverted it for dark,
   which on a missing file gave a teal broken-image mark; section 22 hid it
   outright, and the User CP got its own toggles instead. Same here: no file
   to go missing. */
.expcolimage { display: none !important; }
.quick_jump {
	width: 14px; height: 14px;
	background: none;
	border: 0;
	filter: none;
	opacity: .55;
}


/* ==========================================================================
   18. FORUM ROWS
   --------------------------------------------------------------------------
   The title and description are the row. Threads, Posts and Last Post are
   reference, so they are quieter and they give way first when space runs out.

   On a phone they do not give way at all any more — see section 22, where the
   row stops being a table row and becomes a card. This section is what both
   layouts share.
   ========================================================================== */

.tborder tr > td { vertical-align: middle; }

/* The forum name */
.tborder td strong > a { font-size: 15.5px; font-weight: 600; }
.tborder td .smalltext { color: var(--fg-2); font-size: 13px; line-height: 1.5; }

/* Counts and last-post columns */
.tborder td[align="center"],
.tborder td[align="right"] {
	color: var(--fg-2);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.thread_start_datetime,
.author { color: var(--fg-3); }

.subject_new { font-weight: 700; }
.subject_new a { color: var(--fg); }

/* An unread thread earns a mark you can find by scanning, not by reading. */
.tborder .subject_new::before {
	content: "";
	display: inline-block;
	width: 6px; height: 6px;
	margin-right: var(--s2);
	border-radius: 50%;
	background: var(--brand);
	vertical-align: 2px;
}

/* Who's online / board stats blocks on the index */
#boardstats .trow1,
#boardstats .trow2 { font-size: 13.5px; }


/* ---- the header cell on tables that stay tables --------------------------
   forumdisplay_threadlist and private.php both put a floated block of links
   in the same .thead cell as the page's title:

       <td class="thead" colspan="{$colspan}">
           <div class="float_right">Mark this forum read | Subscribe…</div>
           <div><strong>HOMEROOM</strong></div>
       </td>

   Narrow enough and the float sits on top of the name. The obvious fix —
   display:flex on the cell, column-reverse so the name leads — is WRONG, and
   cost a round on the live board: colspan is an attribute of a table CELL, so
   the moment that td is given a non-table display it stops being one, the
   browser substitutes an anonymous cell to keep the table legal, and the
   substitute has no colspan. The header then spans one column instead of the
   table and collapses to about 90px.

   So the flexing happens on a wrapper INSIDE the cell, which the footer
   script creates. The cell is never touched.

   Without the script, the rule below simply unfloats the links: they end up
   above the name rather than below it, which is worse but not broken. */
@media (max-width: 760px) {
	.gxa-theadwrap {
		display: flex;
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 7px;
	}
	.gxa-theadwrap > .float_right {
		float: none;
		margin: 0;
		max-width: 100%;
	}
	.tborder td.thead > .float_right {
		float: none;
		margin: 0 0 7px;
	}

	/* The name of the place you are standing in. It was competing with the two
	   housekeeping links beside it for the same size and the same brightness,
	   and losing — the thing that tells you where you are should not be the
	   quieter half of its own header. */
	.gxa-theadwrap > div:not(.float_right) > strong,
	.tborder td.thead > div:not(.float_right) > strong {
		font-size: 16px;
		letter-spacing: 0.04em;
	}

	/* These links are housekeeping, not a second title, so they stop shouting
	   in 14px uppercase display type. */
	.gxa-theadwrap > .float_right .smalltext,
	.tborder td.thead > .float_right .smalltext {
		font-family: var(--body);
		font-size: 11.5px;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		color: var(--fg-3);
	}
	.gxa-theadwrap > .float_right .smalltext strong,
	.tborder td.thead > .float_right .smalltext strong { font-weight: 400; }
	/* The size and weight have to be restated on the <a> itself, not left to
	   inherit from the .smalltext around it. Section 22 carries

	       .tborder td strong > a { font-size: 15px; }

	   for forum and thread titles, and this markup is
	   <span class="smalltext"><strong><a>Mark this forum read</a></strong></span>
	   — so it matches, and a declaration on the element always beats a value
	   inherited from its parent, whatever the parent's specificity. That is
	   why these two links kept rendering at 15px/600 while the span around
	   them measured 11.5px/400. */
	.gxa-theadwrap > .float_right .smalltext a,
	.tborder td.thead > .float_right .smalltext a {
		font-size: 11.5px;
		font-weight: 400;
		color: var(--fg-2);
	}

	/* private.php's folder search lives in that float, and section 6 stretches
	   sized inputs to fill their container. Give it its own line. */
	.gxa-theadwrap > .float_right input[type="text"] {
		width: 100%;
		margin-bottom: 7px;
	}
}


/* ==========================================================================
   18.2  THE BOARD LOOK
   --------------------------------------------------------------------------
   The shape Sean asked for, from FranklyWV, in GXA's palette:

     a category BAND rather than a table header
     a colour SWATCH per forum rather than a status dot
     the forum's name as a page HEADLINE rather than a cell in a table
     the latest thread folded into the forum's own row

   The swatch is identity, not state. Which room this is gets a colour you
   learn by sight; whether it has anything new in it is the gold edge down the
   side of the card. Those are two different questions and they were sharing
   one dot before, which is why the dot told you neither quickly.
   ========================================================================== */

/* ---- the six swatch colours ----
   Edit these and the whole board re-colours. Four are the logo's own inks;
   two are cool, because six warm swatches in a row stop being distinguishable
   and the point of a swatch is that you can tell them apart at a glance. */
:root,
[data-gxa-theme] {
	--swatch-1: #EF9A1E;   /* logo amber */
	--swatch-2: #5B74C4;   /* dusty blue */
	--swatch-3: #7FA05A;   /* sage */
	--swatch-4: #C4342B;   /* logo red */
	--swatch-5: #E8791C;   /* logo orange */
	--swatch-6: #9A8E7A;   /* stone */
}

/* ---- the category band ---- */
.tborder:has(.forum_status) td.thead {
	padding: 18px var(--s4) 16px;
	background: color-mix(in srgb, var(--brand) 13%, var(--bg-3));
	border-bottom: 1px solid var(--brand);
}
.tborder:has(.forum_status) td.thead strong > a,
.tborder:has(.forum_status) td.thead > div > strong {
	font-family: var(--display);
	font-size: 20px;
	line-height: 1.05;
	letter-spacing: .015em;
	text-transform: uppercase;
	color: var(--fg);
}
.tborder:has(.forum_status) td.thead .smalltext {
	display: block;
	margin-top: 5px;
	font-family: var(--display);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--fg-2);
}

/* ---- the swatch ----
   A rounded square, not a ring. The ring read as a bullet point; a filled
   square reads as a label on a drawer. */
.tborder:has(.forum_status) .forum_status {
	width: 16px;
	height: 16px;
	border: 0;
	border-radius: 5px;
	background: var(--swatch-6);
	background-image: none;
}

/* Colour by position in the category, so a forum added next month gets one
   without anybody editing CSS. forumbit_depth1_cat puts the column-heading
   row first inside the tbody, so the forums start at the second child. */
.tborder:has(.forum_status) tbody > tr:nth-child(6n+2) .forum_status { background: var(--swatch-1); }
.tborder:has(.forum_status) tbody > tr:nth-child(6n+3) .forum_status { background: var(--swatch-2); }
.tborder:has(.forum_status) tbody > tr:nth-child(6n+4) .forum_status { background: var(--swatch-3); }
.tborder:has(.forum_status) tbody > tr:nth-child(6n+5) .forum_status { background: var(--swatch-4); }
.tborder:has(.forum_status) tbody > tr:nth-child(6n+6) .forum_status { background: var(--swatch-5); }
.tborder:has(.forum_status) tbody > tr:nth-child(6n+7) .forum_status { background: var(--swatch-6); }

/* To pin one forum to one colour for good, add its own rule here. MyBB gives
   the swatch the id mark_read_<fid>, and the fid is in the forum's URL —
   forumdisplay.php?fid=4 is #mark_read_4. An id beats everything above it.

       #mark_read_4 .forum_status,
       #mark_read_4 { background: var(--swatch-4); }
*/


/* ==========================================================================
   18.3  THE PAGE HEADLINE
   --------------------------------------------------------------------------
   Printed by the forumdisplay template, which has {$foruminfo} in scope, so
   this is the forum's real name and description rather than a copy of the
   table header moved around with JavaScript.
   ========================================================================== */

.gxa-pagehead {
	margin: var(--s5) 0 var(--s4);
}
.gxa-pagehead h1 {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(30px, 9.5vw, 46px);
	font-weight: 400;
	line-height: .94;
	letter-spacing: .005em;
	text-transform: uppercase;
	color: var(--fg);
}
.gxa-pagehead p {
	margin: var(--s3) 0 0;
	max-width: 54ch;
	color: var(--fg-2);
	font-size: 15.5px;
	line-height: 1.45;
}
/* Not every forum has a description, and MyBB prints the empty string rather
   than omitting the element, which would otherwise leave a 12px gap under
   every headline on a board where descriptions are not used. */
.gxa-pagehead p:empty { display: none; }

/* Start a thread: gold, its own size, sitting under the headline. It is the
   one thing this page wants you to do. */
#content a.button.new_thread_button {
	display: inline-flex;
	width: auto;
	min-height: 50px;
	padding: 0 26px;
	background: var(--brand);
	border-color: var(--brand);
	color: #1A1206;
	font-family: var(--body);
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: .01em;

	/* Sentence case. Section 5 shouts every button on the board in caps,
	   which is right for a toolbar and wrong for the one invitation on the
	   page: POST THREAD is an instruction, Post Thread is an offer. */
	text-transform: none;
}
#content a.button.new_thread_button:hover {
	background: var(--brand-deep);
	border-color: var(--brand-deep);
	color: var(--fg);
}

/* The threadlist's own header repeats the forum name, which the headline
   above has just said in 44px type. What is left of that cell is the two
   housekeeping links, and they read better as a quiet strip than as a bar. */
body.gxa-forumpage .tborder:has(tr.inline_row) td.thead {
	padding: var(--s3) var(--s4);
	background: none;
	border-bottom: 1px solid var(--line);
}
body.gxa-forumpage .tborder:has(tr.inline_row) td.thead > .gxa-theadwrap > div:not(.float_right),
body.gxa-forumpage .tborder:has(tr.inline_row) td.thead > div:not(.float_right):not(.gxa-theadwrap) {
	display: none;
}


/* ==========================================================================
   19. INLINE MODERATION CHECKBOXES
   --------------------------------------------------------------------------
   One column of checkboxes down the right of every thread list, visible to
   staff only — but when it is visible it is the widest-reaching change to the
   page, so it gets held to the same quiet treatment as the tool row.
   ========================================================================== */

.tborder input[type="checkbox"] { accent-color: var(--brand); }
.selectall {
	padding: var(--s2) var(--s4);
	background: color-mix(in srgb, var(--brand) 14%, var(--bg-2));
	border-bottom: 1px solid var(--line);
	color: var(--fg);
	text-align: center;
	font-size: 13px;
}


/* ==========================================================================
   20. LEGENDS, POLLS, ATTACHMENTS, REPUTATION
   ========================================================================== */

/* MyBB's legend is a <dl> of alternating pairs — a dot in each <dt>, its
   caption in the <dd> after it. Floating every <dt> left (which is what this
   did) pulls all four dots out of the flow and stacks them against the left
   edge, and the four captions then run on after them: four dots in a row,
   then four orphaned labels. Laying the <dl> out as a flex row instead keeps
   each dot with the label it belongs to. */
.forum_legend, .thread_legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2) 8px;
	margin: var(--s4) 0 0;
	padding: 0;
}

.forum_legend dt, .thread_legend dt {
	float: none;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
}

.forum_legend dd, .thread_legend dd {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	margin: 0 var(--s5) 0 0;
	padding: 0;
	border: 0;
	color: var(--fg-3);
	font-size: 12.5px;
	line-height: 1.5;
}
.forum_legend dd:last-child, .thread_legend dd:last-child { margin-right: 0; }

.pollbar {
	height: 8px;
	border: 0;
	border-radius: 999px;
	background: var(--brand);
	background-image: none;
}
.pollbar .percent { display: none; }
.poll_votedfor { background: var(--bg-3); border: 1px solid var(--brand-deep); }

img.attachment {
	padding: 3px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-sunk);
}

.trow_reputation_positive { background: color-mix(in srgb, var(--ok) 16%, var(--bg-2)); }
.trow_reputation_negative { background: color-mix(in srgb, var(--bad) 16%, var(--bg-2)); }
.reputation_positive { color: var(--ok); }
.reputation_neutral  { color: var(--fg-2); }
.reputation_negative { color: var(--bad); }

.repbox {
	padding: var(--s2) var(--s3);
	border-radius: var(--radius);
	font-family: var(--display);
	font-size: 17px;
}
._neutral { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-2); }
._plus    { background: color-mix(in srgb, var(--ok) 18%, var(--bg-2));  border: 1px solid var(--ok);  color: var(--ok); }
._minus   { background: color-mix(in srgb, var(--bad) 18%, var(--bg-2)); border: 1px solid var(--bad); color: var(--bad); }

.high_warning, .high_banned         { color: var(--bad); }
.moderate_warning, .moderate_banned { color: var(--warn); }
.low_warning, .low_banned           { color: var(--brand-ink); }

.highlight { padding: 1px 3px; border-radius: 2px; background: color-mix(in srgb, var(--brand) 32%, transparent); color: var(--fg); }

.smilie { vertical-align: middle; }
.smilie_pointer { cursor: pointer; }
.scaleimages img { max-width: 100%; }
.separator { height: 0; margin: var(--s2); font-size: 1px; list-style: none; }


/* ==========================================================================
   21. POPUPS
   ========================================================================== */

.popup_menu {
	background: var(--bg-3);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}
.popup_menu .popup_item_container { margin: 0; text-align: left; }
.popup_menu .popup_item {
	display: block;
	padding: 10px var(--s4);
	background: transparent;
	color: var(--fg);
	white-space: nowrap;
}
.popup_menu .popup_item:hover { background: var(--brand); color: var(--bg); }


/* ==========================================================================
   22. NARROW — lists
   --------------------------------------------------------------------------
   The old approach here was to hide the trailing columns on a phone:

       .tborder tr:has(td:nth-child(5)) > td:nth-last-child(-n+2) { display: none }

   It kept the page from overflowing, and it was hard won — counting from the
   END is what stopped it eating thread titles on pages with two icon columns.
   But it is damage control, not a layout. What it produced is a 2009 table
   with its right-hand side amputated: a thread's reply count, view count and
   last post simply did not exist on a phone, which is where most of the board
   reads.

   The row becomes a card instead. Nothing is thrown away; it moves under the
   title where there is room for it.

       ●  Are We Building This Together or Not?
          SAMX, 10-01-2026, 12:02 PM
          2 replies · 148 views
          10-07-2026, 11:48 PM · Last Post: Hazel

   HOW IT IS DONE, AND THE TRAP IN IT
   The whole table is taken out of table layout — table, thead, tbody, tr and
   td all become blocks — and only then are the rows laid out as flex cards.
   All of it or none of it: giving a single td a non-table display strands it
   in an anonymous cell that does not inherit its colspan, which is exactly
   how the forum header collapsed to a 90px column. With no columns left at
   all there is no colspan to lose.

   WHY THE CONTENT ROWS ARE NAMED CELL BY CELL
   `:is(td.trow1, td.trow2, td.trow_shaded)` looks long-winded next to
   `td[class*="trow"]`, which is what this used to say. It is not. MyBB's
   "Important Threads" and "Normal Threads" separators are

       <td class="trow_sep" colspan="{$colspan}">

   and trow_sep contains "trow". The loose match turned each separator into a
   card and then absolutely positioned its text into the 14px dot gutter, so
   "Important Threads" came out stacked two words tall underneath the first
   thread's title. The three classes below are every value MyBB's $bgcolor
   actually takes (forumdisplay.php lines 798, 849, 1047); nothing else may
   be treated as a row of content.

   THE SECOND TRAP, WHICH COST A ROUND OF ITS OWN
   Every rule that positions a cell is guarded by `tr:has(> :is(td.trow1, td.trow2, td.trow_shaded))`
   — "a row of actual content". Without it, `tr > td:first-child` also matches
   the .thead cell, because the header row has exactly one cell and it is the
   first child of its own row. The dot rule then positioned the forum header
   absolutely and shrank it to 14px. A selector written for a data row will
   find the header row unless it is told not to.

   WHICH TABLES
   Only the two that are lists of things to read — matched by what they
   contain rather than by page, because the same markup turns up in the User
   CP, in search, and in whatever a plugin renders next year:

       a thread list   .tborder:has(tr.inline_row)
       a forum list    .tborder:has(.forum_status)

   Everything else keeps its columns.
   ========================================================================== */

@media (max-width: 900px) {

	.thead { padding: var(--s3) var(--s4); font-size: 13.5px; }
	.tcat  { padding: var(--s2) var(--s4); }
	.trow1, .trow2, .trow_shaded { padding: var(--s3) var(--s4); }

	.tborder td strong > a { font-size: 15px; }

	/* Six labels nobody taps on a phone. */
	.thread_legend, .forum_legend { display: none; }

	/* Forum Jump — the drawer and the breadcrumb already cover this.
	   MATCH ON THE CLASS, NOT THE NAME. The old rule here was

	       #content form:has(select[name="fid"]) { display: none }

	   and `fid` is not unique to Forum Jump: private.php's footer has
	   <select name="fid"> for "Move to <folder>". So this rule was hiding the
	   entire private message FORM on every phone — the message list, the
	   checkboxes, Move and Delete, all of it — which is why private messages
	   looked like an empty page. The fieldset of folder links sits outside the
	   form, so that stayed visible and the page looked merely blank rather
	   than broken.

	   forumjump_advanced gives its select class="forumjump". Nothing else on
	   the board uses that. */
	#content form:has(select.forumjump) { display: none; }


	/* ---- 22.0  Post Thread ----
	   "Difficulty in posting new threads" came up in the member feedback, and
	   this is the button that answers it. MyBB tucks it into a float_right in
	   the top corner above the list, where on a phone it reads as a caption
	   rather than an action. Unfloated, it sits under the page headline where
	   Sean's reference puts it.

	   Its COLOUR and SIZE are in section 18.3, not here, because it should
	   look the same on a desktop. Only the placement is a narrow-screen
	   concern. */
	#content div.float_right:has(> .new_thread_button) {
		float: none;
		display: block;
		margin: 0 0 var(--s4);
	}


	/* ---- 22.1  out of table layout, in one piece ---- */
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)),
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) thead,
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) tbody,
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) tr,
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) tr > td {
		display: block;
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* The column headings — Forum / Threads / Posts / Last Post, or
	   Thread / Author / Replies / Views. They head columns that have just
	   stopped existing, and left in place they are four stacked words. */
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) tr:has(td.tcat) {
		display: none;
	}

	/* The category bar is the one header that stays: it says which part of the
	   board you are looking at. Now that the cell is a block it can flex
	   safely — there are no columns left for it to span. */
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) td.thead {
		display: flex;
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 7px;
	}
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) td.thead > .float_right {
		float: none;
		margin: 0;
	}
	/* …unless the footer script already wrapped it, in which case the wrapper
	   is doing the flexing and the cell must not do it twice. */
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) td.thead:has(> .gxa-theadwrap) {
		display: block;
	}
	/* The expand/collapse image slot on the index category bar. */
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) td.thead .expcolimage {
		display: none;
	}


	/* The separators themselves, now that they are not being mistaken for
	   content: quiet section labels in the same voice as the headings on You
	   and the User CP, rather than two words of body text. */
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) td.trow_sep {
		padding: var(--s4) var(--s4) var(--s2) !important;
		background: none !important;
		border: 0 !important;
		color: var(--fg-3) !important;
		font-family: var(--body);
		font-size: 11.5px;
		font-weight: 400;
		letter-spacing: .12em;
		text-transform: uppercase;
	}


	/* ---- 22.2  the card ----
	   The status dot is positioned rather than being a flex item. As an item
	   it sits on the first line and every line after it starts back at the
	   left edge, so the title is indented and nothing under it lines up — a
	   ragged left margin down the whole page. Out of the flow, it sits in a
	   gutter the padding reserves, and the title, the byline, the counts and
	   the last post all share one left edge. */
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 2px var(--s2);
		padding: var(--s3) var(--s4) var(--s3) 42px;
		border-bottom: 1px solid var(--line);
	}
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) tr:last-child:has(> :is(td.trow1, td.trow2, td.trow_shaded)) {
		border-bottom: 0;
	}

	/* Unread, in the same language the private message list uses: an edge you
	   can find by scanning a column of cards, not a mark you have to read.

	   THREADS ONLY. It used to be on the forum index too, where almost every
	   room has something new in it almost all the time — so the mark was on
	   nearly every row, which makes it decoration rather than information,
	   and Sean asked for it gone. On a thread list it still earns its place,
	   because there the unread ones are genuinely the minority. One line to
	   remove if it stops being true there as well. */
	.tborder:has(tr.inline_row) tr:has(.subject_new) {
		box-shadow: inset 3px 0 0 var(--brand);
	}

	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td {
		padding: 0;
		border: 0;
		background: none;

		/* These two are the ONLY !important declarations in this section, and
		   they are not negotiable: forumdisplay_thread writes
		   style="white-space: nowrap; text-align: right" onto the last-post
		   cell. An inline style outranks every class selector ever written, so
		   without these the last-post line hangs off the right of the card and
		   refuses to wrap. */
		text-align: left !important;
		white-space: normal !important;
	}

	/* The dot, in the gutter the padding above reserves. `top` aligns it with
	   the first line of the title rather than with the middle of a title that
	   may be one line or three. */
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:first-child {
		position: absolute;
		left: var(--s4);
		top: 18px;
		width: 14px;
	}
	/* A dot that no longer needs to also say "unread" — the card edge does
	   that now — and two marks on one row read as a mistake. */
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) .subject_new::before {
		content: none;
	}

	/* The thread list's post-icon column: two pixels of decoration costing a
	   whole flex item. */
	.tborder:has(tr.inline_row) tr.inline_row > td:nth-child(2) { display: none; }

	/* The cell that holds the title, and everything MyBB nests inside it. */
	.tborder:has(tr.inline_row) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(3),
	.tborder:has(.forum_status) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(2) {
		flex: 1 1 100%;
		min-width: 0;
	}

	/* The title: the one thing on the card anyone is scanning for, so it gets
	   the size. */
	.tborder:has(tr.inline_row) tr > td:nth-child(3) > div > span:first-child,
	.tborder:has(tr.inline_row) tr > td:nth-child(3) > div > span:first-child a,
	.tborder:has(.forum_status) tr > td:nth-child(2) > strong,
	.tborder:has(.forum_status) tr > td:nth-child(2) > strong > a {
		font-size: 16.5px;
		font-weight: 600;
		line-height: 1.3;
	}

	.tborder:has(tr.inline_row) tr > td:nth-child(3) .smalltext,
	.tborder:has(.forum_status) tr > td:nth-child(2) .smalltext {
		display: block;
		margin-top: 3px;
		font-size: 12.5px;
	}
	/* …except the byline, which is two spans MyBB already puts on their own
	   line. These need the same weight of selector as the rule above or they
	   lose to it and stack: "SAMX," on one line, the date on the next. */
	.tborder:has(tr.inline_row) tr > td:nth-child(3) .smalltext.author,
	.tborder:has(tr.inline_row) tr > td:nth-child(3) .smalltext.thread_start_datetime {
		display: inline;
		margin-top: 0;
	}

	/* A long forum description is context, not the point. Three lines of it. */
	.tborder:has(.forum_status) tr > td:nth-child(2) > .smalltext {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}


	/* ---- 22.3  the numbers, moved rather than deleted ----
	   They wrap onto a line of their own, labelled, because a bare "2  148"
	   under a thread title means nothing. ::after is used rather than editing
	   the template, so this survives a MyBB upgrade. */
	.tborder:has(tr.inline_row) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(4),
	.tborder:has(tr.inline_row) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(5),
	.tborder:has(.forum_status) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(3),
	.tborder:has(.forum_status) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(4) {
		flex: 0 0 auto;
		color: var(--fg-3);
		font-size: 12.5px;
		font-variant-numeric: tabular-nums;
	}
	/* The reply count is a link (it opens "who posted"). Left alone it is the
	   brightest thing on the meta line, which puts the emphasis on a number
	   nobody came for. */
	.tborder:has(tr.inline_row) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(4) a {
		color: inherit;
		border-bottom: 0;
	}
	.tborder:has(tr.inline_row) tr > td:nth-child(4)::after { content: " replies"; }
	.tborder:has(tr.inline_row) tr > td:nth-child(5)::after { content: " views"; }
	.tborder:has(.forum_status) tr > td:nth-child(3)::after { content: " threads"; }
	.tborder:has(.forum_status) tr > td:nth-child(4)::after { content: " posts"; }

	/* A middot BETWEEN the two counts, and nowhere else. Putting one on every
	   cell from the fourth onwards also puts one at the head of the last-post
	   line, where it has nothing to separate and reads as a typo. */
	.tborder:has(tr.inline_row) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(5)::before,
	.tborder:has(.forum_status) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(4)::before {
		content: "·";
		margin-right: var(--s2);
		color: var(--line-2);
	}


	/* ---- 22.4  the last post ----
	   Its own line, because "10-07-2026, 11:48 PM · Last Post: Hazel" will not
	   fit beside the counts on a 390px screen.

	   Targeted as "the last cell", not as ".lastpost". Only the THREAD list
	   has that class — forumdisplay_thread writes
	   <span class="lastpost smalltext">. The forum index does not:
	   forumbit_depth2_forum_lastpost is a bare <span class="smalltext">. So a
	   rule hung on .lastpost silently skipped every row on the index, which is
	   why the forum list ran its last post on from the end of the post count
	   and then broke across three lines. */
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:last-child:not(:has(> input)) {
		flex: 1 1 100%;
		font-size: 12.5px;
		color: var(--fg-3);
	}
	/* The index's last post is three runs separated by two <br>s:

	       <a>thread title</a><br>the date<br>by <a>member</a>

	   The reference layout puts the title on its own line and everything else
	   on one line under it. CSS cannot do that here, and it is worth writing
	   down why rather than leaving the next person to rediscover it:

	     hide both <br>s   the two bare text runs become adjacent, with no
	                       whitespace in the source between them, and render
	                       as "06:36 PMby H.A.N.K". A text node cannot be
	                       selected, so nothing can put the space back.
	     make the span a   flex wraps loose text in anonymous items, which
	     flex container    looked like the answer. It is not: a hidden <br>
	                       generates no box, so the runs either side of it are
	                       still ONE run and still one item. Measured: gap 0.
	     leave the <br>s   each one is blockified into an empty flex item and
	     in, with flex     still breaks the row. Measured: four rows, not two.
	     display:inline-   does not suppress a <br>'s break either, in flex or
	     block on the <br> in normal flow. Measured: three rows.

	   So: the title gets its own line by being a block, the FIRST <br> goes
	   (it would otherwise leave a blank line under a block), and the second
	   stays. Three rows, nothing fused, nothing depending on JavaScript.
	   Folding the date and the member onto one line needs the span rebuilt in
	   script, which is a job for the pass that brings the new editor. */
	.tborder:has(.forum_status) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:last-child > .smalltext > a:first-child {
		display: block;
		margin-bottom: 2px;
	}
	.tborder:has(.forum_status) tr > td:last-child br:first-of-type { display: none; }
	.tborder:has(.forum_status) tr > td:last-child > .smalltext > a:first-child {
		font-weight: 600;
	}
	.tborder:has(.forum_status) tr > td:last-child > .smalltext > a:first-child::after {
		content: " ·";
		color: var(--line-2);
		font-weight: 400;
	}


	/* ---- 22.5  the moderation checkbox column ----
	   Staff only, and when it is there it must stay reachable — but left in
	   the flow it lands on a line of its own at the bottom of every card,
	   because the line above it is already full. One checkbox, one wasted
	   row, on every thread a moderator looks at. Pinned to the top corner
	   instead, beside the reply count, which is where the eye already is. */
	.tborder:has(tr.inline_row) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:has(> input[type="checkbox"]) {
		position: absolute;
		top: 12px;
		right: var(--s4);
		margin: 0;
	}
	/* …and the count shuffles left to make room for it. Only when there IS
	   one: a member who cannot moderate should not see a gap where a control
	   they do not have would go. */
	.tborder:has(tr.inline_row) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)):has(input[type="checkbox"]) > td:nth-child(4) {
		right: 46px;
	}
	.tborder:has(tr.inline_row) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)):has(input[type="checkbox"]) > td:nth-child(3) {
		padding-right: 76px;
	}
	.tborder:has(tr.inline_row) tr > td:has(> input[type="checkbox"])::before {
		content: none;
	}
}


/* MyBB stacks the last post over two lines with a <br>. One is enough, at
   every width. */
.tborder .lastpost { font-size: 12.5px; color: var(--fg-3); }
.tborder .lastpost br { display: none; }
.tborder .lastpost a { color: var(--fg-2); }
.tborder .lastpost a:first-of-type::before {
	content: "· ";
	color: var(--line-2);
}


@media (max-width: 560px) {
	/* The old sheet dropped a third column here. Nothing needs dropping now —
	   the card already reflows — so this is only a little tighter. */
	.tborder:has(tr.inline_row) tr > td:nth-child(3) > div > span:first-child,
	.tborder:has(tr.inline_row) tr > td:nth-child(3) > div > span:first-child a,
	.tborder:has(.forum_status) tr > td:nth-child(2) > strong,
	.tborder:has(.forum_status) tr > td:nth-child(2) > strong > a { font-size: 16px; }
}


/* ==========================================================================
   22.6  TABLES THAT STAY TABLES
   --------------------------------------------------------------------------
   Everything not converted above still has columns, and some of them are
   wider than a phone. They now SCROLL rather than clip.

   This replaces `overflow: hidden` on .tborder in section 7, which was there
   to make the border-radius clip the first and last rows. It did that, and it
   also silently ate anything too wide — which is why private messages looked
   like an empty page on a phone: six columns of message list in a box that
   could not show them, with the overflow cut off rather than scrolled. A page
   that looks wrong gets fixed. A page that looks empty gets reported as a
   broken feature, months later, by a member who gave up on it.
   ========================================================================== */

.tborder { overflow: auto; }


/* ==========================================================================
   22.7  THE SEARCH FORM
   --------------------------------------------------------------------------
   Not a list, but it breaks at the same width and for a related reason, so
   it lives beside the rest of the narrow-screen work.

   MyBB's search template is two columns, and — unlike the posting form — a
   label and its field are NOT in the same row. They are in CONSECUTIVE rows:

       <tr><td class="tcat">Search by Keyword</td>
           <td class="tcat">Search by Username</td></tr>
       <tr><td class="trow1">[the keyword box]</td>
           <td class="trow1">[the username box]</td></tr>

   Stack that the ordinary way — every cell to display:block — and the cells
   come out in source order: both headings, then both fields. Which is what
   the live page was doing: "Search by Keyword", "Search by Username", and
   then an unlabelled box. Every field on the page was captioned by the wrong
   heading, or by none.

   `display: contents` is what fixes it. It makes the tbody and each row stop
   generating a box of their own, so every <td> becomes a direct flex item of
   the table, and `order` can then interleave them — heading, its field,
   heading, its field — across row boundaries.

   The order values are enumerated rather than computed because CSS cannot do
   arithmetic on :nth-child. The pattern is fixed: row 1 is the thead, and
   from row 2 on it is strictly heading row, content row, heading row. So for
   a heading in row r, column c, the field that belongs to it is in row r+1,
   column c. Sixteen rows is well past the ten this template has, and the
   spares cost nothing.
   ========================================================================== */

@media (max-width: 900px) {

	#content form[action="search.php"] > .tborder {
		display: flex;
		flex-direction: column;
	}
	#content form[action="search.php"] > .tborder > tbody,
	#content form[action="search.php"] > .tborder > tbody > tr { display: contents; }

	/* The title bar stays first, the rest is interleaved below it. */
	#content form[action="search.php"] > .tborder > tbody > tr:first-child > td { order: 0; }

	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(2) > td:nth-child(1) { order: 1; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(2) > td:nth-child(2) { order: 3; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(3) > td:nth-child(1) { order: 2; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(3) > td:nth-child(2) { order: 4; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(4) > td:nth-child(1) { order: 5; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(4) > td:nth-child(2) { order: 7; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(5) > td:nth-child(1) { order: 6; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(5) > td:nth-child(2) { order: 8; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(6) > td:nth-child(1) { order: 9; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(6) > td:nth-child(2) { order: 11; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(7) > td:nth-child(1) { order: 10; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(7) > td:nth-child(2) { order: 12; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(8) > td:nth-child(1) { order: 13; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(8) > td:nth-child(2) { order: 15; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(9) > td:nth-child(1) { order: 14; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(9) > td:nth-child(2) { order: 16; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(10) > td:nth-child(1) { order: 17; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(10) > td:nth-child(2) { order: 19; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(11) > td:nth-child(1) { order: 18; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(11) > td:nth-child(2) { order: 20; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(12) > td:nth-child(1) { order: 21; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(12) > td:nth-child(2) { order: 23; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(13) > td:nth-child(1) { order: 22; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(13) > td:nth-child(2) { order: 24; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(14) > td:nth-child(1) { order: 25; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(14) > td:nth-child(2) { order: 27; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(15) > td:nth-child(1) { order: 26; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(15) > td:nth-child(2) { order: 28; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(16) > td:nth-child(1) { order: 29; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(16) > td:nth-child(2) { order: 31; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(17) > td:nth-child(1) { order: 30; }
	#content form[action="search.php"] > .tborder > tbody > tr:nth-child(17) > td:nth-child(2) { order: 32; }

	/* A column heading is now a field label. */
	#content form[action="search.php"] td.tcat {
		padding: var(--s4) var(--s4) var(--s1) !important;
		background: none !important;
		border: 0 !important;
		color: var(--fg-2) !important;
	}
	#content form[action="search.php"] td.tcat strong {
		font-family: var(--body);
		font-size: 12px;
		font-weight: 400;
		letter-spacing: .08em;
		text-transform: uppercase;
	}
	#content form[action="search.php"] td.trow1,
	#content form[action="search.php"] td.trow2 {
		padding: 0 var(--s4) var(--s3) !important;
		border: 0 !important;
	}

	/* The keyword cell holds a nested table of its own — the box, then the
	   two "entire post / titles only" radios. It is already one column, so it
	   only needs to stop being 35 characters wide. */
	#content form[action="search.php"] td table { width: 100%; }
	#content form[action="search.php"] input[type="text"],
	#content form[action="search.php"] input[size],
	#content form[action="search.php"] select,
	#content form[action="search.php"] textarea {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	#content form[action="search.php"] input[type="checkbox"],
	#content form[action="search.php"] input[type="radio"],
	#content form[action="search.php"] input[type="submit"] { width: auto !important; }

	/* The forum picker is a multi-select; eight rows of it is most of a
	   screen. */
	#content form[action="search.php"] select[multiple] { height: 150px; }

	/* The radios and checkboxes read as a list of choices, not a paragraph. */
	#content form[action="search.php"] .smalltext input[type="radio"],
	#content form[action="search.php"] .smalltext input[type="checkbox"] {
		margin-right: var(--s2);
	}

	#content form[action="search.php"] + div input[name="submit"],
	#content form[action="search.php"] div[align="center"] input[name="submit"] {
		width: 100% !important;
		min-height: 48px;
	}
}


/* ==========================================================================
   22.8  THE CARD, SECOND PASS
   --------------------------------------------------------------------------
   Closing the gap between what section 22 built and the reference Sean sent:

     the author reads as a handle, @like-this, which is how he writes them
     everywhere else on his sites
     the forum index's latest thread sits in its own block under the counts
     rather than trailing off the end of them
     the reply count sits at the right of the title line, not in the meta row

   This is appended rather than merged into 22.2 so the two passes stay
   legible against each other. Everything here is a narrow-screen rule; the
   desktop table is untouched.
   ========================================================================== */

@media (max-width: 900px) {

	/* ---- the handle ----
	   MyBB prints the name bare. The @ is generated, so nothing in the
	   database changes and a rename still reads correctly. */
	.tborder:has(tr.inline_row) .author a::before,
	.tborder:has(.forum_status) tr > td:last-child > .smalltext > a:last-child::before {
		content: "@";
		opacity: .55;
	}
	.tborder:has(tr.inline_row) .author a {
		color: var(--brand-ink);
		border-bottom: 0;
	}

	/* ---- the count, up on the title line ----
	   A thread's reply count belongs beside its title, where you are already
	   looking, not three lines down among the dates. */
	.tborder:has(tr.inline_row) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(4),
	.tborder:has(.forum_status) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(3) {
		position: absolute;
		top: 15px;
		right: var(--s4);
		font-family: var(--display);
		font-size: 13px;
		color: var(--fg-2);
	}
	/* …which means the title must not run underneath it. The full row guard
	   is load-bearing here, not decoration: 22.2 zeroes the padding on every
	   cell with `tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td`, which carries
	   one more element than a plain `tr > td` and therefore wins. A rule that
	   looks like it should apply, and does not, is worse than no rule. */
	.tborder:has(tr.inline_row) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(3),
	.tborder:has(.forum_status) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(2) {
		padding-right: 44px;
	}
	/* The label that went with it, and the middot that separated it from the
	   view count, both belong to the old meta row. Full row guard again: the
	   rules in 22.3 that put them there carry it, so a cancel without it
	   loses and you get a middot sitting on its own in front of "75 posts". */
	.tborder:has(tr.inline_row) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(4)::after,
	.tborder:has(.forum_status) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(3)::after { content: none; }
	.tborder:has(tr.inline_row) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(5)::before,
	.tborder:has(.forum_status) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:nth-child(4)::before { content: none; }

	/* ---- the forum index's latest thread ----
	   Its own block at the foot of the card, title first and brighter than the
	   counts above it: it is the reason to go in. */
	/* Same reason as above: 22.2 sets `border: 0` on these cells. */
	.tborder:has(.forum_status) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) > td:last-child {
		margin-top: var(--s2);
		padding-top: var(--s3);
		border-top: 1px solid var(--line);
	}
	.tborder:has(.forum_status) tr > td:last-child > .smalltext > a:first-child {
		font-size: 14.5px;
		color: var(--fg);
	}
	.tborder:has(.forum_status) tr > td:last-child > .smalltext > a:first-child::after {
		content: none;
	}
	.tborder:has(.forum_status) tr > td:last-child > .smalltext > a:first-child strong {
		font-weight: 500;
	}

	/* A little more room between cards now that each one has two sections in
	   it rather than one. */
	:is(.tborder:has(tr.inline_row), .tborder:has(.forum_status)) tr:has(> :is(td.trow1, td.trow2, td.trow_shaded)) {
		padding-top: var(--s4);
		padding-bottom: var(--s4);
	}
}


/* ==========================================================================
   GXA — CHROME
   Layer 4: header, drawer, footer, User CP, portal, shoutbox, overlays.
   --------------------------------------------------------------------------
   Mostly a port of work already proven on the live site — the slim header,
   the footer pills, the User CP toggles and icons — with every hardcoded
   colour swapped for a token so both themes carry it. Behaviour is unchanged
   except where a comment says otherwise.
   ========================================================================== */


/* ==========================================================================
   23. HEADER
   --------------------------------------------------------------------------
   The old header was four bands and about 275px before the first forum title.
   This is two: logo and account controls on one line, nav on the next.

   The footer script does the moving; this only styles the result. Both are
   needed, and the script must run after the drawer script — it moves links
   out of lists the drawer clones from.
   ========================================================================== */

#header { min-height: 0; }

#logo {
	padding: var(--s2) 0;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
#logo img { width: 112px; max-width: 55vw; height: auto; display: block; }
#logo a { border-bottom: 0; }

#logo .wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	row-gap: 2px;
}
#logo .wrapper > a:first-child { order: 1; flex: 0 0 auto; }
.gxh-bar                      { order: 2; margin-left: auto; }
#logo ul.top_links            { order: 3; flex-basis: 100%; margin: 0; }
#gxa-nav-toggle               { order: 4; }

#header ul.menu, #footer ul.menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s1) var(--s2);
	margin: 0; padding: 0;
	list-style: none;
}
#header ul.menu li, #footer ul.menu li { margin: 0; display: block; }

#logo ul.top_links a {
	display: inline-block;
	padding: 7px 10px;
	font-size: 13.5px;
	color: var(--fg-2);
	background-image: none !important;
}
#logo ul.top_links a:hover { color: var(--brand-ink); }

/* The old panel. Hidden by the script, never by this file alone — it adds the
   class only once Log Out and the guest Register/Login have been carried
   somewhere safe, so a script that throws leaves a working header rather than
   one nobody can get out of. */
#panel.gxh-stripped { display: none; }

.gxh-bar { display: flex; align-items: center; gap: var(--s1); font-size: 13px; }
.gxh-bar a:link, .gxh-bar a:visited {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	min-height: 36px;
	padding: 0 10px;
	border-radius: var(--radius);
	border-bottom: 0;
	color: var(--fg-2);
	white-space: nowrap;
}
.gxh-bar a:hover { color: var(--brand-ink); background: var(--bg-3); }

.gxh-badge {
	display: inline-block;
	min-width: 17px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--on-accent);
	font-family: var(--display);
	font-size: 10.5px;
	line-height: 17px;
	text-align: center;
}

.gxh-search, .gxh-theme {
	width: 36px;
	justify-content: center;
	padding: 0 !important;
	font-size: 0;            /* the word is for the drawer clone; see the script */
}
.gxh-search::before, .gxh-theme::before {
	content: "";
	width: 17px; height: 17px;
	background-color: currentColor;
	-webkit-mask: var(--gxi) center / 17px 17px no-repeat;
	        mask: var(--gxi) center / 17px 17px no-repeat;
}
.gxh-search { --gxi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 4.5 4.5'/%3E%3C/svg%3E"); }
.gxh-theme { --gxi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9 7 7 0 0 1-9-9z'/%3E%3C/svg%3E"); }
:root[data-theme="light"] .gxh-theme { --gxi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M4.2 4.2l1.6 1.6M18.2 18.2l1.6 1.6M2.5 12h2.2M19.3 12h2.2M4.2 19.8l1.6-1.6M18.2 5.8l1.6-1.6'/%3E%3C/svg%3E"); }

/* ---- the account menu ---- */
.gxh-chip { position: relative; }
.gxh-chip > button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 36px;
	padding: 0 10px;
	background: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--fg);
	font-family: var(--body);
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
}
.gxh-chip > button:hover { border-color: var(--brand); color: var(--brand-ink); background: none; }
.gxh-chip > button::after {
	content: "";
	width: 7px; height: 7px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s ease;
}
.gxh-chip.is-open > button::after { transform: rotate(-135deg); margin-top: 2px; }

.gxh-menu {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 500;
	min-width: 190px;
	margin: 0;
	padding: var(--s1);
	list-style: none;
	background: var(--bg-3);
	border: 1px solid var(--line-2);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}
.gxh-chip.is-open .gxh-menu { display: block; }
.gxh-menu li { margin: 0; }
.gxh-bar .gxh-menu a:link, .gxh-bar .gxh-menu a:visited {
	display: block;
	min-height: 40px;
	line-height: 40px;
	padding: 0 var(--s3);
	border-radius: var(--radius);
	color: var(--fg-2);
}
.gxh-bar .gxh-menu a:hover { background: var(--bg-4); color: var(--brand-ink); }
.gxh-menu li.gxh-cut { margin-top: var(--s1); padding-top: var(--s1); border-top: 1px solid var(--line); }

/* Guest panel, for the pages where it still shows */
#panel .upper, #panel .lower { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
#panel .upper .wrapper, #panel .lower .wrapper {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2);
}
#panel a { color: var(--fg-2); background-image: none !important; }
#panel a:hover { color: var(--brand-ink); }
#panel .upper a.register { background: var(--accent); color: var(--on-accent); padding: 9px var(--s4); border-radius: var(--radius); }
#panel .upper a.login { border: 1px solid var(--line-2); padding: 9px var(--s4); border-radius: var(--radius); }


/* ==========================================================================
   24. DRAWER
   --------------------------------------------------------------------------
   On a phone this IS navigation. Its contents are cloned from the header
   lists by the footer script; the originals are hidden below, never removed.
   ========================================================================== */

#gxa-nav-toggle, #gxa-drawer, #gxa-scrim { display: none; }

@media (max-width: 900px) {

	#logo ul.top_links, #panel .lower { display: none; }

	#gxa-nav-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		flex: 0 0 auto;
		order: 5;
		width: 46px; height: 46px;
		min-height: 0;
		padding: 0 11px;
		margin-left: var(--s1);
		background: transparent;
		border: 1px solid var(--line-2);
		border-radius: var(--radius);
	}
	#gxa-nav-toggle span {
		display: block; height: 2px; width: 100%;
		background: var(--fg);
		transition: transform .2s ease, opacity .2s ease;
	}
	body.gxa-drawer-open #gxa-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	body.gxa-drawer-open #gxa-nav-toggle span:nth-child(2) { opacity: 0; }
	body.gxa-drawer-open #gxa-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	#gxa-scrim { display: block; position: fixed; inset: 0; z-index: 9998;
		background: color-mix(in srgb, var(--bg) 78%, transparent); }
	#gxa-scrim[hidden] { display: none; }

	#gxa-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0; right: 0;
		height: 100dvh;
		width: min(86vw, 330px);
		z-index: 9999;
		background: var(--bg-2);
		border-left: 1px solid var(--line);
		transform: translateX(101%);
		transition: transform .22s ease;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	body.gxa-drawer-open #gxa-drawer { transform: translateX(0); }
	body.gxa-drawer-open { overflow: hidden; }

	.gxa-drawer-head {
		display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
		position: sticky; top: 0;
		padding: var(--s4);
		background: var(--bg);
		border-bottom: 1px solid var(--brand);
	}
	.gxa-drawer-user {
		font-family: var(--display); font-size: 14px;
		letter-spacing: .04em; text-transform: uppercase; color: var(--fg);
	}
	#gxa-drawer-close {
		min-height: 44px; min-width: 44px;
		padding: 0 var(--s2);
		background: transparent; border: 0;
		color: var(--fg-2); font-size: 28px; line-height: 1;
	}
	#gxa-drawer-close:hover { color: var(--brand-ink); background: none; }

	.gxa-drawer-group { border-bottom: 1px solid var(--line); }
	.gxa-drawer-group:last-child { border-bottom: 0; }
	.gxa-drawer-links a:link, .gxa-drawer-links a:visited {
		display: block;
		padding: 15px var(--s4);
		font-size: 16px;
		color: var(--fg);
		border-bottom: 1px solid var(--line);
		border-left: 3px solid transparent;
	}
	.gxa-drawer-group a:last-child { border-bottom: 0; }
	.gxa-drawer-links a:hover {
		color: var(--brand-ink);
		border-left-color: var(--brand);
		background: var(--bg-3);
	}

	/* The phone bar keeps the unread count and the way into the account.
	   Everything else is in the drawer, and the hamburger must never be
	   pushed off the edge — which is what happened when it was not pinned. */
	.gxh-bar a.gxh-new, .gxh-bar a.gxh-search, .gxh-bar a.gxh-theme { display: none; }
	.gxh-bar { gap: var(--s1); min-width: 0; flex: 0 1 auto; }
	.gxh-chip { min-width: 0; }
	.gxh-chip > button { max-width: 30vw; }
	.gxh-chip > button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

	.gxh-bar a.gxh-pm {
		position: relative;
		width: 36px; padding: 0;
		justify-content: center;
		font-size: 0;
		--gxi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.6 7.2 8.4 6 8.4-6'/%3E%3C/svg%3E");
	}
	.gxh-bar a.gxh-pm::before {
		content: ""; width: 18px; height: 18px;
		background-color: currentColor;
		-webkit-mask: var(--gxi) center / 18px 18px no-repeat;
		        mask: var(--gxi) center / 18px 18px no-repeat;
	}
	.gxh-bar a.gxh-pm .gxh-badge {
		position: absolute; top: -1px; right: -3px;
		min-width: 15px; font-size: 9.5px; line-height: 15px;
	}

	#logo { padding: var(--s2) 0; }
	#logo img { width: 96px; }
	.wrapper { padding-inline: var(--s3); }
}


/* ==========================================================================
   25. FOOTER
   ========================================================================== */

#footer { clear: both; background: var(--bg); border-top: 1px solid var(--line); }

#footer .upper { background: transparent; border-bottom: 0; padding: var(--s4) 0 var(--s1); }
#footer .lower { background: transparent; padding: var(--s1) 0 var(--s5); }

#footer .upper .wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }

#footer .upper ul.bottom_links { justify-content: center; gap: var(--s2); float: none; margin: 0; }

#footer .upper ul.bottom_links a,
#footer .upper ul.bottom_links a:link,
#footer .upper ul.bottom_links a:visited {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--s4);
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg-3);
	color: var(--fg-2);
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
}
#footer .upper ul.bottom_links a:hover {
	color: var(--brand-ink);
	border-color: var(--brand);
	background: var(--bg-4);
}

#footer .lower .wrapper {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-align: center;
}
#footer .lower #current_time,
#footer .lower #copyright {
	display: block;
	float: none;
	text-align: center;
	font-size: 12px;
	color: var(--fg-3);
}
#footer .lower #copyright a { color: var(--fg-3); border-bottom: 1px solid var(--line); }
#footer .lower #copyright a:hover { color: var(--brand-ink); border-bottom-color: var(--brand); }

/* MyBB's Advanced Stats. Administrators only — members never saw it. Turn it
   off properly at ACP -> Server and Optimization Options. */
#debug { display: none !important; }


/* ==========================================================================
   26. USER CP AND ACCOUNT PAGES
   --------------------------------------------------------------------------
   These use a layout MyBB builds nowhere else: an unclassed table directly
   inside the content wrapper, menu in the first cell, page in the second. On
   a phone that gives a ~130px column of wrapped text.

   The stacking selector is load-bearing and every part of it earns its place:
     > .wrapper        direct children only, or it reaches every nested table
     :not(.tborder)    forum tables, thread lists and PM folders are all
                       .tborder — without this they unstack
     :has(.tborder)    the layout table is the one CONTAINING the panels
   ========================================================================== */

@media (max-width: 900px) {

	#content .wrapper table:not(.tborder):has(> tbody > tr > td > table.tborder),
	#content .wrapper table:not(.tborder):has(> tbody > tr > td > table.tborder) > tbody,
	#content .wrapper table:not(.tborder):has(> tbody > tr > td > table.tborder) > tbody > tr {
		display: block !important;
		width: 100% !important;
	}
	#content .wrapper table:not(.tborder):has(> tbody > tr > td > table.tborder) > tbody > tr > td {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
	}
	#content .wrapper table:not(.tborder):has(> tbody > tr > td > table.tborder)
		> tbody > tr > td:first-child { margin-bottom: var(--s4); }

	#content td:has(> .usercp_nav_item) { padding: 0 !important; }

	.usercp_nav_item {
		display: flex !important;
		align-items: center;
		min-height: 48px;
		border-bottom: 1px solid var(--line);
		border-left: 3px solid transparent;
		font-size: 15px;
	}
	.usercp_nav_item:last-child { border-bottom: 0; }
	.usercp_nav_item:hover, .usercp_nav_item:active {
		background: var(--bg-4);
		color: var(--brand-ink);
		border-left-color: var(--brand);
	}
}

/* ---- the gold MENU bar and its sub-groups ----
   Styling only; the toggling is a footer script. The gold slab keeps literal
   colours because it is a fixed object in both themes — dark lettering on
   gold reads the same either way, and tokenising it would make it vanish into
   a light page. */
.gxu-head {
	cursor: pointer;
	position: relative;
	display: block;
	padding: 14px 38px 14px 46px !important;
	background: linear-gradient(180deg, #E8A23A 0%, #C9922E 100%) !important;
	color: #1A1206 !important;
	border-bottom: 0 !important;
	border-radius: var(--radius);
	box-shadow: 0 2px 0 #8A6116;
	font-family: var(--display);
	font-size: 14px !important;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.gxu-head:hover, .gxu-head:focus-visible { filter: brightness(1.07); }
.gxu-head::before {
	content: "";
	position: absolute; left: 15px; top: 50%;
	width: 21px; height: 21px; margin-top: -10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1206' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 7h10M19 7h2M3 17h6M15 17h6'/%3E%3Ccircle cx='16' cy='7' r='2.4'/%3E%3Ccircle cx='12' cy='17' r='2.4'/%3E%3C/svg%3E") center / 21px no-repeat;
}
.gxu-hint {
	display: block;
	margin-top: 3px;
	font-family: var(--body);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: none;
	color: rgba(26, 18, 6, .72);
}

/* Sub-groups are deliberately NOT gold: one master bar and three things
   inside it, all gold, is no hierarchy at all. */
.gxu-sub {
	cursor: pointer;
	position: relative;
	display: flex;            /* MyBB wraps the label in a <div>; see below */
	align-items: center;
	gap: var(--s2);
	min-height: 44px;
	box-sizing: border-box;
	padding: 13px 44px 13px 18px !important;
	border-left: 3px solid var(--brand) !important;
	font-size: 12.5px !important;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}
/* The label sits in a <div>, so an inline count after it would drop to its own
   line. Flex is what keeps them on one row. */
.gxu-sub > div { min-width: 0; }
.gxu-sub .expcolimage { display: none !important; }
.gxu-sub, .gxu-sub * { color: var(--brand-ink) !important; }
.gxu-sub:hover, .gxu-sub:focus-visible { background-color: var(--bg-4) !important; }
.gxu-sub .gxu-count { flex: 0 0 auto; margin-left: auto; font-weight: 500; letter-spacing: 0; opacity: .6; }

.gxu-head::after, .gxu-sub::after {
	content: "";
	position: absolute; top: 50%;
	width: 10px; height: 10px;
	border-right: 2.6px solid currentColor;
	border-bottom: 2.6px solid currentColor;
	transform: rotate(45deg);
	transition: transform .16s ease;
}
.gxu-head::after { right: 18px; margin-top: -7px; color: #1A1206; }
.gxu-sub::after  { right: 17px; margin-top: -7px; width: 8px; height: 8px; border-width: 2.2px; }
.gxu-head.gxu-shut::after { transform: rotate(-45deg); margin-top: -5px; }
.gxu-sub.gxu-shut::after  { transform: rotate(-45deg); margin-top: -4px; }
.gxu-row-hidden { display: none !important; }


/* ==========================================================================
   27. PORTAL
   --------------------------------------------------------------------------
   Two structures, and confusing them has broken the forum index three times:
     - the OUTER layout table has no class, sits OUTSIDE #content, and its
       sidebar cell carries width="200"
     - each announcement's INNER table is .tfixed inside a td.trow1
   Never use `#content table:not(.tborder):has(.tborder)` here — that matches
   forum tables, not the portal.
   ========================================================================== */

@media (max-width: 900px) {
	#container > table:has(> tbody > tr > td[width="200"]),
	#container > table:has(> tbody > tr > td[width="200"]) > tbody,
	#container > table:has(> tbody > tr > td[width="200"]) > tbody > tr,
	.portal_layout > tbody > tr > td {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
}


/* ==========================================================================
   28. CHAT STRIP
   --------------------------------------------------------------------------
   The strip is pasted at the bottom of the `header` template, so it renders
   inside #content > .wrapper, which already carries the gutter. Without this
   it sits one gutter further in than everything else on the page.
   ========================================================================== */

#content .wrapper .gxc-wrap, .wrapper .gxc-wrap {
	padding-left: 0; padding-right: 0; max-width: none;
}


/* ==========================================================================
   29. SHOUTBOX
   --------------------------------------------------------------------------
   .entry rows are DIVs using display:table-row, not real table markup, so the
   mobile rules that target tr/td never reach them.
   ========================================================================== */

#shoutbox {
	margin-bottom: var(--s5);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-2);
	overflow: hidden;
}
#shoutbox .head {
	padding: var(--s3) var(--s4);
	background: var(--bg);
	border-bottom: 1px solid var(--brand);
	font-family: var(--display);
	font-size: 14px;
	letter-spacing: .05em;
	text-transform: uppercase;
}
#shoutbox.front .head { cursor: pointer; }
#shoutbox.collapsed .body { display: none; }
#shoutbox .window { border-top: 1px solid var(--line); overflow-y: auto; }
#shoutbox .data { display: table; width: 100%; font-size: 14px; }
#shoutbox .entry { display: table-row !important; }
#shoutbox .entry:nth-child(even) { background: var(--bg-3); }
#shoutbox .entry.new { background: color-mix(in srgb, var(--brand) 10%, var(--bg-2)); }
#shoutbox .entry > div { display: table-cell; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
#shoutbox .user { border-right: 1px solid var(--line); text-align: right; white-space: nowrap; }
#shoutbox .text { width: 100%; color: var(--fg); word-wrap: break-word; }
#shoutbox .info { color: var(--fg-3); font-size: 12px; text-align: right; white-space: nowrap; }
#shoutbox input.text {
	width: 100%; margin: 0; padding: var(--s3) var(--s4);
	border: 0; background: var(--bg-sunk); color: var(--fg); font-size: 16px;
}


/* ==========================================================================
   30. OVERLAYS
   ========================================================================== */

.blocker {
	position: fixed; inset: 0; z-index: 9999;
	padding: var(--s5);
	background: color-mix(in srgb, var(--bg) 84%, transparent);
	text-align: center; overflow: auto;
}
.modal, div.jqi {
	display: inline-block;
	width: 420px; max-width: 92%;
	padding: var(--s1);
	background: var(--bg-3);
	color: var(--fg);
	border: 1px solid var(--line-2);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	text-align: left;
}
div.jqi .jqititle { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 16px; }
div.jqi .jqimessage { padding: var(--s3) var(--s4); color: var(--fg); }
div.jqi .jqibuttons {
	display: flex; justify-content: flex-end;
	margin: 0 calc(var(--s1) * -1) calc(var(--s1) * -1);
	border-top: 1px solid var(--line);
	background: var(--bg-2);
}
div.jqi .jqibuttons button {
	margin: 0; padding: 14px var(--s5);
	background: transparent; border: 0; border-left: 1px solid var(--line);
	color: var(--fg-2);
}
div.jqi .jqibuttons button.jqidefaultbutton { color: var(--brand-ink); }
div.jqi .jqibuttons button:hover { color: var(--brand-ink); background: var(--bg-4); }

.jGrowl { position: fixed; z-index: 9999; color: var(--fg); font-family: var(--body); font-size: 14px; }
.jGrowl.top-right { right: 0; top: 0; }
.jGrowl.bottom-right { right: 0; bottom: 0; }
.jGrowl-notification {
	width: 260px; min-height: 40px;
	margin: var(--s3); padding: var(--s3);
	background: var(--bg-3);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	word-break: break-word;
}
.jGrowl-notification .jGrowl-header { font-family: var(--display); font-size: 13px; letter-spacing: .04em; }
.jGrowl-notification .jGrowl-close {
	float: right; padding: 0 var(--s1);
	min-height: 0; background: none; border: 0; color: inherit; font-size: 16px;
}
.jGrowl .jgrowl_success { background: color-mix(in srgb, var(--ok) 18%, var(--bg-3));  border-color: var(--ok); }
.jGrowl .jgrowl_error   { background: color-mix(in srgb, var(--bad) 18%, var(--bg-3)); border-color: var(--bad); }
@media print { .jGrowl { display: none; } }


/* ==========================================================================
   31. USER CP MENU ICONS
   --------------------------------------------------------------------------
   Append to the END of global.css, after section 23.

   What was wrong: MyBB ships these as one bitmap, sprite.png, sliced into 20px
   rows and positioned per class from usercp.css —

       .usercp_nav_item  { background-image: url(../../../sprite.png); }
       .usercp_nav_email { background-position: 0 -140px; }

   Two things follow, and both are visible on the live page. It is flat
   light-theme clip art, which is why it reads as 2004 on a dark UI. And the
   rows in this menu are TALLER than 20px, so the next sprite row bleeds in
   underneath — that sliver below Group Memberships is the following icon, not
   a broken image.

   Section 20 already dropped these sprites, but only inside
   @media (max-width: 900px). That is why the phone looked clean and the
   desktop did not. This replaces them at every width.

   Drawn as MASKS rather than background images, which is the reason to bother:
   a mask is painted in `currentColor`, so each icon takes its own link's
   colour and goes gold on hover along with the text. A bitmap sprite is
   whatever colour it was saved as and can never do that.

   The class names come from MyBB's own usercp_nav templates rather than from
   reading the rendered page — note usercp_nav_fsubscriptions and
   usercp_nav_viewprofile, neither spelled the way you would guess.
   ========================================================================== */

/* ---------- 24.1  Kill the sprite, make room for the icon ---------------- */
.usercp_nav_item {
	background-image: none !important;
	position: relative;
	padding-left: 38px !important;
}

/* The nested items keep their indent; the icon moves in with them. */
.usercp_nav_sub_pmfolder,
.usercp_nav_trash_pmfolder,
.usercp_nav_email,
.usercp_nav_password,
.usercp_nav_username,
.usercp_nav_editsig,
.usercp_nav_avatar {
	padding-left: 54px !important;
}


/* usercp.css gives these `padding: 1px 0 1px 23px`, which was sized for a 20px
   sprite and leaves a 27px row — cramped once there is a real icon in it, and a
   poor click target. Section 20 already fixes this below 900px; desktop never
   got the same treatment. Vertical only, so section 20 keeps the mobile sizing
   it sets. */
@media (min-width: 901px) {
	.usercp_nav_item {
		padding-top: 9px !important;
		padding-bottom: 9px !important;
	}
}


/* ---------- 24.2  The icon ------------------------------------------------
   Painted only on the classes that actually have a shape below. A blanket
   `.usercp_nav_item::before` would give any nav entry without one — a plugin's
   own, say — an 18px block of solid colour, because an empty mask masks
   nothing. */
.usercp_nav_home::before,
.usercp_nav_composepm::before,
.usercp_nav_pmfolder::before,
.usercp_nav_sub_pmfolder::before,
.usercp_nav_trash_pmfolder::before,
.usercp_nav_pmtracking::before,
.usercp_nav_pmfolders::before,
.usercp_nav_profile::before,
.usercp_nav_viewprofile::before,
.usercp_nav_email::before,
.usercp_nav_password::before,
.usercp_nav_username::before,
.usercp_nav_editsig::before,
.usercp_nav_avatar::before,
.usercp_nav_options::before,
.usercp_nav_usergroups::before,
.usercp_nav_editlists::before,
.usercp_nav_attachments::before,
.usercp_nav_drafts::before,
.usercp_nav_subscriptions::before,
.usercp_nav_fsubscriptions::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;

	background-color: currentColor;   /* the icon IS the link colour */
	-webkit-mask: var(--gxi) center / 18px 18px no-repeat;
	        mask: var(--gxi) center / 18px 18px no-repeat;
	opacity: .72;
	transition: opacity .14s ease;
	pointer-events: none;
}

.usercp_nav_sub_pmfolder::before,
.usercp_nav_trash_pmfolder::before,
.usercp_nav_email::before,
.usercp_nav_password::before,
.usercp_nav_username::before,
.usercp_nav_editsig::before,
.usercp_nav_avatar::before {
	left: 28px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	-webkit-mask-size: 16px 16px;
	        mask-size: 16px 16px;
}

.usercp_nav_item:hover::before,
.usercp_nav_item:active::before { opacity: 1; }


/* ---------- 24.3  The shapes ---------------------------------------------
   One line each: the paint rule above reads the shape out of --gxi, so adding
   an icon later is a single declaration rather than a new block. */
.usercp_nav_home { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M3%2010.5%2012%203l9%207.5%22/><path%20d=%22M5.5%209.3V20h13V9.3%22/><path%20d=%22M9.5%2020v-6h5v6%22/></svg>"); }
.usercp_nav_composepm { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M12.5%206.5%2017.5%2011.5%209%2020H4v-5z%22/><path%20d=%22M15%204l5%205%22/></svg>"); }
.usercp_nav_pmfolder { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M3%2013.5h5l1.5%203h5l1.5-3h5%22/><path%20d=%22M5.5%205h13L21%2013.5V19a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1v-5.5z%22/></svg>"); }
.usercp_nav_sub_pmfolder { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M9%205.5%2015.5%2012%209%2018.5%22/></svg>"); }
.usercp_nav_trash_pmfolder { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M4%207h16%22/><path%20d=%22M10%207V4h4v3%22/><path%20d=%22M6.5%207%207.5%2020h9l1-13%22/><path%20d=%22M10.5%2011v5M13.5%2011v5%22/></svg>"); }
.usercp_nav_pmtracking { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M2%2012s3.6-6.5%2010-6.5S22%2012%2022%2012s-3.6%206.5-10%206.5S2%2012%202%2012z%22/><circle%20cx=%2212%22%20cy=%2212%22%20r=%222.8%22/></svg>"); }
.usercp_nav_pmfolders { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M3%207a1%201%200%200%201%201-1h4.8l2%202.4H20a1%201%200%200%201%201%201V19a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1z%22/></svg>"); }
.usercp_nav_profile { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx=%2212%22%20cy=%228%22%20r=%223.8%22/><path%20d=%22M4.5%2020.5c0-4.1%203.4-6.5%207.5-6.5s7.5%202.4%207.5%206.5%22/></svg>"); }
.usercp_nav_viewprofile { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/><circle%20cx=%2212%22%20cy=%2210%22%20r=%222.8%22/><path%20d=%22M6.8%2019c.9-2.5%202.8-3.8%205.2-3.8s4.3%201.3%205.2%203.8%22/></svg>"); }
.usercp_nav_email { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x=%223%22%20y=%225%22%20width=%2218%22%20height=%2214%22%20rx=%222%22/><path%20d=%22m3.6%207.2%208.4%206%208.4-6%22/></svg>"); }
.usercp_nav_password { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x=%224%22%20y=%2210%22%20width=%2216%22%20height=%2211%22%20rx=%222%22/><path%20d=%22M8%2010V7a4%204%200%200%201%208%200v3%22/></svg>"); }
.usercp_nav_username { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x=%223%22%20y=%225%22%20width=%2218%22%20height=%2214%22%20rx=%222%22/><circle%20cx=%228.8%22%20cy=%2211%22%20r=%222.1%22/><path%20d=%22M5.6%2016.4c.6-1.6%201.8-2.4%203.2-2.4s2.6.8%203.2%202.4%22/><path%20d=%22M15%2010h4M15%2013.6h4%22/></svg>"); }
.usercp_nav_editsig { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M3%2020.5h18%22/><path%20d=%22M5.5%2016.5%2015.5%206.5l2.5%202.5-10%2010H5.5z%22/></svg>"); }
.usercp_nav_avatar { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x=%223%22%20y=%224.5%22%20width=%2218%22%20height=%2215%22%20rx=%222%22/><circle%20cx=%228.8%22%20cy=%2210%22%20r=%221.9%22/><path%20d=%22m4%2017.5%204.8-3.8%203.7%202.8%203-2.4%204.5%203.4%22/></svg>"); }
.usercp_nav_options { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M3%207h10M19%207h2M3%2017h6M15%2017h6%22/><circle%20cx=%2216%22%20cy=%227%22%20r=%222.4%22/><circle%20cx=%2212%22%20cy=%2217%22%20r=%222.4%22/></svg>"); }
.usercp_nav_usergroups { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx=%229%22%20cy=%228%22%20r=%223.3%22/><path%20d=%22M2.6%2020c0-3.6%202.8-5.7%206.4-5.7s6.4%202.1%206.4%205.7%22/><path%20d=%22M16.4%205.8a3.3%203.3%200%200%201%200%206.4%22/><path%20d=%22M18%2014.7c2.1.6%203.4%202.3%203.4%205.3%22/></svg>"); }
.usercp_nav_editlists { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx=%229.5%22%20cy=%228%22%20r=%223.5%22/><path%20d=%22M3%2020c0-3.7%203-5.9%206.5-5.9%22/><path%20d=%22m14.2%2017.2%202.3%202.3%204.5-4.8%22/></svg>"); }
.usercp_nav_attachments { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M19.5%2011.6%2011.8%2019.3a4.7%204.7%200%200%201-6.6-6.6l8.1-8.1a3.2%203.2%200%200%201%204.5%204.5l-8%208a1.7%201.7%200%200%201-2.4-2.4l7.4-7.4%22/></svg>"); }
.usercp_nav_drafts { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z%22/><path%20d=%22M14%203v5h5%22/><path%20d=%22M9%2013h6M9%2016.5h4%22/></svg>"); }
.usercp_nav_subscriptions { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M18%209.5a6%206%200%201%200-12%200c0%204.8-2%205.9-2%205.9h16s-2-1.1-2-5.9z%22/><path%20d=%22M10.3%2019.4a2%202%200%200%200%203.4%200%22/></svg>"); }
.usercp_nav_fsubscriptions { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M4%206.5h11M4%2012h9M4%2017.5h6%22/><path%20d=%22m15.5%2017%202.2%202.2%204-4.4%22/></svg>"); }



/* ==========================================================================
   33. THE LAST WORD
   --------------------------------------------------------------------------
   Everything above this was being overruled, and that — not the spacing
   values — is why the board kept looking haphazard however many times it was
   adjusted.

   Sean's pages load their stylesheets in this order:

       1  theme5/global.css        <- all of the work above
       2  theme2/css3.css          <- STOCK MyBB
       3  theme2/color_black.css   <- STOCK MyBB
       4  theme5/gxa-responsive.css
       5  css.php                  <- the plugins' own CSS

   Two stock MyBB stylesheets sit BETWEEN the theme and the patch file, and
   css3.css restyles .tborder, .thead, a.button, .post.classic .post_author,
   .pagination a, .pollbar and div.error — every one of which is styled above
   and every one of which was losing. Anything put in global.css was a
   suggestion; only what went in the patch file actually took effect. That is
   the whole explanation, and it is why the right answer is ONE stylesheet
   that loads LAST rather than a better-behaved second one.

   This section is that last word. It is deliberately explicit: where a stock
   sheet sets a property, this sets it back, by name, with a note saying
   which sheet it is answering. Nothing here relies on being "later in the
   file" — it relies on being in the file that loads last.

   The blocks further down (thread tools, attachments, moderation, the sort
   row) are not overrides at all. They are parts of MyBB I had never seen
   until Sean sent the real pages, because no reconstruction of mine had them
   in it.
   ========================================================================== */


/* ---- 33.1  answering css3.css ----------------------------------------- */

/* css3.css: `.tborder { border-radius: 7px }` and four corner radii on the
   last row. The corner rules assume a table; they are wrong once a row is a
   card, which is what put the odd clipped corners on the thread list. */
.tborder {
	border-radius: var(--radius-lg);
}
.tborder tbody tr:last-child > td:first-child,
.tborder tbody tr:last-child > td:last-child {
	border-radius: 0;
}

/* The header is the table's first row, so rounding its top corners to match
   the table is right — but it should be a decision, not a leftover from
   css3.css that happens to look fine. Stated here so it survives. */
.tborder > thead:first-child > tr:first-child > td.thead,
.tborder > tbody:first-child > tr:first-child > td.thead,
.tborder > tr:first-child > td.thead {
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* css3.css rounds and gradients the header strip. The gradient is a
   background-image, so setting a background COLOUR does not remove it — this
   is the rule that was leaving a grey sheen across every .thead. */
.thead,
.thead_collapsed,
.tcat,
.tcat_menu,
.trow1, .trow2, .tfoot {
	background-image: none;
}

/* css3.css: `a.button { border-radius: 3px }` plus a gradient. Section 5
   already describes these buttons in full; this stops the stock sheet
   rewriting two of the properties. */
a.button,
input.button,
button,
input[type="submit"] {
	background-image: none;
	border-radius: var(--radius);
}

/* css3.css rounds the author rail's corners, which on a phone is a strip
   across the top of the post and should not be rounded at its bottom. */
.post.classic .post_author {
	border-radius: 0;
}

/* css3.css: `.pollbar` and `div.error` both get a radius and a gradient. */
.pollbar { background-image: none; }
div.error { background-image: none; }


/* ---- 33.2  the pager ---------------------------------------------------
   Thirteen pixels of text in a 2009 box, and on a phone the page numbers end
   up jammed against Post Thread. They are the one control that has to be
   easy to hit with a thumb. */
.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	margin: var(--s4) 0;
	font-size: 13px;
}
.pagination .pages { color: var(--fg-3); }
.pagination a,
.pagination span.pagination_current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0 var(--s3);
	background: var(--bg-3);
	background-image: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--fg-2);
	font-size: 14px;
	font-weight: 500;
}
.pagination a:hover { background: var(--bg-4); color: var(--fg); }
.pagination span.pagination_current {
	background: var(--brand);
	border-color: var(--brand);
	color: #1A1206;
	font-weight: 700;
}


/* ---- 33.3  the thread tools list ---------------------------------------
   <ul class="thread_tools"> — printable version, send to a friend,
   subscribe, add a poll. MyBB draws each with a 16px sprite as a background
   image and 11px text, which is the row of tiny misaligned icons at the foot
   of every thread. The sprite goes; these are four quiet links. */
ul.thread_tools,
ul.thread_tools li {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.thread_tools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s4);
	margin: var(--s5) 0;
	padding: var(--s4) 0;
	border-top: 1px solid var(--line);
}
ul.thread_tools li {
	padding: 0;
	margin: 0;
	background-image: none;
	font-size: 13px;
}
ul.thread_tools li a {
	display: inline-block;
	padding: var(--s2) 0;
	color: var(--fg-3);
	border-bottom: 0;
}
ul.thread_tools li a:hover { color: var(--fg); }


/* ---- 33.4  the moderation blocks ---------------------------------------
   #inlinemoderation_options and #moderator_options. Staff only, but staff
   are reading on a phone too, and these were two stacked grey boxes with a
   select and a GO floated somewhere near it. */
#inlinemoderation_options,
#moderator_options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	margin: var(--s4) 0;
	padding: var(--s3) var(--s4);
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
#inlinemoderation_options .smalltext,
#moderator_options .smalltext {
	flex: 1 1 100%;
	color: var(--fg-3);
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
#inlinemoderation_options select,
#moderator_options select {
	flex: 1 1 180px;
	min-width: 0;
	margin: 0;
}
#inlinemoderation_options input.button,
#moderator_options input.button {
	flex: 0 0 auto;
	min-height: 42px;
}


/* ---- 33.5  the sort row ------------------------------------------------
   forumdisplay_forumsort: three selects and a Go, which MyBB lays out as
   loose inline text so the boxes come out three different widths.

   `:not(:has(table))` is the whole ballgame, and this is the THIRD time this
   stylesheet has been bitten by the same thing: a rule keyed to a field NAME
   that is not unique to the form it was written for.

       select[name="fid"]        also the private-message "Move to" folder —
                                 hid the entire PM form on every phone
       input[name="keywords"]    also the full search page — made it a flex
                                 row and shrank its Search button to 102px
       select[name="sortby"]     also the search page's sorting options —
                                 would have done it again

   MyBB reuses field names freely across pages. The reliable discriminator
   here is shape, not naming: the two one-line forms contain no table, the
   full search page does. Any future rule in this file that matches on a
   name should assume the name is used somewhere else too. */
#content form:has(select[name="sortby"]):not(:has(table)) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	margin: var(--s4) 0;
}
#content form:has(select[name="sortby"]):not(:has(table)) select {
	flex: 1 1 150px;
	min-width: 0;
	margin: 0;
}
#content form:has(select[name="sortby"]):not(:has(table)) input.button {
	flex: 0 0 auto;
	min-height: 44px;
}


/* ---- 33.6  attachments -------------------------------------------------
   Measured on the real new-reply page: this table renders 637px wide inside
   a 390px screen, so a quarter of it hangs off the right edge — the file
   picker and the Add Attachment button among it.

   The cause is an inline style="white-space: nowrap" on the cells, which
   MyBB writes into post_attachments itself. An inline style can only be
   beaten with !important, which is why there is one here. */
@media (max-width: 900px) {
	#content .tborder:has(input[type="file"]),
	#content .tborder:has(input[type="file"]) tbody,
	#content .tborder:has(input[type="file"]) tr,
	#content .tborder:has(input[type="file"]) > tbody > tr > td,
	#content .tborder:has(input[type="file"]) > tr > td {
		display: block;
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
		white-space: normal !important;
	}
	#content .tborder:has(input[type="file"]) input[type="file"] {
		display: block;
		width: 100%;
		margin-top: var(--s2);
	}
	/* The paperclip is a decorative 16px image in a cell of its own. */
	#content .tborder:has(input[type="file"]) td:has(> img:only-child) {
		display: none;
	}
}


/* ---- 33.7  thread review ----------------------------------------------
   newreply_threadreview — the last few posts, shown under the reply box so
   you can see what you are answering. Worth keeping and worth making quiet:
   it is reference, not the page. */
#content .tborder:has(.post_body) .thead strong {
	font-size: 13px;
}
@media (max-width: 900px) {
	#threadreview .post,
	#content .tborder .post { margin-bottom: 0; border: 0; border-radius: 0; }
}


/* ==========================================================================
   33.8  THE THREAD FURNITURE
   --------------------------------------------------------------------------
   Everything between the last post and the quick reply box, which until the
   real pages arrived I had never seen laid out. All of it measured from
   Sean's own showthread, not from a reconstruction.
   ========================================================================== */

/* ---- New Reply, at the top ----
   MyBB floats it right in a band of its own, so on a phone it is a small
   outline button marooned in 300px of empty dark. It is the action of the
   page; it should look like the one on the forum list. */
#content div.float_right:has(> a[href^="newreply.php"]),
#content div.float_right:has(> a.button[href*="newreply.php"]) {
	float: none;
	display: block;
	margin: 0 0 var(--s3);
	text-align: left;
}
#content a.button[href^="newreply.php"] {
	display: inline-flex;
	min-height: 48px;
	padding: 0 24px;
	background: var(--brand);
	border-color: var(--brand);
	color: #1A1206;
	font-family: var(--body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
}

/* ---- "Next Oldest | Next Newest" against "Search Thread" ----
   showthread_search is a float_right form; the two navigation links are the
   plain <div> that follows it. A float next to a block means the block's
   text wraps into whatever column is left, which is how "Next Oldest" came
   out as "Next / Olde / st". They are two separate things and they get two
   separate lines. */
@media (max-width: 900px) {
	#content div.float_right:has(form[action="search.php"]) {
		float: none;
		margin: 0 0 var(--s3);
	}
	#content div.float_right:has(form[action="search.php"]) form {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s2);
	}
	#content div.float_right:has(form[action="search.php"]) input[type="text"] {
		flex: 1 1 160px;
		min-width: 0;
	}
	#content div.float_right:has(form[action="search.php"]) input[type="submit"] {
		flex: 0 0 auto;
	}
}

/* The two links themselves: quiet, on one line, not bold 15px shouting. */
.gxa-threadnav,
#content div:has(> strong > a[href*="action=nextoldest"]) {
	margin: var(--s3) 0;
	font-size: 13px;
}
#content div:has(> strong > a[href*="action=nextoldest"]) strong {
	font-weight: 400;
	color: var(--fg-3);
}
#content div:has(> strong > a[href*="action=nextoldest"]) a {
	color: var(--fg-2);
	white-space: nowrap;
}


/* ==========================================================================
   33.9  QUICK REPLY'S OPTION COLUMN
   --------------------------------------------------------------------------
   MyBB's markup:

       <td class="trow1" valign="top" width="22%">
           <strong>Message</strong><br />
           <span class="smalltext">Type your reply to this message here.<br /><br />
               <label><input type="checkbox"> Signature</label>
               <label><input type="checkbox"> Disable Smilies</label>
               ...

   A label, a sentence and four checkboxes, all inline in one run, which is
   why they came out scattered across three ragged lines with the boxes
   nowhere near their words.

   Flex works here where it failed on the forum index, and the difference is
   worth knowing: these runs are separated by ELEMENTS (the labels), so each
   becomes its own flex item. On the index they are separated only by <br>,
   and a hidden <br> leaves one continuous run.
   ========================================================================== */

#quick_reply_form td:first-child .smalltext,
#content form[name="quick_reply_form"] td:first-child .smalltext {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s3);
	margin-top: var(--s2);
}
#quick_reply_form td:first-child .smalltext br { display: none; }
#quick_reply_form td:first-child .smalltext label {
	display: flex;
	align-items: center;
	gap: var(--s2);
	margin: 0;
	cursor: pointer;
}
#quick_reply_form td:first-child .smalltext label strong { font-weight: 400; }
#quick_reply_form td:first-child .smalltext input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
}
/* The sentence is instruction, not an option, so it does not line up with
   the boxes under it. */
#quick_reply_form td:first-child > strong {
	display: block;
	color: var(--fg-2);
	font-family: var(--body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
}


/* GXA — generated from the footer template. Do not hand-edit:
   regenerate it, or the next footer change will overwrite you. */

.gxaq{
  display:block;text-decoration:none;
  background:
    linear-gradient(180deg, rgba(201,146,46,.07) 0%, rgba(0,0,0,0) 46%),
    var(--ink,#0C0A09);
  border-top:2px solid var(--gold,#C9922E);
  border-bottom:1px solid var(--rule,rgba(237,230,216,.13));
  box-shadow:inset 0 6px 22px -10px rgba(201,146,46,.55);
  color:var(--cream,#EDE6D8) !important;
  position:relative;overflow:hidden;
}
.gxaq[hidden]{display:none}

/* --- both of these exist because the strip moved OUT of #footer ---------
   Inside #footer, `#footer a:link` (specificity 1,0,1) was quietly setting
   border-bottom:0 on this whole <a>. Out here the base rule `a:link` wins
   over `.gxaq` instead and draws a 1px underline across the entire strip.
   a.gxaq:link is 0,2,1, which beats it outright. */
a.gxaq:link,
a.gxaq:visited{
  border-bottom:1px solid var(--rule,rgba(237,230,216,.13));
  color:var(--cream,#EDE6D8) !important;
}

/* The banner carries margin-top:26px for when it follows page content. Sat
   directly under this strip it should not — the two are one block. A general
   sibling combinator rather than `+` because the <style> and <script> tags of
   this block sit between them in the markup. */
.gxaq ~ .gxa-arcade-banner{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}

/* CRT scanlines. Almost invisible, but it stops the bar reading as a
   notification and starts it reading as a screen. */
.gxaq::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    180deg, rgba(0,0,0,.20) 0 1px, rgba(0,0,0,0) 1px 3px);
  opacity:.5;
}

.gxaq-in{
  display:flex;align-items:center;gap:14px;
  padding-top:10px;padding-bottom:10px;position:relative;z-index:1;
}

.gxaq-cab{
  flex:0 0 auto;display:inline-flex;color:var(--gold,#C9922E);
  filter:drop-shadow(0 0 7px rgba(201,146,46,.5));
}
.gxaq-cab svg{width:26px;height:26px;display:block}

.gxaq-body{flex:1 1 auto;min-width:0;display:block}

.gxaq-eyebrow{display:flex;align-items:baseline;gap:9px;margin-bottom:3px}
.gxaq-ttl{
  font-family:var(--display,'Arial Black',Impact,sans-serif);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold,#C9922E);
}
.gxaq-when{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cream-faint,rgba(237,230,216,.38));
}
.gxaq-when.urgent{color:#E8836F}

/* ---- podium ---- */
.gxaq-podium{
  display:flex;align-items:baseline;gap:0 20px;flex-wrap:nowrap;
  overflow:hidden;line-height:1.3;
}
.gxaq-slot{display:inline-flex;align-items:baseline;gap:6px;min-width:0}
.gxaq-slot .r{
  font-family:var(--display,'Arial Black',Impact,sans-serif);
  font-size:10px;color:var(--cream-faint,rgba(237,230,216,.38));
  flex:0 0 auto;
}
.gxaq-slot .n{
  font-size:13px;color:var(--cream-dim,rgba(237,230,216,.62));
  max-width:13ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gxaq-slot .s{
  font-family:var(--display,'Arial Black',Impact,sans-serif);font-size:14px;
  font-variant-numeric:tabular-nums;color:var(--cream,#EDE6D8);flex:0 0 auto;
}
/* The leader gets the glow. Everyone else is quiet by comparison — that
   contrast is the whole point of a high-score table. */
.gxaq-slot.lead .r{color:var(--gold,#C9922E)}
.gxaq-slot.lead .n{color:var(--cream,#EDE6D8)}
.gxaq-slot.lead .s{color:var(--gold,#C9922E);text-shadow:0 0 12px rgba(201,146,46,.45)}
.gxaq-slot.you .n,
.gxaq-slot.you .s{color:#EF9A1E}

/* ---- the line that does the work ---- */
.gxaq-call{
  display:block;margin-top:2px;font-size:12px;line-height:1.35;
  color:var(--cream-dim,rgba(237,230,216,.62));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gxaq-call b{color:var(--cream,#EDE6D8);font-weight:400;
  font-family:var(--display,'Arial Black',Impact,sans-serif);
  font-variant-numeric:tabular-nums}
.gxaq-call .hot{color:#EF9A1E}
.gxaq-call .crown{color:var(--gold,#C9922E)}

/* ---- button ---- */
.gxaq-play{
  flex:0 0 auto;align-self:center;
  font-family:var(--display,'Arial Black',Impact,sans-serif);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 18px;border-radius:2px;white-space:nowrap;
  background:var(--red,#C4342B);color:#F6EEE2;
  border:1px solid var(--red,#C4342B);
  box-shadow:0 3px 0 #7E2317;
}
.gxaq:hover .gxaq-play{background:#9B2820;border-color:#9B2820}
.gxaq:active .gxaq-play{transform:translateY(2px);box-shadow:0 1px 0 #7E2317}

/* ---- the leader moved since you last looked ---- */
.gxaq-new{
  display:none;margin-left:7px;padding:2px 6px;border-radius:2px;
  font-family:var(--display,'Arial Black',Impact,sans-serif);
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--red,#C4342B);color:#F6EEE2;vertical-align:2px;
}
.gxaq.changed .gxaq-new{display:inline-block;animation:gxaqPulse 1.1s ease-out 3}
@keyframes gxaqPulse{0%,100%{opacity:1}50%{opacity:.25}}

@media (max-width:760px){
  /* Only the leader fits; ranks 2 and 3 are noise at this width. */
  .gxaq-slot:not(.lead){display:none}
  .gxaq-in{gap:11px;padding-top:9px;padding-bottom:9px}
  .gxaq-cab svg{width:22px;height:22px}
  .gxaq-slot .n{max-width:10ch}
  .gxaq-play{padding:10px 14px;font-size:11px}
}
@media (max-width:420px){
  .gxaq-ttl{font-size:9px;letter-spacing:.16em}
  .gxaq-call{font-size:11px}
  .gxaq-play{padding:9px 12px}
}
@media (prefers-reduced-motion:reduce){
  .gxaq.changed .gxaq-new{animation:none}
  .gxaq:active .gxaq-play{transform:none}
}

.gxa-arcade-banner {
	display: block;
	position: relative;
	width: fit-content;             /* the frame hugs the art — see max-height */
	max-width: 100%;
	margin: 26px auto 8px;
	border-radius: 4px;
	overflow: hidden;
	line-height: 0;                 /* kills the baseline gap under the img */
	background: var(--raised, #16120B);
	box-shadow: 0 0 0 1px var(--rule, rgba(232,162,58,.22));
	-webkit-tap-highlight-color: transparent;
	transition: box-shadow .16s ease, transform .16s ease;
}

.gxa-arcade-banner img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	border: 0;

	/* A ceiling, because I have not seen the file. A wide strip never reaches
	   it and the rule does nothing — the art spans the full column. But a tall
	   or near-square image across 1144px of desktop would be a thousand pixels
	   of banner owning the whole screen, so it is held to 300px tall and the
	   FRAME shrinks to match, centred, rather than leaving dead bars either
	   side of the art. Nothing is ever cropped. Raise or delete max-height if
	   you want it bigger. */
	max-height: 300px;
}

/* The banner sits at the end of the page, where the eye is already leaving.
   A hover state that does nothing until you touch it is no use there, so the
   frame itself is the signal — and it firms up when you do reach it. */
.gxa-arcade-banner:hover,
.gxa-arcade-banner:focus-visible {
	box-shadow: 0 0 0 2px var(--gold, #E8A23A), 0 8px 22px rgba(0, 0, 0, .45);
	transform: translateY(-2px);
}
.gxa-arcade-banner:active { transform: translateY(0); }

/* A label, because an image alone does not tell anyone it is clickable —
   and if the artwork already says "arcade", this still adds the verb. It sits
   in the corner rather than across the middle so it cannot cover the art. */
.gxa-arcade-cta {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 7px 13px;
	border-radius: 3px;
	background: linear-gradient(180deg, #E8A23A 0%, #C9922E 100%);
	color: #1A1206;
	font-family: var(--display, 'Archivo Black', Arial Black, sans-serif);
	font-size: 11.5px;
	line-height: 1.1;
	letter-spacing: .09em;
	text-transform: uppercase;
	box-shadow: 0 2px 0 var(--gold-deep, #8A6116);
	pointer-events: none;           /* the whole banner is the link */
}

/* On a narrow phone the artwork is only ~110px tall and a floating pill eats
   a tenth of it. Below 520px the label goes full width underneath instead,
   where it reads as a button and costs the art nothing. */
@media (max-width: 520px) {
	.gxa-arcade-banner { margin-top: 20px; }
	/* No ceiling on a phone: the column is only ~362px, so even a square file
	   is ~322px tall — fine at the very bottom of a page — and letting it fill
	   the width beats a narrow card floating in the middle of the screen. */
	.gxa-arcade-banner { width: auto; }
	.gxa-arcade-banner img { max-height: none; width: 100%; }
	.gxa-arcade-cta {
		position: static;
		display: block;
		border-radius: 0;
		padding: 12px 10px;
		text-align: center;
		font-size: 12px;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gxa-arcade-banner { transition: none; }
	.gxa-arcade-banner:hover,
	.gxa-arcade-banner:focus-visible { transform: none; }
}

/* ==========================================================================
   1. THE ARCADE MODULE — score strip + banner as one thing
   ==========================================================================
   This block sits after both arcade blocks in the template, so it wins on
   source order without needing !important, except where the originals use it
   themselves. */

/* The strip is the top half: keep its full width, drop the bottom edge so it
   meets the artwork with no seam. a.gxaq:link in the original re-adds that
   border at 0,2,1, so this needs the same weight or more. */
a.gxaq,
a.gxaq:link,
a.gxaq:visited {
	border-bottom: 0 !important;
}

/* The banner is the bottom half. It was a centred card of its own width with
   its own rounded corners and its own shadow — three reasons it read as a
   separate object. Now it is simply the lower half of the strip. */
.gxa-arcade-banner {
	display: block;
	width: auto;
	max-width: none;
	margin: 0 0 0 0;
	border-radius: 0;
	box-shadow: none;
	border-bottom: 1px solid var(--line, var(--rule, rgba(237, 230, 216, .13)));
	transform: none !important;        /* the lift-on-hover belonged to a card */
}
.gxa-arcade-banner:hover,
.gxa-arcade-banner:focus-visible {
	box-shadow: none;
	border-bottom-color: var(--brand, var(--gold, #C9922E));
}

/* Full width, fixed band height, cropped rather than scaled. At 1180px a
   2.6:1 strip would otherwise be 450px of banner — half a laptop screen,
   at the end of a page, for a link that is also in the bottom bar. */
.gxa-arcade-banner img {
	width: 100%;
	max-width: none;
	max-height: none;
	height: clamp(104px, 13vw, 168px);
	object-fit: cover;
	object-position: center;
}

/* The gold ENTER THE ARCADE bar. The strip above it already has a PLAY
   button, and the bottom bar has an Arcade tab. Three doors, one room. */
.gxa-arcade-cta { display: none !important; }

@media (max-width: 520px) {
	.gxa-arcade-banner { margin-top: 0; }
	.gxa-arcade-banner img { height: clamp(96px, 30vw, 140px); }
}


/* ==========================================================================
   2. THE FOOTER ITSELF
   ==========================================================================
   What is left after the duplicates go: one line of links nobody needs often,
   and one line of fine print. It should take up the room that implies. */

#footer {
	margin-top: var(--s5, 24px);
	padding: var(--s5, 24px) var(--s4, 16px) var(--s6, 32px);
	background: transparent;
	border-top: 1px solid var(--line, var(--rule, rgba(237, 230, 216, .13)));
	text-align: center;
	font-family: var(--body, 'Archivo', Arial, sans-serif);
}

#footer .wrapper { max-width: var(--shell, 1180px); margin: 0 auto; }

.gxf-links {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--fg-3, var(--cream-faint, rgba(237, 230, 216, .42)));
}
.gxf-links a {
	color: var(--fg-2, var(--cream-dim, rgba(237, 230, 216, .68))) !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
	padding: 4px 2px;              /* a tappable target, not a 13px word */
}
.gxf-links a:hover { color: var(--brand, var(--gold, #C9922E)) !important; }

/* The separators are bare text nodes between the links. font-size:0 on the
   container collapses them, and each link turns its own size back on — so
   the dots can be spaced with margins instead of depending on whitespace in
   the template, which MyBB is free to reformat. */
.gxf-sep { margin: 0 9px; opacity: .4; }

.gxf-fine {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--fg-3, var(--cream-faint, rgba(237, 230, 216, .42)));
}
.gxf-fine a {
	color: inherit !important;
	text-decoration: none !important;
	border-bottom: 1px solid var(--line, rgba(237, 230, 216, .13)) !important;
}

/* The theme and language pickers, if you ever switch them on. They render
   nothing at all while they are off, which is why they are still here. */
#footer .gxf-pickers {
	margin-top: 14px;
	font-size: 12px;
}
#footer .gxf-pickers:empty { display: none; }

/* On a phone every one of these links is in the More sheet, so the line is
   pure repetition. The fine print stays. */
@media (max-width: 900px) {
	.gxf-links { display: none; }
	#footer { padding-top: var(--s4, 16px); padding-bottom: var(--s4, 16px); }
}

/* ---------- level 1: the master bar ----------
   This is the one thing on the page a member has to notice, and as a plain
   .thead it looked exactly like "Your Account Summary" underneath it — same
   size, same gold rule, no hint that one of them is a button. So it stops
   pretending to be a heading: gold slab, dark lettering, an icon on the left
   and a chevron on the right, which between them say "press me" without
   needing a label that says press me. */
.gxu-head {
	cursor: pointer;
	position: relative;
	display: block;
	background: linear-gradient(180deg, #E8A23A 0%, #C9922E 100%) !important;
	color: #1A1206 !important;
	border-bottom: 0 !important;
	border-radius: 3px;
	box-shadow: 0 2px 0 var(--gold-deep, #8A6116);
	padding: 14px 38px 14px 46px !important;
	font-family: var(--display, 'Archivo Black', Arial Black, sans-serif);
	font-size: 14px !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	-webkit-tap-highlight-color: transparent;
	transition: filter .14s ease;
}
.gxu-head:hover,
.gxu-head:focus-visible { filter: brightness(1.07); }
.gxu-head:active { box-shadow: 0 1px 0 var(--gold-deep, #8A6116); transform: translateY(1px); }

/* sliders, not a cog — reads as "settings" at 21px where a cog turns to mush */
.gxu-head::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 50%;
	width: 21px;
	height: 21px;
	margin-top: -10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1206' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 7h10M19 7h2M3 17h6M15 17h6'/%3E%3Ccircle cx='16' cy='7' r='2.4'/%3E%3Ccircle cx='12' cy='17' r='2.4'/%3E%3C/svg%3E") center / 21px no-repeat;
}

/* the line under the label that says what is inside, so nobody has to open it
   to find out */
.gxu-hint {
	display: block;
	margin-top: 3px;
	font-family: var(--body, Arial, sans-serif);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: none;
	color: rgba(26, 18, 6, .72);
}

/* ---------- level 2: the sub-group bars ----------
   Deliberately NOT gold. There is one master bar and three things inside it,
   and if all four are gold slabs the hierarchy is gone and so is the point of
   the master bar. These stay dark, and earn their "I am a button" from the
   gold rule down the left, the gold lettering and the chevron. */
.gxu-sub {
	cursor: pointer;
	position: relative;

	/* Flex, not block, and this is the whole reason: MyBB wraps the label in a
	   <div> —

	       <td class="tcat">
	         <div class="expcolimage">…</div>
	         <div><span class="smalltext"><strong>Messenger</strong></span></div>
	       </td>

	   — so the count, appended as the cell's last child, lands AFTER a block
	   box and drops to its own line. Flex puts them back on one row. */
	display: flex;
	align-items: center;
	gap: 8px;

	min-height: 44px;
	box-sizing: border-box;
	padding: 13px 44px 13px 18px !important;
	border-left: 3px solid var(--gold, #E8A23A) !important;
	color: var(--gold, #E8A23A) !important;
	font-size: 12.5px !important;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .14s ease;
}
.gxu-sub:hover,
.gxu-sub:focus-visible { background-color: var(--raised-alt, rgba(232, 162, 58, .09)) !important; }

/* The label div is a flex item now; without this it refuses to shrink below
   its content and pushes the count out of the bar in the narrow desktop
   sidebar. The collapse image is already hidden by section 22 of global.css —
   repeated here so this block does not depend on that. */
.gxu-sub > div { min-width: 0; }
.gxu-sub .expcolimage { display: none !important; }

/* MyBB wraps these labels in <span class="smalltext"><strong>, and the theme
   colours BOTH of those — so setting the colour on the cell alone leaves the
   words grey while the chevron goes gold. Reach the children. */
.gxu-sub, .gxu-sub * { color: var(--gold, #E8A23A) !important; }
.gxu-sub .gxu-count {
	flex: 0 0 auto;
	margin-left: auto;          /* pushed to the right, clear of the label */
	font-weight: 500;
	letter-spacing: 0;
	opacity: .6;
}

/* ---------- the chevron, shared ----------
   Down when open, right when shut. Drawn in CSS borders rather than loaded as
   an image: the theme has one broken image file already (section 22 of the
   stylesheet) and this one can never go missing. */
.gxu-head::after,
.gxu-sub::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2.6px solid currentColor;
	border-bottom: 2.6px solid currentColor;
	transform: rotate(45deg);
	transition: transform .16s ease;
}
.gxu-head::after { right: 18px; margin-top: -7px; color: #1A1206; }
.gxu-sub::after  { right: 17px; margin-top: -7px; width: 8px; height: 8px; border-width: 2.2px; }

.gxu-head.gxu-shut::after { transform: rotate(-45deg); margin-top: -5px; }
.gxu-sub.gxu-shut::after  { transform: rotate(-45deg); margin-top: -4px; }

.gxu-row-hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.gxu-head, .gxu-sub, .gxu-head::after, .gxu-sub::after { transition: none; }
}

#gxt[hidden] { display: none; }

.gxt-wrap {
  max-width: var(--shell, 1180px);
  margin: var(--s5, 24px) auto var(--s6, 32px);
  padding: 0 var(--s4, 16px);
  font-family: var(--body, 'Archivo', Arial, sans-serif);
}

/* ---- previous / next ----
   Two big targets, side by side, each naming the thread it goes to. A bare
   "Next >" makes people tap to find out where they are going. */
.gxt-pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2, 8px);
  margin-bottom: var(--s4, 16px);
}
.gxt-pn:has(.gxt-step:only-child) { grid-template-columns: 1fr; }

.gxt-step {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 60px;
  padding: 11px 14px;
  background: var(--bg-2, var(--charcoal, #16120F));
  border: 1px solid var(--line, var(--rule, rgba(237,230,216,.13)));
  border-radius: 10px;
  color: var(--fg, var(--cream, #EDE6D8)) !important;
  text-decoration: none !important;
  border-bottom-width: 1px !important;
  overflow: hidden;
}
.gxt-step:hover { background: var(--bg-3, var(--raised, #1E1917)); }
.gxt-next { text-align: right; }

.gxt-dir {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3, var(--cream-faint, rgba(237,230,216,.42)));
}
.gxt-ttl {
  font-size: 13.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- more in this forum ---- */
.gxt-card {
  background: var(--bg-2, var(--charcoal, #16120F));
  border: 1px solid var(--line, var(--rule, rgba(237,230,216,.13)));
  border-radius: 12px;
  overflow: hidden;
}

.gxt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3, 12px);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, var(--rule, rgba(237,230,216,.13)));
}
.gxt-head h2 {
  margin: 0;
  font-family: var(--display, 'Archivo Black', Arial Black, sans-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3, var(--cream-faint, rgba(237,230,216,.42)));
}
.gxt-all {
  flex: 0 0 auto;
  font-size: 12.5px;
  color: var(--brand, var(--gold, #C9922E)) !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}

.gxt-row {
  display: flex;
  align-items: center;
  gap: var(--s3, 12px);
  padding: 12px 16px;
  border-top: 1px solid var(--line, var(--rule, rgba(237,230,216,.13)));
  color: var(--fg, var(--cream, #EDE6D8)) !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}
.gxt-row:first-of-type { border-top: 0; }
.gxt-row:hover { background: var(--bg-3, var(--raised, #1E1917)); }

.gxt-rt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gxt-meta {
  flex: 0 0 auto;
  text-align: right;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--fg-3, var(--cream-faint, rgba(237,230,216,.42)));
  font-variant-numeric: tabular-nums;
}
.gxt-lock { opacity: .55; }

@media (max-width: 560px) {
  .gxt-pn { grid-template-columns: 1fr; }
  .gxt-next { text-align: left; }
  .gxt-meta { display: none; }   /* the title is what anyone scans for */
}

/* The bar itself. Mobile only — the desktop header has the room. */
.gxn { display: none; }

@media (max-width: 900px) {

  .gxn {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    display: flex;
    align-items: stretch;
    background: var(--bg-2, var(--charcoal, #16120F));
    border-top: 1px solid var(--line, var(--rule, rgba(237,230,216,.13)));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-family: var(--body, 'Archivo', Arial, sans-serif);
  }

  /* Nothing may hide behind the bar: not the last post, not the reply
     button, not the footer. 58px is the bar; the inset is the iPhone's
     home indicator. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; }

  .gxn-i {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    padding: 6px 2px;
    background: none;
    border: 0;

    /* "More" is a <button> and the other four are <a>. A button does not
       inherit font-family, and iOS Safari draws its own chrome on one unless
       appearance is cleared — which is why More rendered in a different face
       with a box around it while the others looked right. */
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    border-bottom: 0 !important;      /* the theme underlines every <a> */
    color: var(--fg-2, var(--cream-dim, rgba(237,230,216,.68))) !important;
    font-size: 10.5px;
    letter-spacing: .02em;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .gxn-i:active { background: rgba(127,127,127,.14); }

  .gxn-g {
    width: 23px; height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Where you are now. Colour alone is never the only signal — the label
     goes bold too, so this still reads for a colour-blind member. */
  .gxn-i.gxn-on {
    color: var(--brand, var(--gold, #C9922E)) !important;
    font-weight: 700;
  }
  .gxn-i.gxn-on .gxn-g { stroke-width: 2.1; }

  /* ---- the sheet ---- */
  .gxn-veil {
    position: fixed; inset: 0;
    z-index: 950;
    background: rgba(0,0,0,.55);
    animation: gxn-fade .18s ease-out;
  }
  .gxn-veil[hidden], .gxn-sheet[hidden] { display: none; }

  .gxn-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 960;
    max-height: 86vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-3, var(--raised, #1E1917));
    border-top: 1px solid var(--line-2, var(--rule-strong, rgba(237,230,216,.26)));
    border-radius: 16px 16px 0 0;
    font-family: var(--body, 'Archivo', Arial, sans-serif);
    animation: gxn-up .22s cubic-bezier(.2,.8,.3,1);
  }

  .gxn-grab {
    width: 36px; height: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: var(--fg-3, var(--cream-faint, rgba(237,230,216,.42)));
  }

  .gxn-h {
    margin: 14px 0 8px;
    font-family: var(--display, 'Archivo Black', Arial Black, sans-serif);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fg-3, var(--cream-faint, rgba(237,230,216,.42)));
  }
  .gxn-h:first-of-type { margin-top: 4px; }

  .gxn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  .gxn-grid a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;              /* a real tap target, not a text link */
    padding: 10px 12px;
    background: var(--bg-2, var(--charcoal, #16120F));
    border: 1px solid var(--line, var(--rule, rgba(237,230,216,.13)));
    border-radius: 10px;
    color: var(--fg, var(--cream, #EDE6D8)) !important;
    font-size: 14px;
    text-decoration: none !important;
  }
  .gxn-grid a:active { background: var(--bg-4, var(--raised-alt, #221C19)); }

  /* Drawn in the same stroke weight as the bar's icons, and in the theme's
     own ink. Emoji would have been quicker, but they arrive in whatever
     colours the phone feels like and read as clip art next to this type. */
  .gxn-s {
    flex: 0 0 auto;
    width: 19px; height: 19px;
    fill: none;
    stroke: var(--brand, var(--gold, #C9922E));
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .gxn-close {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 13px;
    background: transparent;
    border: 1px solid var(--line, var(--rule, rgba(237,230,216,.13)));
    border-radius: 10px;
    color: var(--fg-2, var(--cream-dim, rgba(237,230,216,.68)));
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
  }

  @keyframes gxn-up   { from { transform: translateY(100%); } }
  @keyframes gxn-fade { from { opacity: 0; } }

  @media (prefers-reduced-motion: reduce) {
    .gxn-sheet, .gxn-veil { animation: none; }
  }

  /* The chat page has its own fixed composer at the bottom. Two fixed bars
     stacked is one too many, so the nav stands down there. If you add
     another page with a pinned bottom element, add it to this list AND to
     the GXN_OFF array in the script below. */
  body.gxn-off .gxn { display: none; }
  body.gxn-off { padding-bottom: 0 !important; }
}

/* ---- the back link, on every screen size ---- */
.gxy-back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 14px;
	padding: 9px 15px 9px 12px;
	background: var(--bg-2, var(--charcoal, #16120F));
	border: 1px solid var(--line, var(--rule, rgba(237, 230, 216, .13)));
	border-radius: 999px;
	color: var(--fg-2, var(--cream-dim, rgba(237, 230, 216, .68))) !important;
	font-family: var(--body, 'Archivo', Arial, sans-serif);
	font-size: 13.5px;
	text-decoration: none !important;
	border-bottom-width: 1px !important;
}
.gxy-back:hover {
	border-color: var(--brand, var(--gold, #C9922E));
	color: var(--fg, var(--cream, #EDE6D8)) !important;
}
.gxy-back svg {
	width: 15px; height: 15px;
	fill: none; stroke: var(--brand, var(--gold, #C9922E));
	stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 900px) {

	/* ---- the form stops being a grid ----
	   :has(td[width="50%"]) matches the wrapper table AND the .tborder inside
	   it, because both contain such a cell. Everything within then flows. */
	body:is(:has(.usercp_nav_item), .gxy-ucp) table:has(td[width="50%"]),
	body:is(:has(.usercp_nav_item), .gxy-ucp) table:has(td[width="50%"]) tbody,
	body:is(:has(.usercp_nav_item), .gxy-ucp) table:has(td[width="50%"]) tr,
	body:is(:has(.usercp_nav_item), .gxy-ucp) table:has(td[width="50%"]) td,
	body:is(:has(.usercp_nav_item), .gxy-ucp) table:has(td[width="50%"]) table {
		display: block !important;
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* ---- date of birth is the one row worth keeping side by side ----
	   Three cells: day, month, year. Stacked they become three full-width
	   controls and eat half a screen for one date. The !important is needed
	   because the rule above is more specific than this one. */
	body:is(:has(.usercp_nav_item), .gxy-ucp) tr:has(> td > select[name^="bday"]),
	body:is(:has(.usercp_nav_item), .gxy-ucp) tr:has(> td > input[name^="bday"]),
	body:is(:has(.usercp_nav_item), .gxy-ucp) tr:has(> td > select[name^="birthday"]) {
		display: flex !important;
		gap: 6px;
		align-items: center;
	}
	body:is(:has(.usercp_nav_item), .gxy-ucp) tr:has(> td > select[name^="bday"]) > td,
	body:is(:has(.usercp_nav_item), .gxy-ucp) tr:has(> td > input[name^="bday"]) > td,
	body:is(:has(.usercp_nav_item), .gxy-ucp) tr:has(> td > select[name^="birthday"]) > td {
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
	}

	/* ---- no control may be wider than the column it sits in ----
	   cols= on a textarea and size= on an input are sizing instructions in
	   their own right, and they are what actually pushed the page wide. */
	body:is(:has(.usercp_nav_item), .gxy-ucp) input[type="text"],
	body:is(:has(.usercp_nav_item), .gxy-ucp) input[type="email"],
	body:is(:has(.usercp_nav_item), .gxy-ucp) input[type="password"],
	body:is(:has(.usercp_nav_item), .gxy-ucp) input[size],
	body:is(:has(.usercp_nav_item), .gxy-ucp) select,
	body:is(:has(.usercp_nav_item), .gxy-ucp) textarea {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	body:is(:has(.usercp_nav_item), .gxy-ucp) input[type="checkbox"],
	body:is(:has(.usercp_nav_item), .gxy-ucp) input[type="radio"],
	body:is(:has(.usercp_nav_item), .gxy-ucp) input[type="submit"],
	body:is(:has(.usercp_nav_item), .gxy-ucp) input[type="button"] {
		width: auto !important;
	}

	/* ---- breathing room, now that everything is stacked ---- */
	body:is(:has(.usercp_nav_item), .gxy-ucp) table:has(td[width="50%"]) td.trow1,
	body:is(:has(.usercp_nav_item), .gxy-ucp) table:has(td[width="50%"]) td.trow2 { padding: 14px; }
	body:is(:has(.usercp_nav_item), .gxy-ucp) table:has(td[width="50%"]) table td { padding: 5px 0; }

	body:is(:has(.usercp_nav_item), .gxy-ucp) table:has(td[width="50%"]) .smalltext {
		display: block;
		margin-bottom: 3px;
	}

	body:is(:has(.usercp_nav_item), .gxy-ucp) #content { overflow-x: hidden; }
}

/* ---- the controls themselves, at every width ----
   MyBB's defaults are a 2009 forum: thin 1px boxes, no radius, 11px type.
   These are the fields members are most often asked to fill in, so they are
   worth the few lines. Scoped to the User CP so no other form shifts. */
body:is(:has(.usercp_nav_item), .gxy-ucp) input[type="text"],
body:is(:has(.usercp_nav_item), .gxy-ucp) input[type="email"],
body:is(:has(.usercp_nav_item), .gxy-ucp) input[type="password"],
body:is(:has(.usercp_nav_item), .gxy-ucp) select,
body:is(:has(.usercp_nav_item), .gxy-ucp) textarea {
	padding: 10px 12px;
	background: var(--bg-sunk, var(--ink, #0C0A09));
	border: 1px solid var(--line-2, var(--rule-strong, rgba(237, 230, 216, .26)));
	border-radius: 8px;
	color: var(--fg, var(--cream, #EDE6D8));
	font-family: var(--body, 'Archivo', Arial, sans-serif);
	font-size: 15px;            /* 16px or more stops iOS zooming on focus */
	line-height: 1.4;
}
body:is(:has(.usercp_nav_item), .gxy-ucp) input:focus,
body:is(:has(.usercp_nav_item), .gxy-ucp) select:focus,
body:is(:has(.usercp_nav_item), .gxy-ucp) textarea:focus {
	outline: 2px solid var(--brand, var(--gold, #C9922E));
	outline-offset: 1px;
	border-color: transparent;
}
body:is(:has(.usercp_nav_item), .gxy-ucp) input[type="checkbox"],
body:is(:has(.usercp_nav_item), .gxy-ucp) input[type="radio"] {
	width: 18px; height: 18px;
	accent-color: var(--brand, var(--gold, #C9922E));
	vertical-align: -3px;
}
body:is(:has(.usercp_nav_item), .gxy-ucp) input[type="submit"],
body:is(:has(.usercp_nav_item), .gxy-ucp) .button {
	-webkit-appearance: none; appearance: none;
	padding: 12px 22px;
	background: var(--brand, var(--gold, #C9922E));
	border: 0;
	border-radius: 8px;
	color: #1A1206;
	font-family: var(--display, 'Archivo Black', Arial Black, sans-serif);
	font-size: 12.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}
body:is(:has(.usercp_nav_item), .gxy-ucp) input[type="submit"]:active { transform: translateY(1px); }

/* ==========================================================================
   The User CP pages, wearing the You page's clothes
   --------------------------------------------------------------------------
   Removing the sidebar got the clutter out of the way but left MyBB's 2009
   furniture: a gold slab for every heading, square-cornered tables, hard
   edges between rows. These rules give the forms the same surfaces, radii and
   heading style as you.php, so moving between the two does not feel like
   moving between two different sites.
   ========================================================================== */

/* The form itself becomes a card, like You's. */
body:has(.usercp_nav_item) .tborder,
body.gxy-ucp .tborder {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	background: var(--bg-2, var(--charcoal, #16120F));
	border: 1px solid var(--line, var(--rule, rgba(237, 230, 216, .13))) !important;
	border-radius: 12px;
	border-spacing: 0 !important;

	/* `auto`, not `hidden`. Both let the radius clip the corner rows; only
	   `hidden` ALSO throws away anything too wide to fit, with no scrollbar
	   and nothing to say it happened. The private message list is six columns
	   wide and does not shrink below its content, so on a phone `hidden` cut
	   the messages off and left what looked like an empty page. */
	overflow: auto;
}

/* A heading, not a gold slab. Same treatment as the "YOURS" and "AROUND GXA"
   headings on the You page: small, letterspaced, quiet. */
body:has(.usercp_nav_item) .tborder td.thead,
body.gxy-ucp .tborder td.thead {
	background: none !important;
	background-image: none !important;
	border-bottom: 1px solid var(--line, var(--rule, rgba(237, 230, 216, .13)));
	padding: 15px 16px !important;
	color: var(--fg-3, var(--cream-faint, rgba(237, 230, 216, .42))) !important;
}
body:has(.usercp_nav_item) .tborder td.thead strong,
body.gxy-ucp .tborder td.thead strong {
	font-family: var(--display, 'Archivo Black', Arial Black, sans-serif);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: inherit;
}

/* Sub-headings inside the form — "Required Fields", "Away Information". */
body:has(.usercp_nav_item) .tborder td.tcat,
body.gxy-ucp .tborder td.tcat {
	background: none !important;
	padding: 14px 16px 2px !important;
	color: var(--fg-2, var(--cream-dim, rgba(237, 230, 216, .68))) !important;
}

/* Rows lose their stripes. The card has one surface; the fields provide the
   contrast, exactly as they do on You. */
body:has(.usercp_nav_item) .tborder td.trow1,
body:has(.usercp_nav_item) .tborder td.trow2,
body.gxy-ucp .tborder td.trow1,
body.gxy-ucp .tborder td.trow2 {
	background: none !important;
	border: 0 !important;
}

/* The bold run-in labels MyBB puts above each field. */
body:has(.usercp_nav_item) .tborder strong,
body.gxy-ucp .tborder strong {
	font-weight: 600;
	color: var(--fg, var(--cream, #EDE6D8));
}

/* Submit rows get air and sit right, like the Copy button on You. */
body:has(.usercp_nav_item) input[type="submit"],
body.gxy-ucp input[type="submit"] { margin-top: 6px; }


/* ---- the old sidebar, rebuilt at the bottom ----
   Quiet on purpose. This is the long tail — change username, drafts,
   attachments — not the main event. */
.gxy-settings {
	max-width: 760px;
	margin: var(--s6, 32px) auto 0;
	padding-top: var(--s5, 24px);
	border-top: 1px solid var(--line, var(--rule, rgba(237, 230, 216, .13)));
	font-family: var(--body, 'Archivo', Arial, sans-serif);
}
.gxy-settings h2 {
	margin: 0 0 12px;
	font-family: var(--display, 'Archivo Black', Arial Black, sans-serif);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fg-3, var(--cream-faint, rgba(237, 230, 216, .42)));
}
.gxy-set-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 8px;
}
.gxy-set-grid a {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 10px 14px;
	background: var(--bg-2, var(--charcoal, #16120F));
	border: 1px solid var(--line, var(--rule, rgba(237, 230, 216, .13)));
	border-radius: 10px;
	color: var(--fg-2, var(--cream-dim, rgba(237, 230, 216, .68))) !important;
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none !important;
	border-bottom-width: 1px !important;
}
.gxy-set-grid a:hover {
	background: var(--bg-3, var(--raised, #1E1917));
	border-color: var(--brand, var(--gold, #C9922E));
	color: var(--fg, var(--cream, #EDE6D8)) !important;
}

/* ---- the results card, same clothes as You and the User CP ---- */
body.gxa-search .tborder {
	max-width: var(--shell, 1180px);
	margin-left: auto;
	margin-right: auto;
	background: var(--bg-2, var(--charcoal, #16120F));
	border: 1px solid var(--line, var(--rule, rgba(237, 230, 216, .13))) !important;
	border-radius: 12px;
	border-spacing: 0 !important;
	overflow: hidden;
}

body.gxa-search .tborder td.thead {
	background: none !important;
	background-image: none !important;
	border-bottom: 1px solid var(--line, var(--rule, rgba(237, 230, 216, .13)));
	padding: 15px 16px !important;
	color: var(--fg-3, var(--cream-faint, rgba(237, 230, 216, .42))) !important;
}
body.gxa-search .tborder td.thead strong,
body.gxa-search .tborder td.thead span {
	font-family: var(--display, 'Archivo Black', Arial Black, sans-serif);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: inherit;
}

body.gxa-search .tborder td.trow1,
body.gxa-search .tborder td.trow2 { background: none !important; }


/* ---- form controls, matching You and the settings pages ---- */
body:is(.gxa-search, :has(input[name="keywords"])) input[type="text"],
body:is(.gxa-search, :has(input[name="keywords"])) select,
body:is(.gxa-search, :has(input[name="keywords"])) textarea {
	padding: 10px 12px;
	background: var(--bg-sunk, var(--ink, #0C0A09));
	border: 1px solid var(--line-2, var(--rule-strong, rgba(237, 230, 216, .26)));
	border-radius: 8px;
	color: var(--fg, var(--cream, #EDE6D8));
	font-family: var(--body, 'Archivo', Arial, sans-serif);
	font-size: 15px;
}
body:is(.gxa-search, :has(input[name="keywords"])) input[type="checkbox"],
body:is(.gxa-search, :has(input[name="keywords"])) input[type="radio"] {
	width: 18px; height: 18px;
	accent-color: var(--brand, var(--gold, #C9922E));
	vertical-align: -3px;
}
body:is(.gxa-search, :has(input[name="keywords"])) input[type="submit"] {
	-webkit-appearance: none; appearance: none;
	padding: 12px 22px;
	background: var(--brand, var(--gold, #C9922E));
	border: 0; border-radius: 8px;
	color: #1A1206;
	font-family: var(--display, 'Archivo Black', Arial Black, sans-serif);
	font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
	cursor: pointer;
}

@media (max-width: 900px) {


	/* ---- the search FORM lives in the theme now ----
	   It used to be stacked here, and that was never going to be enough: in
	   MyBB's template a field's label is in the row ABOVE it, not beside it,
	   so stacking the cells pairs every field with the wrong caption. Fixing
	   it needs `display: contents` on the rows, and a rule here saying
	   `display: block !important` would simply beat that and put the mess
	   back. Section 22.7 of global.css owns it.
	   Only the search RESULTS are still tuned here, below. */

	/* The column headings are sort links for columns that are about to stop
	   existing. Sorting a search result set on a phone is not a thing. */
	/* Only the RESULTS table's header row. Keying off the sort links was too
	   fragile; keying off "this table contains result rows" cannot confuse it
	   with the search form, whose tcat cells are section headings and have to
	   stay. Leaving it visible is not cosmetic: six header cells force the
	   table wider than the phone, and the flex rows then collapse to a
	   fraction of the width. */
	body.gxa-search table:has(tr.inline_row) tr:has(td.tcat) { display: none !important; }


	/* ---- why these selectors carry .tborder:has(tr.inline_row) ----
	   Section 22 of the theme now turns ANY list of inline_rows into a card,
	   which is right for forum and thread lists and nearly right here. Nearly
	   is the problem: a search result has nine columns, not six, so the
	   theme's "replies / views" labels would land on Author and Forum.

	   These rules have to beat it rather than merely follow it, and following
	   it is not enough on its own — the theme's selector is
	   :is(.tborder:has(tr.inline_row), …) tr:has(> td[class*="trow"]), which
	   outweighs a plain `body.gxa-search tr.inline_row` however late it
	   loads. Repeating the table match here puts these two classes ahead. */
	/* ---- a row becomes a card ---- */
	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row {
		display: flex !important;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 3px 10px;
		padding: 14px 16px;
		border-top: 1px solid var(--line, var(--rule, rgba(237, 230, 216, .13)));
	}
	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row:first-of-type { border-top: 0; }

	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row > td {
		display: block;
		width: auto !important;
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
		white-space: normal !important;   /* beats the inline nowrap on the date */
	}

	/* The post itself takes the whole width. */
	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row > td:nth-child(3) {
		flex: 1 1 100%;
		font-size: 14.5px;
		line-height: 1.45;
	}
	/* Its preview sits in a nested table; that has to flow too. */
	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row > td:nth-child(3) table,
	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row > td:nth-child(3) tbody,
	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row > td:nth-child(3) tr,
	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row > td:nth-child(3) td {
		display: block !important;
		width: auto !important;
		padding: 0 !important;
	}
	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row > td:nth-child(3) em {
		display: block;
		margin-top: 5px;
		color: var(--fg-3, var(--cream-faint, rgba(237, 230, 216, .42)));
		font-size: 13px;
		font-style: normal;

		/* Four lines of preview is plenty to decide whether this is the one. */
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Author, forum and date become one quiet meta line. */
	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row > td:nth-child(n+4) {
		flex: 0 0 auto;
		font-size: 12.5px;
		color: var(--fg-3, var(--cream-faint, rgba(237, 230, 216, .42)));
	}
	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row > td:nth-child(n+4) a {
		color: var(--fg-2, var(--cream-dim, rgba(237, 230, 216, .68))) !important;
		border-bottom: 0 !important;
	}

	/* Replies and views, counted from the end so this lands on the same two
	   cells in both the post results and the thread results. These rules come
	   AFTER the n+4 rule above on purpose — same specificity, later wins. */
	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row > td:nth-last-child(2),
	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row > td:nth-last-child(3) { display: none !important; }

	/* The status dot and the post icon. Two 2%-wide cells that become two
	   stray marks once the row is a card. */
	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row > td:nth-child(1),
	body.gxa-search .tborder:has(tr.inline_row) tr.inline_row > td:nth-child(2) { display: none !important; }

	body.gxa-search #content { overflow-x: hidden; }
}

/* ---- nothing clips its own contents ----
   The theme's own .tborder now says `overflow: auto`, so this is only here
   for the User CP block above, which sets a max-width as well. */
@media (max-width: 900px) {
	body:is(:has(.usercp_nav_item), .gxy-ucp, .gxa-pm) .tborder {
		max-width: 100% !important;
		overflow-x: auto !important;
	}
}


/* ==========================================================================
   1. The forum header
   --------------------------------------------------------------------------
   The LOOK of .gxa-theadwrap now lives in section 18 of global.css, where it
   belongs — it is theme work, not a patch. What stays here is the script
   below, which is what actually creates the wrapper. Duplicating the CSS in
   both files would mean two places to change and one of them going stale.
   ========================================================================== */


/* ==========================================================================
   2. Private messages as cards
   --------------------------------------------------------------------------
   private_messagebit, in source order:

     1 status icon | 2 folder icon | 3 subject | 4 sender | 5 date | 6 checkbox

   The subject takes the full width, sender and date drop underneath as one
   quiet line, and the checkbox stays — it is how you delete or move anything,
   so it cannot be styled away.
   ========================================================================== */

@media (max-width: 900px) {
	/* The sort-link header row. Six headings force the table wider than the
	   phone, which is the same trap the search results fell into. */
	body.gxa-pm form[name="pmForm"] .tborder tr:has(td.tcat) { display: none !important; }

	body.gxa-pm form[name="pmForm"] .tborder tr:has(td[class^="trow"]) {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 3px 10px;
		padding: 13px 16px;
		border-top: 1px solid var(--line, var(--rule, rgba(237, 230, 216, .13)));
	}

	body.gxa-pm form[name="pmForm"] .tborder tr:has(td[class^="trow"]) > td {
		display: block;
		width: auto !important;
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
		white-space: normal !important;   /* beats the inline nowrap on the date */
	}

	/* Both icon cells. The unread state is carried by the subject link's own
	   class instead, which reads better at a glance than a 16px envelope. */
	body.gxa-pm form[name="pmForm"] tr > td:nth-child(1),
	body.gxa-pm form[name="pmForm"] tr > td:nth-child(2) { display: none !important; }

	/* Subject: the whole first line, minus room for the checkbox. */
	body.gxa-pm form[name="pmForm"] tr > td:nth-child(3) {
		flex: 1 1 auto;
		order: 1;
		font-size: 15px;
		line-height: 1.35;
	}
	body.gxa-pm form[name="pmForm"] tr > td:nth-child(6) {
		flex: 0 0 auto;
		order: 2;
	}

	/* Sender and date, one quiet line of their own. */
	body.gxa-pm form[name="pmForm"] tr > td:nth-child(4),
	body.gxa-pm form[name="pmForm"] tr > td:nth-child(5) {
		flex: 0 0 auto;
		font-size: 12.5px;
		color: var(--fg-3, var(--cream-faint, rgba(237, 230, 216, .42)));
	}
	/* Forces the break: the sender starts a new flex line because nothing
	   else fits beside a 100% basis. */
	body.gxa-pm form[name="pmForm"] tr > td:nth-child(4) { flex-basis: 100%; order: 3; }
	body.gxa-pm form[name="pmForm"] tr > td:nth-child(5) { order: 4; margin-top: -3px; }
	body.gxa-pm form[name="pmForm"] tr > td:nth-child(4) a {
		color: var(--fg-2, var(--cream-dim, rgba(237, 230, 216, .68))) !important;
		border-bottom: 0 !important;
	}

	/* The actions row at the foot — Move to / Delete — stacks. */
	body.gxa-pm form[name="pmForm"] td.tfoot {
		display: block;
		text-align: left !important;
		padding: 14px 16px !important;
	}
	body.gxa-pm form[name="pmForm"] td.tfoot select { margin: 6px 0; }

	body.gxa-pm #content { overflow-x: hidden; }
}

/* Unread, at any width. A gold edge on the row and a bolder subject say it
   faster than an icon does, and they survive the card layout. */
body.gxa-pm tr:has(a.new_pm) { box-shadow: inset 3px 0 0 var(--brand, var(--gold, #C9922E)); }
body.gxa-pm a.new_pm { font-weight: 700; color: var(--fg, var(--cream, #EDE6D8)) !important; }
body.gxa-pm a.old_pm,
body.gxa-pm a.re_pm,
body.gxa-pm a.fw_pm { color: var(--fg-2, var(--cream-dim, rgba(237, 230, 216, .68))) !important; }

.gxa-embed {
	margin: var(--s4, 16px) 0;
	border: 1px solid var(--line, rgba(237, 230, 216, .13));
	border-radius: var(--radius-lg, 6px);
	background: var(--bg-3, #1E1917);
	overflow: hidden;
}

.gxa-embed-card {
	display: flex;
	align-items: center;
	gap: var(--s3, 12px);
	width: 100%;
	padding: var(--s4, 16px);
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.gxa-embed-card:hover { background: var(--bg-4, #221C19); }

.gxa-embed-mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--bg-2, #16120F);
	color: var(--fg, #EDE6D8);
	font-family: var(--display, 'Archivo Black', Arial Black, sans-serif);
	font-size: 15px;
}

.gxa-embed-text { min-width: 0; flex: 1 1 auto; }

.gxa-embed-kind {
	display: block;
	color: var(--fg, #EDE6D8);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
}
.gxa-embed-url {
	display: block;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--fg-3, rgba(237, 230, 216, .42));
	font-size: 12.5px;
}

.gxa-embed-go {
	flex: 0 0 auto;
	color: var(--brand-ink, #C9922E);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Once it has been tapped. 16:9 for the video platforms; the blockquote
   embeds size themselves and get height auto. */
.gxa-embed-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}
.gxa-embed-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.gxa-embed[data-loaded="block"] { background: none; }
.gxa-embed[data-loaded="block"] .gxa-embed-frame {
	aspect-ratio: auto;
	background: none;
	min-height: 120px;
}

/* A link out, for the platforms that cannot be embedded at all. */
.gxa-embed-out {
	display: flex;
	align-items: center;
	gap: var(--s3, 12px);
	padding: var(--s4, 16px);
	color: inherit;
	border-bottom: 0 !important;
}
.gxa-embed-out:hover { background: var(--bg-4, #221C19); }

.gxa-embed-note {
	padding: 0 var(--s4, 16px) var(--s3, 12px);
	color: var(--fg-3, rgba(237, 230, 216, .42));
	font-size: 12px;
	line-height: 1.45;
}

.gxa-lp-title {
	display: block;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--fg, #EDE6D8);
}
.gxa-lp-meta {
	display: block;
	margin-top: 2px;
	color: var(--fg-3, rgba(237, 230, 216, .42));
	font-size: 12.5px;
}
.gxa-lp-meta .gxa-lp-sep {
	margin: 0 5px;
	color: var(--line-2, rgba(237, 230, 216, .26));
}
.gxa-lp-meta a {
	color: var(--fg-2, rgba(237, 230, 216, .68));
	border-bottom: 0;
}

/* ---- the "Show this post" notice ----
   Both classes here are ones the script below adds. Nothing in this block
   depends on MyBB's own class names, because I have not seen them. */
.gxa-shownote {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2, 8px) var(--s3, 12px);
	padding: var(--s3, 12px) var(--s4, 16px);
	color: var(--fg-3, rgba(237, 230, 216, .42));
	font-size: 13.5px;
	line-height: 1.5;
}
/* The float is the whole bug: it left the revealed post a narrow column. */
.gxa-unfloat {
	float: none !important;
	flex: 0 0 auto;
}
/* `margin-left: auto` alone was not enough and the test caught it: MyBB puts
   the button FIRST in the source, so auto-margin pushed the button right and
   then laid the notice text out after it. The order has to be stated. A bare
   text node becomes an anonymous flex item with order 0, so this puts the
   button last whatever else is in the box. */
.gxa-shownote .gxa-unfloat {
	order: 9;
	margin-left: auto;
}
.gxa-shownote .button,
.gxa-shownote input[type="button"] {
	min-height: 38px;
	padding: 0 14px;
	font-size: 12px;
	white-space: nowrap;
}


/* ---- the author block, desktop ----
   Below 760px section 16 already turns this into a strip across the top of
   the post, so none of this applies there.

   AND IT IS A BLOCK, NOT A RAIL. The theme has carried
   `.post.classic { display: grid; grid-template-columns: 190px 1fr }` since
   the start, and on this board it has never once applied: MyBB has two post
   layouts, and genx.forum is set to the HORIZONTAL one, so every post
   renders as `<div class="post ">` with no `classic` on it. Every rule
   written for a 190px rail has been dead code here.

   What the horizontal layout actually produces is an author block the full
   width of the post — 1134px on a 1280px screen — with twelve lines stacked
   down the left of it and nothing in the other thousand pixels. So it
   becomes one row that uses the width it already has. */
@media (min-width: 761px) {
	.post .post_author {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--s2, 8px) var(--s4, 16px);
		padding: var(--s3, 12px) var(--s4, 16px);
		text-align: left;
	}
	/* Two groups and nothing in between: who, hard against the left; the
	   numbers, hard against the right. The first version of this gave the
	   statistics `flex: 1 1 auto` and they took up the slack, which left them
	   sitting in the middle of the band under a rule that ran off to an edge
	   they never reached. Ragged is the specific thing Sean keeps pointing
	   at, and slack in a flex row is where ragged comes from. */
	.post .post_author .author_avatar { flex: 0 0 auto; margin: 0; }
	.post .post_author .author_information { flex: 0 1 auto; min-width: 0; }
	.post .post_author .author_statistics {
		flex: 0 1 auto;
		margin-left: auto;
		text-align: right;
	}

	/* Inside the name block, the usertitle and the stars are separated by
	   <br>. Hiding those is safe HERE and not on the forum index, and the
	   difference is the one that has caught me out twice: there the runs
	   either side of the <br> are both bare TEXT, so removing it fuses them
	   with no way to separate them again. Here the second run is a row of
	   <img> elements, and an element can take a margin. */
	.post .post_author .author_information .smalltext br { display: none; }
	.post .post_author .author_information .smalltext { display: inline; }
	.post .post_author .author_information img[alt="*"]:first-of-type {
		margin-left: var(--s2, 8px);
	}
	.post .post_author .author_avatar img {
		width: 56px;
		height: 56px;
		border-radius: 50%;
	}

	.post .post_author .author_information { line-height: 1.35; }

	/* Seven star images at full size are a line and a half on their own. */
	.post .post_author .author_information img[alt="*"] {
		width: 11px;
		height: 11px;
		vertical-align: baseline;
	}

	/* No rule above the statistics in this layout. The vertical rail needed
	   one to separate the numbers from the name below it; here they are
	   side by side, the band already has an edge of its own, and a second
	   line inside it is just another thing not lining up with anything. */
	.post .post_author .author_statistics {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
		color: var(--fg-3, rgba(237, 230, 216, .42));
		font-size: 12px;
		line-height: 1.6;
	}
	.gxa-rail-line { display: block; }
	/* The Class of pill arrives wrapped in a <div> by the Yearbook plugin,
	   which would put it on a row of its own however it is placed. */
	.gxa-rail-line .gxayb-postbit { display: inline; }
	.gxa-rail-line .gxayb-postbit-class { margin-top: 0 !important; }
	.gxa-rail-sep {
		margin: 0 4px;
		color: var(--line-2, rgba(237, 230, 216, .26));
	}
}

/* Desktop only. Below 901px section 24 hides this row and the drawer takes
   over, so everything here is scoped to the width where there is a bar. */
@media (min-width: 901px) {

#logo ul.top_links.gxn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}
.gxn-item { position: relative; margin: 0; display: block; }

/* ---- the pill ----
   One rule for both shapes. A group opens a menu so it has to be a <button>;
   a single destination is an <a>. They are styled together so the row reads
   as one set of controls rather than two. */
#logo ul.top_links .gxn-pill,
#logo ul.top_links a.gxn-pill:link,
#logo ul.top_links a.gxn-pill:visited {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	/* 44, and both numbers stated. Section 5 gives every <button> on the board
	   `min-height: 44px` for the sake of tap targets, so the four group pills
	   were 44 and the Events pill — an <a>, which that rule does not reach —
	   was 42, sitting a pixel low beside them. Six pills in a row with one of
	   them off by a pixel is exactly the kind of thing that reads as "not
	   quite right" without being nameable. Matching the board's own 44 rather
	   than fighting it also makes these proper tap targets. */
	box-sizing: border-box;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 13px 0 8px;
	border: 1px solid transparent;
	border-radius: 11px;
	background: transparent;
	color: var(--fg-2, rgba(237, 230, 216, .68));
	font: inherit;
	font-size: 13.5px;
	line-height: 1;
	/* Section 5 sets every button on the board in small caps, which is right
	   for Post Thread and wrong here: it made ARCADE, WATCH, MEMBERS and MORE
	   shout while Events — an <a>, which that rule does not reach — sat in
	   sentence case beside them. Stated on both so the row reads as one set. */
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	transition: background .14s ease, border-color .14s ease, color .14s ease;
}
#logo ul.top_links .gxn-pill:hover {
	background: var(--bg-3, #221C19);
	border-color: var(--line, rgba(237, 230, 216, .13));
	color: var(--fg, #EDE6D8);
}
#logo ul.top_links .gxn-pill:focus-visible {
	outline: 2px solid var(--focus, #C9922E);
	outline-offset: 2px;
}
/* Open is a state, not a hover. Gold edge, same as the board's other open
   things, so it is obvious which menu is down. */
.gxn-item.is-open > .gxn-pill {
	background: var(--bg-3, #221C19);
	border-color: var(--brand, #C9922E);
	color: var(--fg, #EDE6D8);
}

/* ---- the icon tile ----
   A mask, not a background image, so the glyph is painted in a colour this
   file controls and can change on hover. A bitmap could not. */
.gxn-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--bg-4, #2A2320);
	color: var(--brand, #C9922E);
}
.gxn-ico::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--gxi) center / 16px 16px no-repeat;
	        mask: var(--gxi) center / 16px 16px no-repeat;
}
/* No shape, no tile. An empty mask masks nothing, which would paint a solid
   16px block of gold — which is exactly what an unmapped plugin link would
   get if this were written as a blanket rule. */
.gxn-ico:not([style*="--gxi"]):not([data-gxi]) { display: none; }

.gxn-label { flex: 0 0 auto; white-space: nowrap; }

.gxn-chev {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-left: 1px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .55;
	transition: transform .16s ease, opacity .14s ease;
}
.gxn-item.is-open .gxn-chev {
	transform: translateY(1px) rotate(-135deg);
	opacity: 1;
}

/* ---- the menu ---- */
.gxn-menu {
	display: none;
	position: absolute;
	z-index: 120;
	top: calc(100% + 6px);
	left: 0;
	min-width: 318px;
	margin: 0;
	padding: var(--s2, 8px);
	list-style: none;
	background: var(--bg-2, #16120F);
	border: 1px solid var(--line-2, rgba(237, 230, 216, .26));
	border-radius: 14px;
	box-shadow: var(--shadow, 0 18px 40px rgba(0, 0, 0, .55));
}
.gxn-item.is-open > .gxn-menu { display: block; }
/* Near the right-hand end of the row a left-aligned panel would hang off the
   page. The script measures and adds this; it is not guesswork about which
   item happens to be last. */
.gxn-menu.gxn-right { left: auto; right: 0; }
.gxn-menu li { margin: 0; display: block; }

#logo ul.top_links .gxn-mi:link,
#logo ul.top_links .gxn-mi:visited {
	display: flex;
	align-items: center;
	gap: var(--s3, 12px);
	padding: 9px 10px;
	border: 0;
	border-radius: 10px;
	color: var(--fg, #EDE6D8);
	font-size: 14px;
	text-decoration: none;
	background-image: none !important;
}
#logo ul.top_links .gxn-mi:hover { background: var(--bg-3, #221C19); }
#logo ul.top_links .gxn-mi:hover .gxn-ico { background: var(--bg-sunk, #0C0A09); }
.gxn-mi .gxn-ico { width: 34px; height: 34px; border-radius: 10px; }
.gxn-mi .gxn-ico::before {
	width: 18px; height: 18px;
	-webkit-mask-size: 18px 18px;
	        mask-size: 18px 18px;
}
.gxn-mi-text { display: block; min-width: 0; line-height: 1.3; }
.gxn-mi-text small {
	display: block;
	margin-top: 2px;
	color: var(--fg-3, rgba(237, 230, 216, .42));
	font-size: 12.5px;
}

/* ---- DO NOT PUSH ----
   It is a gag and it is meant to be loud, so it keeps its own pill and its
   own colour instead of going quiet with everything else. The markup inside
   is the plugin's, untouched — including the red bulb, which is why there is
   no icon tile on this one. */
.gxn-item.gxn-push .gxasr-mystery-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px !important;
	height: 44px;
	padding: 0 14px !important;
	border: 1px solid rgba(178, 58, 43, .55) !important;
	border-radius: 11px !important;
	background: rgba(178, 58, 43, .14) !important;
	color: var(--fg, #EDE6D8) !important;
	font-size: 13px !important;
	letter-spacing: .04em;
	transition: background .14s ease, border-color .14s ease;
}
.gxn-item.gxn-push .gxasr-mystery-btn:hover {
	background: rgba(178, 58, 43, .26) !important;
	border-color: var(--accent, #B23A2B) !important;
}
.gxn-item.gxn-push form { display: inline-flex; margin: 0; padding: 0; }

/* ---- "3 around", in the account bar ----
   Mirrored from the chat strip rather than polled again: the strip already
   asks the server who is on, so this costs no second request and cannot
   disagree with the number three inches below it. No strip on the page, no
   chip. */
.gxh-around {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0 11px;
	border-radius: 999px;
	/* Filled and borderless on purpose. Everything else in this bar is
	   something you can press; this is the board telling you something. An
	   outline would have made it look like a fourth button. */
	background: var(--bg-3, #221C19);
	color: var(--fg-3, rgba(237, 230, 216, .42));
	font-size: 12px;
	white-space: nowrap;
}
/* `hidden` is a UA display:none, and a display declared here beats it — so
   the chip stayed on screen, empty, while it was waiting for its first
   answer. It showed as a bare dot in a pill. */
.gxh-around[hidden] { display: none; }
.gxh-around-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ok, #6E8F5A);
}
.gxh-around-dot.cold { background: var(--line-2, rgba(237, 230, 216, .26)); }

}  /* end min-width: 901px */

/* The chip is desktop furniture. On a phone the chat strip carries the same
   number a few pixels lower and the header has a hamburger to make room for. */
@media (max-width: 900px) { .gxh-around { display: none; } }

/* ---- the shapes ----
   One declaration each. The paint rule above reads --gxi, so a new icon is a
   single line rather than a new block. Outside the media query on purpose:
   a custom property costs nothing when nothing reads it, and keeping them
   here means the list is in one place. */
.gxi-arcade  { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2.3'%20y='7'%20width='19.4'%20height='10'%20rx='4.4'/><path%20d='M7%2010.2v3.6M5.2%2012h3.6'/><circle%20cx='15.6'%20cy='11'%20r='1'/><circle%20cx='18'%20cy='13.4'%20r='1'/></svg>"); }
.gxi-games   { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='12'%20cy='5.6'%20r='2.6'/><path%20d='M12%208.2V14'/><path%20d='M6%2020.5h12l-1.6-6h-8.8z'/></svg>"); }
.gxi-watch   { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2.4'%20y='4'%20width='19.2'%20height='13.2'%20rx='2.4'/><path%20d='M8.5%2020.6h7'/><path%20d='m10.4%207.8%204.6%202.8-4.6%202.8z'/></svg>"); }
.gxi-radio   { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='12'%20cy='12'%20r='2.6'/><path%20d='M7.4%207.4a6.5%206.5%200%200%200%200%209.2M16.6%207.4a6.5%206.5%200%200%201%200%209.2'/><path%20d='M4.3%204.3a11%2011%200%200%200%200%2015.4M19.7%204.3a11%2011%200%200%201%200%2015.4'/></svg>"); }
.gxi-members { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='9.2'%20cy='8'%20r='3.3'/><path%20d='M3%2020c0-3.4%202.8-5.6%206.2-5.6S15.4%2016.6%2015.4%2020'/><path%20d='M16.4%205.3a3.3%203.3%200%200%201%200%206.4M17.8%2014.8c2%20.7%203.2%202.4%203.2%204.4'/></svg>"); }
.gxi-dir     { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%206.5h10M4%2012h8M4%2017.5h6'/><path%20d='m15.6%2015.6%202.1%202.1%204.1-4.6'/></svg>"); }
.gxi-book    { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%204.2h8.6a3.2%203.2%200%200%201%203.2%203.2V20H8.2A3.2%203.2%200%200%201%205%2016.8z'/><path%20d='M8.2%2020a3.2%203.2%200%200%201%203.2-3.2H19'/><path%20d='M8.8%208.2h5'/></svg>"); }
.gxi-events  { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='3.4'%20y='5.4'%20width='17.2'%20height='15.2'%20rx='2.4'/><path%20d='M3.4%2010.2h17.2M8%203.4v4M16%203.4v4'/></svg>"); }
.gxi-more    { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='5.8'%20cy='12'%20r='1.5'/><circle%20cx='12'%20cy='12'%20r='1.5'/><circle%20cx='18.2'%20cy='12'%20r='1.5'/></svg>"); }
.gxi-box     { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='m12%203%208.5%204.6v8.8L12%2021l-8.5-4.6V7.6z'/><path%20d='M3.5%207.6%2012%2012.2l8.5-4.6M12%2012.2V21'/></svg>"); }
.gxi-help    { --gxi: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='12'%20cy='12'%20r='8.8'/><path%20d='M9.6%209.5a2.5%202.5%200%201%201%203.4%202.4c-.7.3-1%20.9-1%201.6v.3'/><circle%20cx='12'%20cy='17'%20r='.9'/></svg>"); }