/*
 MoneyBuddy Sidekick — Production Hardening
 Low-risk reliability/accessibility rules loaded after the existing design system.
*/

:root{
  --mb-focus-ring:#C9A24A;
}

/* Clear keyboard focus without changing pointer/touch visuals. */
:where(a,button,input,select,textarea,[role="button"],[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--mb-focus-ring) 82%,white);
  outline-offset:3px;
}

/* Prevent accidental iOS zoom/layout weirdness on controls while keeping accessible sizing. */
@media(max-width:767px){
  input,select,textarea{
    font-size:16px!important;
  }
  button,a,[role="button"]{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
}

/* Ensure hidden overlays never capture taps. */
.hidden,
[hidden]{
  pointer-events:none;
}
.hidden * ,
[hidden] *{
  pointer-events:none;
}

/* But visible app layers behave normally. */
#moneyBuddyMobileNav,
#safetyCushionDrawer.is-open,
#buddy-modal:not(.hidden),
#add-entry-modal:not(.hidden),
#edit-entry-modal:not(.hidden),
#bill-modal:not(.hidden),
#asset-modal:not(.hidden),
#debt-modal:not(.hidden),
#sign-in-modal:not(.hidden){
  pointer-events:auto;
}

/* Reduce layout flashing from dynamic Buddy copy. */
#heroBuddyMessage{
  font-synthesis:none;
  text-wrap:pretty;
}
#buddyHeroCard{
  contain:layout paint;
}

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

/* Better mobile safe-area handling for the page itself. */
@media(max-width:767px){
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
}

/* Offline state is informative, not disruptive. */
#moneyBuddyConnectionBanner{
  position:fixed;
  left:50%;
  top:calc(10px + env(safe-area-inset-top));
  transform:translateX(-50%);
  z-index:10080;
  max-width:min(92vw,520px);
  padding:9px 14px;
  border-radius:999px;
  background:#1E2A3A;
  color:white;
  font:700 12px/1.25 Inter,Arial,sans-serif;
  box-shadow:0 14px 30px -18px rgba(18,63,49,.48);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
#moneyBuddyConnectionBanner.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(2px);
}