/* The Notchboard stop: the placement-only Notchboard on the hero's desktop, in desktop points (styles.css .desk-ui).
   It hangs from the 184-point notch (664 to 848, 32 tall) as the app presents it: its 640 × 211 box starts 16
   points up inside the notch, a 24-point neck widens out of the notch to the board, and the board's columns are the
   project board's (switch.css), without rows or toolbar. It opens by widening an inset clip; closing follows the
   app's dismissal (BoardMenuPanel.close), drawn frame by frame by notchboard.js. */
.desk-ui .nb-board {
  position: absolute;
  left: 436px;
  top: 16px;
  width: 640px;
  height: 211px;
  color: rgba(255, 255, 255, 0.92);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  visibility: hidden;
}
.nb-board.open, .nb-board.closing {
  visibility: visible;
}
.nb-body {
  position: absolute;
  inset: 0;
  clip-path: inset(24px 228px 185px 228px round 1px);
}
.nb-board.open .nb-body {
  clip-path: inset(24px 0px 0px 0px round 20px);
  transition: clip-path 560ms var(--ease-panel);
}
/* While closing, the layers take the same path in the shared box, so the silhouette moves as one shape; the plate
   follows it with its box. notchboard.js sets both each frame. */
.nb-board.closing .nb-body, .nb-board.closing .nb-neck {
  clip-path: path("M 228 0 L 412 0 C 412 15.6 424 24 436 24 L 620 24 Q 640 24 640 44 L 640 191 Q 640 211 620 211 L 20 211 Q 0 211 0 191 L 0 44 Q 0 24 20 24 L 204 24 C 216 24 228 15.6 228 0 Z");
}
.nb-neck {
  position: absolute;
  left: 0;
  top: 0;
  width: 640px;
  height: 25px;
  transform-origin: 50% 0;
  transform: scale(0.92, 1);
}
.nb-board.open .nb-neck {
  transform: none;
  transition: transform 300ms var(--ease-panel);
}
.nb-board.closing .nb-neck {
  transform: none;
}
.nb-shadow {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.4));
}
.nb-shadow .nb-body {
  background: rgba(0, 0, 0, 0.18);
}
/* The glass is the board body's own rounded box, growing from a sliver under the notch: Chrome blurs a clip-path's
   whole bounding box, but follows border-radius. Its top shades from the neck's black into the glass. */
.nb-plate {
  position: absolute;
  left: 228px;
  top: 24px;
  width: 184px;
  height: 2px;
  border-radius: 1px;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0) 6px), linear-gradient(rgba(30, 30, 34, 0.24), rgba(22, 22, 26, 0.34));
}
/* The app's Liquid Glass (regular, the placement-only board's light tint): the desktop behind frosted, saturated and
   brightened, with a specular rim. */
.nb-board.open .nb-plate, .nb-board.closing .nb-plate {
  left: 0;
  width: 640px;
  height: 187px;
  border-radius: 20px;
  -webkit-backdrop-filter: blur(15px) saturate(2.1) brightness(1.08);
  backdrop-filter: blur(15px) saturate(2.1) brightness(1.08);
}
.nb-plate::before, .nb-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.nb-plate::before {
  padding: 1.2px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 18%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.16) 85%, rgba(255, 255, 255, 0.4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.nb-plate::after {
  box-shadow: inset 0 -2px 2px -1px rgba(255, 255, 255, 0.14), inset 0 0 28px rgba(255, 255, 255, 0.05);
  background: radial-gradient(90% 70% at 20% 0%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 60%);
}
.nb-board.open .nb-plate {
  transition: left 560ms var(--ease-panel), width 560ms var(--ease-panel), height 560ms var(--ease-panel), border-radius 560ms var(--ease-panel);
}
/* The notch over the board while it closes: on a Mac the hardware hides what retracts into it, but here the notch is
   the menu bar's picture, under the board, so the glass's last sliver showed on it. Its outline is the menu bars' own,
   x 664 to 848 and 32 points tall. */
.nb-notch {
  position: absolute;
  left: 228px;
  top: -16px;
  width: 184px;
  height: 32px;
  display: none;
}
.nb-board.closing .nb-notch {
  display: block;
}
/* The window a dragged one would go in front of (the app's snap slot): outlined as the column it is dropped on is. */
.nb-board .sw-tile.slot {
  padding: 4px;
  border: 2px solid rgba(255, 255, 255, 0.5);
}
/* The board's columns, below the neck: a header and the layout preview. */
.nb-board .sw-col, .nb-board .sw-colbox {
  top: 36px;
  height: 163px;
}
.nb-board .sw-head {
  transition: none;
}
/* The visitor drags windows by their title bars while the stop is on (notchboard.js sets the cursor). A touch there
   still scrolls and zooms the page, except on a grip: on a tablet an invisible handle over each title bar, at least
   44 pixels tall, that a finger moves the window by (notchboard.js places them). */
.screen-overlay.dragging-on {
  pointer-events: auto;
}
.desk-ui .nb-grips {
  position: absolute;
  inset: 0;
}
.desk-ui .nb-grip {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* The card's Replay, beside its note. With reduced motion there is no guided pointer to replay (notchboard.js hides
   it). */
.nb-replay svg {
  margin-left: 4px;
}
/* Reduced motion: the Notchboard appears and leaves with a short fade instead of growing out of the notch. */
@media (prefers-reduced-motion: reduce) {
  .nb-board.open .nb-body, .nb-board.open .nb-neck, .nb-board.open .nb-plate {
    transition: none;
  }
  .nb-board.open {
    animation: nb-fade var(--t-fast) linear;
  }
}
@keyframes nb-fade {
  from { opacity: 0; }
}