/* ==========================================================================
   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;
}

.button:hover,
a.button:hover,
.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: 11px;
}

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 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);
}