/* NGCP forum style: the look of ngcpanel.com ("Warm Calm Console, showroom cut") on phpBB's prosilver.
   All of prosilver loads first; this file restates its colours with the site's tokens and adjusts type and
   spacing. Selectors deliberately match prosilver's so this file wins by source order.
   Tokens are copied from the site (site/css/site.css, SHARED block): change both together.
   Light and dark follow the OS. No inner scroll boxes: code wraps, the editor grows, dropdowns are full height. */

@import url("../../prosilver/theme/stylesheet.css");

/* ---------- FONTS + TOKENS ---------- */
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-display: swap;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	src: url("fonts/instrument-sans.woff2") format("woff2-variations"), url("fonts/instrument-sans.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 400 700;
	src: url("fonts/jetbrains-mono.woff2") format("woff2-variations"), url("fonts/jetbrains-mono.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	color-scheme: light dark;
	--font-sans: "Instrument Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;
	--radius-ctl: 6px;
	--radius-card: 12px;
	--page: 1200px;
	--gutter: clamp(16px, 4vw, 40px);

	--bg: oklch(96.5% 0.009 95);
	--surface: oklch(98.8% 0.005 95);
	--surface-2: oklch(93.5% 0.011 95);
	--surface-3: oklch(90% 0.013 95);
	--border: oklch(88% 0.012 95);
	--border-strong: oklch(60% 0.012 90);
	--fg: oklch(21.5% 0.008 85);
	--fg-muted: oklch(43% 0.012 85);
	--fg-subtle: oklch(50% 0.012 85);
	--accent: oklch(54% 0.197 331);
	--accent-hover: oklch(49% 0.19 331);
	--on-accent: oklch(98.8% 0.005 95);
	--accent-text: oklch(48% 0.18 331);
	--accent-soft: oklch(93% 0.04 331);
	--success-text: oklch(48% 0.12 145);
	--success-soft: oklch(94.5% 0.035 145);
	--danger-text: oklch(50% 0.17 30);
	--danger-soft: oklch(94% 0.03 30);
	--warning-text: oklch(50% 0.105 70);
	--warning-soft: oklch(95% 0.04 85);
	--code-bg: oklch(21.5% 0.008 85);
	--code-fg: oklch(95.5% 0.008 85);
	--code-muted: oklch(78% 0.012 80);
	--code-key: oklch(81% 0.13 331);
	--shadow-color: oklch(20% 0.01 75 / 0.14);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: oklch(17% 0.008 75);
		--surface: oklch(20.5% 0.009 75);
		--surface-2: oklch(24.5% 0.01 75);
		--surface-3: oklch(29% 0.011 75);
		--border: oklch(32% 0.011 75);
		--border-strong: oklch(54% 0.012 78);
		--fg: oklch(95.5% 0.008 85);
		--fg-muted: oklch(80% 0.012 80);
		--fg-subtle: oklch(70% 0.013 78);
		--accent: oklch(73% 0.17 331);
		--accent-hover: oklch(78% 0.15 331);
		--on-accent: oklch(20% 0.04 331);
		--accent-text: oklch(81% 0.13 331);
		--accent-soft: oklch(30% 0.06 331);
		--success-text: oklch(79% 0.14 140);
		--success-soft: oklch(27% 0.04 140);
		--danger-text: oklch(76% 0.14 30);
		--danger-soft: oklch(28% 0.05 30);
		--warning-text: oklch(82% 0.13 78);
		--warning-soft: oklch(29% 0.045 78);
		--code-bg: oklch(13.5% 0.007 75);
		--code-fg: oklch(95.5% 0.008 85);
		--code-muted: oklch(74% 0.012 80);
		--code-key: oklch(81% 0.13 331);
		--shadow-color: oklch(5% 0.005 75 / 0.6);
	}
}

/* ---------- BASE ---------- */
[hidden]:not([hidden="until-found"]) { display: none !important; }

html { height: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
html, body { color: var(--fg); background: var(--bg); overflow-x: clip; }
body {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	margin: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: 12px; /* prosilver sizes in em from 10 px; 12 px brings the whole board up a step */
	line-height: 1.5;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

/* prosilver names a font on these; everything but code uses the site's face */
h1, h2, h3, h4, .content, .content p, dl.faq, p.author, .notice, fieldset, input, select, select optgroup option,
textarea, .message-box textarea, .button, .pagination li.active span, a.forumtitle, a.topictitle,
.dropdown-extended .header, .notification_list p.notifications_title, li.header dt, li.header dd, .postbody h3,
.attachbox dt, dl.file, dl.file dt, dl.thumbnail dd, fieldset.polls, fieldset.polls dd div,
a.button1, input.button1, input.button3, a.button2, input.button2 {
	font-family: var(--font-sans);
}

h1, h2 { color: var(--fg); font-stretch: 82%; font-weight: 650; letter-spacing: -0.012em; line-height: 1.12; text-wrap: balance; }
h1 { margin: 0; font-size: clamp(32px, 4.6vw, 52px); }
h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 0.6em 0 0.3em; }
h2.solo { margin-bottom: 0.7em; }
h2 a { color: var(--fg); }
h2 a:hover { color: var(--accent-text); }

/* sub-headings: "Who is online", "Statistics", form section titles */
h3 {
	color: var(--fg);
	font-size: 15px;
	font-weight: 650;
	font-stretch: 90%;
	text-transform: none;
	border-bottom-color: var(--border);
	padding-bottom: 6px;
	margin-bottom: 8px;
	margin-top: 24px;
}
h3 a, .subhead a { color: inherit; display: inline-block; line-height: 24px; }
/* index page sections: h2 for the outline, sized like the h3 sub-headings */
h2.subhead {
	font-size: 15px; font-weight: 650; font-stretch: 90%; letter-spacing: 0; line-height: 1.5;
	border-bottom: 1px solid var(--border); padding-bottom: 6px; margin: 24px 0 8px;
}
h4 { font-size: 15px; font-weight: 650; }

p { font-size: 14px; line-height: 1.55; }
b, strong, .text-strong { font-weight: 650; }
hr { border-color: transparent; border-top-color: var(--border); }

a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-text); text-decoration: underline; }

:focus-visible,
.button:focus-visible, .inputbox:focus-visible, select:focus-visible,
input.button1:focus-visible, input.button2:focus-visible, input.button3:focus-visible,
.message-box textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}
.inputbox:focus-visible, .message-box textarea:focus-visible, select:focus-visible,
.button:focus-visible, input.button1:focus-visible, input.button2:focus-visible, input.button3:focus-visible { border-radius: var(--radius-ctl); }
::selection { background: var(--accent-soft); color: var(--fg); }

.vh {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- SITE CHROME (same as ngcpanel.com; px sizes, the site's body is 16 px) ---------- */
.skip {
	position: absolute; left: 8px; top: -60px; z-index: 60;
	background: var(--surface); color: var(--fg); padding: 10px 14px; font-size: 16px;
	border: 2px solid var(--accent); border-radius: var(--radius-ctl);
}
.skip:focus { top: 8px; }

.site-head { border-bottom: 1px solid var(--border); background: var(--bg); font-size: 16px; line-height: 1.6; }
.site-head-in {
	box-sizing: border-box; max-width: var(--page); margin: 0 auto; padding: 12px var(--gutter);
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
}
.brand {
	display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
	color: var(--fg); text-decoration: none;
}
.brand:hover { color: var(--fg); text-decoration: none; }
.brand-mark { width: 30px; height: 30px; flex: none; display: block; }
.brand-mark rect { fill: var(--fg); }
.brand-mark path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { font-weight: 700; font-stretch: 85%; font-size: 21px; letter-spacing: 0.01em; line-height: 1; }
.brand-tag { color: var(--fg-muted); font-size: 14px; line-height: 1.2; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.site-nav a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px;
	color: var(--fg-muted); text-decoration: none; font-weight: 550; border-radius: var(--radius-ctl);
}
.site-nav a:hover { color: var(--fg); background: var(--surface-2); text-decoration: none; }
.site-nav a[aria-current] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
@media (max-width: 599px) {
	.site-nav { margin-left: 0; flex-basis: 100%; }
	.site-nav ul { margin-left: -8px; }
	.site-nav a { padding-inline: 8px; }
}

/* header search; on phones prosilver's search icon in the bar below replaces it */
@media (min-width: 701px) {
	.search-header { display: block; float: none; margin: 0; box-shadow: none; border-radius: var(--radius-ctl); }
	.search-header fieldset { display: flex; }
	.search-header .inputbox { width: 190px; }
}

.site-foot { border-top: 1px solid var(--border); margin-top: 48px; color: var(--fg-muted); font-size: 15px; line-height: 1.6; }
.site-foot-in {
	box-sizing: border-box; max-width: var(--page); margin: 0 auto; padding: 32px var(--gutter) 40px;
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px;
}
.site-foot p { margin: 0; font-size: 15px; }
.site-foot .maker { color: var(--fg); font-weight: 600; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-foot a { color: var(--fg-muted); display: inline-block; padding: 4px 0; }
.site-foot a:hover { color: var(--fg); }
.copyright { color: var(--fg-muted); font-size: 13px; text-align: left; padding: 10px 0 0; }
.footer-row { font-size: 13px; line-height: 1.6; }
.site-foot .footer-row a { text-decoration: underline; padding: 0; }

/* ---------- PAGE FRAME ---------- */
.wrap {
	flex: 1 0 auto;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--page);
	min-width: 0;
	margin: 0 auto;
	padding: 0 var(--gutter);
	background: transparent;
	border: 0;
	border-radius: 0;
}
.page-body { margin: 16px 0 0; }

.navbar {
	background: transparent;
	border-radius: 0;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
}
#page-header .navbar { border-bottom: 1px solid var(--border); padding: 4px 0; }
#page-footer .navbar { border-top: 1px solid var(--border); padding: 4px 0; margin-top: 32px; }
ul.navlinks { border-top-color: var(--border); }
/* flex instead of prosilver's float: right, so the tab order matches what you see */
#nav-main, #nav-breadcrumbs, #nav-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
#nav-main > li, #nav-breadcrumbs > li, #nav-footer > li { float: none; margin: 0; }
#nav-main::after, #nav-breadcrumbs::after, #nav-footer::after { content: none; }
#nav-main > li:not(.rightside) + li.rightside, #nav-breadcrumbs > li:not(.rightside) + li.rightside, #nav-footer > li:not(.rightside) + li.rightside { margin-left: auto; }
/* phpBB's script inserts a hidden overflow menu first in the group */
#nav-main > li.responsive-menu.hidden + li.rightside, #nav-footer > li.responsive-menu.hidden + li.rightside { margin-left: auto; }
ul.linklist > li { font-size: 14px; line-height: 32px; margin-right: 10px; }
.navbar ul.linklist > li > a, .navbar .header-profile > a { display: inline-block; min-height: 32px; color: var(--fg-muted); }
.navbar ul.linklist a:hover { color: var(--fg); text-decoration: none; }
.navbar .breadcrumbs .crumb { font-weight: 550; }
.navbar .breadcrumbs .crumb a { color: var(--fg-muted); }
.navbar .breadcrumbs .crumb:last-child a { color: var(--fg); }
/* crumbs wrap instead of being cut to "Foru..." by prosilver's script */
.breadcrumbs .crumb a, .breadcrumbs .crumb[class] a { max-width: none; white-space: normal; letter-spacing: 0; }
.breadcrumbs .crumb:before { content: '/'; font-weight: 400; color: var(--fg-subtle); padding: 0 0.6em; }
.navbar .icon { color: var(--fg-subtle); }
ul.linklist .dropdown { top: 30px; }
.navbar ul.linklist > li > a { min-width: 24px; text-align: center; }
.back2top .top { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }

.forum-hero { padding: clamp(24px, 4vw, 44px) 0 clamp(8px, 2vw, 16px); }
.forum-hero .kicker {
	font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em;
	color: var(--accent-text); margin: 0 0 12px; display: flex; align-items: center; gap: 10px;
}
.forum-hero .kicker::before { content: ""; width: 22px; height: 2px; background: var(--accent); flex: none; }
.forum-hero .lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; color: var(--fg-muted); max-width: 54ch; margin: 12px 0 0; }
.hero-actions { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* narrow screens: prosilver hides these labels with display:none, which also removes the link's name */
@media (max-width: 500px) {
	.quick-links .dropdown-trigger span { display: inline; }
	.quick-links .dropdown-trigger span, .linklist.compact .rightside > a > span {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
}
.linklist.compact .rightside > a > span {
	display: inline; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- FORUM AND TOPIC LISTS ---------- */
.forabg, .forumbg {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: 0;
	margin: 0 0 16px;
	overflow: hidden;
}
.forabg + .action-bar { margin-top: 16px; }
ul.forums, ul.topics { background: transparent; filter: none; }

li.header dt, li.header dd { color: var(--fg-subtle); font-size: 12.5px; font-family: var(--font-mono); text-transform: none; font-weight: 500; margin-top: 0; margin-bottom: 0; padding: 4px 0; line-height: 1.5; }
li.header dt { color: var(--fg); font-family: var(--font-sans); font-size: 17px; font-weight: 650; font-stretch: 88%; text-align: left; }
ul.topiclist li.header { padding: 10px 16px; background: var(--surface-2); }
.forumbg .header a, .forabg .header a, th a { color: var(--fg); }
.forumbg .header a:hover, .forabg .header a:hover, th a:hover { color: var(--accent-text); text-decoration: underline; }
li.header dl.row-item dt .list-inner { padding-left: 0; padding-right: 0; }

ul.topiclist li { color: var(--fg-muted); }
ul.topiclist dd { border-left-color: transparent; }
.rtl ul.topiclist dd { border-right-color: transparent; }
ul.topiclist dt { font-size: 14px; line-height: 1.45; }
li.row { border-top-color: var(--border); border-bottom-color: transparent; padding: 6px 8px; }
ul.topiclist > li.row:first-child { border-top-color: transparent; }
li.row strong { color: var(--fg); font-weight: 600; }
li.row:hover { background: var(--surface-2); }
li.row:hover dd, .rtl li.row:hover dd { border-left-color: transparent; border-right-color: transparent; }
dd.posts, dd.topics, dd.views, dd.extra, dd.mark { font-family: var(--font-mono); font-size: 14px; line-height: 32px; color: var(--fg-muted); }
dd.lastpost, dd.redirect, dd.moderation, dd.time, dd.info { font-size: 13px; line-height: 24px; }

a.forumtitle, a.topictitle { color: var(--fg); font-size: 16px; font-weight: 650; }
a.forumtitle:hover, a.topictitle:hover { color: var(--accent-text); }
a.lastsubject { color: var(--fg); font-weight: 600; }
dd.lastpost a:has(> .icon), p.author a:has(> .icon), .postprofile dd.profile-posts a { min-width: 24px; }
.stat-block p { line-height: 24px; max-width: 75ch; }
/* 24 px targets for links prosilver sets in small type */
.action-bar a:not(.button), dl.details a, fieldset a, p.advanced-search-link a, ul.searchresults a, a.arrow-left, a.arrow-right, a.mark, dl.pmlist a, #member_search { line-height: 24px; }
.member-search strong a { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; text-align: center; }
#smiley-box a { min-width: 24px; text-align: center; }
.postprofile dt.author a { display: inline-block !important; line-height: 24px; }
p.jumpbox-return a { line-height: 24px; min-height: 24px; }

/* state icons: masks in the current colour instead of prosilver's blue GIFs; unread = accent + dot */
dl.row-item { background-image: none; }
dl.row-item[class*="_read"]::before, dl.row-item[class*="_unread"]::before, dl.row-item[class*="forum_link"]::before, dl.row-item[class*="topic_moved"]::before {
	content: "";
	position: absolute;
	left: 9px;
	top: calc(50% - 14px);
	width: 28px;
	height: 28px;
	background-color: var(--fg-subtle);
	-webkit-mask: url("images/icon-topic.svg") center / contain no-repeat;
	mask: url("images/icon-topic.svg") center / contain no-repeat;
}
dl.row-item[class*="_unread"]::before { background-color: var(--accent); }
dl.row-item[class*="_unread"]::after {
	content: "";
	position: absolute;
	left: 31px;
	top: calc(50% - 15px);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 2px var(--surface);
}
dl.row-item[class*="forum_"]::before { -webkit-mask-image: url("images/icon-forum.svg"); mask-image: url("images/icon-forum.svg"); }
dl.row-item[class*="forum_link"]::before { -webkit-mask-image: url("images/icon-link.svg"); mask-image: url("images/icon-link.svg"); }
dl.row-item[class*="_hot"]::before { -webkit-mask-image: url("images/icon-hot.svg"); mask-image: url("images/icon-hot.svg"); }
dl.row-item[class*="sticky_"]::before { -webkit-mask-image: url("images/icon-sticky.svg"); mask-image: url("images/icon-sticky.svg"); }
dl.row-item[class*="announce_"]::before, dl.row-item[class*="global_"]::before { -webkit-mask-image: url("images/icon-announce.svg"); mask-image: url("images/icon-announce.svg"); }
dl.row-item[class*="pm_"]::before { -webkit-mask-image: url("images/icon-pm.svg"); mask-image: url("images/icon-pm.svg"); }
dl.row-item[class*="topic_moved"]::before { -webkit-mask-image: url("images/icon-moved.svg"); mask-image: url("images/icon-moved.svg"); }
dl.row-item[class*="locked"]::before { -webkit-mask-image: url("images/icon-locked.svg"); mask-image: url("images/icon-locked.svg"); }
/* "you posted here" (prosilver's _mine GIFs) */
dl.row-item[class*="_mine"]::before { box-shadow: none; }
dl.row-item[class*="_mine"] dt::before {
	content: "";
	position: absolute;
	left: 9px;
	top: calc(50% + 8px);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fg-muted);
}
@media (forced-colors: active) {
	dl.row-item::before { forced-color-adjust: none; background-color: CanvasText !important; }
}
dl.row-item dt .list-inner { padding-left: 50px; }

/* ---------- ACTION BARS, BUTTONS, PAGINATION ---------- */
.action-bar { font-size: 14px; margin: 12px 0; }
.action-bar .button { margin-right: 8px; }

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	box-sizing: border-box;
	padding: 6px 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-ctl);
	box-shadow: none;
	filter: none;
	color: var(--fg);
	text-shadow: none;
}
.button:hover, .button:focus {
	background: var(--surface-2);
	border-color: var(--border-strong);
	color: var(--fg);
	text-shadow: none;
	filter: none;
	text-decoration: none;
}
.button .icon, .button-secondary { color: var(--fg-muted); }
.button-secondary:focus, .button-secondary:hover, .button:focus .icon, .button:hover .icon { color: var(--fg); }
.caret { border-color: var(--border-strong); }

/* the action a visitor came to do: New Topic, Post Reply, Register */
.button-primary, .action-bar a.button[href*="posting.php"] {
	background: var(--accent);
	border-color: transparent;
	color: var(--on-accent);
}
.button-primary:hover, .button-primary:focus, .action-bar a.button[href*="posting.php"]:hover, .action-bar a.button[href*="posting.php"]:focus {
	background: var(--accent-hover);
	border-color: transparent;
	color: var(--on-accent);
}
.action-bar a.button[href*="posting.php"] .icon, .action-bar a.button[href*="posting.php"]:hover .icon, .action-bar a.button[href*="posting.php"]:focus .icon { color: var(--on-accent); }

.post-buttons .button, .format-buttons .button { min-height: 32px; min-width: 32px; padding: 4px 7px; }
.post-buttons > li { margin-right: 4px; }
.hasjs .postbody .post-buttons { max-width: none; }
.post-buttons .dropdown { top: 32px; }

.search-box .inputbox, .search-box .inputbox:hover, .search-box .inputbox:focus { border-color: var(--border-strong); height: 36px; padding: 4px 10px; }
.search-box .inputbox:hover, .search-box .inputbox:focus { border-right-width: 0; }
.button-search, .button-search-end { min-height: 36px; min-width: 36px; padding: 4px 8px; }
.search-header .button-search, .search-header .button-search-end { border-top-width: 1px; border-bottom-width: 1px; padding: 4px 8px; }
.search-header .button-search-end { border-right-width: 1px; }
.search-header .inputbox { border: 1px solid var(--border-strong); border-right-width: 0; background: var(--surface); }
.button-search { border-radius: 0; }
.button-search-end { border-radius: 0 var(--radius-ctl) var(--radius-ctl) 0; }
.button-search:hover, .button-search-end:hover { border-color: var(--border-strong); }
.search-box .inputbox { border-radius: var(--radius-ctl) 0 0 var(--radius-ctl); }
.search-results li:hover, .search-results li.active { background-color: var(--surface-2); }

.pagination li a, .pagination li span, .pagination li.active span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 32px;
	min-height: 32px;
	padding: 4px 8px;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.2;
	border-radius: var(--radius-ctl);
}
.pagination li a { background: var(--surface); filter: none; border: 1px solid var(--border-strong); box-shadow: none; color: var(--fg); }
.pagination li.ellipsis span { background: transparent; color: var(--fg-muted); border: 0; min-width: 0; }
.pagination li.active span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.pagination li a:hover, .pagination li a:hover .icon, .pagination .dropdown-visible a.dropdown-trigger, .nojs .pagination .dropdown-container:hover a.dropdown-trigger {
	background: var(--surface-2); border-color: var(--border-strong); filter: none; color: var(--fg); text-shadow: none; text-decoration: none;
}
.pagination li.page-jump a { padding: 4px 8px; }
.pagination li.page-jump a i { font-size: 18px; color: var(--fg-muted); }
.pagination .arrow a { padding: 4px 8px; }
.row .pagination li a, .row .pagination li span { min-width: 24px; min-height: 24px; padding: 2px 5px; font-size: 12px; }

/* ---------- PANELS, POSTS ---------- */
.panel, .post {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	color: var(--fg);
	padding: 16px 20px;
	margin: 0 0 12px;
	background-image: none;
}
.bg1, .bg2, table.zebra-list tr:nth-child(odd) td, ul.zebra-list li:nth-child(odd), table.zebra-list tr:nth-child(even) td, ul.zebra-list li:nth-child(even) { background-color: var(--surface); }
.bg3, .ucprowbg, .fieldsbg { background-color: var(--surface-2); }
.post:target { border-color: var(--accent); }
.post:target .content, .post h3 a.first-unread, .post:target h3 a { color: var(--fg); }
.reported { background-color: var(--danger-soft); }
li.reported:hover { background-color: var(--danger-soft) !important; }
.panel h2, .content h2 { color: var(--fg); border-bottom-color: var(--border); font-size: 22px; font-weight: 650; }
.panel h3 { margin-top: 8px; }
.panel p { font-size: 15px; line-height: 1.55; }

.postbody { color: var(--fg); line-height: 1.6; }
.postbody h3, .postbody h3.first { font-size: 18px; font-weight: 650; font-stretch: 92%; line-height: 1.4; padding: 0; border: 0; }
.postbody h3 a { color: var(--fg); }
.postbody h3 a:hover { color: var(--accent-text); }
.content, .postbody .content { color: var(--fg); font-size: 16px; line-height: 1.6; }
.postbody .content { overflow: visible; overflow-wrap: anywhere; }
.content p { font-size: 1em; line-height: 1.6; }
.content ul, .content ol { margin: 0.6em 0 0.8em 1.6em; }
p.author { font-size: 13px; color: var(--fg-muted); line-height: 24px; padding: 0; margin-bottom: 12px; }
p.author a, p.author .username { font-weight: 600; }

.postlink { border-bottom: 0; color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; display: inline; }
.postlink:visited { color: var(--accent-text); }
.postlink:hover { background-color: transparent; color: var(--accent-text); text-decoration-thickness: 2px; }
.signature { border-top-color: var(--border); font-size: 14px; color: var(--fg-muted); }
.signature a, .signature a:hover { background-color: transparent; }
.notice { border-top-color: var(--border); font-size: 13px; color: var(--fg-muted); }
.posthilit { background-color: var(--accent-soft); color: var(--fg); }
dl.faq { font-size: 15px; line-height: 1.55; }
dl.faq dt { color: var(--fg); font-weight: 650; }
.content dl.faq { font-size: 1em; }
.agreement, .agreement-text { font-size: 15px; line-height: 1.65; }

/* author column left on wide screens (same reading order as the phone layout) */
.postprofile { color: var(--fg-muted); border-color: var(--border); font-size: 13px; }
.pm .postprofile { border-color: var(--border); }
.postprofile dd, .postprofile dt { line-height: 24px; margin-left: 0; }
.postprofile strong { color: var(--fg); font-weight: 600; }
.postprofile dt.author, .postprofile .author a { font-size: 15px; }
dd.profile-warnings { color: var(--danger-text); }
.post.online, .online { background-image: none; }
.post.online .postprofile::before {
	content: "\25CF\00A0 Online";
	display: block;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--success-text);
	margin-bottom: 4px;
}
@media (min-width: 701px) {
	.postprofile, .search .postprofile { float: left; width: 170px; border-width: 0 1px 0 0; padding-right: 15px; margin: 2px 0 10px; }
	.postbody, .search .postbody { float: right; width: calc(100% - 170px - 16px - 17px); }
	.pm .postprofile { width: 170px; }
	.has-profile .postbody h3 { margin-right: 190px; }
}
@media (max-width: 700px) {
	.post, .panel { padding: 14px; margin-left: 0; margin-right: 0; border-radius: var(--radius-card); }
	.has-profile .post-buttons { right: 14px; top: 14px; }
	.forabg, .forumbg { margin-left: 0; margin-right: 0; border-radius: var(--radius-card); }
	.navbar { margin-left: 0; margin-right: 0; border-radius: 0; }
	li.header dt { text-align: left; }
	ul.topiclist li.header { padding: 10px 14px; }
	li.row { padding: 4px; }
	.post .postprofile { border-width: 0 0 1px; margin: 0 0 12px; padding-bottom: 10px; }
}

/* Usernames: phpBB paints group colours inline; bring the two default groups onto the palette in both schemes. */
.username-coloured[style*="AA0000" i], .username-coloured[style*="aa0000" i] { color: var(--accent-text) !important; }
.username-coloured[style*="00AA00" i], .username-coloured[style*="00aa00" i] { color: var(--success-text) !important; }

/* Quotes and code (code wraps: no inner scrolling) */
blockquote {
	background: var(--surface-2);
	border: 0;
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-ctl);
	margin: 1em 0;
	padding: 10px 14px;
	font-size: 0.95em;
	overflow: visible;
}
blockquote blockquote { background: var(--surface-3); margin: 0.8em 0; }
blockquote blockquote blockquote { background: var(--surface-2); }
blockquote cite { color: var(--fg); font-size: 0.9em; font-weight: 600; margin-bottom: 4px; }
blockquote cite:before, .uncited:before { color: var(--accent-text); }
.uncited { font-style: normal; }

.codebox {
	background: var(--code-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	color: var(--code-fg);
	margin: 1em 0 1.2em;
	overflow: hidden;
}
.codebox p {
	color: var(--code-muted);
	border-bottom: 1px solid oklch(100% 0 0 / 0.14);
	font-family: var(--font-mono);
	font-size: 12.5px !important;
	font-weight: 500;
	text-transform: none;
	padding: 8px 16px;
	margin: 0;
	line-height: 1.5;
}
.codebox p a { color: var(--code-key); display: inline-block; min-height: 24px; line-height: 24px; }
.codebox pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.codebox code {
	color: var(--code-fg);
	font: 13.5px/1.6 var(--font-mono);
	display: block;
	max-height: none;
	overflow: visible;
	padding: 12px 16px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
:not(pre) > code { font-family: var(--font-mono); }

/* Attachments, polls, topic review */
.attachbox { background: var(--surface-2); border-color: var(--border-strong); border-radius: var(--radius-ctl); color: var(--fg); font-size: 14px; }
.pm-message .attachbox { background: var(--surface-2); }
.attachbox dd { border-top-color: var(--border); overflow: visible; }
.attachbox p, .attachbox p.stats, dl.file dd, dl.thumbnail dd { color: var(--fg-muted); }
.attach-image img { border-color: var(--border); max-width: 100%; height: auto; }
.attach-image { overflow: visible; }
dl.thumbnail img { border-color: var(--border); background-color: var(--surface); max-width: 100%; }
dl.thumbnail dt a:hover { background-color: var(--surface-2); }
dl.thumbnail dt a:hover img { border-color: var(--accent); }
fieldset.polls dl { border-top-color: var(--border); color: var(--fg-muted); }
fieldset.polls dl.voted { color: var(--fg); }
fieldset.polls dd div { color: var(--on-accent); }
.pollbar1, .pollbar2, .pollbar3, .pollbar4, .pollbar5 { background-color: var(--accent); border-bottom-color: transparent; border-right-color: transparent; border-radius: 3px; }
.rtl .pollbar1, .rtl .pollbar2, .rtl .pollbar3, .rtl .pollbar4, .rtl .pollbar5 { border-left-color: transparent; }

.topicreview { height: auto; overflow: visible; padding-right: 0; }
.post_details { max-height: none; overflow: visible; }

/* ---------- TABLES ---------- */
table.table1 td a, table.table1 th a { line-height: 24px; }
table.table1 td.posts a { min-width: 24px; }
table.table1 thead th { color: var(--fg-subtle); font-family: var(--font-mono); font-size: 12.5px; text-transform: none; padding: 8px 6px; }
table.table1 tbody tr { border-color: var(--border); }
table.table1 tbody tr:hover, table.table1 tbody tr.hover { background-color: var(--surface-2); color: var(--fg); }
table.table1 td { color: var(--fg-muted); font-size: 14px; }
table.table1 tbody td { border-top-color: var(--border); }
table.table1 tbody th { border-bottom-color: var(--border-strong); color: var(--fg); background-color: var(--surface); }
table.info tbody th, dl.details dt { color: var(--fg); }
dl.details dd { color: var(--fg-muted); }
dl.details { font-size: 14px; }
.forumbg table.table1 { margin: 0; }
.forumbg-table thead { background: var(--surface-2); }
.sep { color: var(--accent-text); }

/* ---------- ICON COLOURS ---------- */
.icon.icon-blue, a:hover .icon.icon-blue { color: var(--accent-text); }
.icon.icon-green, a:hover .icon.icon-green { color: var(--success-text); }
.icon.icon-red, a:hover .icon.icon-red { color: var(--danger-text); }
.icon.icon-orange, a:hover .icon.icon-orange { color: var(--warning-text); }
.icon.icon-bluegray, a:hover .icon.icon-bluegray,
.icon.icon-gray, a:hover .icon.icon-gray,
.icon.icon-lightgray, a:hover .icon.icon-lightgray { color: var(--fg-subtle); }
.icon.icon-black, a:hover .icon.icon-black { color: var(--fg); }
.top i { color: var(--fg-subtle); }
.arrow-left:hover, .arrow-right:hover { color: var(--accent-text); }
.alert_close .icon:before { background-color: var(--surface); }

/* ---------- NOTICES, MESSAGES ---------- */
.error { color: var(--danger-text); }
div.rules { background: var(--danger-soft); color: var(--danger-text); border-radius: var(--radius-ctl); padding: 10px 14px; font-size: 14px; }
div.rules a { color: inherit; text-decoration: underline; }
p.post-notice { background: var(--warning-soft); color: var(--fg); background-image: none; border-radius: var(--radius-ctl); padding: 10px 14px; }

.jumpbox .dropdown li { border-top-color: var(--border); }
.jumpbox-cat-link { background-color: var(--surface-2); border-top-color: var(--border); color: var(--fg); }
.jumpbox-cat-link:hover { background-color: var(--surface-3); border-top-color: var(--border); color: var(--fg); }
.jumpbox-forum-link, .jumpbox-sub-link { background-color: var(--surface); color: var(--fg); }
.jumpbox-forum-link:hover, .jumpbox-sub-link:hover { background-color: var(--surface-2); }
.jumpbox .dropdown .pointer-inner { border-color: var(--surface) transparent; }

/* Dropdowns: full height, no inner scrollbar */
.dropdown .pointer { border-color: var(--border) transparent; }
.dropdown .pointer-inner { border-color: var(--surface) transparent; }
.dropdown-extended .pointer-inner { border-color: var(--surface-2) transparent; }
.dropdown .dropdown-contents {
	background: var(--surface);
	border-color: var(--border);
	border-radius: var(--radius-ctl);
	box-shadow: 0 8px 24px -8px var(--shadow-color);
	max-height: none;
	overflow: visible;
}
.dropdown-up .dropdown-contents { box-shadow: 0 -8px 24px -8px var(--shadow-color); }
.dropdown li, .dropdown li li, .dropdown li.separator { border-color: var(--border); font-size: 14px !important; }
.dropdown-contents a { color: var(--fg); }
.dropdown-contents a:hover { background: var(--surface-2); text-decoration: none; }
.dropdown-extended ul { max-height: none; overflow: visible; }
.dropdown-extended ul li { border-top-color: var(--border); }
.dropdown-extended ul li:hover { background-color: var(--surface-2); color: var(--fg); }
.dropdown-extended .header, .dropdown-extended .footer { border-color: var(--border); color: var(--fg); }
.dropdown-extended .header { background: var(--surface-2); text-shadow: none; text-transform: none; font-family: var(--font-sans); }
.dropdown-extended a.mark_read { background-color: var(--surface); }
.notification_list p.notification-time { color: var(--fg-muted); }
li.notification-reported strong, li.notification-disapproved strong { color: var(--danger-text); }
.badge { background-color: var(--accent); color: var(--on-accent); opacity: 1; }

.contact-icons a { border-color: var(--border); }
.contact-icons a:hover { background-color: var(--surface-2); }

.phpbb_alert { background: var(--surface); border-color: var(--border-strong); border-radius: var(--radius-card); color: var(--fg); box-shadow: 0 24px 60px -16px var(--shadow-color); }
.darken { background-color: oklch(10% 0.005 75); }
.loading_indicator { background-color: oklch(10% 0.005 75); }

/* ---------- FORMS ---------- */
fieldset { font-size: 15px; line-height: 1.5; min-width: 0; }
input, select, textarea { font-family: var(--font-sans); }
label { color: var(--fg-muted); }
dd label, fieldset dl:hover dt label { color: var(--fg); }
fieldset.fields2 dl:hover dt label { color: inherit; }
dt label { font-weight: 600; color: var(--fg); }
fieldset dl { padding: 6px 0; }
fieldset dt { padding-right: 12px; box-sizing: border-box; }
fieldset dd span, fieldset dt span { color: var(--fg-muted); }
.inputbox, select {
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-ctl);
	color: var(--fg);
	font-size: 15px;
	padding: 7px 10px;
	min-height: 36px;
	box-sizing: border-box;
	max-width: 100%;
}
select { padding-right: 4px; }
.inputbox:hover, .inputbox:focus { border-color: var(--border-strong); border-width: 1px; }
.inputbox::placeholder { color: var(--fg-subtle); opacity: 1; }
.inputbox:-moz-placeholder { color: var(--fg-subtle); }
.inputbox::-webkit-input-placeholder { color: var(--fg-subtle); }
.inputbox:focus::placeholder { color: var(--fg-subtle); }
.inputbox:focus::-webkit-input-placeholder { color: var(--fg-subtle); }
input.tiny { width: 190px; }
@media (max-width: 430px) {
	.action-bar .search-box .inputbox, .section-viewtopic .search-box .inputbox { width: 130px; }
}
textarea.inputbox { width: 100%; field-sizing: content; }
fieldset.quick-login input.inputbox { background-color: var(--surface); width: 170px; }
input[type="checkbox"], input[type="radio"], fieldset.quick-login input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); margin: 3px; }
fieldset.quick-login input.inputbox { max-width: 100%; }
.inputbox.autowidth, input.autowidth { max-width: 100%; }
fieldset.quick-login label[for="autologin"] { color: var(--fg); }

/* The editor grows with the text (field-sizing) instead of scrolling inside itself */
.message-box textarea, .message-box textarea.inputbox {
	color: var(--fg);
	background: var(--surface);
	font-size: 16px;
	line-height: 1.55;
	height: auto;
	min-height: 280px;
	field-sizing: content;
	padding: 10px 12px;
	transition: none;
}
.message-box textarea.drag-n-drop { outline-color: var(--border-strong); }
.message-box textarea.drag-n-drop-highlight { outline-color: var(--accent); }
.format-buttons { margin: 12px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.format-buttons .button { margin: 0; }
.format-buttons select { min-height: 32px; padding: 2px 4px; }

input.button1, input.button2, input.button3, a.button1, a.button2 {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	min-height: 40px;
	padding: 8px 18px !important;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-ctl);
	background: var(--surface);
	color: var(--fg);
	filter: none;
	height: auto;
	font-variant: normal;
	vertical-align: middle;
	box-sizing: border-box;
}
input.button1, a.button1 { background: var(--accent); border-color: transparent; color: var(--on-accent); }
input.button1:hover, a.button1:hover { background: var(--accent-hover); border-color: transparent; color: var(--on-accent); filter: none; }
input.button2:hover, a.button2:hover, input.button3:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--fg); filter: none; }
input.button1:focus { border-color: transparent; color: var(--on-accent); }
input.button2:focus, input.button3:focus { border-color: var(--border-strong); color: var(--fg); }
input.disabled { color: var(--fg-subtle); }
fieldset.submit-buttons { margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
fieldset.submit-buttons > * { margin: 0; }
fieldset.display-actions { white-space: normal; }
fieldset.display-actions label { white-space: normal; }

/* ---------- CONTROL PANELS (UCP, PM, MCP) ---------- */
.panel-container h3, .panel-container hr, .cp-menu hr { border-color: var(--border); }
.panel-container .panel { background: var(--surface); }
.panel-container .panel p { font-size: 14px; }
.panel-container .panel ol { font-size: 14px; }
.panel-container .panel li.row { border-bottom-color: transparent; border-top-color: var(--border); }
ul.cplist { border-top-color: var(--border); }
.panel-container .panel li.header dd, .panel-container .panel li.header dt { color: var(--fg); }
.panel-container table.table1 thead th { color: var(--fg-subtle); border-bottom-color: var(--border-strong); font-weight: 500; }
.panel-container h2 { color: var(--fg); }
.cp-main .pm-message { border-color: var(--border); background: var(--surface); }
.cp-main .pm { background: var(--surface); }
.cp-main h2 { margin-left: 0; }
.cp-mini { background: var(--surface-2); max-height: none; overflow: visible; }
dl.mini dt { color: var(--fg); }
.current { color: var(--fg) !important; }
fieldset.fields1 ul.recipients { max-height: none; overflow: visible; }

.tabs { margin: 16px 0 0; }
.tabs .tab > a {
	background: transparent;
	color: var(--fg-muted);
	border: 1px solid transparent;
	border-bottom: 0;
	font-size: 14px;
	font-weight: 600;
	min-height: 36px;
	box-sizing: border-box;
	padding: 8px 12px;
}
.tabs .tab > a:hover { background: var(--surface-2); color: var(--fg); }
.tabs .activetab > a, .tabs .activetab > a:hover {
	background: var(--surface);
	filter: none;
	border-color: var(--border);
	box-shadow: inset 0 2px 0 var(--accent);
	color: var(--fg);
	padding-bottom: 8px;
}
.minitabs .tab > a { background: var(--surface-2); color: var(--fg-muted); padding: 6px 12px; font-size: 14px; }
.minitabs .activetab > a, .minitabs .activetab > a:hover { background: var(--surface); color: var(--fg); }
.responsive-tab .responsive-tab-link:before { border-color: var(--fg-muted); }
.responsive-tab .responsive-tab-link:hover:before { border-color: var(--accent); }

.navigation { padding-top: 16px; }
.navigation a {
	background: transparent;
	filter: none;
	color: var(--fg-muted);
	padding: 8px 10px;
	font-size: 14px;
	font-weight: 550;
	border-radius: var(--radius-ctl);
	min-height: 24px;
}
.rtl .navigation a { background: transparent; filter: none; }
.navigation a:hover { background: var(--surface-2); color: var(--fg); filter: none; }
.navigation .active-subsection a, .navigation .active-subsection a:hover { background: var(--accent-soft); color: var(--fg); filter: none; }
#navigation a, .rtl #navigation a { background: transparent; }
#navigation .active-subsection a { background: var(--accent-soft); }

.pmlist li.pm_message_reported_colour, .pm_message_reported_colour { border-left-color: var(--danger-text); border-right-color: var(--danger-text); }
.pmlist li.pm_marked_colour, .pm_marked_colour { border-color: var(--warning-text); }
.pmlist li.pm_replied_colour, .pm_replied_colour { border-color: var(--border-strong); }
.pmlist li.pm_friend_colour, .pm_friend_colour { border-color: var(--success-text); }
.pmlist li.pm_foe_colour, .pm_foe_colour { border-color: var(--fg); }

.gallery label { background: var(--surface); border-color: var(--border); }
.gallery label:hover { background-color: var(--surface-2); }

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