/* chainring 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. */

/* Chainring and cassette calculator. Scoped to .crc so the crawled pages keep
   the original look. */
.crc { --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-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"); }

@media (min-width:640px) {
	section.crc.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; }
}
.crc h2 { letter-spacing:-.012em; }
.crc h3 { letter-spacing:-.006em; margin-bottom:.35rem; }
.crc article p, .crc article li { line-height:1.62; color:#333a41; }
.crc-head-x { margin:0 0 0 auto; display:flex; align-items:center; gap:8px; }
.crc-label { display:block; margin-bottom:6px; font-size:11px; font-weight:700; color:var(--t-grey); text-transform:uppercase; letter-spacing:.055em; }
.crc .form-control, .crc .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; }
.crc .form-select { font-weight:500; }
.crc .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; }
.crc .input-group > .form-control:focus { z-index:3; }
.t-units { display:inline-flex; gap:3px; padding:3px; background:var(--t-bg); border:1px solid var(--t-line-soft); border-radius:9px; }
.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); }
.crc-hero-u { font-size:17px; font-weight:600; color:var(--t-grey-soft); margin-left:5px; }
.crc-hero-sub { margin:7px 0 0; font-size:13px; color:var(--t-grey); line-height:1.5; }
.t-stats dd { margin:4px 0 0; font-size:19px; font-weight:700; color:var(--t-dark); }
.crc-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; }
.t-check span { font-size:13px; line-height:1.45; color:#333a41; }
.crc .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) {
	.crc-head-x { flex-basis:100%; margin-left:0; justify-content:flex-start; }
}
/* Sized to content, not to the container: with one chainring a full-width
   table strands two columns at opposite edges. The wrapper scrolls when a
   3x plus a comparison makes it wide. */
.crc-grid { width:auto; min-width:min(100%, 300px); font-size:13px; border-collapse:collapse; }
.crc-grid th, .crc-grid td { min-width:68px; }
.crc-grid caption { caption-side:top; text-align:left; padding:0 0 9px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t-grey); }
.crc-grid th, .crc-grid td { padding:7px 10px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--t-line-soft); }
.crc-grid thead th { font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--t-grey); border-bottom:1px solid var(--t-line); background:var(--t-bg); }
.crc-grid tbody th { font-weight:700; color:var(--t-dark); text-align:left; background:var(--t-bg); }
.crc-grid tbody tr:last-child td, .crc-grid tbody tr:last-child th { border-bottom:0; }
.crc-grid td.is-dupe { color:var(--t-grey-soft); background:#fffaf2; }
.crc-grid .is-alt { background:var(--t-blue-soft); color:var(--t-blue-dk); font-weight:700; }
.crc-gridwrap { margin-top:14px; padding:14px; background:#fff; border:1px solid var(--t-line); border-radius:var(--t-r-lg); overflow-x:auto; }
.crc-compare { margin-top:12px; padding:12px 14px; border-radius:var(--t-r); font-size:13px; line-height:1.55; color:#0b6d8c; background:var(--t-blue-soft); border:1px solid #c4e7f4; }
.crc-dupe-note { margin:9px 0 0; font-size:12px; color:var(--t-grey-soft); }