/* ═══════════════════════════════════════════════════════════════════════
   Window.css — the non-functional myPod app window.
   Every number here was measured from the real Swift source.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Stage: centres the windows layer ───────────────────────────────────
   The stage is the free band BETWEEN the menu bar and the dock, not the
   whole viewport. Centring in the viewport would look balanced on paper but
   leaves a big gap under the 26px menu bar and pushes the windows into the
   ~115px dock. Insetting the band makes the centring correct by
   construction; MARGIN_Y in Main.js is derived from these same two numbers.
   ───────────────────────────────────────────────────────────────────── */
.Stage{
  position: absolute;
  top: 26px;                        /* menu bar height */
  /* Dock is 76 tall + 20 off the bottom = 96, plus 28 of headroom for a fully
     magnified icon (56px at DOCK_MAX_SCALE 1.5 grows 28px upward from its
     bottom-anchored origin), plus a small gap. Raise this if that constant in
     Main.js goes up, or a hovered icon will reach into the signup window. */
  bottom: 132px;
  left: 0; right: 0;
  z-index: var(--z-windows);
  pointer-events: none;
}

/* The ONLY thing that scales. Menu bar and dock stay fluid — same as real
   macOS, where the chrome spans the display but windows are a fixed size.
   ⚠️ Never put `filter` or `opacity < 1` on this element: either one kills
   backdrop-filter on every descendant. */
/* ⚠️ Centred with absolute positioning, NOT `place-items: center` on a grid.
   The unscaled box is 780px tall — taller than the stage band on most
   screens — and CSS Grid applies *safe* alignment to an overflowing item,
   silently switching from centre to start. That dropped the whole group
   ~114px too low and pushed the signup window under the dock. Translating
   by -50% is pure maths and doesn't care whether the box overflows. */
.Windows{
  position: absolute;
  top: 50%; left: 50%;
  width: var(--group-w);
  height: var(--group-h);
  transform: translate(-50%, -50%) scale(var(--stage-scale));
  transform-origin: center center;
  transition: transform .18s ease;
}

/* ── Window stacking + focus ────────────────────────────────────────────
   Both windows are `[data-window]`. Exactly one carries `is-focused` at any
   time (Main.js guarantees it), and the focused one is also raised. Real
   macOS only changes the *chrome* of an inactive window — the content keeps
   its full colour — so nothing here dims the window body.
   ───────────────────────────────────────────────────────────────────── */
[data-window]{
  z-index: 1;
  pointer-events: auto;             /* .Stage disables pointer events */
}
[data-window].is-focused{ z-index: 2; }

/* ── The window shell ───────────────────────────────────────────────── */
.Window{
  position: absolute;
  top: 0; left: 0;
  width: var(--win-w);
  height: var(--win-h);
  border-radius: 16px;
  /* .regularMaterial. Frostier and less see-through than .ultraThin — the
     panel should read as milky glass, not as a blue tint. */
  background: rgba(246,246,246,.66);
  -webkit-backdrop-filter: blur(42px) saturate(180%);
          backdrop-filter: blur(42px) saturate(180%);
  box-shadow: var(--shadow-window);
  border: .5px solid rgba(255,255,255,.35);
  cursor: default;
}

/* ── Left card ──────────────────────────────────────────────────────── */
.Window-card{
  position: absolute;
  top: var(--card-inset);
  left: var(--card-inset);
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* ── Traffic lights ─────────────────────────────────────────────────── */
.TrafficLights{
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
/* Grey is the default state, not the exception. TrafficLightsView paints
   every dot tertiaryLabelColor unless its window is key — colour is what
   the focused window earns. Zoom is permanently disabled in myPod, so it
   has no coloured state to earn. */
.TrafficLight{
  width: 14px; height: 14px;
  border-radius: 50%;
  display: block;
  background: var(--tl-off);
  transition: background .12s ease;
}
.is-focused .TrafficLight--close{ background: #FF5F57; }
.is-focused .TrafficLight--min  { background: #FFBD2E; }

/* ── The iPod ───────────────────────────────────────────────────────────
   ⚠️ drop-shadow, not box-shadow. The PNG has transparent corners, so
   box-shadow would draw a hard-edged rectangle behind a rounded product
   photo. drop-shadow follows the alpha channel — but it only accepts one
   shadow per call, hence the chain.
   ───────────────────────────────────────────────────────────────────── */
.Window-ipod{
  position: absolute;
  top: var(--ipod-top);
  left: var(--ipod-left);
  width: var(--ipod-w);
  height: var(--ipod-h);
  filter:
    drop-shadow(0 6px 12px rgba(0,0,0,.28))
    drop-shadow(0 28px 60px rgba(0,0,0,.16))
    drop-shadow(0 55px 110px rgba(0,0,0,.09))
    drop-shadow(0 80px 80px rgba(0,0,0,.07));
}

/* ── "Restore iPodOS" pill ──────────────────────────────────────────────
   MorphingBackButton in its expanded (Music Manager) state. The geometry is
   not free-form padding: the icon occupies a 52×52 zone — the diameter the
   button collapses to on the Themes tab — and the label carries 32pt of
   trailing padding. Height is that same 52. It sits 37pt off the card's
   bottom edge.

   In light mode the real button draws NO drop shadow (both shadow colours
   resolve to .clear); it separates purely by being brighter than the card,
   with a specular rim along the top. Reproduced here with inset highlights
   rather than a cast shadow — a shadow would read as a floating button
   rather than as glass.
   ───────────────────────────────────────────────────────────────────── */
.RestorePill{
  position: absolute;
  left: 50%;
  bottom: 37px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  height: 52px;
  padding-right: 32px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(255,255,255,.46);
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.06);
          backdrop-filter: blur(22px) saturate(180%) brightness(1.06);
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.9),
    inset 0 0 0 .5px rgba(255,255,255,.5),
    0 1px 2px rgba(0,0,0,.04);
  color: var(--ink-50);
}
/* 20pt glyph centred in the 52pt circle zone: 16 + 20 + 16. */
.RestorePill-icon{
  width: 20px; height: 20px;
  margin: 0 16px;
  flex: none;
}
.RestorePill-label{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.015em;
}

/* ── Right panel ────────────────────────────────────────────────────── */
.Window-panel{
  position: absolute;
  top: 0;
  left: var(--panel-x);
  width: var(--panel-w);
  height: var(--win-h);
  display: grid;
  place-items: center;
  padding: 0 16px;                  /* → 230px of content, as in the app */
}

/* ── Vibrancy ───────────────────────────────────────────────────────────
   Every piece of text inside the glass goes through PanelTextStyle in the
   app: a black alpha with `.blendMode(.plusDarker)`, so it darkens whatever
   the material is showing instead of sitting on top of it as flat ink.
   CSS has no plus-darker outside Safari; `multiply` is the portable
   approximation and behaves identically for dark ink on a light material.

   ⚠️ Two rules for this. First: keep it on leaf text/glyph nodes only — put
   it on .Stage or .Windows and it kills backdrop-filter for everything
   inside, same as `filter`. Second: never on an element that paints an
   opaque background. Only the *text* is vibrant in the app; blending the
   selected segment's whole capsule would multiply its solid AppBackground
   fill against the glass and leave it a dirty grey instead of #F3F3F3.
   ───────────────────────────────────────────────────────────────────── */
.EmptyState,
.Segmented-item:not(.is-selected),
.Segmented-label,
.Segmented-chevron,
.ToolPill-btn svg,
.RestorePill-icon,
.RestorePill-label{
  mix-blend-mode: multiply;
}

.EmptyState{
  text-align: center;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.EmptyState-title{
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-50);
}
/* The app hard-wraps this into two Text views with zero line spacing. */
.EmptyState-body p{
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink-25);
}
.EmptyState-note{
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-25);
}

/* ── Segmented control ──────────────────────────────────────────────── */
.Segmented{
  position: absolute;
  top: 16px;
  left: 374px;                      /* panel-x (358) + 16px gutter */
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 999px;
  /* .ultraThinMaterial + a 1px white-5% plusLighter capsule stroke. Thin
     means thin: the old white-30% fill read as chalk rather than glass. */
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
          backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.3);
}
.Segmented-item{
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-25);
  white-space: nowrap;
}
/* Selected fills with AppBackground flat — no shadow in the app. */
.Segmented-item.is-selected{
  background: var(--card-bg);
  color: var(--ink-50);
  padding-right: 8px;
}
.Segmented-chevron{
  width: 10px; height: 10px;
  color: var(--ink-50);
}

/* ── Eject + gear pill ──────────────────────────────────────────────── */
.ToolPill{
  position: absolute;
  top: 16px; right: 16px;
  display: flex;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
          backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.3);
}
.ToolPill-btn{
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
}
.ToolPill-btn svg{
  width: 15px; height: 15px;
  color: var(--ink-50);
}