/* Tyre pressure calculator. Scoped to .tpc so the 139 crawled pages keep the
   original look. Same surface language as the spoke calculator: site blue
   #0099CC, soft greys, 16px radii, elevation only where it means something. */

.tpc {
	--tpc-blue:#0099CC; --tpc-blue-dk:#0483ae; --tpc-blue-soft:#eaf7fc;
	--tpc-dark:#151a1f; --tpc-grey:#5d6773; --tpc-grey-soft:#8a95a1;
	--tpc-line:#e3e8ee; --tpc-line-soft:#eef1f5; --tpc-bg:#f6f8fa;
	--tpc-front:#0099CC; --tpc-rear:#e8813d;
	--tpc-good:#1f9d5b; --tpc-warn:#c98005; --tpc-bad:#d2493a;
	--tpc-r:11px; --tpc-r-lg:16px;
	--tpc-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");
	--tpc-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");
	--tpc-bike: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.2'%3E%3Ccircle cx='3.6' cy='11' r='3'/%3E%3Ccircle cx='12.4' cy='11' r='3'/%3E%3Cpath d='M3.6 11l3-6h3l2.8 6M6.6 5h3.2'/%3E%3C/svg%3E");
}

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

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

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

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

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

/* ---- preset picker -------------------------------------------------------- */
.tpc-dd { position:relative; }
.tpc-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(--tpc-dark);
	background:#fff var(--tpc-bike) no-repeat left 14px center / 18px 18px;
	border:1px solid var(--tpc-line); border-radius:var(--tpc-r);
	transition:border-color .16s, box-shadow .16s;
}
.tpc-dd-btn:hover { border-color:#ccd4dd; }
.tpc-dd-btn:focus-visible, .tpc-dd-btn[aria-expanded="true"] {
	outline:0; border-color:var(--tpc-blue); box-shadow:0 0 0 3px rgba(0,153,204,.14);
}
.tpc-dd-btn::after {
	content:""; position:absolute; right:15px; top:50%; width:11px; height:7px;
	margin-top:-3px; background-color:var(--tpc-grey);
	transition:transform .18s, background-color .16s;
	-webkit-mask:var(--tpc-chev) center/11px 7px no-repeat;
	        mask:var(--tpc-chev) center/11px 7px no-repeat;
}
.tpc-dd-btn[aria-expanded="true"]::after { transform:rotate(180deg); background-color:var(--tpc-blue); }
.tpc-dd-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

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

.tpc-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(--tpc-blue-soft); border:1px solid #c4e7f4;
}
.tpc-preset-note::before {
	content:""; width:13px; height:13px; flex:0 0 13px; background-color:currentColor;
	-webkit-mask:var(--tpc-check) center/13px 13px no-repeat;
	        mask:var(--tpc-check) center/13px 13px no-repeat;
}

/* ---- results --------------------------------------------------------------- */
.tpc-out { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tpc-card {
	position:relative; padding:18px 16px 15px; border-radius:var(--tpc-r-lg);
	background:#fff; border:1px solid var(--tpc-line); overflow:hidden;
	box-shadow:0 1px 2px rgba(16,24,40,.04), 0 14px 26px -20px rgba(16,24,40,.4);
}
.tpc-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--tpc-front); }
.tpc-card[data-side="R"]::before { background:var(--tpc-rear); }
.tpc-card-name {
	margin:0 0 6px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
	text-transform:uppercase; color:var(--tpc-grey);
}
.tpc-card-p {
	font-size:44px; font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--tpc-dark);
}
.tpc-card-u { font-size:15px; font-weight:600; color:var(--tpc-grey-soft); letter-spacing:0; margin-left:3px; }
.tpc-card-alt { margin:5px 0 0; font-size:13px; font-weight:600; color:var(--tpc-grey-soft); }
.tpc-card-range { margin:7px 0 0; font-size:13px; color:var(--tpc-grey); }
.tpc-card-meta {
	display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; padding-top:11px;
	border-top:1px solid var(--tpc-line-soft);
}
.tpc-card-meta span {
	font-size:11px; font-weight:600; color:var(--tpc-grey);
	background:var(--tpc-bg); border-radius:999px; padding:3px 9px;
}
.tpc-card-pump {
	margin:10px 0 0; padding:8px 10px; border-radius:9px; font-size:12px; line-height:1.45;
	color:#0b6d8c; background:var(--tpc-blue-soft); border:1px solid #c4e7f4;
}

/* ---- the pressure window ------------------------------------------------------ */
.tpc-win { margin-top:14px; padding:16px 16px 12px; background:var(--tpc-bg);
	border:1px solid var(--tpc-line-soft); border-radius:var(--tpc-r-lg); }
.tpc-win-t {
	margin:0 0 14px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
	text-transform:uppercase; color:var(--tpc-grey);
}
.tpc-win-track {
	position:relative; height:10px; border-radius:999px; margin:28px 0 8px;
	background:linear-gradient(90deg,#d8f0e2,#eaf7fc 45%,#eaf7fc 55%,#fdecea);
	border:1px solid var(--tpc-line);
}
/* The two ends of the track that you should not be riding in. */
.tpc-win-track i { position:absolute; top:0; bottom:0; display:block; }
.tpc-win-track i.is-low  { background:#f8d9d4; border-radius:999px 0 0 999px; }
.tpc-win-track i.is-high { background:#f8d9d4; border-radius:0 999px 999px 0; }
.tpc-win-pin {
	position:absolute; top:50%; width:3px; height:26px; margin:-13px 0 0 -1.5px;
	border-radius:2px; background:var(--tpc-front);
}
.tpc-win-pin.is-R { background:var(--tpc-rear); }
.tpc-win-pin span {
	position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap;
	bottom:calc(100% + 5px); font-size:11px; font-weight:700; color:var(--tpc-front);
}
.tpc-win-pin.is-R span { bottom:auto; top:calc(100% + 5px); color:var(--tpc-rear); }
.tpc-win-scale {
	display:flex; justify-content:space-between; gap:8px; margin-top:26px;
	font-size:11px; color:var(--tpc-grey-soft);
}
.tpc-win-scale span:nth-child(2), .tpc-win-scale span:nth-child(3) { font-style:italic; }

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

/* ---- tyre drop figure ------------------------------------------------------------ */
.tpc-fig {
	margin:12px 0 0; padding:14px; background:var(--tpc-bg);
	border:1px solid var(--tpc-line-soft); border-radius:var(--tpc-r-lg);
}
.tpc-fig svg { display:block; width:100%; max-width:320px; height:auto; margin:0 auto; }
.tpc-fig figcaption { margin-top:10px; font-size:12px; line-height:1.55; color:var(--tpc-grey); }
.tpc-fig-t {
	margin:0 0 6px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
	text-transform:uppercase; color:var(--tpc-grey);
}
.tpc-carcass { fill:#3d4752; }
.tpc-rim     { fill:#c3ccd6; stroke:#9aa4af; stroke-width:1; }
.tpc-ground  { stroke:#b9c2cc; stroke-width:2; stroke-linecap:round; }
.tpc-patch   { stroke:var(--tpc-rear); stroke-width:4; stroke-linecap:round; }
.tpc-dim line { stroke:#7b8794; stroke-width:1; }
.tpc-dim text { fill:#4a5561; font-size:12px; font-weight:700; }

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

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

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

.tpc input[type="range"] { width:100%; accent-color:var(--tpc-blue); height:46px; }
.tpc-split-out { font-size:15px; font-weight:700; color:var(--tpc-dark); }

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

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

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

.tpc-steps { counter-reset:tpc; list-style:none; padding-left:0; margin-bottom:0; }
.tpc-steps li { counter-increment:tpc; position:relative; padding-left:42px; margin-bottom:15px; }
.tpc-steps li:last-child { margin-bottom:0; }
.tpc-steps li::before {
	content:counter(tpc); position:absolute; left:0; top:-1px;
	width:28px; height:28px; border-radius:50%; background:var(--tpc-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) {
	.tpc-out { grid-template-columns:1fr; }
	.tpc-card-p { font-size:38px; }
	.tpc-step-x { flex-basis:100%; margin-left:0; }
	.tpc-win-scale span:nth-child(2), .tpc-win-scale span:nth-child(3) { display:none; }
}