/* Isolated home-account appearance. Remove this stylesheet's link to undo.
 * Both palettes are authored here, after the generated legacy color bridge.
 */
/* The wrapper has no layout box while the experiment is switched off. */
#home-next-layout .next-home-account-stage { display: contents; }
#home-next-layout .account-aura-backdrop { display: none; }

:where(html[data-account-aura="on"]) #home-next-layout .next-home-account-stage {
  --aura-base: rgb(255 255 255 / 65%);
  /* Give each moving halo its own blue from the brand palette. */
  --aura-blue-rgb: 0 86 245;
  --aura-blue-soft-rgb: 14 132 255;
  --aura-blue-sky-rgb: 56 164 255;
  --aura-blue-alpha: 32%;
  --aura-blue-soft-alpha: 26%;
  --aura-blue-sky-alpha: 24%;
  --aura-blue: rgb(var(--aura-blue-rgb) / var(--aura-blue-alpha));
  --aura-blue-soft: rgb(var(--aura-blue-soft-rgb) / var(--aura-blue-soft-alpha));
  --aura-blue-sky: rgb(var(--aura-blue-sky-rgb) / var(--aura-blue-sky-alpha));
  --aura-pearl: rgb(255 255 255 / 86%);
  --aura-sheen: rgb(255 255 255 / 46%);
  --aura-edge: rgb(255 255 255 / 82%);
  --aura-divider: rgb(102 126 160 / 18%);
  --aura-action: rgb(255 255 255 / 60%);
  --aura-action-hover: rgb(255 255 255 / 86%);
  --aura-receive: rgb(244 249 255 / 44%);
  --aura-shadow: 0 12px 30px rgb(0 86 245 / 7%),
    0 3px 9px rgb(0 86 245 / 3%);
  display: block;
  position: relative;
  isolation: isolate;
}

/* This glow belongs to the surrounding backdrop, beyond the card's edges. */
:where(html[data-account-aura="on"]) #home-next-layout .account-aura-backdrop {
  display: block;
  position: absolute;
  inset: -22px -16px;
  z-index: -1;
  overflow: hidden;
  border-radius: 44px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, var(--aura-pearl), transparent 72%);
  filter: blur(12px);
}

/* Separate transformable layers preserve the approved gradient order and tint.
 * Only these decorative lights move; the pearl base and card stay still.
 */
:where(html[data-account-aura="on"]) #home-next-layout .account-aura-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

:where(html[data-account-aura="on"]) #home-next-layout .account-aura-glow-soft {
  background: radial-gradient(ellipse at 3% 78%, var(--aura-blue-soft), transparent 64%);
}

:where(html[data-account-aura="on"]) #home-next-layout .account-aura-glow-primary {
  background: radial-gradient(ellipse at 94% 6%, var(--aura-blue), transparent 62%);
}

:where(html[data-account-aura="on"]) #home-next-layout .account-aura-glow-sky {
  background: radial-gradient(ellipse 155.6% 147.1% at 45% 52%, var(--aura-blue-sky), transparent 64%);
}

:where(html[data-account-aura="on"]) #home-next-layout .next-home-account-stage[data-aura-motion="running"] .account-aura-glow {
  will-change: transform, opacity;
}

/* Motion spans Home's full width, including the transparent header above the
 * card. Clip at the screen edges, not at the old rounded card-sized backdrop.
 * The original composition above remains the reduced-motion/static fallback.
 */
:where(html[data-account-aura="on"]) #home-next-layout .next-home-account-stage:is([data-aura-motion="running"], [data-aura-motion="paused"]) .account-aura-backdrop {
  inset: calc(-1 * (var(--aura-header-extent) + var(--aura-home-gap))) calc(-1 * var(--aura-home-gutter)) -80px;
  border-radius: 0;
  background: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
}

:where(html[data-account-aura="on"]) #home-next-layout .next-home-account-stage:is([data-aura-motion="running"], [data-aura-motion="paused"])::before {
  content: "";
  position: absolute;
  inset: -22px -16px;
  z-index: -1;
  border-radius: 44px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, var(--aura-pearl), transparent 72%);
  filter: blur(12px);
}

:where(html[data-account-aura="on"]) #home-next-layout .next-home-account-stage:is([data-aura-motion="running"], [data-aura-motion="paused"]) .account-aura-glow {
  border-radius: 0;
  /* 120% alpha × animated opacity (2/3–1) gives 80–120% of the base alpha. */
  opacity: calc(1 / 1.2);
  background: radial-gradient(ellipse 65% 60% at center, rgb(var(--aura-blue-rgb) / calc(var(--aura-blue-alpha) * 1.2)), transparent 72%);
}

:where(html[data-account-aura="on"]) #home-next-layout .next-home-account-stage:is([data-aura-motion="running"], [data-aura-motion="paused"]) .account-aura-glow-soft {
  background: radial-gradient(ellipse 70% 65% at center, rgb(var(--aura-blue-soft-rgb) / calc(var(--aura-blue-soft-alpha) * 1.2)), transparent 72%);
}

:where(html[data-account-aura="on"]) #home-next-layout .next-home-account-stage:is([data-aura-motion="running"], [data-aura-motion="paused"]) .account-aura-glow-sky {
  background: radial-gradient(ellipse 120% 130% at center, rgb(var(--aura-blue-sky-rgb) / calc(var(--aura-blue-sky-alpha) * 1.2)), transparent 72%);
}

:where(html[data-account-aura="on"]) #home-next-layout .next-home-account {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--aura-base);
  border-color: var(--aura-edge);
  box-shadow: var(--aura-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(110%);
  backdrop-filter: blur(20px) saturate(110%);
}

/* The card itself has a neutral glass reflection, with no colored overlay. */
:where(html[data-account-aura="on"]) #home-next-layout .next-home-account::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* A broad reflection and inset light give the surface its glass depth. */
:where(html[data-account-aura="on"]) #home-next-layout .next-home-account::after {
  background: linear-gradient(125deg,
    var(--aura-sheen) 0%, transparent 43%, transparent 66%,
    var(--aura-sheen) 100%);
  box-shadow: inset 0 1px 0 var(--aura-edge),
    inset 1px 0 0 var(--aura-sheen), inset 0 -1px 0 var(--aura-sheen);
}

:where(html[data-account-aura="on"]) #home-next-layout .next-home-account > * {
  position: relative;
  z-index: 1;
}

:where(html[data-account-aura="on"]) #home-next-layout .next-home-account .next-home-account-actions {
  border-top-color: var(--aura-divider);
}

:where(html[data-account-aura="on"]) #home-next-layout .next-home-account .next-home-account-actions > button > span {
  background: var(--aura-action);
  border-color: transparent;
  box-shadow: inset 0 1px 0 var(--aura-edge),
    0 3px 8px rgb(75 100 140 / 5%);
}

:where(html[data-account-aura="on"]) #home-next-layout .next-home-account .next-home-account-actions > button[data-hub-target="receive"] > span {
  color: var(--biz-icon);
  background: linear-gradient(145deg,
    var(--aura-edge), transparent 56%, var(--aura-sheen)), var(--aura-receive);
  box-shadow: inset 0 1px 1px var(--aura-edge),
    inset 0 -1px 0 var(--aura-sheen), 0 3px 8px rgb(75 100 140 / 5%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

:where(html[data-account-aura="on"]) #home-next-layout .next-home-account .next-home-account-actions > button[data-hub-target="transfer"] > span {
  color: #fff;
  background: linear-gradient(145deg, var(--biz-brand-bright, #0e84ff), var(--biz-brand, #0056f5) 70%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 38%),
    0 5px 12px rgb(0 86 245 / 20%);
}

:where(html[data-account-aura="on"]) #home-next-layout .next-home-account button:focus-visible {
  outline: 2px solid var(--biz-focus, var(--next-accent));
  outline-offset: 4px;
  border-radius: 12px;
}

@media (hover: hover) {
  :where(html[data-account-aura="on"]) #home-next-layout .next-home-account .next-home-account-actions > button:not([data-hub-target="transfer"]):hover > span {
    background-color: var(--aura-action-hover);
  }
}

/* Shared dark glass for the Home and Business overview cards. */
html[data-color-scheme="dark"]:where([data-account-aura="on"]) .phone {
  --overview-glass: rgb(25 33 45 / 80%);
  --overview-sheen: rgb(173 201 255 / 6%);
  --overview-edge: rgb(184 209 255 / 18%);
  --overview-shadow: 0 12px 30px rgb(0 0 0 / 22%), 0 3px 12px rgb(40 66 123 / 12%);
}

html[data-color-scheme="dark"]:where([data-account-aura="on"]) #home-next-layout .next-home-account-stage {
  --aura-base: var(--overview-glass);
  --aura-blue-alpha: 18%;
  --aura-blue-soft-alpha: 15%;
  --aura-blue-sky-alpha: 12%;
  --aura-pearl: rgb(25 33 45 / 24%);
  --aura-sheen: var(--overview-sheen);
  --aura-edge: var(--overview-edge);
  --aura-divider: rgb(176 198 233 / 15%);
  --aura-action: rgb(171 198 237 / 10%);
  --aura-action-hover: rgb(171 198 237 / 19%);
  --aura-receive: rgb(132 181 255 / 6%);
  --aura-shadow: var(--overview-shadow);
}

/* Keep the native high-contrast palette and visible control boundaries. */
@media (forced-colors: active) {
  :where(html[data-account-aura="on"]) #home-next-layout .next-home-account {
    background: Canvas;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :where(html[data-account-aura="on"]) #home-next-layout .account-aura-backdrop,
  :where(html[data-account-aura="on"]) #home-next-layout .next-home-account::after { display: none; }
  :where(html[data-account-aura="on"]) #home-next-layout .next-home-account .next-home-account-actions > button > span {
    outline: 1px solid ButtonText;
  }
}

/* The control remains keyboard-visible when the account effect is off. */
#account-aura-toggle:focus-visible + i {
  outline: 2px solid #0056f5;
  outline-offset: 3px;
}

/* Home's scroller and glass header share one grid cell. The original header
 * height is reserved in the content, keeping the resting card position intact.
 * The header includes the system inset on mobile; other screens retain flex.
 */
:where(html[data-account-aura="on"]) #app-shell.active.home-variant-next:has(#screen-home.active) {
  --aura-header-height: 74px;
  --aura-header-extent: calc(var(--aura-header-height) + var(--app-top-inset));
  --aura-home-gap: 20px;
  --aura-home-gutter: 18px;
  --aura-header-surface: rgb(255 255 255 / 44%);
  --aura-header-edge: rgb(255 255 255 / 68%);
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}

:where(html[data-account-aura="on"]) .phone.app-theme-refined #app-shell.active.home-variant-next:has(#screen-home.active) {
  --aura-header-height: 80px;
  --aura-home-gap: var(--biz-space-4);
  --aura-home-gutter: var(--biz-page-gutter);
}

:where(html[data-account-aura="on"]) #app-shell.active.home-variant-next:has(#screen-home.active) > .app-header {
  grid-area: 1 / 1;
  align-self: start;
  position: relative;
  z-index: 20;
  height: var(--aura-header-extent);
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color .18s ease, box-shadow .18s ease,
    -webkit-backdrop-filter .18s ease, backdrop-filter .18s ease;
}

/* At the top there is no tint, blur or edge to cut across the aura. Reuse the
 * existing scroll state so the same glass appears only over moving content.
 */
:where(html[data-account-aura="on"]) #app-shell.active.home-variant-next:has(#screen-home.active) > .app-header.has-scrolled-content {
  background: var(--aura-header-surface);
  box-shadow: inset 0 -1px 0 var(--aura-header-edge);
  -webkit-backdrop-filter: blur(20px) saturate(110%);
  backdrop-filter: blur(20px) saturate(110%);
}

:where(html[data-account-aura="on"]) #app-shell.active.home-variant-next:has(#screen-home.active) > .screen-stack {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

:where(html[data-account-aura="on"]) #app-shell.active.home-variant-next:has(#screen-home.active) #screen-home {
  padding-top: calc(var(--aura-header-extent) + var(--aura-home-gap));
  scroll-padding-top: calc(var(--aura-header-extent) + var(--aura-home-gap));
}

@media (max-width: 767px) {
  /* Reserve the inset for controls, not for the backdrop or its scroll frame.
   * One glass surface now spans the status bar and header during scrolling. */
  :where(html[data-account-aura="on"]) .phone:has(#app-shell.active.home-variant-next #screen-home.active) {
    padding-top: 0;
  }

  :where(html[data-account-aura="on"]) .phone:has(#app-shell.active.home-variant-next #screen-home.active) > .app-status-surface {
    display: none;
  }

  :where(html[data-account-aura="on"]) #app-shell.active.home-variant-next:has(#screen-home.active) > .app-header {
    padding-top: calc(var(--app-top-inset) + var(--app-header-padding-top));
  }

  /* The non-animated fallback also reaches the top edge, without introducing
   * motion for reduced-motion users or browsers without Web Animations. */
  :where(html[data-account-aura="on"]) #home-next-layout .account-aura-backdrop {
    top: calc(-1 * (var(--aura-header-extent) + var(--aura-home-gap)));
    right: calc(-1 * var(--aura-home-gutter));
    left: calc(-1 * var(--aura-home-gutter));
    border-radius: 0;
  }
}

html[data-color-scheme="dark"]:where([data-account-aura="on"]) #app-shell.active.home-variant-next:has(#screen-home.active) {
  --aura-header-surface: rgb(16 21 30 / 55%);
  --aura-header-edge: rgb(184 209 255 / 12%);
}

@media (forced-colors: active) {
  :where(html[data-account-aura="on"]) #app-shell.active.home-variant-next:has(#screen-home.active) > .app-header,
  :where(html[data-account-aura="on"]) #app-shell.active.home-variant-next:has(#screen-home.active) > .app-header.has-scrolled-content {
    background: Canvas;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #home-next-layout .account-aura-glow { transform: none !important; }
  :where(html[data-account-aura="on"]) #app-shell.active.home-variant-next:has(#screen-home.active) > .app-header {
    transition: none;
  }
}