/* ebike range calculator: what is specific to this tool.
   The shared surface is in tool-ui.css, which loads first. The
   --t-* values below are this tool's own, so its colours and radii
   are unchanged by sharing. */

/* E-bike range calculator. Scoped to .erc so the crawled pages keep the
   original look. Same surface language as the other tools. */
.erc { --t-blue:#0099CC; --t-blue-dk:#0483ae; --t-blue-soft:#eaf7fc; --t-dark:#151a1f; --t-grey:#5d6773; --t-grey-soft:#8a95a1; --t-line:#e3e8ee; --t-line-soft:#eef1f5; --t-bg:#f6f8fa; --t-rider:#0099CC; --t-motor:#e8813d; --t-r:11px; --t-r-lg:16px; --t-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"); --t-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"); --t-batt: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%3Crect x='1.5' y='4.5' width='11' height='7' rx='1.5'/%3E%3Cpath d='M14 7v2'/%3E%3Cpath d='M4 6.5v3M6.5 6.5v3'/%3E%3C/svg%3E"); }

@media (min-width:640px) {
	section.erc.bdr { border:1px solid var(--t-line); border-radius:var(--t-r-lg); box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 22px -12px rgba(16,24,40,.16); overflow:visible; }
}
.erc h2 { letter-spacing:-.012em; }
.erc h3 { letter-spacing:-.006em; margin-bottom:.35rem; }
.erc article p, .erc article li { line-height:1.62; color:#333a41; }
.erc-step-head { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:10px; }
.erc-step-n { flex:0 0 auto; width:21px; height:21px; border-radius:50%; background:var(--t-blue); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.erc-step-x { margin:0 0 0 auto; display:flex; align-items:center; gap:8px; }
.erc-label { display:block; margin-bottom:6px; font-size:11px; font-weight:700; color:var(--t-grey); text-transform:uppercase; letter-spacing:.055em; }
/* ---- fields ------------------------------------------------------------- */
.erc .form-control, .erc .form-select { height:46px; font-size:15px; font-weight:600; border:1px solid var(--t-line); border-radius:var(--t-r); color:var(--t-dark); background-color:#fff; transition:border-color .16s, box-shadow .16s; }
.erc .form-select { font-weight:500; }
.erc .input-group-text { border:1px solid var(--t-line); border-left:0; background:var(--t-bg); color:var(--t-grey-soft); font-size:12.5px; font-weight:600; border-radius:0 var(--t-r) var(--t-r) 0; min-width:46px; justify-content:center; }
.erc .input-group > .form-control:focus { z-index:3; }
.erc input[type="range"] { width:100%; accent-color:var(--t-blue); height:38px; }
.t-units { display:inline-flex; gap:3px; padding:3px; background:var(--t-bg); border:1px solid var(--t-line-soft); border-radius:9px; }
.t-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(--t-dark); background:#fff var(--t-batt) no-repeat left 14px center / 18px 18px; border:1px solid var(--t-line); border-radius:var(--t-r); transition:border-color .16s, box-shadow .16s; }
.t-dd-btn:hover { border-color:#ccd4dd; }
.t-dd-btn:focus-visible, .t-dd-btn[aria-expanded="true"] { outline:0; border-color:var(--t-blue); box-shadow:0 0 0 3px rgba(0,153,204,.14); }
.t-dd-panel { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px); max-height:330px; overflow-y:auto; padding:8px; background:#fff; border:1px solid var(--t-line); border-radius:var(--t-r-lg); box-shadow:0 4px 8px -4px rgba(16,24,40,.10), 0 18px 40px -12px rgba(16,24,40,.30); }
.t-dd-opt { display:flex; align-items:center; gap:13px; margin:0; padding:10px 14px; border-radius:10px; cursor:pointer; transition:background-color .13s; }
.t-dd-mark { flex:0 0 19px; width:19px; height:19px; border-radius:50%; border:2px solid #3a4049; position:relative; transition:border-color .16s; }
.t-dd-opt:hover .t-dd-mark, .t-dd-opt input:checked ~ .t-dd-mark { border-color:var(--t-blue); }
.t-dd-opt input:focus-visible ~ .t-dd-mark { border-color:var(--t-blue); box-shadow:0 0 0 3px rgba(0,153,204,.2); }
.erc-dd-meta { flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--t-grey-soft); }
.t-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(--t-blue-soft); border:1px solid #c4e7f4; }
/* ---- the headline answer -------------------------------------------------- */
.t-hero { position:relative; padding:20px 18px 16px; border-radius:var(--t-r-lg); background:#fff; border:1px solid var(--t-line); overflow:hidden; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 14px 26px -20px rgba(16,24,40,.4); }
.erc-hero-u { font-size:17px; font-weight:600; color:var(--t-grey-soft); margin-left:5px; letter-spacing:0; }
.erc-hero-sub { margin:7px 0 0; font-size:13px; color:var(--t-grey); }
.t-stats dd { margin:4px 0 0; font-size:19px; font-weight:700; color:var(--t-dark); }
/* ---- rider against motor -------------------------------------------------- */
.erc-split { margin:12px 0 0; padding:14px 16px; background:var(--t-bg); border:1px solid var(--t-line-soft); border-radius:var(--t-r-lg); }
.erc-split-t { margin:0 0 10px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t-grey); }
.erc-bar { display:flex; height:14px; border-radius:999px; overflow:hidden; background:var(--t-line); }
.erc-bar i { display:block; height:100%; transition:width .3s cubic-bezier(.4,0,.2,1); }
.erc-bar i:first-child { background:var(--t-rider); }
.erc-bar i:last-child { background:var(--t-motor); }
.erc-key { display:flex; gap:16px; margin-top:9px; font-size:11.5px; color:var(--t-grey); }
.erc-key span { display:inline-flex; align-items:center; gap:6px; }
.erc-key i { width:9px; height:9px; border-radius:2px; display:inline-block; }
.erc-key i.is-rider { background:var(--t-rider); }
.erc-key i.is-motor { background:var(--t-motor); }
.erc-split-txt { margin:9px 0 0; font-size:13px; line-height:1.55; color:#333a41; }
/* ---- will I make it ------------------------------------------------------- */
.erc-target { margin:12px 0 0; padding:12px 14px; border-radius:var(--t-r); font-size:13px; line-height:1.55; }
.erc-target.is-good { color:#136c3e; background:#effaf3; border:1px solid #c6ecd6; }
.erc-target.is-warn { color:#8a5a00; background:#fff8ec; border:1px solid #f4dcae; }
.erc-target.is-bad { color:#95291c; background:#fdecea; border:1px solid #f6cac4; }
.erc-warn-item { margin:10px 0 0; padding:11px 13px; border-radius:var(--t-r); font-size:13px; line-height:1.5; color:#8a5a00; background:#fff8ec; border:1px solid #f4dcae; }
.erc-out { font-size:15px; font-weight:700; color:var(--t-dark); }
.erc .btn { border-radius:var(--t-r); padding:9px 18px; font-weight:600; font-size:13px; }
.t-table th, .t-table td { padding:9px 12px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--t-line-soft); }
.t-table th:first-child, .t-table td:first-child { text-align:left; white-space:normal; }
.t-table tbody tr.is-common td, .t-table tbody tr.is-common th { background:#f2fafd; }
.t-faq > div { padding:0 0 16px; font-size:14px; line-height:1.62; color:#333a41; }

@media (max-width:575.98px) {
	/* The control drops to its own line but should not stretch across it. */
	.erc-step-x { flex-basis:100%; margin-left:0; justify-content:flex-start; }
	.erc-step-x > .btn { flex:0 0 auto; }
}