/* 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 (.notch is a night island in scripts/night.mjs). Its words use paper on black.
   Logical sides only, so RTL mirrors it. The bar around it is split like a MacBook menu bar (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%}