/* Sonement iPhone replica — the hero device and /demos/iphone.
 *
 * Source of truth: the app itself (SonosApp/PhoneTabShell.swift & friends),
 * via spec/iphone-app-spec-2026-09-23.md and the simulator captures in
 * reference/app-screens/2026-09-23/iphone/. The screen is laid out in real
 * iPhone 18 Pro points (402 × 874) and the whole device is scaled as one
 * unit, so every number below is a point value you can check against the
 * spec or a capture. Scoped under .ia; shares nothing with demo-source.css.
 */

.ia{
  --ia-scale:1;
  --bg:#F5F5F5;            /* appBackground */
  --grouped:#F2F2F7;       /* system grouped canvas (Rooms, Search) */
  --cell:#FFFFFF;
  --ink:#000;              /* primary */
  --ink-2:rgba(60,60,67,.6);   /* .secondary */
  --ink-3:rgba(60,60,67,.3);   /* .tertiary */
  --tint:#000;             /* glyphTint / prominentFill */
  --on-tint:#fff;          /* prominentText */
  --fill-05:rgba(0,0,0,.05);
  --fill-07:rgba(0,0,0,.07);
  --fill-08:rgba(0,0,0,.08);
  --sep:rgba(60,60,67,.18);
  --track:#CBCBCB;         /* slider unfilled (measured) */
  --glass:rgba(252,252,252,.72);
  --glass-rim:rgba(0,0,0,.11);
  --glass-hi:rgba(255,255,255,.9);
  --glass-shadow:0 4px 14px rgba(0,0,0,.05);
  --scrim:rgba(0,0,0,.2);
  --inactive:rgba(0,0,0,.7);   /* .primary.opacity(0.7) */
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Inter", "Helvetica Neue", sans-serif;
  --font-d:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", system-ui, "Inter", "Helvetica Neue", sans-serif;
  position:relative;
  width:calc(446px * var(--ia-scale));
  height:calc(920px * var(--ia-scale));
  font-family:var(--font);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}

/* Isolation from host pages (the homepage sets *{margin:0;padding:0;box-sizing:border-box},
   section{padding-block:…}, p{max-width}, body line-height): the component must lay
   out identically on the bench, the homepage and every demo page. */
.ia{ line-height:1.2; letter-spacing:normal; text-align:left; }
.ia, .ia *, .ia *::before, .ia *::after{ box-sizing:border-box; }
.ia section{ padding:0; margin:0; }
.ia p{ max-width:none; }
.ia button{ font-family:inherit; }
:root[data-theme="dark"] .ia{
  --bg:#000;
  --grouped:#000;
  --cell:#1C1C1E;
  --ink:#fff;
  --ink-2:rgba(235,235,245,.6);
  --ink-3:rgba(235,235,245,.3);
  --tint:#fff;
  --on-tint:#000;
  --fill-05:rgba(255,255,255,.11);
  --fill-07:rgba(255,255,255,.154);
  --fill-08:rgba(255,255,255,.176);
  --sep:rgba(84,84,88,.6);
  --track:#424242;
  --glass:rgba(38,38,38,.72);
  --glass-rim:rgba(255,255,255,.1);
  --glass-hi:rgba(255,255,255,.14);
  --glass-shadow:0 6px 18px rgba(0,0,0,.4);
  --scrim:rgba(0,0,0,.45);
  --inactive:rgba(255,255,255,.7);
}

/* ---------- Device: iPhone 18 Pro body, scaled as one unit ---------- */
.ia-device{
  position:absolute; left:0; top:0;
  width:446px; height:920px;
  transform:scale(var(--ia-scale)); transform-origin:0 0;
  border-radius:84px;
  background:linear-gradient(145deg,#d9dadd,#a9abb0 40%,#cfd0d4 60%,#8e9095);
  box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 40px 80px -30px rgba(0,0,0,.45), 0 18px 40px -20px rgba(0,0,0,.3);
}
:root[data-theme="dark"] .ia-device{
  background:linear-gradient(145deg,#5a5b5f,#2c2d30 40%,#4a4b4f 60%,#232427);
}
.ia-device::before{ /* black bezel */
  content:""; position:absolute; inset:5px; border-radius:79px; background:#050506;
}
.ia-btn{ position:absolute; width:4px; border-radius:2px; background:linear-gradient(90deg,#9a9ca1,#d4d5d8); }
.ia-btn.l1{ left:-3px; top:180px; height:34px; }
.ia-btn.l2{ left:-3px; top:238px; height:62px; }
.ia-btn.l3{ left:-3px; top:312px; height:62px; }
.ia-btn.r1{ right:-3px; top:260px; height:98px; }
.ia-btn.r2{ right:-3px; top:470px; height:70px; }

.ia-screen{
  position:absolute; left:22px; top:23px;
  width:402px; height:874px;
  border-radius:62px;
  overflow:hidden;
  background:#000;
  isolation:isolate;
  contain:layout paint;
}

/* ---------- Status bar + Dynamic Island ---------- */
.ia-island{
  position:absolute; z-index:60; left:138.5px; top:14px; width:125px; height:36px;
  border-radius:18px; background:#000; pointer-events:none;
}
.ia-status{
  position:absolute; z-index:59; left:0; right:0; top:0; height:54px;
  pointer-events:none; color:var(--ink);
  transition:color .25s;
}
.ia.sheet-open .ia-status{ color:var(--ink); }
.ia-time{
  position:absolute; left:51px; top:22px; width:44px; text-align:center;
  font:600 17px/22px var(--font);/*clock*/
}
.ia-sys{ position:absolute; right:34px; top:27px; display:flex; gap:6px; align-items:center; }
.ia-sys svg{ display:block; }

/* ---------- Shell: the page stack under the sheet ---------- */
.ia-shell{
  position:absolute; inset:0;
  background:var(--bg);
  transform-origin:50% 0;
}
.ia-pane{
  position:absolute; inset:0;
  background:var(--bg);
  visibility:hidden;
}
.ia-pane.on{ visibility:visible; }
.ia-pane.grouped{ background:var(--grouped); }
.ia-scroll{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none;
  overscroll-behavior:contain;
  /* PTS:336-347: content fades out over the 36pt where the chrome begins */
  -webkit-mask-image:linear-gradient(#000 0, #000 calc(100% - 180px), transparent calc(100% - 144px));
          mask-image:linear-gradient(#000 0, #000 calc(100% - 180px), transparent calc(100% - 144px));
}
.ia-scroll::-webkit-scrollbar{ display:none; }
.ia-pane-inner{ position:relative; padding-bottom:200px; min-height:100%; box-sizing:border-box; }

/* Large-title navigation bar */
.ia-nav{ position:relative; height:165px; }
.ia-nav.no-sub{ height:174px; }
.ia-nav.no-sub .ia-title{ top:111px; }
.ia-title{
  position:absolute; left:16px; top:111px;
  font:700 34px/41px var(--font-d);
  white-space:nowrap;
}
.ia-subtitle{
  position:absolute; left:17px; top:148.3px;
  font:400 11.5px/1.193 var(--font); color:var(--ink-2);
}
.ia-toolbar{
  position:absolute; right:16px; top:62px; height:45px;
  display:flex; align-items:center;
  border-radius:23px;
}
.ia-toolbar.ia-glass{ box-shadow:inset 0 0 0 .75px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9), 0 3px 12px rgba(0,0,0,.04); }
:root[data-theme="dark"] .ia-toolbar.ia-glass{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 3px 12px rgba(0,0,0,.3); }
.ia-tool{
  width:68px; height:45px; display:grid; place-items:center;
  border:0; padding:0; background:none; color:var(--ink); cursor:pointer;
}
.ia-tool + .ia-tool{ width:50px; margin-left:8px; }
.ia-toolbar.single .ia-tool{ width:45px; margin:0; }
.ia-toolbar.triple .ia-tool{ width:54px; margin:0; }
.ia-tool svg{ width:25px; height:25px; transform:translateY(1px); }
.ia-tool svg.p3{ width:41px; height:20px; }

/* ---------- Glass (Liquid Glass approximation) ---------- */
.ia-glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.8);
          backdrop-filter:blur(14px) saturate(1.8);
  box-shadow:inset 0 0 0 1px var(--glass-rim), inset 0 1.5px 1px -1px var(--glass-hi), inset 0 -8px 14px -10px rgba(0,0,0,.06), var(--glass-shadow);
}

/* ---------- Press style .pressable (CMP:3064-3069) ---------- */
.ia-press{ transition:transform .15s cubic-bezier(.4,0,.2,1), opacity .15s cubic-bezier(.4,0,.2,1); }
.ia-press.pressed{ transform:scale(.96); opacity:.75; }

/* ---------- Home ---------- */
.ia-add{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:42px 20px 0; min-height:44px;
  font:600 15px/1.193 var(--font); color:var(--tint);
  border:0; background:none; width:calc(100% - 40px); cursor:pointer;
  transition:opacity .2s;
}
.ia-add:active{ opacity:.4; }
.ia-add svg{ width:17px; height:17px; }
.ia-section-h{
  margin:20px 21px 0; height:15.5px;
  font:600 13px/1.193 var(--font); text-transform:uppercase;
  color:var(--ink-2);
}
.ia-cards{ display:flex; flex-direction:column; gap:10px; margin:11px 20px 0; }
.ia-card{ border-radius:16px; background:var(--fill-05); }
.ia-card.lead{ background:var(--fill-08); }
.ia-card-top{
  display:flex; align-items:center; gap:12px; padding:14px;
  cursor:pointer;
}
.ia-art{
  position:relative; flex:none; width:48px; height:48px; border-radius:8px;
  background:#888 center/cover no-repeat;
}
.ia-card.lead .ia-art{ width:64px; height:64px; border-radius:10px; }
.ia-badge{
  position:absolute; right:-6px; top:-6px; min-width:16px; height:16px; padding:0 5px; box-sizing:border-box;
  border-radius:8px; background:#000; color:#fff;
  font:700 11px/1.193 var(--font); text-align:center;
  box-shadow:0 0 0 2px var(--bg);
}
.ia-card-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ia-card-room{ font:600 15px/1.193 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-card.lead .ia-card-room{ font-size:17px; line-height:1.193; }
.ia-card-track{ font:400 13px/1.193 var(--font); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-card.lead .ia-card-track{ font-size:15px; line-height:1.193; }
.ia-card-artist{ font:400 12px/1.193 var(--font); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-card.paused .ia-card-room{ color:var(--ink-2); }
.ia-mark{ flex:none; color:var(--tint); display:grid; place-items:center; }
.ia-mark svg{ width:24px; height:24px; }
.ia-card:not(.lead) .ia-mark svg{ width:21px; height:21px; }
.ia-card.paused .ia-mark{ color:var(--ink-2); }
.ia-vol{
  display:flex; align-items:center; gap:8px; padding:0 14px 12px;
}
.ia-vol-ic{ width:24px; height:24px; flex:none; display:grid; place-items:center; color:var(--ink-2); }
.ia-vol-ic svg{ width:19px; height:19px; }
.ia-vol-lbl{ flex:none; font:500 15px/1.193 var(--font); font-variant-numeric:tabular-nums; }

/* Waveform: .symbolEffect(.variableColor.iterative) — one layer lit at a time */
.ia-wave rect{ transition:opacity .12s linear; }
.ia-wave.live rect{ opacity:.3; }
.ia-wave.live rect.lit{ opacity:1; }

/* ---------- Stock iOS slider (track 6pt, capsule thumb 37×24) ---------- */
.ia-slider{
  position:relative; flex:1; height:31px; touch-action:none; cursor:pointer;
  --v:.5;
}
.ia-slider-track{
  position:absolute; left:0; right:0; top:50%; height:6px; margin-top:-3px; border-radius:3px;
  background:var(--track); overflow:hidden;
}
.ia-slider-fill{
  position:absolute; left:0; top:0; bottom:0; width:calc(var(--v) * 100%);
  background:var(--tint); border-radius:3px;
}
.ia-slider-thumb{
  position:absolute; top:50%; left:calc(var(--v) * (100% - 37px));
  width:37px; height:24px; margin-top:-12px; border-radius:12px;
  background:#fff;
  box-shadow:0 .5px 4px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04);
  transform:scale(1); transform-origin:50% 50%;
  transition:transform .32s cubic-bezier(.3,1.5,.5,1), background-color .2s, box-shadow .2s;
}
/* While dragging the thumb turns into a clear glass lens ~1.5× (iOS 26). */
.ia-slider.dragging .ia-slider-thumb{
  transform:scale(1.55, 1.5);
  background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(1.5px) saturate(1.4) brightness(1.08);
          backdrop-filter:blur(1.5px) saturate(1.4) brightness(1.08);
  box-shadow:inset 0 0 0 .6px rgba(255,255,255,.95), inset 0 -2px 4px rgba(0,0,0,.12), inset 0 2px 3px rgba(255,255,255,.7), 0 2px 10px rgba(0,0,0,.14);
  transition:transform .22s cubic-bezier(.3,1.6,.5,1), background-color .15s, box-shadow .15s;
}
.ia-slider.mini{ height:28px; }
.ia-slider.mini .ia-slider-thumb{ width:36px; height:23px; margin-top:-11.5px; left:calc(var(--v) * (100% - 36px)); }

/* ---------- Bottom chrome (PTS:1785-1812) ---------- */
.ia-chrome{
  position:absolute; left:0; right:0; bottom:0; height:180px; z-index:20;
  pointer-events:none;
}
.ia-chrome > *{ pointer-events:auto; }
.ia-mini{
  position:absolute; left:26px; top:20px; width:350px; height:60px; box-sizing:border-box;
  border-radius:24px;
  display:flex; align-items:center; gap:8px; padding:0 28px;
  transition:width .3s cubic-bezier(.3,1,.4,1);
}
.ia-mini-open{ flex:1; min-width:0; height:44px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.ia-mini .ia-art{ width:36px; height:36px; border-radius:6px; }
.ia-mini-tx{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.ia-mini-title{ font:400 15px/1.193 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-mini-artist{ font:400 12px/1.193 var(--font); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-mini-room{
  /* TargetRoomPicker .frame(maxWidth: 90): measured as a 90pt box, label centred */
  flex:none; width:90px; height:44px; display:flex; align-items:center; justify-content:center; gap:5px;
  border:0; background:none; padding:0; color:var(--ink); cursor:pointer;
  font:400 12px/1.193 var(--font); white-space:nowrap;
}
.ia-mini-room span{ overflow:hidden; text-overflow:ellipsis; }
.ia-mini-room svg{ width:13px; height:13px; flex:none; margin-left:1px; }
.ia-mini-play{
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  border:0; background:none; padding:0; color:var(--ink); cursor:pointer;
}
.ia-mini-play svg{ width:22px; height:22px; }

/* Tab lenses (PTS:1833-2550): four 62pt glass circles, 70pt pitch */
.ia-tabs{ position:absolute; left:26px; top:93px; width:272px; height:62px; touch-action:none; }
.ia-tab{
  position:absolute; top:0; left:var(--x); width:62px; height:62px; padding:0; border:0; background:none;
  cursor:pointer; color:var(--inactive);
}
.ia-tab-glass{
  position:absolute; inset:0; border-radius:50%;
  transition:transform .3s cubic-bezier(.3,1.25,.5,1);
}
.ia-tab.held .ia-tab-glass{ transform:scale(1.08); transition-duration:.22s; }
.ia-tab-sym{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}
.ia-tab-sym svg{ width:28px; height:28px; transform:translateY(-7.2px); transition:transform .3s cubic-bezier(.3,1.25,.5,1); }
.ia-tab.held .ia-tab-sym svg{ transform:translateY(-7.2px) scale(1.12); transition-duration:.22s; }
.ia-tab-lbl{
  position:absolute; left:-4px; right:-4px; top:38.3px; text-align:center;
  font:500 11px/1.193 var(--font); pointer-events:none;
}
.ia-tab-bar{
  position:absolute; left:24px; top:55.75px; width:14px; height:2.5px; border-radius:2px;
  background:currentColor; opacity:0;
}
.ia-tab.on{ color:var(--tint); }
.ia-tab.on .ia-tab-lbl{ font-weight:600; }
.ia-tab.on .ia-tab-bar{ opacity:1; }
.ia-tab-sym svg.w{ stroke-width:1.65; }
.ia-tab.on .ia-tab-sym svg.w{ stroke-width:2; }

/* Press lens: a clear glass capsule 1.26× over the pressed tab that refracts
   the symbol under it (PTS:2251-2283). The refraction is a magnified copy of
   the tab's symbol + label, masked to the lens, with a bright rim. */
.ia-lens{
  position:absolute; top:-8px; left:0; width:78px; height:78px; margin-left:-8px;
  border-radius:50%; pointer-events:none; z-index:3;
  opacity:0; transform:scale(.79);
  overflow:hidden;
  background:rgba(255,255,255,.55);
  box-shadow:
    inset 0 0 0 .75px rgba(255,255,255,1),
    inset 0 0 0 1.5px rgba(0,0,0,.08),
    inset 3px -5px 8px -3px rgba(0,0,0,.28),
    inset -2px 3px 6px -2px rgba(255,255,255,.9),
    0 4px 14px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(2px) saturate(1.5) brightness(1.12);
          backdrop-filter:blur(2px) saturate(1.5) brightness(1.12);
}
:root[data-theme="dark"] .ia-lens{
  background:rgba(70,70,70,.35);
  box-shadow:
    inset 0 0 0 .75px rgba(255,255,255,.55),
    inset 3px -5px 8px -3px rgba(0,0,0,.6),
    inset -2px 3px 6px -2px rgba(255,255,255,.35),
    0 4px 14px rgba(0,0,0,.5);
}
.ia-lens-view{ /* the refracted copy, magnified toward the rim */
  position:absolute; left:8px; top:8px; width:62px; height:62px;
  color:var(--tint);
  transform:scale(1.2);
  filter:blur(.35px);
}
.ia-lens-view .ia-tab-sym svg{ transform:translateY(-7.2px) scale(1.12); }
.ia-lens-ring{
  position:absolute; top:-8px; left:0; width:78px; height:78px; margin-left:-8px; border-radius:50%;
  pointer-events:none; opacity:0; z-index:2;
  box-shadow:0 0 0 1px rgba(255,255,255,.95), 0 0 0 2px rgba(0,0,0,.05);
}

/* ---------- Page chrome while the sheet is up ---------- */
.ia-scrim{
  position:absolute; inset:0; z-index:40; background:var(--scrim);
  opacity:0; pointer-events:none;
}
.ia.sheet-open .ia-scrim{ pointer-events:auto; }

/* ---------- Now Playing sheet (NowPlayingSheet) ---------- */
.ia-sheet{
  position:absolute; left:0; right:0; top:60px; height:814px; z-index:50;
  background:var(--bg);
  border-radius:50px 50px 62px 62px;
  transform:translateY(105%);
  display:flex; flex-direction:column; align-items:center;
  touch-action:none;
  box-shadow:0 -1px 0 rgba(0,0,0,.02);
  visibility:hidden;
}
.ia.sheet-live .ia-sheet{ visibility:visible; }
.ia-grab{ position:absolute; left:171px; top:6px; width:60px; height:5px; border-radius:3px; background:#BABABD; }
:root[data-theme="dark"] .ia-grab{ background:#464649; }
.ia-np{
  position:absolute; left:0; right:0; top:0; bottom:31px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
}
.ia-np-head{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.ia-np-art{ width:300px; height:300px; border-radius:16px; background:#888 center/cover no-repeat; position:relative; overflow:hidden; }
.ia-np-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .28s ease-out; }
.ia-np-tx{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:0 20px; }
.ia-np-title{ font:700 20px/1.193 var(--font-d); }
.ia-np-sub{ font:400 15px/1.193 var(--font); color:var(--ink-2); white-space:pre; }
.ia-np-scrub{ display:flex; align-items:center; gap:10px; width:362px; }
.ia-np-time{ flex:none; width:30px; font:400 11px/1.193 var(--font); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.ia-np-time.r{ text-align:right; }
.ia-np-transport{ display:flex; align-items:center; gap:36px; height:64px; }
.ia-np-t{
  width:44px; height:44px; padding:0; border:0; background:none; color:var(--ink); cursor:pointer;
  display:grid; place-items:center;
}
.ia-np-t svg{ width:40px; height:40px; }
.ia-np-t.mode{ color:var(--ink-2); }
.ia-np-t.mode svg{ width:22px; height:22px; }
.ia-np-t.mode .dot{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; }
.ia-np-t.mode.on{ color:var(--on-tint); }
.ia-np-t.mode.on .dot{ background:var(--tint); }
.ia-np-t.mode.on svg{ width:17px; height:17px; }
.ia-np-play{ width:64px; height:64px; color:var(--tint); }
.ia-np-play svg{ width:64px; height:64px; }
.ia-np-volrow{ display:flex; align-items:center; gap:10px; width:362px; }
.ia-np-mute{ flex:none; width:44px; height:44px; margin-left:-2px; margin-right:-8px; border:0; background:none; padding:0; color:var(--ink-2); display:grid; place-items:center; cursor:pointer; }
.ia-np-mute svg{ width:15px; height:15px; }
.ia-np-volnum{ flex:none; margin-right:-2px; width:22px; text-align:right; font:400 12px/1.193 var(--font); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.ia-stepper{ flex:none; display:flex; align-items:center; width:88px; height:44px; border-radius:22px; background:var(--fill-07); }
.ia-stepper button{ width:44px; height:44px; border:0; background:none; padding:0; color:var(--ink-2); display:grid; place-items:center; cursor:pointer; }
.ia-stepper button:active{ opacity:.35; }
.ia-stepper svg{ width:15px; height:15px; }
.ia-stepper i{ width:.5px; height:14px; background:var(--ink-3); flex:none; }
.ia-np-actions{ display:flex; gap:24px; }
.ia-np-act{
  width:56px; height:44px; padding:0; border:0; background:none; color:var(--ink-2); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font:400 11px/1.193 var(--font);
}
.ia-np-act svg{ width:22px; height:22px; flex:none; }

/* ---------- Rooms / Search: inset-grouped lists ---------- */
.ia-group-h{ margin:14px 36px 9px; font:600 17px/1.193 var(--font); color:var(--ink-2); }
.ia-list{ margin:0 16px; border-radius:26px; background:var(--cell); overflow:hidden; }
.ia-row{ position:relative; display:flex; align-items:center; gap:12px; min-height:66px; padding:0 16px; }
.ia-row + .ia-row::before{ content:""; position:absolute; top:0; right:16px; left:var(--sep-left,52px); height:.5px; background:var(--sep); }
.ia-row-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ia-row-t{ font:400 17px/1.193 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-row-s{ font:400 12px/1.193 var(--font); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-row-end{ flex:none; color:var(--ink-2); display:flex; align-items:center; gap:3px; font:400 12px/1.193 var(--font); font-variant-numeric:tabular-nums; }
.ia-row-end svg{ width:15px; height:15px; }
.ia-rooms .ia-row{ min-height:86px; gap:8px; padding-right:16px; --sep-left:88px; }
.ia-rooms .ia-row-t{ font-weight:600; }
.ia-room-ic{ position:relative; width:48px; height:48px; flex:none; display:grid; place-items:center; color:var(--ink); }
.ia-room-ic svg{ width:29px; height:29px; }
.ia-room-ic .ia-badge{ right:-2px; top:-4px; box-shadow:0 0 0 2px var(--cell); }
.ia-rooms .ia-mark svg{ width:16px; height:16px; }
.ia-rooms .ia-row-end{ gap:10px; }
.ia-rooms .ia-row-end .v{ display:flex; align-items:center; gap:3px; }
.ia-zone-add{
  display:flex; align-items:center; gap:10px; margin:0 32px; height:42px; padding:0 16px; border-radius:21px; border:0;
  background:var(--tint); color:var(--on-tint); font:600 17px/1.193 var(--font); width:calc(100% - 64px); cursor:pointer;
}
.ia-zone-add svg{ width:22px; height:22px; stroke-width:2.4; }
.ia-foot{ margin:12px 32px 0; font:400 13px/1.193 var(--font); color:var(--ink-2); }
.ia-tile{ flex:none; width:36px; height:36px; border-radius:7px; display:grid; place-items:center; color:rgba(255,255,255,.55); font:600 14px/1 ui-rounded, var(--font); }
.ia-search{ margin:0 16px; height:43px; border-radius:22px; background:rgba(118,118,128,.12); display:flex; align-items:center; gap:8px; padding:0 14px; color:var(--ink-2); font:400 17px/1.193 var(--font); }
:root[data-theme="dark"] .ia-search{ background:rgba(118,118,128,.24); }
.ia-search svg{ width:18px; height:18px; color:var(--ink); }

/* ---------- Music ---------- */
.ia-shelf-h{ display:flex; align-items:center; gap:12px; margin:0 20px; min-height:32px; font:700 20px/1.193 var(--font-d); }
.ia-shelf-h .grow{ flex:1; }
.ia-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:15px; background:var(--fill-07); font:500 15px/1.193 var(--font); }
.ia-chip svg{ width:14px; height:14px; }
.ia-grip{ width:32px; height:32px; border-radius:50%; background:var(--fill-08); display:grid; place-items:center; color:var(--ink-2); margin-right:-12px; transform:translateY(2px); }
.ia-grip svg{ width:14px; height:14px; }
.ia-rail{ display:flex; gap:14px; padding:0 20px; margin-top:12px; overflow:hidden; }
.ia-svc{ width:64px; flex:none; display:flex; flex-direction:column; gap:4px; font:400 12px/1.193 var(--font); }
.ia-svc span:last-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-svc .t{ width:64px; height:64px; border-radius:12px; display:grid; place-items:center; font:600 26px/1 ui-rounded, var(--font); color:rgba(255,255,255,.55); }
.ia-svc .t.brand{ font:700 35px/1 var(--font); color:rgba(255,255,255,.6); }
.ia-svc .t.reorder{ box-sizing:border-box; border:1.5px dashed var(--ink-3); color:var(--ink-2); }
.ia-svc .t.reorder svg{ width:20px; height:20px; }
.ia-svc.dim{ color:var(--ink-2); }
.ia-mcard{ width:172px; flex:none; display:flex; flex-direction:column; gap:6px; }
.ia-mcard .a{ width:172px; height:172px; border-radius:8px; background:#888 center/cover no-repeat; }
.ia-mcard .t{ font:400 15px/1.193 var(--font); min-height:40px; }
.ia-mcard .s{ font:400 12px/1.193 var(--font); color:var(--ink-2); margin-top:-6px; }

/* ---------- Reduced motion: no lens, no scale ---------- */
.ia.reduced .ia-lens, .ia.reduced .ia-lens-ring{ display:none; }
.ia.reduced .ia-tab.held .ia-tab-glass{ transform:none; }
.ia.reduced .ia-tab.held .ia-tab-sym{ opacity:.55; }
.ia.reduced .ia-press.pressed{ transform:none; }

/* ---------- Pinned navigation bar: toolbar + inline title (system) ---------- */
.ia-bar{ position:absolute; left:0; right:0; top:0; height:115.5px; z-index:5; pointer-events:none; --inline:0; }
.ia-bar > *{ pointer-events:auto; }
.ia-bar-bg{
  position:absolute; inset:0; pointer-events:none; opacity:var(--inline);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.8); backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:0 .5px 0 var(--sep);
}
.ia-pane.grouped .ia-bar-bg{ background:color-mix(in srgb, var(--grouped) 78%, transparent); }
.ia-inline{ position:absolute; left:16px; top:66px; display:flex; flex-direction:column; opacity:var(--inline); pointer-events:none; }
.ia-inline.no-sub{ top:75px; }
.ia-inline .t{ font:600 17px/1.193 var(--font); }
.ia-inline .s{ font:400 13px/1.193 var(--font); color:var(--ink-2); }

/* ---------- Pause All / Undo row (PTS:1162-1231) ---------- */
.ia-pauseall-slot{ margin:20px 20px 0; }
.ia-pauseall{
  display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:0 14px; box-sizing:border-box;
  border:0; border-radius:14px; background:var(--fill-05); color:var(--ink); cursor:pointer; text-align:left;
  font:500 15px/1.193 var(--font);
}
.ia-pauseall .ic{ display:grid; place-items:center; width:13px; }
.ia-pauseall .ic svg{ width:13px; height:13px; }
.ia-pauseall.undo .ic{ color:var(--ink-2); }
.ia-pauseall .dot{ color:var(--ink-3); font-weight:400; }
.ia-pauseall .dim{ color:var(--ink-2); font-weight:400; white-space:nowrap; }
.ia-pauseall .grow{ flex:1; }
.ia-undo{ border:0; background:none; padding:0; color:var(--tint); font:600 15px/1.193 var(--font); cursor:pointer; min-height:44px; }

/* ---------- Launch relay (bead relay, PTS:1884-2146) ---------- */
.ia-relay{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; color:#000; display:none; }
:root[data-theme="dark"] .ia-relay{ color:#fff; }
.ia-relay-g{ fill:#F8F8F8; }
:root[data-theme="dark"] .ia-relay-g{ fill:#202020; }
.ia-chrome.relaying .ia-relay{ display:block; }
.ia-chrome.relaying .ia-tab-glass{ opacity:0; }
.ia-chrome.relaying .ia-tab{ transform:translate(var(--rx,0), var(--ry,0)); pointer-events:none; }
.ia-chrome.relaying .ia-tab-sym{ opacity:var(--sym,0); filter:blur(calc(8px * (1 - var(--sym,0)))); }
.ia-chrome.relaying .ia-tab-sym svg{ transform:translateY(calc(-7.2px * var(--lbl,0))) scale(calc(1.2 - .2 * var(--lbl,0))); }
.ia-chrome.relaying .ia-tab-lbl, .ia-chrome.relaying .ia-tab-bar{ opacity:var(--lbl,0); filter:blur(calc(8px * (1 - var(--lbl,0)))); }
.ia-chrome.relaying .ia-mini{ opacity:var(--appear,0); }
.ia-chrome.relaying .ia-tabs{ opacity:var(--appear,0); }

/* ---------- Fold on scroll (PTS:1722-1829, phoneFoldSpring .30/.86) ---------- */
.ia-mini, .ia-tab, .ia-tab-sym svg, .ia-tab-lbl, .ia-tab-bar, .ia-mini-tx, .ia-mini-room{
  --fold:.42s cubic-bezier(.3,1.08,.45,1);
}
.ia-mini{ transition:left var(--fold), top var(--fold), width var(--fold), height var(--fold), border-radius var(--fold), padding var(--fold), gap var(--fold), opacity .18s ease-out, transform .25s ease-out; }
.ia-mini-tx, .ia-mini-room{ transition:opacity .15s ease-out, max-width var(--fold); max-width:220px; overflow:hidden; }
.ia-tab{ transition:transform var(--fold), opacity .25s ease-out; }
.ia-tab-lbl, .ia-tab-bar{ transition:opacity .15s ease-out; }
.ia-chrome.relaying .ia-tab, .ia-chrome.relaying .ia-mini, .ia-chrome.relaying .ia-tab-sym svg{ transition:none; }
.ia-chrome.folded .ia-mini{ left:98px; top:93px; width:152px; height:62px; border-radius:31px; padding:0 28px 0 32px; gap:12px; }
.ia-chrome.folded .ia-mini-open{ flex:none; }
.ia-chrome.folded .ia-mini-tx, .ia-chrome.folded .ia-mini-room{ opacity:0; max-width:0; margin:0; pointer-events:none; }
.ia-chrome.folded .ia-tab:not(.on){ transform:translateX(calc(72px - var(--x))) scale(.2); opacity:0; pointer-events:none; }
.ia-chrome.folded .ia-tab.on{ transform:translateX(calc(0px - var(--x))); }
.ia-chrome.folded .ia-tab-lbl, .ia-chrome.folded .ia-tab-bar{ opacity:0; }
.ia-chrome.folded .ia-tab.on .ia-tab-sym svg{ transform:translateY(0) scale(1.2); }

/* ---------- Room picker menu (system Menu, Liquid Glass) ---------- */
.ia-menu-catch{ position:absolute; inset:0; z-index:29; display:none; }
.ia.menu-open .ia-menu-catch{ display:block; }
.ia-menu{
  position:absolute; z-index:30; left:126px; width:250px; bottom:100.5px; max-height:558px;
  border-radius:34px; overflow:hidden; visibility:hidden; opacity:0;
  transform-origin:78% 94%;
  background:color-mix(in srgb, var(--glass) 92%, transparent);
  -webkit-backdrop-filter:blur(28px) saturate(1.9); backdrop-filter:blur(28px) saturate(1.9);
  box-shadow:inset 0 0 0 1px var(--glass-rim), 0 18px 50px rgba(0,0,0,.14), 0 3px 10px rgba(0,0,0,.06);
}
.ia.menu-open .ia-menu{ visibility:visible; opacity:1; }
.ia.menu-open .ia-mini{ opacity:0; transform:scale(.96); }
.ia-menu-scroll{ max-height:558px; overflow-y:auto; scrollbar-width:none; padding:14px 0; box-sizing:border-box; display:flex; flex-direction:column; }
.ia-menu-scroll::-webkit-scrollbar{ display:none; }
.ia-mi{
  display:flex; align-items:center; gap:0; min-height:48px; padding:6px 24px 6px 0; border:0; background:none; text-align:left;
  color:var(--ink); font:400 17px/1.25 var(--font); cursor:pointer; flex:none;
}
.ia-mi:active{ background:var(--fill-07); }
.ia-mi .mi-ic{ flex:none; width:65px; display:grid; place-items:center; padding-left:15px; box-sizing:border-box; }
.ia-mi .mi-ic svg{ width:22px; height:22px; }
.ia-mi .mi-t{ flex:1; min-width:0; }
.mi-sep{ display:block; height:1px; margin:6px 24px; background:var(--sep); flex:none; }
.mi-h{ display:block; padding:10px 24px 4px 28px; font:400 13px/1.193 var(--font); color:var(--ink-2); flex:none; }

.ia.reduced .ia-chrome *{ transition:none !important; }

/* ---------- Real-household details ---------- */
.ia-room-ic .prod{ width:48px; height:48px; background:center/contain no-repeat; }
.ia-room-ic .prod.d, :root[data-theme="dark"] .ia-room-ic .prod.l{ display:none; }
:root[data-theme="dark"] .ia-room-ic .prod.d{ display:block; }
.ia-art.noart{ background:#2b2b2b; display:grid; place-items:center; }
.ia-art.noart::after{ content:""; width:48%; height:48%; opacity:.35;
  background:center/contain no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.7"><rect x="9.2" y="3.2" width="11.6" height="17.6" rx="2.4"/><circle cx="15" cy="7.4" r="1.3" fill="white" stroke="none"/><circle cx="15" cy="14.5" r="3"/><path d="M7.2 5.6H5.6A2.4 2.4 0 0 0 3.2 8v10.4a2.4 2.4 0 0 0 2.4 2.4h1.6"/></svg>'); }
.ia-tile{ background:#888 center/cover no-repeat; }
.ia-tile.brand{ color:#fff; font:700 19px/1 var(--font); }
.ia-tile.brand.dark, .ia-svc .t.brand.dark{ color:#000; }
.ia-svc .t.brand{ color:#fff; font:700 38px/1 var(--font); }
.ia-rooms .bat{ display:flex; align-items:center; gap:4px; }
.ia-rooms .bat svg{ width:19px; height:10px; }
.ia-house .ia-row{ min-height:52px; gap:14px; }
.ia-house svg.hh{ width:26px; height:26px; color:var(--ink); flex:none; }
.ia-search .ph{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ia-mcard .s:empty{ display:none; }

.ia-chrome.snap, .ia-chrome.snap *{ transition:none !important; }

/* Music's ScrollView sits 15pt higher than the List-based tabs (measured, live). */
.ia-pane[data-pane="music"] .ia-nav{ height:159px; }
.ia-pane[data-pane="music"] .ia-nav .ia-title{ top:111px; }
.ia-mcard .t{ text-wrap:balance; }

/* =================== Sheets: Customize Home / Add Controls / pickers =================== */
.ia{ --sh-bg:#F2F2F7; --sh-card:#fff; --sh-sep:#E8E8E8; --sw-on:#000; --chip-fill:rgba(0,0,0,.09); --chip-line:rgba(0,0,0,.18); --btn-fill:#C9C9C9; }
:root[data-theme="dark"] .ia{ --sh-bg:#1C1C1E; --sh-card:#2C2C2E; --sh-sep:#404043; --sw-on:#949494; --chip-fill:rgba(255,255,255,.18); --chip-line:rgba(255,255,255,.18); --btn-fill:#404040; }
.ia-sheets{ position:absolute; inset:0; z-index:45; pointer-events:none; }
.ia-ms{
  position:absolute; left:0; right:0; top:62px; bottom:0; pointer-events:auto;
  background:var(--sh-bg); border-radius:50px 50px 62px 62px; overflow:hidden;
  transform-origin:50% 0; transition:filter .3s, scale .35s cubic-bezier(.3,1,.4,1), top .35s cubic-bezier(.3,1,.4,1);
  box-shadow:0 -1px 0 rgba(0,0,0,.03);
}
.ia-ms.stacked{ top:72px; }
.ia-ms.medium{ left:8px; right:8px; top:321px; bottom:8px; border-radius:40px 40px 54px 54px;
  background:color-mix(in srgb, var(--sh-bg) 86%, transparent);
  -webkit-backdrop-filter:blur(30px) saturate(1.6); backdrop-filter:blur(30px) saturate(1.6);
  box-shadow:inset 0 0 0 1px var(--glass-rim), 0 10px 40px rgba(0,0,0,.12); }
.ia-ms.recede{ scale:.955; filter:brightness(.9); }
.ia-ms.dim:not(.recede){ filter:brightness(.82) saturate(.8); }
:root[data-theme="dark"] .ia-ms.recede, :root[data-theme="dark"] .ia-ms.dim:not(.recede){ filter:brightness(.6); }
.ia-ms-grab{ position:absolute; left:50%; top:6px; width:60px; height:5px; margin-left:-30px; border-radius:3px; background:#B7B7C0; z-index:3; }
:root[data-theme="dark"] .ia-ms-grab{ background:#626268; }
.ia-ms-body, .ia-ms-pages{ position:absolute; inset:0; display:flex; flex-direction:column; }
.ia-ms-pages{ overflow:hidden; }
.ia-ms-page{ position:absolute; inset:0; display:flex; flex-direction:column; background:inherit; transform:translateX(100%); transition:transform .38s cubic-bezier(.2,.85,.25,1), filter .38s; }
.ia-ms-page.on{ transform:none; }
.ia-ms-page.under{ transform:translateX(-30%); filter:brightness(.94); }
.ia-ms.medium .ia-ms-page{ background:color-mix(in srgb, var(--sh-bg) 97%, var(--sh-card)); }
.ia-ms-page.under{ pointer-events:none; }
.ia-ms.medium .ia-card2.form{ background:var(--sh-card); margin-top:6px; }
.ia-ms-bar{ flex:none; position:relative; height:60px; margin-top:16px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; touch-action:none; }
.ia-ms.medium .ia-ms-bar{ margin-top:12px; }
.ia-ms-t{ position:absolute; left:0; right:0; text-align:center; pointer-events:none; font:600 17px/1.193 var(--font); }
.ia-cap{ position:relative; z-index:1; min-width:44px; height:44px; padding:0 16px; border:0; border-radius:22px; cursor:pointer;
  font:400 17px/1 var(--font); color:var(--tint);
  background:var(--glass); -webkit-backdrop-filter:blur(14px) saturate(1.8); backdrop-filter:blur(14px) saturate(1.8);
  box-shadow:inset 0 0 0 .75px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9), 0 3px 12px rgba(0,0,0,.04); }
:root[data-theme="dark"] .ia-cap{ box-shadow:inset 0 0 0 .75px rgba(255,255,255,.16), 0 3px 12px rgba(0,0,0,.3); }
.ia-cap.ghost{ visibility:hidden; }
.ia-cap.circ{ width:44px; padding:0; display:grid; place-items:center; }
.ia-cap.circ svg{ width:20px; height:20px; }
.ia-cap.strong{ background:var(--tint); color:var(--on-tint); font-weight:600; }
.ia-ms-scroll{ flex:1; overflow-y:auto; scrollbar-width:none; padding:0 16px 40px; }
.ia-ms-scroll::-webkit-scrollbar{ display:none; }
.ia-sh-h{ display:flex; align-items:center; gap:8px; margin:22px 16px 9px 18px; font:600 17px/1.193 var(--font); color:var(--ink-2); }
.ia-sh-h:first-child{ margin-top:8px; }
.ia-sh-h .plus{ margin-left:auto; border:0; background:none; padding:0; width:28px; height:28px; display:grid; place-items:center; color:var(--tint); cursor:pointer; margin-right:-6px; }
.ia-sh-h .plus svg{ width:19px; height:19px; }
.ia-sh-h.ic svg{ width:21px; height:21px; }
.ia-sh-f{ margin:9px 18px 0; font:400 13px/1.35 var(--font); color:var(--ink-2); }
.ia-card2{ background:var(--sh-card); border-radius:26px; overflow:hidden; }
.ia-ms.medium .ia-card2{ background:transparent; }
.ia-r{ position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:51px; padding:10px 16px; box-sizing:border-box;
  border:0; background:none; text-align:left; color:var(--ink); font:400 17px/1.193 var(--font); cursor:pointer; }
.ia-r + .ia-r::before{ content:""; position:absolute; top:0; right:16px; left:var(--sl,68px); height:1px; background:var(--sh-sep); }
.ia-r:active:not(:disabled){ background:var(--fill-05); }
.ia-r .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ia-r .tx .t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-r .tx .s{ font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-r.empty{ align-items:flex-start; padding:16px; min-height:99px; cursor:default; }
.ia-r.empty .e-ic{ width:28px; display:grid; place-items:center; color:var(--tint); padding-top:2px; }
.ia-r.empty .e-ic svg{ width:24px; height:24px; }
.ia-r.empty .t{ font-weight:500; }
.ia-r.empty .s{ font-size:13px; line-height:1.35; white-space:normal; }
.ia-r.pin{ --sl:56px; min-height:60px; }
.ia-r.pin .pin-ic{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--tint); background:color-mix(in srgb, var(--tint) 12%, transparent); flex:none; }
.ia-r.pin .pin-ic svg{ width:16px; height:16px; }
.ia-r.pin .t{ font-weight:500; }
.size-btn{ display:flex; align-items:center; gap:6px; border:0; background:none; padding:6px 0; color:var(--tint); font:500 12px/1 var(--font); cursor:pointer; flex:none; }
.size-btn svg{ width:18px; height:18px; }
.ia-r .grip{ display:none; width:22px; color:var(--ink-3); flex:none; }
.ia-r .grip svg{ width:20px; height:20px; }
.ia-ms.editing .ia-r .grip{ display:block; }
.ia-ms.editing .size-btn{ display:none; }
.ia-r.sec{ min-height:58px; }
.ia-r.sec:first-child{ min-height:51px; }
.ia-r.sec .sec-ic{ width:24px; display:grid; place-items:center; color:var(--tint); flex:none; }
.ia-r.sec .sec-ic svg{ width:21px; height:21px; }
.ia-r.sec .t{ flex:1; }
.ia-r.sec .req{ font-size:12px; color:var(--ink-2); margin-right:3px; }
.ia-r.restore{ --sl:68px; min-height:52px; gap:16px; }
.ia-r.restore svg{ width:22px; height:22px; margin-left:4px; }

/* iOS 26 switch */
.ia-switch{ position:relative; width:63px; height:28px; border:0; border-radius:14px; padding:0; cursor:pointer; flex:none;
  background:rgba(120,120,128,.16); transition:background-color .25s; }
.ia-switch i{ position:absolute; left:2px; top:2px; width:37px; height:24px; border-radius:12px; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.15), 0 0 0 .5px rgba(0,0,0,.04);
  transition:transform .35s cubic-bezier(.3,1.35,.5,1), width .2s; }
.ia-switch:active i{ width:42px; }
.ia-switch.on{ background:var(--sw-on); }
.ia-switch.on i{ transform:translateX(22px); }
.ia-switch.on:active i{ transform:translateX(17px); }

/* gallery */
.ia-sfield{ flex:none; display:flex; align-items:center; gap:10px; margin:0 16px 8px; height:44px; padding:0 14px; border-radius:22px;
  background:color-mix(in srgb, var(--sh-card) 60%, var(--sh-bg)); box-shadow:inset 0 0 0 .75px var(--glass-rim); color:var(--ink-2); }
.ia-sfield svg{ width:19px; height:19px; color:var(--ink); flex:none; }
.ia-sfield input{ flex:1; min-width:0; border:0; outline:0; background:none; font:400 17px/1 var(--font); color:var(--ink); -webkit-appearance:none; }
.ia-sfield input::placeholder{ color:var(--ink-2); }
.ia-sfield input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.ia-card2.sizes{ display:flex; gap:8px; padding:15px 16px; }
.sz{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px; border:0; border-radius:12px; background:transparent; cursor:pointer; transition:background-color .2s cubic-bezier(.3,1,.4,1); color:var(--ink-2); font:400 12px/1.193 var(--font); }
.sz.on{ background:color-mix(in srgb, var(--tint) 10%, transparent); color:var(--tint); font-weight:600; }
.sz .ia-chip2.large{ width:100%; }
.ia-chip2{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; height:30px; padding:0 8px; box-sizing:border-box; border-radius:8px;
  background:var(--chip-fill); box-shadow:inset 0 0 0 1px var(--chip-line); color:var(--tint); font:500 11px/1 var(--font);
  transition:width .2s cubic-bezier(.3,1,.4,1); }
.ia-chip2 svg{ width:12px; height:12px; }
.ia-chip2.compact{ width:56px; }
.ia-chip2.compact svg{ width:11px; height:11px; }
.ia-chip2.large{ min-width:110px; }
.ia-chip2 span{ white-space:nowrap; }
.ia-r.gi{ --sl:75px; min-height:66.7px; }
.ia-r.gi .gl, .ia-r.pk .gl{ width:30px; display:grid; place-items:center; color:var(--tint); flex:none; }
.ia-r.gi .gl svg, .ia-r.pk .gl svg{ width:21px; height:21px; }
.ia-r.gi .t{ font-weight:500; }
.ia-none{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:40px 20px; text-align:center; color:var(--ink-2); font:400 15px/1.3 var(--font); }
.ia-none svg{ width:44px; height:44px; color:var(--ink-3); }
.ia-none b{ font:700 22px/1.2 var(--font-d); color:var(--ink); }
.ia-none.small b{ font-size:17px; }
.ia-r.pk{ --sl:58px; min-height:58px; }
.ia-r.pk:disabled{ opacity:.4; cursor:default; }
.ia-r.pk .chev{ color:var(--ink-3); } .ia-r.pk .chev svg{ width:14px; height:14px; }
.ia-r.slp{ justify-content:space-between; --sl:16px; }
.ia-r.slp .gl{ color:var(--tint); } .ia-r.slp .gl svg{ width:20px; height:20px; }
.ia-card2.form{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.ia-card2.form .vh{ font:600 17px/1.193 var(--font); }
.ia-card2.form .vrow{ display:flex; align-items:center; gap:10px; }
.ia-card2.form .vn{ min-width:32px; text-align:right; font:400 17px/1 var(--font); font-variant-numeric:tabular-nums; }
.ia-card2.form .vst{ display:flex; align-items:center; justify-content:space-between; font:400 17px/1 var(--font); }
.ia-card2.form .vst b{ font-weight:400; font-variant-numeric:tabular-nums; }

/* alert + popover menu */
.ia-alert-wrap{ position:absolute; inset:0; z-index:70; display:grid; place-items:center; background:rgba(0,0,0,.2); opacity:0; transition:opacity .2s; }
.ia-alert-wrap.on{ opacity:1; }
.ia-alert{ width:300px; border-radius:34px; padding:22px 20px 16px; text-align:center; transform:scale(1.1); transition:transform .3s cubic-bezier(.3,1.3,.5,1);
  background:color-mix(in srgb, var(--sh-card) 88%, transparent); -webkit-backdrop-filter:blur(30px) saturate(1.8); backdrop-filter:blur(30px) saturate(1.8); box-shadow:0 20px 60px rgba(0,0,0,.2); }
.ia-alert-wrap.on .ia-alert{ transform:none; }
.ia-alert .at{ font:600 17px/1.25 var(--font); }
.ia-alert .am{ margin-top:6px; font:400 14px/1.35 var(--font); color:var(--ink-2); }
.ia-alert .ab{ display:flex; gap:10px; margin-top:18px; }
.ia-alert .ab button{ flex:1; height:48px; border:0; border-radius:24px; background:var(--fill-07); color:var(--ink); font:500 17px/1 var(--font); cursor:pointer; }
.ia-alert .ab .destr{ color:#FF3B30; }
.ia-pop-catch{ position:absolute; inset:0; z-index:71; }
.ia-pop{ position:absolute; z-index:72; min-width:210px; padding:8px 0; border-radius:26px; transform-origin:90% 0; animation:ia-pop-in .32s cubic-bezier(.25,1.2,.35,1);
  background:color-mix(in srgb, var(--glass) 95%, transparent); -webkit-backdrop-filter:blur(28px) saturate(1.9); backdrop-filter:blur(28px) saturate(1.9);
  box-shadow:inset 0 0 0 1px var(--glass-rim), 0 18px 50px rgba(0,0,0,.16); }
.ia-pop.out{ animation:ia-pop-out .18s ease-in forwards; }
@keyframes ia-pop-in{ from{ opacity:0; transform:scale(.4); filter:blur(4px); } }
@keyframes ia-pop-out{ to{ opacity:0; transform:scale(.6); } }
.ia-pop button{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:44px; padding:0 20px; border:0; background:none; color:var(--ink); font:400 17px/1 var(--font); cursor:pointer; }
.ia-pop button:active{ background:var(--fill-07); }
.ia-pop .i svg{ width:20px; height:20px; }

/* =================== Home: Shortcuts rack (QPC) =================== */
.sec-hidden{ display:none !important; }
.ia-rack{ margin:44px 20px 0; }
.ia-rack .rack-h{ margin:0 0 10px 1px; }
.ia-qgrid{ display:grid; grid-template-columns:repeat(4, 83px); gap:10px; }
.ia-qt{ position:relative; height:78px; border:0; border-radius:20px; background:var(--fill-09, rgba(0,0,0,.09)); color:var(--ink); cursor:pointer; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; transition:transform .15s cubic-bezier(.4,0,.2,1), opacity .15s; }
:root[data-theme="dark"] .ia-qt{ background:rgba(255,255,255,.18); }
.ia-qt.pressed{ transform:scale(.96); opacity:.75; }
.ia-qt .g{ color:var(--tint); display:grid; place-items:center; }
.ia-qt .g svg{ width:26px; height:26px; }
.ia-qt .tx{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; max-width:100%; }
.ia-qt .t{ font:500 12px/1.193 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:74px; }
.ia-qt.wide{ flex-direction:row; justify-content:flex-start; gap:10px; padding:0 12px; }
.ia-qt.wide .g{ width:28px; } .ia-qt.wide .g svg{ width:23px; height:23px; }
.ia-qt.wide .tx{ align-items:flex-start; }
.ia-qt.wide .t{ font:600 15px/1.193 var(--font); max-width:112px; }
.ia-qt .d{ font:400 12px/1.193 var(--font); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:112px; }
.ia-qt.large{ height:132px; flex-direction:row; justify-content:flex-start; gap:16px; padding:0 18px; }
.ia-qt.large .g{ width:48px; } .ia-qt.large .g svg{ width:40px; height:40px; }
.ia-qt.large .tx{ align-items:flex-start; gap:5px; }
.ia-qt.large .t{ font:600 20px/1.193 var(--font-d); max-width:250px; }
.ia-qt.large .d{ font-size:15px; max-width:250px; }
.ia-qt .acc{ position:absolute; right:10px; bottom:10px; width:16px; height:16px; color:var(--tint); opacity:0; transform:scale(.5); transition:opacity .2s, transform .2s cubic-bezier(.3,1.3,.5,1); }
.ia-qt .acc svg{ width:16px; height:16px; }
.ia-qt.done .acc{ opacity:1; transform:none; }
.ia-qt .minus{ position:absolute; right:-6px; top:-6px; width:26px; height:26px; border-radius:50%; display:none; place-items:center;
  background:#000; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); }
:root[data-theme="dark"] .ia-qt .minus{ background:#767676; }
.ia-qt .minus svg{ width:12px; height:12px; stroke-width:3; }
.ia-rack.editing .ia-qt .minus{ display:grid; }
.ia-rack.editing .ia-qt{ transition:transform .12s ease-in-out; }
.ia-rack.editing .ia-qt:nth-child(odd){ transform:rotate(.7deg) translateY(.6px); }
.ia-rack.editing .ia-qt:nth-child(even){ transform:rotate(-.7deg) translateY(-.6px); }
.ia-rack.editing.jig-b .ia-qt:nth-child(odd){ transform:rotate(-.7deg) translateY(-.6px); }
.ia-rack.editing.jig-b .ia-qt:nth-child(even){ transform:rotate(.7deg) translateY(.6px); }
.ia-add-row{ display:flex; justify-content:center; align-items:center; gap:22px; margin:42px 20px 0; }
.ia-add-row .ia-add{ margin:0; width:auto; }
.has-rack .ia-add-row{ margin-top:17px; }
.ia-add-done{ display:none; border:0; background:none; padding:0; min-height:44px; color:var(--tint); font:600 15px/1 var(--font); cursor:pointer; }
.ia-add-done.on{ display:block; }

/* toast */
.ia-toast{ position:absolute; left:50%; bottom:206px; z-index:48; display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:22px; white-space:nowrap;
  font:500 16px/1.2 var(--font); color:var(--ink); pointer-events:none; opacity:0; transform:translate(-50%, 30px);
  transition:opacity .25s, transform .35s cubic-bezier(.3,1.25,.5,1);
  background:var(--glass); -webkit-backdrop-filter:blur(20px) saturate(1.8); backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:inset 0 0 0 1px var(--glass-rim), 0 8px 24px rgba(0,0,0,.1); }
.ia-toast.on{ opacity:1; transform:translate(-50%, 0); }
.ia-toast svg{ width:18px; height:18px; color:var(--tint); }

/* =================== Pushed pages (NavigationStack) =================== */
.ia-page{ position:absolute; inset:0; background:var(--bg); z-index:3; }
.ia-pane > .ia-bar.covered{ visibility:hidden; }
.ia-page-inner{ padding:132px 0 200px; min-height:100%; box-sizing:border-box; position:relative; }
.ia-bar.pushed{ height:115.5px; }
.ia-circ{ position:absolute; top:62px; width:44px; height:44px; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--ink);
  background:var(--glass); -webkit-backdrop-filter:blur(14px) saturate(1.8); backdrop-filter:blur(14px) saturate(1.8);
  box-shadow:inset 0 0 0 .75px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9), 0 3px 12px rgba(0,0,0,.04); transition:transform .15s, opacity .15s; }
:root[data-theme="dark"] .ia-circ{ box-shadow:inset 0 0 0 .75px rgba(255,255,255,.16), 0 3px 12px rgba(0,0,0,.3); }
.ia-circ.pressed{ transform:scale(.92); }
.ia-circ.back{ left:16px; } .ia-circ.back svg{ width:20px; height:20px; }
.ia-bar.pushed .ia-circ:last-child{ right:16px; } .ia-circ svg{ width:22px; height:22px; }
.ia-ptitle{ position:absolute; left:72px; right:72px; top:74px; text-align:center; font:600 17px/1.193 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-page .ia-bar-bg{ opacity:var(--inline,0); }

/* Apple Music service page (signed in) */
.ia-svc-head{ display:flex; gap:14px; align-items:flex-start; margin:0 20px 6px; }
.ia-tile.big{ width:60px; height:60px; border-radius:13px; font:700 30px/1 var(--font); color:#fff; flex:none; margin-top:10px; }
.ia-svc-head .col{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.ia-svc-head .n{ font:700 22px/1.2 var(--font-d); margin-bottom:2px; }
.ia-pill{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:13px; background:var(--fill-07); box-shadow:inset 0 0 0 .75px var(--glass-rim); font:500 12px/1 var(--font); color:var(--ink-2); }
.ia-pill svg{ width:13px; height:13px; }
.ia-page .ia-shelf-h{ margin-top:28px; }
.ia-libgrid{ display:flex; gap:14px; padding:0 20px; margin-top:12px; }
.ia-lib{ width:64px; display:flex; flex-direction:column; align-items:center; gap:6px; border:0; background:none; padding:0; color:var(--ink); cursor:pointer; font:400 12px/1.193 var(--font); }
.ia-lib .b{ width:64px; height:64px; border-radius:13px; background:var(--fill-07); display:grid; place-items:center; }
.ia-lib .b svg{ width:26px; height:26px; }
.ia-rail.am{ gap:14px; }
.ia-mcard.sm{ width:116px; cursor:pointer; }
.ia-mcard.sm .a{ width:116px; height:116px; }
.ia-mcard.sm .t1{ font:400 15px/1.193 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-mcard.sm .s{ margin-top:-3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-mcard{ cursor:pointer; }
.ia-lt{ flex:none; display:grid; place-items:center; color:rgba(255,255,255,.55); font-weight:600; font-family:ui-rounded, var(--font); }
.ia-lt svg{ width:44%; height:44%; }
.ia-art2{ flex:none; display:block; background:#888 center/cover no-repeat; }
.ia-llist{ padding:0 20px; }
.ia-lrow{ display:flex; align-items:center; gap:14px; height:55px; cursor:pointer; }
.ia-lrow .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ia-lrow .t{ font:400 17px/1.193 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-lrow .s{ font:400 12px/1.193 var(--font); color:var(--ink-2); }
.ia-az{ position:absolute; right:4px; top:180px; display:flex; flex-direction:column; align-items:center; gap:2.2px; font:600 10px/1 var(--font); color:var(--ink-2); }
.ia-page .ia-page-inner:has(.ia-az) .ia-llist{ padding-right:34px; }
/* collection detail (MCV album shape) */
.ia-coll{ display:flex; flex-direction:column; align-items:center; padding:0 20px; }
.ia-coll-art{ width:240px; height:240px; border-radius:14px; overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,.35); }
.ia-coll-art .ia-art2{ width:240px; height:240px; }
.ia-coll-t{ margin-top:18px; font:700 34px/41px var(--font-d); text-align:center; }
.ia-coll-sub{ margin-top:7px; font:400 20px/1.2 var(--font); text-align:center; }
.ia-coll-m{ margin-top:7px; font:400 15px/1.193 var(--font); color:var(--ink-2); white-space:pre; font-variant-numeric:tabular-nums; }
.ia-coll-acts{ display:flex; gap:12px; margin-top:22px; }
.ia-cbtn{ height:48px; padding:0 20px; border:0; border-radius:24px; display:flex; align-items:center; gap:8px; background:var(--btn-fill); color:var(--tint); font:400 17px/1 var(--font); cursor:pointer; transition:transform .15s, opacity .15s; }
.ia-cbtn.pressed{ transform:scale(.96); opacity:.75; }
.ia-cbtn.prim{ background:var(--tint); color:var(--on-tint); }
.ia-cbtn svg{ width:17px; height:17px; }
.ia-tracks{ width:100%; margin-top:22px; }
.ia-trk{ position:relative; display:flex; align-items:center; gap:12px; padding:8px; cursor:pointer; border-radius:15px; }
.ia-trk + .ia-trk::before{ content:""; position:absolute; left:-8px; right:-8px; top:0; height:1px; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.ia-trk:active{ background:var(--fill-08); }
.ia-trk .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ia-trk .t{ font:400 17px/1.193 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-trk .s{ font:400 12px/1.193 var(--font); color:var(--ink-2); white-space:pre; overflow:hidden; text-overflow:ellipsis; }
.ia-trk .du{ font:400 16px/1 var(--font); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.ia-trk .el{ width:32px; display:grid; place-items:center; color:var(--ink-2); } .ia-trk .el svg{ width:18px; height:18px; }
.ia-lt, .ia-art2{ transition:opacity .28s ease-out; }

/* =================== Room page (GroupDetailView, owner's device) =================== */
.ia-ptitle.left{ left:73px; right:auto; top:73px; font:600 17px/1.193 var(--font); text-align:left; }
.pushed-tools{ position:absolute; right:16px; top:62px; height:44px; }
.pushed-tools .ia-tool{ width:54px; height:44px; margin:0; }
.pushed-tools .ia-tool svg{ width:23px; height:23px; transform:none; }
.ia-rp{ padding:0 20px; margin-top:-7px; }
.ia-rp-card{ position:relative; display:flex; align-items:center; height:82px; border-radius:18px; background:var(--fill-08); }
.ia-rp-open{ flex:1; min-width:0; height:100%; display:flex; align-items:center; gap:13px; padding:0 0 0 13px; border:0; background:none; color:var(--ink); cursor:pointer; text-align:left; }
.ia-rp-open .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ia-rp-open .t{ font:600 17px/1.193 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-rp-open .s{ font:400 15px/1.193 var(--font); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-rp-open .chev{ color:var(--ink-3); width:18px; margin-right:8px; } .ia-rp-open .chev svg{ width:16px; height:16px; }
.ia-rp-play{ flex:none; width:40px; height:40px; margin-right:13px; border:0; border-radius:50%; background:var(--tint); color:var(--on-tint); display:grid; place-items:center; cursor:pointer; }
.ia-rp-play svg{ width:17px; height:17px; }
.ia-rp-h{ margin:30px 0 10px; font:700 20px/1.2 var(--font-d); }
.ia-rp-spk{ border-radius:22px; background:var(--fill-08); padding:0 16px 14px; }
.ia-rp-spk .row{ display:flex; align-items:center; gap:14px; height:68px; border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.ia-rp-spk .ic{ width:22px; display:grid; place-items:center; color:var(--ink); } .ia-rp-spk .ic svg{ width:22px; height:22px; }
.ia-rp-spk .tx{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.ia-rp-spk .t{ font:600 17px/1.193 var(--font); }
.ia-rp-spk .s{ font:400 15px/1.193 var(--font); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-rp-spk .chev{ color:var(--ink-3); } .ia-rp-spk .chev svg{ width:14px; height:14px; }
.ia-rp-spk .vl{ margin-top:16px; font:400 15px/1.193 var(--font); }
.ia-rp-spk .vr{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.ia-rp-spk .vr .n{ min-width:18px; text-align:right; font:400 12px/1 var(--font); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.ia-rp-spk .ia-stepper{ width:91px; }
.ia-rp-qh{ display:flex; align-items:center; justify-content:space-between; margin:30px 0 12px; }
.ia-rp-qh .qt{ display:flex; align-items:center; gap:6px; border:0; background:none; padding:0; color:var(--ink); font:400 17px/1.193 var(--font); cursor:pointer; }
.ia-rp-qh .qt svg{ width:13px; height:13px; transition:transform .25s cubic-bezier(.3,1,.4,1); }
.ia-rp-qh .qt.collapsed svg{ transform:rotate(-90deg); }
.ia-rp-qh .exp{ color:var(--ink); width:24px; } .ia-rp-qh .exp svg{ width:20px; height:20px; }
.ia-rp-q.collapsed{ display:none; }
.ia-rp-q .qr{ position:relative; display:flex; align-items:center; gap:12px; height:64px; padding:0 8px; border-radius:15px; cursor:pointer; }
.ia-rp-q .qr + .qr::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.ia-rp-q .qr.now{ background:var(--fill-08); } .ia-rp-q .qr.now::before, .ia-rp-q .qr.now + .qr::before{ display:none; }
.ia-rp-q .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ia-rp-q .t{ font:400 17px/1.193 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-rp-q .qr.now .t{ font-weight:600; }
.ia-rp-q .s{ font:400 12px/1.193 var(--font); color:var(--ink-2); }
.ia-rp-q .du{ font:400 12px/1 var(--font); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.ia-rp-q .spk{ color:var(--ink); } .ia-rp-q .spk svg{ width:18px; height:18px; }
.ia-rp-q .h{ color:var(--ink-2); width:24px; } .ia-rp-q .h svg{ width:20px; height:20px; }
.ia-rp-q .qe{ padding:20px 0; color:var(--ink-2); font:400 15px/1.3 var(--font); }

/* sheets: Audio / Household / Settings */
.ia-cap.strongtxt{ font-weight:600; }
.ia-r.au{ gap:16px; min-height:58px; --sl:16px; } .ia-r.au .t{ width:74px; flex:none; }
.ia-r.au .ia-slider{ flex:1; }
.ia-card2.aud .ia-r.sec{ --sl:16px; }
.ia-r.hh{ --sl:58px; min-height:64px; cursor:default; }
.ia-r.hh .gl{ width:34px; color:var(--ink); } .ia-r.hh .gl svg{ width:32px; height:16px; }
.ia-r.hh .ck{ color:var(--ink-2); } .ia-r.hh .ck svg{ width:22px; height:22px; }
.ia-r.hh.off{ opacity:.4; } .ia-r.hh.off .gl svg{ width:22px; height:22px; }
.ia-pick{ display:flex; align-items:center; gap:4px; border:0; background:none; padding:0; color:var(--ink); font:400 17px/1 var(--font); cursor:pointer; }
.ia-pick svg{ width:14px; height:14px; }
.ia-r .dim{ color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%; }
.ia-card2 .ia-r.sec{ --sl:16px; }
.ia-pop .ph{ padding:8px 20px 6px; font:400 13px/1.2 var(--font); color:var(--ink-2); }
.ia-pop .psep{ display:block; height:1px; margin:6px 20px; background:var(--sh-sep); }
.ia-pop button.lead{ flex-direction:row-reverse; justify-content:flex-end; }

/* ---- Search: live query → merged, source-badged results
   (measured @3x from reference/app-screens/2026-09-23/iphone/search-results*.png) ---- */
.ia-pane.srch .ia-pane-inner > :not(.ia-sr){ display:none; }
.ia-pane.srch > .ia-bar{ opacity:0; pointer-events:none; }
.ia-search{ cursor:pointer; }
.ia-sh{ position:absolute; left:0; right:0; top:0; height:158.5px; z-index:4; opacity:0; pointer-events:none; transform:translateY(-6px);
  background:color-mix(in srgb, var(--grouped) 88%, transparent); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  transition:opacity .22s ease, transform .3s cubic-bezier(.2,.9,.3,1); }
.ia-pane.srch .ia-sh{ opacity:1; pointer-events:auto; transform:none; }
.ia-sf{ position:absolute; left:16px; top:69.5px; width:314px; height:44px; border-radius:22px; display:flex; align-items:center; gap:0; padding:0 12px 0 13px; font:400 17px/1 var(--font); color:var(--ink); cursor:text; }
.ia-sf > svg{ width:19px; height:19px; margin-right:8px; flex:none; }
.ia-sf .q{ white-space:nowrap; overflow:hidden; }
.ia-sf .caret{ width:2px; height:22px; margin-left:1px; border-radius:1px; background:#0A84FF; animation:ia-caret 1s steps(1) infinite; }
@keyframes ia-caret{ 50%{ opacity:0 } }
.ia-sf .clr{ margin-left:auto; width:22px; height:22px; border:0; padding:0; background:none; color:var(--ink); opacity:0; transition:opacity .15s; cursor:pointer; --sr-cut:var(--cell); }
.ia-sf .clr svg{ width:19px; height:19px; }
.ia-pane.has-q .ia-sf .clr{ opacity:1; }
.ia-sx{ position:absolute; left:341px; top:69.5px; width:44px; height:44px; border-radius:50%; border:0; padding:0; display:grid; place-items:center; color:var(--ink); cursor:pointer; }
.ia-sx svg{ width:23px; height:23px; stroke-width:1.8; }
.ia-seg{ position:absolute; left:16px; right:16px; top:121.5px; height:36.5px; border-radius:18.25px; display:flex; padding:2.5px; }
.ia-seg button{ flex:1 1 0; min-width:0; border:0; background:none; padding:0 3px; border-radius:16px; font:400 15px/1 var(--font); color:var(--ink); cursor:pointer; transition:background-color .2s ease; }
.ia-seg button span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-seg button.on{ background:rgba(118,118,128,.16); font-weight:500; }
.ia-sr{ padding-top:158.5px; }
.ia-srf{ height:51.5px; background:var(--cell); display:flex; align-items:center; justify-content:flex-end; padding-right:54px; color:var(--ink); }
.ia-srf svg{ width:22px; height:22px; }
.ia-srh{ height:59px; padding:0 17px 9px; display:flex; align-items:flex-end; font:600 17px/1 var(--font); color:rgba(60,60,67,.6); }
:root[data-theme="dark"] .ia-srh{ color:rgba(235,235,245,.6); }
.ia-srl{ background:var(--cell); }
.ia-srow{ position:relative; display:flex; align-items:center; height:74px; padding:0 37px 0 36px; cursor:pointer; }
.ia-srow + .ia-srow::before{ content:""; position:absolute; top:0; left:93px; right:0; height:.5px; background:var(--sep); }
.ia-srow:active{ background:rgba(118,118,128,.12); }
.ia-srow .art{ width:44px; height:44px; border-radius:7px; flex:none; background:#ddd center/cover; margin-right:13px; }
.ia-srow .art.round{ border-radius:50%; }
.ia-srow .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; margin-right:52px; }
.ia-srow .t{ font:400 17px/1.2 var(--font); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-srow .s{ font:400 13px/1.2 var(--font); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-srow .end{ display:flex; align-items:center; gap:18px; flex:none; color:rgba(60,60,67,.6); }
:root[data-theme="dark"] .ia-srow .end{ color:rgba(235,235,245,.6); }
.ia-srow .bd{ font:400 17px/1 var(--font); white-space:nowrap; }
.ia-srow .el{ display:grid; place-items:center; width:15px; height:22px; }
.ia-srow .el svg{ width:15px; height:4px; }
.ia-srow .cv svg{ width:8px; height:14px; color:var(--ink-3); }
.ia-sr.in .ia-srow{ animation:ia-srin .38s cubic-bezier(.2,.9,.3,1) both; animation-delay:calc(var(--i) * 28ms); }
@keyframes ia-srin{ from{ opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion: reduce){ .ia-sr.in .ia-srow{ animation:none; } .ia-sf .caret{ animation:none; } }

/* ---- Spotify service page (reference/app-screens/2026-09-23/iphone/spotify*.png) ---- */
.ia-page.sp .ia-page-inner{ padding-top:190px; }
.ia-psearch{ position:absolute; left:16px; right:16px; top:117.5px; height:44.5px; border-radius:22.25px; z-index:6; display:flex; align-items:center; gap:8px; padding:0 14px; font:400 17px/1 var(--font); color:var(--ink-2); }
.ia-psearch svg{ width:19px; height:19px; color:var(--ink); }
.ia-page.sp > .ia-bar .ia-bar-bg{ height:176px; opacity:1; }
.ia-sphead{ margin:0 21px 0; gap:15px; }
.ia-sphead .ia-tile.big{ width:57px; height:57px; border-radius:12px; margin-top:0; font:700 30px/1 var(--font); }
.ia-sphead .n{ font:700 22px/1.2 var(--font-d); }
.ia-sphead .pills{ display:flex; gap:10px; }
.ia-sphead .ia-pill{ height:27px; padding:0 11px; font:500 14px/1 var(--font); }
.ia-sphead .ia-pill svg{ width:14px; height:14px; }
.ia-sphead .ia-pill.line{ background:transparent; box-shadow:inset 0 0 0 1px var(--sep); color:var(--ink-2); }
.ia-sphead .ia-pill.fill{ background:rgba(118,118,128,.2); color:var(--ink); }
.ia-page.sp .ia-sph{ margin:19px 21px 9px; font:700 20px/1.2 var(--font-d); gap:6px; }
.ia-sph .cvh svg{ width:12px; height:12px; color:var(--ink-3); }
.ia-sph .grow{ flex:1; }
.ia-sph .ia-grip{ margin-right:-5px; }
.ia-splist{ display:flex; flex-direction:column; gap:12px; margin:0 21px; }
.ia-sprow{ display:flex; align-items:center; gap:13px; height:78px; padding:0 14px 0 10px; border:0; border-radius:15px; background:rgba(118,118,128,.12); text-align:left; cursor:pointer; font:inherit; color:var(--ink); }
.ia-sprow .art{ width:57px; height:57px; border-radius:8px; flex:none; background:#ccc center/cover; }
.ia-sprow .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ia-sprow .t{ font:600 17px/1.2 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-sprow .s{ font:400 12.5px/1.2 var(--font); color:var(--ink-2); }
.ia-sprow .cv svg{ width:13px; height:13px; color:var(--ink-2); opacity:.75; }