/* APPS-SURFACE-001 / APPS-ONBOARDING-MODAL-001.
   Additive override layer; legacy /assets bytes stay immutable. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body[data-safe-area-owner="document"] {
  --mig-safe-area-top: env(safe-area-inset-top, 0px);
  --mig-safe-area-right: env(safe-area-inset-right, 0px);
  --mig-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --mig-safe-area-left: env(safe-area-inset-left, 0px);
}

.apps-overlay-root[data-overlay-root] {
  position: fixed;
  z-index: 1190;
  top: var(--mig-overlay-visual-top, 0px);
  left: var(--mig-overlay-visual-left, 0px);
  width: var(--mig-overlay-visual-width, 100%);
  height: var(--mig-overlay-visual-height, 100%);
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.apps-overlay-root[data-overlay-root] > .apps-onboarding,
.apps-overlay-root[data-overlay-root] > .guest-install-modal,
.apps-overlay-root[data-overlay-root] > .account-modal,
.apps-overlay-root[data-overlay-root] > .wallet-history-modal,
.apps-overlay-root[data-overlay-root] > .apps-buggiman-modal,
.apps-overlay-root[data-overlay-root] > .apps-first-use-modal {
  pointer-events: auto;
}

.apps-overlay-root[data-overlay-root] > [data-modal-transition="closing"] {
  animation: apps-modal-dismiss 180ms var(--apps-route-motion-ease, cubic-bezier(.22, .68, .24, 1)) both;
  pointer-events: none;
}

@keyframes apps-modal-dismiss {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .apps-overlay-root[data-overlay-root] > [data-modal-transition="closing"] {
    animation: none;
  }
}

.apps-overlay-root[data-overlay-root] [role="dialog"][aria-modal="true"],
.apps-overlay-root[data-overlay-root] [role="alertdialog"][aria-modal="true"] {
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

.apps-overlay-root[data-overlay-root] [role="dialog"] button:not([disabled]),
.apps-overlay-root[data-overlay-root] [role="alertdialog"] button:not([disabled]) {
  min-width: 44px;
  min-height: 44px;
}

/* Onboarding component geometry lives only in late-loaded apps-onboarding.css. */
/* Connected-auth confirmation is a governed Apps surface, not a parallel page. */
.product-stage--connect {
  min-height: min(560px, 100%);
  display: grid;
  place-items: center;
  padding: clamp(14px, 3.5vw, 34px);
  box-sizing: border-box;
}

.connect-confirmation-card {
  width: min(560px, 100%);
  display: grid;
  gap: clamp(20px, 4vw, 30px);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 34px);
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

.connect-confirmation-card__copy {
  display: grid;
  gap: 10px;
  max-width: 48ch;
}

.connect-confirmation-card__copy :is(h1, p) {
  margin: 0;
}

.connect-confirmation-card__copy h1 {
  font-size: clamp(24px, 5vw, 38px);
  line-height: 1.08;
  text-wrap: balance;
}

.connect-confirmation-card__copy p {
  color: var(--text-muted, #aeb3bd);
  line-height: 1.55;
}

.connect-confirmation-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.connect-confirmation-card__actions :is(button, a) {
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.connect-confirmation-card__actions :is(button, a):focus-visible {
  outline: 3px solid rgba(244, 204, 111, 0.9);
  outline-offset: 3px;
}

.connect-confirmation-card__actions :is(button, a)[disabled],
.connect-confirmation-card__actions :is(button, a)[aria-disabled="true"] {
  opacity: 0.52;
  cursor: not-allowed;
}

@media (max-width: 420px), (max-height: 560px) and (orientation: landscape) {
  .product-stage--connect {
    min-height: 100%;
    place-items: start stretch;
    padding: 12px;
  }

  .connect-confirmation-card {
    width: 100%;
    padding: 18px;
  }

  .connect-confirmation-card__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* APPS-SURFACE-001 / APPS-DESKTOP-WORKBENCH-002.
   This is the sole structural owner for the v24 product workbench. */

:root {
  --apps-workbench-max: 900px;
  --apps-workbench-gap: 6px;
  --apps-workbench-gutter: 0px;
  --apps-workbench-inline-rail: 6px;
  --apps-signature-min-height: 24px;
  --apps-route-motion-ms: 150ms;
  --apps-route-motion-ease: cubic-bezier(.22, .68, .24, 1);
}

html {
  min-width: 0;
  min-height: 100%;
  background: #07080c;
}

body.page-product:not(.page-product--guest-home):not(.page-product--guest-auth):not(.page-product--shell-public-document) {
  position: static;
  inset: auto;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  height: 100vh;
  min-height: 100vh;
  max-height: none;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 50% -18%, rgba(225, 190, 101, .075), transparent 42%),
    linear-gradient(180deg, #0b0c10 0%, #07080c 60%, #050609 100%);
  touch-action: auto;
}

@supports (height: 100dvh) {
  body.page-product:not(.page-product--guest-home):not(.page-product--guest-auth):not(.page-product--shell-public-document) {
    height: 100dvh;
    min-height: 100dvh;
  }
}

body.page-product[data-safe-area-owner="document"] {
  --mig-safe-area-top: env(safe-area-inset-top, 0px);
  --mig-safe-area-right: env(safe-area-inset-right, 0px);
  --mig-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --mig-safe-area-left: env(safe-area-inset-left, 0px);
}

.page-product:not(.page-product--guest-home):not(.page-product--guest-auth):not(.page-product--shell-public-document) .page-shell--standalone {
  box-sizing: border-box;
  display: grid;
  place-items: stretch center;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  min-height: 0;
  margin: 0;
  /* The outer vessel stays unpainted, but the app panels must remain visibly
     inside the viewport instead of placing their border on the physical edge. */
  padding:
    max(var(--apps-workbench-gutter), var(--mig-safe-area-top, 0px))
    max(var(--apps-workbench-inline-rail), var(--mig-safe-area-right, 0px))
    max(var(--apps-workbench-gutter), var(--mig-safe-area-bottom, 0px))
    max(var(--apps-workbench-inline-rail), var(--mig-safe-area-left, 0px)) !important;
  overflow: hidden;
}

.page-product [data-workbench-root] {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) minmax(var(--apps-signature-min-height), auto) !important;
  align-content: stretch;
  width: min(100%, var(--apps-workbench-max)) !important;
  min-width: 0;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  margin: 0 auto;
  gap: var(--apps-workbench-gap);
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
  overscroll-behavior: none;
  animation: none;
  transform: none;
}

.page-product [data-workbench-row="top"] {
  position: relative;
  z-index: 20;
  align-self: start;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: rgba(8, 10, 15, 0.96) !important;
  box-shadow: none !important;
  scrollbar-width: none;
  transform: none;
}

.page-product [data-workbench-row="top"]::-webkit-scrollbar,
.page-product [data-workbench-row="top"] *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.page-product [data-workbench-row="top"] :is(
  .apps-top-menu,
  .apps-top-menu__row,
  .apps-top-menu__navline,
  .product-nav,
  .product-nav__links
) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Authenticated header identity and navigation are one flat component.
   The logo artwork owns its own silhouette; the wrapper adds no tile.
   The brand copy is centered against that silhouette at every width. */
.page-product [data-workbench-row="top"] .apps-top-menu {
  gap: 6px;
}

.page-product [data-workbench-row="top"] .apps-top-menu__brand {
  align-items: center !important;
  min-height: 44px;
  gap: 9px;
}

.page-product [data-workbench-row="top"] .apps-top-menu__logo--image {
  width: 38px;
  height: 38px;
  border-radius: 0 !important;
  overflow: visible;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-product [data-workbench-row="top"] .apps-top-menu__logo--image .apps-own-icon {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.24)) !important;
  object-fit: contain;
}

.page-product [data-workbench-row="top"] .apps-top-menu__copy {
  align-content: center;
  gap: 2px;
}

.page-product [data-workbench-row="top"] .apps-top-menu__copy strong {
  line-height: 1.05;
}

.page-product [data-workbench-row="top"] .apps-top-menu__copy small {
  line-height: 1.2;
}

.page-product [data-workbench-row="top"] .apps-top-menu__balance--stale {
  border-style: dashed !important;
  opacity: 0.78;
}

.page-product .launcher-feedback[data-feedback-actions="true"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  pointer-events: auto;
}

.page-product .launcher-feedback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-product .launcher-feedback__action {
  min-height: 40px;
}

.page-product [data-workbench-row="top"] .apps-top-menu__navline {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.page-product [data-workbench-row="top"] .product-nav__link {
  border-color: rgba(235, 239, 245, 0.15) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  box-shadow: none !important;
}

.page-product [data-workbench-row="top"] .product-nav__link:is(
  .is-active,
  [aria-current="page"]
) {
  border-color: rgba(241, 208, 113, 0.34) !important;
  background: rgba(241, 208, 113, 0.105) !important;
  box-shadow: none !important;
}

.page-product [data-workbench-row="top"] .product-nav__link:hover {
  border-color: rgba(241, 208, 113, 0.24) !important;
  background: rgba(241, 208, 113, 0.075) !important;
  box-shadow: none !important;
}

.page-product [data-workbench-row="middle"] {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scrollbar-gutter: auto;
  touch-action: pan-y pinch-zoom;
  padding-bottom: clamp(4px, 0.8vw, 8px);
}

.page-product [data-workbench-row="middle"][data-scroll-edge-policy="native"] {
  overscroll-behavior-y: contain !important;
}

.page-product [data-workbench-row="middle"][data-scroll-edge-policy="contained"] {
  overscroll-behavior-y: none !important;
}

/* The historical compact-phone foundation used stronger selectors for a
   decorated top plate and contained workspace. Current authenticated Apps
   owns both decisions here so every native workspace receives the same
   solid header and document-edge gesture handoff. */
@media (max-width: 720px), (pointer: coarse) {
  body.page-product:not(.page-product--guest-home):not(.page-product--guest-auth):not(.page-product--shell-public-document)
    .apps-control-panel[data-workbench-row="top"] {
    background: rgba(8, 10, 15, 0.96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  body.page-product:not(.page-product--guest-home):not(.page-product--guest-auth):not(.page-product--shell-public-document)
    .apps-workspace-panel[data-workbench-row="middle"][data-scroll-edge-policy="native"] {
    overscroll-behavior-y: contain !important;
  }

  body.page-product:not(.page-product--guest-home):not(.page-product--guest-auth):not(.page-product--shell-public-document)
    .apps-workspace-panel[data-workbench-row="middle"][data-scroll-edge-policy="contained"] {
    overscroll-behavior-y: none !important;
  }
}

.page-product [data-workbench-row="middle"]::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.page-product [data-workbench-row="middle"] > * {
  min-width: 0;
  max-width: 100%;
}

.page-product [data-workspace-panel][hidden],
.page-product [data-workspace-footer][hidden] {
  display: none !important;
}

.page-product [data-workbench-row="bottom"] {
  box-sizing: border-box;
  align-self: end;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--apps-signature-min-height);
  padding: 0 clamp(8px, 1.5vw, 14px);
  overflow: clip;
}

.page-product [data-workbench-row="bottom"] .apps-signature-line__link {
  min-height: var(--apps-signature-min-height);
  padding: 0 9px;
}

.page-product .product-nav__link,
.page-product :is(button, a, summary):not([aria-disabled="true"]):not(:disabled) {
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .page-product .product-nav__link,
  .page-product :is(.ghost-button, .primary-button, .account-disclosure__summary) {
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  }

  .page-product .product-nav__link:hover,
  .page-product :is(.ghost-button, .primary-button, .account-disclosure__summary):hover {
    box-shadow: 0 0 0 1px rgba(241, 208, 113, .11), 0 10px 28px rgba(204, 162, 65, .09);
  }
}

.page-product :is(a, button, summary):focus-visible {
  outline: 2px solid rgba(255, 231, 159, .78);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --apps-route-motion-ms: 1ms; }
}
