/* Hide some info on small screens that are 992px or less. */
@media screen and (max-width: 992px) {
  .hide1 {
    display:none;
  }
}
/* Hide even more on smaller screens that are 768px or less. */
@media screen and (max-width: 768px) {
  .hide1, .hide2 {
    display:none;
  }
}

body {
	background: #e5e5e5;
	color: #000;
	margin: 0px;
	font-family: Verdana,Geneva,Lucida,'Lucida Grande',Arial,Helvetica,Sans-serif;
	font-size: 100%;
}

.header, .content, .footer {
	display:block;
	clear: both;
	background: #fff;
	border: 1px solid #aebdc4;
	padding: 5px;
	margin: 5px;

	-moz-border-radius: 0.75em;
	-webkit-border-radius: 0.75em;
	border-radius: 0.75em;

/* Uncomment for fixed width layout:
	margin: 0 auto;
	width: 800px;
*/
}

text,	a:link, a:visited, a:active, a.CatLink, .CatDesc, .CatLockedName, .GenText,
	.GenTextRed, .ErrorText, .SmallText, .DateText, .TopBy, th, a.thLnk:link, a.thLnk:active, a.thLnk:visited,
	a.thLnk:active, .RowStyleA, .RowStyleB, .RowStyleC, .MsgToolBar, .PollTable, .MsgIg, td.miniMH,
	.ContentTable, .MsgTable, .DialogTable, .PreviewTable, .AnnonTable, .AnnText, td.NoAvatar, td.Av1, td.Av2, td.tabA,
	.AnnSubjText, a.PagerLink, .LevelText, .MsgSubText, .MsgBodyText, th.SelTS, th.SelFS, legend, td.tabH, div.tabT,
	.MiniTable, .quote, .dashed, .adminColor, .modsColor, td.tabI, td.tabA:hover,
	.brdrNormal, .brdrSelected, input.button, form, img, .StClr, .AnClr, td.msgot, td.msgud, div.ctags, td.mvTc, td.pmNav,
	.ModOpt, .MsgR1, .MsgR2, .MsgR3, .mnavMsg, .mnavWarnTbl, .mnavNoRes, font.lg, td.tt, table.tt, tr.tab, table.tab,
	a.big:link, a.big:active, a.big:visited, .small, a.small:link, a.small:active, a.small:visited, .curtime,
	font.anon, font.reg, td.permYES, td.permNO, td.repI, font.selmsgInd, fieldset
{
	font-family: Verdana,Geneva,Lucida,'Lucida Grande',Arial,Helvetica,Sans-serif;
	font-size: 10pt;
	line-height: 1.6;
}

a:link, a:visited, a:active, a.PagerLink {
	color: #069;
	text-decoration: underline;
}

a.CatLink {
	font-size: 10pt;
	font-weight: bold;
	text-decoration: none;
	color: #000;
}

.CatDesc {
	color: #000;
	height: 23px;
	background: url('/theme/default/images/tableHeaderbg2.png');
}

.CatLockedName {
	font-size: 10pt;
	font-weight: bold;
}

.CatLockPad {
	padding-left: 20px;
}

text, .GenText, .MsgIg, td.repI {
	color: #000;
}

.GenTextRed {
	color: red;
}

.ErrorText {
	color: red;
	font-weight: bold;
}

.SmallText, .DateText, .TopBy, td.permYES, td.permNO, .SmallText a {
	color: #202020;
	font-size: x-small;
}

th {
	font-size: 10pt;
	text-align: left;
	color: #fff;
	font-weight: bold;
	height: 23px;
	vertical-align: middle;
	background: url('/theme/default/images/tableHeaderbg.png');
}

a.thLnk:link, a.thLnk:active, a.thLnk:visited {
	font-size: 10pt;
	text-decoration: underline;
	color: #eee;
}

a.thLnk:visited {
	color: #c2cdd6;
}

.RowStyleA, td.tt {
	background: #eee;
}

.RowStyleB, .curtime, fieldset {
	background: #dee2e6;
}

.RowStyleC {
	background: #c2cdd6;
}

.row:hover td {
	opacity: 0.8;
}

.MsgToolBar {
	background: #dee2e6;
	padding-left: 3px;
	padding-right: 3px;
}

.MsgSpacer {
	padding-bottom: 2px;
	padding-top: 2px;
}

.PollTable, .ContentTable, .MsgTable, .DialogTable, .PreviewTable, .AnnonTable {
	background: #fff;
	border: 0;
	padding: 0;
	margin: 0;
	clear: both;
}

font.ptp { /* space between poll title & number of votes */
	font-size: smaller;
	padding-left: 10px;
}

.ContentTable, .AnnonTable, .MsgTable, table.pad {
	width: 100%;
}

.MsgTable {
	margin-top: 0;
	margin-bottom: 0;
	border: 1px solid #888;
}

.DialogTable {
	width: 66%;
}

.PreviewTable {
	width: 75%;
}

.AnnText {
	color: #000;
	background: #f5d300;
	margin-top: 7px;
	margin-bottom: 7px;
}

.AnnSubjText {
	font-weight: bold;
}

.MsgSubText {
	font-weight: bold;
}

a.MsgSubText, a.MsgSubText:visited {
	color: black;
	text-decoration: none;
}

.MsgBodyText {
	font-size: 10pt;
	display: block;
	line-height: 1.7;
}

.FormattingToolsBG {
	padding-left: 5px;
	vertical-align: bottom;
	background: transparent;
}

.FormattingToolsCLR {
	-moz-border-radius: 0.15em;
	-webkit-border-radius: 0.15em;
	border-radius: 0.15em;

	padding: 1px;
	background: #fff;
}
.FormattingToolsCLR:hover {
	border: 1px; 
	background: #dee;
}

.MiniTable {
	background: #fff;
	border: 0;
	padding: 0;
	margin: 0;
}

cite {
	/* quote titles */
	color: #202020;
	font-size: 9pt;
	font-weight: bold;
	margin-left: 20px;
	display: block;
	background: transparent url('/theme/default/images/quote.gif') left top no-repeat;
	padding-left: 25px;
}

blockquote {
	/* quote tags */
	color: #444;
	background: #fafafa;
	border-left: 1px dashed #c2cdd6;
	margin: 8px 1px 0 20px;
	overflow: hidden;
	padding: 5px;
	font-style: italic;
}
blockquote:first-letter {
	margin: 0 .1em 0 -0.12em;
	font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
	font-size: 160%;
	font-weight: bold;
	font-variant: small-caps;
}

blockquote blockquote {
	/* nested quote tags */
	background-color: #f0f0f0;
	margin: 8px 1px 0 10px;
}

blockquote blockquote blockquote {
	/* double nested quote tags */
	background-color: #e0e0e0;
}

.quote {
	/* old pre v3 quotes */
	color: #444444;
	background: #FAFAFA;
	border: 1px solid #c2cdd6;
}

.indent {
	/* [indent] & [tab] tags */
	margin-left: 35px;
}

.dashed {
	border: 1px dashed #1b7cad;
}

.adminColor {
	font-weight: bold;
	color: #f00;
}

.modsColor {
	color: #0b0;
	font-weight: bold;
}

.brdrNormal, td.tabItop, td.tabImid, td.tabIbot {
	border: #000;
	border-style: solid;
	border-left-width: 0;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 1px;
	background-repeat: repeat;
	background-position: top;
}

.brdrSelected, td.tabAmid, td.tabAmid, td.tabAbot {
	border: #000;
	border-style: solid;
	border-left-width: 0;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	background-repeat: repeat;
	background-position: top;
}

form {
	padding: 0;
	margin: 0;
}

img {
        border: 0;
        max-width: 800px;
        transition:all 0.5s ease-out;
}
img:hover {
    transform: scale(1.05);
}

figcaption {
        font-style: italic;
        font-variant: small-caps;
        font-size: smaller;
}

a[href^="mailto:"] {
	background: url(/theme/default/images/email.png) no-repeat right center;
	padding-right:17px;
}

.StClr {
	font-weight: bold;
	color: green;
}

.AnClr {
	font-weight: bold;
	color: red;
}

.ModOpt, .ModOpt a {
	color: #a8b1b8;
	font-size: x-small;
	text-align: right;
}

.TopBy {
	margin-bottom: 0;
	padding-right: 2px;
	text-align: right;
}

.MsgR2, .MsgR1, .MsgR3, .MsgIg {
	background: #dee2e6;
	border-bottom: 1px solid #aaa;
	padding: 2px;
}

.MsgIg {
	border: 0;
}

.MsgR1 {
	background: #ccd4dc;
}

.MsgR3 {
	background: #f4f4f4;
	padding: 1ex;
	padding-top: 2ex;
}

.mnavMsg {
	border-bottom: 1px dashed #eee;
	width: 100%;
}

.mnavWarnTbl {
	border: 1px dashed red;
}

.mnavNoRes {
	border: 1px dashed blue;
}

font.lg {
	font-size: 10pt;
}

td.tt {
	text-align: left;
	width: 100%;
	border-bottom: 1px solid #fff;
}

table.tt {
	width: 100%;
	padding: 1px;
	margin: 0;
	text-align: center;
	border: 1px solid #000;
}

a.big:link, a.big:active, a.big:visited {
	color: #069;
	font-size: 11pt;
}

.small, a.small:link, a.small:active, a.small:visited {
	font-size: 9pt;
	font-weight: normal;
}

a.small:link, a.small:active, a.small:visited {
	color: #069;
}

a:hover, a.big:hover, td.msgud a:hover, td.msgot a:hover {
	color: #dc143c;
}

td.msgud, td.msgot, td.msgot a, div.ctags {
	color: #202020;
	font-size: 8pt;
	vertical-align: top;
	width: 33%;
	white-space: nowrap;
}

td.msgud {
	padding-right: 10px;
	text-align: left;
}

td.msgot {
	text-align: right;
}

div.ctags {
	padding: 2px;
	width: 100%;
}

legend {
	font-size: 11pt;
	font-weight: bold;
	background-color: #fff;
	border: 1px solid #aebdc4;
}

fieldset {
	border: 1px solid #aebdc4;
}

th.SelTS, th.SelFS {
	padding: 2px;
	color: #fff;
}

th.SelFS {
	 border-bottom: 1px solid #fff;
	 color: #fff;
}

td.NoAvatar {
	background: #f4f4f4;
	text-align: center;
}

td.Av1, td.Av2 {
	text-align: center;
	background: #f4f4f4;
	vertical-align: middle;
	white-space: nowrap;
}

td.Av2 {
	background: #fefefe;
}

td.tabI, td.tabA, td.tabI:hover, td.tabOVER, td.tabON {
	border: 1px solid black;
	background: #dee7f7;
        padding: 2px;
}

td.tabOVER, td.tabI:hover, td.tabI:active {
	background: #fff;
}

td.tabON {
	background: #5279bd;
}

a.tabON:link, a.tabON:active, a.tabON:visited, a.tabON:hover {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

div.tabT {
	padding: 1px;
        padding-left: 10px;
        padding-right: 10px;
}

table.tab {
	border-bottom: 1px solid #000;
}

.curtime {
	border: 1px solid #aebdc4;
	vertical-align: middle;
	padding: 1px 3px 1px 3px;
}

td.pmSn {
	background: #fff;
}

td.pmSa {
	background: #fffa00;
}

td.pmSf {
	background: red;
}

table.pmDu {
	width: 175px;
	background-color: #fff;
	border: 1px #c2cdd6 solid;
}

td.mvTc {
	background: #e5ffe7;
}

td.pmNav {
	background: #fff;
	text-align: right;
}

td.miniMH {
	text-align: center;
}

tr.mnavH {
	background: #eee;
}

tr.mnavM {
	background: #dee2e6;
}

table.regConf {
	width: 80%;
	border: 1px dashed #f00;
}

font.anon, font.reg {
	color: #0a0;
}

td.permYES, td.permNO {
	text-align: center;
	color: red;
	white-space: nowrap;
}

td.permNO {
	color: blue;
}

font.regEW {
	font-size: xx-small;
	color: #050;
	font-weight: bold;
}

td.repI {
	padding: 5px;
	padding-left: 20px;
}

table.pad {
	margin-top: 2px;
	margin-bottom: 2px;
}

font.selmsgInd {
	font-size: xx-small;
	font-weight: bold;
	text-decoration: none;
}

td.avatarPad {
	padding-right: 3px;
	vertical-align: top;
}

div.pre {
	font-family: monospace;
	padding: 5px;
	border: 1px blue dashed;
	font-size: 10pt;
	white-space: pre;
	background: #fafafa;
	overflow: auto;
	margin: 5px;
}

/* Code formatting. */
pre { white-space: pre-wrap; }
.codehead, .codehead a { color: #202020; background: #e9e9e9; font-size: xx-small; font-weight:bold; }
html pre.prettyprint { border:none; padding: 0; margin: 5px;} 

a.big:active, a:active, a.CatLink:active, a.UserControlPanel:active, a.thLnk:active, 
a.small:active, a.PagerLink:active, a.MsgSubText:active {
	color: #dc143c;
}

/* BBcode [imgl] & [imgr] tags. */
img.l {
	float: left;
	clear: right;
	margin: 3px;
}

img.r {
	float: right;
	clear: left;
	margin: 3px;
}

.AttachmentsList {
	margin-left: 0;
	list-style: none;
	margin-top: 10px;
	padding: 0;
}

.signature {
	border-top: 1px dotted #a0a0a0;
	color: #202020;
	font-size: 8pt;
}

.header {color:#fff; background:#5478a4;}
.header a {color:#fff; text-decoration:none;}
.headtitle {padding: 10px; font-size:xx-large; font-weight:bold; text-decoration:none;}
.headdescr {padding: 20px 10px 0px 20px; color:#eee; font-size:small;}
.headsearch {padding: 0 0 10px 20px; font-size: small; font-weight:bold; float:right; white-space: nowrap;}

/* Make textareas's resizable (jQuery UI). */
.ui-resizable-s {
	height: 9px;
	background: #eee url("/theme/default/images/grippie.gif") no-repeat center 2px;
 	border: 1px solid #ddd;
	border-top-width: 0;
	overflow: hidden;
}
.ui-resizable-resizing textarea {
	opacity: 0.5;
	filter: alpha(opacity=50);
	zoom: 1;
}

/* The following are partial elements that are used to save space. */
.wo { width:		1px; }
.wa { width:		100%; }
.ac { text-align:	center; }
.al { text-align:	left; }
.ar { text-align:	right; }
.fl { float: 		left; }
.fr { float: 		right; }
.vb { vertical-align:	bottom; }
.vt { vertical-align:	top; }
.vm { vertical-align:	middle; }
.nw { white-space: 	nowrap; }
.fb { font-weight:	bold; }
.dn { display: none; visibility:hidden;}
.clear { clear: both; }

img.at { float: left; clear: left; }

div.sr { float: left; padding: 5px; }

div.ctb {text-align: center; clear: both;}
div.ctb table {margin: 0 auto; text-align: left;}
div.ip { overflow: auto; margin: 0; padding: 2px; width: 600px; height: 400px; }
span.vt { padding-left: 20px; }
table.icqCP { font-family: arial, sans-serif; font-size: smaller; border: 0; }
div.pmL { padding-top: 2px; }
table.ucPW { width: 175px; }

/* Colors for highlighting search terms. */
.st0 { background-color: #ffff66; }
.st1 { background-color: #a0ffff; }
.st2 { background-color: #99ff99; }
.st3 { background-color: #ffd7a8; }
.st4 { background-color: #ff9999; }
.st5 { background-color: #aba8ff; }
.st6 { background-color: #b3ff66; }
.st7 { background-color: #fff2a8; }
.st8 { background-color: #a8d1ff; }
.st9 { background-color: #ffb7b7; }

/* User Control Panel / Top Level Menu. */
#UserControlPanel {
	float: right;
	width: 100%;
	margin: 5px 0 10px 10px;
}
#UserControlPanel ul {
	list-style: none;
	float: right;
	padding: 0;
	margin: 0;
	text-align:right;
}
#UserControlPanel li {
	margin: 0 7px 0 0;
	position:relative;
	display: inline;
	white-space: nowrap;
}
#UserControlPanel li a {
	color: #069;
	text-decoration: none;
}

/* Calendar. */
table.calendar {border-left:1px solid #999; }
tr.calendar-row {}
td.calendar-day {min-height:80px; font-size:11px; position:relative; } * html div.calendar-day { height:80px; }
td.calendar-day:hover {background:#eceff5; }
td.calendar-day-np {background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }
td.calendar-day-head {background:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
div.day-number {background:#999; position:absolute; z-index:2; top:-5px; right:-25px; padding:5px; color:#fff; font-weight:bold; width:20px; text-align:center; }
td.calendar-day, td.calendar-day-np { width:120px; padding:5px 25px 5px 5px; border-bottom:1px solid #999; border-right:1px solid #999; }

/* Buttons. */
input.button:link, input.button:visited, input.button {
	background:#ddd url(/theme/default/images/button.png) repeat-x scroll left top;
	border-color:#ccc #b4b2b4 #ccc #b4b2b4;
	position: relative;
	cursor: pointer;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
input.button:hover, input.button:hover {
	background:#e2e2e2 url(/theme/default/images/button.png) repeat-x scroll left -115px;
	color:#000;
}
.small.button, .small.button:visited   { font-size: 11px; }

/* Karma voting */
a.karma {
    text-decoration: none;
}
a.up {
    color: green;
    font-weight: bold;
}
a.down {
    color: red;
    font-weight: bold;
}

/* Blog page - two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
    float: left;
    width: 74%;
}

/* Right column */
.rightcolumn {
    float: left;
    width: 24%;
    padding-left: 10px;
}

/* Add a card effect for articles */
.card {
    background-color: #f4f4f4;
    padding: 0 10px 10px 10px;
    margin-top: 10px;
    font-size: 10pt;
    line-height: 1.7;
    box-shadow: inset 0 0 10px #ccc;
}
.card a {
    text-decoration: none;
}
.rightcolumn .card {
    background-color: #ddd;
}

/* Clear floats after the columns */
.group:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - hide the sidebar when the screen is less than 768px wide. */
@media screen and (max-width: 768px) {
  .rightcolumn {
    display:none;
    width: 0%;
  }
  .leftcolumn {
    width: 98%;
    padding: 0;
  }
}

/* FootballSportsTalk — swh theme (redesign). Ported onto FUDforum's markup.
   Color in OKLCH; neutrals tinted toward brand hue. Dark via prefers-color-scheme
   (a manual toggle comes with the header.tmpl override). */

/* Display + body fonts (Saira Condensed + Inter) load via a Google Fonts <link> in
   header.tmpl. The bundled Jakarta woff2 stays in the theme but is no longer referenced. */

:root {
  --brand: #c8371a;
  --brand-strong: #a82f16;
  --accent-fill: #e8451f;
  --accent-fill-strong: #cf3a17;
  --brand-tint: #f7ebe6;
  --brand-tint-2: #f0ddd6;
  --ring: rgba(232,69,31,0.4);
  --ink: #141922;    /* slate-800 - headings */
  --text: #2c343f;   /* slate-700 - body text; matches the reference forum (sviluppodev) exactly; 10.8:1 on white */
  --muted: #5a6472;  /* slate-600 - secondary text; 7.5:1 */
  --faint: #5f6b7a;  /* slate-500 - meta/timestamps; 4.9:1 */
  --line: #e6e2d8;
  --line-soft: #efe9df;
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #efe9df;
  --nav-bg: rgba(246,244,239,0.86);
  --success: #0e6f31;
  --r-sm: 8px; --r: 10px; --r-lg: 14px; --r-pill: 999px;
  --sh-1: 0 1px 2px oklch(50% 0.03 262 / 0.06), 0 1px 3px oklch(50% 0.03 262 / 0.05);
  --sh-2: 0 2px 6px oklch(50% 0.03 262 / 0.07), 0 8px 20px oklch(50% 0.03 262 / 0.06);
  --font-display: "Saira Condensed", "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container: 1440px;
  /* Per-category accent (icon) + tint (tile bg) — matches the approved mock. */
  --c-host: #e8451f;  --c-host-t: #fbe7e0;
  --c-virt: #7c5cff;  --c-virt-t: #ece7ff;
  --c-lnx:  #1f9d55;  --c-lnx-t:  #e2f3ea;
  --c-hw:   #c77d0e;   --c-hw-t:   #f7ecd8;
  --c-net:  #2f6df0;  --c-net-t:  #e6edfd;
  --c-sec:  #d1224b;   --c-sec-t:  #fce4ea;
  --c-cloud:#2b7d99;   --c-cloud-t:#e2f0f4;
  --c-beg:  #0e8f8f;   --c-beg-t:  #dbf1f1;
  --c-arch: #5a6472;  --c-arch-t: #eceef1;
  --c-gen:  #e8451f;  --c-gen-t:  #fbe7e0;
  --tab-ink: #5a6472; --badge-hot: #c8371a; --badge-open: #7f570e;
  --role-admin: #c8371a; --role-mod: #0e6f31;
  --vote-up: #e8451f; --vote-down: #2b7d99;   /* Reddit-style action colors for post voting */
  color-scheme: light;
}
/* Dark theme — applied only via the manual toggle (data-theme="dark"), NOT auto.
   Keeps the site reliably light until the toggle + dark polish ship. */
:root[data-theme="dark"] {
  --brand: #e8451f; --brand-strong: #f0613d;
  --accent-fill: #e8451f; --accent-fill-strong: #cf3a17;
  --brand-tint: #232b36; --brand-tint-2: #1b222c;
  --ring: rgba(232,69,31,0.5);
  --ink: #ffffff; --text: #cdd6e0;
  --muted: #94a3b8; --faint: #64748b;
  --line: #2a3342; --line-soft: #1e2530;
  --bg: #0b0f14; --surface: #1f2632; --surface-2: #161c26;
  --nav-bg: rgba(11,15,20,0.9);
  --vote-up: #ff5a1f; --vote-down: #6fb3c9;
  /* Category accents — muted tints for dark. */
  --c-host-t: #2a1f1b;  --c-host: #f0613d;
  --c-virt-t: #221f2e;  --c-virt: #a48cff;
  --c-lnx-t:  #182a20;  --c-lnx:  #5fd08f;
  --c-hw-t:   #2a2416;   --c-hw:   #e0a94e;
  --c-net-t:  #1a2233;  --c-net:  #6f9bf5;
  --c-sec-t:  #2a1a20;   --c-sec:  #f06a89;
  --c-cloud-t:#17242a;  --c-cloud:#6fb3c9;
  --c-beg-t:  #132a2a;   --c-beg:  #4fd0d0;
  --c-arch-t: #232833; --c-arch: #94a3b8;
  --c-gen-t:  #2a1f1b;  --c-gen:  #f0613d;
  --tab-ink: #94a3b8; --badge-hot: #e8451f; --badge-open: #d8b46a;
  --role-admin: #f0613d; --role-mod: #6ee7a8;
  --sh-1: 0 1px 2px oklch(0% 0 0 / 0.35), 0 1px 3px oklch(0% 0 0 / 0.3);
  --sh-2: 0 2px 6px oklch(0% 0 0 / 0.4), 0 8px 20px oklch(0% 0 0 / 0.35);
  color-scheme: dark;
}

/* ---- base ---- */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a, a:link, a:visited { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); text-decoration: none; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---- top nav (mock) ---- */
.swh-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; gap: 18px; height: 66px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.08; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.28rem; color: var(--ink); letter-spacing: -0.02em; }
.brand-name b { color: var(--brand); font-weight: 800; }
.brand-tag { font-size: 11px; color: var(--muted); font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav-links a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--r); font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  color: var(--text); text-decoration: none;
}
.nav-links a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav-ico { width: 18px; height: 18px; color: var(--faint); flex: none; }
.nav-links a:hover .nav-ico { color: var(--brand); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 44px;
  padding: 0 16px; border-radius: var(--r); font-family: var(--font-display);
  font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn-outline { border-color: var(--line); background: var(--surface); }
.btn-primary { background: var(--accent-fill); color: #fff; }
a.btn-outline:link, a.btn-outline:visited { color: var(--ink); }
a.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
a.btn-primary:link, a.btn-primary:visited, a.btn-primary:hover { color: #fff; }
a.btn-primary:hover { background: var(--accent-fill-strong); }
.theme-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.theme-toggle:hover { color: var(--ink); border-color: var(--brand); }
.theme-toggle .ti-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ti-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ti-moon { display: block; }
.swh-push-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.swh-push-btn:hover { color: var(--ink); border-color: var(--brand); }
.swh-push-btn.is-on { color: var(--brand); border-color: var(--brand); }
.headtitle, .headdescr, .headimg { display: none; }
.nav-cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
.nav-toggle { display: none; width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; flex: none; place-items: center; }
.nav-cb:focus-visible + .nav-toggle { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Logged-in username chip + Sign-In dropdown (pure-CSS, JS-off safe) */
.nav-actions { position: relative; }
.nav-user { gap: 6px; }
.nav-user .nav-ico { width: 16px; height: 16px; }
.nav-user-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
.login-open { cursor: pointer; }
.login-pop { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 264px; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.nav-actions:has(.login-cb:checked) .login-pop { display: flex; }
.login-pop-l { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-display); font-size: 0.76rem; font-weight: 700; color: var(--muted); }
.login-pop-l input { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--ink); font-size: 0.9rem; font-weight: 400; }
.login-pop-l input:focus { outline: none; border-color: var(--brand); }
.login-pop .btn-primary { justify-content: center; margin-top: 2px; }
.login-pop-alt { font-size: 0.8rem; color: var(--muted); text-align: center; text-decoration: none; }
.login-pop-alt:hover { color: var(--brand); }
/* --- User Control Panel (account settings / notifications / subscriptions tabs + section headers) --- */
table.tab { border-collapse: separate; border-spacing: 3px 0; margin: 6px 0 20px; width: auto; }
.tab td { background: transparent !important; border: 0 !important; padding: 0 !important; }
.tab .tabT { padding: 0; }
.tab .tabT a, .tab a.tabON { display: block; padding: 8px 15px; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--muted); text-decoration: none; border-radius: var(--r) var(--r) 0 0; white-space: nowrap; }
.tab td.tabI:hover .tabT a { color: var(--ink); background: var(--surface-2); }
.tab td.tabON .tabT a, .tab a.tabON, .tab a.tabON:link, .tab a.tabON:visited { color: var(--brand) !important; background: var(--surface) !important; box-shadow: inset 0 -2px 0 var(--brand); }
.CatDesc, th.CatDesc { background: var(--surface-2) !important; color: var(--ink) !important; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; text-align: left; padding: 11px 16px !important; border: 0 !important; border-top: 1px solid var(--line) !important; }
.ContentTable td.RowStyleC, td.RowStyleC { background: transparent !important; color: var(--muted); }
.ContentTable input[type="text"], .ContentTable input[type="password"], .ContentTable input[type="email"], .ContentTable input[type="number"], .ContentTable select, .ContentTable textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--ink); font-size: 0.9rem; font-family: var(--font-body); max-width: 100%;
}
.ContentTable input:focus, .ContentTable select:focus, .ContentTable textarea:focus { outline: none; border-color: var(--brand); }
/* --- Backend readability pass (User CP, moderator, member/search list pages): bigger + darker
       text per client request 2026-08-18. Scoped to the settings/list surfaces (.ContentTable,
       the UCP tab bar, fieldsets) so the home feed, hero and message body stay as approved. --- */
.tab .tabT a, .tab a.tabON { font-size: 0.96rem; }
.CatDesc, th.CatDesc { font-size: 0.9rem; }
.ContentTable th { font-size: 13px; color: var(--text); }
.ContentTable td { font-size: 1.03rem; color: var(--text); }
/* ...but the message poster box also uses .ContentTable — keep the backend-readability bump OFF it,
   so the poster meta (Messages/Registered/rank) stays small, not larger than the post body. */
.MsgR2 .ContentTable td { font-size: 0.86rem; }
.MsgR2 .ContentTable td.msgud, .MsgR2 .ContentTable td.msgot { font-size: 0.8rem; }
.ContentTable td.RowStyleC, td.RowStyleC { color: var(--text); }
.ContentTable .GenText, .ContentTable .SmallText, fieldset, fieldset .SmallText { font-size: 0.85rem; color: var(--text); }
.ContentTable .DateText { font-size: 0.9rem; color: var(--muted); }
.ContentTable label, .ContentTable td.RowStyleA, .ContentTable td.RowStyleB { color: var(--text); }
.ContentTable input[type="text"], .ContentTable input[type="password"], .ContentTable input[type="email"], .ContentTable input[type="number"], .ContentTable select, .ContentTable textarea { font-size: 0.98rem; color: var(--ink); }
/* --- Help: inline feature screenshots in the Community Features section --- */
.help-shot { display: block; max-width: min(100%, 520px); height: auto; margin: 12px 0 2px; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--sh-1); background: var(--surface); }
/* --- Ad zones (M4 ad rotation: header banner / sidebar / in-thread) --- */
.swh-ad-label { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.swh-ad-body { font-size: 0.9rem; line-height: 1.45; }
.swh-ad-body a { color: var(--brand-ink); text-decoration: none; font-weight: 600; }
.swh-ad-body a:hover { text-decoration: underline; }
.swh-ad-header { max-width: var(--container); margin: 12px auto 0; padding: 10px 32px; text-align: center; }
.swh-ad-header .swh-ad-body { font-size: 0.92rem; }
.swh-ad-inpost { margin: 0 0 4px; padding: 12px 14px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r); text-align: center; }
.swh-ad-inpost .swh-ad-body a { display: inline-block; }
.swh-ad-inpost .swh-ad-body img { display: block; max-width: 100%; height: auto; }
.swh-ad-cell { padding: 6px 0 !important; border: 0 !important; background: transparent !important; }
/* --- Help pages (t=help_index): larger + darker text (client request 2026-08-18). Scoped via
       td.content, which is help-specific (UCP/list ContentTables use RowStyle* cells, not td.content). --- */
.ContentTable td.content, .ContentTable td.content .GenText { font-size: 1rem !important; color: var(--ink) !important; line-height: 1.62; }
.ContentTable td.content .GenText a, .ContentTable td.content li { font-size: 1rem !important; }
.ContentTable:has(td.content) th, .ContentTable:has(td.content) th a { font-size: 0.98rem !important; color: var(--ink) !important; }
/* --- Mobile message/thread page: stack the toolbar so the action buttons wrap instead of overflowing --- */
@media (max-width: 680px) {
  /* cap the message column + all its nested tables to the viewport (no horizontal overflow).
     table-layout:fixed stops the outer table expanding to a non-wrapping child (the toolbar). */
  .content > table[width="100%"] { table-layout: fixed; }
  .content > table[width="100%"]:has(.MsgTable) { max-width: 100%; }
  table.wa td.vb.ar, table.wa td.ar, table.wa td { white-space: normal; }
  .MsgTable, .MsgTable table, .ContentTable { max-width: 100%; }
  .MsgR2 .ContentTable { table-layout: fixed; width: 100%; }
  .MsgR2 .ContentTable td { overflow-wrap: anywhere; }
  /* Poster meta row: the 4 fixed cells (avatar | name+stats | rank | IP) collide on narrow
     screens. Flow them instead — avatar + name/stats on line 1, rank wraps under, IP hidden. */
  .MsgR2 .ContentTable, .MsgR2 .ContentTable > tbody { display: block; }
  .MsgR2 .ContentTable > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; }
  .MsgR2 .ContentTable td.avatarPad { flex: 0 0 auto; }
  .MsgR2 .ContentTable td.msgud { flex: 1 1 auto; min-width: 0; white-space: normal; word-break: break-word; }
  .MsgR2 .ContentTable td.msgud * { white-space: normal !important; }
  .MsgR2 .ContentTable td.msgud + td.msgud { flex-basis: 100%; color: var(--muted); }
  .MsgR2 .ContentTable td.msgot { display: none; }
  table.wa, table.wa > tbody, table.wa > tbody > tr { display: block; width: 100%; }
  table.wa td { display: block; width: 100% !important; text-align: left !important; }
  table.wa td.vb.ar, table.wa td.ar { text-align: left !important; margin-top: 12px; }
  table.wa:has(.act-btn) { margin-bottom: 14px; }
  .act-btn { height: 34px; padding: 0 12px; font-size: 0.82rem; margin-bottom: 6px; }
  .act-btn + .act-btn { margin-left: 6px; }
  .crumb { gap: 5px; font-size: 0.82rem; }
  .crumb-cur { max-width: 100%; white-space: normal; }
  .MsgSubText { font-size: 0.98rem; }
  .content > table[width="100%"] > tbody > tr > td { padding: 12px 16px 24px; }
  .msg-toolbar { gap: 6px; }
  .MsgTable td, .MsgR1, .MsgR2, .MsgR3 { padding-left: 12px !important; padding-right: 12px !important; }
}
.nav-toggle:hover { border-color: var(--brand); color: var(--brand); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-links .menu-only { display: none; }
@media (max-width: 860px) {
  .brand-tag { display: none; }
  .nav-toggle { display: inline-grid; }
  .nav-actions .btn { display: none; }        /* Sign In + Create Account move into the menu */
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 16px; box-shadow: var(--sh-2);
  }
  .nav-inner:has(.nav-cb:checked) .nav-links, .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 12px; font-size: 0.95rem; }
  .nav-links .menu-only { display: flex; margin-top: 2px; }
  .nav-links .menu-only.nav-cta { color: #fff; background: var(--accent-fill); font-weight: 700; justify-content: center; }
  .nav-links .menu-only.nav-cta:hover { background: var(--accent-fill-strong, var(--brand-strong)); }
}

/* ---- main content: full-width passthrough (kill FUDforum's centered box) ---- */
.content {
  display: block; max-width: none; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.content > table[width="100%"] { width: 100% !important; max-width: var(--container); margin: 0 auto; border-collapse: collapse; border-spacing: 0; }
.content > table[width="100%"] > tbody > tr > td { padding: 14px 32px 30px; }
/* contained inner width for everything except the full-bleed hero */
.page { max-width: none; margin: 0; padding: 24px 0 0; }

/* top user nav ( Search Help Members Register Login Home ) — redundant with the new nav */
#UserControlPanel { display: none; }
#UserControlPanel ul {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none;
}
#UserControlPanel li { list-style: none; }
#UserControlPanel a {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
  border-radius: var(--r); color: var(--text); font-weight: 600; font-size: 14px;
}
#UserControlPanel a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
#UserControlPanel img { width: 16px; height: 16px; }

/* show-links subnav */
#ShowLinks {
  display: block; margin: 0 0 6px; padding: 0; font-size: 0.82rem;
  color: var(--text);
}
#ShowLinks .GenText, #ShowLinks b { color: var(--text); font-weight: 700; }
#ShowLinks a { font-weight: 600; }

/* ---- main tables as cards ---- */
.ContentTable {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden;
}
.ContentTable th {
  text-align: left; background: var(--surface-2); color: var(--muted);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.ContentTable td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.RowStyleA, .RowStyleB { background: transparent; }
.ContentTable tr:hover td { background: var(--surface-2); }
/* Neutralize FUDforum's default blue-gradient table header (bare `th` with a PNG bg
   image + white text). Used by the thread-list "Topic/Replies/Views" header. */
th { background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: left; height: auto; padding: 10px 13px; border-bottom: 1px solid var(--line); }

/* category header row */
.CatDesc {
  background: var(--brand-tint) !important; border-bottom: 1px solid var(--line) !important;
  padding: 10px 14px !important;
}
.CatLink {
  font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink);
  letter-spacing: -0.01em;
}
.CatLink:hover { color: var(--brand-strong); }

/* forum name link */
.big {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink);
}
.big:hover { color: var(--brand-strong); }

.DateText { color: var(--faint); font-size: 12px; }
.SmallText { font-size: 13px; color: var(--muted); }
.GenText { color: var(--text); }
.thLnk { font-weight: 600; }
.adminColor { color: var(--role-admin); font-weight: 700; }
.modsColor { color: var(--role-mod); font-weight: 700; }

/* quick login + buttons + inputs */
.fr { float: none; margin: 0 0 20px; }
/* Thread-list header (t=thread): the theme neutralises .fr floats, which left the "New Topic"
   button flowing inline after the Show-links. Flex this specific container so Show-links sit
   left and New Topic sits far right. */
div.wa:has(> .fl):has(> .fr) { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; }
div.wa:has(> .fl):has(> .fr) > .fl, div.wa:has(> .fl):has(> .fr) > .fr { margin: 0; }
/* Thread-list bulk-action row (Delete/Move/Merge/Lock selected): breathing room from the
   header + thread rows, and a small gap between the buttons. */
table.pad td.RowStyleC:has(input.button.small) { padding-top: 16px; padding-bottom: 8px; }
input.button.small + input.button.small { margin-left: 6px; }
input[type="text"], input[type="password"], input[type="search"], textarea, select {
  border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-sm);
  padding: 8px 10px; font: inherit; font-size: 14px; color: var(--ink);
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring);
}
.button, input[type="submit"], input[name="quick_login_submit"] {
  height: 38px; padding: 0 18px; border: 0; border-radius: var(--r);
  background: var(--accent-fill); color: #fff; font-family: var(--font-display);
  font-weight: 600; font-size: 14px; cursor: pointer;
}
.button:hover, input[type="submit"]:hover { background: var(--accent-fill-strong); }

/* legend / misc — override base gray backgrounds */
fieldset {
  border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px;
  margin: 0 0 16px; color: var(--muted); font-size: 13px; background: var(--surface);
}
fieldset legend { color: var(--faint); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 0 6px; background: transparent; }
.curtime, .curtime b { color: var(--muted); font-size: 12px; background: transparent; }
.RowStyleB { background: transparent; }

/* ---- hero ---- */
.hero { background: linear-gradient(180deg, var(--brand-tint) 0%, var(--brand-tint-2) 55%, var(--bg) 100%); border-bottom: 1px solid var(--line); }
.hero-inner { max-width: 940px; margin: 0 auto; padding: clamp(32px,4vw,52px) 24px clamp(26px,3.5vw,42px); text-align: center; }
.hero-inner h1 { font-family: var(--font-display); font-size: clamp(1.45rem, 0.9rem + 1.5vw, 1.75rem); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.hero-sub { margin: 12px auto 0; max-width: 40em; font-size: clamp(0.98rem, 0.95rem + 0.25vw, 1.1rem); color: var(--text); }
.hero-search { display: flex; gap: 8px; max-width: 760px; margin: 22px auto 0; background: var(--surface); padding: 6px; border-radius: var(--r-lg); box-shadow: var(--sh-2); border: 1px solid var(--line); }
.hero-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring), var(--sh-2); }
.hero-search input { flex: 1; border: 0; background: transparent; font-size: 1rem; color: var(--ink); padding: 10px 14px; outline: none; min-width: 0; }
.hero-search input::placeholder { color: var(--faint); }
.hero-search .btn { padding: 0 22px; flex: none; }
.hero-chips { margin: 16px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.chips-label { font-size: 0.84rem; font-weight: 700; color: var(--muted); }
.chip { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 0.82rem; font-weight: 600; }
.chip:link, .chip:visited { color: var(--brand-strong); }
.chip:hover { border-color: var(--brand); }

/* ---- category cards ---- */
.cats { margin-bottom: 32px; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* Category heading hidden visually (matches the mock's sr-only "Categories" label). */
.cat-heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; min-height: 196px; padding: 30px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.cat-card:hover { border-color: oklch(88% 0.02 255); box-shadow: var(--sh-2); text-decoration: none; }
.cat-top { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cat-tile { width: 52px; height: 52px; border-radius: 11px; background: var(--ct, var(--c-gen-t)); color: var(--ci, var(--c-gen)); display: grid; place-items: center; flex: none; transition: transform .15s ease; }
.cat-card:hover .cat-tile { transform: translateY(-1px); }
.cat-ico { width: 28px; height: 28px; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: var(--ico); mask-image: var(--ico); }
/* Per-category accent (tile) + icon (mask), keyed by the forum-name class emitted in draw_forum_list.tmpl. */
.t-host  { --ct: var(--c-host-t);  --ci: var(--c-host);  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c3-4.5 6-6.5 9-6.5s6 2 9 6.5c-3 4.5-6 6.5-9 6.5s-6-2-9-6.5Z'/%3E%3Cpath d='M7.5 12h9'/%3E%3Cpath d='M10 10.5v3M12 10.5v3M14 10.5v3'/%3E%3C/svg%3E"); }
.t-virt  { --ct: var(--c-virt-t);  --ci: var(--c-virt);  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9a2 2 0 0 1-2 2H6l-4 3V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v10l-4-3h-6a2 2 0 0 1-2-2v-1'/%3E%3C/svg%3E"); }
.t-cloud { --ct: var(--c-cloud-t); --ci: var(--c-cloud); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M5.6 5.6c3.5 3 3.5 9.8 0 12.8'/%3E%3Cpath d='M18.4 5.6c-3.5 3-3.5 9.8 0 12.8'/%3E%3C/svg%3E"); }
.t-lnx   { --ct: var(--c-lnx-t);   --ci: var(--c-lnx);   --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 L14.17 9.01 L20.56 9.22 L15.52 13.14 L17.29 19.28 L12 15.7 L6.71 19.28 L8.48 13.14 L3.44 9.22 L9.83 9.01 Z'/%3E%3C/svg%3E"); }
.t-net   { --ct: var(--c-net-t);   --ci: var(--c-net);   --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 4 7 8 11'/%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M16 21 20 17 16 13'/%3E%3Cpath d='M20 17H4'/%3E%3C/svg%3E"); }
.t-sec   { --ct: var(--c-sec-t);   --ci: var(--c-sec);   --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5Z'/%3E%3C/svg%3E"); }
.t-hw    { --ct: var(--c-hw-t);    --ci: var(--c-hw);    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='1.5'/%3E%3Cpath d='M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2'/%3E%3C/svg%3E"); }
.t-beg   { --ct: var(--c-beg-t);   --ci: var(--c-beg);   --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c0 1 2.7 2.5 6 2.5s6-1.5 6-2.5v-5'/%3E%3C/svg%3E"); }
.t-arch  { --ct: var(--c-arch-t);  --ci: var(--c-arch);  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='4' rx='1'/%3E%3Cpath d='M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E"); }
.t-gen   { --ct: var(--c-gen-t);   --ci: var(--c-gen);   --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='1.5'/%3E%3Crect x='3' y='13' width='18' height='7' rx='1.5'/%3E%3Cpath d='M7 7.5h.01M7 16.5h.01'/%3E%3C/svg%3E"); }
.cat-hd { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cat-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); line-height: 1.1; }
.cat-card:hover .cat-name { color: var(--brand-strong); }
.cat-count { font-size: 0.86rem; font-weight: 700; color: var(--brand); margin-top: 1px; }
.cat-desc { font-size: 0.86rem; color: var(--muted); line-height: 1.4; display: block; max-width: 26ch; margin-inline: auto; }
@media (max-width: 760px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cat-grid { grid-template-columns: 1fr; } }

/* ---- Home two-column: latest discussions + sidebar ---- */
.swh-home { display: grid; grid-template-columns: minmax(0,1fr) 322px; gap: 20px; margin-top: 32px; align-items: start; }
.s-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.s-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.s-head h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.s-tabs { display: inline-flex; gap: 2px; background: var(--brand-tint); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.s-tab { font-size: 0.8rem; font-weight: 700; color: var(--tab-ink); padding: 5px 13px; border-radius: 999px; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
a.s-tab:link, a.s-tab:visited { color: var(--tab-ink); }
.s-tab:hover { color: var(--ink); text-decoration: none; }
.s-tab.is-on, a.s-tab.is-on:link, a.s-tab.is-on:visited { color: #fff; background: var(--accent-fill, var(--brand)); box-shadow: var(--sh-1); }
.s-tab.is-on:hover { color: #fff; }
.s-empty { padding: 34px 18px; text-align: center; color: var(--muted); font-size: 0.9rem; }
.s-list { display: flex; flex-direction: column; }
.s-thread { display: flex; gap: 13px; align-items: flex-start; padding: 15px 18px; border-bottom: 1px solid var(--line-soft); }
.s-thread:last-child { border-bottom: 0; }
.s-thread:hover { background: var(--brand-tint); text-decoration: none; }
.s-av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: #fff; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%); }
.s-av-img, .s-av-sm.s-av-img { padding: 0; overflow: hidden; background: none; }
.s-av-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.s-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; gap: 5px; }
.s-title { font-weight: 700; color: var(--ink); line-height: 1.35; font-size: 0.98rem; }
.s-thread:hover .s-title { color: var(--brand-strong); }
.s-snip { font-size: 0.84rem; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.s-tag { font-size: 0.72rem; font-weight: 600; color: var(--text); background: var(--brand-tint); border: 1px solid var(--line); padding: 2px 9px; border-radius: 999px; }
.s-counts { flex: none; display: flex; flex-direction: column; gap: 4px; text-align: right; font-size: 0.72rem; color: var(--muted); min-width: 74px; }
.s-counts b { color: var(--ink); font-weight: 800; }
.s-status { flex: 0 0 190px; display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
.s-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.s-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-hot  { color: var(--badge-hot); background: oklch(56% 0.14 150 / 0.14); }
.s-open { color: var(--badge-open); background: oklch(62% 0.14 72 / 0.15); }
.s-ans  { color: var(--brand); background: var(--brand-tint); }
.s-byline { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.s-byline b { color: var(--text); font-weight: 700; }
.s-av-sm { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 0.66rem; color: #fff; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%); }
.s-foot { padding: 13px 18px; border-top: 1px solid var(--line); }
.s-side { display: flex; flex-direction: column; gap: 16px; }
.s-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 18px 20px; }
.s-card-h { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: 14px; letter-spacing: -0.01em; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s-card-h .link-more { font-size: 0.78rem; font-weight: 700; }
.s-pop { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.s-pop a { display: flex; flex-direction: column; gap: 2px; }
.s-pop .p-t { font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; color: var(--ink); line-height: 1.3; letter-spacing: -0.01em; }
.s-pop a:hover .p-t { color: var(--brand-strong); }
.s-pop .p-v { font-size: 0.73rem; color: var(--muted); }
.s-stats { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; align-items: center; }
.s-stats dt { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: var(--text); }
.s-stat-ico { width: 17px; height: 17px; color: var(--muted); flex: none; }
.s-stats dd { font-size: 0.92rem; font-weight: 800; color: var(--ink); text-align: right; }
.s-stats dd.s-accent { color: var(--brand-strong); }
.s-join p { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin-bottom: 13px; }
.s-join .btn { width: 100%; justify-content: center; }
/* --- Sidebar: Popular Discussions "glist" (icon + title + author) + Top Members "mlist" (mock 1:1) --- */
.glist { list-style: none; margin: 0; padding: 0; }
.glist li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.glist a { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; }
.glist .g-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; flex: none; }
.glist .g-ic svg { width: 17px; height: 17px; }
.g-body { min-width: 0; }
.g-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; color: var(--ink); line-height: 1.3; letter-spacing: -0.01em; }
.glist a:hover .g-title { color: var(--brand-strong); }
.g-meta { display: block; font-size: 0.76rem; color: var(--faint); margin-top: 2px; }
.g-meta b { color: var(--muted); font-weight: 600; }
.mlist { list-style: none; margin: 0; padding: 0; }
.mlist li { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.mlist li + li { border-top: 1px solid var(--line-soft); }
.rank { width: 16px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 0.84rem; color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
.mlist li:nth-child(1) .rank { color: oklch(72% 0.15 85); }
.mlist li:nth-child(2) .rank { color: oklch(72% 0.02 260); }
.mlist li:nth-child(3) .rank { color: oklch(60% 0.11 55); }
.m-av { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; color: var(--muted); flex: none; overflow: hidden; box-shadow: inset 0 0 0 1px oklch(50% 0.02 262 / 0.14); }
.m-av img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; }
.m-name { font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-pts { font-size: 0.78rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-pts span { color: var(--faint); font-weight: 500; }
.dot-live { width: 7px; height: 7px; margin: 0 5px; border-radius: 50%; background: oklch(66% 0.17 150); display: inline-block; box-shadow: 0 0 0 3px oklch(66% 0.17 150 / 0.2); flex: none; }
@media (max-width: 900px) { .swh-home { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
  .s-head { flex-direction: column; align-items: flex-start; gap: 11px; }
  .s-counts { display: none; }
  /* Stack the status row below the title/snippet so the body gets full width. */
  .s-thread { flex-wrap: wrap; }
  .s-status { order: 3; flex-basis: 100%; margin-left: 55px; min-width: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
}

/* ---- hero art ---- */
.hero { position: relative; overflow: hidden; margin: -14px calc(50% - 50vw) 0; width: 100vw; }
.hero-inner { position: relative; z-index: 2; }
.hero-art { position: absolute; inset: 0; z-index: 1; max-width: 1480px; margin: 0 auto; pointer-events: none; }
.hero-art img { position: absolute; height: auto; display: block; }
.art-left { left: 24px; top: 50%; transform: translateY(-50%); width: clamp(110px, 10vw, 150px); }
.art-right { right: 24px; top: 50%; transform: translateY(-50%); width: clamp(150px, 13vw, 200px); }
/* Full-bleed hero photo stays visible on mobile too — the portrait <source> kicks in <=768px. */
@media (max-width: 1100px) { .hero-art { display: block; } }

/* view-all link + logo */
.cats-viewall { text-align: center; margin-top: 16px; }
.link-more, .link-more:link, .link-more:visited { color: var(--brand); font-weight: 700; font-size: 0.9rem; }
.link-more:hover { color: var(--brand-strong); }
img.brand-mark { height: 44px; width: auto; object-fit: contain; }

/* ---- footer (mock) ---- */
.footer { max-width: none; margin: 44px 0 0; padding: 0; background: var(--surface); border: 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--muted); font-size: 14px; text-align: left; }
.footer-inner { max-width: var(--container); margin: 0 auto; padding: 40px 24px 24px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.footer .footer-brand { margin-bottom: 14px; }
.footer-blurb { font-size: 0.88rem; color: var(--muted); max-width: 30ch; margin: 0; }
.footer h2 { font-family: var(--font-display); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin: 0 0 12px; }
.footer-col a, .footer-col a:link, .footer-col a:visited { display: block; padding: 4px 0; font-size: 0.9rem; color: var(--muted); }
.footer-col a:hover { color: var(--brand); }
.footer-base { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--faint); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand-col { grid-column: 1 / -1; } }

/* ============ thread-listing (forum) page ============ */
.row td { border-bottom: 1px solid var(--line-soft); padding: 12px; vertical-align: top; background: transparent; }
.row .big, .row a.big:link, .row a.big:visited { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.row a.big:hover { color: var(--brand-strong); }
/* WCAG 2.2 target-size (2.5.8): the thread-title link is the row's primary tap target.
   inline-block + line-height gives it a >=24px clickable box (16px * 1.6 = 25.6px) on mobile. */
.row a.big { display: inline-block; line-height: 1.6; }
.TopBy { color: var(--muted); font-size: 0.82rem; }
.row td.RowStyleA .TopBy { display: block; text-align: left; margin-top: 4px; }
.row td.RowStyleC img[src$="goto.gif"] { display: none; }   /* dated last-post arrow, not in the mock */
/* Board page: hide stock chrome not in the mock — the Goto-Forum jump form and the RSS/Syndicate line. */
form:has(input[name="frm_goto"]) { display: none !important; }
.SmallText.fb:has(+ form input[name="frm_goto"]) { display: none !important; }
.SmallText:has(a[href*="section=boardusage#syndicate"]), .SmallText:has(img[src$="rss.gif"]) { display: none !important; }
.RowStyleC { background: transparent; }
.PagerLink { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); margin: 0 2px; color: var(--text); font-weight: 600; }
.PagerLink:hover { border-color: var(--brand); color: var(--brand); }

/* ============ message / read page ============ */
.MsgTable { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); margin: 0 0 16px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
/* Vote control now sits in the bottom action bar (Reddit-style), so no left-gutter reservation. */
.MsgR1 { background: var(--surface-2) !important; border-bottom: 1px solid var(--line); padding: 12px 16px !important; }
.MsgSubText, .MsgSubText:link { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
/* The thread page's message list is itself wrapped in a .ContentTable (td.MsgSpacer), so the
   backend-readability bump (.ContentTable .SmallText -> 1rem) blew up the subject row's
   "[message #N is a reply to #M]" note to 16px around stock 10px links, wrapping the line.
   Pin the whole note (links included) back to one small size, and the header date with it. */
.MsgR1 .SmallText, .MsgR1 .SmallText a { font-size: 13px; }
.MsgR1 .SmallText { white-space: nowrap; }   /* never split "[message #N ...]" mid-bracket */
.MsgR1 .DateText, .ContentTable .MsgR1 .DateText { font-size: 12px; }
.MsgR2 { padding: 12px 16px !important; color: var(--muted); font-size: 0.86rem; background: transparent !important; }
.MsgR3 { padding: 16px !important; background: transparent !important; }
.MsgBodyText { color: var(--text); font-size: 0.95rem; line-height: 1.7; }
.MsgToolBar { padding: 10px 16px !important; border-top: 1px solid var(--line-soft); background: var(--surface-2) !important; }
.msgud, .msgot { color: var(--faint); font-size: 0.8rem; }
/* Message poster: drop the online/offline "lightbulb" indicator, show the avatar as a clean circle */
.msgud img[src*="online.png"], .msgud img[src*="offline.png"] { display: none; }
.avatarPad { padding: 0 14px 0 0; vertical-align: top; width: 58px; }
.ctags { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* FUDforum small action buttons (Tree View / New Topic / Post Reply) */
.button.small { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); color: var(--text) !important; font-weight: 600; font-size: 13px; text-transform: none; }
.button.small:hover { border-color: var(--brand); color: var(--brand) !important; }
.button.small img { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); }
/* The "Goto Forum" Go button is a primary action — blue with white text (client request) */
input.button.small[name="frm_goto"] { background: var(--accent-fill); color: #fff !important; border-color: transparent; }
input.button.small[name="frm_goto"]:hover { background: var(--accent-fill-strong); color: #fff !important; border-color: transparent; }

/* ---- Action buttons: New Topic / Post Reply + per-message toolbar ---- */
.act-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: var(--r); font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; vertical-align: middle; }
.act-btn + .act-btn { margin-left: 8px; }
.act-ico { width: 16px; height: 16px; flex: none; }
a.act-btn-primary, a.act-btn-primary:link, a.act-btn-primary:visited { background: var(--accent-fill); color: #fff; }
.act-btn-primary:hover { background: var(--accent-fill-strong, var(--brand-strong)); color: #fff; text-decoration: none; }
a.act-btn-outline, a.act-btn-outline:link, a.act-btn-outline:visited { background: var(--surface); border-color: var(--line); color: var(--ink); }
.act-btn-outline:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.msg-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-toolbar-c { flex: 1 1 auto; text-align: center; color: var(--muted); }
.msg-toolbar-l, .msg-toolbar-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Reddit-style: each post action is its own rounded pill (capsule with a subtle background). */
.msg-act { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--surface); font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; border: 1px solid var(--line); text-decoration: none; }
a.msg-act, a.msg-act:link, a.msg-act:visited { color: var(--muted); }
.msg-act:hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand); text-decoration: none; }
.msg-ico.ico-flip { transform: scaleX(-1); }   /* Reply = the Share arrow, mirrored */
.msg-ico { width: 14px; height: 14px; flex: none; }
/* QA sweep r2 item 0: FUDforum injects the post fold/unfold toggle (min.png/max.png, 32x32)
   and the PDF-link icon (pdf.gif) UNSIZED after paint, which reflows the message header
   (CLS 0.26) and renders them at inconsistent sizes. Reserve a fixed box so injection can't
   shift layout and both toggle states match. */
img.collapsable,
img[src$="/images/min.png"], img[src$="/images/max.png"], img[src$="/images/pdf.gif"] { width: 16px; height: 16px; vertical-align: middle; }
/* QA sweep r2 item 1: guarantee a visible keyboard focus ring on form controls (some
   FUDforum-injected inputs had none). :focus-visible = keyboard focus only, no mouse rings. */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Remove the stock FUDforum email icon: the base forum.css paints email.png as a background on
   EVERY mailto: link (footer "Contact", user-email links), and a few templates embed it as an
   <img>. The redesign uses plain text / labeled links, so drop the icon everywhere. */
a[href^="mailto:"] { background-image: none; padding-right: 0; }
img[src$="/images/email.png"], img[src$="/images/email.gif"] { display: none; }
/* Visually-hidden helper for accessible names (sr-only h1s, empty-cell labels). */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* --- M3: per-post up/down vote widget (Quora-style, in the message toolbar) --- */
/* Vertical vote rail pinned to the post's left gutter (Reddit/SO-style, matches the mock).
   The markup lives in the toolbar row but is absolutely positioned against .MsgTable, whose
   padding-left reserves the 54px gutter — so this is a pure-CSS re-layout, no template change. */
/* Reddit-style vote control: a compact HORIZONTAL pill in the post's bottom action bar, with bold
   solid arrows + action colours (upvote orange, downvote periwinkle) so it drives the vote. Client req. */
.mvote { display: inline-flex; flex-direction: row; align-items: center; gap: 0; width: auto; padding: 1px; margin: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; vertical-align: middle; }
.mvote-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: 999px; color: var(--faint); text-decoration: none; transition: background-color .12s ease, color .12s ease; }
.mvote-up:hover { background: color-mix(in srgb, var(--vote-up) 16%, transparent); color: var(--vote-up); text-decoration: none; }
.mvote-down:hover { background: color-mix(in srgb, var(--vote-down) 16%, transparent); color: var(--vote-down); text-decoration: none; }
.mvote-ico { width: 17px; height: 17px; }
.mvote-up.on, .mvote-up.on:hover { color: var(--vote-up); }
.mvote-down.on, .mvote-down.on:hover { color: var(--vote-down); }
.mvote-score { text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; padding: 0 4px; min-width: 18px; }
.mvote:has(.mvote-up.on) .mvote-score { color: var(--vote-up); }
.mvote:has(.mvote-down.on) .mvote-score { color: var(--vote-down); }
/* Thread post vote widget = a clean vertical pill, same style as the SWH forum's .mvote
   control (single rounded pill, borderless arrows, hover/active accent). No boxed buttons. */
.vote.mvote { display: inline-flex; flex-direction: column; align-items: center; gap: 0; padding: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; width: auto; }
.msg-act-danger:hover { background: oklch(60% 0.15 25 / 0.13); color: oklch(56% 0.16 25); }
/* Share (copy permalink): swaps "Share" -> "Copied!" while the .copied flash is on. */
.share-btn .sh-on { display: none; }
.share-btn.copied .sh-off { display: none; }
.share-btn.copied .sh-on { display: inline; }
.share-btn.copied { border-color: color-mix(in oklch, var(--brand) 40%, transparent); background: var(--brand-tint); color: var(--brand); }
/* --- Accepted answer (Solved): reply the thread author/admin marked as the answer --- */
.accepted-badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; margin-right: 8px; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; font-size: 0.76rem; color: oklch(50% 0.13 155); background: oklch(55% 0.13 155 / 0.13); }
.accepted-badge .msg-ico { width: 15px; height: 15px; }
.MsgTable:has(.accepted-badge) { border-color: oklch(62% 0.12 155); box-shadow: 0 0 0 1px oklch(62% 0.12 155 / 0.35), var(--sh-1); }
.msg-accept-btn.on .ac-off, .msg-accept-btn:not(.on) .ac-on { display: none; }
a.msg-accept-btn.on, a.msg-accept-btn.on:link, a.msg-accept-btn.on:visited { color: oklch(50% 0.13 155); }
.msg-accept-btn:hover { background: oklch(55% 0.13 155 / 0.12); color: oklch(46% 0.13 155); }
/* --- Topic tags + thread-level "Solved" badge (on the thread's first-post subject bar) --- */
.thread-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: 8px; vertical-align: middle; }
.badge-solved { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; color: oklch(50% 0.13 155); background: oklch(55% 0.13 155 / 0.13); }
.thread-tags { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); padding: 2px 9px; border-radius: var(--r-pill); }
a.tag-x, a.tag-x:link, a.tag-x:visited { color: var(--faint); text-decoration: none; font-weight: 800; line-height: 1; }
.tag-x:hover { color: oklch(56% 0.16 25); }
.tag-add { width: 66px; height: 24px; padding: 0 8px; border: 1px dashed var(--line); border-radius: var(--r-pill); background: transparent; color: var(--text); font-family: var(--font-display); font-size: 0.72rem; }
.tag-add:focus { outline: none; border-color: var(--brand); border-style: solid; }
/* --- M3: member-posted video — click-to-play facade (nothing loads until the click) --- */
.vfacade, .vplayer { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; position: relative; }
.vfacade.in-post { max-width: 560px; margin: 14px 0; }
.vfacade { border: 1px solid var(--line); padding: 0; cursor: pointer; background: var(--surface-2); text-decoration: none; color: inherit; }
.vfacade:hover { border-color: var(--brand); }
.vposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vfacade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, oklch(18% 0.04 262 / 0.5)); z-index: 1; }
.vplay { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: var(--brand); background: oklch(100% 0 0 / 0.92); box-shadow: 0 6px 20px oklch(20% 0.04 262 / 0.35); transition: transform .16s ease, background-color .16s ease; z-index: 2; }
.vplay svg { margin-left: 3px; }
.vfacade:hover .vplay { transform: scale(1.08); background: #fff; }
.vfacade:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.vdur { position: absolute; right: 8px; bottom: 8px; z-index: 2; background: oklch(18% 0.02 262 / 0.85); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.vplayer { border: 1px solid var(--line); background: #000; }
.vplayer video, .vplayer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
/* homepage "Community Videos" section (server-rendered from recent posts containing videos) */
.vids { margin: 32px 0; }
.vids-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.vids-head h2 { font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.vids-note { margin: 4px 0 0; font-size: 0.86rem; color: var(--muted); max-width: 64ch; line-height: 1.5; }
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vcard { display: flex; flex-direction: column; gap: 8px; }
.vcard .vfacade { margin: 0; max-width: none; }
.vcard-t { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink); text-decoration: none; line-height: 1.3; }
.vcard-t:hover { color: var(--brand); }
.vcard-by { font-size: 0.8rem; color: var(--muted); }
@media (max-width: 940px) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .vgrid { grid-template-columns: 1fr; } .vids-head { flex-direction: column; } }
/* composer "Add video" toolbar (injected by swh.js above the post editor) */
.swh-compose-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.swh-addvid { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; cursor: pointer; }
.swh-addvid:hover { border-color: var(--brand); color: var(--brand); }
.swh-compose-hint { color: var(--muted); font-size: 0.8rem; }
/* --- M3: follow / unfollow (button next to the poster). Both labels render; the .on
       class (server-set, JS-toggled) swaps fill + which label shows. --- */
.follow-btn.on .fl-off, .follow-btn:not(.on) .fl-on { display: none; }
a.follow-btn, a.follow-btn:link, a.follow-btn:visited { border-color: color-mix(in oklch, var(--brand) 40%, transparent); color: var(--brand); }
.follow-btn:hover { background: var(--brand-tint); color: var(--brand); }
a.follow-btn.on, a.follow-btn.on:link, a.follow-btn.on:visited { background: var(--brand); border-color: var(--brand); color: #fff; }
.follow-btn.on:hover { opacity: 0.9; color: #fff; }
/* Follow relocated next to the poster's name (client request): compact inline chip. */
.follow-btn.follow-inline { height: 22px; padding: 0 9px; margin-left: 10px; font-size: 0.72rem; vertical-align: middle; position: relative; top: -1px; }
.follow-btn.follow-inline .msg-ico { width: 13px; height: 13px; }
/* --- M3: per-post emoji reactions (Slack-style pills, matches the approved mock) --- */
.reactions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 10px; padding: 0; border: 0; background: none; }
.reaction { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-pill); font-family: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1; color: var(--muted); cursor: pointer; text-decoration: none; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
a.reaction, a.reaction:link, a.reaction:visited { color: var(--muted); }
.reaction .rc { font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.reaction:hover { border-color: var(--brand); text-decoration: none; }
.reaction.is-active, a.reaction.is-active:link, a.reaction.is-active:visited { border-color: var(--accent-fill); background: var(--brand-tint); color: var(--brand-strong); }
/* The three reactions (👍 🔥 💯) always show on every post, matching the mock, so members
   have an obvious one-tap way to react even before a post has any reactions. */
.reaction__emoji { font-size: 0.95rem; line-height: 1; }
.reaction__count { font-size: 0.82rem; font-variant-numeric: tabular-nums; }

/* On the thread page the big title already shows the subject, so stop the breadcrumb at the
   board (drop its trailing current-subject segment + separator) to match the mock. */
.thread-title ~ .crumb .crumb-cur, .thread-title ~ .crumb .crumb-sep:has(+ .crumb-cur) { display: none; }
/* Guest "Join the conversation" CTA on the thread page (logged-out visitors). */
.guest-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 14px 0 4px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.guest-cta__x { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guest-cta__x strong { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.guest-cta__x span { font-size: 0.88rem; color: var(--muted); }
.guest-cta__a { display: flex; gap: 8px; flex-wrap: wrap; }
/* Visible thread title (mock-style) — the swh-sr-h1 marker no longer means hidden here. */
.thread-title { position: static; width: auto; height: auto; margin: 14px 0 6px; clip: auto; clip-path: none; overflow: visible; white-space: normal; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.1rem); color: var(--ink); letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; }

/* ===== Fable audit fixes ===== */
#ShowLinks { display: none !important; }   /* stock "Show: Today's Messages :: Unanswered :: Polls :: Message Navigator" bar (not in the mock) */
.wa.ac:has(a[onclick*="page_top"]) { display: none !important; }   /* stock "-=] Back to Top [=-" control */
/* Breadcrumb: drop the stock "Public Forums" category level (mock: Forums > board). */
.crumb a.crumb-lnk[href*="cat="], .crumb a.crumb-lnk[href*="cat="] + .crumb-sep { display: none !important; }
/* Post rail: hide the repetitive generic rank badge ("Junior Member") — not meaningful across the seed. */
.post__aside .ctags { display: none; }
/* Round all avatar images (the member profile shipped a square one; everything else is round). */
img[src*="/images/avatars/"] { border-radius: 50%; object-fit: cover; }
/* Thread: hide the stock "Previous Topic: / Next Topic:" table below the posts (its cells are
   td.ar.GenText WITHOUT .nw; the New Topic/Post Reply toolbar cell has .nw, so it's spared). */
table.wa:has(td.GenText.ar:not(.nw)) { display: none !important; }

/* ===== Thread post — rebuilt as the mock's post card (vote rail + author beside the body) ===== */
.post-cell { padding: 0; border: 0; background: none; }
.post { display: grid; grid-template-columns: auto 1fr; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 22px; margin: 0 0 18px; }
.post__aside { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; width: 108px; min-width: 0; text-align: center; }
.post__tags { margin: 0 0 8px; }
.post__tags .MsgSubText { display: none; } /* subject already shown as the page title */
.post__tags .thread-meta { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vote { display: flex; flex-direction: column; align-items: center; gap: 0; margin-bottom: 0.2rem; }
.vote__btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; border: 0; border-radius: 999px; background: transparent; color: var(--faint); transition: color .12s ease, background-color .12s ease; }
.vote__up:hover { color: var(--vote-up); background: color-mix(in srgb, var(--vote-up) 16%, transparent); }
.vote__down:hover { color: var(--vote-down); background: color-mix(in srgb, var(--vote-down) 16%, transparent); }
.vote__up.on, .vote__up.is-active { color: var(--vote-up); }
.vote__down.on, .vote__down.is-active { color: var(--vote-down); }
.vote__btn svg { width: 17px; height: 17px; }
.vote__score { font-weight: 800; font-size: 0.95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.post__avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-tint); flex: none; }
.post__avatar img { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; display: block; }
.post__avatar-ph { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-strong)); }
.post__author, .post__author a { font-weight: 700; font-size: 0.74rem; color: var(--ink); line-height: 1.2; text-decoration: none; overflow-wrap: anywhere; max-width: 100%; }
.post__author a:hover { color: var(--brand-strong); }
.post__aside .ctags { font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-strong); background: var(--brand-tint); border: 1px solid var(--line); border-radius: 6px; padding: 0.12rem 0.4rem; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.25; max-width: 100%; }
.post__body { min-width: 0; }
.post__head { display: flex; align-items: center; gap: 0.6rem; justify-content: space-between; margin-bottom: 0.5rem; flex-wrap: wrap; }
.post__meta { font-size: 0.8rem; color: var(--muted); }
.post__no { color: var(--brand-strong); font-weight: 700; }
.post__subject { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--ink); margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.post__content { color: var(--text); line-height: 1.6; }
.post__content p { margin: 0 0 0.8rem; }
.post__content p:last-child { margin-bottom: 0; }
.follow { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 34px; padding: 0.3rem 0.7rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 700; font-size: 0.8rem; cursor: pointer; text-decoration: none; }
.follow:hover { color: var(--ink); border-color: var(--brand); }
.follow.on { color: var(--brand-strong); border-color: var(--brand); background: var(--brand-tint); }
.follow .fl-on { display: none; }
.follow.on .fl-off { display: none; }
.follow.on .fl-on { display: inline; }
.post__actions { display: flex; gap: 0.5rem; margin-top: 14px; flex-wrap: wrap; }
.post__actions .msg-act { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 38px; padding: 0.4rem 0.8rem; border-radius: var(--r); border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 600; font-size: 0.82rem; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.post__actions .msg-act:hover { color: var(--ink); border-color: var(--brand); }
.post__actions .msg-act.msg-act-danger:hover { color: var(--badge-hot, #c0392b); border-color: currentColor; }
.post__actions .msg-ico { width: 15px; height: 15px; }
/* Footer bar at the bottom of the card: reactions on the left, Reply/Quote/Share on the right,
   spanning the full card width (under the member rail too). */
.post__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.post__foot-l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.post__foot-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.post__foot .reactions { margin: 0; }
.post__foot .post__actions { margin: 0; }
.post .swh-ad-inpost, .post-cell .swh-ad-inpost { margin: 0 0 18px; }
@media (max-width: 640px) {
  .post { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .post__aside { flex-direction: row; width: auto; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.6rem; }
  .vote { flex-direction: row; margin-bottom: 0; }
}
/* --- Message / thread page: uses the full site container width (1440px), same as the home
       page — wide content column with modest side gutters (client wants it much wider). --- */
.content > table[width="100%"]:has(.MsgTable) { max-width: var(--container); }
table.wa:has(.act-btn) { margin-bottom: 20px; }
/* --- PM view (t=pmsg_view): the message row's lone <td> carries no colspan while the
       header row is colspan=2, so table-layout:fixed pinned the message card to column 1
       (~half width). Stack that ContentTable as blocks so every row spans the full width.
       Scoped via the DIRECT td > .MsgTable chain, which only the PM view has (the thread
       page interposes td.MsgSpacer). --- */
.ContentTable:has(> tbody > tr > td > .MsgTable),
.ContentTable:has(> tbody > tr > td > .MsgTable) > tbody,
.ContentTable:has(> tbody > tr > td > .MsgTable) > tbody > tr,
.ContentTable:has(> tbody > tr > td > .MsgTable) > tbody > tr > th,
.ContentTable:has(> tbody > tr > td > .MsgTable) > tbody > tr > td { display: block; width: 100%; box-sizing: border-box; }
.MsgBodyText { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.65; color: var(--text); }
.MsgBodyText pre, .MsgBodyText code, .MsgBodyText tt, .MsgBodyText kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
.MsgSubText, a.MsgSubText, a.MsgSubText:link, a.MsgSubText:visited { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
/* --- Dialog / error / confirmation boxes (error.tmpl DialogTable) — FUDforum base paints these
       white; map to theme surfaces so dark mode stays consistent everywhere --- */
.ctb { padding: 4px 0; }
.DialogTable { width: 100%; max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.DialogTable th { background: var(--surface-2); color: var(--ink); text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; padding: 13px 18px; border-bottom: 1px solid var(--line); text-transform: none; }
.DialogTable td, .DialogTable td.GenText, .DialogTable tr.RowStyleA td { background: var(--surface); color: var(--text); padding: 22px 18px; }
.DialogTable a { color: var(--brand); }
/* --- MiniTable (Buddy List / Ignore List / E-mail-to-friend boxes) — same dark-mode treatment --- */
.MiniTable { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); border-collapse: separate; border-spacing: 0; overflow: hidden; max-width: 640px; margin: 6px 0; }
.MiniTable th, .MiniTable th.nw { background: var(--surface-2); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; text-align: left; padding: 12px 16px !important; border: 0; border-bottom: 1px solid var(--line); text-transform: none; }
.MiniTable td, .MiniTable td.nw { background: var(--surface); color: var(--text); padding: 11px 16px; }
.MiniTable a { color: var(--brand); }
.MiniTable input[type="text"], .MiniTable input[type="password"], .MiniTable input[type="email"], .MiniTable select, .MiniTable textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--ink); font-family: var(--font-body); }
.MiniTable input:focus, .MiniTable select:focus, .MiniTable textarea:focus { outline: none; border-color: var(--brand); }
/* --- Popup pages (Move topic, etc.) served via header_plain (no top nav): give the plain content
       breathing room and theme the move-target list; swh.js now applies the saved theme there too. --- */
body:not(:has(.swh-nav)) .content { padding: 22px 24px; max-width: 720px; margin: 0 auto; }
.mvTc, .mvTc a, table.mvTc a, td.mvTc a { color: var(--brand); text-decoration: none; }
.mvTc a:hover, td.mvTc a:hover { text-decoration: underline; color: var(--brand-strong); }
table.wa.dashed td, table.wa.dashed th { border-color: var(--line); }
/* --- Message poster avatar: match the feed avatar (circular, cover, no ring) — never an "egg" --- */
/* Match the feed avatar exactly (42px circle). The global img{max-width:100%} was capping the
   width to the narrow table cell, squishing it into an oval — force square + lift the cap. */
.avatarPad img { width: 42px !important; height: 42px !important; min-width: 42px; max-width: none !important; border-radius: 50%; object-fit: cover; display: block; box-shadow: none; background: var(--surface-2); }

/* ---- Dark-mode base-color fixes: FUDforum hardcodes dark text (#000/#202020) on many
   classes, which vanish on dark surfaces. Map them to theme tokens so they adapt. ---- */
a.CatLink { color: var(--ink); }
a.CatLink:hover { color: var(--brand); }
.MsgIg, td.repI, .AnnText, blockquote, .quote { color: var(--text); }
.SmallText, .DateText, .TopBy, td.permYES, td.permNO, .SmallText a, cite, .signature, td.msgud, td.msgot, td.msgot a, div.ctags { color: var(--muted); }

/* ===== Stock FUDforum GIF buttons + widgets → dark-safe swh styling =====
   Stock pages (tree view, private messages, members, post form) render raw pixelated GIF
   buttons and hardcoded-white widget backgrounds that look broken in dark mode. Reskin via
   CSS only — a template override would re-trigger stock duplicate-section compile aborts.
   Requires :has() (all target browsers support it). */

/* -- toolbar buttons: hide the GIF, render a labelled pill. Outline = secondary
      (New Topic / Tree View / Flat View, matching the flat-view msg toolbar); filled =
      the page's primary action (Post Reply / New Message). -- */
a > img[src$="new_thread.gif"], a > img[src$="tree_view.gif"], a > img[src$="flat_view.gif"],
a > img[src$="post_reply.gif"], a > img[src$="new_pm.gif"] { display: none; }
a:has(> img[src$="new_thread.gif"]), a:has(> img[src$="tree_view.gif"]), a:has(> img[src$="flat_view.gif"]),
a:has(> img[src$="post_reply.gif"]), a:has(> img[src$="new_pm.gif"]) {
  display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border-radius: var(--r);
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; text-decoration: none;
  vertical-align: middle; background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
a:has(> img[src$="new_thread.gif"]):hover, a:has(> img[src$="tree_view.gif"]):hover, a:has(> img[src$="flat_view.gif"]):hover {
  border-color: var(--brand); color: var(--brand);
}
a:has(> img[src$="new_thread.gif"])::after { content: "New Topic"; }
a:has(> img[src$="tree_view.gif"])::after { content: "Tree View"; }
a:has(> img[src$="flat_view.gif"])::after { content: "Flat View"; }
a:has(> img[src$="post_reply.gif"]), a:has(> img[src$="new_pm.gif"]) { background: var(--accent-fill); border-color: transparent; color: #fff; }
a:has(> img[src$="post_reply.gif"]):hover, a:has(> img[src$="new_pm.gif"]):hover { background: var(--accent-fill-strong, var(--brand-strong)); color: #fff; }
a:has(> img[src$="post_reply.gif"])::after { content: "Post Reply"; }
a:has(> img[src$="new_pm.gif"])::after { content: "New Message"; }

/* -- per-row / per-post action icon-links → small labelled chips (members list + PM view,
      mirroring the flat-view message toolbar so actions read the same everywhere). -- */
a > img[src$="show_posts.gif"], a > img[src$="msg_email.gif"], a > img[src$="msg_reply.gif"],
a > img[src$="msg_quote.gif"], a > img[src$="msg_forward.gif"], a > img[src$="msg_edit.gif"],
a > img[src$="msg_delete.gif"], a > img[src$="msg_about.gif"], a > img[src$="msg_pm.gif"] { display: none; }
a:has(> img[src$="show_posts.gif"]), a:has(> img[src$="msg_email.gif"]), a:has(> img[src$="msg_reply.gif"]),
a:has(> img[src$="msg_quote.gif"]), a:has(> img[src$="msg_forward.gif"]), a:has(> img[src$="msg_edit.gif"]),
a:has(> img[src$="msg_delete.gif"]), a:has(> img[src$="msg_about.gif"]), a:has(> img[src$="msg_pm.gif"]) {
  display: inline-flex; align-items: center; height: 26px; padding: 0 9px; margin: 2px; border-radius: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.76rem; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
a:has(> img[src$="show_posts.gif"]):hover, a:has(> img[src$="msg_email.gif"]):hover, a:has(> img[src$="msg_reply.gif"]):hover,
a:has(> img[src$="msg_quote.gif"]):hover, a:has(> img[src$="msg_forward.gif"]):hover, a:has(> img[src$="msg_edit.gif"]):hover,
a:has(> img[src$="msg_delete.gif"]):hover, a:has(> img[src$="msg_about.gif"]):hover, a:has(> img[src$="msg_pm.gif"]):hover {
  border-color: var(--brand); color: var(--brand); background: var(--brand-tint);
}
a:has(> img[src$="show_posts.gif"])::after { content: "Posts"; }
a:has(> img[src$="msg_email.gif"])::after { content: "Email"; }
a:has(> img[src$="msg_reply.gif"])::after { content: "Reply"; }
a:has(> img[src$="msg_quote.gif"])::after { content: "Quote"; }
a:has(> img[src$="msg_forward.gif"])::after { content: "Forward"; }
a:has(> img[src$="msg_edit.gif"])::after { content: "Edit"; }
a:has(> img[src$="msg_delete.gif"])::after { content: "Delete"; }
a:has(> img[src$="msg_about.gif"])::after { content: "Profile"; }
a:has(> img[src$="msg_pm.gif"])::after { content: "PM"; }

/* -- small utility icons (goto last post / prev / RSS / PDF): keep the glyph but drop the
      raw-on-white look — small, dimmed, on a themed hover chip. -- */
a:has(> img[src$="goto.gif"]), a:has(> img[src$="goback.gif"]), a:has(> img[src$="rss.gif"]), a:has(> img[src$="pdf.gif"]) {
  display: inline-flex; align-items: center; justify-content: center; padding: 3px; border-radius: 5px; vertical-align: middle;
}
a:has(> img[src$="goto.gif"]):hover, a:has(> img[src$="goback.gif"]):hover, a:has(> img[src$="rss.gif"]):hover, a:has(> img[src$="pdf.gif"]):hover { background: var(--brand-tint); }
/* goto/goback ship as tiny 9x9 GIFs; scaling them up trips Lighthouse "low-res image", so hide
   them and use a crisp chevron glyph instead (the link keeps its accessible name via aria-label). */
a > img[src$="goto.gif"], a > img[src$="goback.gif"] { display: none; }
a:has(> img[src$="goto.gif"])::after { content: "\00BB"; font-weight: 700; color: var(--muted); line-height: 1; }
a:has(> img[src$="goback.gif"])::after { content: "\00AB"; font-weight: 700; color: var(--muted); line-height: 1; }
a > img[src$="rss.gif"], a > img[src$="pdf.gif"] { width: 15px; height: 15px; opacity: 0.7; }

/* -- white-box widgets → theme the hardcoded backgrounds (dark-mode fix) -- */
/* Private-message "folders are N% full" gauge (pmsg.tmpl: table.pmDu / td.pmSn|pmSa|pmSf). */
table.pmDu { background: var(--surface-2) !important; border: 1px solid var(--line); border-radius: 6px; }
td.pmSn { background: var(--line) !important; }                      /* empty track (was #fff) */
td.pmSa { background: var(--brand) !important; }                     /* used (was #fffa00) */
td.pmSf { background: oklch(58% 0.17 25) !important; }               /* full/over (was red)  */
/* BBcode formatting toolbar chrome (post / quick-reply: .FormattingToolsCLR / .FormattingToolsBG). */
.FormattingToolsCLR, .FormattingToolsBG { background: var(--surface-2) !important; border-color: var(--line) !important; }
.FormattingToolsCLR:hover { background: var(--brand-tint) !important; }
/* "New Message" button (PM pages) sits in a bare right-aligned div flush against the folder
   gauge + the message table — give it vertical breathing room. */
div.ar:has(> a > img[src$="new_pm.gif"]) { margin: 14px 0; }

/* Advanced search form (t=search): FUDforum's float+table layout overlaps under the
   themed styles. Stack the whole form cleanly (block cells + rows), hide the redundant
   stacked column header. Scoped to the search table via :has(div.sr). */
div.sr { float: none; display: block; padding: 8px 0 0; }
div.sr select, div.sr input[type="text"] { margin-top: 4px; }
.ContentTable:has(div.sr) td { display: block; width: auto; }
.ContentTable:has(div.sr) th { display: none; }
.ContentTable:has(div.sr) input[type="search"] { min-width: 240px; }

/* Breadcrumb (forum path) — mock style: back arrow, "/" separators, muted. */
.crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 0.86rem; color: var(--muted); margin: 2px 0 6px; }
.crumb-lnk, a.crumb-lnk:link, a.crumb-lnk:visited { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.crumb-lnk:hover { color: var(--brand); text-decoration: none; }
.crumb-home { font-weight: 600; }
.crumb-sep { color: var(--faint); }
.crumb-cur { color: var(--ink); font-weight: 600; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-arrow { width: 15px; height: 15px; flex: none; }

/* Lighthouse best-practices: FUDforum ships a couple of decorative icons with a declared
   width/height that doesn't match the file's native ratio. Let them size naturally. */
a.thLnk, a.thLnk:link, a.thLnk:visited { color: var(--text); }
img[src*="/theme/default/images/top_"], img[src$="goto.gif"], img[src$="rss.gif"], img[src$="pager.gif"] { height: auto; }

/* ============ mobile / overflow safety ============ */
html { overflow-x: hidden; }
body, .content { max-width: 100%; }
/* Legacy inline login table is redundant on the home page (the header Sign in / Register and
   the "Join the Community" card already cover it) and was the main source of mobile horizontal
   overflow. Hide it; login stays reachable from the header and the Join card. */
.home-quicklogin { display: none; }
/* NOTE: do NOT cap `.content > table` at max-width:100% here — it would defeat the
   `max-width: var(--container)` centering cap on line ~163 (equal specificity, later wins)
   and stretch the home page full-width. The table is already width:100% + table-layout:fixed,
   so it cannot overflow its parent; the container cap is what keeps it centered. */
.content > table[width="100%"] > tbody > tr > td { max-width: 100%; }
.ContentTable, .MsgTable { table-layout: fixed; }
.MsgBodyText, .cat-desc, .row td { overflow-wrap: anywhere; word-break: break-word; }
img { max-width: 100%; height: auto; }
@media (max-width: 640px) {
  .nav-inner { gap: 10px; padding: 0 14px; }
  .brand-tag { display: none; }
  .brand-name { font-size: 16px; }
  .brand-mark { height: 38px; width: auto; }
  .nav-actions { gap: 8px; }
  .nav-actions a.btn-outline { display: none; }
  .btn { height: 44px; padding: 0 12px; font-size: 13px; }
  .theme-toggle { width: 44px; height: 44px; }
  .page { padding: 16px; }
  .hero-inner { padding: 26px 16px; }
  .hero-inner h1 { font-size: 1.45rem; }
  .hero-search { flex-direction: column; gap: 6px; }
  .hero-search .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand-col { grid-column: 1; }
  /* Discussions header: let the title and the filter tabs stack, and let the tab row scroll
     inside its own bounds instead of pushing the page wider. */
  .s-head { flex-wrap: wrap; gap: 10px; }
  .s-tabs { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .s-tabs::-webkit-scrollbar { display: none; }
  .s-tab { white-space: nowrap; }
  /* Bylines: allow wrapping instead of forcing a nowrap line wider than the viewport. */
  .s-byline { flex-wrap: wrap; white-space: normal; min-width: 0; }
  .s-status, .s-counts { min-width: 0; }
}

/* ── Team color changer: accent-driven token routing ─────────────────── */
:root{ --accent: #2563eb;
  --accent-fill: var(--accent);
  --accent-fill-strong: color-mix(in srgb, var(--accent) 84%, #000);
  --brand: color-mix(in srgb, var(--accent) 88%, #000);
  --brand-strong: color-mix(in srgb, var(--accent) 74%, #000);
  --ring: color-mix(in srgb, var(--accent) 42%, transparent);
  --brand-tint: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --brand-tint-2: color-mix(in srgb, var(--accent) 16%, var(--surface));
  --bg: color-mix(in srgb, var(--accent) 8%, #ffffff);
  --surface: color-mix(in srgb, var(--accent) 3%, #ffffff);
  --surface-2: color-mix(in srgb, var(--accent) 7%, #ffffff);
  --nav-bg: color-mix(in srgb, var(--accent) 8%, #ffffff);
  --ink: color-mix(in srgb, var(--accent) 14%, #0a1220);
  --text: color-mix(in srgb, var(--accent) 18%, #363d47);
  --muted: color-mix(in srgb, var(--accent) 22%, #55627a);
  --faint: color-mix(in srgb, var(--accent) 22%, #646d80);
  --line: color-mix(in srgb, var(--accent) 20%, #dbe1ec);
  --line-soft: color-mix(in srgb, var(--accent) 12%, #e6eaf1); }
:root[data-theme="dark"]{ --accent: #2563eb;
  --accent-fill: var(--accent);
  --accent-fill-strong: color-mix(in srgb, var(--accent) 82%, #000);
  --brand: color-mix(in srgb, var(--accent) 82%, #fff);
  --brand-strong: color-mix(in srgb, var(--accent) 60%, #fff);
  --bg: color-mix(in srgb, var(--accent) 16%, #060a12);
  --surface: color-mix(in srgb, var(--accent) 14%, #0b1018);
  --surface-2: color-mix(in srgb, var(--accent) 20%, #0e131d);
  --nav-bg: color-mix(in srgb, var(--accent) 16%, #070b12);
  --ink: #ffffff;
  --text: color-mix(in srgb, var(--accent) 22%, #d5dae2);
  --muted: color-mix(in srgb, var(--accent) 28%, #8a94a6);
  --faint: color-mix(in srgb, var(--accent) 28%, #6f7887);
  --line: color-mix(in srgb, var(--accent) 24%, #222c3d);
  --line-soft: color-mix(in srgb, var(--accent) 18%, #182130); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --accent: #2563eb;
  --accent-fill: var(--accent);
  --accent-fill-strong: color-mix(in srgb, var(--accent) 82%, #000);
  --brand: color-mix(in srgb, var(--accent) 82%, #fff);
  --brand-strong: color-mix(in srgb, var(--accent) 60%, #fff);
  --bg: color-mix(in srgb, var(--accent) 16%, #060a12);
  --surface: color-mix(in srgb, var(--accent) 14%, #0b1018);
  --surface-2: color-mix(in srgb, var(--accent) 20%, #0e131d);
  --nav-bg: color-mix(in srgb, var(--accent) 16%, #070b12);
  --ink: #ffffff;
  --text: color-mix(in srgb, var(--accent) 22%, #d5dae2);
  --muted: color-mix(in srgb, var(--accent) 28%, #8a94a6);
  --faint: color-mix(in srgb, var(--accent) 28%, #6f7887);
  --line: color-mix(in srgb, var(--accent) 24%, #222c3d);
  --line-soft: color-mix(in srgb, var(--accent) 18%, #182130); } }

/* team color changer popover (mirrors .login-pop) */
.color-cb{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; margin:0; }
.color-open{ cursor:pointer; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); }
.color-open .cdot{ width:16px; height:16px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
.color-pop{ display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:60; width:244px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); }
.nav-actions:has(.color-cb:checked) .color-pop{ display:block; }
.color-pop-t{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; color:var(--muted); margin:0 0 10px; }
.swatches{ display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }
.swatch{ width:100%; aspect-ratio:1; border-radius:50%; border:2px solid var(--line); cursor:pointer; padding:0; }
.swatch:hover{ transform:scale(1.08); }
.swatch[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.color-pop-note{ margin:10px 0 0; font-size:.72rem; color:var(--muted); line-height:1.4; }
/* ── Live scores strip (ESPN scoreboard, client-side) ──────────────────── */
.scores{ background:#0a0e13; color:#cbd5e1; border-bottom:1px solid rgba(255,255,255,.08); min-height:68px; }
.scores__inner{ max-width:var(--container); margin-inline:auto; display:flex; align-items:stretch; gap:0; padding-inline:16px; }
.scores__label{ flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; padding:.55rem 16px .55rem 0; border-right:1px solid rgba(255,255,255,.08); line-height:1.15; }
.scores__gameday{ color:color-mix(in srgb, var(--accent) 45%, #fff); font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-family:var(--font-display); }
.scores__date{ color:#8a94a6; text-transform:uppercase; letter-spacing:.08em; font-size:.68rem; }
.scores__track{ flex:1 1 auto; display:flex; align-items:stretch; gap:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; cursor:grab; }
.scores__track::-webkit-scrollbar{ height:6px; }
.scores__track::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:999px; }
.score-cell{ flex:0 0 auto; display:flex; flex-direction:column; gap:.12rem; padding:.4rem 18px; border-right:1px solid rgba(255,255,255,.08); min-width:132px; }
.score-cell__state{ font-size:.64rem; text-transform:uppercase; letter-spacing:.09em; color:#8a94a6; font-weight:700; margin-bottom:.1rem; }
.score-cell__state.is-live{ color:color-mix(in srgb, var(--accent) 45%, #fff); }
.score-row{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; line-height:1.35; color:#cbd5e1; }
.score-row__score{ margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; }
.score-row.is-lead, .score-row.is-lead .score-row__score{ color:#fff; }
.helmet{ flex:0 0 auto; width:18px; height:18px; display:block; }
.scores__all{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.35rem; padding:0 16px; color:#cbd5e1; font-size:.76rem; font-weight:600; white-space:nowrap; text-decoration:none; border-left:1px solid rgba(255,255,255,.08); }
a.scores__all, a.scores__all:link, a.scores__all:visited{ color:#cbd5e1; }
.scores__all svg{ width:16px; height:16px; }
.scores__all:hover, a.scores__all:hover{ color:color-mix(in srgb, var(--accent) 45%, #fff); }
/* ── Hero (ported 1:1 from the mock: bg photo + flanking figures + content) ── */
.hero{ --hero-text:#fff; --hero-muted:#e2e9f5; --hero-gold:color-mix(in srgb, var(--accent) 55%, #ffffff); --hero-field-bg:rgba(9,16,28,.62); --hero-field-border:color-mix(in srgb, var(--accent) 55%, transparent);
  position:relative; isolation:isolate; min-height:clamp(400px,40vw,520px); display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(120% 80% at 50% -18%, rgba(255,255,255,.30), transparent 46%), linear-gradient(180deg, color-mix(in srgb,var(--accent) 72%,#ffffff) 0%, var(--accent) 50%, color-mix(in srgb,var(--accent) 72%,#000) 100%); }
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(6,9,13,.78) 0%, rgba(6,9,13,.28) 34%, rgba(6,9,13,.30) 62%, rgba(6,9,13,.72) 100%); }
.hero__content{ position:relative; z-index:1; width:100%; max-width:780px; padding:3rem 1rem; text-align:center; }
.hero__eyebrow{ color:var(--hero-gold); font-weight:800; text-transform:uppercase; letter-spacing:.14em; font-size:.82rem; margin-bottom:.75rem; text-shadow:0 1px 10px rgba(0,0,0,.5); }
.hero__title{ color:var(--hero-text); font-family:var(--font-display); font-weight:800; font-size:clamp(2.1rem,5vw,3.5rem); line-height:.98; letter-spacing:.005em; text-shadow:0 2px 18px rgba(0,0,0,.55); margin:0 0 1rem; }
.hero__lead{ color:var(--hero-muted); font-size:clamp(1rem,1.6vw,1.16rem); line-height:1.5; max-width:660px; margin:0 auto 1.5rem; text-shadow:0 1px 12px rgba(0,0,0,.55); }
.hero__search{ margin:0 auto 1rem; max-width:620px; }
.hero__search .search{ display:flex; align-items:center; gap:.6rem; background:var(--hero-field-bg); border:1.5px solid var(--hero-field-border); border-radius:999px; padding:.35rem .5rem .35rem 1.1rem; box-shadow:0 0 0 1px rgba(0,0,0,.3), 0 0 26px color-mix(in srgb,var(--accent) 30%,transparent), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(4px); }
.hero__search .search__icon{ flex:0 0 auto; width:22px; height:22px; color:var(--hero-gold); }
.hero__search .search__input{ flex:1 1 auto; min-width:0; background:transparent; border:0; outline:none; color:var(--hero-text); font-size:1.05rem; padding:.55rem 0; min-height:44px; }
.hero__search .search__input::placeholder{ color:var(--hero-muted); }
.hero__search .search:focus-within{ border-color:var(--hero-gold); box-shadow:0 0 0 1px rgba(0,0,0,.3), 0 0 32px color-mix(in srgb,var(--accent) 50%,transparent); }
.hero__search .search__btn{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 1.15rem; border:0; cursor:pointer; background:var(--accent); color:#fff; font-weight:800; border-radius:999px; font-family:var(--font-display); }
.hero__search .search__btn:hover{ filter:brightness(1.08); }
.hero .chips{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.hero .chip{ display:inline-flex; align-items:center; min-height:38px; padding:.45rem .9rem; border-radius:999px; cursor:pointer; background:rgba(10,14,20,.55); border:1px solid rgba(255,255,255,.16); color:var(--hero-muted); font-weight:600; font-size:.85rem; backdrop-filter:blur(3px); text-decoration:none; }
.hero .chip:hover{ color:var(--hero-text); border-color:color-mix(in srgb,var(--accent) 60%,transparent); }
.hero .chip.is-active{ color:#fff; background:var(--accent); border-color:var(--accent); font-weight:700; }
.hero__cta-row{ margin-top:1.5rem; display:flex; justify-content:center; }
.hero__signup, .hero__signup:link, .hero__signup:visited, .hero__signup:hover{ min-height:48px; padding:0 1.6rem; background:var(--accent); color:#fff; border:0; border-radius:999px; font-family:var(--font-display); font-weight:800; cursor:pointer; box-shadow:0 0 26px -6px rgba(0,0,0,.6); text-decoration:none; display:inline-flex; align-items:center; }
.hero__figure{ position:absolute; bottom:0; z-index:0; height:88%; width:auto; max-width:26%; object-fit:contain; object-position:bottom center; pointer-events:none; user-select:none; filter:drop-shadow(0 12px 28px rgba(0,0,0,.45)); }
.hero__figure--left{ left:max(8px, calc(50% - 660px)); }
.hero__figure--right{ right:max(8px, calc(50% - 660px)); }
@media (max-width:1200px){ .hero__figure{ display:none; } }
/* nav 1:1 with mock: Inter on nav links + buttons (brand name + headings stay display) */
.nav-links a{ font-family:var(--font-body); font-weight:600; }
.nav-actions .btn, .btn-outline, .btn-primary, .login-open{ font-family:var(--font-body); font-weight:700; }
/* ── Board thread-list: match the mock (no per-topic read/folder icon; pin only for pinned) ── */
tr.row > td.wo { width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; }
tr.row > td.wo img { display: none !important; }
tr.row td.RowStyleA a > img[src$="newposts.gif"] { display: none; }
/* sticky / announcement -> a pin marker in the site accent, like the mock */
.StClr, .AnClr { font-size: 0 !important; margin-right: 5px; vertical-align: middle; }
.StClr::before, .AnClr::before { content: ""; display: inline-block; width: 15px; height: 15px; vertical-align: -3px; background: var(--accent); -webkit-mask: 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' stroke-linejoin='round'%3E%3Cpath d='M9 4h6l-1 6 3 3H7l3-3-1-6ZM12 16v4'/%3E%3C/svg%3E") center/contain no-repeat; mask: 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' stroke-linejoin='round'%3E%3Cpath d='M9 4h6l-1 6 3 3H7l3-3-1-6ZM12 16v4'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Hide FUDforum's board-list status-icon legend (we hide the row status icons to match the mock) */
fieldset:has(img[src$="/read.png"]), fieldset:has(img[src$="/unread.png"]){ display:none !important; }
/* ── Sports board-card icons (topic-specific, replace the generic tech glyphs) ─────── */
.t-football{ --ct:var(--c-hw-t); --ci:var(--c-hw); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 18.4c-2.1-2.1-2.1-10.7 0-12.8 2.1-2.1 10.7-2.1 12.8 0 2.1 2.1 2.1 10.7 0 12.8-2.1 2.1-10.7 2.1-12.8 0Z'/%3E%3Cpath d='M9 15l6-6M9.8 12.7l1.5 1.5M11.3 11.2l1.5 1.5M12.7 9.8l1.5 1.5M6.5 15.5l2 .1-.1-2M17.5 8.5l-2-.1.1 2'/%3E%3C/svg%3E"); }
.t-trophy{ --ct:var(--c-host-t); --ci:var(--c-host); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M6 4h12v5a6 6 0 0 1-12 0z'/%3E%3Cpath d='M6 5H4a2 2 0 0 0 0 4h2M18 5h2a2 2 0 0 1 0 4h-2'/%3E%3C/svg%3E"); }
.t-soccer{ --ct:var(--c-lnx-t); --ci:var(--c-lnx); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.2l3 2.2-1.1 3.5h-3.8L9 9.4z'/%3E%3Cpath d='M12 7.2V3.4M15 9.4l3.4-1.4M13.9 12.9l2.3 3M10.1 12.9l-2.3 3M9 9.4L5.6 8'/%3E%3C/svg%3E"); }
.t-chart{ --ct:var(--c-virt-t); --ci:var(--c-virt); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M7 20v-6M12 20V8M17 20v-9'/%3E%3C/svg%3E"); }
.t-score{ --ct:var(--c-net-t); --ci:var(--c-net); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='11' rx='2'/%3E%3Cpath d='M8 16v3M16 16v3M6 19h12'/%3E%3Cpath d='M8 9v3M9.5 9v3M14.5 9v3M16 9v3M12 9.5v.01M12 11.5v.01'/%3E%3C/svg%3E"); }
.t-cal{ --ct:var(--c-lnx-t); --ci:var(--c-lnx); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 2.5v4M16 2.5v4M7.5 13h2M11 13h2M14.5 13h2M7.5 16.5h2M11 16.5h2'/%3E%3C/svg%3E"); }
.t-star{ --ct:var(--c-beg-t); --ci:var(--c-beg); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9z'/%3E%3C/svg%3E"); }
.t-money{ --ct:var(--c-lnx-t); --ci:var(--c-lnx); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.5v11M14.6 9c-.5-1-1.5-1.5-2.6-1.5-1.5 0-2.5.8-2.5 2 0 2.6 5.2 1.3 5.2 3.9 0 1.2-1 2.1-2.7 2.1-1.2 0-2.3-.5-2.8-1.5'/%3E%3C/svg%3E"); }
.t-fire{ --ct:var(--c-sec-t); --ci:var(--c-sec); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.5 3.5-2.5 4.5-2.5 7.5a2.5 2.5 0 0 0 5 0c0-.8-.3-1.5-.7-2 1.7 1 2.7 2.9 2.7 5a4.5 4.5 0 0 1-9 0c0-4 4-5.5 4.5-10.5z'/%3E%3C/svg%3E"); }
.t-swap{ --ct:var(--c-cloud-t); --ci:var(--c-cloud); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3.5-3.5M20 16H7l3.5 3.5'/%3E%3C/svg%3E"); }
.t-chat{ --ct:var(--c-virt-t); --ci:var(--c-virt); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E"); }
.t-globe{ --ct:var(--c-net-t); --ci:var(--c-net); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z'/%3E%3C/svg%3E"); }
.t-medal{ --ct:var(--c-host-t); --ci:var(--c-host); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='15' r='5'/%3E%3Cpath d='M12 13v4M10.2 15h3.6'/%3E%3Cpath d='M8.5 8.5 6 3h5l2 3.5M15.5 8.5 18 3h-5'/%3E%3C/svg%3E"); }

/* Login page: hide the empty stock reason-list bullets left after blanking
   login_cookie_expired / login_perm_denied in patch-strings (kills the "1. 2." artifact). */
ol li.GenText:empty{ display:none; }

.s-status .s-badge{ align-self: flex-end; }
#discussions{ scroll-margin-top: 92px; }

/* Home feed right meta: tidy right-aligned stack - badge, stats, author hug the right edge (no stagger, no stray avatar). */
.s-status{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; min-width:0; text-align:right; }
.s-status .s-badge{ align-self:flex-end; }
.s-counts{ display:block; flex:none; min-width:0; text-align:right; }
.s-byline{ justify-content:flex-end; white-space:nowrap; }
@media (max-width:640px){ .s-status{ flex-basis:100%; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:6px 12px; } .s-counts,.s-byline{ text-align:left; } }

#categories{ scroll-margin-top: 92px; }

/* P3 (handover review): kill the ~8px horizontal overhang from the hero's 100vw full-bleed
   (100vw includes the scrollbar). Clip the root rather than overflow:hidden (which would
   make body a scroll container and break the sticky header). In forum.css only - this same
   block breaks the compile when inlined into the template via critical-home.css. */
html, body{ overflow-x: clip; }
@media (max-width: 560px){
  .swh-ad-body a[style*="flex"]{ flex-direction: column; text-align: center; }
  .swh-ad-body a[style*="flex"] span[style*="margin-left:auto"]{ margin-left: 0 !important; }
}