/* The install tool, v6: a sliding selector, panels stacked in one grid cell (the tool is always as tall as its tallest panel, so a switch never moves
   anything below it), staggered entrances in the kit's easing. Which panel shows comes from <html data-p>, set before first paint. */
.panels{display:grid;position:relative}
.panels>[role="tabpanel"]{grid-area:1/1;visibility:hidden;pointer-events:none;outline:0;transition:visibility 0s linear .36s}
html[data-p="ios"] #p-ios,html[data-p="android"] #p-android,html[data-p="mac"] #p-mac{visibility:visible;pointer-events:auto;transition-delay:0s}
.stg{opacity:0;transform:translateX(calc(var(--dir,1) * 14px));transition:opacity .3s ease,transform .3s ease}
html[data-p="ios"] #p-ios .stg,html[data-p="android"] #p-android .stg,html[data-p="mac"] #p-mac .stg{opacity:1;transform:none;transition:opacity .55s var(--ease) calc(.04s + var(--i) * .05s),transform .55s var(--ease) calc(.04s + var(--i) * .05s)}
.panels>.out .stg{opacity:0;transform:translateX(calc(var(--dir,1) * -14px))}

.seg{position:relative}
.seg button{position:relative;z-index:1;transition:color .3s var(--ease)}
.seg button[aria-selected="true"]{background:transparent}
html[data-p="ios"] #t-ios,html[data-p="android"] #t-android,html[data-p="mac"] #t-mac{color:var(--bg)}
html[data-p="ios"] .seg:not(.ready) #t-ios,html[data-p="android"] .seg:not(.ready) #t-android,html[data-p="mac"] .seg:not(.ready) #t-mac{background:var(--fg)}
.seg-ind{position:absolute;z-index:0;top:3px;bottom:3px;left:0;width:var(--iw,0px);transform:translateX(var(--ix,0px));background:var(--fg);border-radius:999px;opacity:0;pointer-events:none}
.seg.ready .seg-ind{opacity:1;transition:transform .5s var(--ease),width .5s var(--ease)}
.seg.ni .seg-ind{transition:none!important}
.detect{min-height:1.5em}
.detect:empty{display:block}
@media(prefers-reduced-motion:reduce){
  .stg,html[data-p] .panels .stg,.panels>.out .stg{transition:none!important;transform:none!important}
  .panels>[role="tabpanel"],.seg button,.seg.ready .seg-ind{transition:none!important}
}

/* ── status tags: flat filled pills, one height, no glow. Amber = coming soon, teal = available now. Muted, in the same OKLCH discipline as the accent
   (low chroma, lightness set so the label holds AA on its own fill in both themes). ── */
:root{--tag-soon-bg:oklch(.80 .075 80);--tag-soon-fg:#14110a;--tag-now-bg:oklch(.78 .05 188);--tag-now-fg:#0a0a09;--tag-ph-line:rgba(235,233,227,.4)}
:root[data-theme="light"]{--tag-soon-bg:oklch(.86 .085 82);--tag-soon-fg:#2a2008;--tag-now-bg:oklch(.46 .06 188);--tag-now-fg:#f6f3ea;--tag-ph-line:rgba(20,18,17,.45)}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-bottom:5px}
.tag{box-sizing:border-box;display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.03em;line-height:1;white-space:nowrap;margin:0}
.tag.soon{background:var(--tag-soon-bg);color:var(--tag-soon-fg)}
.tag.now{background:var(--tag-now-bg);color:var(--tag-now-fg)}
.tag.ph{background:transparent;color:var(--grey);border:1px dashed var(--tag-ph-line);font-weight:400}
.sn .tags{margin-bottom:3px}
.soonl{margin-top:clamp(12px,2svh,18px)}