/* A continuous ring of native phones, on the existing quiet Pearl stage. */
.studio-home .app-reel[data-reel-layout='orbit'] {
  height: calc(var(--orbit-phone, 230px) * 844 / 390 + 202px);
  perspective: 1100px;
  isolation: isolate;
}
.studio-home .app-reel[data-reel-layout='orbit'] .app-reel__stage {
  position: absolute;
  inset: 0 0 136px;
  width: 100%;
  height: auto;
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
  perspective: 1000px;
}
.studio-home .app-reel[data-reel-layout='orbit'] .app-reel__track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
  transform: none;
  perspective: 1000px;
  transform-style: flat;
}
.studio-home .app-reel[data-reel-layout='orbit'] .app-reel__card {
  position: absolute;
  top: 48px;
  left: calc(50% - var(--orbit-phone) / 2);
  width: var(--orbit-phone);
  margin: 0;
  visibility: visible;
  transform-origin: center center;
  will-change: transform;
}
.studio-home .app-reel[data-reel-layout='orbit'] .app-reel__plane {
  --bezel: 8px;
  --corner: calc(var(--orbit-phone) * 0.14);
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  box-shadow:
    0 18px 28px light-dark(rgb(41 46 44 / 16%), rgb(6 8 12 / 45%)),
    0 3px 6px light-dark(rgb(41 46 44 / 8%), rgb(6 8 12 / 30%));
  user-select: none;
  -webkit-user-drag: none;
}
.studio-home .app-reel[data-reel-layout='orbit'] .app-reel__plane img {
  pointer-events: none;
}
.studio-home
  .app-reel[data-reel-layout='orbit']
  .app-reel__card:not([data-reel-active])
  .app-reel__marks,
.studio-home
  .app-reel[data-reel-layout='orbit']
  .app-reel__card:not([data-reel-active])
  .app-reel__enlarge {
  opacity: 0;
}
.studio-home .app-reel[data-reel-layout='orbit'] .app-reel__plane::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* The side phones recede into the stage: toward ink on pearl, toward the night page in
     dark (ink is the light text colour there, and would wash the captures white). */
  background: light-dark(var(--ink), #0f1118);
  opacity: var(--orbit-shade);
  border-radius: inherit;
}
.studio-home .app-reel[data-orbit-dragging] .app-reel__stage {
  cursor: grabbing;
}
.orbit-control {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 44px 84px 44px;
  justify-content: center;
  align-items: center;
  gap: 8px 18px;
  width: min(300px, 100% - 24px);
  z-index: 110;
  user-select: none;
}
.orbit-control::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 232px;
  max-width: 100%;
  height: 56px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--e-inset-sm);
  pointer-events: none;
  z-index: -1;
}
.orbit-step {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--e-raised-sm);
  /* 28px on the display scale at --lh-ui (check-tokens.py); the grid centres the line box,
     where the glyph sits as it did at line-height 1. The chevron's ink rides 1.75px under
     the em's middle, so 4px of bottom padding lifts it onto the disc's centre. */
  display: grid;
  place-items: center;
  padding: 0 0 4px;
  color: var(--ink-secondary);
  font-family: sans-serif;
  font-size: 28px;
  line-height: var(--lh-ui);
  cursor: pointer;
  transition: transform 160ms;
}
.orbit-step:hover {
  color: var(--app-accent-ink);
  transform: translateY(-2px);
}
.orbit-step:active {
  transform: scale(0.94);
}
.orbit-dial {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--surface-lift), var(--surface));
  box-shadow:
    var(--e-raised-sm),
    inset 0 1px 1px var(--soft-light);
  touch-action: none;
  cursor: grab;
}
.orbit-dial__ticks {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    var(--border) 0deg 1deg,
    var(--soft-light) 1deg 2deg,
    transparent 2deg 30deg
  );
  mask-image: radial-gradient(circle, transparent 61%, #000 63%, #000 68%, transparent 70%);
}
.orbit-dial::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 39px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-accent);
}
.orbit-dial__face {
  position: absolute;
  inset: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--surface-lift), var(--surface));
  box-shadow:
    inset 0 1px 1px var(--soft-light),
    1px 2px 5px color-mix(in srgb, var(--soft-shadow) 55%, transparent);
  font-size: var(--fs-13);
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.orbit-dial__face b {
  color: var(--ink);
  font-size: var(--fs-17);
  font-weight: 600;
}
.orbit-dial__face span {
  font-size: var(--fs-13);
}
.orbit-caption {
  grid-column: 1 / -1;
  text-align: center;
  display: grid;
  gap: 3px;
}
.orbit-caption strong {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--ink);
}
.orbit-caption > span {
  font-size: var(--fs-13);
  color: var(--ink-secondary);
}
.orbit-control :is(button, [role='slider']):focus-visible {
  outline: 2px solid var(--app-accent-ink);
  outline-offset: 4px;
}
/* Phones (fit rule, 390x664 <= 1.25 screens). The pressed tab above the well already names
   the screen, so the caption leaves the layout (it stays in the accessibility tree: the help
   line is the dial's description). The well is phone + 106px: 10px over the front phone, 2px
   to the control, the 84px dial row, 10px (2026-10-19: the 38px truth-tag floor under the
   dial left with the retired pills). */
@media (max-width: 760px) {
  .studio-home .app-module :is(.tour-scene, .tour-scene__story) {
    min-width: 0;
    max-width: 100%;
  }
  .studio-home .app-reel[data-reel-layout='orbit'] {
    height: calc(var(--orbit-phone, 145px) * 844 / 390 + 106px);
  }
  .studio-home .app-reel[data-reel-layout='orbit'] .app-reel__stage {
    bottom: 94px;
  }
  .studio-home .app-reel[data-reel-layout='orbit'] .app-reel__card {
    top: 10px;
  }
  .studio-home .app-reel[data-reel-layout='orbit'] .app-reel__plane {
    --bezel: 6px;
  }
  .orbit-control {
    bottom: 10px;
  }
  .orbit-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* Short phones (390x664, Safari with its bars): the phone takes its size from a narrower
   stage, through screen-wheel.js's own width term (phone = 43% of the stage, radius 31%),
   so the ring shrinks whole rather than fighting the script's --orbit-phone. The stage stops
   clipping so the side phones keep their shadows; the well still clips. The rail hint goes:
   the next note already peeks in from the right edge. */
@media (max-width: 760px) and (max-height: 720px) {
  .studio-home .app-reel[data-reel-layout='orbit'] .app-reel__stage {
    left: calc(50% - 116px);
    width: 232px;
    overflow: visible;
  }
  .studio-home .app-module .tour-scene__story > .fit-rail-hint {
    display: none;
  }
  .studio-home .app-module .tour-scene__story > .app-notes {
    margin-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-control * {
    transition: none;
  }
}