/* BikeViewer: Bikes index and brand pages (preview). Builds on the site's own CSS
   (tokens --bg --fg --dim --faint --line --ghost, the .lpg glass, .btn), as the
   frame pages do. */
.bk { padding: 22px 0 64px; } /* inside the site's own column (main > .col), so it keeps to the rails */
.fp-crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--faint); margin-bottom: 14px; }
.fp-crumbs a { text-decoration: none; color: inherit; }
.fp-crumbs a:hover { color: var(--fg); }
.fp-crumbs i { font-style: normal; opacity: .6; }
.bk-top h1 { margin: 0 0 8px; line-height: 1.02; text-wrap: balance; }
.bk-top h1 .gm { color: var(--faint); font-weight: 500; }
.bk-sub { margin: 0; color: var(--dim); font-size: 15px; font-variant-numeric: tabular-nums; }

/* search and the category choice, one glass bar */
html .bk-tools.lpg { position: sticky; z-index: 20; }
.bk-tools { --lp-r: 18px; border-radius: 18px; margin-top: 24px; padding: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; position: sticky; top: 70px; z-index: 20; }
.bk-search { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; background: rgba(0,0,0,.045); color: var(--faint); }
html.dark .bk-search { background: rgba(255,255,255,.06); }
.bk-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 14px; outline: none; }
.bk-search input::placeholder { color: var(--faint); }
.bk-search:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, #d4431d 55%, transparent); }
.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 small { font-size: 11px; font-weight: 500; color: var(--faint); margin-left: 5px; font-variant-numeric: tabular-nums; transition: 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[aria-checked="true"] small { color: inherit; opacity: .7; }
.bk-cats button:focus-visible, .bk-brand:focus-visible, .bk-row:focus-visible, .bk-az a:focus-visible { outline: 2px solid #d4431d; outline-offset: 2px; }

/* the letter rail */
.bk-az { display: flex; flex-wrap: wrap; gap: 2px; margin: 18px 0 4px; }
.bk-az a, .bk-az span { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--dim); transition: background-color .16s ease, color .16s ease; }
.bk-az a:hover { color: var(--fg); background: rgba(0,0,0,.05); }
html.dark .bk-az a:hover { background: rgba(255,255,255,.06); }
.bk-az span { color: var(--faint); opacity: .45; }

/* brands */
.bk-letter { margin-top: 26px; scroll-margin-top: 150px; }
.bk-letter h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--faint); }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.bk-brand { --lp-r: 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 3px; padding: 13px 15px 14px; text-decoration: none; color: var(--fg); transition: transform .16s ease; }
.bk-brand b { font-size: 15.5px; font-weight: 600; letter-spacing: -.1px; }
.bk-brand span { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bk-brand::before { transition: background-color .16s ease; }
html:not(.dark) .bk-brand:hover::before { background: rgba(255,255,255,.92); }
html.dark .bk-brand:hover::before { background: rgba(255,255,255,.07); }
.bk-empty { margin-top: 40px; color: var(--dim); font-size: 15px; }

/* a brand: one panel per family, a row per frame */
.bk-fams { display: grid; gap: 14px; margin-top: 26px; }
.bk-fam { --lp-r: 18px; border-radius: 18px; padding: 6px 8px 8px; }
.bk-fam h2 { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 12px 12px 8px; font-size: 18px; font-weight: 600; }
.bk-fam h2 small { font-size: 12.5px; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }
.bk-head, .bk-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 92px 106px 106px 18px; gap: 12px; align-items: center; padding: 0 12px; }
.bk-cmix .bk-head, .bk-cmix .bk-row { grid-template-columns: minmax(0, 1fr) 80px 96px 92px 106px 106px 18px; }
.bk-head { height: 30px; font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--faint); }
.bk-head .u { text-transform: none; letter-spacing: 0; font-weight: 500; }
.bk-row { min-height: 46px; border-radius: 12px; text-decoration: none; color: var(--fg); font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .16s ease; }
.bk-row + .bk-row { box-shadow: 0 -1px 0 var(--line); }
.bk-row:hover { background: rgba(0,0,0,.04); box-shadow: none; }
.bk-row:hover + .bk-row { box-shadow: none; }
html.dark .bk-row:hover { background: rgba(255,255,255,.05); }
.bk-row .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bk-row .nm small { font-weight: 500; font-size: 12.5px; color: var(--faint); margin-left: 6px; }
.bk-row .v { color: var(--dim); white-space: nowrap; }
.bk-row .ch { color: var(--faint); justify-self: end; transition: transform .16s ease, color .16s ease; }
.bk-row:hover .ch { color: var(--fg); transform: translateX(2px); }
.bk-row .tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #d4431d; color: #fff; vertical-align: 1px; }
.bk-res .bk-head, .bk-res .bk-row { grid-template-columns: minmax(0, 1fr) 80px 96px 92px 106px 106px 18px; }
.bk-res .nm .br { color: var(--dim); font-weight: 500; margin-right: 6px; }

@media (max-width: 860px) {
  .bk-head .h-sz, .bk-row .v-sz, .bk-head .h-rc, .bk-row .v-rc { display: none; }
  .bk-head, .bk-row, .bk-cmix .bk-head, .bk-cmix .bk-row, .bk-res .bk-head, .bk-res .bk-row { grid-template-columns: minmax(0, 1fr) 76px 96px 18px; }
  .bk-cmix .bk-head .h-cat, .bk-cmix .bk-row .v-cat, .bk-res .bk-head .h-cat, .bk-res .bk-row .v-cat { display: none; }
}
@media (max-width: 640px) {
  .bk { padding-top: 16px; }
  .bk-tools { top: 62px; border-radius: 22px; }
  .bk-cats { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bk-cats::-webkit-scrollbar { display: none; }
  .bk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-head, .bk-row, .bk-cmix .bk-head, .bk-cmix .bk-row, .bk-res .bk-head, .bk-res .bk-row { grid-template-columns: minmax(0, 1fr) 70px 14px; gap: 10px; padding: 0 10px; }
  .bk-head .h-st, .bk-row .v-st { display: none; }
  .bk-row .nm { white-space: normal; }
  .bk-row .nm small { display: block; margin: 1px 0 0; }
}
.fp-toast { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(8px); z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--btn); color: var(--btn-fg); font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.fp-toast.on { opacity: 1; transform: translateX(-50%); }
#view { animation: bkIn .22s ease; }
@keyframes bkIn { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { #view { animation: none; } .bk-brand, .bk-row .ch { transition: none; } }

/* the header: pills and the landing page's accent, as on the frame pages */
html .btn { border-radius: 999px; }
html .btn-nav, html .lmenu-open { background: #d4431d; color: #fff; border-color: transparent; }
html .btn:hover { opacity: .88; }
html .theme-toggle, html .lmenu-theme { border-radius: 999px; }

#view > .bk-letter:first-child { margin-top: 10px; }

/* ---- v2 */
/* the glass panels' crescent, as on the frame pages */
.fp-rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  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,.3); }
html.dark .fp-rim { box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.26), inset -.7px -1px 0 0 rgba(255,255,255,.1), inset 0 0 14px 0 rgba(255,255,255,.035); }
/* title row: the page name and Request a frame */
.bk-titlerow { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bk-titlerow h1 { margin-bottom: 0; }
.bk-reqbtn { margin-bottom: 6px; }
html .bk-reqbtn.btn { background: transparent; color: var(--fg); border: 1px solid var(--ghost); }
html .bk-reqbtn.btn:hover { opacity: 1; background: rgba(0,0,0,.04); }
html.dark .bk-reqbtn.btn:hover { background: rgba(255,255,255,.06); }
/* the pinned bar: search, categories and (on the index) the letters */
.bk-tools { flex-direction: column; align-items: stretch; gap: 4px; }
.bk-toolrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bk-tools .bk-az { margin: 0; padding: 2px 4px 0; }
.bk-az[hidden] { display: none; }
.bk-letter { scroll-margin-top: 190px; }
/* the brand cards: liquid glass (a thin fill, blur and the crescent edge) */
.bk-brand { position: relative; border: 0; 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 .bk-brand { 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) .bk-brand:hover { background: rgba(255,255,255,.7); }
html.dark .bk-brand:hover { background: rgba(255,255,255,.07); box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.28), inset -.7px -1px 0 0 rgba(255,255,255,.1), inset 0 0 14px 0 rgba(255,255,255,.05); }
.bk-link { font: inherit; border: 0; background: none; padding: 0; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* the request dialog */
.bk-lock, .bk-lock body { overflow: hidden; }
.bk-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.28); animation: bkFade .18s ease; }
html.dark .bk-modal { background: rgba(0,0,0,.5); }
.bk-modal[hidden] { display: none; }
@keyframes bkFade { from { opacity: 0; } }
.bk-dialog { --lp-r: 22px; border-radius: 22px; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 20px 22px 22px; animation: bkPop .22s ease; }
html:not(.dark) .bk-dialog.lpg::before { background: rgba(255,255,255,.9); }
html.dark .bk-dialog.lpg::before { background: rgba(16,22,29,.92); }
@keyframes bkPop { from { opacity: 0; transform: translateY(6px) scale(.985); } }
.bk-dhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bk-dhead h2 { margin: 0; font-size: 20px; font-weight: 600; }
.bk-x { width: 30px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--faint); cursor: pointer; font-size: 13px; }
.bk-x:hover { color: var(--fg); background: rgba(0,0,0,.05); }
html.dark .bk-x:hover { background: rgba(255,255,255,.07); }
.bk-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.bk-f { display: grid; gap: 6px; min-width: 0; }
.bk-f span { font-size: 12.5px; font-weight: 600; color: var(--dim); }
.bk-f span i { font-style: normal; font-weight: 500; color: var(--faint); margin-left: 4px; }
.bk-wide { grid-column: 1 / -1; }
.bk-f input, .bk-f select { height: 40px; padding: 0 13px; border-radius: 12px; border: 1px solid var(--ghost); background: rgba(0,0,0,.03); color: var(--fg); font: inherit; font-size: 14px; outline: none; min-width: 0; transition: border-color .16s ease, box-shadow .16s ease; }
html.dark .bk-f input, html.dark .bk-f select { background: rgba(255,255,255,.04); }
.bk-f input:focus, .bk-f select:focus { border-color: #d4431d; box-shadow: 0 0 0 3px color-mix(in srgb, #d4431d 22%, transparent); }
.bk-f input::placeholder { color: var(--faint); }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk-ferr { margin: 12px 0 0; font-size: 13px; color: #d4431d; }
.bk-dfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.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); }
html .bk-dialog .btn[type="submit"], html .bk-sent .btn { background: #d4431d; color: #fff; }
.bk-dialog .btn[disabled] { opacity: .6; cursor: default; }
.bk-sent { display: grid; gap: 6px; justify-items: start; padding: 4px 0 2px; }
.bk-sent b { font-size: 16px; }
.bk-sent span { color: var(--dim); font-size: 14px; margin-bottom: 12px; }
.bk-sent[hidden], .bk-dialog form[hidden] { display: none; }
@media (max-width: 640px) {
  .bk-fgrid { grid-template-columns: 1fr; }
  .bk-titlerow { align-items: center; }
  .bk-reqbtn { margin-bottom: 0; padding: 7px 14px; font-size: 13px; }
  .bk-tools .bk-az { display: none; }
}
.bk-toolrow > * { min-width: 0; }
.bk-tools, .bk-toolrow { max-width: 100%; }
@media (max-width: 640px) {
  html .bk-tools.lpg { position: relative; top: auto; }
  .bk-search { flex-basis: 100%; }
  .bk-cats { max-width: 100%; }
}
/* v3: the dialog does not scroll itself. Its glass ring (.lpg::after, 64px outside the
   panel) gave it scrollable overflow both ways; the backdrop scrolls instead, and only
   when the window is too short for the form */
.bk-dialog { overflow: visible; max-height: none; margin: auto; }
.bk-modal { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
/* v4: the glass rims (.lpg::after) reach 64px past their panels; clip them at the page edge so a phone does not scroll sideways */
html { overflow-x: clip; }
/* the header with the Bikes tab: keep each link on one line between the phone menu and full width */
html .nav-links a, html .btn-nav { white-space: nowrap; }
@media (max-width: 1000px) { html .nav-links { gap: 14px; } }
.bk-titleacts { display: flex; gap: 8px; flex-wrap: wrap; }
a.bk-reqbtn { text-decoration: none; }
/* 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; }
}
/* ---- v1056: the Tarmac SL8 page's viewport, a frame at a time; its dock holds the frame's name and the render */
.bk .fp-viewsec { margin-top: 22px; }
.fv-dock { display: grid; gap: 6px; }
.fv-cap { font-size: 13.5px; color: var(--dim); padding: 2px 4px 0; min-height: 20px; }
.fv-cap b { color: var(--fg); font-weight: 600; }
.bk .bk-tools { margin-top: 18px; }

/* ---- v1060: a slimmer search bar. One row for search and the categories (in a
   shallow well), the letters spread across the width under a hairline */
.bk-tools { --lp-r: 16px; border-radius: 16px; padding: 6px; gap: 0; }
.bk-toolrow { gap: 8px; }
.bk-search { height: 34px; padding: 0 12px; flex: 1 1 240px; gap: 7px; }
.bk-search svg { width: 14px; height: 14px; }
.bk-search input { font-size: 13.5px; }
.bk-tools .bk-cats { padding: 2px; gap: 2px; background: rgba(0,0,0,.04); }
html.dark .bk-tools .bk-cats { background: rgba(255,255,255,.045); }
.bk-tools .bk-cats button { height: 30px; padding: 0 12px; }
.bk-tools .bk-az { justify-content: space-between; flex-wrap: nowrap; gap: 0; margin: 6px 4px 0; padding: 4px 4px 0; border-top: 1px solid var(--line); }
.bk-tools .bk-az a, .bk-tools .bk-az span { width: 24px; height: 24px; font-size: 12px; }
.bk-letter { scroll-margin-top: 170px; }
@media (max-width: 640px) { .bk-tools { border-radius: 20px; } .bk-tools .bk-cats { background: transparent; } }

/* v1061: the pinned bar keeps a gap below the header (the letters land the same gap under it, bikes.js jump) */
html .bk-tools.lpg { top: 84px; }
.bk-letter { scroll-margin-top: 184px; }
@media (max-width: 640px) { html .bk-tools.lpg { top: auto; } }