/* Material 3 motion: https://m3.material.io/styles/motion */
:root{
  --md-sys-motion-easing-emphasized:cubic-bezier(0.2,0,0,1);
  --md-sys-motion-easing-emphasized-decelerate:cubic-bezier(0.05,0.7,0.1,1);
  --md-sys-motion-easing-emphasized-accelerate:cubic-bezier(0.3,0,0.8,0.15);
  --md-sys-motion-easing-standard:cubic-bezier(0.2,0,0,1);
  --md-sys-motion-easing-standard-decelerate:cubic-bezier(0,0,0,1);
  --md-sys-motion-easing-standard-accelerate:cubic-bezier(0.3,0,1,1);
  --md-sys-motion-easing-linear:linear;
  --md-sys-motion-duration-short1:50ms;
  --md-sys-motion-duration-short2:100ms;
  --md-sys-motion-duration-short3:150ms;
  --md-sys-motion-duration-short4:200ms;
  --md-sys-motion-duration-medium1:250ms;
  --md-sys-motion-duration-medium2:300ms;
  --md-sys-motion-duration-medium3:350ms;
  --md-sys-motion-duration-medium4:400ms;
  --md-sys-motion-duration-long2:500ms;
  --md-sys-motion-duration-fade-out:90ms;
  interpolate-size:allow-keywords;
}

/* ---- Peer pages: shared axis Y. Moving to a later tab rises from below; moving
        back to an earlier tab descends from above. Both use the M3 enter curve. ---- */
.home-view{animation:none}
.md-page-enter{
  --md-enter-shift:16px;
  animation:md-shared-axis-in 210ms var(--md-sys-motion-easing-emphasized-decelerate) both;
}
.md-page-enter[data-motion=back]{--md-enter-shift:-16px}
.md-page-leave{
  --md-leave-shift:-12px;
  animation:md-shared-axis-out var(--md-sys-motion-duration-fade-out,90ms) var(--md-sys-motion-easing-standard-accelerate) both;
}
.md-page-leave[data-motion=back]{--md-leave-shift:12px}
@keyframes md-shared-axis-in{from{opacity:0;transform:translateY(var(--md-enter-shift,16px))}to{opacity:1;transform:none}}
@keyframes md-shared-axis-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(var(--md-leave-shift,-12px))}}

/* ---- Navigation indicator: the active pill grows from its centre, and the icon
        inside it inverts — the line colour and the badge colour trade places.
        In light themes that means dark lines on a light badge become light lines on a
        dark badge; in dark themes the same swap reads the other way round.
        site.css hides the legacy button::before pill, so the icon badge is the
        indicator. ---- */
.home-nav-icon{position:relative;isolation:isolate;transition:background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard)}
.home-nav-icon:before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--md-sys-color-on-secondary-container);
  transform:scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.home-nav button[aria-selected=true] .home-nav-icon{background:transparent}
.home-nav button[aria-selected=true] .home-nav-icon:before{transform:scaleX(1);opacity:1}

/* A second copy of the same symbol carries the swapped line colour. It is revealed by
   the same centre-out sweep as the badge, so the two colours trade places as the
   badge opens instead of snapping at the end. */
.home-nav button .home-nav-icon svg.home-nav-ink{
  position:absolute;
  left:50%;
  top:50%;
  margin:0;
  transform:translate(-50%,-50%);
  z-index:2;
  color:var(--md-sys-color-secondary-container);
  clip-path:inset(0 50% 0 50%);
  opacity:0;
  pointer-events:none;
  transition:
    clip-path var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
    opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.home-nav button[aria-selected=true] .home-nav-icon svg.home-nav-ink{
  clip-path:inset(0 0 0 0);
  opacity:1;
}
.home-nav-icon:after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:currentColor;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.home-nav button:hover .home-nav-icon:after{opacity:.08}
.home-nav button:active .home-nav-icon:after{opacity:.1}
.home-nav button:focus-visible .home-nav-icon:after{opacity:.1}
.home-nav-icon svg{position:relative;z-index:1}

.admin-tabs button,.form-tabs button,.city-tabs button,.home-map-venues button{
  transition:background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
/* ---- Segmented buttons: the tick fades in and opens up, the label shifts with it. ---- */
.home-map-venues button:before,.city-tabs button:before,.debug-segmented button:before{
  content:'✓';
  display:inline-block;
  width:0;
  margin-right:0;
  opacity:0;
  overflow:hidden;
  vertical-align:0;
  font-weight:700;
  background:none;
  border:0;
  box-shadow:none;
  border-radius:0;
  transition:width var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),margin-right var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
}
.home-map-venues button[aria-pressed=true]:before,.city-tabs button[aria-selected=true]:before,.debug-segmented button[aria-pressed=true]:before{
  width:1em;
  margin-right:6px;
  opacity:1;
}

/* ---- Disclosure markers: one chevron that turns over as the section opens. ---- */
.home-faq summary:after,.account-features>summary:after{
  content:'';
  position:absolute;
  top:50%;
  right:6px;
  width:7px;
  height:7px;
  margin-top:0;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  color:var(--md-sys-color-primary,#1b6585);
  transform:translateY(-70%) rotate(45deg);
  transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.home-faq[open] summary:after,.account-features[open]>summary:after{transform:translateY(-30%) rotate(225deg)}
.account-features>summary:after{right:15px}

/* ---- Secondary menus: expand and collapse the details container. ---- */
details::details-content{
  height:0;
  overflow:clip;
  opacity:0;
  transition:
    height var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate),
    opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-emphasized-accelerate),
    content-visibility var(--md-sys-motion-duration-short4) allow-discrete;
}
details[open]::details-content{
  height:auto;
  opacity:1;
  transition:
    height var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate),
    opacity var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized-decelerate);
}
@starting-style{
  details[open]::details-content{height:0;opacity:0}
}
@supports not (interpolate-size:allow-keywords){
  details::details-content{height:auto;opacity:1;transition:none}
}

/* ---- State layers and ripples. Scoped to the platform shells so the 3D venue
        overlays (including #selection) keep their fixed positioning. ---- */
body:not(.tour-shell) :is(button,.button,.home-quick-link,.home-friend-link):not(.theme-drawer *, .home-nav *){
  position:relative;
  isolation:isolate;
}
body:not(.tour-shell) :is(button,.button,.home-quick-link,.home-friend-link):not(.theme-drawer *, .home-nav *):after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:currentColor;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
body:not(.tour-shell) :is(button,.button,.home-quick-link,.home-friend-link):not(.theme-drawer *, .home-nav *):hover:after{opacity:.08}
body:not(.tour-shell) :is(button,.button,.home-quick-link,.home-friend-link):not(.theme-drawer *, .home-nav *):active:after{opacity:.1}
body:not(.tour-shell) :is(button,.button,.home-quick-link,.home-friend-link):not(.theme-drawer *, .home-nav *):focus-visible:after{opacity:.1}
body:not(.tour-shell) :is(button:disabled,button[disabled]):after{opacity:0}

/* List surfaces get the hover tint only, so a child button does not flash the whole row. */
body:not(.tour-shell) :is(.companion-entry,.freebie-item){position:relative;isolation:isolate}
body:not(.tour-shell) :is(.companion-entry,.freebie-item):after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:currentColor;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
body:not(.tour-shell) :is(.companion-entry,.freebie-item):hover:after{opacity:.08}
body:not(.tour-shell) .table-scroll tbody tr:hover{background:color-mix(in srgb,currentColor 8%,transparent)}

.md-ripple-layer{
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.md-ripple-dot{
  position:absolute;
  width:var(--md-ripple-size,120px);
  height:var(--md-ripple-size,120px);
  margin:calc(var(--md-ripple-size,120px)/-2) 0 0 calc(var(--md-ripple-size,120px)/-2);
  border-radius:50%;
  background:currentColor;
  opacity:.12;
  transform:scale(0);
  animation:md-ripple-out var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard-decelerate) forwards;
}
@keyframes md-ripple-out{to{transform:scale(1);opacity:0}}

/* ---- Lists that arrive from the server: one M3 linear indicator, then a short stagger. ---- */
.md-linear{
  position:relative;
  height:4px;
  margin:0 0 14px;
  border-radius:2px;
  overflow:hidden;
  background:var(--md-sys-color-surface-container-highest,#e2e8ee);
}
.md-linear>i{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:42%;
  border-radius:inherit;
  background:var(--md-sys-color-primary,#1b6585);
  animation:md-linear-run 1.3s var(--md-sys-motion-easing-emphasized) infinite;
}
@keyframes md-linear-run{from{transform:translateX(-105%)}to{transform:translateX(240%)}}
.md-linear.is-determinate>i{animation:none;transform:none;width:var(--md-progress,0%);transition:width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized)}
.venue-loading{background:var(--md-sys-color-surface);gap:12px}
html body.tour-shell #scene:has(.venue-loading:not([hidden])),html body.tour-shell #scene:has(#error:not([hidden])){z-index:30}
.venue-loading-bar{width:min(240px,60vw);margin:0 auto}
.venue-loading-label{margin:0;font-size:14px;letter-spacing:.02em;color:var(--md-sys-color-on-surface-variant)}
.venue-loading.is-pending .venue-loading-bar,.venue-loading.is-pending .venue-loading-label{visibility:hidden}
.venue-loading.is-leaving{pointer-events:none;animation:md-fade-out var(--md-sys-motion-duration-fade-out,90ms) var(--md-sys-motion-easing-standard-accelerate) both}
html body.tour-shell #error #reload{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border-color:transparent;margin-block:0;margin-inline:auto}

.md-stagger .md-enter{animation:md-stagger-in var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate) both;animation-delay:calc(var(--md-index,0)*20ms)}
@keyframes md-stagger-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- Menus and dialogs enter on an emphasized decelerate, and leave faster. ---- */
#venue-tools[popover]{
  opacity:0;
  transform:scale(.8);
  transform-origin:top center;
  transition:
    opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate),
    transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate),
    overlay var(--md-sys-motion-duration-short4) allow-discrete,
    display var(--md-sys-motion-duration-short4) allow-discrete;
}
#venue-tools[popover]:popover-open{
  opacity:1;
  transform:none;
  transition:
    opacity var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized-decelerate),
    transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate),
    overlay var(--md-sys-motion-duration-medium2) allow-discrete,
    display var(--md-sys-motion-duration-medium2) allow-discrete;
}
@starting-style{
  #venue-tools[popover]:popover-open{opacity:0;transform:scale(.8)}
}

dialog:not(.theme-drawer){
  opacity:0;
  transform:scale(.8);
  transition:
    opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate),
    transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate),
    overlay var(--md-sys-motion-duration-short4) allow-discrete,
    display var(--md-sys-motion-duration-short4) allow-discrete;
}
dialog:not(.theme-drawer)[open]{
  opacity:1;
  transform:none;
  transition:
    opacity var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized-decelerate),
    transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate),
    overlay var(--md-sys-motion-duration-medium2) allow-discrete,
    display var(--md-sys-motion-duration-medium2) allow-discrete;
}
@starting-style{
  dialog:not(.theme-drawer)[open]{opacity:0;transform:scale(.8)}
}
dialog::backdrop{
  opacity:0;
  transition:opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard-accelerate),overlay var(--md-sys-motion-duration-short4) allow-discrete,display var(--md-sys-motion-duration-short4) allow-discrete;
}
dialog[open]::backdrop{
  opacity:1;
  transition:opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard-decelerate);
}
@starting-style{
  dialog[open]::backdrop{opacity:0}
}

dialog.theme-drawer{
  opacity:1;
  transform:translateX(100%);
  transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate),overlay var(--md-sys-motion-duration-short4) allow-discrete,display var(--md-sys-motion-duration-short4) allow-discrete;
}
dialog.theme-drawer[open]{
  transform:none;
  transition:transform var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate),overlay var(--md-sys-motion-duration-medium4) allow-discrete,display var(--md-sys-motion-duration-medium4) allow-discrete;
}
@starting-style{
  dialog.theme-drawer[open]{opacity:1;transform:translateX(100%)}
}

@view-transition{navigation:auto}
::view-transition-old(root){animation:md-fade-out 90ms var(--md-sys-motion-easing-standard-accelerate) both}
::view-transition-new(root){animation:md-fade-in 210ms var(--md-sys-motion-easing-emphasized-decelerate) 90ms both}
@keyframes md-fade-out{to{opacity:0}}
@keyframes md-fade-in{from{opacity:0}}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  /* `*` does not match pseudo-elements, so the marker, pill, tick and bar are
     switched off explicitly instead of relying on the global rule. */
  .home-faq summary:after,.account-features>summary:after,
  .home-nav-icon:before,.home-nav-icon:after,
  .home-nav button .home-nav-icon svg.home-nav-ink,
  .home-map-venues button:before,.city-tabs button:before,.debug-segmented button:before,
  .md-linear>i,.venue-loading.is-leaving{transition:none!important;animation:none!important}
  .md-linear:not(.is-determinate)>i{width:100%;opacity:.4}
  .md-linear.is-determinate>i{width:var(--md-progress,0%);opacity:1}
  .md-ripple-layer{display:none}
  .md-stagger .md-enter{animation:none}
  .home-nav button:before{transform:none}
}