/* Spoke length calculator. Everything is scoped to .slc so the 139 crawled
   pages keep the original look. Brand colours are the site's blue #0099CC and
   dark #262626; the rest is a slightly more modern surface treatment than the
   oil mix calculator — softer greys, larger radii, real elevation on the
   result card. */

.slc {
	--slc-blue:#0099CC; --slc-blue-dk:#0483ae; --slc-blue-soft:#eaf7fc;
	--slc-dark:#151a1f; --slc-grey:#5d6773; --slc-grey-soft:#8a95a1;
	--slc-line:#e3e8ee; --slc-line-soft:#eef1f5; --slc-bg:#f6f8fa;
	--slc-good:#1f9d5b; --slc-warn:#c98005; --slc-bad:#d2493a;
	--slc-r:11px; --slc-r-lg:16px;
	--slc-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");
	--slc-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.5l-7 7L3 8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--slc-wheel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235d6773' stroke-width='1.3'%3E%3Ccircle cx='8' cy='8' r='6.4'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3Cpath d='M8 1.6v4.9M8 9.5v4.9M1.6 8h4.9M9.5 8h4.9'/%3E%3C/svg%3E");
}

/* ---- surfaces --------------------------------------------------------- */
/* .bdr only draws its border from 640px up, so match that breakpoint and keep
   the edge-to-edge phone treatment the rest of the site uses. */
@media (min-width:640px) {
	section.slc.bdr {
		border:1px solid var(--slc-line);
		border-radius:var(--slc-r-lg);
		box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 22px -12px rgba(16,24,40,.16);
		overflow:visible;
	}
}
.slc .border-bottom { border-color:var(--slc-line-soft) !important; }
.slc h2 { letter-spacing:-.012em; }
.slc h3 { letter-spacing:-.006em; margin-bottom:.35rem; }
.slc article p, .slc article li { line-height:1.62; color:#333a41; }

/* ---- step scaffolding -------------------------------------------------- */
.slc-step { margin-top:22px; }
.slc-step:first-of-type { margin-top:0; }
.slc-step-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; margin-bottom:10px; }
.slc-step-n {
	flex:0 0 auto; width:21px; height:21px; border-radius:50%;
	background:var(--slc-blue); color:#fff; font-size:11px; font-weight:700;
	display:flex; align-items:center; justify-content:center; align-self:center;
}
.slc-step-t { font-size:15px; font-weight:700; color:var(--slc-dark); margin:0; }
.slc-step-h { font-size:12.5px; color:var(--slc-grey); margin:0 0 0 auto; text-align:right; }

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

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

/* A field group lights the matching part of the diagram while it has focus. */
.slc-field[data-dim] { position:relative; }

/* ---- preset picker ------------------------------------------------------ */
.slc-dd { position:relative; }
.slc-dd-btn {
	display:flex; align-items:center; width:100%; height:50px;
	padding:0 42px; text-align:left; cursor:pointer;
	font-size:15px; font-weight:600; color:var(--slc-dark);
	background:#fff var(--slc-wheel) no-repeat left 15px center / 17px 17px;
	border:1px solid var(--slc-line); border-radius:var(--slc-r);
	transition:border-color .16s, box-shadow .16s;
}
.slc-dd-btn:hover { border-color:#ccd4dd; }
.slc-dd-btn:focus-visible, .slc-dd-btn[aria-expanded="true"] {
	outline:0; border-color:var(--slc-blue); box-shadow:0 0 0 3px rgba(0,153,204,.14);
}
.slc-dd-btn::after {
	content:""; position:absolute; right:15px; top:50%; width:11px; height:7px;
	margin-top:-3px; background-color:var(--slc-grey);
	transition:transform .18s, background-color .16s;
	-webkit-mask:var(--slc-chev) center/11px 7px no-repeat;
	        mask:var(--slc-chev) center/11px 7px no-repeat;
}
.slc-dd-btn[aria-expanded="true"]::after { transform:rotate(180deg); background-color:var(--slc-blue); }
.slc-dd-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slc-dd-value.is-empty { color:var(--slc-grey); font-weight:500; }

.slc-dd-panel {
	position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px);
	max-height:340px; overflow-y:auto; padding:8px;
	background:#fff; border:1px solid var(--slc-line); border-radius:var(--slc-r-lg);
	box-shadow:0 4px 8px -4px rgba(16,24,40,.10), 0 18px 40px -12px rgba(16,24,40,.30);
}
.slc-dd-panel[hidden] { display:none; }
.slc-dd-group {
	margin:8px 0 2px; padding:0 14px; font-size:10px; font-weight:700;
	letter-spacing:.07em; text-transform:uppercase; color:var(--slc-grey-soft);
}
.slc-dd-group:first-child { margin-top:2px; }
.slc-dd-opt {
	display:flex; align-items:center; gap:13px; margin:0; padding:10px 14px;
	border-radius:10px; cursor:pointer; transition:background-color .13s;
}
.slc-dd-opt:hover { background:var(--slc-bg); }
.slc-dd-opt input { position:absolute; opacity:0; width:0; height:0; }
.slc-dd-mark {
	flex:0 0 19px; width:19px; height:19px; border-radius:50%;
	border:2px solid #3a4049; position:relative; transition:border-color .16s;
}
.slc-dd-mark::after {
	content:""; position:absolute; inset:3px; border-radius:50%;
	background:var(--slc-blue); transform:scale(0); transition:transform .16s;
}
.slc-dd-opt:hover .slc-dd-mark, .slc-dd-opt input:checked ~ .slc-dd-mark { border-color:var(--slc-blue); }
.slc-dd-opt input:checked ~ .slc-dd-mark::after { transform:scale(1); }
.slc-dd-opt input:focus-visible ~ .slc-dd-mark {
	border-color:var(--slc-blue); box-shadow:0 0 0 3px rgba(0,153,204,.2);
}
.slc-dd-txt { flex:1 1 auto; font-size:14px; font-weight:500; color:var(--slc-dark); }
.slc-dd-opt input:checked ~ .slc-dd-txt { font-weight:700; }
.slc-dd-meta { flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--slc-grey-soft); }

.slc-preset-note {
	display:inline-flex; align-items:center; gap:6px; margin:10px 0 0;
	padding:5px 11px 5px 9px; border-radius:999px; font-size:12px; font-weight:600;
	color:#0b6d8c; background:var(--slc-blue-soft); border:1px solid #c4e7f4;
}
.slc-preset-note::before {
	content:""; width:13px; height:13px; flex:0 0 13px; background-color:currentColor;
	-webkit-mask:var(--slc-check) center/13px 13px no-repeat;
	        mask:var(--slc-check) center/13px 13px no-repeat;
}

/* ---- cross pattern picker ------------------------------------------------ */
.slc-x {
	display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:7px;
}
.slc-x button {
	display:flex; flex-direction:column; align-items:center; gap:3px;
	padding:10px 4px 9px; cursor:pointer; text-align:center;
	border:1px solid var(--slc-line); border-radius:var(--slc-r); background:#fff;
	transition:border-color .16s, box-shadow .16s, background-color .16s, transform .16s;
}
.slc-x button:hover { border-color:#ccd4dd; transform:translateY(-1px); }
.slc-x b { font-size:15px; font-weight:700; color:var(--slc-dark); line-height:1.1; }
.slc-x .slc-x-len { font-size:11px; font-weight:600; color:var(--slc-grey-soft); line-height:1.2; }
/* A dot per option saying how happily that pattern would actually lace. */
.slc-x button::before {
	content:""; width:7px; height:7px; border-radius:50%; background:var(--slc-line);
}
.slc-x button.is-good::before { background:var(--slc-good); }
.slc-x button.is-ok::before   { background:#8bbf3c; }
.slc-x button.is-warn::before { background:var(--slc-warn); }
.slc-x button.is-bad::before  { background:var(--slc-bad); }
.slc-x button[aria-pressed="true"] {
	border-color:var(--slc-blue); background:var(--slc-blue-soft);
	box-shadow:0 0 0 1px var(--slc-blue) inset;
}
.slc-x button[aria-pressed="true"] b { color:var(--slc-blue-dk); }
.slc-x.is-split { opacity:.5; }

/* ---- results ------------------------------------------------------------- */
.slc-out {
	display:grid; grid-template-columns:1fr 1fr; gap:12px;
	margin-top:6px;
}
.slc-card {
	position:relative; padding:18px 16px 16px; border-radius:var(--slc-r-lg);
	background:#fff; border:1px solid var(--slc-line);
	box-shadow:0 1px 2px rgba(16,24,40,.04), 0 14px 26px -20px rgba(16,24,40,.4);
	overflow:hidden;
}
.slc-card::before {
	content:""; position:absolute; inset:0 0 auto; height:3px;
	background:linear-gradient(90deg, var(--slc-blue), #58cbe8);
}
.slc-card[data-side="R"]::before { background:linear-gradient(90deg, #f0a93c, #e8813d); }
.slc-card.is-empty { box-shadow:none; background:var(--slc-bg); }
.slc-card-name {
	font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
	color:var(--slc-grey); margin:0 0 6px;
}
.slc-card-len {
	font-size:42px; font-weight:700; line-height:1; letter-spacing:-.03em;
	color:var(--slc-dark);
}
.slc-card-len::after { content:" mm"; font-size:16px; font-weight:600; color:var(--slc-grey-soft); letter-spacing:0; }
.slc-card.is-empty .slc-card-len::after { content:""; }
.slc-card-stock { margin:7px 0 0; font-size:13px; color:var(--slc-grey); }
.slc-card-stock b { color:var(--slc-dark); }
.slc-card-meta {
	display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; padding-top:11px;
	border-top:1px solid var(--slc-line-soft);
}
.slc-card-meta span {
	font-size:11px; font-weight:600; color:var(--slc-grey);
	background:var(--slc-bg); border-radius:999px; padding:3px 9px;
}
.slc-tag.is-good { color:#136c3e; background:#e7f6ee; }
.slc-tag.is-ok   { color:#4d6b16; background:#f1f7e4; }
.slc-tag.is-warn { color:#8a5a00; background:#fff5e3; }
.slc-tag.is-bad  { color:#95291c; background:#fdecea; }
.slc-card-pair { margin:9px 0 0; font-size:12px; color:var(--slc-warn); }

.slc-same {
	margin:12px 0 0; padding:11px 14px; border-radius:var(--slc-r);
	font-size:13px; line-height:1.5; color:#136c3e;
	background:#effaf3; border:1px solid #c6ecd6;
}

.slc-typical {
	margin:12px 0 0; padding:11px 14px; border-radius:var(--slc-r);
	font-size:12.5px; line-height:1.5; color:#8a5a00;
	background:#fff8ec; border:1px solid #f4dcae;
}

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

.slc-balance { display:flex; height:6px; border-radius:999px; overflow:hidden; background:var(--slc-line-soft); margin-top:8px; }
.slc-balance i { display:block; height:100%; transition:width .3s cubic-bezier(.4,0,.2,1); }
.slc-balance i:first-child { background:var(--slc-blue); }
.slc-balance i:last-child { background:#e8813d; }

/* ---- warnings ------------------------------------------------------------- */
.slc-warn-item {
	margin:10px 0 0; padding:11px 13px; border-radius:var(--slc-r);
	font-size:13px; line-height:1.5; font-weight:500;
}
.slc-warn-item.is-warn { color:#8a5a00; background:#fff8ec; border:1px solid #f4dcae; }
.slc-warn-item.is-bad  { color:#95291c; background:#fdecea; border:1px solid #f6cac4; }

/* ---- diagrams -------------------------------------------------------------- */
/* Stacked, not side by side: the main column is only ~600px wide and the hub
   section needs all of it before its dimension labels are legible. */
.slc-figs { display:grid; grid-template-columns:1fr; gap:12px; margin-top:16px; }
.slc-fig-lace svg { max-width:320px; margin:0 auto; }
.slc-fig {
	margin:0; padding:14px; background:var(--slc-bg);
	border:1px solid var(--slc-line-soft); border-radius:var(--slc-r-lg);
}
.slc-fig svg { display:block; width:100%; height:auto; }
.slc-fig figcaption { margin-top:9px; font-size:11.5px; line-height:1.5; color:var(--slc-grey-soft); }
.slc-fig-t {
	margin:0 0 8px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
	text-transform:uppercase; color:var(--slc-grey);
}

/* hub section */
.slc-axle   { stroke:#aab3bd; stroke-width:7; stroke-linecap:round; }
.slc-shell  { fill:#dfe5ec; stroke:#c3ccd6; stroke-width:1; }
.slc-flange { fill:#7f8c99; }
.slc-rim    { fill:#4a5561; }
.slc-spoke  { stroke:var(--slc-blue); stroke-width:2; fill:none; stroke-linecap:round; }
.slc-centre { stroke:#b9c2cc; stroke-width:1; stroke-dasharray:5 4; }
.slc-cap    { fill:#fff; font-size:10px; font-weight:700; letter-spacing:.08em; text-anchor:middle; }
.slc-centre-cap { fill:#9aa4af; font-weight:600; letter-spacing:.04em; }
.slc-dim line   { stroke:#7b8794; stroke-width:1; }
.slc-dim circle { fill:#7b8794; }
/* Anchors are set per element in the drawing code — a CSS text-anchor here
   would beat the presentation attribute and shove every label to centre. */
.slc-dim text   {
	fill:#4a5561; font-size:12px; font-weight:700;
	/* A halo in the panel colour keeps a label readable wherever it lands —
	   over the axle, over a spoke, over the hub shell. */
	paint-order:stroke; stroke:#f6f8fa; stroke-width:4px; stroke-linejoin:round;
}
/* Focus a field and the matching dimension lifts out of the drawing. */
#slc-svg-hub[data-lit] .slc-dim:not([data-dim]) { opacity:1; }
#slc-svg-hub[data-lit] [data-dim] { opacity:.28; transition:opacity .15s; }
#slc-svg-hub[data-lit="erd"]  [data-dim="erd"],
#slc-svg-hub[data-lit="fdL"]  [data-dim="fdL"],
#slc-svg-hub[data-lit="fdR"]  [data-dim="fdR"],
#slc-svg-hub[data-lit="ctfL"] [data-dim="ctfL"],
#slc-svg-hub[data-lit="ctfR"] [data-dim="ctfR"] { opacity:1; }
#slc-svg-hub[data-lit] [data-dim] line   { stroke:#7b8794; }
#slc-svg-hub[data-lit="erd"]  [data-dim="erd"] text,
#slc-svg-hub[data-lit="fdL"]  [data-dim="fdL"] text,
#slc-svg-hub[data-lit="fdR"]  [data-dim="fdR"] text,
#slc-svg-hub[data-lit="ctfL"] [data-dim="ctfL"] text,
#slc-svg-hub[data-lit="ctfR"] [data-dim="ctfR"] text { fill:var(--slc-blue-dk); }
#slc-svg-hub[data-lit="erd"]  [data-dim="erd"] line,
#slc-svg-hub[data-lit="fdL"]  [data-dim="fdL"] line,
#slc-svg-hub[data-lit="fdR"]  [data-dim="fdR"] line,
#slc-svg-hub[data-lit="ctfL"] [data-dim="ctfL"] line,
#slc-svg-hub[data-lit="ctfR"] [data-dim="ctfR"] line { stroke:var(--slc-blue); stroke-width:1.6; }

/* lacing view */
.slc-l-rim    { fill:none; stroke:#4a5561; stroke-width:7; }
.slc-l-flange { fill:#e6ebf0; stroke:#b9c2cc; stroke-width:1.5; }
.slc-l-spoke  { stroke:#9aa4af; stroke-width:1.3; }
.slc-l-spoke.is-lead { stroke:var(--slc-blue); }
.slc-l-hole   { fill:#7b8794; }
.slc-l-cap    { fill:var(--slc-dark); font-size:22px; font-weight:700; text-anchor:middle; }

/* ---- advanced / helper disclosures ------------------------------------------ */
.slc-more { margin-top:18px; border-top:1px solid var(--slc-line-soft); }
.slc-more > summary {
	position:relative; padding:14px 26px 14px 0; font-size:13.5px; font-weight:700;
	color:var(--slc-grey); cursor:pointer; list-style:none; transition:color .16s;
}
.slc-more > summary::-webkit-details-marker { display:none; }
.slc-more > summary:hover { color:var(--slc-blue); }
.slc-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(--slc-chev) center/11px 7px no-repeat;
	        mask:var(--slc-chev) center/11px 7px no-repeat;
}
.slc-more[open] > summary::after { transform:rotate(180deg); }
.slc-more-body { padding:2px 0 18px; }

.slc-check { display:flex; align-items:flex-start; gap:9px; margin:0; cursor:pointer; }
.slc-check input { margin-top:2px; flex:0 0 auto; width:17px; height:17px; accent-color:var(--slc-blue); }
.slc-check span { font-size:13px; line-height:1.45; color:#333a41; }

.slc-erdbox { padding:14px; background:var(--slc-bg); border:1px solid var(--slc-line-soft); border-radius:var(--slc-r); }
.slc-erd-out { margin:0; font-size:15px; font-weight:600; color:var(--slc-dark); }

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

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

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

.slc-steps { counter-reset:slc; list-style:none; padding-left:0; margin-bottom:0; }
.slc-steps li { counter-increment:slc; position:relative; padding-left:42px; margin-bottom:15px; }
.slc-steps li:last-child { margin-bottom:0; }
.slc-steps li::before {
	content:counter(slc); position:absolute; left:0; top:-1px;
	width:28px; height:28px; border-radius:50%; background:var(--slc-blue); color:#fff;
	font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;
	box-shadow:0 2px 6px -2px rgba(0,153,204,.7);
}

/* ---- phones ------------------------------------------------------------------------ */
@media (max-width:575.98px) {
	.slc-out { grid-template-columns:1fr; }
	.slc-card-len { font-size:36px; }
	.slc-x { grid-template-columns:repeat(3, 1fr); }
	.slc-stats { grid-template-columns:1fr; }
	/* Let the title keep the first line and push its helper text below. */
	.slc-step-t { flex:1 1 auto; }
	.slc-step-h { flex-basis:100%; margin-left:0; text-align:left; }
}