/* Pip's notch: the Notch Spot, centred at the top of every page's top bar, like a MacBook's (functions/_notch.js, public/notch.js).
   Hardware black in every theme (iPip copies this file from MacPip; only these first three lines differ). Its words use paper on black.
   Logical sides only, so RTL mirrors it. The bar around it is split around it like the top of a MacBook screen (public/cleanup.css, "top bar").
   Smooth on a phone: the notch itself never changes size. The open card hangs from it at its final width, laid out once,
   and only its black shape moves: it scales from the notch's size with a spring (transform), then the words fade in (opacity).
   Nothing is laid out again while it moves. */
.nslot{position:absolute;inset-inline:0;top:0;height:0;z-index:45;pointer-events:none}
.notch{--hw:#0b0a08;--nw:176px;--nh:38px;--ow:420px;--tw:420px;--sx:.42;--sy:.2;
  --spring:cubic-bezier(.34,1.45,.64,1);
  position:absolute;top:0;inset-inline-start:50%;width:var(--nw);height:var(--nh);margin-inline-start:calc(var(--nw) / -2);
  background:var(--hw);color:#faf6ec;border-radius:0 0 12px 12px;pointer-events:auto}
@supports (transition-timing-function:linear(0,1)){
  /* a spring like macOS and iOS: quick, a small overshoot, settled in about 0.45 s */
  .notch{--spring:linear(0,.012,.048 3.4%,.199 7.3%,.42 11.4%,.873 19.9%,1.03 24.1%,1.085 27.4%,1.099 30.3%,1.087 33.3%,1.029 40.3%,.995 47.4%,.984 52.3%,.993 64.3%,1.001 78%,1)}
}
/* The two shoulders where the notch meets the top edge: concave and see-through, like a MacBook's. */
.notch::before,.notch::after{content:"";position:absolute;top:0;width:8px;height:8px;pointer-events:none}
.notch::before{inset-inline-start:-8px;background:radial-gradient(circle at 0 100%,transparent 7.5px,var(--hw) 8px)}
.notch::after{inset-inline-end:-8px;background:radial-gradient(circle at 100% 100%,transparent 7.5px,var(--hw) 8px)}
[dir=rtl] .notch::before{background:radial-gradient(circle at 100% 100%,transparent 7.5px,var(--hw) 8px)}
[dir=rtl] .notch::after{background:radial-gradient(circle at 0 100%,transparent 7.5px,var(--hw) 8px)}
.notch .nrest{all:unset;box-sizing:border-box;position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;cursor:pointer;border-radius:inherit;transition:opacity .15s}
.notch .nrest:focus-visible{outline:2px solid var(--y,#f3c63f);outline-offset:2px}
.notch .nface{width:19px;height:16px;fill:#faf6ec;display:block}
.notch .ncam{width:9px;height:9px;border-radius:50%;background:#1d2529;box-shadow:inset 0 0 0 2px #121619;position:relative}
.notch .ncam::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#3b5d6e}
/* Pip peeks out from under the notch now and then (public/notch.js adds .peek), then hides again. */
.notch .npeek{position:absolute;top:var(--nh);inset-inline-start:50%;width:24px;height:28px;margin-inline-start:-12px;overflow:hidden;z-index:-1;pointer-events:none}
.notch .npeek .npip{display:block;width:24px;height:28px;transform:translateY(-100%);transition:transform .45s var(--spring)}
.notch.peek .npeek .npip{transform:translateY(-36%)}
.notch.open .nrest{opacity:0;pointer-events:none}
.notch.open .npeek{opacity:0}
/* The open card: always laid out at its final width (--tw, set by notch.js), hidden and untouchable until it opens. */
.notch .npane{position:absolute;top:0;inset-inline-start:50%;width:var(--tw);margin-inline-start:calc(var(--tw) / -2);box-sizing:border-box;padding:calc(var(--nh) - 6px) 14px 12px;
  isolation:isolate;visibility:hidden;pointer-events:none;transition:visibility 0s .32s}
.notch.open .npane{visibility:visible;pointer-events:auto;transition:visibility 0s}
/* its black shape: scaled down to the notch's size at rest, to full size open (transform only) */
.notch .npane::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hw);border-radius:0 0 24px 24px;box-shadow:5px 5px 0 var(--ink,#1d1b17);
  transform-origin:50% 0;transform:scale(var(--sx),var(--sy));transition:transform .3s cubic-bezier(.4,0,.6,1)}
.notch.open .npane::before{transform:none;transition:transform .45s var(--spring)}
.notch.anim .npane::before{will-change:transform}
/* its words: already in place, they fade in once the shape is under them, and out first on the way back */
.notch .npane>*{opacity:0;transform:translateY(-4px);transition:opacity .12s linear,transform .12s linear}
.notch.open .npane>*{opacity:1;transform:none;transition:opacity .2s ease .14s,transform .3s var(--spring) .1s}
.notch .nhey{display:flex;align-items:center;gap:10px;margin-bottom:10px;text-align:start}
.notch .nhey .npip{width:24px;height:28px;flex:none}
.notch .nhey>span{flex:1 1 auto;min-width:0}
.notch .nhey b{display:block;font:500 18px/1.15 var(--serif);color:#faf6ec}
.notch .nhey small{display:block;font:12px/1.4 var(--sans);color:#bdb6a4;margin-top:1px}
.notch .nx{all:unset;flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;font:20px/1 var(--sans);color:#bdb6a4;cursor:pointer}
.notch .nx:hover{color:#faf6ec;background:rgba(250,246,236,.1)}
.notch .nx:focus-visible{outline:2px solid var(--y,#f3c63f)}
.notch .nturns{display:grid}
.notch .nseat{grid-area:1/1;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(250,246,236,.08);border:1px solid rgba(233,207,109,.55);color:#faf6ec;text-decoration:none;text-align:start}
.notch .nseat[hidden]{display:none}
.notch.open .nseat:not([hidden]){animation:nin .32s ease both}
.notch .nseat .icon,.notch .nseat img{width:44px;height:44px;border-radius:11px}
.notch .nsx{min-width:0}
.notch .nsx b{display:block;font:500 18px/1.15 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notch .nsx small{display:flex;align-items:center;gap:6px;font:12px/1.4 var(--sans);color:#bdb6a4;margin-top:2px;min-width:0}
.notch .nsx small span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.notch .ntag{flex:none;font:9px/1 var(--pixel);letter-spacing:.08em;text-transform:uppercase;padding:3px 5px 2px;border-radius:4px;background:#e9cf6d;color:#1d1b17}
.notch .ngo{position:relative;display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:8px;background:#faf6ec;color:#0b0a08;font:14px var(--sans);overflow:hidden;white-space:nowrap}
.notch .ngo::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--stripes)}
.notch .nseat:hover .ngo,.notch .nseat:focus-visible .ngo{background:#fff}
.notch .nseat:hover{text-decoration:none}
.notch .nseat:focus-visible{outline:2px solid var(--y,#f3c63f);outline-offset:2px}
.notch .nfree{border-style:dashed;border-color:rgba(250,246,236,.4);background:none}
.notch .nplus{width:44px;height:44px;border-radius:11px;border:1.5px dashed rgba(250,246,236,.5);display:grid;place-items:center}
.notch .nplus svg{width:14px;height:14px;stroke:#faf6ec;stroke-width:1.6;fill:none}
.notch .ndots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.notch .ndots button{all:unset;width:7px;height:7px;border-radius:50%;background:rgba(250,246,236,.3);cursor:pointer}
.notch .ndots button[aria-current=true]{background:#faf6ec}
.notch .ndots button:focus-visible{outline:2px solid var(--y,#f3c63f);outline-offset:2px}
@keyframes nin{from{opacity:0;transform:translateY(4px)}}
/* Tablets and phones: the smaller notch, 96 by 30, opening to the screen less 12px a side (366 on a 390 phone). */
@media (max-width:1050px){.notch{--nw:96px;--nh:30px}.notch .nrest{padding:0 11px}.notch .nface{width:15px;height:12px}.notch .ncam{width:7px;height:7px}.notch .ncam::after{inset:2px}}
@media (max-width:760px){.notch{--ow:366px}}
@media (max-width:374px){.notch{--nw:88px}}
@media (max-width:420px){.notch .ngo{padding:0 11px}.notch .nseat{gap:10px;padding:9px 10px}}
@media (prefers-reduced-motion:reduce){.notch .npane::before,.notch.open .npane::before{transform:none;transition:none}.notch .npane>*,.notch.open .npane>*{transform:none;transition:opacity .15s linear}.notch .npeek .npip,.notch .nrest{transition:none}.notch.open .nseat:not([hidden]){animation:none}}
@media print{.nslot{display:none}}
/* The "see yours" page (functions/_funnel.js): the notch drawn open, still, with the maker's app on show. */
.fnnotch{position:relative;border:1.5px solid var(--ink);border-radius:10px;background:var(--paper);overflow:hidden;padding-bottom:14px}
.fnnotch .fnbar{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;background:var(--paper);border-bottom:1px solid var(--ink);position:relative}
.fnnotch .fnbar::after{content:"";position:absolute;inset-inline:0;bottom:-4px;height:3px;background:var(--stripes)}
.fnnotch .fnlogo{display:flex;align-items:center;gap:6px;font:500 17px var(--serif)}.fnnotch .fnlogo svg{width:16px;height:18px}
.fnnotch .fnpills{display:flex;gap:6px}.fnnotch .fnpills b{width:34px;height:10px;border-radius:5px;background:var(--box)}
.fnnotch .fnright{margin-inline-start:auto;align-items:center}.fnnotch .fnright span{font-size:11px;background:var(--ink);color:var(--paper);border-radius:6px;padding:3px 8px}
.notch.open.fnstatic{position:relative;inset:auto;margin:-45px auto 0;width:min(420px,calc(100% - 16px));height:auto;--nh:38px;border-radius:0 0 24px 24px;box-shadow:4px 4px 0 var(--ink)}
.notch.fnstatic .npane{position:relative;inset:auto;width:auto;margin:0;visibility:visible;pointer-events:auto;padding-top:12px}
.notch.fnstatic .npane::before{display:none}
.notch.fnstatic .npane>*{opacity:1;transform:none}
.notch.fnstatic .ndots i{width:7px;height:7px;border-radius:50%;background:rgba(250,246,236,.3)}
.notch.fnstatic .ndots i:first-child{background:#faf6ec}
.fnghost{padding:14px 16px 0;display:grid;gap:10px}
.fnghost i{display:block;height:12px;border-radius:6px;background:var(--box)}
.fnghost i:nth-child(1){width:60%}.fnghost i:nth-child(3){width:80%}