/*
 UI variant 19: same look as before (pixel art, blue and white, scroll banner), but easier to read.
 Loaded after site.layout.css and site.responsive.css, so it wins. Delete this one file to go back to the old look
 (the icons are inline SVG from assets/images/icons/paravia-icons.svg and stay either way).
   - text 15px dark instead of 12px grey/blue
   - pixel icons drawn 24-28px, crisp
   - vertical sizes about 25% tighter: paddings, row heights, margins
   - thin grey panels with blue tabs, rounded blue advisor bubble, bigger right column and map
*/

:root {
	--ink: #14213d;
	--lab: #2a3550;
	--blue: #0b5aa2;
	--line: #bbb;
}

body { font-size: 15px; color: var(--ink); line-height: 1.3; }
p { padding: 6px 8px; }

/* ---- icons ------------------------------------------------------------------------------------- */
svg.pi { display: inline-block; vertical-align: middle; image-rendering: pixelated; flex: none; }

/* ---- header / menu ------------------------------------------------------------------------------ */
.main_menu a { font-size: 15px; padding: 5px 12px; }
ul.dropdown li a { padding-top: 5px; padding-bottom: 5px; }
#logo img, #logo { max-height: 52px; width: auto; }

/* ---- stat strip: eleven boxes (every purchase, plus the basics), wrapping onto two rows ------------------------------------------ */
.stat_container,
#stat_banner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	height: auto;
	padding: 0;
	margin: 3px 0 8px;
}
.stat_container:before, .stat_container:after { display: none; }
.stat_container > img { display: none; }
.stat_container .stat_box {
	position: static;
	margin: 0;
	flex: 1 1 96px;
	min-width: 0;
	width: auto;
	height: auto;
	min-height: 30px;
	padding: 1px 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 2px solid #666;
	background: #fff;
	color: var(--ink);
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
}
.stat_container .stat_box b { font-weight: 700; }

@media (max-width: 1039px) {
	.stat_container, #stat_banner { flex-wrap: wrap; padding: 0; }
	.stat_container:before, .stat_container:after { display: none; }
	.stat_container .stat_box { flex: 1 1 96px; }
}
@media (max-width: 599px) {
	.stat_container .stat_box { flex: 1 1 30%; font-size: 15px; }
}

/* ---- advisor ------------------------------------------------------------------------------------- */
#wrap_advisor { width: 100% !important; margin-bottom: 0 !important; }
#first { width: 40px !important; margin-top: 4px !important; top: 0 !important; }
#first img { width: 36px; height: 34px; image-rendering: pixelated; }
.triangle-right,
.triangle-right.left {
	padding: 7px 14px;
	margin: 6px 0 10px;
	background: var(--blue);
	font-family: 'PT Sans', Verdana, sans-serif;
	font-size: 16px;
	line-height: 1.3;
	border-radius: 12px;
}
.triangle-right.left { margin-left: 46px; }
.triangle-right:after { border-color: var(--blue) transparent; }
.triangle-right.left:after { top: 10px; }

/* ---- panels: thin grey border, blue tab -------------------------------------------------------------- */
#tableLeft, #tableRight, #tableFull, #tableStat { margin-top: 0; margin-bottom: 9px; }
#tableLeft .ajaxtitle, #tableRight .ajaxtitle, #tableFull .ajaxtitle, #tableStat .ajaxtitle,
#chatbox .ajaxtitle {
	font-family: 'PT Sans', Verdana, sans-serif;
	font-size: 16px;
	color: #0066cc;
	padding: 3px 12px;
}
#tableLeft .acontent, #tableRight .acontent, #tableFull .acontent, #tableStat .acontent,
#chatbox .acontent {
	padding: 6px 12px;
	border-color: var(--line);
}
#tableLeft #ajax, #tableRight #ajax, #tableFull #ajax, #tableStat #ajax { margin-bottom: 15px; }

/* report tables: readable size, tighter rows */
#tableLeft #msg, #tableRight #msg, #tableFull #msg {
	font-size: 15px;
	line-height: 1.3;
	color: var(--ink);
}
#tableLeft #msg td, #tableRight #msg td, #tableFull #msg td,
#tableLeft td, #tableRight td, #tableFull td {
	font-size: 15px;
	line-height: 1.3;
	padding: 2px 6px;
	color: var(--ink);
}
#tableLeft #msg th, #tableRight #msg th, #tableFull #msg th {
	font-size: 15px;
	font-weight: 700;
	padding: 2px 6px 4px;
	color: var(--lab);
}
#tableLeft #msg td[align=right], #tableRight #msg td[align=right] { color: var(--lab); }
table tbody tr td { border-bottom: 1px dotted #c3c9d8; }
table tbody tr:last-child td { border-bottom: 0; }

/* buy / sell / change links: icon plus words, with a bit of a button feel */
#msg td > a[href*="trans="] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 3px 12px;
	border: 1px solid var(--line);
	background: #f7fafd;
	color: var(--blue);
	font-weight: 700;
	text-decoration: none;
}
#msg td > a[href*="trans="]:hover { background: #e6f1fb; border-color: var(--blue); }

/* ---- form controls ----------------------------------------------------------------------------------- */
input[type=text], input[type=number], input[type=email], input[type=password], select, textarea {
	font-size: 15px;
	color: var(--ink);
	padding: 2px 6px;
}
input[type=text], input[type=number] { min-height: 28px; }

/* grey tick buttons, a little larger */
a.button {
	font-size: 13px;
	line-height: 1.2;
	padding: 4px 8px 4px 24px;
	min-height: 26px;
}

/* ---- right column and map ------------------------------------------------------------------------------ */
@media (min-width: 1100px) {
	#leftcolumn { width: calc(100% - 492px); }
	#rightcolumn { width: 470px; font-size: 14px; }
	#rightcolumn td { font-size: 14px; }
}
#rightcolumn { color: var(--ink); }
#chat-area { height: 120px; }
#chatbox, #chat-area, #chat-area p { font-size: 14px; line-height: 1.3; }
#chat-area p { padding: 2px 4px; }
#sendie { font-size: 15px; }

/* the map keeps its pixel look, drawn without smoothing */
#map_container img { image-rendering: auto; }   /* a fractional scale looks uneven when drawn pixel-exact */

/* the purchase and tax lists were 40-50% wide tables; give them room so labels and prices stay on one line */
#tableLeft #msg table[width], #tableRight #msg table[width], #tableFull #msg table[width] {
	width: 100%;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- number steppers (includes/javascript/stepper.js) ----------------------------------------------- */
.stepper { display: inline-flex; align-items: stretch; vertical-align: middle; }
.stepper button {
	width: 38px;
	min-height: 34px;
	border: 2px solid #333;
	background: #fff;
	color: var(--ink);
	font: 700 22px/1 'PT Sans', Verdana, sans-serif;
	cursor: pointer;
	padding: 0;
}
.stepper button:hover { background: #e6f1fb; }
.stepper button:active { background: #cfe3f7; }
.stepper input[type=text] {
	width: 110px;
	min-height: 34px;
	border: 2px solid #333;
	border-left: 0;
	border-right: 0;
	text-align: center;
	font-size: 17px;
	font-weight: 700;
}
@media (max-width: 599px) {
	.stepper button { width: 46px; min-height: 44px; }
	.stepper input[type=text] { min-height: 44px; width: 100px; }
}

/* ---- stats page: report switcher as tabs --------------------------------------------------------------- */
.statnav { clear: both; width: 100%; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.statnav a {
	padding: 4px 12px;
	border: 1px solid var(--line);
	background: #fff;
	color: #0066cc;
	font-weight: 700;
	text-decoration: none;
}
.statnav a:hover { background: #e6f1fb; }
.statnav a.on { background: var(--blue); border-color: #0a2a4a; color: #fff; }
@media (max-width: 599px) {
	.statnav a { flex: 1 1 40%; text-align: center; padding: 8px 10px; }
}

/* ---- report tables: the title row is a real caption; images keep their shape when the column is narrower ---- */
#msg caption { caption-side: top; text-align: center; font-weight: 700; padding: 3px 0; }
#wrapper img[height], #wrapper_trans img[height] { height: auto; }

/* stats charts always on white */
.highcharts-figure, #container, .highcharts-container { background: #fff; color-scheme: light; }

/* ---- the band under the menu: two stray <br> tags inside the menu bar made it taller than its links -------- */
.main_menu br { display: none; }
.main_menu { height: auto; }
.main_menu:after { content: ''; display: block; clear: both; }

/* the city map panel had a fixed 375px width, so the map could never grow with the column */
#tableRight .acontentNoPad, #tableLeft .acontentNoPad, #tableFull .acontentNoPad { width: 100%; }
#tableRight .acontentNoPad #msg { width: 100%; }

/* bullet lists inside panels: the global reset removed the indent, so the bullets hung outside the box */
#tableLeft #msg ul, #tableRight #msg ul, #tableFull #msg ul { margin: 6px 0 6px 0; padding-left: 26px; list-style: disc outside; }
#tableLeft #msg li, #tableRight #msg li, #tableFull #msg li { margin-bottom: 4px; }

/* ---- contact form ---------------------------------------------------------------------------------------- */
.contactform input[type=text], .contactform input[type=email], .contactform textarea {
	width: 100%;
	max-width: 520px;
	border: 1px solid #999;
	padding: 5px 8px;
	font: inherit;
}
.contactform textarea { min-height: 150px; resize: vertical; }
.contactform label { font-weight: 700; }
/* the field only a script fills in: off screen, not display:none (some bots skip hidden fields) */
.cf-hp { position: absolute !important; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.contactform button[type=submit] { font-size: 15px; font-weight: 700; padding: 6px 20px; min-height: 36px; cursor: pointer; }

.regnote { margin: 4px 0 6px 0; padding-left: 26px; list-style: disc outside; }
.regnote li { margin-bottom: 4px; }

/* ---- matchmaker time fields: framed so the browser's (unstyleable) picker pops over something it contrasts with -- */
.dtp-frame { background: #dbe9f7; border: 2px solid #0b5aa2; padding: 8px 12px; margin: 6px 0 12px; max-width: 520px; }
.dtp-frame p { margin: 4px 0; padding: 2px 0; }
.dtp-frame label { display: inline-block; min-width: 64px; font-weight: 700; }
input.dtp {
	color-scheme: light;
	accent-color: #0b5aa2;
	font: inherit;
	padding: 5px 8px;
	border: 2px solid #0b5aa2;
	background: #fff;
	box-shadow: 0 2px 0 rgba(10, 42, 74, .35);
	min-height: 36px;
}
input.dtp:focus { outline: 3px solid #f2c230; outline-offset: 1px; }

/* ---- matchmaker time fields: framed so the browser's (unstyleable) picker pops over something it contrasts with -- */
.dtp-frame { background: #dbe9f7; border: 2px solid #0b5aa2; padding: 8px 12px; margin: 6px 0 12px; max-width: 520px; }
.dtp-frame p { margin: 4px 0; padding: 2px 0; }
.dtp-frame label { display: inline-block; min-width: 64px; font-weight: 700; }
input.dtp {
	color-scheme: light;
	accent-color: #0b5aa2;
	font: inherit;
	padding: 5px 8px;
	border: 2px solid #0b5aa2;
	background: #fff;
	box-shadow: 0 2px 0 rgba(10, 42, 74, .35);
	min-height: 36px;
}
input.dtp:focus { outline: 3px solid #f2c230; outline-offset: 1px; }


/* ---- smoother page changes ---------------------------------------------------------------------------
   Browsers that support it cross-fade from one page to the next instead of flashing. The background picture and the
   header strip are named so they stay put while only the page content fades. Others simply load as before. */
@view-transition { navigation: auto; }
img.bg { view-transition-name: pv-bg; }
#wrapper_trans { view-transition-name: pv-header; }
::view-transition-group(root) { animation-duration: 140ms; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* chat box before anybody else is in the game */
#sendie.chat-off, #sendie:disabled { background: #e9ebee; color: #888; cursor: not-allowed; border-color: #c4c8cc; }
#sendie.chat-off::placeholder { color: #8a8f95; }