/* 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; }

/* A live card is only a frame of reference: its body is the real app element
   showing through from the layer below (live-preview.js), so the card paints
   no surface of its own — just the title row and the close X. */
.aos-switcher-card.is-live { background: transparent; border-color: transparent; outline-color: transparent; box-shadow: none; }
.aos-switcher-card.is-live .aos-switcher-body { background: transparent; }
/* The live element while it is on a card: no input, one compositor layer. */
.is-previewing { pointer-events: none !important; will-change: transform, opacity; transform-origin: center center; }

/* 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; }

/* The app's menu (window-menu.js), only where a host asks for it (the Mobile interface):
   the same round control as Close, to its left; alone at the right where Close is not shown
   (touch closes a card by flicking it up). */
.aos-switcher-menu {
  position: absolute;
  top: -38px;
  right: 40px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  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);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.aos-switcher-menu svg { fill: currentColor; }
.aos-switcher-menu::after { content: ""; position: absolute; inset: -8px -6px -5px; border-radius: 999px; }
.aos-switcher-menu:focus-visible { outline: 2px solid var(--aos-sw-ink); outline-offset: 2px; }
@media (hover: none), (pointer: coarse) { .aos-switcher-menu { right: 0; } }

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

/* ---- Batch S, S1 ---------------------------------------------------------- */

/* The surface behind a live card. It sits in the backdrop, under the live app,
   so an app that is not the card's shape is fitted inside an equal box. Sized
   once per layout and moved by the same transform as its card. */
.aos-switcher-plate {
  position: absolute;
  border-radius: 30px;
  border: 1px solid var(--aos-sw-edge);
  background: var(--aos-sw-solid);
  box-shadow: var(--aos-sw-shadow-l);
  transform-origin: center center;
  will-change: transform, opacity;
  pointer-events: none;
}

/* The icon card: the app's big icon on its own theme colour. */
.aos-switcher-poster.has-color {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .18)),
    var(--aos-sw-app);
}
.aos-switcher-poster.has-color .aos-switcher-poster-name { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 6px rgba(0, 0, 0, .28); }
.aos-switcher-poster-icon .desktop-app-icon { box-shadow: 0 10px 28px rgba(0, 0, 0, .22); }

/* The picture the app drew of itself, over the icon card. */
.aos-switcher-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: inherit;
  background: var(--aos-sw-surface);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* A card being lifted: the finger owns it, no transition in the way. */
.aos-switcher-stage.is-dragging .aos-switcher-card { transition: none; }
.aos-switcher-stage.is-dragging { cursor: grabbing; }

/* The close X is for a pointer that hovers (and for the keyboard); on a touch
   screen a card is closed by swiping it up, so the X is not drawn there. It
   stays in the page for screen readers either way. */
@media (hover: hover) and (pointer: fine) {
  .aos-switcher-close { opacity: 0; transition: opacity .12s ease, transform .08s ease; }
  .aos-switcher-card:hover .aos-switcher-close,
  .aos-switcher-card.is-selected .aos-switcher-close:focus-visible,
  .aos-switcher-close:focus-visible { opacity: 1; }
  .aos-switcher-close:active { transform: scale(.92); }
}
@media (hover: none), (pointer: coarse) {
  .aos-switcher-close { opacity: 0; pointer-events: none; }
}

.aos-switcher-close-all {
  position: absolute;
  left: 50%;
  bottom: var(--aos-sw-close-all-bottom, 118px);
  transform: translateX(-50%);
  min-width: 112px;
  height: 40px;
  padding: 0 20px;
  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);
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, opacity .06s ease;
}
.aos-switcher-close-all[hidden] { display: none; }
.aos-switcher-close-all:active { transform: translateX(-50%) scale(.96); opacity: .82; }
.aos-switcher-close-all:focus-visible { outline: 2px solid var(--aos-sw-ink); outline-offset: 2px; }

/* ---- aly-batch12 T8: the phone layout (phone-layout.js) ------------------- */
/* The title row is ONE row above the card: the icon and the name from the
   card's left edge, the ⋯ (and, for a pointer that hovers, the X) at its right
   end, and a long name ends in an ellipsis before them. 36px tall, 10px over
   the card (PHONE_HEAD); the round buttons are centred on the same line. */
.aos-switcher.is-phone .aos-switcher-head {
  top: -46px;
  height: 36px;
  padding: 0 44px 0 2px;
  justify-content: flex-start;
  gap: 10px;
  font-size: .92rem;
  font-weight: 600;
}
.aos-switcher.is-phone .aos-switcher-head-icon,
.aos-switcher.is-phone .aos-switcher-head-icon .desktop-app-icon { width: 28px; height: 28px; }
.aos-switcher.is-phone .aos-switcher-head-icon .desktop-app-icon { border-radius: 9px; }
.aos-switcher.is-phone .aos-switcher-head-name { flex: 0 1 auto; min-width: 0; }
.aos-switcher.is-phone .aos-switcher-menu,
.aos-switcher.is-phone .aos-switcher-close { top: -44px; }
/* The X is drawn for a pointer that hovers: the name then stops before both buttons. */
@media (hover: hover) and (pointer: fine) {
  .aos-switcher.is-phone .aos-switcher-card:has(.aos-switcher-menu) .aos-switcher-head { padding-right: 84px; }
}
/* Close all: a full 44px thumb target just under the card (PHONE_CLOSE_ALL_HEIGHT). */
.aos-switcher.is-phone .aos-switcher-close-all { height: 44px; min-width: 132px; padding: 0 24px; font-size: .92rem; }

@media (prefers-reduced-motion: reduce) {
  .aos-switcher-plate, .aos-switcher-close-all, .aos-switcher-close { transition: none !important; }
}

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