/* ============================================================
   Project Scorpion — current site style (Light).
   Layers over bootstrap.min.css + polygon.css. The classic
   themes are polygon-light.css / polygon-dark.css and are frozen.

   Source Sans Pro is the typeface the 2016 client ships, so the
   site and the editor agree; the chrome takes its blue from the logo.
   ============================================================ */

@font-face{font-family:'Source Sans Pro';src:url('/css/fonts/ssproregular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans Pro';src:url('/css/fonts/ssprosemibold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans Pro';src:url('/css/fonts/ssprobold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans Pro';src:url('/css/fonts/ssprolight.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}

:root
{
	/* --fg-* is text on a page surface; --fill-* is a solid block that always
	   carries white text. They are separate because the dark style lightens the
	   text hues, which would make a white-on-fill pairing fail. */
	--fg-primary:#1a35c4; --fg-success:#1e7c33; --fg-danger:#d12435;
	--fg-info:#117686; --fg-warning:#896700; --fg-secondary:#646d77;
	--fill-primary:#1b2fb0; --fill-success:#2b854c; --fill-danger:#d12435;
	--fill-info:#117686; --fill-warning:#896700;
	/* Chrome blue, sampled from img/ProjectScorpion.png: the logo is a deep
	   indigo body (#070083) with bright royal facets (#1339f4). --brand sits
	   between the two so a full-width bar is not as vivid as the facets, and
	   --brand-deep is the logo's own body colour. */
	--brand:#1b2fb0; --brand-deep:#0d1a7d; --brand-btn:#1b2fb0;
	--brand-bright:#1339f4;
	--go:#2e8f52; --go-deep:#25703f; --go-btn:#2b854c;
	--ink:#1b1f24; --ink-2:#3d454e; --muted:#646d77; --faint:#98a1ab;
	--line:#dbe0e6; --line-soft:#e9edf1;
	--surface:#fff; --field:#eceef2; --sunken:#f6f8f9;
	--link:#1a35c4; --radius:3px;
}

body
{
	background-color: #eceef2;
	background-color: var(--field);
	color: #1b1f24;
	color: var(--ink);
	font-family: 'Source Sans Pro', 'Segoe UI', Tahoma, sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}

a { color: #1a35c4; }
a { color: #1a35c4; color: var(--link); }
h1,h2,h3,h4,h5,h6 { font-weight: 600; letter-spacing: -.2px; }
h1 { font-size: 23px; } h2 { font-size: 20px; } h3 { font-size: 17px; }
h4 { font-size: 15.5px; } h5 { font-size: 14.5px; } h6 { font-size: 13.5px; }
.text-muted { color: #646d77 !important; }
.text-muted { color: #646d77 !important; color: var(--muted) !important; }
.tabnum { font-variant-numeric: tabular-nums; }

/* ---------- the single navigation bar ---------- */

.nav-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.navbar-next
{
	background-color: #1b2fb0;
	background-color: var(--brand);
	border-bottom: 1px solid #0d1a7d;
	border-bottom: 1px solid var(--brand-deep);
	min-height: 44px;
}

.navbar-next .navbar-brand
{
	display: flex; align-items: center; gap: 8px;
	color: #fff !important; font-weight: 600; font-size: 15.5px;
	padding-top: 0; padding-bottom: 0; margin-right: 22px;
}

.navbar-next .navbar-nav a.nav-link
{
	color: #ffffff !important;
	color: rgba(255,255,255,.88) !important;
	font-weight: 600;
	padding: 12px 14px;
	border-bottom: 3px solid transparent;
}

.navbar-next .navbar-nav a.nav-link:hover,
.navbar-next .navbar-nav a.nav-link:focus
{
	color: #fff !important;
	background-color: rgba(0,0,0,.10);
}

.navbar-next .navbar-nav a.nav-link.active
{
	color: #fff !important;
	background-color: #000000;
	background-color: rgba(0,0,0,.15);
}

/* status pills: friends and currency read as one pair */
.navbar-next .navbar-status { align-items: center; }

/* polygon.css absolutely-positions the friend indicator for the classic bar;
   in this bar it is a pill in normal flow, so undo that here */
.navbar-next .navbar-nav .friend-requests-indicator,
.navbar-next .navbar-nav .unread-messages-indicator
{
	position: static;
	margin-left: 8px;
}

.navbar-next .nav-pill
{
	display: inline-flex; align-items: center; gap: 6px;
	height: 26px; padding: 0 9px; margin-left: 8px;
	border-radius: 3px; border-radius: var(--radius);
	background-color: #000000;
	background-color: rgba(0,0,0,.16);
	color: #fff; font-size: 13px; font-weight: 600;
	text-decoration: none;
}

.navbar-next .nav-pill:hover,
.navbar-next .nav-pill:focus
{
	background-color: rgba(0,0,0,.28);
	color: #fff; text-decoration: none;
}

.navbar-next .nav-pill-icon { width: 15px; height: 15px; fill: currentColor; }

.navbar-next .nav-pill-count
{
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 17px; height: 17px; padding: 0 5px;
	color: #0d1a7d;
	border-radius: 9px; background: #fff; color: #0d1a7d; color: var(--brand-deep);
	font-size: 11px; font-weight: 700; line-height: 1;
}

.navbar-next .nav-account .nav-link
{
	display: flex; align-items: center; gap: 7px;
	padding-top: 9px; padding-bottom: 9px;
}

.navbar-next .nav-account .nav-link img
{
	width: 22px; height: 22px; border-radius: 2px;
	object-fit: cover;
}

/* account menu — everything the old dark second bar carried.
   polygon.css paints dropdown items white for the classic bar with
   `.nav-item .dropdown-menu .dropdown-item`, so these selectors are scoped
   under .navbar-next to outrank it rather than piling on !important. */
.navbar-next .nav-item .dropdown-menu
{
	min-width: 186px;
	margin-top: 2px;
	padding: 5px 0;
	background-color: #fff;
	background-color: var(--surface);
	border: 1px solid #dbe0e6;
	border: 1px solid var(--line);
	border-radius: 3px; border-radius: var(--radius);
	box-shadow: 0 4px 14px rgba(20,26,33,.16);
}

.navbar-next .nav-item .dropdown-menu .dropdown-item
{
	display: flex; align-items: center;
	padding: 6px 13px;
	color: #3d454e !important;
	color: var(--ink-2) !important;
	font-size: 13.5px; font-weight: 600;
	white-space: nowrap;
}

.navbar-next .nav-item .dropdown-menu .dropdown-item:hover,
.navbar-next .nav-item .dropdown-menu .dropdown-item:focus
{
	background-color: #f6f8f9; background-color: var(--sunken);
	color: #1b1f24 !important; color: var(--ink) !important;
	text-decoration: none;
}

.navbar-next .nav-item .dropdown-menu .dropdown-divider
{
	margin: 5px 0;
	border-top: 1px solid #e9edf1;
	border-top: 1px solid var(--line-soft);
}

.navbar-next .account-menu .menu-badge
{
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 17px; height: 17px; margin-left: auto; padding: 0 5px;
	background: #1b2fb0;
	border-radius: 9px; background: #1b2fb0; background: var(--brand); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 1;
}

/* ---------- surfaces ---------- */

.card
{
	background-color: #fff;
	background-color: var(--surface);
	border: 1px solid #dbe0e6;
	border: 1px solid var(--line);
	border-radius: 3px; border-radius: var(--radius);
	box-shadow: 0 1px 0 rgba(20,26,33,.04), 0 1px 3px rgba(20,26,33,.07);
}

.card-header
{
	background: linear-gradient(180deg,#fafbfc,#f1f3f6);
	border-bottom: 1px solid #dbe0e6;
	border-bottom: 1px solid var(--line);
	font-weight: 600;
}

.card-header.text-light { color: #1b1f24 !important; color: var(--ink) !important; }

.divider-right, .divider-top, .divider-bottom { border-color: #dbe0e6 !important; }
.divider-right, .divider-top, .divider-bottom { border-color: #dbe0e6 !important; border-color: var(--line) !important; }
hr { border-top-color: #e9edf1; }
hr { border-top-color: #e9edf1; border-top-color: var(--line-soft); }

.bg-cardpanel { background-color: #f6f8f9 !important; }
.bg-cardpanel { background-color: #f6f8f9 !important; background-color: var(--sunken) !important; }

/* ---------- controls ---------- */

.btn
{
	border-radius: 3px; border-radius: var(--radius);
	font-weight: 600;
	font-size: 13px;
}

.btn-primary
{
	background-color: #1b2fb0;
	border-color: #0d1a7d;
	background-color: #1b2fb0; background-color: var(--brand); border-color: #0d1a7d; border-color: var(--brand-deep);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active
{
	background-color: #0d1a7d; background-color: var(--brand-deep); border-color: #0d1a7d; border-color: var(--brand-deep);
}

.btn-success
{
	background-color: #2e8f52;
	border-color: #25703f;
	background-color: #2e8f52; background-color: var(--go); border-color: #25703f; border-color: var(--go-deep);
}
.btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active
{
	background-color: #25703f; background-color: var(--go-deep); border-color: #25703f; border-color: var(--go-deep);
}

.btn-light
{
	border-color: #dbe0e6;
	color: #3d454e;
	background-color: #fff; border-color: #dbe0e6; border-color: var(--line); color: #3d454e; color: var(--ink-2);
}
.btn-light:hover { background-color: #f6f8f9; color: #1b1f24; }
.btn-light:hover { background-color: #f6f8f9; background-color: var(--sunken); border-color: #c8cfd7; color: #1b1f24; color: var(--ink); }

.form-control
{
	border-color: #c8cfd7;
	border-radius: 3px; border-radius: var(--radius);
	font-size: 13.5px;
	color: #1b1f24;
	color: var(--ink);
}

.form-control:focus
{
	border-color: #1b2fb0; border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(27,47,176,.16);
}

.form-control::placeholder { color: #98a1ab; color: var(--faint); }

/* ---------- tables, tabs, pagination ---------- */

.table { color: #1b1f24; }
.table { color: #1b1f24; color: var(--ink); }
.table thead th { border-bottom: 1px solid #dbe0e6; }
.table thead th { border-bottom: 1px solid #dbe0e6; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700;
	color: #646d77;
	letter-spacing: .06em; text-transform: uppercase; color: #646d77; color: var(--muted); }
.table td, .table th { border-top-color: #e9edf1; }
.table td, .table th { border-top-color: #e9edf1; border-top-color: var(--line-soft); }

.nav-tabs { border-bottom-color: #dbe0e6; }
.nav-tabs { border-bottom-color: #dbe0e6; border-bottom-color: var(--line); }
.nav-tabs .nav-link { color: #646d77; }
.nav-tabs .nav-link { color: #646d77; color: var(--muted); font-weight: 600; border-radius: 3px 3px 0 0; border-radius: var(--radius) var(--radius) 0 0; }
.nav-tabs .nav-link:hover { color: #1b1f24; background-color: #f6f8f9; }
.nav-tabs .nav-link:hover { border-color: transparent; color: #1b1f24; color: var(--ink); background-color: #f6f8f9; background-color: var(--sunken); }
.nav-tabs .nav-link.active { color: #1b1f24; border-color: #dbe0e6 #dbe0e6 #fff; }
.nav-tabs .nav-link.active { color: #1b1f24; color: var(--ink); border-color: #dbe0e6 #dbe0e6 #fff; border-color: var(--line) var(--line) #fff; }

.page-link { color: #1a35c4; border-color: #dbe0e6; }
.page-link { color: #1a35c4; color: var(--link); border-color: #dbe0e6; border-color: var(--line); }
.page-item.active .page-link { background-color: #1b1f24; border-color: #1b1f24; }
.page-item.active .page-link { background-color: #1b1f24; background-color: var(--ink); border-color: #1b1f24; border-color: var(--ink); }

.modal-content { border: 1px solid #dbe0e6; }
.modal-content { border: 1px solid #dbe0e6; border: 1px solid var(--line); border-radius: 3px; border-radius: var(--radius); }

/* ---------- readable colour ----------
   Bootstrap's stock text and state colours do not reach WCAG AA on this
   background (text-warning lands at 1.4:1, text-info 2.6:1). These are the
   same hues walked down in lightness until they clear 4.5:1 against the page
   field, which is the darker of the two light surfaces. Bootstrap sets these
   utilities with !important, so the overrides have to match. */

.text-primary { color: #1a35c4 !important; }
.text-primary   { color: #1a35c4 !important; color: var(--fg-primary) !important; }
.text-success { color: #1e7c33 !important; }
.text-success   { color: #1e7c33 !important; color: var(--fg-success) !important; }
.text-danger { color: #d12435 !important; }
.text-danger    { color: #d12435 !important; color: var(--fg-danger) !important; }
.text-info { color: #117686 !important; }
.text-info      { color: #117686 !important; color: var(--fg-info) !important; }
.text-warning { color: #896700 !important; }
.text-warning   { color: #896700 !important; color: var(--fg-warning) !important; }
.text-secondary { color: #646d77 !important; }
.text-secondary { color: #646d77 !important; color: var(--fg-secondary) !important; }
.text-muted { color: #646d77 !important; }
.text-muted     { color: #646d77 !important; color: var(--muted) !important; }

/* placeholders were using --faint (2.6:1); --muted is the readable one */
.form-control::placeholder { color: #646d77; color: var(--muted); opacity: 1; }

/* white-on-colour buttons: the stock fills are 3.0–4.1:1 under 13px text */
.btn-primary { background-color: #1b2fb0; border-color: #0d1a7d; }
.btn-primary { background-color: #1b2fb0; background-color: var(--brand-btn); border-color: #0d1a7d; border-color: var(--brand-deep); }
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active { background-color: #0d1a7d; background-color: var(--brand-deep); border-color: #0d1a7d; border-color: var(--brand-deep); }

.btn-success { background-color: #2b854c; border-color: #25703f; }
.btn-success { background-color: #2b854c; background-color: var(--go-btn); border-color: #25703f; border-color: var(--go-deep); }
.btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active { background-color: #25703f; background-color: var(--go-deep); border-color: #25703f; border-color: var(--go-deep); }

.btn-info { background-color: #117686; border-color: #117686; }
.btn-info    { background-color: #117686; background-color: var(--fill-info); border-color: #117686; border-color: var(--fill-info); }
.btn-info:hover, .btn-info:focus { background-color: #0e5f6c; border-color: #0e5f6c; }
.btn-danger { background-color: #d12435; border-color: #d12435; }
.btn-danger  { background-color: #d12435; background-color: var(--fill-danger); border-color: #d12435; border-color: var(--fill-danger); }
.btn-danger:hover, .btn-danger:focus { background-color: #b31e2d; border-color: #b31e2d; }
/* warning keeps its yellow and takes dark text, which both reads better and
   scores higher than white on a darkened amber */
.btn-warning { background-color: #ffc107; border-color: #e0a800; color: #1b1f24; }
.btn-warning:hover, .btn-warning:focus { background-color: #e0a800; border-color: #c69500; color: #1b1f24; }

.btn-outline-primary { color: #1a35c4; border-color: #1a35c4; }
.btn-outline-primary { color: #1a35c4; color: var(--fg-primary); border-color: #1a35c4; border-color: var(--fg-primary); }
.btn-outline-primary:hover { background-color: #1b2fb0; border-color: #1b2fb0; }
.btn-outline-primary:hover { background-color: #1b2fb0; background-color: var(--fill-primary); border-color: #1b2fb0; border-color: var(--fill-primary); color: #fff; }
.btn-outline-danger { color: #d12435; border-color: #d12435; }
.btn-outline-danger { color: #d12435; color: var(--fg-danger); border-color: #d12435; border-color: var(--fg-danger); }
.btn-outline-danger:hover { background-color: #d12435; border-color: #d12435; }
.btn-outline-danger:hover { background-color: #d12435; background-color: var(--fill-danger); border-color: #d12435; border-color: var(--fill-danger); color: #fff; }
.btn-outline-secondary { color: #646d77; }
.btn-outline-secondary { color: #646d77; color: var(--fg-secondary); border-color: #b9c1ca; }
.btn-outline-secondary:hover { background-color: #646d77; border-color: #646d77; }
.btn-outline-secondary:hover { background-color: #646d77; background-color: var(--fg-secondary); border-color: #646d77; border-color: var(--fg-secondary); color: #fff; }

.badge-primary { background-color: #1b2fb0; }
.badge-primary { background-color: #1b2fb0; background-color: var(--fill-primary); }
.badge-success { background-color: #2b854c; }
.badge-success { background-color: #2b854c; background-color: var(--fill-success); }
.badge-danger { background-color: #d12435; }
.badge-danger  { background-color: #d12435; background-color: var(--fill-danger); }
.badge-info { background-color: #117686; }
.badge-info    { background-color: #117686; background-color: var(--fill-info); }
.badge-warning { background-color: #ffc107; color: #1b1f24; }

.dropdown-item.active, .dropdown-item:active { background-color: #1b2fb0; background-color: var(--fill-primary); color: #fff; }

/* inactive tabs sat at 3.9:1 */
.nav-tabs .nav-link { color: #646d77; }
.nav-tabs .nav-link { color: #646d77; color: var(--fg-secondary); }

/* ---------- filled table headers ----------
   forum.php marks its header row up as `bg-primary text-light`. The utility
   sits on the <thead>, but `.table thead th` targets the cells directly and so
   won out, leaving muted grey on a saturated fill. Any thead carrying its own
   background gets white text and soft internal dividers instead of the stock
   white borders, which read as gaps where the fill cuts off. */

.table thead[class*="bg-"] th
{
	color: #fff;
	border-color: rgba(255,255,255,.28);
	border-bottom-width: 0;
}

.table thead[class*="bg-"] th + th { border-left: 1px solid rgba(255,255,255,.22); }
.table thead[class*="bg-"].table-bordered { border: 0; }

/* Neutral headers use the theme palette rather than white-on-colour text. */
.table thead.bg-light th, .table thead.bg-white th
{
	color: #646d77; color: var(--muted);
	border-color: #dbe0e6; border-color: var(--line);
}
.table thead.bg-light th + th, .table thead.bg-white th + th
{
	border-left-color: #dbe0e6; border-left-color: var(--line);
}

/* Bootstrap's .bg-primary is its own blue; point it at the theme */
.bg-primary { background-color: #1b2fb0 !important; }
.bg-primary { background-color: #1b2fb0 !important; background-color: var(--fill-primary) !important; }
.bg-info { background-color: #117686 !important; }
.bg-info    { background-color: #117686 !important; background-color: var(--fill-info) !important; }
.bg-success { background-color: #2b854c !important; }
.bg-success { background-color: #2b854c !important; background-color: var(--fill-success) !important; }
.bg-danger { background-color: #d12435 !important; }
.bg-danger  { background-color: #d12435 !important; background-color: var(--fill-danger) !important; }