/*
 * Visual refresh layer.
 * Loaded AFTER default.css. Only overrides look & feel (color, type,
 * spacing, shadows, hover states) for existing classes/ids — it never
 * introduces new markup requirements, so every page keeps working as-is.
 */

:root {
	--yt-bg:        #f5f7f9;
	--yt-surface:    #ffffff;
	--yt-text:       #2b2f33;
	--yt-primary:    #009de0;
	--yt-primary-dk: #00415e;
	--yt-tint:       #eaf4fb;
	--yt-muted:      #6b7278;
	--yt-border:     #dde3e8;
	--yt-radius:     8px;
	--yt-shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
	--yt-font:       -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
	background: var(--yt-bg);
	color: var(--yt-text);
	font-family: var(--yt-font);
}

/* Header */
div.header {
	box-shadow: var(--yt-shadow);
}
table.Htopbar {
	background: var(--yt-primary-dk) !important;
}
table.Htopbar td, table.Htopbar td * {
	color: #ffffff !important;
}
a.yeastract {
	color: var(--yt-primary-dk) !important;
}
div.header a:link, div.header a:visited {
	color: #f2f7fa;
}

/* Left nav */
li.barTitle {
	background: var(--yt-tint) !important;
	color: var(--yt-primary-dk);
	border-left: 3px solid var(--yt-primary);
	border-radius: var(--yt-radius) var(--yt-radius) 0 0;
	letter-spacing: .02em;
}
li.bar, li.subbar {
	background: var(--yt-surface) !important;
	border: 1px solid var(--yt-border) !important;
	border-radius: var(--yt-radius);
	transition: background-color .15s ease, color .15s ease;
}
ul.bar a:link, ul.bar a:visited {
	color: var(--yt-primary-dk);
}
li.bar:hover, li.barTitleLink:hover {
	background: var(--yt-primary) !important;
}
li.bar:hover a, li.bar:hover a:link, li.bar:hover a:visited {
	color: #fff;
}
#quicksearch input[type="text"] {
	border: 1px solid var(--yt-border);
	border-radius: var(--yt-radius);
	padding: 6px 8px;
	font-family: var(--yt-font);
}

/* Content tables */
table.center, table.body {
	border-radius: var(--yt-radius);
}
th {
	background-color: var(--yt-tint) !important;
	color: var(--yt-primary-dk);
	font-weight: 600;
	letter-spacing: .02em;
	border-bottom: 2px solid var(--yt-primary);
}
td {
	background: var(--yt-surface);
}
table.Hlogos td, table.Htopbar td {
	background: transparent;
}
table[border="1"] {
	border-color: var(--yt-border) !important;
	box-shadow: var(--yt-shadow);
}

/* Buttons / inputs used across forms */
input[type="submit"], input[type="button"], button {
	background: var(--yt-primary);
	color: #fff;
	border: none;
	border-radius: var(--yt-radius);
	padding: 6px 14px;
	cursor: pointer;
	transition: background-color .15s ease;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover {
	background: var(--yt-primary-dk);
}
select, input[type="text"], input[type="number"] {
	border: 1px solid var(--yt-border);
	border-radius: 4px;
	padding: 4px 6px;
}

/* Footer */
div.footer {
	color: var(--yt-muted);
}

/* Back to top: no gray box, hidden until scrolled (toggled via yeastract.js) */
div.backTop {
	border: none !important;
	background: transparent !important;
	display: none;
}
div.backTop a {
	color: var(--yt-primary-dk);
}
div.backTop.show {
	display: block;
}

/* Small-screen tweak: drop the sponsor logos before things get cramped */
@media (max-width: 900px) {
	table.Hlogos td.headerRight {
		display: none;
	}
}

/* Very small screens: let the fixed header wrap instead of clipping */
@media (max-width: 700px) {
	table.Hlogos, table.Htopbar {
		display: block;
	}
	td.headerLeft, td.headerCenter, td.headerRight {
		display: block;
		width: 100% !important;
		text-align: center !important;
	}
}