/* ---- compare page (v1) ---- */
.cm-ans { margin: 14px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.5; color: var(--dim); text-wrap: pretty; }
.cm-ans b { color: var(--fg); font-weight: 600; }
.cm-ans b.ok { color: var(--fp-ok); }
.cm-bestb { margin: -2px 0 0; font-size: 13px; color: var(--dim); }
.cm-bestb b { color: var(--fp-blue); font-weight: 700; font-size: 15px; margin-left: 2px; }
.cm-bestb:empty { display: none; }
.cm-pairsec[hidden] { display: none; }
.cm-pairwrap { --lp-r: 18px; border-radius: 18px; padding: 6px 12px 8px; position: relative; }
.cm-pairs th:nth-child(2), .cm-pairs td:nth-child(2) { text-align: left; }
.cm-pairs th:nth-child(1), .cm-pairs td:nth-child(1) { width: 1%; padding-right: 28px; }
.cm-pairs td:nth-child(1) b { color: var(--fg); font-weight: 600; }
.cm-pairs td:nth-child(2) b { color: var(--fp-blue); font-weight: 600; }
.cm-pairs tbody tr { cursor: pointer; transition: background-color .15s ease; }
.cm-pairs tbody tr:hover { background: var(--fp-row); }
.cm-pairs tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cm-pairs tbody tr:last-child td { border-bottom: 0; }
.cm-pairs tr.fp-this { background: var(--fp-sel); }
.cm-pairs tr.fp-this:hover { background: var(--fp-sel); }
.cm-pairs tr.fp-this td:first-child::after { display: none; }
.cm-pairs tr.fp-this td:first-child b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 8px; vertical-align: 2px; }
.cm-pairs td.far { color: var(--accent); }
.cm-loose { display: inline-block; margin-left: 10px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .2px; color: var(--accent); background: var(--fp-sel); vertical-align: 1px; }
.cm-more { margin-top: 44px; }
@media (max-width: 640px) {
  .cm-ans { font-size: 15.5px; }
  .cm-pairwrap { padding: 4px 8px 6px; }
  .cm-pairs th, .cm-pairs td { padding: 9px 8px; }
  .cm-pairs th:nth-child(1), .cm-pairs td:nth-child(1) { padding-right: 12px; }
  .cm-loose { display: block; margin: 2px 0 0; width: max-content; }
}
.cm-pairs th .sh { display: none; }
@media (max-width: 640px) {
  .cm-pairs th .lg, .cm-pairs th .u { display: none; }
  .cm-pairs th .sh { display: inline; }
  .cm-pairs th, .cm-pairs td { padding: 9px 6px; }
  .cm-pairs th:nth-child(1), .cm-pairs td:nth-child(1) { padding-right: 8px; }
}
@media (max-width: 400px) {
  .cm-pairwrap { padding: 4px 4px 6px; }
  .cm-pairs th, .cm-pairs td { padding: 9px 5px; }
  .cm-pairs td:nth-child(1), .cm-pairs th:nth-child(1) { padding-right: 4px; }
  .cm-loose { font-size: 10.5px; padding: 0 6px; }
  .cm-loose .lg { display: none; }
  .cm-pairs tr.fp-this td:first-child b::after { margin-left: 5px; }
}
@media (max-width: 340px) { .cm-pairs { font-size: 12.5px; } .cm-pairs th, .cm-pairs td { padding: 9px 3px; } }
html .nav-links a, html .btn-nav { white-space: nowrap; }
@media (max-width: 1000px) { html .nav-links { gap: 14px; } }
.cm-all { margin: 22px 0 0; }
.cm-all a { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--ghost); color: var(--fg); font-size: 14px; font-weight: 600; text-decoration: none; }
.cm-all a:hover { background: var(--fp-row); }
/* ---- v1053: the measuring tools, a glass rail at the view's right edge */
.fp-tools { position: absolute; z-index: 3; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px; border-radius: 14px;
  background: var(--fp-glass); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.9), inset -.7px -1px 0 0 rgba(255,255,255,.5), inset 0 0 0 .5px rgba(0,0,0,.08), 0 2px 10px rgba(0,0,0,.06);
  opacity: 0; transition: opacity .3s ease; pointer-events: none; }
html.dark .fp-tools { box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.22), inset -.7px -1px 0 0 rgba(255,255,255,.08), 0 2px 12px rgba(0,0,0,.3); }
.fp-stage.ready .fp-tools { opacity: 1; pointer-events: auto; }
.fp-tools button { width: 34px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--dim); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background-color .16s ease, color .16s ease; }
.fp-tools button:hover { color: var(--fg); background: rgba(0,0,0,.05); }
html.dark .fp-tools button:hover { background: rgba(255,255,255,.07); }
.fp-tools button[aria-pressed="true"] { background: #161b22; color: #fff; }
html.dark .fp-tools button[aria-pressed="true"] { background: #eef0f3; color: #10151c; }
.fp-tools button:focus-visible { outline: 2px solid #d4431d; outline-offset: 1px; }
.fp-tools .sep { width: 18px; height: 1px; background: var(--line); margin: 1px 0; }
.fp-tools .sep[hidden], .fp-tools button[hidden] { display: none; }
.fp-mhint { position: absolute; z-index: 3; left: 50%; top: 14px; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: #161b22; color: #fff; pointer-events: none; animation: fpHintIn .2s ease; }
.fp-mhint[hidden] { display: none; }
@keyframes fpHintIn { from { opacity: 0; transform: translate(-50%, 4px); } }
html.dark .fp-mhint { background: #eef0f3; color: #10151c; }
.fp-stage.measuring .fp-hint { opacity: 0; }
@media (max-width: 640px) {
  .fp-tools { top: auto; bottom: 10px; right: auto; left: 50%; transform: translateX(-50%); flex-direction: row; padding: 4px; border-radius: 13px; }
  .fp-tools button { width: 36px; height: 34px; }
  .fp-tools .sep { width: 1px; height: 18px; margin: 0 1px; }
  .fp-mhint { top: 52px; font-size: 12px; max-width: calc(100% - 24px); white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .fp-mhint { animation: none; } }
/* v1053: an open size menu sits over the cards after its own (the phone's 2 by 2 grid put it under Bike D) */
.fp-card:has(.fp-ddmenu) { z-index: 8; }
/* v1054: the tools at the left edge, the size finder at the top right under the app button */
@media (min-width: 641px) {
  html .fp-fit.lpg { left: auto; right: 12px; }
  .fp-tools { right: auto; left: 12px; }
}
/* v1054: the inseam's reset to auto, in place of the auto tag once moved by hand */
.fp-inslb { display: inline-flex; align-items: center; gap: 6px; }
.fp-inslb .fp-auto { margin-left: 0; }
.fp-insreset { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border: 0; border-radius: 999px; background: rgba(0,0,0,.06); color: var(--fg); font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; cursor: pointer; transition: background-color .16s ease; }
html.dark .fp-insreset { background: rgba(255,255,255,.09); }
.fp-insreset:hover { background: rgba(0,0,0,.11); }
html.dark .fp-insreset:hover { background: rgba(255,255,255,.15); }
.fp-insreset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fp-insreset[hidden] { display: none; }
.fp-intro { position: relative; }
/* v1055: with Bikes and Compare in the header the links need about 960px; below that the phone menu takes over */
@media (min-width: 768px) and (max-width: 959px) {
  html .nav-links, html .nav-right { display: none; }
  html .menu-btn { display: inline-flex; }
  html .mcta { display: inline-block; }
  html .nav-in .mcta { margin-left: auto; }
  html .lmenu:not([hidden]) { display: flex !important; }
}

/* ---- Compare index (v1): the picker and the popular pairs. Builds on the Bikes page CSS */
:root { --ci-blue: #2563eb; --ci-ok: #15803d; --ci-acc: #d4431d; --ci-sel: rgba(229,76,36,.10); --ci-menu: rgba(255,255,255,.97); --ci-well: rgba(0,0,0,.035); --ci-row: rgba(0,0,0,.04); }
html.dark { --ci-blue: #7fb0f7; --ci-ok: #6ee7a0; --ci-sel: rgba(229,76,36,.16); --ci-menu: rgba(18,24,32,.97); --ci-well: rgba(255,255,255,.04); --ci-row: rgba(255,255,255,.05); }
.ci .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.ci .dot.a { background: var(--fg); }
.ci .dot.b { background: var(--ci-blue); }

/* the picker panel */
.ci-pick { --lp-r: 22px; border-radius: 22px; margin-top: 24px; padding: 18px 20px 20px; position: relative; z-index: 5; }
.ci-pick.flash { animation: ciFlash .7s ease; }
@keyframes ciFlash { 30% { transform: scale(1.006); } }
.ci-pickrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: end; position: relative; z-index: 3; }
.ci-slot { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 6px 8px; min-width: 0; }
.ci-lb { grid-column: 1 / -1; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--faint); }
.ci-combo { position: relative; min-width: 0; }
.ci-in, .ci-size select { width: 100%; height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--ghost); background: var(--ci-well); color: var(--fg); font: inherit; font-size: 15px; font-weight: 600; outline: none; min-width: 0; text-overflow: ellipsis; transition: border-color .16s ease, box-shadow .16s ease; }
.ci-in::placeholder { color: var(--faint); font-weight: 500; }
.ci-in:focus, .ci-size select:focus { border-color: var(--ci-acc); box-shadow: 0 0 0 3px color-mix(in srgb, #d4431d 22%, transparent); }
.ci-size { display: block; min-width: 0; }
.ci-size span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ci-size select { cursor: pointer; padding-right: 30px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5l3-3' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.ci-swap { width: 40px; height: 40px; margin-bottom: 2px; border-radius: 999px; border: 1px solid var(--ghost); background: transparent; color: var(--dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .16s ease, background-color .16s ease; }
.ci-swap:hover { color: var(--fg); background: var(--ci-row); }
.ci-swap.spin svg { animation: ciSpin .32s ease; }
@keyframes ciSpin { from { transform: rotate(-180deg); } }
.ci-swap:focus-visible, .ci-card:focus-visible, .ci-acts a:focus-visible { outline: 2px solid var(--ci-acc); outline-offset: 2px; }

/* the search list */
.ci-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 6px; border-radius: 16px; background: var(--ci-menu); border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html.dark .ci-list { box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.ci-list[hidden] { display: none; }
.ci-opt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 11px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.ci-opt.hot, .ci-opt:hover { background: var(--ci-row); }
.ci-opt .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ci-opt .n .br { color: var(--dim); font-weight: 500; }
.ci-opt .n small { color: var(--faint); font-weight: 500; font-size: 12.5px; }
.ci-opt .m { flex: none; font-size: 12px; color: var(--faint); white-space: nowrap; }
.ci-none { padding: 10px 11px; font-size: 13.5px; color: var(--dim); }

/* the result */
.ci-res { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); position: relative; z-index: 2; }
.ci-res[hidden] { display: none; }
.cm-ans { margin: 0; max-width: 64ch; font-size: 17px; line-height: 1.5; color: var(--dim); text-wrap: pretty; }
.cm-ans b { color: var(--fg); font-weight: 600; }
.cm-ans b.ok { color: var(--ci-ok); }
.ci-tablewrap { margin-top: 14px; overflow-x: auto; }
.ci-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ci-table th, .ci-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ci-table tbody tr:last-child th, .ci-table tbody tr:last-child td { border-bottom: 0; }
.ci-table thead th { font-size: 12px; font-weight: 600; color: var(--faint); letter-spacing: .3px; }
.ci-table thead th span { color: var(--fg); font-weight: 700; }
.ci-table thead th:nth-child(3) span { color: var(--ci-blue); }
.ci-table tbody th { text-align: left; font-weight: 500; color: var(--dim); padding-left: 2px; }
.ci-table tbody th .u { color: var(--faint); font-size: 12px; }
.ci-table td { font-weight: 600; }
.ci-table td.b { color: var(--ci-blue); }
.ci-table td.d { color: var(--dim); font-weight: 500; }
.ci-table td.d.zero { color: var(--faint); }
.ci-table td.d.far { color: var(--ci-acc); font-weight: 600; }
.ci-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
html .ci-go.btn { background: var(--ci-acc); color: #fff; }
.ci-app { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }

/* popular comparisons */
.ci-pop { margin-top: 44px; }
.ci-pophead { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.ci-pophead h2 { margin: 0; font-size: 22px; font-weight: 600; }
.ci-cats { background: var(--ci-well); }
.ci-note { margin: 10px 0 16px; font-size: 13.5px; color: var(--faint); }
.ci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; animation: bkIn .22s ease; }
.ci-card { --lp-r: 16px; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 15px; border-radius: 16px; text-decoration: none; color: var(--fg);
  background: rgba(255,255,255,.42); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.9), inset -.7px -1px 0 0 rgba(255,255,255,.5), inset 0 0 0 .5px rgba(0,0,0,.08), inset 0 0 14px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.04);
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease; }
html.dark .ci-card { background: rgba(255,255,255,.035); box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.2), inset -.7px -1px 0 0 rgba(255,255,255,.08), inset 0 0 14px 0 rgba(255,255,255,.03); }
html:not(.dark) .ci-card:hover { background: rgba(255,255,255,.7); }
html.dark .ci-card:hover { background: rgba(255,255,255,.07); }
.ci-card .br { font-size: 12.5px; color: var(--faint); display: flex; align-items: center; gap: 8px; }
.ci-card .tag { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--ci-acc); color: #fff; }
.ci-card .t { font-size: 16.5px; font-weight: 600; letter-spacing: -.1px; text-wrap: balance; }
.ci-card .vs { color: var(--faint); font-weight: 500; }
.ci-card .ft { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.ci-card .sz { color: var(--dim); font-weight: 600; }
.ci-card .dd { color: var(--dim); }
.ci-card .ok { color: var(--ci-ok); font-weight: 600; font-size: 12.5px; }

@media (max-width: 760px) {
  .ci-pickrow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ci-swap { justify-self: center; transform: rotate(90deg); margin: 0; width: 36px; height: 36px; }
  .ci-swap.spin svg { animation: none; }
}
@media (max-width: 640px) {
  .ci-pick { padding: 14px 14px 16px; border-radius: 20px; }
  .ci-slot { grid-template-columns: minmax(0, 1fr) 84px; }
  .cm-ans { font-size: 15.5px; }
  .ci-table { font-size: 13px; }
  .ci-table th, .ci-table td { padding: 8px 6px; }
  .ci-table thead th { white-space: normal; vertical-align: bottom; }
  .ci-opt .m .c { display: none; }
  .ci-acts > * { flex: 1 1 auto; justify-content: center; text-align: center; }
  .ci-grid { grid-template-columns: minmax(0, 1fr); }
  .ci-pophead .ci-cats { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ci-card, .ci-pick.flash, .ci-swap.spin svg, .ci-grid { transition: none; animation: none; } }
.ci-table .sh { display: none; }
@media (max-width: 640px) {
  .ci-table .lg, .ci-table tbody th .u { display: none; }
  .ci-table .sh { display: inline; }
  .ci-table thead th { white-space: nowrap; }
  .ci-table thead th span { font-size: 13px; }
}
@media (max-width: 640px) {
  .ci-table tbody th { white-space: normal; line-height: 1.25; }
  .ci-table th, .ci-table td { padding: 8px 5px; }
  .ci-table td.d { padding-right: 2px; }
}
/* the result: the answer and the actions beside the table on wide screens */
.ci-res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px 40px; align-items: start; }
.ci-sum { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.ci-sum .ci-acts { margin-top: 0; }
.ci-res .ci-tablewrap { margin-top: 0; }
@media (max-width: 900px) {
  .ci-res { grid-template-columns: minmax(0, 1fr); }
  .ci-sum { display: contents; }
  .ci-sum .ci-acts { order: 3; margin-top: 4px; }
}
@media (max-width: 640px) {
  .ci-card { padding: 11px 14px 12px; gap: 2px; }
  .ci-card .t { font-size: 15.5px; }
  .ci-grid { gap: 8px; }
}
.ci-more { margin-top: 14px; }
.ci-more[hidden] { display: none; }
.ci-sum { position: relative; }
/* v1055: the two frames overlaid, at the top of the picker */
.mv.mv-in { margin: -6px -8px 16px; padding: 0; border-radius: 14px; }
@media (max-width: 640px) { .mv.mv-in { margin: -4px -6px 12px; } }
/* ---- v1056: the Tarmac SL8 page's viewport; the picker sits in its dock where the cards were */
.cm-bestb { margin: -2px 0 0; font-size: 13px; color: var(--dim); }
.cm-bestb b { color: var(--fp-blue); font-weight: 700; font-size: 15px; margin-left: 2px; }
.cm-bestb:empty { display: none; }
.fv-pick { margin: 0 0 2px; gap: 12px; }
.fv-pick .ci-in, .fv-pick .ci-size select { height: 40px; border-radius: 12px; font-size: 14.5px; background: var(--fp-sunk); }
.fv-pick .ci-lb { font-size: 11px; }
.fv-pick .ci-swap { width: 36px; height: 36px; margin-bottom: 2px; }
.fv-pick .ci-list { z-index: 40; }
.ci-respanel { margin-top: 26px; }
.ci-respanel .ci-res { margin-top: 0; padding-top: 0; border-top: 0; }
/* ---- v1057: the compare index as the frame page: the popular cards' filter (the Bikes page's pills) */
.bk-cats { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; }
.bk-cats button { font: inherit; font-size: 12.5px; font-weight: 600; height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--dim); cursor: pointer; white-space: nowrap; transition: background-color .16s ease, color .16s ease; }
.bk-cats button:hover { color: var(--fg); background: rgba(0,0,0,.04); }
html.dark .bk-cats button:hover { background: rgba(255,255,255,.05); }
.bk-cats button[aria-checked="true"] { background: var(--btn); color: var(--btn-fg); }
.bk-cats button:focus-visible { outline: 2px solid #d4431d; outline-offset: 2px; }
.bk-ghost { font: inherit; font-size: 14px; font-weight: 600; height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--ghost); background: transparent; color: var(--fg); cursor: pointer; }
.bk-ghost:hover { background: rgba(0,0,0,.04); }
html.dark .bk-ghost:hover { background: rgba(255,255,255,.06); }
@keyframes bkIn { from { opacity: 0; transform: translateY(4px); } }
.ci-pop { margin-top: 44px; }
.fp-intro .cm-ans:empty { display: none; }
@media (max-width: 640px) {
  .bk-cats { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bk-cats::-webkit-scrollbar { display: none; }
}
.ci-card[hidden] { display: none; }