/* MIO V22 production interface layer */
:root {
  --v22-wine: #5b1019;
  --v22-wine-deep: #260307;
  --v22-gold: #c79b43;
  --v22-cream: #fffaf1;
  --v22-ink: #2f1114;
  --v22-muted: #74645d;
  --v22-line: rgba(91, 16, 25, 0.14);
  --v22-radius: 18px;
  --v22-shadow: 0 24px 64px rgba(45, 5, 10, 0.13);
  --v22-content: min(1280px, calc(100vw - clamp(28px, 6vw, 96px)));
}
* { box-sizing: border-box; }
html { min-width: 320px; overflow-x: hidden; scroll-behavior: smooth; }
body.mio-v22 { min-width: 320px; overflow-x: clip; text-rendering: optimizeLegibility; }
body.mio-v22 img, body.mio-v22 video, body.mio-v22 iframe, body.mio-v22 canvas { max-width: 100%; }
body.mio-v22 :where(button, a, input, select, textarea, summary) { -webkit-tap-highlight-color: transparent; }
body.mio-v22 :where(button, .button, input, select) { min-height: 44px; }
body.mio-v22 :where(button, .button, a, summary) { touch-action: manipulation; }
body.mio-v22 :where(input, select, textarea) { max-width: 100%; }
body.mio-v22 :where(input, select, textarea):focus-visible,
body.mio-v22 :where(button, a, summary):focus-visible {
  outline: 3px solid rgba(199, 155, 67, 0.42);
  outline-offset: 3px;
}
body.mio-v22 :where(.shell, .mio-nav-shell, .mio-footer-shell, .content, .hero, .workspace) { min-width: 0; }
body.mio-v22 :where(.field-grid, .metric-grid, .metrics, .service-grid, .option-list, .record-list, .dashboard-grid) > * { min-width: 0; }
body.mio-v22 :where(table) { width: 100%; }
body.mio-v22 :where(.table-wrap, .table-shell, .data-table-wrap) { overflow-x: auto; overscroll-behavior-inline: contain; }
body.mio-v22 :where(.modal-card, .success-card) { max-height: min(88dvh, 920px); overflow: auto; overscroll-behavior: contain; }
body.mio-v22 :where(.modal, .confirm, .success-modal) { padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }

.v22-disclosure {
  margin-top: clamp(18px, 3vw, 28px);
  border: 1px solid var(--v22-line);
  border-radius: var(--v22-radius);
  background: rgba(255,255,255,.74);
  box-shadow: 0 16px 40px rgba(47, 7, 12, .08);
  overflow: clip;
}
.v22-disclosure > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 16px 20px;
  color: var(--v22-wine);
  background: linear-gradient(135deg, #fffdf8, #f7ead4);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}
.v22-disclosure > summary::-webkit-details-marker { display: none; }
.v22-disclosure > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: var(--v22-wine);
  font-size: 1.15rem;
  line-height: 1;
}
.v22-disclosure[open] > summary::after { content: "−"; }
.v22-disclosure__body { padding: clamp(18px, 3vw, 30px); }
.v22-disclosure--story { background: rgba(255,250,241,.82); }
.v22-disclosure--story .v22-disclosure__body { display: grid; gap: clamp(22px, 4vw, 46px); }

.v22-home-concierge {
  position: relative;
  overflow: hidden;
  padding: clamp(68px, 9vw, 120px) 0;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(213, 174, 95, .24), transparent 28%),
    linear-gradient(140deg, #260307, #68111d 62%, #35060b);
}
.v22-home-concierge::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -190px;
  bottom: -220px;
  border: 1px solid rgba(226,188,112,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(226,188,112,.035);
}
.v22-home-concierge__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(560px, 1.18fr);
  gap: clamp(28px, 5vw, 62px);
  align-items: center;
}
.v22-home-concierge .eyebrow { color: #e8c77f; }
.v22-home-concierge h2 {
  max-width: 760px;
  margin: 12px 0 16px;
  color: #fff;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.35rem, 5vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.04em;
}
.v22-home-concierge h2 em { color: #e8c77f; font-weight: 500; }
.v22-home-concierge__copy { max-width: 640px; margin: 0 0 24px; color: rgba(255,255,255,.72); line-height: 1.7; }
.v22-home-concierge__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.v22-home-concierge__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.v22-service-tile {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
  min-height: 132px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  color: #fff;
  background: rgba(255,255,255,.075);
  backdrop-filter: blur(12px);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.v22-service-tile:hover { transform: translateY(-4px); border-color: rgba(232,199,127,.48); background: rgba(255,255,255,.11); }
.v22-service-tile i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #e8c77f; background: rgba(255,255,255,.08); }
.v22-service-tile b { display: block; margin: 2px 0 6px; font-family: "Playfair Display", serif; font-size: 1.08rem; }
.v22-service-tile small { color: rgba(255,255,255,.66); line-height: 1.45; }

.mio-v22-mobile-dock { display: none; }
@media (max-width: 1050px) {
  .v22-home-concierge__layout { grid-template-columns: 1fr; }
  body.mio-v22 :where(.topbar, .section-heading) { align-items: flex-start; }
}
@media (max-width: 760px) {
  body.mio-v22 { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  body.mio-v22 :where(.hero-actions, .topbar-actions, .modal-actions, .venue-actions) { align-items: stretch; }
  body.mio-v22 :where(.hero-actions, .topbar-actions, .modal-actions, .venue-actions) > :where(a,button) { width: 100%; justify-content: center; }
  body.mio-v22 :where(.field-grid, .ride-grid, .ride-fields-grid, .metrics, .metric-grid, .dashboard-grid, .service-grid) { grid-template-columns: 1fr !important; }
  body.mio-v22 :where(.modal-card, .success-card) { width: 100%; max-height: calc(100dvh - 28px); border-radius: 18px; }
  body.mio-v22 :where(input, select, textarea) { font-size: 16px; }
  .v22-home-concierge__grid { grid-template-columns: 1fr; }
  .v22-service-tile { min-height: 0; }
  .v22-disclosure > summary { padding: 15px 16px; }
  .mio-v22-mobile-dock {
    position: fixed;
    z-index: 9998;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 7px;
    border: 1px solid rgba(226,188,112,.22);
    border-radius: 18px;
    background: rgba(38,3,7,.94);
    box-shadow: 0 18px 52px rgba(22,2,5,.34);
    backdrop-filter: blur(18px);
  }
  .mio-v22-mobile-dock a {
    display: grid;
    place-items: center;
    min-height: 50px;
    padding: 6px 4px;
    border-radius: 12px;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    font-size: .66rem;
    font-weight: 800;
    text-align: center;
  }
  .mio-v22-mobile-dock a[aria-current="page"], .mio-v22-mobile-dock a:hover { color: #fff; background: rgba(226,188,112,.14); }
  .mio-v22-mobile-dock b { display: block; color: #e2bc70; font-size: 1rem; line-height: 1; }
}
@media (min-width: 1700px) {
  body.mio-v22 :where(.shell, .mio-nav-shell, .mio-footer-shell) { width: min(1480px, calc(100vw - 120px)); }
  body.mio-v22 :where(.main > .content, .content) { max-width: 1500px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  .mio-v22-mobile-dock, .mio-mobile-actions, .mio-nav-toggle, .mobile-menu { display: none !important; }
  body.mio-v22 { padding-bottom: 0 !important; }
}