/* Wheel size calculator. Scoped to .wsc so the 139 crawled pages keep the
   original look. Same surface language as the other tools. */

.wsc {
	--wsc-blue:#0099CC; --wsc-blue-dk:#0483ae; --wsc-blue-soft:#eaf7fc;
	--wsc-dark:#151a1f; --wsc-grey:#5d6773; --wsc-grey-soft:#8a95a1;
	--wsc-line:#e3e8ee; --wsc-line-soft:#eef1f5; --wsc-bg:#f6f8fa;
	--wsc-r:11px; --wsc-r-lg:16px;
	--wsc-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (min-width:640px) {
	section.wsc.bdr {
		border:1px solid var(--wsc-line);
		border-radius:var(--wsc-r-lg);
		box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 22px -12px rgba(16,24,40,.16);
		overflow:hidden;
	}
}
.wsc .border-bottom { border-color:var(--wsc-line-soft) !important; }
.wsc h2 { letter-spacing:-.012em; }
.wsc h3 { letter-spacing:-.006em; margin-bottom:.35rem; }
.wsc article p, .wsc article li { line-height:1.62; color:#333a41; }

/* ---- fields ------------------------------------------------------------ */
.wsc-label {
	display:block; margin-bottom:6px; font-size:11px; font-weight:700;
	color:var(--wsc-grey); text-transform:uppercase; letter-spacing:.055em;
}
.wsc-hint { display:block; margin-top:5px; font-size:12px; color:var(--wsc-grey-soft); line-height:1.45; }

.wsc .form-control, .wsc .form-select {
	height:46px; font-size:15px; font-weight:600; border:1px solid var(--wsc-line);
	border-radius:var(--wsc-r); color:var(--wsc-dark); background-color:#fff;
	transition:border-color .16s, box-shadow .16s;
}
.wsc .form-select { font-weight:500; }
.wsc .form-control:focus, .wsc .form-select:focus {
	border-color:var(--wsc-blue); box-shadow:0 0 0 3px rgba(0,153,204,.14);
}
.wsc .input-group-text {
	border:1px solid var(--wsc-line); border-left:0; background:var(--wsc-bg);
	color:var(--wsc-grey-soft); font-size:12.5px; font-weight:600;
	border-radius:0 var(--wsc-r) var(--wsc-r) 0; min-width:44px; justify-content:center;
}
.wsc .input-group > .form-control { border-top-right-radius:0; border-bottom-right-radius:0; }
.wsc .input-group > .form-control:focus { z-index:3; }
.wsc input[type="number"]::-webkit-outer-spin-button,
.wsc input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.wsc input[type="number"] { -moz-appearance:textfield; }
.wsc input[type="range"] { width:100%; accent-color:var(--wsc-blue); height:38px; }

.wsc-units { display:inline-flex; gap:3px; padding:3px; background:var(--wsc-bg);
	border:1px solid var(--wsc-line-soft); border-radius:9px; }
.wsc-units button {
	border:0; background:transparent; color:var(--wsc-grey); cursor:pointer;
	font-size:12px; font-weight:700; padding:4px 11px; border-radius:6px;
	transition:background .16s, color .16s, box-shadow .16s;
}
.wsc-units button[aria-pressed="true"] {
	background:#fff; color:var(--wsc-blue);
	box-shadow:0 1px 2px rgba(16,24,40,.10), 0 0 0 1px rgba(16,24,40,.04);
}

.wsc-head { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:10px; }
.wsc-head h2 { font-size:15px !important; font-weight:700; color:var(--wsc-dark); margin:0; }
.wsc-head-x { margin:0 0 0 auto; }

/* ---- the headline answer ------------------------------------------------- */
.wsc-hero {
	position:relative; margin-top:18px; padding:20px 18px 16px;
	border-radius:var(--wsc-r-lg); background:#fff; border:1px solid var(--wsc-line);
	box-shadow:0 1px 2px rgba(16,24,40,.04), 0 14px 26px -20px rgba(16,24,40,.4);
	overflow:hidden;
}
.wsc-hero::before {
	content:""; position:absolute; inset:0 0 auto; height:3px;
	background:linear-gradient(90deg, var(--wsc-blue), #58cbe8);
}
.wsc-hero-lab {
	margin:0 0 6px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
	text-transform:uppercase; color:var(--wsc-grey);
}
.wsc-hero-n { font-size:46px; font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--wsc-dark); }
.wsc-hero-u { font-size:16px; font-weight:600; color:var(--wsc-grey-soft); margin-left:4px; letter-spacing:0; }
.wsc-hero-alt { margin:6px 0 0; font-size:13px; font-weight:600; color:var(--wsc-grey-soft); }

/* ---- the three secondary figures ------------------------------------------ */
.wsc-stats {
	display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
	margin:12px 0 0; background:var(--wsc-line-soft);
	border:1px solid var(--wsc-line-soft); border-radius:var(--wsc-r); overflow:hidden;
}
.wsc-stats > div { background:#fff; padding:12px 14px; }
.wsc-stats dt {
	margin:0; font-size:10px; font-weight:700; letter-spacing:.06em;
	text-transform:uppercase; color:var(--wsc-grey-soft);
}
.wsc-stats dd { margin:4px 0 0; font-size:18px; font-weight:700; color:var(--wsc-dark); }
.wsc-stats p { margin:2px 0 0; font-size:11.5px; color:var(--wsc-grey-soft); line-height:1.35; }

/* ---- the accuracy check ---------------------------------------------------- */
.wsc-error {
	margin:12px 0 0; padding:11px 14px; border-radius:var(--wsc-r);
	font-size:13px; line-height:1.55;
}
.wsc-error.is-good { color:#136c3e; background:#effaf3; border:1px solid #c6ecd6; }
.wsc-error.is-warn { color:#8a5a00; background:#fff8ec; border:1px solid #f4dcae; }
.wsc-error.is-bad  { color:#95291c; background:#fdecea; border:1px solid #f6cac4; }

/* ---- the wheel ------------------------------------------------------------- */
.wsc-fig {
	margin:12px 0 0; padding:14px; background:var(--wsc-bg);
	border:1px solid var(--wsc-line-soft); border-radius:var(--wsc-r-lg);
}
.wsc-fig svg { display:block; width:100%; max-width:260px; height:auto; margin:0 auto; }
.wsc-fig figcaption { margin-top:8px; font-size:11.5px; line-height:1.5; color:var(--wsc-grey-soft); text-align:center; }
.wsc-tyre  { fill:#3d4752; }
.wsc-rim   { fill:#fff; stroke:#aab3bd; stroke-width:2; }
.wsc-spoke { stroke:#c3ccd6; stroke-width:1; }
.wsc-hub   { fill:#7b8794; }
.wsc-dim line   { stroke:var(--wsc-blue); stroke-width:1.4; }
.wsc-dim circle { fill:var(--wsc-blue); }
.wsc-dim text   {
	fill:var(--wsc-blue-dk); font-size:13px; font-weight:700; text-anchor:middle;
	paint-order:stroke; stroke:var(--wsc-bg); stroke-width:4px; stroke-linejoin:round;
}

/* ---- disclosure ------------------------------------------------------------- */
.wsc-more { margin-top:18px; border-top:1px solid var(--wsc-line-soft); }
.wsc-more > summary {
	position:relative; padding:14px 26px 14px 0; font-size:13.5px; font-weight:700;
	color:var(--wsc-grey); cursor:pointer; list-style:none; transition:color .16s;
}
.wsc-more > summary::-webkit-details-marker { display:none; }
.wsc-more > summary:hover { color:var(--wsc-blue); }
.wsc-more > summary::after {
	content:""; position:absolute; right:4px; top:50%; width:11px; height:7px;
	margin-top:-3px; background-color:currentColor; transition:transform .18s;
	-webkit-mask:var(--wsc-chev) center/11px 7px no-repeat;
	        mask:var(--wsc-chev) center/11px 7px no-repeat;
}
.wsc-more[open] > summary::after { transform:rotate(180deg); }
.wsc-more-body { padding:2px 0 18px; }
.wsc-helper { padding:14px; background:var(--wsc-bg); border:1px solid var(--wsc-line-soft); border-radius:var(--wsc-r); }
.wsc-helper-out { margin:0; font-size:15px; font-weight:600; color:var(--wsc-dark); }

.wsc .btn { border-radius:var(--wsc-r); padding:9px 18px; font-weight:600; font-size:13px; }
.wsc .b-blue-btn:disabled { opacity:.45; }

/* ---- reference table --------------------------------------------------------- */
.wsc-table { width:100%; font-size:14px; }
.wsc-table th, .wsc-table td {
	padding:9px 12px; text-align:right; white-space:nowrap;
	border-bottom:1px solid var(--wsc-line-soft);
}
.wsc-table th:first-child, .wsc-table td:first-child { text-align:left; }
.wsc-table thead th {
	font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
	color:var(--wsc-grey); border-bottom:1px solid var(--wsc-line);
}
.wsc-table tbody tr:last-child td, .wsc-table tbody tr:last-child th { border-bottom:0; }
.wsc-table tbody th { font-weight:700; color:var(--wsc-dark); }

/* ---- faq ---------------------------------------------------------------------- */
.wsc-faq { border-bottom:1px solid var(--wsc-line-soft); }
.wsc-faq:last-of-type { border-bottom:0; }
.wsc-faq summary {
	position:relative; padding:15px 30px 15px 0; font-size:15px; font-weight:600;
	color:var(--wsc-dark); cursor:pointer; list-style:none; transition:color .16s;
}
.wsc-faq summary::-webkit-details-marker { display:none; }
.wsc-faq summary::after {
	content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
	width:22px; height:22px; border-radius:50%; background:var(--wsc-bg);
	color:var(--wsc-blue); font-size:15px; font-weight:600;
	display:flex; align-items:center; justify-content:center; line-height:1;
}
.wsc-faq[open] summary::after { content:"\2212"; background:var(--wsc-blue); color:#fff; }
.wsc-faq summary:hover { color:var(--wsc-blue); }
.wsc-faq > div { padding:0 0 16px; font-size:14px; line-height:1.62; color:#333a41; }
.wsc-faq > div p:last-child { margin-bottom:0; }

@media (max-width:575.98px) {
	.wsc-hero-n { font-size:38px; }
	.wsc-stats { grid-template-columns:1fr; }
	.wsc-head-x { flex-basis:100%; margin-left:0; }
}