/* v1059: buttons as liquid glass, the brand cards' recipe (a thin fill, blur and the
   crescent edge). Loaded last on every geometry page, so these win over fp.css and bk.css. */
html body .theme-toggle, html body .lmenu-theme, html body .bk-reqbtn.btn, html body .bk-ghost {
  border: 0 !important; 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,.1), inset 0 0 14px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
  transition: background-color .16s ease, box-shadow .16s ease; }
html.dark body .theme-toggle, html.dark body .lmenu-theme, html.dark body .bk-reqbtn.btn, html.dark body .bk-ghost {
  background: rgba(255,255,255,.045);
  box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.24), inset -.7px -1px 0 0 rgba(255,255,255,.09), inset 0 0 14px 0 rgba(255,255,255,.04); }
html body .theme-toggle:hover, html body .lmenu-theme:hover, html body .bk-reqbtn.btn:hover, html body .bk-ghost:hover { opacity: 1; background: rgba(255,255,255,.72); }
html.dark body .theme-toggle:hover, html.dark body .lmenu-theme:hover, html.dark body .bk-reqbtn.btn:hover, html.dark body .bk-ghost:hover { background: rgba(255,255,255,.09); }
/* the phone menu's theme button carries the site's own glass layers; this one replaces them */
html body .lmenu-theme.lpg::before, html body .lmenu-theme.lpg::after { display: none; }
/* The accent buttons (Open BikeViewer) stay flat: fp.css and bk.css paint them (#d4431d). */

/* v1061: segmented rows (the category choice on /bikes and /compare), as the app's camera
   row: one solid fill slides between the choices (src/seg.js, the app's gel stretch), the
   chosen label inverts, and a faint glass pill sits under the pointer */
html body .bv-seg { position: relative; isolation: isolate; }
html body .bv-seg > button { position: relative; z-index: 1; background: transparent !important; transition: color 160ms ease 90ms; }
html body .bv-seg > button::before { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity 160ms ease;
  background: rgba(0,0,0,.09); box-shadow: inset 1px 1px 0 0 rgba(255,255,255,.9), inset -.7px -.7px 0 0 rgba(255,255,255,.5); }
html.dark body .bv-seg > button::before { background: rgba(255,255,255,.15); box-shadow: inset 1px 1px 0 0 rgba(255,255,255,.22), inset -.7px -.7px 0 0 rgba(255,255,255,.08); }
@media (hover: hover) { html body .bv-seg > button:not([aria-checked="true"]):hover::before { opacity: .5; } }
html body .bv-seg > button[aria-checked="true"] { color: #fff; }
html.dark body .bv-seg > button[aria-checked="true"] { color: #16191d; }
.bv-segind { position: absolute; z-index: 0; pointer-events: none; border-radius: 999px; opacity: 0; transform-origin: 50% 50%; font-style: normal;
  background: #1c1f23; box-shadow: inset 1px 1px 0 0 rgba(255,255,255,.18), 0 1px 3px rgba(0,0,0,.18); }
html.dark .bv-segind { background: #f2f3f5; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.6), 0 1px 3px rgba(0,0,0,.35); }