/* ALYSSIUN app switcher — the one horizontal card carousel, shared by the
   mobile interface and the desktop. It carries its own atmosphere tokens so it
   looks identical in both shells without either shell's sheet being loaded.
   Everything that moves here moves on transform and opacity only. */

:root[data-alyssiun-atmosphere="lux"] {
  --aos-sw-text: #0e1018;
  --aos-sw-muted: #5c6273;
  --aos-sw-surface: #f8f9fc;
  --aos-sw-solid: rgba(250, 251, 253, .97);
  --aos-sw-edge: rgba(255, 255, 255, .9);
  --aos-sw-hair: rgba(14, 18, 34, .09);
  --aos-sw-ink: #0e1018;
  --aos-sw-glass: rgba(255, 255, 255, .86);
  --aos-sw-shadow-s: 0 2px 10px rgba(20, 26, 50, .06);
  --aos-sw-shadow-l: 0 18px 44px rgba(20, 26, 50, .16);
  --aos-sw-dim: rgba(14, 18, 34, .28);
}
:root[data-alyssiun-atmosphere="neo"] {
  --aos-sw-text: #f2f4fb;
  --aos-sw-muted: #9aa2b8;
  --aos-sw-surface: #06080f;
  --aos-sw-solid: rgba(7, 9, 16, .96);
  --aos-sw-edge: rgba(255, 255, 255, .14);
  --aos-sw-hair: rgba(255, 255, 255, .08);
  --aos-sw-ink: #ffffff;
  --aos-sw-glass: rgba(255, 255, 255, .1);
  --aos-sw-shadow-s: 0 2px 10px rgba(0, 0, 0, .4);
  --aos-sw-shadow-l: 0 20px 48px rgba(0, 0, 0, .7);
  --aos-sw-dim: rgba(0, 0, 0, .55);
}

.aos-switcher {
  position: absolute;
  inset: 0;
  background: transparent;
  font-family: var(--brand-font, -apple-system, system-ui, sans-serif);
  color: var(--aos-sw-text);
}
.aos-switcher[hidden] { display: none; }

.aos-switcher-backdrop { position: absolute; inset: 0; background: var(--aos-sw-dim); }
.aos-switcher-backdrop[hidden] { display: none; }

.aos-switcher-stage {
  position: relative;
  width: 100%;
  height: 100%;
  /* The carousel owns both axes of the gesture: nothing behind it may scroll. */
  touch-action: none;
  overscroll-behavior: contain;
}

/* A card is sized once per layout and then driven by transform alone. */
.aos-switcher-card {
  position: absolute;
  border-radius: 30px;
  border: 1px solid var(--aos-sw-edge);
  outline: 1px solid var(--aos-sw-hair);
  outline-offset: -1px;
  background: var(--aos-sw-surface);
  box-shadow: var(--aos-sw-shadow-l);
  transform-origin: center center;
  will-change: transform, opacity;
  /* NO `contain: paint` here: the title row and the close X sit ABOVE the card
     on purpose, and paint containment clips them away. `will-change` above is
     what asks for the layer. */
  cursor: pointer;
  /* No transition while a finger or the momentum loop is driving it; the loop
     writes every frame itself. The settle and the zoom add one back below. */
  transition: none;
}
.aos-switcher-stage.is-settling .aos-switcher-card,
.aos-switcher-stage.is-zooming .aos-switcher-card {
  transition: transform .26s cubic-bezier(.2, .86, .26, 1), opacity .18s ease;
}

.aos-switcher-head {
  position: absolute;
  left: 0;
  right: 0;
  top: -36px;
  height: 28px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
  text-shadow: 0 1px 8px var(--aos-sw-glass);
}
.aos-switcher-head-icon { width: 24px; height: 24px; flex: none; }
.aos-switcher-head-icon .desktop-app-icon {
  width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center; border: 1px solid transparent;
}
.aos-switcher-head-icon svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.aos-switcher-head-name { overflow: hidden; text-overflow: ellipsis; }

.aos-switcher-body { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }

/* The cached static snapshot. An app frame is cross-origin, so its pixels can
   never be read from the OS; what the card shows instead is the app's own
   identity on its own surface, painted once and reused. */
.aos-switcher-poster {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  border-radius: inherit;
  background: var(--aos-sw-surface);
}
.aos-switcher-poster-icon .desktop-app-icon {
  width: 88px; height: 88px; border-radius: 32px;
  display: grid; place-items: center; border: 1px solid transparent;
}
.aos-switcher-poster-icon svg {
  width: 44px; height: 44px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.aos-switcher-poster-name { color: var(--aos-sw-muted); font-size: .92rem; font-weight: 600; }

/* The close X: the top right corner of every card, on desktop exactly as on
   mobile. It sits in the title row above the card so it never covers the app's
   own header; ::after widens the target to a thumb. */
.aos-switcher-close {
  position: absolute;
  top: -38px;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--aos-sw-edge);
  outline: 1px solid var(--aos-sw-hair);
  outline-offset: -1px;
  background: var(--aos-sw-solid);
  color: var(--aos-sw-text);
  box-shadow: var(--aos-sw-shadow-s);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.aos-switcher-close::after { content: ""; position: absolute; inset: -8px -8px -5px; border-radius: 999px; }

.aos-switcher-card:focus-visible,
.aos-switcher-close:focus-visible { outline: 2px solid var(--aos-sw-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .aos-switcher-stage.is-settling .aos-switcher-card,
  .aos-switcher-stage.is-zooming .aos-switcher-card { transition: none; }
}