/* ==========================================================================
   Point 83  v2
   A dark restyle of prosilver. Colour, type and background only.
   No template or markup changes, so phpBB updates stay safe.

   v2 changes, from comparing against the phpBB 2 board:
     - the wrapper is invisible; content sits directly on the asphalt
     - rows are near-black and semi-transparent, so the road shows through
     - the red frame around the forum table is gone
     - the section header bar is semi-transparent red
     - the phpBB logo and site title are hidden, and the logo's link is
       turned into a large invisible click target over the stop sign
     - content is pushed down to clear the stop sign in the background
     - the background sits at natural size anchored top-centre, not cover

   Palette, taken from the AI2 theme that ran on the phpBB 2 board:
     #161616  page background
     #c71e21  signal red, the stop sign
     #c71e21  brightened red for link text (the original fails contrast)
     #E5E5E5  body text

   Contrast: #c71e21 on near-black is 2.1:1 and fails WCAG AA, so it is
   used as a fill behind white text (8.6:1). Link text uses #c71e21,
   which passes AA and reads as the same red.
   ========================================================================== */

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

:root {
	--p83-bg:          #161616;
	--p83-row:         rgba(8, 8, 8, 0.82);
	--p83-row-alt:     rgba(14, 14, 14, 0.82);
	--p83-row-hover:   rgba(34, 34, 34, 0.88);
	--p83-panel:       rgba(8, 8, 8, 0.82);
	--p83-border:      rgba(67, 67, 67, 0.45);
	--p83-border-soft: rgba(51, 51, 51, 0.40);
	--p83-text:        #e5e5e5;
	--p83-text-dim:    #a8a8a8;
	--p83-red: #c71e21;
	--p83-red-trans:   transparent;
	--p83-red-hover: #c71e21;
	--p83-link: #c71e21;
	--p83-link-hover: #c71e21;
	--p83-visited: #c71e21;

	/* How far down the page content starts, to clear the stop sign */
	--p83-header-clear: 200px;
}

/* --------------------------------------------------------------------------
   Page and background
   Natural size, anchored top centre, exactly as the old board had it.
   cover was scaling the image to the page height and cropping the sign.
   -------------------------------------------------------------------------- */

html {
	background-color: var(--p83-bg);
}

body {
	background-color: var(--p83-bg);
	background-image: url("./images/point83-background_tues.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: scroll;
	background-size: auto;
	color: var(--p83-text);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.5;
}

@media (max-width: 700px) {
	body {
		background-image: none;
	}
	:root {
		--p83-header-clear: 0px;
	}
}

/* --------------------------------------------------------------------------
   THE WRAPPER IS INVISIBLE
   This is the single biggest difference from the old board. prosilver puts
   a panel around everything; the phpBB 2 theme did not.
   -------------------------------------------------------------------------- */

.wrap,
#wrap {
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: var(--p83-header-clear) 15px 0;
	max-width: 840px;
}

#page-body {
	color: var(--p83-text);
	margin-top: 0;
}

#page-header {
	margin: 0;
}

/* --------------------------------------------------------------------------
   HEADER
   Hide the phpBB logo and the site title. Keep the link, stretched into a
   large invisible click target sitting over the stop sign, which is how
   the old board worked.
   -------------------------------------------------------------------------- */

.headerbar {
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	padding: 0;
	color: var(--p83-text);
}

.headerbar > .inner {
	padding: 0;
}

/* The phpBB logo image */
.site_logo,
span.site_logo,
img.site_logo {
	display: none;
}

/* "Point83.com" and "Point 83 Forums" */
.site-description h1,
.site-description p,
.site-description .skiplink {
	display: none;
}

/* The anchor that wrapped the logo still links to the board index.
   Stretch it across the stop sign so that area is clickable, the way
   the old site behaved. */
a.logo,
#logo {
	display: block;
	width: 100%;
	height: var(--p83-header-clear);
	margin-top: calc(-1 * var(--p83-header-clear));
	text-indent: -9999px;
	overflow: hidden;
	background: none;
}

.site-description {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	min-height: 0;
}

/* Search box, kept but made to sit on the dark */
.search-header {
	background-color: rgba(8, 8, 8, 0.75);
	border: 1px solid var(--p83-border);
	box-shadow: none;
	margin-top: 0;
	float: right;
}

.search-header input,
.search-header .inputbox {
	background-color: transparent;
	border: 0;
	color: var(--p83-text);
}

/* --------------------------------------------------------------------------
   NAVIGATION
   -------------------------------------------------------------------------- */

.navbar {
	background-color: rgba(10, 10, 10, 0.78);
	background-image: none;
	border: 1px solid var(--p83-border);
	border-radius: 0;
	color: var(--p83-text);
	padding: 4px 10px;
}

.navbar ul.linklist > li > a,
.navbar .linklist li a,
.nav-breadcrumbs a,
.navbar .linklist li,
.navbar .dropdown-trigger {
	color: var(--p83-text);
}

.navbar ul.linklist > li > a:hover,
.nav-breadcrumbs a:hover {
	color: var(--p83-link-hover);
}

.breadcrumbs .crumb:before {
	color: var(--p83-text-dim);
}

/* --------------------------------------------------------------------------
   FORUM AND TOPIC TABLES
   No red frame. The container is transparent; only the header strip
   carries the red, and semi-transparently so the road shows through.
   -------------------------------------------------------------------------- */

.forabg,
.forumbg {
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin-bottom: 16px;
}

.forabg > .inner,
.forumbg > .inner {
	border: 0;
	padding: 0;
}

/* The "POINT 83 FORUMS" strip */
ul.topiclist li.header,
.forabg .header,
.forumbg .header {
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
}

ul.topiclist li.header dt,
ul.topiclist li.header dd,
.forabg .header a,
.forumbg .header a,
ul.topiclist li.header .list-inner {
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Rows: near-black, semi-transparent */
ul.topiclist li.row,
ul.topiclist li.row.bg1,
ul.topiclist li.row.bg2 {
	background-color: var(--p83-row);
	border: 0;
	border-bottom: 1px solid var(--p83-border-soft);
}

ul.topiclist li.row.bg2 {
	background-color: var(--p83-row-alt);
}

ul.topiclist li.row:hover {
	background-color: var(--p83-row-hover);
}

ul.topiclist dd {
	border-left: 1px solid var(--p83-border-soft);
}

ul.topiclist li {
	color: var(--p83-text);
}

li.row strong,
.row .responsive-show strong,
dl.row-item dt .list-inner {
	color: var(--p83-text);
}

.topictitle,
.forumtitle {
	color: var(--p83-link);
	font-weight: bold;
}

.topictitle:visited {
	color: var(--p83-visited);
}

/* --------------------------------------------------------------------------
   LINKS
   -------------------------------------------------------------------------- */

a, a:link {
	color: var(--p83-link);
	text-decoration: none;
}

a:visited { color: var(--p83-visited); }

a:hover, a:focus {
	color: var(--p83-link-hover);
	text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--p83-link-hover);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   PANELS AND POSTS
   -------------------------------------------------------------------------- */

.panel {
	background-color: var(--p83-panel);
	background-image: none;
	color: var(--p83-text);
	border: 1px solid var(--p83-border-soft);
	border-radius: 0;
}

.post {
	background-color: var(--p83-panel);
	background-image: none;
	border: 1px solid var(--p83-border-soft);
	border-radius: 0;
}

.post.bg1 { background-color: var(--p83-row); }
.post.bg2 { background-color: var(--p83-row-alt); }
.post.bg3 { background-color: var(--p83-row-hover); }

.bg1 { background-color: var(--p83-row); }
.bg2 { background-color: var(--p83-row-alt); }
.bg3 { background-color: var(--p83-row-hover); }

.postbody,
.postbody h3,
.content {
	color: var(--p83-text);
}

.postbody .content {
	font-size: 1.08em;
	line-height: 1.6;
}

.postprofile {
	background-color: rgba(0, 0, 0, 0.25);
	border-left: 1px solid var(--p83-border-soft);
	color: var(--p83-text-dim);
}

.postprofile strong { color: var(--p83-text); }

.author,
.responsive-hide,
p.author {
	color: var(--p83-text-dim);
}

/* --------------------------------------------------------------------------
   QUOTES, CODE, ATTACHMENTS
   -------------------------------------------------------------------------- */

blockquote {
	background-color: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--p83-border-soft);
	border-left: 3px solid var(--p83-red);
	color: var(--p83-text);
	border-radius: 0;
}

blockquote blockquote { background-color: rgba(0, 0, 0, 0.5); }

blockquote cite {
	color: var(--p83-text-dim);
	font-style: normal;
	font-weight: bold;
}

.codebox {
	background-color: rgba(0, 0, 0, 0.55);
	border: 1px solid var(--p83-border-soft);
	color: var(--p83-text);
	border-radius: 0;
}

.codebox p {
	border-bottom-color: var(--p83-border-soft);
	color: var(--p83-text-dim);
	text-transform: uppercase;
	font-size: 0.85em;
}

.codebox code {
	color: #9fd4a0;
	font-family: Courier, "Courier New", monospace;
}

.attachbox {
	background-color: rgba(0, 0, 0, 0.3);
	border: 1px dashed var(--p83-border);
}

/* --------------------------------------------------------------------------
   BUTTONS AND INPUTS
   -------------------------------------------------------------------------- */

.button,
a.button,
.button.button-secondary,
.dropdown-select {
	background-color: rgba(40, 40, 40, 0.85);
	background-image: none;
	border: 1px solid var(--p83-border);
	border-radius: 0;
	color: var(--p83-text);
}

.button:hover,
a.button:hover,
.dropdown-select:hover {
	background-color: var(--p83-red);
	border-color: var(--p83-red);
	color: #ffffff;
	text-decoration: none;
}

.button .icon, a.button .icon { color: inherit; }

input, textarea, select,
input.inputbox, textarea.inputbox, select.inputbox {
	background-color: rgba(0, 0, 0, 0.5);
	border: 1px solid var(--p83-border);
	border-radius: 0;
	color: var(--p83-text);
}

input:focus, textarea:focus, select:focus {
	background-color: rgba(0, 0, 0, 0.7);
	border-color: var(--p83-link);
	color: #ffffff;
}

input::placeholder, textarea::placeholder { color: #7a7a7a; }

input.button1,
input[type="submit"].button1,
.button1 {
	background-color: var(--p83-red);
	background-image: none;
	border: 1px solid #8f1618;
	color: #ffffff;
	font-weight: bold;
}

input.button1:hover, .button1:hover {
	background-color: var(--p83-red-hover);
	border-color: var(--p83-red-hover);
	color: #ffffff;
}

input.button2, .button2 {
	background-color: rgba(40, 40, 40, 0.85);
	background-image: none;
	border: 1px solid var(--p83-border);
	color: var(--p83-text);
}

/* --------------------------------------------------------------------------
   DROPDOWNS, TABS, PAGINATION
   -------------------------------------------------------------------------- */

.dropdown .dropdown-contents {
	background-color: rgba(12, 12, 12, 0.97);
	border: 1px solid var(--p83-border);
	border-radius: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.dropdown .dropdown-contents a { color: var(--p83-text); }
.dropdown li:hover,
.dropdown-contents li:hover { background-color: rgba(40, 40, 40, 0.9); }
.dropdown .pointer-inner { border-color: rgba(12, 12, 12, 0.97) transparent; }
.dropdown .pointer { border-color: var(--p83-border) transparent; }

.pagination li a,
.pagination li span {
	background-color: rgba(40, 40, 40, 0.85);
	border: 1px solid var(--p83-border);
	border-radius: 0;
	color: var(--p83-text);
}

.pagination li.active span,
.pagination li a:hover {
	background-color: var(--p83-red);
	border-color: var(--p83-red);
	color: #ffffff;
}

.tabs .tab > a,
.minitabs .tab > a {
	background-color: rgba(20, 20, 20, 0.85);
	border: 1px solid var(--p83-border-soft);
	border-radius: 0;
	color: var(--p83-text-dim);
}

.tabs .activetab > a,
.minitabs .activetab > a {
	background-color: var(--p83-row);
	border-bottom-color: var(--p83-row);
	color: var(--p83-text);
}

/* --------------------------------------------------------------------------
   HEADINGS, TABLES, MESSAGES
   -------------------------------------------------------------------------- */

h2, h3 {
	color: var(--p83-text);
	border-bottom-color: var(--p83-border-soft);
}

h2.forum-title a, h2.topic-title a { color: var(--p83-link); }

hr {
	border-top-color: var(--p83-border-soft);
	border-bottom-color: transparent;
}

table.table1 thead th {
	color: var(--p83-text);
	border-bottom: 1px solid var(--p83-border);
}

table.table1 tbody tr {
	border-color: var(--p83-border-soft);
	background-color: var(--p83-row);
}

table.table1 tbody tr:hover {
	background-color: var(--p83-row-hover);
	color: var(--p83-text);
}

table.table1 td { color: var(--p83-text); }

fieldset.fields1, fieldset.fields2 { background-color: transparent; }

dl.details dt { color: var(--p83-text-dim); }
dl.details dd { color: var(--p83-text); }

.rules {
	background-color: rgba(42, 20, 20, 0.85);
	border: 1px solid #5c2224;
	color: var(--p83-text);
}

.error { color: #ff7a7c; }

.successbox { background-color: rgba(22,48,26,0.9); border: 1px solid #2e5c36; color: #c9e8cf; }
.errorbox   { background-color: rgba(47,20,22,0.9); border: 1px solid #6b2326; color: #f5c9cb; }
.warningbox { background-color: rgba(47,38,18,0.9); border: 1px solid #6b5a23; color: #f0e2bd; }

.phpbb_alert {
	background-color: rgba(12, 12, 12, 0.98);
	border: 1px solid var(--p83-border);
	color: var(--p83-text);
}

.darkenwrapper .darken { background-color: #000000; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.copyright {
	color: var(--p83-text-dim);
	font-size: 0.85em;
}

.copyright a { color: var(--p83-text-dim); }
.copyright a:hover { color: var(--p83-link); }

.stat-block, .online-list { color: var(--p83-text); }

.postbody img.smilies { background: transparent; }

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}
/* === P83 TWEAKS === */
/* Everything below overrides the main sheet. Later rules win, so this is
   where fast iteration happens. The whole block is replaced each time. */

/* --------------------------------------------------------------------------
   ONE CELL COLOUR EVERYWHERE
   The FAQ page uses .panel, the index uses li.row with .bg1/.bg2. prosilver
   was winning on the row selectors, so they read lighter. Pin both to the
   same value and force it past prosilver.
   -------------------------------------------------------------------------- */

:root {
	--p83-cell: rgba(8, 8, 8, 0.86);
	--p83-cell-hover: rgba(30, 30, 30, 0.90);
}

/* Index and topic rows */
ul.topiclist li.row,
ul.topiclist li.row.bg1,
ul.topiclist li.row.bg2,
ul.topiclist li.row.bg3,
ul.topiclist li.row dl,
ul.topiclist li.row dl.row-item,
dl.row-item,
.forumbg ul.topiclist li.row,
.forabg ul.topiclist li.row {
	background-color: var(--p83-cell) !important;
	background-image: none !important;
}

/* The generic striping classes prosilver reuses everywhere */
.bg1, .bg2, .bg3,
li.bg1, li.bg2, li.bg3,
div.bg1, div.bg2, div.bg3,
tr.bg1, tr.bg2, tr.bg3,
td.bg1, td.bg2, td.bg3 {
	background-color: var(--p83-cell) !important;
	background-image: none !important;
}

/* Panels: FAQ, search results, profiles, UCP, MCP, posting form */
.panel,
.panel.bg1,
.panel.bg2,
.panel.bg3,
#page-body .panel {
	background-color: var(--p83-cell) !important;
	background-image: none !important;
}

/* Posts */
.post,
.post.bg1,
.post.bg2,
.post.bg3 {
	background-color: var(--p83-cell) !important;
	background-image: none !important;
}

/* Data tables: memberlist, who's online, ACP-adjacent listings */
table.table1 tbody tr,
table.table1 tbody tr.bg1,
table.table1 tbody tr.bg2 {
	background-color: var(--p83-cell) !important;
}

table.table1 tbody tr:hover {
	background-color: var(--p83-cell-hover) !important;
}

ul.topiclist li.row:hover,
ul.topiclist li.row dl:hover {
	background-color: var(--p83-cell-hover) !important;
}

/* The post author column sits on top of the cell, so keep it a shade
   different rather than another opaque layer */
.postprofile {
	background-color: rgba(0, 0, 0, 0.28) !important;
	border-left: 1px solid var(--p83-border-soft);
}

/* --------------------------------------------------------------------------
   CONTENT WIDTH
   840px to match the old board, which measured about 835px. Narrow by
   modern standards, but it is what makes the asphalt read as a backdrop
   rather than a border.
   -------------------------------------------------------------------------- */

.wrap,
#wrap {
	max-width: 840px !important;
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   ONE RED, EVERYWHERE
   #c71e21 for every red: link text, visited, hover, fills, accents.
   No lighter or darker derivatives anywhere.

   Interaction feedback comes from underline rather than a colour shift,
   so the colour stays locked while links still behave like links.

   Accessibility note, recorded rather than argued: #c71e21 on the cell
   background measures about 2.2:1, under the 4.5:1 WCAG AA minimum for
   body text. This is a deliberate brand decision.
   -------------------------------------------------------------------------- */

:root {
	--p83-red:         #c71e21;
	--p83-red-trans:   transparent;
	--p83-red-hover:   #c71e21;
	--p83-link:        #c71e21;
	--p83-link-hover:  #c71e21;
	--p83-visited:     #c71e21;
}

a,
a:link,
a:visited,
a:active,
a:hover,
a:focus,
.topictitle,
.topictitle:visited,
.topictitle:hover,
.forumtitle,
.forumtitle:visited,
.forumtitle:hover,
.postlink,
.postlink:visited,
h2.forum-title a,
h2.topic-title a,
.lastsubject,
.username,
.username-coloured,
dl.details dd a,
.postprofile a,
.copyright a:hover,
.navbar ul.linklist > li > a:hover,
.nav-breadcrumbs a:hover {
	color: #c71e21 !important;
}

/* Feedback without a colour change */
a:hover,
.topictitle:hover,
.forumtitle:hover,
.postlink:hover {
	text-decoration: underline !important;
}

/* Where red is a fill, the text on it stays white */
.button1,
input.button1,
input[type="submit"].button1 {
	background-color: #c71e21 !important;
	border-color: #c71e21 !important;
	color: #ffffff !important;
}

.pagination li.active span,
.pagination li a:hover {
	background-color: #c71e21 !important;
	border-color: #c71e21 !important;
	color: #ffffff !important;
}

/* Accents */
blockquote {
	border-left-color: #c71e21 !important;
}

.error,
.errorbox {
	color: #c71e21 !important;
}

/* Nav links stay neutral until hovered, so the red reads as "link" */
.navbar ul.linklist > li > a,
.navbar .linklist li a,
.nav-breadcrumbs a,
.copyright a {
	color: var(--p83-text) !important;
}

/* --------------------------------------------------------------------------
   SECTION HEADER STRIP: FULLY TRANSPARENT
   "POINT 83 FORUMS" and the TOPICS / POSTS / LAST POST labels. No red fill
   at all; the strip reads as text sitting on the road.
   -------------------------------------------------------------------------- */

ul.topiclist li.header,
.forabg .header,
.forumbg .header,
.forabg > .inner > ul.topiclist > li.header,
.forumbg > .inner > ul.topiclist > li.header,
ul.topiclist li.header dl,
ul.topiclist li.header dl.row-item {
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* With no fill behind it, the label text needs the shadow to carry */
ul.topiclist li.header dt,
ul.topiclist li.header dd,
ul.topiclist li.header .list-inner,
.forabg .header a,
.forumbg .header a,
ul.topiclist li.header a {
	color: #ffffff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------------------------
   NAVBAR, from the previous round
   -------------------------------------------------------------------------- */

.navbar,
.navbar > .inner,
#nav-main,
#nav-breadcrumbs {
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.navbar {
	padding: 6px 0;
}

.navbar ul.linklist > li > a,
.navbar .linklist li a,
.nav-breadcrumbs a,
.navbar .linklist li,
.navbar .dropdown-trigger,
.navbar .linklist .rightside a {
	color: var(--p83-text);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.navbar ul.linklist > li > a:hover,
.nav-breadcrumbs a:hover {
	color: var(--p83-link-hover);
}

.breadcrumbs .crumb:before,
.navbar .linklist .separator {
	color: var(--p83-text-dim);
}

.navbar .dropdown-container .dropdown-trigger,
.navbar .responsive-menu .dropdown-trigger {
	background: transparent;
	border: 0;
}

/* === END P83 TWEAKS === */
/* === P83 TYPOGRAPHY === */

/* ONE DIAL FOR THE WHOLE BOARD.
   prosilver sizes almost everything in em off the body value, so this
   number scales the entire interface. Change it here, nowhere else.

     13px  what this style shipped with
     12px  current
     11px  noticeably tight
     10px  prosilver's own default
*/
:root {
	--p83-base: 10px;
}

body {
	font-size: var(--p83-base);
}

/* === END P83 TYPOGRAPHY === */

/* === P83 HIDE CLUTTER === */

/* "It is currently <date>" and "Last visit was: <date>".
   prosilver's {CURRENT_TIME} and {LAST_VISIT_DATE}. No board setting
   governs these. display:none removes them from flow, so the gap closes
   with them, and from the accessibility tree, so screen readers skip
   them too.

   If this ever hides something else carrying the same class, narrow it:
     .page-body > p.responsive-center { display: none; } */

p.responsive-center {
	display: none;
}

/* The action bar above them can keep a bottom margin that leaves a gap
   once the paragraphs are gone. */
.action-bar.compact {
	margin-bottom: 4px;
}

/* Birthday list. Switched off in the board settings above, so this is
   belt and braces only: it also covers the case where the setting gets
   turned back on in the ACP by accident. */
.stat-block.birthday-list,
.birthday-list {
	display: none;
}

/* === END P83 HIDE CLUTTER === */

/* === P83 BUTTONS === */

/* prosilver draws  box-shadow: 0 0 0 1px #FFFFFF inset  inside every
   button edge. On a near-black board that is white fringing. Removed
   here rather than in prosilver's buttons.css so a phpBB update does
   not put it back.

   :focus is deliberately NOT in this list. See the rule below. */

.button,
.button:hover,
.button:active,
a.button,
a.button:hover,
a.button:active,
.button-secondary,
.button-secondary:hover,
.button-search,
.button-search:hover,
.button-search-end,
.button-search-end:hover,
.button-icon-only,
.button-icon-only:hover,
.dropdown-trigger,
.dropdown-trigger:hover {
	box-shadow: none;
	-webkit-box-shadow: none;
}

/* Removing box-shadow from buttons takes the keyboard focus indicator
   with it, which is invisible to mouse users and total to anyone
   tabbing. This puts a deliberate one back.

   :focus-visible rather than :focus, so it appears for keyboard
   navigation and not on mouse clicks. Delete this rule if you would
   rather have nothing. */

.button:focus-visible,
a.button:focus-visible,
.button-secondary:focus-visible,
.button-search:focus-visible,
.button-icon-only:focus-visible {
	outline: 2px solid #c71e21;
	outline-offset: 1px;
	box-shadow: none;
}

/* === END P83 BUTTONS === */

/* === P83 ROWS AND BUTTONS === */

/* THE LEFT GUTTER.
   prosilver holds 52px open on each row for a forum/topic icon. Those
   icons have never rendered on this board, so the space is dead. 13px
   gives the title the width back. The icon background is switched off
   as well, so nothing can sit under the text if an imageset ever
   reappears. */

ul.topiclist dl.row-item dt .list-inner {
	padding-left: 13px;
}

ul.topiclist dl.row-item dt {
	background-image: none;
}

ul.topiclist dd.mark,
ul.topiclist li.row dl.row-item dt .responsive-show {
	padding-left: 0;
}

/* BUTTONS.
   prosilver switches .button to a white background and a blue border on
   hover, focus and active. The values below are the button's own base
   values, read out of the cascade, so the interactive states are
   visually identical to the default. The only change on hover is the
   underline.

   :focus and :active are included deliberately. Covering :hover alone
   leaves the button stuck white after a click. Keyboard focus stays
   visible through the outline in the P83 BUTTONS block. */

.button:hover,
.button:focus,
.button:active,
a.button:hover,
a.button:focus,
a.button:active,
.button-secondary:hover,
.button-secondary:focus,
.button-secondary:active,
.button-search:hover,
.button-search:focus,
.button-search:active,
.button-search-end:hover,
.button-search-end:focus,
.button-search-end:active,
.button-icon-only:hover,
.button-icon-only:focus,
.button-icon-only:active,
.dropdown-trigger:hover,
.dropdown-trigger:focus,
.dropdown-trigger:active,
.dropdown-visible .dropdown-trigger,
.nojs .dropdown-container:hover .dropdown-trigger {
	background-color: rgba(40, 40, 40, 0.85);
	background-image: none;
	border-color: #C7C3BF;
	color: var(--p83-text);
	box-shadow: none;
	-webkit-box-shadow: none;
}

/* The one thing that does change on hover. */
.button:hover,
a.button:hover,
.button-secondary:hover,
.button-search:hover,
.button-icon-only:hover,
.dropdown-trigger:hover {
	text-decoration: underline;
}

/* Icon glyphs inside buttons should not pick up the underline. */
.button:hover .icon,
a.button:hover .icon,
.dropdown-trigger:hover .icon {
	text-decoration: none;
}

/* === END P83 ROWS AND BUTTONS === */

/* === P83 POSTS === */

/* SEARCH BOX BORDER.
   prosilver gives the search input a pale hairline in all three states.
   Overridden to the board's own soft border so the field stops being a
   special case. Set this to transparent for no border at all. */

.search-box .inputbox,
.search-box .inputbox:hover,
.search-box .inputbox:focus {
	border-color: var(--p83-border-soft);
}

/* POST COLUMNS SWAPPED: profile left, body right, as the 2005 board had.
   prosilver floats the body left at 76% and the profile right at 22%,
   so reversing the two floats is the whole job. Widths are untouched.

   Scoped to min-width 701px because prosilver stacks these columns
   below 700px. This stylesheet loads after prosilver, so an unscoped
   float here would override that and break narrow screens. */

@media (min-width: 701px) {
	.postbody {
		float: right;
	}

	.postprofile {
		float: left;
		/* prosilver's margin is 5px 0 10px 1%, the 1% separating the
		   column from the body on its left. Mirrored. */
		margin: 5px 1% 10px 0;
		/* The divider moves to the right edge, where the column now
		   meets the post text. */
		border-left: 0;
		border-right: 1px solid var(--p83-border-soft);
	}
}

/* === END P83 POSTS === */




/* === P83 TOPIC ROWS === */

/* The  by <user> » <date>  line under each thread title. The lastpost
   column already carries who posted and when. */

.topic-poster {
	display: none;
}

/* ROW LAYOUT AS A TABLE.

   prosilver floats a full-width dt with margin-right: -440px and three
   left-floated dd columns totalling exactly 440px. The header row lays
   out correctly that way; the body rows did not, collapsing all three
   dd boxes onto the same position. Laying the row out as a table is
   deterministic and sidesteps the whole float reservation.

   It also delivers the vertical centring: vertical-align on a table
   cell does it natively, with no line-height to tune against the
   two-line lastpost column.

   Verified in the live page across all 30 rows of a forum view plus
   the header, including a 142-character title and the taller paginated
   rows: every row's columns sit at the same x as the heading above it.

   These selectors already outrank prosilver's and come later in the
   cascade, so no override flags are needed. Confirmed by measurement
   in the live page, not assumed.

   --p83-row-pad is the one number to tune for row height. */

:root {
	--p83-row-pad: 4px;
}

@media (min-width: 951px) {
	ul.topiclist li.header dl.row-item,
	ul.topiclist li.row dl.row-item {
		display: table;
		width: 100%;
		table-layout: fixed;
	}

	ul.topiclist li.header dl.row-item > dt,
	ul.topiclist li.header dl.row-item > dd,
	ul.topiclist li.row dl.row-item > dt,
	ul.topiclist li.row dl.row-item > dd {
		display: table-cell;
		float: none;
		vertical-align: middle;
		padding-top: var(--p83-row-pad);
		padding-bottom: var(--p83-row-pad);
	}

	/* auto lets the title cell absorb whatever the fixed columns leave,
	   so this does not need to know the board width. */
	ul.topiclist li.header dl.row-item > dt,
	ul.topiclist li.row dl.row-item > dt {
		width: auto;
		margin-right: 0;
	}

	/* the other half of prosilver's reservation, no longer needed */
	ul.topiclist li.header dl.row-item > dt .list-inner,
	ul.topiclist li.row dl.row-item > dt .list-inner {
		margin-right: 0;
	}
}

/* === END P83 TOPIC ROWS === */

/* === P83 POST DETAIL === */

/* Poster column: no edges at all, just the translucent panel.
   Clears both sides, including the divider added when the columns
   were swapped, which was the one actually visible. */

.postprofile {
	border-left: 0;
	border-right: 0;
}

/* The thread title repeated inside the first post.
   Hidden but left in the flow, with its box reduced to the size of an
   ordinary post heading. The first post's text then begins at exactly
   the same offset as every other post, with no hand-picked value, and
   it follows the font scale if that is changed again.
   Measured before and after: 55.8 then 52.4, matching the rest. */

.postbody h3.first {
	visibility: hidden;
	font-size: 1.5em;
}

/* Links inside post text. prosilver draws a blue edge beneath them.
   Made transparent rather than removed so the text does not shift. */

.postlink {
	border-bottom-color: transparent;
}

/* === END P83 POST DETAIL === */

/* === P83 HEADINGS === */

/* Selector list generated from prosilver, every rule that set its
   heading blue as text colour. Built by grepping the stylesheets
   rather than inspecting one page, so pages not looked at are
   covered as well. */

h3,
.content h2, .panel h2 {
	color: #ffffff;
}

/* === END P83 HEADINGS === */

/* === P83 LIST DETAIL === */

/* The pale panel behind the board index forum list. Exactly one
   element carried it. Row spacing was already the same as the forum
   view, five pixels between rows on both; the gaps only read as
   larger because that colour showed through them. Nothing about
   spacing is changed here. */

ul.topiclist {
	background-color: transparent;
	background-image: none;
}

/* Last post cell on the forum view: date and time on the first line,
   poster beneath, both centred.

   The cell holds a hidden label, the word "by" as loose text, the
   poster link, a jump icon, a line break and the timestamp. Because
   "by" is loose text it cannot be moved on its own, so a column
   layout would strand it. Instead the cell wraps as a row, the
   timestamp takes a full line and is pulled to the front, and the
   remainder stays together on the line below.

   Scoped to the topic list on purpose. The board index version of
   this cell carries a third line, the topic title, and the timestamp
   would jump above it. */

ul.topiclist.topics dd.lastpost {
	text-align: center;
}

ul.topiclist.topics dd.lastpost > span {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0 4px;
	padding-left: 0;
}

ul.topiclist.topics dd.lastpost > span > time {
	order: -1;
	flex: 0 0 100%;
	text-align: center;
}

ul.topiclist.topics dd.lastpost > span > br {
	display: none;
}

/* === END P83 LIST DETAIL === */

/* === P83 BUTTON STATES === */

/* Base and every interactive state share one selector list, so the
   resting look and the hovered look cannot drift apart. An earlier
   attempt resolved them separately and they diverged. */

.button, a.button, .button-secondary, .button-search, .button-search-end,
.button-icon-only, .dropdown-select,
.button:hover, .button:focus, .button:active,
a.button:hover, a.button:focus, a.button:active,
.button-secondary:hover, .button-secondary:focus, .button-secondary:active,
.button-search:hover, .button-search:focus, .button-search:active,
.button-search-end:hover, .button-search-end:focus, .button-search-end:active,
.button-icon-only:hover, .button-icon-only:focus, .button-icon-only:active,
.dropdown-select:hover, .dropdown-select:focus, .dropdown-select:active {
	background-color: rgba(40, 40, 40, 0.85);
	background-image: none;
	border-color: rgba(67, 67, 67, 0.45);
}

/* Ordinary buttons keep their red lettering in every state. */

.button, a.button,
.button:hover, .button:focus, .button:active,
a.button:hover, a.button:focus, a.button:active,
.button-search:hover, .button-search-end:hover, .button-icon-only:hover {
	color: #c71e21;
}

/* The jump box is a span carrying both the button and the trigger
   classes: a button's shell but grey lettering. Needs its own rule,
   more specific, or the button colour would claim it. */

.jumpbox .dropdown-trigger,
.jumpbox .dropdown-trigger:hover,
.jumpbox .dropdown-trigger:focus,
.jumpbox .dropdown-trigger:active,
.jumpbox.dropdown-visible .dropdown-trigger {
	color: #e5e5e5;
	background-color: rgba(40, 40, 40, 0.85);
	border-color: rgba(67, 67, 67, 0.45);
}

/* Icons take the colour of the button around them. prosilver turns
   them blue on hover from a three part selector, so this has to be at
   least as deep to win. */

.button .icon, a.button .icon, .dropdown-select .icon,
.button:hover .icon, .button:focus .icon, .button:active .icon,
a.button:hover .icon, a.button:focus .icon, a.button:active .icon,
.button-secondary:hover .icon, .button-search:hover .icon,
.button-icon-only:hover .icon, .dropdown-select:hover .icon,
.jumpbox .dropdown-trigger .icon, .jumpbox .dropdown-trigger:hover .icon {
	color: inherit;
}

/* The one thing hovering changes. */

.button:hover, a.button:hover, .button-secondary:hover, .button-search:hover,
.button-search-end:hover, .button-icon-only:hover, .dropdown-select:hover,
.jumpbox .dropdown-trigger:hover {
	text-decoration: underline;
}

/* Keep the rule off the icon glyphs, where it reads as a fault. */

.button:hover .icon, a.button:hover .icon,
.jumpbox .dropdown-trigger:hover .icon {
	text-decoration: none;
}

/* === END P83 BUTTON STATES === */

/* === P83 BUTTON SHADOW === */

/* prosilver traces a white shadow around button lettering on hover and
   focus. On a near-black button that reads as white fringing on the
   text and around the icon glyph.

   Resting buttons use none, so this simply holds the interactive
   states to the same thing and the two finally match. */

.button:hover, .button:focus, .button:active,
a.button:hover, a.button:focus, a.button:active,
.button-secondary:hover, .button-secondary:focus, .button-secondary:active,
.button-search:hover, .button-search:focus, .button-search:active,
.button-search-end:hover, .button-search-end:focus, .button-search-end:active,
.button-icon-only:hover, .button-icon-only:focus, .button-icon-only:active,
.dropdown-select:hover, .dropdown-select:focus, .dropdown-select:active,
.jumpbox .dropdown-trigger:hover, .jumpbox .dropdown-trigger:focus,
.button:hover .icon, .button:focus .icon, .button:active .icon,
a.button:hover .icon, a.button:focus .icon, a.button:active .icon,
.jumpbox .dropdown-trigger:hover .icon {
	text-shadow: none;
}

/* === END P83 BUTTON SHADOW === */

/* === P83 CONTROL PANEL === */

/* The User and Moderator control panels keep prosilver's pale blue
   chrome. Same two surface tones as the buttons, so the panels read as
   part of the board.

   The sidebar links and the active tab are painted with background
   IMAGES, not colours, so each needs clearing on its own. */

.navigation a,
.navigation a:focus {
	background-image: none;
	background-color: rgba(20, 20, 20, 0.85);
}

.navigation a:hover {
	background-image: none;
	background-color: rgba(40, 40, 40, 0.85);
}

.navigation .active-subsection a,
.navigation .active-subsection a:hover,
#active-subsection a {
	background-image: none;
	background-color: rgba(40, 40, 40, 0.85);
	color: #c71e21;
}

.tabs .activetab a,
.tabs .activetab a:hover,
.tabs .activetab a:focus {
	background-image: none;
	background-color: rgba(40, 40, 40, 0.85);
}

.cp-mini {
	background-image: none;
	background-color: rgba(20, 20, 20, 0.85);
}

/* Pale separators and hairlines through the panels. */

.cp-menu hr,
.panel hr,
.navigation hr,
.cp-main hr {
	border-color: var(--p83-border-soft);
}

ul.cplist,
.cp-main .pm-message {
	border-color: var(--p83-border-soft);
}

.sort-tools {
	border-left-color: var(--p83-border-soft);
}

/* === END P83 CONTROL PANEL === */

/* === P83 TABS === */

/* The selected tab carried a visible top edge. It is hidden by matching
   it to the tab's own fill rather than by removing the border, because
   dropping the width would pull the whole strip up by a pixel. */

.tabs .activetab > a,
.minitabs .activetab > a,
.tabs .activetab > a:hover,
.minitabs .activetab > a:hover {
	border-top-color: rgba(40, 40, 40, 0.85);
}

/* Unselected tabs were still lighting up pale blue on hover. This is
   the same tone the sidebar uses, so both halves of the control panel
   now answer the cursor the same way. */

.tabs .tab > a:hover,
.minitabs .tab > a:hover {
	background-image: none;
	background-color: rgba(40, 40, 40, 0.85);
}

/* === END P83 TABS === */

/* === P83 PANEL DETAIL === */

/* The pale line across the top of the selected tab was an inset
   shadow, not a border, which is why recolouring the border left it
   in place. */

.tabs .activetab > a,
.minitabs .activetab > a,
.tabs .activetab > a:hover,
.minitabs .activetab > a:hover {
	box-shadow: none;
}

/* The notifications panel is its own component with a title bar, a
   footer and its own rows, so the plain dropdown rules never reached
   it. Same two surface tones as everything else. */

.dropdown-extended .header {
	background-image: none;
	background-color: rgba(20, 20, 20, 0.85);
	border-color: var(--p83-border-soft);
	color: var(--p83-text);
}

.dropdown-extended .footer {
	background-color: rgba(20, 20, 20, 0.85);
	border-top-color: var(--p83-border-soft);
}

.dropdown-extended ul li {
	border-top-color: var(--p83-border-soft);
}

.dropdown-extended ul li:hover,
.dropdown-extended ul li.unread:hover {
	background-color: rgba(40, 40, 40, 0.9);
}

.dropdown-extended a.mark_read {
	background-color: rgba(40, 40, 40, 0.9);
	color: var(--p83-text);
}

/* The little arrow pointing up at the control, which was still drawn
   in the old pale blue, and the dividers in the plain dropdowns. */

.dropdown .pointer-inner,
.jumpbox .dropdown .pointer-inner {
	border-color: rgba(12, 12, 12, 0.97);
}

.dropdown li,
.jumpbox .dropdown li {
	border-top-color: var(--p83-border-soft);
}

/* Table cells drew their dividers in near white while the rows around
   them already used the board's soft border. */

table.table1 td,
table.table1 th,
table.table1 tbody td,
.cp-main table td,
.cp-main table th {
	border-top-color: var(--p83-border-soft);
}

/* === END P83 PANEL DETAIL === */

/* === P83 NOTICE === */

/* Every edge of the selected tab matched to its own fill, in every
   state. Hovering was turning three of them pale blue. The borders
   keep their width so the strip does not shift, they simply stop
   being visible. */

.tabs .activetab > a,
.minitabs .activetab > a,
.tabs .activetab > a:hover,
.minitabs .activetab > a:hover,
.tabs .activetab > a:focus,
.minitabs .activetab > a:focus {
	border-color: rgba(40, 40, 40, 0.85);
	box-shadow: none;
}

/* prosilver uses this class for two different things: the notice strip
   at the top of a page, and the rules box a forum can display. Only
   the notice should read as a warning, so the red is scoped to it and
   ordinary rules boxes get the board's own dark panel instead of the
   pink they were inheriting. */

div.rules {
	background-color: rgba(42, 20, 20, 0.85);
	border-color: var(--p83-border-soft);
	color: var(--p83-text);
}

div.rules#information,
#information.rules {
	background-color: #c71e21;
	border-color: #c71e21;
	color: #ffffff;
	padding: 10px;
}

div.rules#information .inner,
#information.rules .inner {
	padding: 0;
	background-color: transparent;
}

/* The label and any link inside the strip have to come along, or they
   stay red on red. */

#information.rules strong,
#information.rules a,
#information.rules a:hover,
#information.rules a:visited {
	color: #ffffff;
}

/* === END P83 NOTICE === */

/* === P83 CONTROLS === */

/* The blue on a ticked box comes from the browser, not from here,
   which is why styling backgrounds and borders never touched it. This
   hands the native control a colour and lets the browser go on drawing
   it, so the tick stays sharp at any size.

   Radios are included. None appear on the notification options page
   but they share the same native blue. */

input[type="checkbox"],
input[type="radio"] {
	accent-color: #c71e21;
}

/* A white shadow sat under the notifications panel title. */

.dropdown-extended .header,
.dropdown-extended .header span,
.dropdown-extended .header a {
	text-shadow: none;
}

/* prosilver turns the row lettering black on hover, which was left
   behind when the row background was retoned. White, and no shadow
   coming along with it. */

.dropdown-extended ul li:hover,
.dropdown-extended ul li.unread:hover,
.dropdown-extended ul li.no_notifications:hover,
.dropdown-extended ul li:hover a,
.dropdown-extended ul li:hover .notification-title,
.dropdown-extended ul li:hover .notification-reference,
.dropdown-extended ul li:hover .notification-time {
	background-color: rgba(40, 40, 40, 0.9);
	color: #ffffff;
	text-shadow: none;
}

/* === END P83 CONTROLS === */

/* === P83 TARGET === */

/* Arriving at a post by its anchor, as in viewtopic.php?t=13024#p203703,
   makes it the :target. prosilver sets that post's text to black, which
   is correct on a light theme: its normal text is #333 and black is a
   step darker, marking the post you were linked to. Here the normal
   text is #e5e5e5 on near-black, so the same step makes the one post
   you came to see the only one you cannot read.

   Same job, opposite direction: brighten rather than darken, and put
   the real marker on the left edge where it reads at a glance. */

.post:target .content {
	color: #ffffff;
}

/* An inset shadow, not a border. prosilver gives every post a 1px left
   border; widening it on the targeted post alone would make that post
   wider than its neighbours and shift its text sideways as you land on
   it. An inset shadow paints inside the existing box, so nothing moves.
   Posts carry no box-shadow otherwise, so nothing is displaced. */

.post:target {
	box-shadow: inset 3px 0 0 #c71e21;
}

/* NOT overridden here: prosilver's other :target rule also covers
   .post h3 a.first-unread. Tested live by adding that class to a post
   title link; it stayed #c71e21, because the earlier blue-to-white pass
   already outranks it. No rule needed. */

/* === END P83 TARGET === */

/* === P83 FOOTER === */

/* From the browser inspect session: no rule above the text, no padding,
   no explicit line-height, 9px. prosilver's .copyright is 10px
   (common.css:982), so this sits one pixel under the phpBB line.

   padding is off entirely, which drops the 10px side gutter along with
   the 18px top. Add  padding: 0 10px;  if it reads badly on a phone. */

.p83-global-footer {
	clear: both;
	margin: 0 auto 20px;
	max-width: 840px;
	text-align: center;
	font-size: 9px;
}

/* This is what colours the text. Disabling color on the wrapper had no
   visible effect because this rule sets it on the paragraphs. Change
   the colour here. */
.p83-footer-copy {
	margin: 0;
	color: var(--p83-text-dim);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}