/* ================= switch to MacPip (functions/_switch.js, public/switch.js) =================
   "Have a Mac app? Launch it on MacPip": one liquid glass card on home, /submit and the maker dashboard.
   Its own file so CSS sweeps of ipip.css and site.css never touch it. Tokens come from ipip.css. */
.sw{--sw-alu:#dfe1e7;--sw-alu2:#c6c9d1;--sw-scr:#15161c;--sw-tile:linear-gradient(160deg,#fff,#eef0f4);
  display:grid;grid-template-columns:60px minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:16px 18px;border-radius:26px;text-align:left;min-width:0;transition:transform .3s var(--spring-soft)}
[data-theme="dark"] .sw,[data-theme="dark"].sw{--sw-alu:#4a4b53;--sw-alu2:#393a41;--sw-scr:#050507;--sw-tile:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .sw{--sw-alu:#4a4b53;--sw-alu2:#393a41;--sw-scr:#050507;--sw-tile:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05))}
}
.sw-ic{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:var(--sw-tile);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px -8px rgba(16,20,36,.35)}
.sw-mac{width:42px;height:auto;display:block;transition:transform .45s var(--spring)}
.sw-body,.sw-base{fill:var(--sw-alu)}
.sw-stand{fill:var(--sw-alu2)}
.sw-screen{fill:var(--sw-scr)}
.sw-win{fill:rgba(255,255,255,.88)}
.sw-win2{fill:rgba(255,255,255,.5)}
.sw-tx{display:grid;gap:3px;min-width:0}
.sw-k{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.sw .sw-t{margin:0;font-family:var(--font-display);font-size:17px;font-weight:750;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.sw .sw-p,.sw .sw-in{margin:0;font-size:14px;line-height:1.4;color:var(--ink2)}
.sw .sw-in{font-size:13px;color:var(--ink3)}
.sw-acts{display:grid;gap:8px;justify-items:center}
.sw-go{height:44px;padding:0 18px 0 20px;border-radius:99px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-weight:700;font-size:15px;background:var(--ink);color:var(--wall-base);
  box-shadow:0 10px 20px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .3s var(--spring)}
.sw-go svg{width:17px;height:17px;transition:transform .3s var(--spring)}
.sw-sub{font-size:13px;font-weight:600;color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.sw-sub:hover{color:var(--ink)}
.sw:hover .sw-mac,.sw:focus-within .sw-mac{transform:translateY(-2px) rotate(-4deg) scale(1.06)}
.sw-go:hover{transform:translateY(-2px)}
.sw-go:hover svg{transform:translateX(3px)}
.sw-go:active{transform:scale(.95,.92)}

/* the Mac link state on /submit: the rim turns into the six Pip stripes */
.sw.sw-mac-on::before{background:var(--rb);padding:2px}
.sw.sw-mac-on .sw-k{color:var(--ink2)}

/* the home card: one row under today's launches (the narrow Today column on desktop, full width on phones) */
.sw-row{grid-template-columns:44px minmax(0,1fr);gap:12px 12px;padding:14px;margin-top:16px;border-radius:24px}
.sw-row .sw-ic{width:44px;height:44px;border-radius:13px;align-self:start}
.sw-row .sw-mac{width:30px}
.sw-row .sw-p{font-size:14px;line-height:1.4;color:var(--ink2)}
.sw-row .sw-p b{color:var(--ink);font-weight:700}
.sw-row .sw-go{grid-column:1/-1;height:44px;width:100%;justify-content:center}
@media (min-width:621px) and (max-width:999px){
  .sw-row{grid-template-columns:44px minmax(0,1fr) auto;align-items:center}
  .sw-row .sw-ic{align-self:center}
  .sw-row .sw-go{grid-column:auto;width:auto}
}

/* the top bar link: right after the iPip mascot in the island. "+MacPip" on desktop, "MacPip" on phones.
   Only in the resting island, so it never shares space with the Sponsored live activity. 44px hit area from ::after. */
.isl-mac{position:relative;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px 0 7px;margin-left:-2px;border-radius:99px;
  background:rgba(255,255,255,.12);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:-.01em;flex:none;transition:background .2s,transform .3s var(--spring)}
.isl-mac::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
.isl-mac:hover{background:rgba(255,255,255,.2)}
.isl-mac:active{transform:scale(.94)}
.isl-mac-g{width:16px;height:15px;flex:none}
.isl-mac-plus{opacity:.7;margin-right:1px}
.isl .v-idle:has(.isl-mac){gap:8px}
@media (max-width:559px){
  .isl-mac-plus{display:none}
  .isl-mac{padding:0 8px 0 6px;font-size:12px;gap:4px}
  .isl .v-idle:has(.isl-mac){gap:6px;padding-right:8px}
}

/* where it sits */
.sw-home{margin-top:16px}
.sf-v-paste:has(.sw-submit){align-content:center}
.sf-v-paste .sw-submit{width:100%;max-width:560px;margin:30px auto 0}

/* the exit: the card's glass fills the screen, then the page goes */
.sw-veil{position:fixed;z-index:1000;display:grid;place-items:center;pointer-events:none;overflow:hidden;border-radius:26px;--sw-alu:#dfe1e7;--sw-alu2:#c6c9d1;--sw-scr:#15161c}
.sw-veil::before,.sw-veil::after{border-radius:inherit}
.sw-veil .sw-mac{width:96px;animation:sw-lift .34s cubic-bezier(.3,.9,.3,1) both}
[data-theme="dark"] .sw-veil{--sw-alu:#4a4b53;--sw-alu2:#393a41;--sw-scr:#050507}
@media (prefers-color-scheme:dark){ :root:not([data-theme]) .sw-veil{--sw-alu:#4a4b53;--sw-alu2:#393a41;--sw-scr:#050507} }
.sw-leaving{transform:scale(.98)}
@keyframes sw-lift{from{transform:scale(.45);opacity:.4}to{transform:scale(1);opacity:1}}

/* phones, and the narrow Today column on home: icon and words side by side, the button full width under them */
.sw-home{grid-template-columns:52px minmax(0,1fr);gap:12px 14px;padding:16px}
.sw-home .sw-ic{width:52px;height:52px;border-radius:16px;align-self:start}
.sw-home .sw-mac{width:36px}
.sw-home .sw-acts{grid-column:1/-1}
.sw-home .sw-go{width:100%;justify-content:center}

@media (max-width:620px){
  .sw{grid-template-columns:52px minmax(0,1fr);gap:12px 14px;padding:16px}
  .sw-ic{width:52px;height:52px;border-radius:16px;align-self:start}
  .sw-mac{width:36px}
  .sw-acts{grid-column:1/-1}
  .sw-go{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .sw,.sw-mac,.sw-go,.sw-go svg,.isl-mac{transition:none}
  .sw:hover .sw-mac,.sw:focus-within .sw-mac,.sw-go:hover,.sw-go:hover svg{transform:none}
  .sw-veil .sw-mac{animation:none}
}