/* iPip's island (Justinas, 14 Nov 2026: "for MacPip keep the Mac notch, but for iPip do the iPhone island notch").
   MacPip's notch logic is shared as is (public/notch.js and notify.js, MacPip's files byte for byte, with MacPip's notch.css
   and notify.css under this file). Only the shape is iPip's, here: a black capsule floating just under the top edge, centred
   in the top bar, instead of a notch hanging from it. Resting, it is compact: Pip's face leads and a small live light trails.
   As on MacPip (notch.css, 15 Nov), the capsule itself never changes size or moves: the open card hangs from it at its final
   width, laid out ahead of time, and only the card's black shape (.npane::before) grows out of the capsule's size with
   MacPip's spring (a transform), then the words fade in. Here that shape is a rounded card. Nothing is laid out while it
   moves. No phone maker's logo, wallpaper or status bar. Loaded after notch.css and notify.css. */
/* It floats in the middle of the bar's height, with the same gap above and below (the bar is 56px, 52px on phones). */
.notch{--itop:11px;--nh:34px;top:var(--itop);border-radius:999px}
/* no shoulders: it floats */
.notch::before,.notch::after{content:none}
/* compact: Pip's face leads, a small live light trails */
.notch .nrest{padding:0 13px}
.notch .ncam{width:9px;height:9px;border-radius:50%;background:conic-gradient(#4fb06a 0 16.6%,#f3c63f 0 33.3%,#f08a2c 0 50%,#e8483f 0 66.6%,#8a5bb8 0 83.3%,#3e8fd6 0);box-shadow:none}
.notch .ncam::after{inset:2px;background:#0b0a08}
.notch:not(.open) .ncam::after{animation:islive 3.2s ease-in-out infinite}
@keyframes islive{50%{transform:scale(.55)}}
/* open: an iPhone-style card grows out of the capsule, the Featured apps taking turns. Justinas, 15 Nov: "super crispy
   smooth cute". One continuous rounded shape (a squircle where the browser has corner-shape), roomy inside, a soft shadow
   and a ring of the bar's colour around it, so it floats clear of the bar and its rainbow line. At rest the shape sits
   wholly inside the capsule's straight middle (80% of its width, 70% of its height), so no corner of it ever pokes out
   past the capsule's round ends as it grows or shrinks. Only transform and opacity move; the words never scale. */
.notch .npane{padding:18px 18px 18px}
.notch .npane::before{border-radius:36px;box-shadow:none;transform:scale(calc(var(--sx) * .8),calc(var(--sy) * .7))}
.notch .npane::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:36px;pointer-events:none;
  box-shadow:0 0 0 5px var(--paper,#faf6ec),0 18px 40px rgba(29,27,23,.26),0 3px 10px rgba(29,27,23,.16);
  transform-origin:50% 0;transform:scale(calc(var(--sx) * .8),calc(var(--sy) * .7));opacity:0;
  transition:transform .3s cubic-bezier(.4,0,.6,1),opacity .08s linear}
.notch.open .npane::after{transform:none;opacity:1;transition:transform .45s var(--spring),opacity .2s ease .16s}
.notch.anim .npane::after{will-change:transform,opacity}
@supports (corner-shape:squircle){.notch .npane::before,.notch .npane::after{border-radius:52px;corner-shape:squircle}}
.notch .nhey{margin-bottom:14px}
.notch .nseat{padding:11px 12px;border-radius:18px}
/* Pip peeks out from under the capsule now and then */
.notch .npeek{top:calc(var(--nh) - 2px)}
/* tablets and phones: the smaller capsule (notch.css gives 96 wide; 88 at 374 and down) */
@media (max-width:1050px){.notch{--itop:13px;--nh:30px}.notch .nrest{padding:0 11px}.notch .ncam{width:8px;height:8px}}
@media (max-width:760px){.notch{--itop:12px;--nh:28px}.notch .npane{padding:16px 16px 16px}}

/* every note grows out of the capsule the same way (public/notify.js draws the shape from the capsule's own size, with the
   notch's spring); a glance and a tucked note (the pill) stay capsules */
.nfy{top:11px}
.nfy .nfybg::before,.nfy .nfybg::after{content:none}
.nfy .nfybg{border-radius:28px}
.nfy[data-k=glance] .nfybg,.nfy[data-k=pill] .nfybg{border-radius:999px}
.nfy .nfypill:focus-visible{border-radius:999px}
.nfy .nfyc{padding:18px 18px 16px}
.nfy .nfybg{transform:scale(calc(var(--sx,.5) * .8),calc(var(--sy,1) * .7))}
.nfy.on .nfybg{transform:scale(1,1);box-shadow:0 18px 40px rgba(29,27,23,.26),0 3px 10px rgba(29,27,23,.16)}
.nfy[data-k=glance].on .nfybg{box-shadow:none}
@media (max-width:1050px){.nfy{top:13px}}
@media (max-width:760px){.nfy{top:12px}.nfy .nfyc{padding:16px 16px 14px}}

@media (prefers-reduced-motion:reduce){
  .notch:not(.open) .ncam::after{animation:none}
  .notch .npane::after,.notch.open .npane::after{transform:none;transition:opacity .15s linear}
}