/* Shared dropdowns, menus and fold-outs for every ValueOddsAPI page.
   Same contract as the VPS app (docs/design-reference.md §2 "Dropdown list" and §8 "Motion contract"):
   - lists: card surface, 1px border, 12px corners, 4px padding, elevated shadow; rows at least 44px,
     8px corners, 12px side padding; the chosen row on the sunken surface in 600 with a check at the right;
     the row under the pointer or keyboard gets a faint tint.
   - motion: open = opacity + 95%→100% scale over 220ms on cubic-bezier(.2,0,0,1) from the edge facing the
     trigger; close = 140ms fade. Fold-outs grow from their height with a 4px lift (ui.js).
   Loaded after light.css / chrome.css on every page by chrome-src/inject_chrome.py; ui.js builds the markup. */
:root {
  --vo-motion-fast: 140ms;
  --vo-motion-normal: 220ms;
  --vo-ease: cubic-bezier(0.2, 0, 0, 1);
  --vo-shadow-elevated: 0 8px 28px rgba(32, 35, 43, 0.10);
  --vo-row-active: rgba(32, 35, 43, 0.045);
  --vo-focus: var(--mint-ink, #0a7f58);
}

.vo-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Popover motion (dropdown lists and the mobile menu) ---------- */
@keyframes voPopIn { from { opacity: 0; transform: scale(0.95); } }
@keyframes voPopOut { to { opacity: 0; transform: scale(0.98); } }
.vo-pop {
  --vo-pop-x: left;
  --vo-pop-y: top;
  transform-origin: var(--vo-pop-x) var(--vo-pop-y);
  animation: voPopIn var(--vo-motion-normal) var(--vo-ease) backwards;
}
.vo-pop[hidden] { display: none; }
.vo-pop[data-side="above"] { --vo-pop-y: bottom; }
.vo-pop[data-align="end"] { --vo-pop-x: right; }
.vo-pop[data-state="closing"] { pointer-events: none; animation: voPopOut var(--vo-motion-fast) var(--vo-ease) forwards; }

/* ---------- Dropdown (an enhanced <select>) ---------- */
.vo-dd { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; }
.vo-dd.is-full { display: block; }
.vo-dd-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0; pointer-events: none; }

:where(.vo-dd-trigger) { min-height: 44px; padding: 0 12px; border-radius: var(--radius-md, 12px); }
.vo-dd .vo-dd-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; max-width: 100%;
  border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--ink);
  font: 500 14px/20px var(--font-sans); text-align: left; cursor: pointer;
  transition: border-color var(--vo-motion-fast) var(--vo-ease), background-color var(--vo-motion-fast) var(--vo-ease), box-shadow var(--vo-motion-fast) var(--vo-ease);
}
.vo-dd.is-full .vo-dd-trigger { width: 100%; }
.vo-dd:not(.is-full) .vo-dd-trigger { width: auto; }
.vo-dd .vo-dd-trigger:hover { border-color: var(--ink-muted); }
.vo-dd .vo-dd-trigger[aria-expanded="true"] { border-color: var(--ink); }
.vo-dd .vo-dd-trigger:disabled { cursor: default; opacity: 0.5; }
.vo-dd .vo-dd-trigger.is-invalid { border-color: var(--negative, #c23030); }
.vo-dd-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vo-dd-chevron { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--ink-muted); transition: transform var(--vo-motion-normal) var(--vo-ease); }
.vo-dd-trigger[aria-expanded="true"] .vo-dd-chevron { transform: rotate(180deg); }

.vo-dd-list {
  position: absolute; z-index: 60; left: 0; top: calc(100% + 6px);
  min-width: 100%; max-width: min(560px, calc(100vw - 16px)); max-height: 36rem;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 4px; margin: 0;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
  box-shadow: var(--vo-shadow-elevated);
  font: 500 14px/20px var(--font-sans); color: var(--ink); text-align: left;
}
.vo-dd-list:focus { outline: none; }
.vo-dd-list[data-side="above"] { top: auto; bottom: calc(100% + 6px); }
.vo-dd-list[data-align="end"] { left: auto; right: 0; }
.vo-dd-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 8px 12px; border-radius: 8px; cursor: pointer;
  transition: background-color var(--vo-motion-fast) var(--vo-ease);
}
.vo-dd-row.is-active { background: var(--vo-row-active); }
.vo-dd-row[aria-selected="true"] { background: var(--surface-sunken); font-weight: 600; }
.vo-dd-row[aria-disabled="true"] { cursor: default; opacity: 0.45; }
.vo-dd-row-text { min-width: 0; }
.vo-dd-check { flex: none; width: 16px; height: 16px; color: var(--ink); visibility: hidden; }
.vo-dd-row[aria-selected="true"] .vo-dd-check { visibility: visible; }

/* The /sportsbooks/ country filter keeps its compact size. */
.sb-country .vo-dd .vo-dd-trigger { min-height: 40px; max-width: 260px; }
@media (max-width: 760px) { .sb-country .vo-dd, .sb-country .vo-dd .vo-dd-trigger { display: flex; width: 100%; max-width: none; } }

/* ---------- Header: language menu and mobile menu ---------- */
/* The header fades out while scrolling down and back in on the way up (ui.js autoHide). Hidden, it is
   also out of the tab order and lets clicks through; visibility flips only after the fade has finished. */
.site-header { transition: opacity 300ms var(--vo-ease), transform 300ms var(--vo-ease), visibility 0s; }
.site-header.is-scrolled-away { opacity: 0; transform: translateY(-12px); visibility: hidden; pointer-events: none; transition: opacity 300ms var(--vo-ease), transform 300ms var(--vo-ease), visibility 0s linear 300ms; }
@media (prefers-reduced-motion: reduce) { .site-header.is-scrolled-away { transform: none; } }
.site-header .nav { position: relative; }
.site-header .nav-links a { transition: color var(--vo-motion-fast) var(--vo-ease), background-color var(--vo-motion-fast) var(--vo-ease); }
.site-header .btn { transition: background-color var(--vo-motion-fast) var(--vo-ease), transform 200ms ease-out, box-shadow var(--vo-motion-normal) var(--vo-ease); }
.site-header .btn:active { transform: translateY(1px); }
.nav-tools { display: flex; align-items: center; gap: 4px; }

/* Language: a quiet menu item with a globe, the language code and a chevron (list opens at the right). */
.nav-lang { display: flex; align-items: center; }
.nav-lang select { min-height: 40px; padding: 0 8px; border: 0; border-radius: var(--radius-md, 12px); background: transparent; color: var(--ink-muted); font: 500 14px/20px var(--font-sans); cursor: pointer; }
.nav-lang .vo-dd .vo-dd-trigger {
  min-height: 40px; padding: 0 10px; gap: 6px; border: 0; border-radius: var(--radius-md, 12px);
  background: transparent; color: var(--ink-muted); font: 500 14px/20px var(--font-sans);
}
.nav-lang .vo-dd .vo-dd-trigger:hover, .nav-lang .vo-dd .vo-dd-trigger[aria-expanded="true"] { color: var(--ink); background: var(--surface-sunken); }
.nav-lang .vo-dd-globe { flex: none; width: 16px; height: 16px; }
.nav-lang .vo-dd-value { font: 600 12px/16px var(--font-mono); letter-spacing: 0.6px; }
.nav-lang .vo-dd-chevron { width: 14px; height: 14px; color: currentColor; }
.nav-lang .vo-dd-list { min-width: 200px; top: calc(100% + 12px); }

/* Mobile menu: hidden until ui.js runs and only below the width where the links fold away. */
.nav-menu-btn {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--radius-md, 12px); background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color var(--vo-motion-fast) var(--vo-ease);
}
.nav-menu-btn:hover, .nav-menu-btn[aria-expanded="true"] { background: var(--surface-sunken); }
.nav-menu-btn svg { width: 20px; height: 20px; overflow: visible; }
.nav-menu-btn path { transform-box: view-box; transform-origin: 12px 12px; transition: transform var(--vo-motion-normal) var(--vo-ease), opacity var(--vo-motion-fast) var(--vo-ease); }
.nav-menu-btn[aria-expanded="true"] path:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-menu-btn[aria-expanded="true"] path:nth-child(2) { opacity: 0; }
.nav-menu-btn[aria-expanded="true"] path:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-sheet {
  position: absolute; z-index: 55; left: 0; right: 0; top: calc(100% + 8px);
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg, 16px);
  box-shadow: var(--vo-shadow-elevated);
}
.nav-sheet { --vo-pop-x: right; }
.nav-sheet a:not(.btn) {
  display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px;
  font: 500 16px/24px var(--font-sans); color: var(--ink); text-decoration: none;
  transition: background-color var(--vo-motion-fast) var(--vo-ease);
}
.nav-sheet a:not(.btn):hover { background: var(--vo-row-active); }
.nav-sheet a[aria-current] { background: var(--surface-sunken); font-weight: 600; }
.nav-sheet .btn { margin-top: 6px; width: 100%; }

@media (max-width: 860px) {
  .vo-js .nav-menu-btn { display: inline-flex; }
}
@media (min-width: 861px) {
  .nav-sheet { display: none !important; }
}
@media (max-width: 560px) {
  /* Room for brand, language and menu: the call to action moves into the menu. */
  .vo-js .site-header .nav > .btn { display: none; }
  .nav-lang .vo-dd-value, .nav-lang .vo-dd-chevron { display: none; }
  .nav-lang .vo-dd .vo-dd-trigger { width: 44px; height: 44px; justify-content: center; padding: 0; }
  .nav-lang .vo-dd-globe { width: 18px; height: 18px; }
}

/* ---------- Fold-outs (<details>) ---------- */
.faq-mark { transition: transform var(--vo-motion-normal) var(--vo-ease); }
details[data-vo-closing] .faq-mark { transform: none; }
details > summary .transition { transition-duration: var(--vo-motion-normal); transition-timing-function: var(--vo-ease); }
details[data-vo-closing] > summary .group-open\:rotate-180 { transform: none; rotate: none; }

/* ---------- Keyboard focus ---------- */
.vo-dd-trigger:focus-visible, .nav-menu-btn:focus-visible, .nav-sheet a:focus-visible, .site-header .nav-links a:focus-visible {
  outline: 2px solid var(--vo-focus); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .vo-pop, .vo-pop[data-state="closing"] { animation: none; }
  .vo-dd-chevron, .nav-menu-btn path, .faq-mark { transition: none; }
  .site-header .btn:active { transform: none; }
}

/* Language flags (site/light/flags/*.svg) before each language and in the header button. */
.vo-dd-flag { flex: none; width: 20px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(11, 12, 14, 0.12); }
.vo-dd-row-text:has(.vo-dd-flag) { display: inline-flex; align-items: center; gap: 12px; }



/* ---------- Searchable list (header language menu, patch_ui_search.py) ---------- */
.vo-dd-search-wrap { position: sticky; top: -4px; z-index: 1; margin: -4px -4px 4px; padding: 8px 8px 6px; background: var(--surface-card); border-bottom: 1px solid var(--border); }
.vo-dd-search {
  display: block; width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface-card); color: var(--ink); font: 500 16px/20px var(--font-sans);
  transition: border-color var(--vo-motion-fast) var(--vo-ease);
}
.vo-dd-search::placeholder { color: var(--ink-muted); }
.vo-dd-search:focus { outline: none; border-color: var(--ink); }
.vo-dd-row[hidden] { display: none; }
.vo-dd-empty { padding: 12px; color: var(--ink-muted); }
.vo-dd-empty[hidden] { display: none; }
.nav-lang .vo-dd-list { min-width: 290px; }
@media (max-width: 560px) { .nav-lang .vo-dd-list { min-width: 0; width: min(290px, calc(100vw - 48px)); } }

/* auth-nav:start — "Log in" / "Dashboard" in the header (patch_header_login.py) */
.site-header .nav-login { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--radius-md, 12px); font: 500 14px/20px var(--font-sans); color: var(--ink); text-decoration: none; white-space: nowrap; transition: background-color var(--vo-motion-fast, 140ms) var(--vo-ease, ease); }
.site-header .nav-login:hover { background: var(--surface-sunken); color: var(--ink); }
.site-header .nav-login:focus-visible { outline: 2px solid var(--vo-focus, #0a7f58); outline-offset: 2px; }
.site-header .nav-login-icon { display: none; width: 18px; height: 18px; flex: none; }
.nav-sheet .nav-login { min-height: 48px; padding: 0 14px; border-radius: 10px; font-size: 16px; line-height: 24px; }
/* Between the burger breakpoint and 1200px the long menus need the room: the link becomes a person icon. */
@media (max-width: 1200px) {
  .site-header .nav > .nav-login { width: 40px; padding: 0; justify-content: center; }
  .site-header .nav > .nav-login .nav-login-icon { display: block; }
  .site-header .nav > .nav-login .nav-login-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 860px) { .site-header .nav > .nav-login { display: none; } }
/* Compact header (auth-nav.js): the links did not fit, so they move into the menu, at any width. */
.site-header.nav-compact .nav-links, .site-header.nav-compact .nav > .nav-login { display: none; }
.vo-js .site-header.nav-compact .nav-menu-btn { display: inline-flex; }
.site-header.nav-compact .nav-sheet:not([hidden]) { display: flex !important; }
@media (min-width: 861px) { .site-header.nav-compact .nav-sheet { left: auto; width: 320px; } }
/* auth-nav:end */