/* =========================================================================
   TechWafer brand layer for the bottleneck calculator.

   The calculator is a separate Laravel app, so it cannot inherit the WordPress
   block theme. This sheet re-declares the same design tokens and the same
   brutalist-editorial language (2px ink borders, hard offset shadows, Anton
   uppercase display type, hot-pink accent) on top of the app's existing Vite
   bundle. Loaded LAST in layouts/master.blade.php so it wins on specificity
   ties without needing a Vite rebuild on the server.

   Tokens mirror theme-redesign/techwafer/assets/redesign.css - keep in sync.
   ========================================================================= */

/* ---- Fonts: same families and same host as the WP theme ---------------- */
@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.bunny.net/anton/files/anton-latin-400-normal.woff2) format('woff2');
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.bunny.net/hanken-grotesk/files/hanken-grotesk-latin-400-normal.woff2) format('woff2');
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://fonts.bunny.net/hanken-grotesk/files/hanken-grotesk-latin-600-normal.woff2) format('woff2');
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://fonts.bunny.net/hanken-grotesk/files/hanken-grotesk-latin-700-normal.woff2) format('woff2');
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
	--tw-accent:       hsl(330 84% 44%);   /* deepened for AA both directions */
	--tw-accent-hover: hsl(330 84% 38%);
	--tw-accent-soft:  hsl(330 84% 96%);
	--tw-brand-pink:   #e6197f;
	--tw-ink:          hsl(222 47% 11%);
	--tw-muted:        hsl(215 20% 40%);
	--tw-faint:        hsl(215 20% 65%);
	--tw-line:         hsl(214 22% 90%);
	--tw-surface:      hsl(210 20% 98%);
	--tw-card:         hsl(0 0% 100%);
	--tw-good:         hsl(158 74% 36%);
	--tw-warn:         hsl(35 92% 42%);
	--tw-bad:          hsl(0 72% 47%);

	--tw-font-display: "Anton", "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
	--tw-font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--tw-edge:   2px solid var(--tw-ink);
	--tw-hard:   6px 6px 0 var(--tw-ink);
	--tw-hard-sm: 4px 4px 0 var(--tw-ink);

	/* Remap the app's own legacy variables so untouched inline styles inherit
	   the brand rather than the old blue/grey palette. */
	--primary:      var(--tw-accent);
	--primary-dark: var(--tw-accent-hover);
	--text-muted:   var(--tw-muted);
	--danger-text:  var(--tw-bad);
}

/* ---- Base -------------------------------------------------------------- */
body {
	font-family: var(--tw-font-body);
	color: var(--tw-ink);
	background: var(--tw-card);
	-webkit-font-smoothing: antialiased;
}

/* Anton is a condensed display face. It carries the brand at large sizes, but at
   UI sizes the counters close up and the letters visually merge - so it is kept
   for the big display moments only, with tracking added for air. Anything smaller
   uses Hanken Grotesk 700, which holds the same uppercase editorial voice while
   staying legible. */
h1, h2 {
	font-family: var(--tw-font-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .025em;
	line-height: 1.08;
	color: var(--tw-ink);
}

h3, h4, h5, h6 {
	font-family: var(--tw-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1.28;
	color: var(--tw-ink);
}

a { color: var(--tw-accent); }
a:hover { color: var(--tw-accent-hover); }

.container {
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* Shared card treatment - the most identifying element of the brand. ONLY
   top-level containers belong here. .gauge-container, .status-box, .component-box
   and .fps-item all live inside one of these, so giving them the same border and
   hard shadow nested a card inside a card. Each gets its own lighter treatment
   further down. */
.calculator-card,
.content-card,
.result-header {
	background: var(--tw-card);
	border: var(--tw-edge);
	border-radius: 0;
	box-shadow: var(--tw-hard);
	padding: 28px;
}

/* ---- Header ------------------------------------------------------------ */
.navbar {
	background: var(--tw-card);
	border-top: 3px solid var(--tw-brand-pink);
	border-bottom: var(--tw-edge);
	box-shadow: none;
	position: sticky;
	top: 0;
	z-index: 900;
}

.navbar-container {
	max-width: 1120px;
	margin-inline: auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.navbar-container .logo img { max-height: 34px; width: auto; display: block; }

.nav-links {
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
	margin-inline-start: auto;
}

.nav-links a {
	font-family: var(--tw-font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--tw-muted);
	text-decoration: none;
	padding-block: 4px;
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
}

.nav-links a:hover,
.nav-links a:focus-visible {
	color: var(--tw-ink);
	border-bottom-color: var(--tw-brand-pink);
}

.nav-actions { display: flex; align-items: center; gap: 12px; }

.nav-actions .form-select,
.search-container input[type="search"] {
	height: 38px;
	border: var(--tw-edge);
	border-radius: 0;
	font-size: 13px;
	padding: 6px 12px;
	background: var(--tw-card);
}

.search-container { position: relative; }
.search-container input[type="search"] { width: 210px; }

#search-results {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	display: none;
	z-index: 1000;
	max-height: 320px;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--tw-card);
	border: var(--tw-edge);
	border-top: 0;
	box-shadow: var(--tw-hard-sm);
}

#search-results li { border-bottom: 1px solid var(--tw-line); }
#search-results li:last-child { border-bottom: 0; }
#search-results li:hover { background: var(--tw-accent-soft); }

#search-results a {
	display: block;
	padding: 10px 12px;
	font-family: var(--tw-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--tw-ink);
	text-decoration: none;
}

.search-vs {
	font-size: 12px;
	font-weight: 400;
	color: var(--tw-faint);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.search-empty {
	padding: 12px;
	font-family: var(--tw-font-body);
	font-size: 14px;
	color: var(--tw-muted);
}

/* Visually hidden but available to screen readers. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mobile-menu-btn {
	display: none;
	background: var(--tw-card);
	border: var(--tw-edge);
	border-radius: 0;
	width: 38px;
	height: 38px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--tw-ink);
}

/* ---- Hero -------------------------------------------------------------- */
.hero-section {
	background: var(--tw-surface);
	border-bottom: var(--tw-edge);
	padding: 56px 0 48px;
	text-align: center;
}

.hero-title {
	font-family: var(--tw-font-display);
	font-size: clamp(2.25rem, 6vw, 3.75rem);
	line-height: .98;
	letter-spacing: .025em;
	text-transform: uppercase;
	margin: 0 0 14px;
	color: var(--tw-ink);
}

/* Pink underscore under the hero title, echoing the WP section rules. */
.hero-title::after {
	content: "";
	display: block;
	width: 92px;
	height: 6px;
	background: var(--tw-brand-pink);
	margin: 18px auto 0;
}

.hero-subtitle {
	font-family: var(--tw-font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--tw-muted);
	max-width: 62ch;
	margin-inline: auto;
}

/* ---- Forms ------------------------------------------------------------- */
/* Deliberately no negative-margin overlap into the hero: the hero and the first
   container are siblings whose spacing varies per template, so an overlap that
   looks right on the calculator clips on the listing. Plain spacing instead. */
.hero-section + .container { padding-top: 40px; }
.calculator-card { position: relative; z-index: 2; }

.form-group { margin-bottom: 22px; }

.form-label {
	display: block;
	font-family: var(--tw-font-body);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--tw-ink);
	margin-bottom: 8px;
}

.form-select,
select.form-select {
	width: 100%;
	height: 46px;
	border: var(--tw-edge);
	border-radius: 0;
	background: var(--tw-card);
	font-family: var(--tw-font-body);
	font-size: 15px;
	color: var(--tw-ink);
	padding: 8px 12px;
}

.form-select:focus,
.form-select:focus-visible {
	outline: none;
	box-shadow: var(--tw-hard-sm);
	border-color: var(--tw-ink);
}

.btn-primary,
a.btn-primary,
button.btn-primary {
	display: inline-block;
	width: 100%;
	font-family: var(--tw-font-body);
	font-weight: 700;
	font-size: 1.0625rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #fff;
	background: var(--tw-accent);
	border: var(--tw-edge);
	border-radius: 0;
	box-shadow: var(--tw-hard-sm);
	padding: 15px 24px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: transform .12s ease, box-shadow .12s ease, background-color .15s;
}

.btn-primary:hover {
	background: var(--tw-accent-hover);
	color: #fff;
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--tw-ink);
}

.btn-primary:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--tw-ink); }

/* Select2 - the app's CPU/GPU pickers. Match the native selects above. */
.select2-container .select2-selection--single {
	height: 46px !important;
	border: var(--tw-edge) !important;
	border-radius: 0 !important;
	padding: 8px 12px !important;
	background: var(--tw-card);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 28px !important;
	font-family: var(--tw-font-body);
	font-size: 15px !important;
	color: var(--tw-ink) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; }
.select2-dropdown {
	border: var(--tw-edge) !important;
	border-radius: 0 !important;
	box-shadow: var(--tw-hard-sm) !important;
}
.select2-search__field { border: var(--tw-edge) !important; border-radius: 0 !important; }
.select2-results__option { font-family: var(--tw-font-body); font-size: 14px; padding: 9px 12px; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--tw-accent) !important;
	color: #fff !important;
}

/* ---- Result / listing cards -------------------------------------------- */
.product-list-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
}

.product-card {
	background: var(--tw-card);
	border: var(--tw-edge);
	border-radius: 0;
	box-shadow: var(--tw-hard-sm);
	padding: 16px;
	height: 100%;
	transition: transform .12s ease, box-shadow .12s ease;
}

a:hover > .product-card {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--tw-brand-pink);
}

.product-card h4 {
	font-family: var(--tw-font-body);
	font-weight: 700;
	font-size: 14px !important;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--tw-ink) !important;
	margin-bottom: 6px !important;
}

/* ---- Result page ------------------------------------------------------- */
.result-page-container { padding-block: 40px; }

/* A flex row holding [CPU] VS [GPU], not a heading. It previously inherited
   font-family: Anton + text-transform: uppercase from here, which cascaded into
   the CPU and GPU names below - long part numbers set in a condensed display face
   is exactly where the letters ran together. Typography left to the children. */
.result-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-bottom: 28px;
}

.component-details h3 { font-size: 12px; letter-spacing: .09em; color: var(--tw-muted); margin: 0 0 4px; }

.component-details p {
	font-family: var(--tw-font-body);
	font-weight: 600;
	font-size: 15px;
	text-transform: none;
	color: var(--tw-ink);
	margin: 0;
}

.result-grid { display: grid; gap: 28px; }

.vs-badge {
	display: inline-block;
	font-family: var(--tw-font-body);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #fff;
	background: var(--tw-ink);
	padding: 4px 10px;
}

.status-title {
	font-family: var(--tw-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* Tinted strip with a colour-coded left rule, matching the app's original intent.
   It sits inside a .content-card, so it must not carry a border or hard shadow. */
.status-box {
	border: 0;
	border-left: 4px solid currentColor;
	border-radius: 0;
	box-shadow: none;
	padding: 16px 20px;
	margin-bottom: 20px;
}

.status-good { background: hsl(158 74% 95%); color: var(--tw-good); }
.status-bad  { background: hsl(0 72% 96%);   color: var(--tw-bad); }
.status-box p { color: var(--tw-ink); }

.gauge-container { box-shadow: none; border: 0; padding: 0; background: none; }

/* Sits absolutely inside the 200x100 half-gauge, so it has a hard width budget.
   The app's own size (32px) is the one that fits; a clamp up to 4rem overflowed
   the dial and covered the arc. Anton is condensed, so it reads slightly smaller
   than the original 800-weight digits at the same px - nudged up marginally. */
.gauge-value {
	font-family: var(--tw-font-display);
	font-size: 34px;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--tw-ink);
	white-space: nowrap;
}

.gauge-label {
	font-family: var(--tw-font-body);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--tw-muted);
}

.progress-bar-bg {
	background: var(--tw-surface);
	border: var(--tw-edge);
	border-radius: 0;
	height: 22px;
	overflow: hidden;
}

.progress-bar-fill {
	background: var(--tw-accent);
	height: 100%;
	border-radius: 0;
	transition: width .4s ease;
}

/* Inline note / tip callout. Replaces hardcoded #eff6ff + #1e40af from the old
   palette, which read as a stray blue block against the pink-and-ink brand. */
.tw-note {
	background: var(--tw-accent-soft);
	border-left: 4px solid var(--tw-accent);
	padding: 14px 16px;
	margin-top: 20px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--tw-ink);
}

.tw-note strong {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.tw-rule { border: 0; border-top: 1px solid var(--tw-line); margin: 20px 0; }

.component-box { display: flex; gap: 14px; align-items: center; padding: 18px; }
.component-icon { font-size: 26px; color: var(--tw-accent); }
.component-details strong { font-family: var(--tw-font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

/* ---- FPS estimates block ----------------------------------------------- */
/* A flex row inside a .content-card, one per game - not a card. Giving each row a
   border and hard shadow stacked five shadowed boxes inside one box. */
.fps-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--tw-line);
	box-shadow: none;
	padding: 12px 0;
	margin-bottom: 0;
}

.fps-item:last-child { border-bottom: 0; }
.fps-img { border: 2px solid var(--tw-ink); border-radius: 0; }

.fps-name {
	font-family: var(--tw-font-body);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 1.15;
	color: var(--tw-ink);
}

.fps-badge {
	font-family: var(--tw-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	border: var(--tw-edge);
	border-radius: 0;
	padding: 3px 9px;
	font-size: 12px;
	color: var(--tw-ink);
	background: var(--tw-card);
}

.fps-green  { background: hsl(158 74% 92%); }
.fps-yellow { background: hsl(35 92% 90%); }
.fps-red    { background: hsl(0 72% 93%); }

/* ---- Expanded result-page content blocks ------------------------------- */
.tw-block-title {
	font-family: var(--tw-font-body);
	font-weight: 700;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1.3;
	margin: 0 0 6px;
}

.tw-block-intro {
	font-size: 13px;
	line-height: 1.6;
	color: var(--tw-muted);
	margin: 0 0 18px;
	max-width: 68ch;
}

.tw-sub {
	font-family: var(--tw-font-body);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--tw-muted);
	margin: 22px 0 12px;
}

.tw-sub:first-of-type { margin-top: 0; }

/* Wide matrix on a narrow screen: scroll rather than crush the columns. */
.tw-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tw-row-head {
	background: var(--tw-surface) !important;
	color: var(--tw-ink) !important;
	font-family: var(--tw-font-body);
	font-weight: 700;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
}

.tw-fps { font-weight: 700; font-size: 13px; white-space: nowrap; }

.tw-lim {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--tw-muted);
	margin-left: 6px;
}

.tw-nodata { color: var(--tw-faint); }

.tw-row-current { background: var(--tw-accent-soft) !important; }

.tw-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	background: var(--tw-accent);
	color: #fff;
	padding: 2px 6px;
	margin-left: 6px;
}

.tw-callouts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}

.tw-callout {
	border: 2px solid var(--tw-line);
	border-left: 4px solid var(--tw-ink);
	padding: 14px 16px;
}

.tw-callout--good { border-left-color: var(--tw-good); }
.tw-callout--bad  { border-left-color: var(--tw-bad); }

.tw-callout__label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--tw-muted);
	margin-bottom: 4px;
}

.tw-callout strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--tw-ink);
}

.tw-callout__meta {
	display: block;
	font-size: 12px;
	line-height: 1.5;
	color: var(--tw-muted);
	margin-top: 4px;
}

/* ---- Tables ------------------------------------------------------------ */
.custom-table {
	width: 100%;
	border-collapse: collapse;
	border: var(--tw-edge);
	font-family: var(--tw-font-body);
	font-size: 14px;
}

.custom-table th {
	font-family: var(--tw-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: 12px;
	text-align: left;
	background: var(--tw-ink);
	color: #fff;
	padding: 11px 14px;
}

.custom-table td { padding: 11px 14px; border-top: 1px solid var(--tw-line); }
.custom-table tbody tr:nth-child(even) { background: var(--tw-surface); }

/* ---- Pagination -------------------------------------------------------- */
.custom-pagination { gap: 8px; flex-wrap: wrap; }

.custom-pagination a,
.custom-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 12px;
	border: var(--tw-edge);
	border-radius: 0;
	font-family: var(--tw-font-body);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	color: var(--tw-ink);
	background: var(--tw-card);
}

.custom-pagination a:hover { background: var(--tw-accent-soft); }

.custom-pagination .active span,
.custom-pagination span[aria-current="page"] {
	background: var(--tw-accent);
	color: #fff;
	box-shadow: var(--tw-hard-sm);
}

/* ---- Footer ------------------------------------------------------------ */
.footer {
	background: var(--tw-ink);
	color: #fff;
	border-top: 3px solid var(--tw-brand-pink);
	margin-top: 72px;
	padding: 52px 20px 0;
}

.footer-content {
	max-width: 1120px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 34px;
}

.footer-column h4 {
	font-family: var(--tw-font-body);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #fff;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--tw-brand-pink);
	display: inline-block;
}

.footer-column ul { list-style: none; margin: 0; padding: 0; }
.footer-column li { margin-bottom: 9px; }

.footer-column a {
	font-family: var(--tw-font-body);
	font-size: 14px;
	color: hsl(215 20% 78%);
	text-decoration: none;
	transition: color .15s;
}

.footer-column a:hover { color: var(--tw-brand-pink); }
.footer-column a i { width: 18px; margin-right: 6px; }

.footer-bottom {
	max-width: 1120px;
	margin: 40px auto 0;
	padding: 20px 0 24px;
	border-top: 1px solid hsl(215 20% 28%);
	text-align: center;
}

.footer-bottom p {
	font-family: var(--tw-font-body);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: hsl(215 20% 62%);
	margin: 0;
}

/* ---- Back-to-top ------------------------------------------------------- */
#toTop {
	border: var(--tw-edge);
	border-radius: 0;
	background: var(--tw-accent);
	box-shadow: var(--tw-hard-sm);
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
	.mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; }

	.nav-links {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		flex-direction: column;
		gap: 0;
		background: var(--tw-card);
		border-bottom: var(--tw-edge);
		padding: 8px 20px 16px;
	}

	.nav-links.active { display: flex; }
	.nav-links li { border-bottom: 1px solid var(--tw-line); }
	.nav-links a { display: block; padding: 13px 0; border-bottom: 0; }

	.search-container { display: none; }

	.calculator-card,
	.content-card { padding: 20px; box-shadow: var(--tw-hard-sm); }

	.hero-section { padding: 40px 0 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.btn-primary,
	.product-card,
	.progress-bar-fill { transition: none; }

	.btn-primary:hover,
	a:hover > .product-card { transform: none; }
}

/* Inline bar inside the resolution table - narrower than the standalone gauge bar. */
.tw-bar { width: 110px; height: 8px; margin-top: 5px; }