/* Avelune canonical design-system behavior — v1.0.1.
   Values come from tokens.css; this file maps them onto shared components. */
:root{
  --av-midnight:var(--avelune-blue);
  --av-midnight-raised:var(--avelune-dark-navy);
  --av-blue:var(--avelune-blue);
  --av-sage:var(--avelune-sage);
  --av-sage-muted:var(--avelune-sage);
  --av-gold:var(--avelune-gold);
  --av-sand:var(--avelune-cream);
  --av-ivory:var(--avelune-ivory);
  --av-ink:var(--avelune-text-primary);
  --av-muted:var(--avelune-text-muted);
  --av-line:var(--avelune-border-standard);
  --av-danger:var(--avelune-status-destructive);
  --av-radius-control:var(--avelune-radius-control);
  --av-radius-card:var(--avelune-radius-card);
  --av-radius-feature:var(--avelune-radius-feature);
  --av-radius-modal:var(--avelune-radius-modal);
  --av-shadow-card:var(--avelune-shadow-card);
  --av-shadow-modal:var(--avelune-shadow-modal);
  --av-motion-fast:var(--avelune-motion-fast);
  --av-motion:var(--avelune-motion);
  --av-motion-slow:var(--avelune-motion-slow);
  --av-ease:var(--avelune-ease);
  --av-z-sticky:var(--avelune-z-sticky);
  --av-z-menu:var(--avelune-z-menu);
  --av-z-overlay:var(--avelune-z-overlay);
  --av-z-modal:var(--avelune-z-modal);
  --av-z-toast:var(--avelune-z-toast);
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}

/* Canonical authenticated App Shell. Page CSS may arrange content inside
   these primitives, but must not redefine the application identity. */
.aveluneAppPage{
  min-block-size:100dvh;
  overflow-x:clip;
  padding-block-start:env(safe-area-inset-top);
  background:var(--avelune-surface-dark)!important;
  background-image:none!important;
  color:var(--avelune-text-inverse);
  font-family:var(--avelune-font-ui);
}
.aveluneAppHeader{
  inline-size:min(1180px,calc(100% - 48px))!important;
  min-block-size:78px;
  margin-inline:auto;
  padding-block:12px;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:var(--avelune-space-4);
  background:transparent!important;
  background-image:none!important;
  border-block-end:1px solid rgb(var(--avelune-gold-rgb)/.34)!important;
  box-shadow:none!important;
}
.aveluneAppHeaderStart,.aveluneAppHeaderActions{display:flex;align-items:center;gap:var(--avelune-space-4);min-inline-size:0}
.aveluneAppHeader .aveluneBrandLogo--header{inline-size:132px;min-inline-size:112px;max-block-size:48px;object-position:left center}
.aveluneAppHeader .aveluneBack,.aveluneAppHeader .aveluneGhost{background:rgb(var(--avelune-ivory-rgb)/.06)!important;color:var(--avelune-text-inverse)!important;border-color:rgb(var(--avelune-ivory-rgb)/.20)!important;box-shadow:none!important}
.avelunePageBounds{inline-size:min(1180px,calc(100% - 48px))!important;margin-inline:auto!important}
.aveluneControl{border:1px solid rgb(var(--avelune-gold-rgb)/.34);border-radius:var(--avelune-radius-control);background:rgb(var(--avelune-ivory-rgb)/.08);color:var(--avelune-text-inverse)}
.aveluneCard{border:1px solid rgb(var(--avelune-gold-rgb)/.24);border-radius:var(--avelune-radius-card);background:var(--avelune-surface-card);color:var(--avelune-text-primary)}
@media(max-width:620px){
  .aveluneAppHeader,.avelunePageBounds{inline-size:calc(100% - 32px)!important}
  .aveluneAppHeader{min-block-size:70px;padding-block:9px;gap:var(--avelune-space-2)}
  .aveluneAppHeaderStart,.aveluneAppHeaderActions{gap:var(--avelune-space-2)}
  .aveluneAppHeader .aveluneBrandLogo--header{inline-size:112px;min-inline-size:96px;max-block-size:42px}
}

/* Approved logo assets retain intrinsic proportions and clear space. */
.aveluneBrandLogo{
  display:block;
  inline-size:auto;
  block-size:auto;
  max-inline-size:100%;
  object-fit:contain;
  flex:none;
}
.aveluneBrandLogo--primary{inline-size:clamp(190px,28vw,360px);min-inline-size:160px}
.aveluneBrandLogo--header{inline-size:clamp(150px,18vw,230px);min-inline-size:130px}
.aveluneBrandLogo--compact{inline-size:clamp(120px,15vw,178px);min-inline-size:112px}
.aveluneBrandLogo--admin{inline-size:150px;min-inline-size:126px}
.aveluneBrandLogo--boot{inline-size:clamp(170px,32vw,260px);min-inline-size:150px}

/* Typography continuity: retain existing typefaces; normalize hierarchy behavior. */
:where(h1,h2,h3,h4,h5,h6,.title,.brandname){text-wrap:balance}
:where(p,.note,.meta,small){overflow-wrap:anywhere}
:where(.title,.p34TitleRow .title,.avenueAiRec h5,.exploreResultMain b,.walletMiniCopy b,.logisticsCard b){overflow-wrap:anywhere;word-break:normal}

/* Shared control foundation. No visual redesign: existing variants keep their colors. */
:where(button,.btn,.confirm,.ghost,.danger,.mini,.quickBtn,.smallBtn,.linkBtn){
  box-sizing:border-box;
  max-inline-size:100%;
  min-inline-size:0;
  line-height:1.15;
  font-weight:inherit;
  transition:background-color var(--av-motion-fast) var(--av-ease),border-color var(--av-motion-fast) var(--av-ease),color var(--av-motion-fast) var(--av-ease),box-shadow var(--av-motion-fast) var(--av-ease),transform var(--av-motion-fast) var(--av-ease),opacity var(--av-motion-fast) var(--av-ease);
}
.avelunePrimary,.aveluneGhost,.aveluneBack,.aveluneAccount,.aveluneTextButton,[data-av-variant]{
  box-sizing:border-box;
  min-inline-size:0;
  max-inline-size:100%;
  min-block-size:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--avelune-space-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
:where(button.confirm,button.ghost,button.danger,button.btn,button.mini,button.quickBtn,button.smallBtn){
  min-height:40px;
  border-radius:var(--av-radius-control);
}
:where(button.confirm,button.ghost,button.danger,button.btn,button.mini,button.quickBtn,button.smallBtn,.exploreSearchRow button,.placeSearchRow button){
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
:where(button,.btn,.confirm,.ghost,.danger,.mini,.quickBtn,.smallBtn,.linkBtn):focus-visible,
:where(input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--avelune-border-focus);
  outline-offset:2px;
}
:where(button,.btn,.confirm,.ghost,.danger,.mini,.quickBtn,.smallBtn)[disabled],
:where(button,.btn,.confirm,.ghost,.danger,.mini,.quickBtn,.smallBtn)[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.56;
}

/* Canonical button variants. Legacy class names are mapped by avelune-ui-system.js. */
.avelunePrimary,[data-av-variant="primary"]{
  background:var(--avelune-action-primary-bg)!important;
  color:var(--avelune-action-primary-text)!important;
  border:1px solid var(--avelune-border-accent)!important;
}
.avelunePrimary:hover:not([disabled]),[data-av-variant="primary"]:hover:not([disabled]){
  background:var(--avelune-action-hover-bg)!important;
}
.aveluneGhost,[data-av-variant="secondary"]{
  background:var(--avelune-action-secondary-bg)!important;
  color:var(--avelune-action-secondary-text)!important;
  border:1px solid var(--avelune-border-accent)!important;
}
[data-av-variant="quiet"]{
  background:transparent;
  color:var(--avelune-text-secondary);
  border-color:var(--avelune-border-standard);
}
[data-av-variant="destructive"]{
  color:var(--avelune-status-destructive)!important;
  background:var(--avelune-status-error-surface)!important;
  border-color:var(--avelune-status-destructive)!important;
}
:where(button,.btn,.confirm,.ghost,.danger,.mini,.quickBtn,.smallBtn)[disabled],
:where(button,.btn,.confirm,.ghost,.danger,.mini,.quickBtn,.smallBtn)[aria-disabled="true"]{
  background:var(--avelune-action-disabled-bg)!important;
  color:var(--avelune-action-disabled-text)!important;
  border-color:var(--avelune-border-subtle)!important;
}

/* Selected / pressed / processing = one Avelune blue + gold language. */
:where(button.confirm,button.ghost,button.btn,button.mini,button.quickBtn,button.smallBtn):is(:active,.active,.selected,.working,.avLoading,[aria-pressed="true"],[aria-busy="true"]):not(.danger):not(.dangerLite){
  background:var(--avelune-action-selected-bg);
  color:var(--avelune-action-selected-text);
  border-color:var(--avelune-border-accent);
  box-shadow:inset 0 0 0 1px rgb(var(--avelune-gold-rgb)/.68),0 3px 12px rgb(var(--avelune-blue-rgb)/.12);
}
:where(button.confirm,button.ghost,button.btn,button.mini,button.quickBtn,button.smallBtn):active:not([disabled]){transform:translateY(1px)}

/* Async buttons stay contained and stable. Detailed progress belongs outside buttons. */
button.avLoading{
  min-inline-size:var(--av-stable-width,auto);
  max-inline-size:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  position:relative;
}
button.avLoading::before{
  content:"";
  flex:0 0 auto;
  width:13px;height:13px;
  margin-right:7px;
  border:1.5px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  display:inline-block;
  vertical-align:-2px;
  animation:avSpin .72s linear infinite;
}
@keyframes avSpin{to{transform:rotate(360deg)}}

/* Icon controls: common geometry across map, cards, dialogs, hearts and arrows. */
:where(.directionClose,.placeSubviewClose,.exploreClose,.calendarClose,.avenueAiClose,.expandChevron,.p34Info,.favoriteHeart,.avenueAiCarouselArrow,.walletLoopArrow){
  inline-size:40px;
  block-size:40px;
  min-inline-size:40px;
  min-block-size:40px;
  padding:0;
  display:inline-grid;
  place-items:center;
  line-height:1;
  border-radius:999px;
}

/* Forms share geometry and focus treatment without changing their content/layout. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){
  min-height:42px;
  max-width:100%;
  border-radius:var(--av-radius-control);
  border-color:var(--av-line);
  transition:border-color var(--av-motion-fast) var(--av-ease),box-shadow var(--av-motion-fast) var(--av-ease),background-color var(--av-motion-fast) var(--av-ease);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea):focus{
  border-color:var(--av-gold);
  box-shadow:0 0 0 3px rgba(198,162,110,.14);
}
textarea{resize:vertical}

/* Card family: normalize radius and clipping only; existing surfaces/padding remain. */
:where(.itineraryCard,.avenueAiRec,.exploreNativeResult,.exploreResultCard,.logisticsCard,.reservationMiniCard,.favoriteCard,.maybeCard,.recommendCard,.walletMiniCard,.walletCategoryCard,.shareCard,.directionChoice,.manualTypeCard,.reservationActionCard){
  border-radius:var(--av-radius-card);
}
:where(.placeSubviewCard,.exploreAddCard,.tripCalendarCard,.directionsChooserCard,.avenueAiCard){
  border-radius:var(--av-radius-modal);
  box-shadow:var(--av-shadow-modal);
}

/* Dialog / overlay continuity. */
dialog{border:0;background:transparent;padding:clamp(10px,2.5vw,24px);max-width:100vw;max-height:100dvh}
dialog::backdrop{background:rgba(4,17,23,.52);backdrop-filter:blur(3px)}
dialog> :first-child{max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)));overflow:auto;overscroll-behavior:contain}
:where(.modalActions,.actions,.links,.p34Actions,.avenueAiActions,.exploreResultActions,.p34SearchActions){gap:8px}

/* Shared horizontal carousel language for standard card tracks. */
:where(.avenueAiRecommendations,.avCarouselTrack){
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:4px;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
:where(.avenueAiRecommendations,.avCarouselTrack)::-webkit-scrollbar{display:none}
:where(.avenueAiRecommendations,.avCarouselTrack)>*{scroll-snap-align:start}
:where(.avenueAiCarouselArrow,.walletLoopArrow){touch-action:manipulation}

/* Tables are allowed to scroll inside their own frame instead of breaking the page. */
:where(.tablePanel){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
:where(.tablePanel table){min-width:max-content}

/* Prevent long content from breaking cards and action rows. */
:where(.itineraryCard,.avenueAiRec,.exploreNativeResult,.logisticsCard,.reservationMiniCard,.walletMiniCard,.featureRow,.metric,.panel){min-width:0}
:where(.p34Actions,.avenueAiActions,.exploreResultActions,.p34SearchActions,.modalActions,.links,.actions){flex-wrap:wrap}
:where(.p34Actions,.avenueAiActions,.exploreResultActions,.p34SearchActions,.modalActions,.links,.actions)>*{min-width:0;max-width:100%}

/* Stable loading/empty regions. */
:where(.dashboardLoading,.avenueAiLoading,.aiLoading){min-height:72px}
:where(.emptyPlan,.exploreNoResults,.avenueAiNoOptions,.walletEmpty,.calendarEmpty){overflow-wrap:anywhere}

/* Deliberate stacking layers rather than arbitrary escalation. */
:where(.sticky,.isSticky,.heroHeader,.tripHeader){z-index:var(--av-z-sticky)}
:where(.addressSuggestions,.sharedUserPopup,.quickPopup){z-index:var(--av-z-menu)}
:where(dialog){z-index:var(--av-z-modal)}
#toast,.toast{z-index:var(--av-z-toast)}

/* Mobile / touch readiness. Experience parity, not scaled desktop. */
@media (max-width:760px){
  .aveluneAuthView .authBrand:not(.compact){display:flex;justify-self:center;margin:0 0 2px}
  .aveluneAuthView .aveluneBrandLogo--primary{inline-size:min(168px,48vw);min-inline-size:136px}
  .dashboardHeader .aveluneBrandLogo--header{inline-size:138px;min-inline-size:118px}
  .aveluneMiniBrand .aveluneBrandLogo--compact{inline-size:118px;min-inline-size:104px}
  .avelunePrimary,.aveluneGhost,.aveluneBack,.aveluneAccount,.aveluneTextButton,[data-av-variant]{min-block-size:44px}
  :where(button.confirm,button.ghost,button.danger,button.btn,button.mini,button.quickBtn,button.smallBtn,
  .directionClose,.placeSubviewClose,.exploreClose,.calendarClose,.avenueAiClose,.expandChevron,.p34Info,.favoriteHeart,.avenueAiCarouselArrow,.walletLoopArrow){
    min-height:44px;
  }
  :where(.directionClose,.placeSubviewClose,.exploreClose,.calendarClose,.avenueAiClose,.expandChevron,.p34Info,.favoriteHeart,.avenueAiCarouselArrow,.walletLoopArrow){
    inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px;
  }
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){min-height:44px;font-size:16px}
  :where(.exploreSearchRow,.placeSearchRow){min-width:0}
  :where(.exploreSearchRow input,.placeSearchRow input){min-width:0;width:100%}
  :where(.p34Actions,.avenueAiActions,.exploreResultActions,.p34SearchActions,.modalActions,.actions,.links){row-gap:8px}
  dialog{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  :where(.mobile-nav,.mobileNav,.bottomNav,.bottomToolbar){padding-bottom:max(8px,env(safe-area-inset-bottom))}
  :where(.heroHeader,.tripHeader,.mobileHeader){padding-top:max(0px,env(safe-area-inset-top))}
  .avenueAiCarouselArrow{display:none}
}

@media (max-width:390px){
  :where(.modalActions,.actions,.p34Actions,.avenueAiActions,.exploreResultActions){align-items:stretch}
  :where(.modalActions,.actions,.p34Actions,.avenueAiActions,.exploreResultActions)>button{flex:1 1 44%;}
}

@media (max-width:340px){
  :where(.modalActions,.actions,.p34Actions,.avenueAiActions,.exploreResultActions)>button{flex-basis:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}