/* ============================================================================
   Future Office landing - notice-wall.css: the Notice Board "physical wall" mock
   ----------------------------------------------------------------------------
   A static-mock port of apps/web/src/lounge/noticeWall.css (the product uses the
   prefix `nw-`; this file uses `nwm-` so the two can never collide). Everything
   lives under the root wrapper `.nwm`, so nothing leaks. Load order on a page:
   tokens.css, mock.css, notice-wall.css, landing.css. The page itself loads
   Crimson Pro (400 + 600) from Google Fonts; this file has no @import and no URL.

   THEME. Night is the default. Day is <html data-theme="light">. The wall's own
   wood / cork / paper / ink / stamp / brass colours are product-specific, so they
   are local `--nwm-*` custom properties on `.nwm` (Night block, then a Day block),
   each group citing the noticeWall.css line it was copied from. Night keeps dark
   wood, dark cork AND dark paper; Day is lighter wood with cream paper. Outside
   those two blocks this file writes no hex colour at all. The toast and the bell
   row are office chrome, not wall: they use the landing tokens (--paper, --ink,
   --line, --lamp ...) so they follow the page theme.

   LAYOUT. 3 columns (1fr 1.5fr 1fr, hero alone in the centre) when the enclosing
   mock is wide, 2 columns under 860px, 1 column under 540px. The queries are
   `@container mock`, so `.nwm` must sit inside a `.m-mock` / `.m-window` (they
   are `container-name: mock`). To force a count regardless of width add
   `nwm-c1`, `nwm-c2` or `nwm-c3` on `.nwm`.

   ----------------------------------------------------------------------------
   CLASS LIST AND HTML SKELETON (N2 writes markup against exactly this)
   ----------------------------------------------------------------------------
   Icons are the kit's `<svg class="m-ic">`. Text is plain text: no emoji needed
   except in `.nwm-sticker`, where the reaction glyph is the content.

   <div class="nwm">                              root: tokens + position:relative
     <div class="nwm-toast"> ... </div>           optional overlay, see ENTRY TOAST
     <div class="nwm-frame">                      wooden frame
       <div class="nwm-rail">
         <div class="nwm-brand">
           <h3 class="nwm-brand-title">Notice board</h3>
           <span class="nwm-brand-sub">Lounge</span>      small caps room name
         </div>
         <span class="nwm-brass">[plus svg] Post a notice</span>
         <span class="nwm-brass nwm-brass-icon">[x svg]</span>   brass close
       </div>
       <div class="nwm-tabs">                     tabs hang off the frame, wrap in a narrow mock
         <span class="nwm-tab is-active">All <b class="nwm-badge">9</b></span>
         <span class="nwm-tab">Feature</span> Instruction, Update, Event, Past, Drafts
         <span class="nwm-tab">Recently deleted <b class="nwm-badge">2</b></span>
         .nwm-badge-hot = stronger orange badge. Active tab = .is-active
         (or aria-selected="true"): cork colour plus a screw dot.
       </div>
       <div class="nwm-cork">                     cork surface (speckle, inset shadow)
         <div class="nwm-board">                  the 3 / 2 / 1 column grid
           <div class="nwm-col nwm-col-a"> sheets </div>   left, 20px lower
           <div class="nwm-col nwm-col-hero"> the hero sheet </div>   centre
           <div class="nwm-col nwm-col-b"> sheets, envelope </div>    right, 46px lower
         </div>
       </div>
     </div>
     <div class="nwm-bell"> ... </div>            optional, see NUDGE BELL ROW
   </div>

   ONE SHEET (a notice)
   <article class="nwm-slot nwm-cat-instruction nwm-t3 nwm-hero nwm-stamped">
     <div class="nwm-sheet">
       <span class="nwm-tape"></span>             tape, colour = category.
                                                  Hero uses two: nwm-tape nwm-tape-l + nwm-tape nwm-tape-r.
                                                  Pinned: <span class="nwm-pin"></span> instead (red pushpin).
       <div class="nwm-stamp">Must read</div>     rotated red stamp (also add nwm-stamped on the slot)
       <div class="nwm-eyebrow">Instruction &middot; Must read</div>
       <h4 class="nwm-title">Title</h4>
       <p class="nwm-text">Body.</p>
       <figure class="nwm-photo">                 optional polaroid
         <span class="nwm-corner nwm-corner-tl"></span><span class="nwm-corner nwm-corner-br"></span>
         <div class="nwm-photo-art"></div>        gradient placeholder (or an img / svg)
         <figcaption>Floor plan.pdf</figcaption>
       </figure>
       <div class="nwm-rule"></div>
       <div class="nwm-meta"><span class="nwm-dot"></span><b>Ada Okafor</b><span>&middot;</span><time>2 days ago</time></div>
       <p class="nwm-seen">Seen by 6 of 9 &middot; 4 of 9 acknowledged</p>
       <div class="nwm-actions">
         <span class="nwm-phys">[check svg]
           <span class="nwm-swap"><span class="nwm-pre">Got it</span><span class="nwm-post">Acknowledged</span></span>
         </span>
         <span class="nwm-acknote">You acknowledged this</span>   hidden until flipped
       </div>
       <div class="nwm-stickers"><span class="nwm-sticker is-on" style="--r:-3deg">[glyph] <b>3</b></span> ...</div>
     </div>
   </article>
   Slot modifiers: nwm-hero (bigger type) | nwm-stamped (room for the stamp) |
     category: nwm-cat-feature (green) nwm-cat-instruction (amber) nwm-cat-update (sky)
     nwm-cat-event (pink) nwm-cat-stamp (stamp red, for the index card).
     Tilt: nwm-t1 .. nwm-t6 = -1.4, 0.9, -0.6, 1.8, -2.2, 1.2 degrees (or style="--rot:1deg").
   Sheet modifiers: nwm-curl (yellowed, folded bottom-right corner) | nwm-deleted
     (dashed, recently deleted) | nwm-index (ruled index card).
   Hover (mouse only) lifts and tilts a sheet. Sheets never scroll, no fixed heights.

   RECENTLY DELETED SHEET (nwm-sheet nwm-deleted, no stamp, no stickers)
     ... <p class="nwm-seen nwm-days">12 days left</p>
     <div class="nwm-actions">
       <span class="nwm-ghost">[trash svg] Delete permanently</span>
       <span class="nwm-phys">[undo svg] <span>Put back</span></span>
     </div>

   STILL TO ACKNOWLEDGE (index card)
   <article class="nwm-slot nwm-cat-stamp nwm-t5">
     <div class="nwm-sheet nwm-index">
       <div class="nwm-eyebrow">Still to acknowledge</div>
       <p class="nwm-text nwm-pending-lede">3 people have not tapped Got it.</p>
       <ul class="nwm-pending-list">
         <li class="nwm-who">                     optional step flip: add nwm-at-N on the li
           <span class="nwm-who-l"><span class="nwm-dot is-on"></span><span class="nwm-pending-name">Bilal Qureshi</span></span>
           <span class="nwm-ghost nwm-nudge"><span class="nwm-swap"><span class="nwm-pre">Nudge</span><span class="nwm-post">Nudged</span></span></span>
         </li>
         .nwm-dot.is-on = online (green), .nwm-dot.is-off = offline (grey)
       </ul>
       <p class="nwm-seen">and 2 more</p>
       <p class="nwm-seen">Nudges go to their notifications, never to chat.</p>
     </div>
   </article>

   PAST NOTICES ENVELOPE (optional, in a column)
   <div class="nwm-envelope nwm-t2"><div class="nwm-env-row"><b>Past notices</b><b class="nwm-badge">14</b></div><p>Expired or archived</p></div>
   <p class="nwm-section-label">Small caps label above a block</p>

   ENTRY TOAST (small, non-modal; sits over the top of the stage, never a dialog)
   <div class="nwm-toast">
     <div class="nwm-toast-row">
       <span class="nwm-toast-ic">[megaphone svg]</span>
       <div class="nwm-toast-txt">
         <p class="nwm-toast-t">3 new notices on the board</p>
         <ul class="nwm-toast-lines"><li>Instruction &middot; Fire drill at 11</li> (up to 3) </ul>
         <p class="nwm-toast-more">+2 more</p>      optional
       </div>
       <span class="nwm-toast-x">[x svg]</span>
     </div>
     <span class="nwm-toast-go">Go to Lounge</span>
   </div>
   `.nwm-toast` is position:absolute top-right of the nearest positioned ancestor
   (normally `.nwm`). Add `nwm-toast-l` for top-left.

   NUDGE BELL ROW (a notification feed row; office chrome)
   <div class="nwm-bell">
     <span class="nwm-bell-ic">[bell svg]</span>
     <div class="nwm-bell-txt">
       <p class="nwm-bell-t">Ada Okafor asked you to acknowledge a notice</p>
       <p class="nwm-bell-d">Fire drill at 11</p>
     </div>
     <time class="nwm-bell-time">now</time>
   </div>
   Add `is-new` for the lamp accent, `is-float` to float it (absolute, bottom-right).

   ----------------------------------------------------------------------------
   SCENE STEP CONTRACT (landing.js puts step-1 .. step-8 on the [data-scene]
   element, exactly as for the m-from / m-until / m-only helpers in mock.css and
   the .att-notes rules in features/attendance.html). N below is 1..8. Put the
   class on the element that should change. Pick by what should happen:

   .nwm-in-N     hidden (keeps its space) until step N, then floats up and stays.
                 Works on anything: toast, bell row, a whole column, a card.
   .nwm-drop-N   a sheet SLOT (.nwm-slot) that arrives at step N: the sheet drops
                 in (0.7s pin-drop) and its tape or pin bounces in 120ms later.
   .nwm-gone-N   visible until step N, then fades out and stays hidden (keeps its
                 space). Combine with .nwm-in-A for "visible from A to N-1".
   .nwm-show-N   display:none until step N, then appears (float-up) and takes up
                 space. Use for swapping the contents of a tab (no gap left behind).
   .nwm-hide-N   display:none from step N on (frees its space).
   .nwm-at-N     "flips" this element and everything inside it from step N on:
                   .nwm-pre  (shown before)  hides, .nwm-post (shown after) shows;
                   .nwm-stamp peels away (0.72s) and stays gone;
                   .nwm-acknote appears; .nwm-phys settles into its pressed,
                   greyed Got it state; .nwm-nudge goes greyed and bumps.
                 Put it on the .nwm-sheet to acknowledge (use the .nwm-swap pair
                 for the label and for "4 of 9" -> "5 of 9" in the seen line), or
                 on a .nwm-who row to turn Nudge into Nudged. Static equivalent:
                 add `is-flipped`.
   .nwm-ping-N   at exactly step N this element presses down with a lamp glow
                 (a cursor-click moment on Got it, Post a notice, Go to Lounge).
   .nwm-sel-N    a .nwm-tab that becomes the selected tab from step N on.
   .nwm-desel-N  a .nwm-tab that stops being selected from step N on.
                 (Put .is-active on the tab that starts selected.)

   Without JS there are no step classes: every in/drop element is simply visible,
   nothing is flipped, nothing is hidden. The wall is always the same wall; steps
   only toggle things inside it. Reduced motion: every animation and transition
   here is removed (static tilts stay), the same way the final block of mock.css
   does it; landing.js pins scenes to their rest step, so the rest state of every
   helper above is what shows (arrived, flipped, peeled).
   ========================================================================== */

/* ============================ TOKENS: NIGHT ============================ */
.nwm,
:root[data-theme="light"] .keep-dark .nwm,
:root[data-theme="light"] .m-stage .nwm,
:root[data-theme="light"] .m-video .nwm {
  --nwm-serif: "Crimson Pro", Georgia, serif; /* noticeWall.css:156 */

  /* wood frame - noticeWall.css:164-171 */
  --nwm-wood: #2c2018;
  --nwm-wood-2: #433226;
  --nwm-wood-ink: #f3e6d2;
  --nwm-wood-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  --nwm-wood-grain: rgba(255, 255, 255, 0.04);
  --nwm-wood-ink-2: rgba(255, 247, 234, 0.78);
  --nwm-tab-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));

  /* cork - noticeWall.css:173-178 */
  --nwm-cork: #4a3626;
  --nwm-cork-2: #5f4730;
  --nwm-cork-ink: #ecdcc4;
  --nwm-cork-hi: rgba(255, 255, 255, 0.1);
  --nwm-tab-on-ink: #fdf5e8;

  /* paper: warm near-black sheet, light ink - noticeWall.css:180-192 */
  --nwm-paper: #1f1d1a;
  --nwm-paper-2: #2a2723;
  --nwm-ink: #f1e9dc;
  --nwm-ink-2: rgba(241, 233, 220, 0.72);
  --nwm-ink-3: rgba(241, 233, 220, 0.52);
  --nwm-paper-edge: rgba(255, 255, 255, 0.1);
  --nwm-grain-a: rgba(255, 255, 255, 0.018);
  --nwm-grain-b: rgba(255, 255, 255, 0.014);
  --nwm-sheen: rgba(255, 255, 255, 0.07);
  --nwm-ruled: rgba(255, 217, 160, 0.16);
  --nwm-margin-rule: rgba(239, 106, 76, 0.5);

  /* stamp, status, curl - noticeWall.css:194-202 */
  --nwm-stamp: #ef6a4c;
  --nwm-stamp-blend: normal;
  --nwm-ok: #7bd69b;
  --nwm-danger: #f0725f;
  --nwm-curl-tint: rgba(255, 217, 160, 0.07);
  --nwm-curl-flap-a: #3a342c;
  --nwm-curl-flap-b: #2a2620;
  --nwm-curl-gap: #2e2218;

  /* physical buttons - noticeWall.css:204-211 */
  --nwm-phys-top: #ffe2b4;
  --nwm-phys-bot: #e0a752;
  --nwm-phys-edge: #8d5f20;
  --nwm-phys-ink: #2a1405;
  --nwm-brass-top: #e8c084;
  --nwm-brass-bot: #bd8c4e;
  --nwm-brass-ink: #2a1c10;
  /* the stronger count badge - noticeWall.css:636-637 */
  --nwm-hot-top: #f0a03c;
  --nwm-hot-bot: #c2570f;
  --nwm-hot-ink: #fff7ea;

  /* envelope - noticeWall.css:213-217 */
  --nwm-env-top: #cfae7c;
  --nwm-env-bot: #b78f5a;
  --nwm-env-flap: #c19a66;
  --nwm-env-ink: #2e2013;

  /* tape colour per category - noticeSheetModel.ts:40-43 (CATEGORY_TAPE) */
  --nwm-cat-feature: #10b981;
  --nwm-cat-instruction: #f59e0b;
  --nwm-cat-update: #38bdf8;
  --nwm-cat-event: #f472b6;

  /* red pushpin (head, outline, highlight) - noticeWall.css:796-803 */
  --nwm-pin-red: #d83a2b;
  --nwm-pin-edge: #6b1a14;
  --nwm-pin-shine: #ffffff;

  /* tape / photo-corner pigment - noticeWall.css:224 */
  --nwm-corner: rgba(14, 10, 6, 0.85);

  /* shadows - noticeWall.css:227-229 */
  --nwm-e1: 0 2px 4px rgba(0, 0, 0, 0.4);
  --nwm-e2: 0 3px 6px rgba(0, 0, 0, 0.42), 0 12px 24px -14px rgba(0, 0, 0, 0.8);
  --nwm-e3: 0 6px 10px rgba(0, 0, 0, 0.48), 0 30px 48px -20px rgba(0, 0, 0, 0.9);
}

/* ============================ TOKENS: DAY ============================ */
:root[data-theme="light"] .nwm {
  /* wood - noticeWall.css:269-275 */
  --nwm-wood: #b08455;
  --nwm-wood-2: #cba374;
  --nwm-wood-ink: #2e1f12;
  --nwm-wood-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  --nwm-wood-grain: rgba(255, 255, 255, 0.1);
  --nwm-wood-ink-2: rgba(46, 31, 18, 0.85);
  --nwm-tab-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08));

  /* cork - noticeWall.css:277-281 */
  --nwm-cork: #d6b283;
  --nwm-cork-2: #e6c9a0;
  --nwm-cork-ink: #3a2a1a;
  --nwm-cork-hi: rgba(255, 255, 255, 0.22);
  --nwm-tab-on-ink: #2a1c10;

  /* cream paper, dark ink - noticeWall.css:283-294 */
  --nwm-paper: #fbf9f4;
  --nwm-paper-2: #f3eee5;
  --nwm-ink: #2b2a26;
  --nwm-ink-2: rgba(43, 42, 38, 0.7);
  --nwm-ink-3: rgba(43, 42, 38, 0.56);
  --nwm-paper-edge: rgba(0, 0, 0, 0.16);
  --nwm-grain-a: rgba(0, 0, 0, 0.016);
  --nwm-grain-b: rgba(0, 0, 0, 0.013);
  --nwm-sheen: rgba(255, 255, 255, 0.55);
  --nwm-ruled: rgba(60, 90, 150, 0.18);
  --nwm-margin-rule: rgba(178, 55, 26, 0.5);

  /* stamp, status, curl - noticeWall.css:296-303 */
  --nwm-stamp: #b2371a;
  --nwm-stamp-blend: multiply;
  --nwm-ok: #15803d;
  --nwm-danger: #c2362a;
  --nwm-curl-tint: rgba(214, 170, 40, 0.14);
  --nwm-curl-flap-a: #e7dcc3;
  --nwm-curl-flap-b: #cfc0a0;
  --nwm-curl-gap: #c9a477;

  /* physical button - noticeWall.css:305-308 */
  --nwm-phys-top: #e98a3a;
  --nwm-phys-bot: #a94a08;
  --nwm-phys-edge: #6e3005;
  --nwm-phys-ink: #fff7ea;

  /* envelope - noticeWall.css:310-312 */
  --nwm-env-top: #e0bd88;
  --nwm-env-bot: #caa06b;
  --nwm-env-flap: #d7b27c;

  --nwm-corner: rgba(40, 28, 16, 0.78); /* noticeWall.css:317 */

  /* shadows - noticeWall.css:319-321 */
  --nwm-e1: 0 2px 4px rgba(60, 40, 20, 0.22);
  --nwm-e2: 0 3px 6px rgba(60, 40, 20, 0.24), 0 12px 24px -14px rgba(60, 40, 20, 0.55);
  --nwm-e3: 0 6px 10px rgba(60, 40, 20, 0.28), 0 30px 48px -20px rgba(60, 40, 20, 0.62);
}

/* ============================ ROOT AND LAYOUT KNOBS ============================ */
.nwm {
  /* type scale and radii - noticeWall.css:231-242 */
  --nwm-r-1: 3px;
  --nwm-r-2: 8px;
  --nwm-r-3: 14px;
  --nwm-r-9: 999px;
  --nwm-t-xs: 11px;
  --nwm-t-sm: 12px;
  --nwm-t-md: 13px;
  --nwm-t-base: 15px;
  --nwm-t-lg: 18px;
  --nwm-t-xl: 23px;
  --nwm-t-2xl: 29px;
  --nwm-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));

  /* 3 columns by default - noticeWall.css:245-255 */
  --nwm-tpl: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  --nwm-gap: 30px;
  --nwm-hero-span: auto;
  --nwm-hero-order: 1;
  --nwm-a-order: 0;
  --nwm-a-mt: 20px;
  --nwm-b-mt: 46px;
  --nwm-cork-pad: 44px 34px 56px;
  --nwm-frame-p: 12px;
  --nwm-hero-title: var(--nwm-t-2xl);

  position: relative;
  min-width: 0;
  max-width: 100%;
  color: var(--nwm-ink);
  -webkit-font-smoothing: antialiased;
}
.nwm *,
.nwm *::before,
.nwm *::after {
  box-sizing: border-box;
}
.nwm button {
  font: inherit;
  color: inherit;
}

/* 2 columns: the hero spans the row, the left column goes under it */
@container mock (max-width: 860px) {
  .nwm {
    --nwm-tpl: minmax(0, 1fr) minmax(0, 1fr);
    --nwm-gap: 26px;
    --nwm-hero-span: 1 / -1;
    --nwm-hero-order: 0;
    --nwm-a-order: 1;
    --nwm-a-mt: 0;
    --nwm-b-mt: 0;
    --nwm-cork-pad: 40px 26px 52px;
  }
}
/* 1 column: tighter frame, calmer tilt */
@container mock (max-width: 540px) {
  .nwm {
    --nwm-tpl: minmax(0, 1fr);
    --nwm-gap: 40px;
    --nwm-hero-span: auto;
    --nwm-cork-pad: 34px 18px 44px;
    --nwm-frame-p: 8px;
    --nwm-hero-title: var(--nwm-t-xl);
  }
  .nwm .nwm-slot,
  .nwm .nwm-envelope {
    --rot: 0.4deg !important;
  }
}
/* forced column counts (win over the container queries: two classes) */
.nwm.nwm-c3 {
  --nwm-tpl: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  --nwm-gap: 30px;
  --nwm-hero-span: auto;
  --nwm-hero-order: 1;
  --nwm-a-order: 0;
  --nwm-a-mt: 20px;
  --nwm-b-mt: 46px;
}
.nwm.nwm-c2 {
  --nwm-tpl: minmax(0, 1fr) minmax(0, 1fr);
  --nwm-hero-span: 1 / -1;
  --nwm-hero-order: 0;
  --nwm-a-order: 1;
  --nwm-a-mt: 0;
  --nwm-b-mt: 0;
}
.nwm.nwm-c1 {
  --nwm-tpl: minmax(0, 1fr);
  --nwm-gap: 40px;
  --nwm-hero-span: auto;
  --nwm-hero-order: 0;
  --nwm-a-order: 1;
  --nwm-a-mt: 0;
  --nwm-b-mt: 0;
  --nwm-cork-pad: 34px 18px 44px;
  --nwm-frame-p: 8px;
  --nwm-hero-title: var(--nwm-t-xl);
}
.nwm.nwm-c1 .nwm-slot,
.nwm.nwm-c1 .nwm-envelope {
  --rot: 0.4deg !important;
}

/* ============================ KEYFRAMES ============================ */
@keyframes nwm-float-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* a sheet lands on the board from slightly above, with a small settle */
@keyframes nwm-pin-drop {
  0% {
    opacity: 0;
    transform: translateY(-26px) scale(1.05);
  }
  55% {
    opacity: 1;
    transform: translateY(5px) scale(0.995);
  }
  78% {
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
/* the tape or pin is pressed in a beat later (individual transform properties, so
   the tape's own rotation, set with `transform`, is never overwritten) */
@keyframes nwm-pin-bounce {
  0%,
  45% {
    translate: 0 -9px;
    scale: 1.18;
    opacity: 0;
  }
  70% {
    translate: 0 2px;
    scale: 0.94;
    opacity: 1;
  }
  100% {
    translate: 0 0;
    scale: 1;
    opacity: 1;
  }
}
@keyframes nwm-peel-away {
  60% {
    transform: rotate(-24deg) translate(18px, -16px) rotateY(48deg);
    opacity: 0.75;
  }
  100% {
    transform: rotate(-40deg) translate(52px, -78px) rotateY(96deg) scale(0.86);
    opacity: 0;
  }
}
@keyframes nwm-bump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* ============================ THE WOODEN FRAME ============================ */
.nwm-frame {
  min-width: 0;
  max-width: 100%;
  border-radius: var(--nwm-r-3);
  padding: var(--nwm-frame-p);
  background:
    repeating-linear-gradient(97deg, var(--nwm-wood-grain) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, var(--nwm-wood-2), var(--nwm-wood) 55%);
  box-shadow:
    var(--nwm-e3),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.42);
}
.nwm-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  padding: 6px 8px 14px;
  color: var(--nwm-wood-ink);
}
.nwm-brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-right: auto;
  min-width: 0;
}
.nwm-brand-title {
  margin: 0;
  font-family: var(--nwm-serif);
  font-weight: 600;
  font-size: var(--nwm-t-xl);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-shadow: var(--nwm-wood-text-shadow);
  overflow-wrap: anywhere;
}
.nwm-brand-sub {
  font-size: var(--nwm-t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
  overflow-wrap: anywhere;
}
/* brass plate button ("Post a notice", the close X) */
.nwm-brass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  border-radius: var(--nwm-r-9);
  padding: 7px 14px;
  font-size: var(--nwm-t-sm);
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--nwm-brass-ink);
  border: 1px solid rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, var(--nwm-brass-top), var(--nwm-brass-bot));
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.nwm-brass .m-ic {
  width: 14px;
  height: 14px;
}
.nwm-brass-icon {
  padding: 7px 9px;
}

/* filter tabs screwed to the frame (they wrap instead of scrolling in a narrow mock) */
.nwm-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px;
  padding: 0 8px 10px;
  width: 100%;
  min-width: 0;
}
.nwm-tab {
  --_bg: var(--nwm-tab-bg);
  --_ink: var(--nwm-wood-ink-2);
  --_pl: 14px;
  --_sh: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --_dot: 0;
  position: relative;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-bottom: 0;
  border-radius: var(--nwm-r-2) var(--nwm-r-2) 0 0;
  padding: 8px 14px 9px var(--_pl);
  font-size: var(--nwm-t-sm);
  white-space: nowrap;
  color: var(--_ink);
  background: var(--_bg);
  box-shadow: var(--_sh);
  transition:
    color 0.3s ease,
    padding 0.3s ease;
}
.nwm-tab::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
  opacity: var(--_dot);
  transition: opacity 0.3s ease;
}
/* selected tab: the active tab is cork coloured with a screw dot; sel-N / desel-N flip it by step */
.nwm-tab:is(
  .is-active,
  [aria-selected="true"],
  [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-sel-1,
  [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-sel-2,
  [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-sel-3,
  [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-sel-4,
  [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-sel-5,
  [data-scene]:is(.step-6, .step-7, .step-8) .nwm-sel-6,
  [data-scene]:is(.step-7, .step-8) .nwm-sel-7,
  [data-scene]:is(.step-8) .nwm-sel-8
) {
  --_bg: linear-gradient(180deg, var(--nwm-cork-2), var(--nwm-cork));
  --_ink: var(--nwm-tab-on-ink);
  --_pl: 22px;
  --_sh: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 -2px 8px rgba(0, 0, 0, 0.3);
  --_dot: 1;
}
.nwm-tab:is(
  [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-desel-1,
  [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-desel-2,
  [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-desel-3,
  [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-desel-4,
  [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-desel-5,
  [data-scene]:is(.step-6, .step-7, .step-8) .nwm-desel-6,
  [data-scene]:is(.step-7, .step-8) .nwm-desel-7,
  [data-scene]:is(.step-8) .nwm-desel-8
) {
  --_bg: var(--nwm-tab-bg);
  --_ink: var(--nwm-wood-ink-2);
  --_pl: 14px;
  --_sh: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --_dot: 0;
}
.nwm-badge {
  min-width: 22px;
  padding-inline: 7px;
  height: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nwm-r-9);
  font-size: var(--nwm-t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, var(--nwm-brass-top), var(--nwm-brass-bot));
  color: var(--nwm-brass-ink);
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nwm-badge-hot {
  background: linear-gradient(180deg, var(--nwm-hot-top), var(--nwm-hot-bot));
  color: var(--nwm-hot-ink);
}

/* ============================ THE CORK ============================ */
.nwm-cork {
  position: relative;
  min-width: 0;
  border-radius: var(--nwm-r-2);
  padding: var(--nwm-cork-pad);
  overflow: hidden;
  background-color: var(--nwm-cork);
  background-image:
    radial-gradient(circle at 18% 24%, rgba(0, 0, 0, 0.2) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 68% 58%, rgba(255, 255, 255, 0.13) 0 1.5px, transparent 2px),
    radial-gradient(circle at 44% 82%, rgba(0, 0, 0, 0.15) 0 2.1px, transparent 2.7px),
    radial-gradient(circle at 88% 14%, rgba(0, 0, 0, 0.12) 0 1.3px, transparent 1.9px),
    radial-gradient(130% 100% at 10% -5%, var(--nwm-cork-hi), transparent 62%);
  background-size:
    37px 31px,
    53px 47px,
    29px 41px,
    61px 43px,
    100% 100%;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 18px 40px -22px rgba(0, 0, 0, 0.75),
    inset 0 -14px 30px -20px rgba(0, 0, 0, 0.6);
}
.nwm-board {
  display: grid;
  gap: var(--nwm-gap);
  grid-template-columns: var(--nwm-tpl);
  align-items: start;
  min-width: 0;
}
.nwm-col {
  display: flex;
  flex-direction: column;
  gap: 42px;
  min-width: 0;
}
.nwm-col:empty {
  display: none;
}
.nwm-col-hero {
  order: var(--nwm-hero-order);
  grid-column: var(--nwm-hero-span);
}
.nwm-col-a {
  order: var(--nwm-a-order);
  margin-top: var(--nwm-a-mt);
}
.nwm-col-b {
  order: 2;
  margin-top: var(--nwm-b-mt);
}
.nwm-section-label {
  margin: 0 0 10px;
  padding-left: 2px;
  font-size: var(--nwm-t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nwm-cork-ink);
  overflow-wrap: anywhere;
}

/* ============================ A SHEET OF PAPER ============================ */
.nwm-slot {
  --cat: var(--nwm-ink-3);
  --cat-ink: color-mix(in srgb, var(--cat) 62%, var(--nwm-ink));
  min-width: 0;
}
.nwm-cat-feature {
  --cat: var(--nwm-cat-feature);
}
.nwm-cat-instruction {
  --cat: var(--nwm-cat-instruction);
}
.nwm-cat-update {
  --cat: var(--nwm-cat-update);
}
.nwm-cat-event {
  --cat: var(--nwm-cat-event);
}
.nwm-cat-stamp {
  --cat: var(--nwm-stamp);
  --cat-ink: var(--nwm-stamp);
}
/* stable resting tilt (the product derives it from the notice id) */
.nwm-t1 {
  --rot: -1.4deg;
}
.nwm-t2 {
  --rot: 0.9deg;
}
.nwm-t3 {
  --rot: -0.6deg;
}
.nwm-t4 {
  --rot: 1.8deg;
}
.nwm-t5 {
  --rot: -2.2deg;
}
.nwm-t6 {
  --rot: 1.2deg;
}
.nwm-sheet {
  position: relative;
  min-width: 0;
  color: var(--nwm-ink);
  border-radius: var(--nwm-r-1);
  padding: 26px 24px 22px;
  background-color: var(--nwm-paper);
  background-image:
    repeating-linear-gradient(92deg, var(--nwm-grain-a) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(3deg, var(--nwm-grain-b) 0 1px, transparent 1px 4px),
    radial-gradient(140% 90% at 16% -6%, var(--nwm-sheen), transparent 58%);
  border: 1px solid var(--nwm-paper-edge);
  box-shadow: var(--nwm-e2);
  transform: rotate(var(--rot, 0deg)) perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0);
  transition:
    transform 240ms var(--nwm-ease),
    box-shadow 240ms ease;
}

/* tape: the colour is the category */
.nwm-tape {
  position: absolute;
  width: 104px;
  height: 28px;
  top: -15px;
  left: 50%;
  margin-left: -52px;
  clip-path: polygon(3% 6%, 100% 0, 97% 94%, 0 100%);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 46%),
    color-mix(in srgb, var(--cat, var(--nwm-ink-3)) 62%, transparent);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.34);
  pointer-events: none;
}
.nwm-tape-l {
  left: 14px;
  margin-left: 0;
  transform: rotate(-24deg);
}
.nwm-tape-r {
  left: auto;
  right: 14px;
  margin-left: 0;
  transform: rotate(19deg);
}
/* red pushpin, drawn in CSS (empty span): used INSTEAD of tape when pinned */
.nwm-pin {
  position: absolute;
  top: -12px;
  left: 50%;
  margin-left: -11px;
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.nwm-pin::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--nwm-pin-edge);
  background:
    radial-gradient(circle at 38% 33%, var(--nwm-pin-shine) 0 9%, transparent 12%),
    radial-gradient(circle at 38% 33%, color-mix(in srgb, var(--nwm-pin-red) 55%, var(--nwm-pin-shine)), var(--nwm-pin-red) 60%);
}
.nwm-pin::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 14px;
  width: 2px;
  height: 8px;
  border-radius: 1px;
  background: var(--nwm-pin-edge);
}

/* notice typography */
.nwm-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--nwm-t-xs);
  line-height: 1.35;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cat-ink, var(--cat, var(--nwm-ink-2)));
  overflow-wrap: anywhere;
}
.nwm-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--cat, var(--nwm-ink-3));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat, var(--nwm-ink-3)) 22%, transparent);
}
.nwm-stamped .nwm-eyebrow {
  padding-right: 74px;
}
.nwm-title {
  margin: 10px 0 8px;
  font-family: var(--nwm-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: var(--nwm-t-lg);
  min-width: 0;
  overflow-wrap: anywhere;
}
.nwm-hero .nwm-title {
  font-size: var(--nwm-hero-title);
  max-width: 19ch;
}
.nwm-text {
  margin: 0;
  font-family: var(--nwm-serif);
  font-size: var(--nwm-t-base);
  line-height: 1.45;
  color: var(--nwm-ink-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
.nwm-hero .nwm-text {
  font-size: 17px;
  line-height: 1.55;
}
.nwm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 14px;
  font-size: var(--nwm-t-sm);
  color: var(--nwm-ink-3);
  min-width: 0;
}
.nwm-meta > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.nwm-dot {
  --dot: var(--nwm-ink-3);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot);
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dot) 26%, transparent);
}
.nwm-dot.is-on {
  --dot: var(--nwm-ok);
}
.nwm-dot.is-off {
  --dot: var(--nwm-ink-3);
}
.nwm-rule {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--nwm-ink-3) 0 3px, transparent 3px 7px);
  opacity: 0.5;
  margin: 16px 0 12px;
}
.nwm-seen {
  margin: 0;
  font-size: var(--nwm-t-sm);
  line-height: 1.4;
  color: var(--nwm-ink-2);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow-wrap: anywhere;
}
.nwm-seen + .nwm-seen {
  margin-top: 4px;
}
.nwm-days {
  color: var(--nwm-danger);
  font-weight: 700;
}

/* before / after pair: the two children share one grid cell (see the step contract) */
.nwm-swap {
  display: grid;
  min-width: 0;
}
.nwm-swap > * {
  grid-area: 1 / 1;
  min-width: 0;
  overflow-wrap: anywhere;
  transition: opacity 0.3s ease;
}
.nwm-phys .nwm-swap,
.nwm-ghost .nwm-swap {
  display: inline-grid;
}
.nwm-post {
  opacity: 0;
  visibility: hidden;
}

/* the rubber stamp */
.nwm-stamp {
  position: absolute;
  top: 8px;
  right: -6px;
  transform: rotate(-13deg);
  transform-origin: bottom left;
  padding: 6px 13px;
  border: 2.5px solid var(--nwm-stamp);
  border-radius: var(--nwm-r-2);
  color: var(--nwm-stamp);
  font-size: var(--nwm-t-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  mix-blend-mode: var(--nwm-stamp-blend);
  opacity: 0.85;
  box-shadow: inset 0 0 0 1.5px var(--nwm-stamp);
  background: repeating-linear-gradient(41deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 5px);
  pointer-events: none;
}
.nwm-acknote {
  display: none;
  font-size: var(--nwm-t-sm);
  line-height: 1.3;
  color: var(--nwm-ok);
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* the row under a sheet's text that holds Got it / Put back / Delete permanently */
.nwm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  min-width: 0;
}

/* the physical amber Got it pill */
.nwm-phys {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
  min-width: 0;
  border-radius: var(--nwm-r-9);
  padding: 11px 20px;
  font-size: var(--nwm-t-base);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--nwm-phys-ink);
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: linear-gradient(180deg, var(--nwm-phys-top), var(--nwm-phys-bot));
  box-shadow:
    0 4px 0 var(--nwm-phys-edge),
    0 8px 14px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.3s ease,
    opacity 0.3s ease;
}
.nwm-phys .m-ic {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}
.nwm-phys > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.nwm-phys.is-done {
  filter: grayscale(0.55);
  opacity: 0.72;
  transform: translateY(4px);
  box-shadow:
    0 0 0 var(--nwm-phys-edge),
    inset 0 2px 5px rgba(0, 0, 0, 0.22);
}
/* dashed secondary button (Nudge, Delete permanently) */
.nwm-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  background: none;
  border: 1px dashed var(--nwm-ink-3);
  color: var(--nwm-ink-2);
  border-radius: var(--nwm-r-9);
  padding: 10px 16px;
  font-size: var(--nwm-t-sm);
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  transition:
    opacity 0.3s ease,
    transform 0.2s ease;
}
.nwm-ghost .m-ic {
  width: 12px;
  height: 12px;
}
.nwm-ghost.is-done {
  opacity: 0.6;
}

/* reaction stickers on the lower edge */
.nwm-stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 -30px;
  padding-left: 2px;
  min-width: 0;
}
.nwm-sticker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--nwm-r-9);
  padding: 5px 10px;
  font-size: var(--nwm-t-sm);
  line-height: 1;
  background: var(--nwm-paper-2);
  color: var(--nwm-ink-2);
  border: 1px solid var(--nwm-paper-edge);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.26);
  transform: rotate(var(--r, 0deg));
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.nwm-sticker b {
  font-variant-numeric: tabular-nums;
  font-size: var(--nwm-t-xs);
}
.nwm-sticker.is-on {
  background: color-mix(in srgb, var(--lamp) 26%, var(--nwm-paper-2));
  border-color: color-mix(in srgb, var(--lamp) 45%, transparent);
}

/* the clipped-on polaroid photo */
.nwm-photo {
  position: relative;
  margin: 18px 0 0;
  width: 172px;
  max-width: 100%;
  padding: 8px 8px 6px;
  background: var(--nwm-paper-2);
  border: 1px solid var(--nwm-paper-edge);
  box-shadow: var(--nwm-e1);
  transform: rotate(1.6deg);
}
.nwm-photo svg,
.nwm-photo img,
.nwm-photo-art {
  display: block;
  width: 100%;
  height: 86px;
  object-fit: cover;
  border-radius: 2px;
}
.nwm-photo-art {
  background:
    radial-gradient(circle at 72% 32%, rgba(255, 255, 255, 0.6) 0 8px, transparent 9px),
    linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--nwm-ink) 30%, transparent) 58%),
    linear-gradient(160deg, color-mix(in srgb, var(--cat, var(--nwm-ink-3)) 60%, var(--nwm-paper-2)), color-mix(in srgb, var(--nwm-ink-3) 45%, var(--nwm-paper)));
}
.nwm-photo figcaption {
  margin-top: 5px;
  font-size: var(--nwm-t-xs);
  line-height: 1.3;
  color: var(--nwm-ink-3);
  overflow-wrap: anywhere;
}
.nwm-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--nwm-corner) 0 52%, transparent 52%);
  pointer-events: none;
}
.nwm-corner-tl {
  top: -1px;
  left: -1px;
}
.nwm-corner-br {
  bottom: -1px;
  right: -1px;
  transform: rotate(180deg);
}

/* curled corner: a notice that expires within 3 days */
.nwm-curl::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--nwm-curl-tint);
  pointer-events: none;
}
.nwm-curl::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 30px;
  height: 30px;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    var(--nwm-curl-flap-a),
    var(--nwm-curl-flap-b) 50%,
    var(--nwm-curl-gap) 50%
  );
  filter: drop-shadow(-2px -2px 3px rgba(0, 0, 0, 0.3));
}

/* recently deleted: dashed, half-faded paper */
.nwm-deleted {
  border: 1.5px dashed var(--nwm-ink-3);
  background-image: none;
  background-color: color-mix(in srgb, var(--nwm-paper) 72%, transparent);
  box-shadow: var(--nwm-e1);
}
.nwm-deleted .nwm-title {
  color: var(--nwm-ink-2);
}

/* ============================ STILL TO ACKNOWLEDGE (index card) ============================ */
.nwm-index {
  padding-top: 30px;
  background-image:
    linear-gradient(var(--nwm-margin-rule), var(--nwm-margin-rule)),
    repeating-linear-gradient(180deg, transparent 0 25px, var(--nwm-ruled) 25px 26px),
    linear-gradient(180deg, var(--nwm-paper) 0 0);
  background-size:
    100% 1.5px,
    100% 100%,
    100% 100%;
  background-position:
    0 22px,
    0 0,
    0 0;
  background-repeat: no-repeat, repeat, no-repeat;
}
.nwm-pending-lede {
  margin: 8px 0 6px;
  font-size: var(--nwm-t-md);
}
.nwm-pending-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nwm-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding: 5px 0;
  font-size: var(--nwm-t-sm);
  min-width: 0;
}
.nwm-who-l {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.nwm-pending-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.nwm-nudge {
  flex: 0 0 auto;
  padding: 5px 11px;
}

/* ============================ PAST NOTICES ENVELOPE ============================ */
.nwm-envelope {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  text-align: left;
  border-radius: var(--nwm-r-2);
  padding: 34px 18px 18px;
  color: var(--nwm-env-ink);
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: linear-gradient(180deg, var(--nwm-env-top), var(--nwm-env-bot));
  box-shadow:
    var(--nwm-e2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: rotate(var(--rot, 0deg));
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.nwm-envelope::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 56px;
  background: linear-gradient(180deg, var(--nwm-env-flap), var(--nwm-env-bot));
  border-radius: var(--nwm-r-2) var(--nwm-r-2) 0 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.nwm-env-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.nwm-env-row b {
  font-size: var(--nwm-t-md);
  min-width: 0;
  overflow-wrap: anywhere;
}
.nwm-env-row .nwm-badge {
  flex: 0 0 auto;
}
.nwm-envelope p {
  position: relative;
  margin: 6px 0 0;
  font-size: var(--nwm-t-xs);
  color: color-mix(in srgb, var(--nwm-env-ink) 74%, transparent);
  overflow-wrap: anywhere;
}

/* ============================ ENTRY TOAST (office chrome, tokens.css colours) ============================ */
.nwm-toast {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 8;
  width: min(288px, calc(100% - 24px));
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  color: var(--ink);
  font-size: 13px;
}
.nwm-toast-l {
  right: auto;
  left: 12px;
}
.nwm-toast-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.nwm-toast-ic {
  flex: none;
  margin-top: 2px;
  color: var(--st-meeting);
}
.nwm-toast-txt {
  flex: 1 1 auto;
  min-width: 0;
}
.nwm-toast-t {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.nwm-toast-lines {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-70);
}
.nwm-toast-lines li {
  min-width: 0;
  overflow-wrap: anywhere;
}
.nwm-toast-more {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-50);
}
.nwm-toast-x {
  flex: none;
  display: inline-grid;
  place-items: center;
  margin: -4px -4px 0 0;
  padding: 4px;
  border-radius: 6px;
  color: var(--ink-50);
}
.nwm-toast-x .m-ic {
  width: 14px;
  height: 14px;
}
.nwm-toast-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--lamp);
  color: var(--on-lamp);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  transition:
    transform 0.2s var(--nwm-ease),
    filter 0.3s ease;
}

/* ============================ NUDGE BELL ROW (office chrome) ============================ */
.nwm-bell {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  color: var(--ink);
}
.nwm-bell.is-new {
  border-color: rgb(var(--lamp-rgb) / 0.35);
}
.nwm-bell.is-float {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 7;
  width: min(380px, calc(100% - 24px));
}
.nwm-bell-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-70);
}
.nwm-bell.is-new .nwm-bell-ic {
  background: rgb(var(--lamp-rgb) / 0.16);
  color: var(--lamp);
}
.nwm-bell-txt {
  flex: 1 1 auto;
  min-width: 0;
}
.nwm-bell-t {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.nwm-bell-d {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
.nwm-bell-time {
  flex: none;
  font-size: 11px;
  color: var(--ink-50);
  white-space: nowrap;
}

/* ============================ HOVER (mouse only) ============================ */
@media (hover: hover) and (pointer: fine) {
  .nwm-sheet:hover {
    transform: rotate(var(--rot, 0deg)) perspective(900px) rotateX(1.4deg) rotateY(-1.8deg) translateY(-5px);
    box-shadow: var(--nwm-e3);
  }
  .nwm-envelope:hover {
    transform: rotate(var(--rot, 0deg)) translateY(-4px);
    box-shadow: var(--nwm-e3);
  }
  .nwm-sticker:hover {
    transform: rotate(var(--r, 0deg)) translateY(-3px) scale(1.06);
    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.3);
  }
  .nwm-tab:hover {
    transform: translateY(-1px);
  }
  .nwm-brass:hover {
    filter: brightness(1.07);
  }
}

/* ============================ SCENE STEP HELPERS (see the contract at the top) ============================ */
/* ---- nwm-in-N and nwm-drop-N: hidden (space kept) until step N ---- */
.js [data-scene] .nwm-in-1,
.js [data-scene] .nwm-in-2,
.js [data-scene] .nwm-in-3,
.js [data-scene] .nwm-in-4,
.js [data-scene] .nwm-in-5,
.js [data-scene] .nwm-in-6,
.js [data-scene] .nwm-in-7,
.js [data-scene] .nwm-in-8,
.js [data-scene] .nwm-drop-1,
.js [data-scene] .nwm-drop-2,
.js [data-scene] .nwm-drop-3,
.js [data-scene] .nwm-drop-4,
.js [data-scene] .nwm-drop-5,
.js [data-scene] .nwm-drop-6,
.js [data-scene] .nwm-drop-7,
.js [data-scene] .nwm-drop-8 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.js [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-in-1 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-in-2 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-in-3 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-in-4 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-in-5 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-6, .step-7, .step-8) .nwm-in-6 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-7, .step-8) .nwm-in-7 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-8) .nwm-in-8 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-drop-1 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-pin-drop 0.7s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-drop-1 :is(.nwm-tape, .nwm-pin) {
  animation: nwm-pin-bounce 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: 120ms;
}
.js [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-drop-2 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-pin-drop 0.7s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-drop-2 :is(.nwm-tape, .nwm-pin) {
  animation: nwm-pin-bounce 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: 120ms;
}
.js [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-drop-3 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-pin-drop 0.7s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-drop-3 :is(.nwm-tape, .nwm-pin) {
  animation: nwm-pin-bounce 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: 120ms;
}
.js [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-drop-4 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-pin-drop 0.7s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-drop-4 :is(.nwm-tape, .nwm-pin) {
  animation: nwm-pin-bounce 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: 120ms;
}
.js [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-drop-5 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-pin-drop 0.7s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-drop-5 :is(.nwm-tape, .nwm-pin) {
  animation: nwm-pin-bounce 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: 120ms;
}
.js [data-scene]:is(.step-6, .step-7, .step-8) .nwm-drop-6 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-pin-drop 0.7s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-6, .step-7, .step-8) .nwm-drop-6 :is(.nwm-tape, .nwm-pin) {
  animation: nwm-pin-bounce 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: 120ms;
}
.js [data-scene]:is(.step-7, .step-8) .nwm-drop-7 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-pin-drop 0.7s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-7, .step-8) .nwm-drop-7 :is(.nwm-tape, .nwm-pin) {
  animation: nwm-pin-bounce 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: 120ms;
}
.js [data-scene]:is(.step-8) .nwm-drop-8 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: nwm-pin-drop 0.7s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-8) .nwm-drop-8 :is(.nwm-tape, .nwm-pin) {
  animation: nwm-pin-bounce 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: 120ms;
}

/* ---- nwm-gone-N: visible until step N, then fades out (space kept) ---- */
.js [data-scene] .nwm-gone-1,
.js [data-scene] .nwm-gone-2,
.js [data-scene] .nwm-gone-3,
.js [data-scene] .nwm-gone-4,
.js [data-scene] .nwm-gone-5,
.js [data-scene] .nwm-gone-6,
.js [data-scene] .nwm-gone-7,
.js [data-scene] .nwm-gone-8 {
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0s;
}
.js [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-gone-1 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}
.js [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-gone-2 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}
.js [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-gone-3 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}
.js [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-gone-4 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}
.js [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-gone-5 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}
.js [data-scene]:is(.step-6, .step-7, .step-8) .nwm-gone-6 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}
.js [data-scene]:is(.step-7, .step-8) .nwm-gone-7 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}
.js [data-scene]:is(.step-8) .nwm-gone-8 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}

/* ---- nwm-show-N / nwm-hide-N: display toggles (they free or take space) ---- */
.js [data-scene]:not(:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8)) .nwm-show-1 {
  display: none;
}
.js [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-show-1 {
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-hide-1 {
  display: none;
}
.js [data-scene]:not(:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8)) .nwm-show-2 {
  display: none;
}
.js [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-show-2 {
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-hide-2 {
  display: none;
}
.js [data-scene]:not(:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8)) .nwm-show-3 {
  display: none;
}
.js [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-show-3 {
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-hide-3 {
  display: none;
}
.js [data-scene]:not(:is(.step-4, .step-5, .step-6, .step-7, .step-8)) .nwm-show-4 {
  display: none;
}
.js [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-show-4 {
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-hide-4 {
  display: none;
}
.js [data-scene]:not(:is(.step-5, .step-6, .step-7, .step-8)) .nwm-show-5 {
  display: none;
}
.js [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-show-5 {
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-hide-5 {
  display: none;
}
.js [data-scene]:not(:is(.step-6, .step-7, .step-8)) .nwm-show-6 {
  display: none;
}
.js [data-scene]:is(.step-6, .step-7, .step-8) .nwm-show-6 {
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-6, .step-7, .step-8) .nwm-hide-6 {
  display: none;
}
.js [data-scene]:not(:is(.step-7, .step-8)) .nwm-show-7 {
  display: none;
}
.js [data-scene]:is(.step-7, .step-8) .nwm-show-7 {
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-7, .step-8) .nwm-hide-7 {
  display: none;
}
.js [data-scene]:not(:is(.step-8)) .nwm-show-8 {
  display: none;
}
.js [data-scene]:is(.step-8) .nwm-show-8 {
  animation: nwm-float-up 0.52s var(--nwm-ease) both;
}
.js [data-scene]:is(.step-8) .nwm-hide-8 {
  display: none;
}

/* ---- nwm-ping-N: at exactly step N the element presses down with a lamp glow ---- */
.nwm-ping-1,
.nwm-ping-2,
.nwm-ping-3,
.nwm-ping-4,
.nwm-ping-5,
.nwm-ping-6,
.nwm-ping-7,
.nwm-ping-8 {
  transition:
    transform 0.2s var(--nwm-ease),
    filter 0.3s ease;
}
.js [data-scene].step-1 .nwm-ping-1 {
  transform: translateY(3px) scale(0.97);
  filter: drop-shadow(0 0 8px rgb(var(--lamp-rgb) / 0.55));
}
.js [data-scene].step-2 .nwm-ping-2 {
  transform: translateY(3px) scale(0.97);
  filter: drop-shadow(0 0 8px rgb(var(--lamp-rgb) / 0.55));
}
.js [data-scene].step-3 .nwm-ping-3 {
  transform: translateY(3px) scale(0.97);
  filter: drop-shadow(0 0 8px rgb(var(--lamp-rgb) / 0.55));
}
.js [data-scene].step-4 .nwm-ping-4 {
  transform: translateY(3px) scale(0.97);
  filter: drop-shadow(0 0 8px rgb(var(--lamp-rgb) / 0.55));
}
.js [data-scene].step-5 .nwm-ping-5 {
  transform: translateY(3px) scale(0.97);
  filter: drop-shadow(0 0 8px rgb(var(--lamp-rgb) / 0.55));
}
.js [data-scene].step-6 .nwm-ping-6 {
  transform: translateY(3px) scale(0.97);
  filter: drop-shadow(0 0 8px rgb(var(--lamp-rgb) / 0.55));
}
.js [data-scene].step-7 .nwm-ping-7 {
  transform: translateY(3px) scale(0.97);
  filter: drop-shadow(0 0 8px rgb(var(--lamp-rgb) / 0.55));
}
.js [data-scene].step-8 .nwm-ping-8 {
  transform: translateY(3px) scale(0.97);
  filter: drop-shadow(0 0 8px rgb(var(--lamp-rgb) / 0.55));
}

/* ---- nwm-at-N / is-flipped: the before -> after flip ---- */
:is(
  .is-flipped,
  [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-1,
  [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-2,
  [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-3,
  [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-4,
  [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-at-5,
  [data-scene]:is(.step-6, .step-7, .step-8) .nwm-at-6,
  [data-scene]:is(.step-7, .step-8) .nwm-at-7,
  [data-scene]:is(.step-8) .nwm-at-8
) .nwm-pre {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}
:is(
  .is-flipped,
  [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-1,
  [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-2,
  [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-3,
  [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-4,
  [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-at-5,
  [data-scene]:is(.step-6, .step-7, .step-8) .nwm-at-6,
  [data-scene]:is(.step-7, .step-8) .nwm-at-7,
  [data-scene]:is(.step-8) .nwm-at-8
) .nwm-post {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease 0.1s,
    visibility 0s;
}
:is(
  .is-flipped,
  [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-1,
  [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-2,
  [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-3,
  [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-4,
  [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-at-5,
  [data-scene]:is(.step-6, .step-7, .step-8) .nwm-at-6,
  [data-scene]:is(.step-7, .step-8) .nwm-at-7,
  [data-scene]:is(.step-8) .nwm-at-8
) .nwm-stamp {
  animation: nwm-peel-away 0.72s cubic-bezier(0.4, 0.1, 0.5, 1) forwards;
}
:is(
  .is-flipped,
  [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-1,
  [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-2,
  [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-3,
  [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-4,
  [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-at-5,
  [data-scene]:is(.step-6, .step-7, .step-8) .nwm-at-6,
  [data-scene]:is(.step-7, .step-8) .nwm-at-7,
  [data-scene]:is(.step-8) .nwm-at-8
) .nwm-acknote {
  display: inline;
}
.nwm-phys:is(
  .is-flipped,
  [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-1,
  [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-2,
  [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-3,
  [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-4,
  [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-at-5,
  [data-scene]:is(.step-6, .step-7, .step-8) .nwm-at-6,
  [data-scene]:is(.step-7, .step-8) .nwm-at-7,
  [data-scene]:is(.step-8) .nwm-at-8
),
:is(
  .is-flipped,
  [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-1,
  [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-2,
  [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-3,
  [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-4,
  [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-at-5,
  [data-scene]:is(.step-6, .step-7, .step-8) .nwm-at-6,
  [data-scene]:is(.step-7, .step-8) .nwm-at-7,
  [data-scene]:is(.step-8) .nwm-at-8
) .nwm-phys {
  filter: grayscale(0.55);
  opacity: 0.72;
  transform: translateY(4px);
  box-shadow:
    0 0 0 var(--nwm-phys-edge),
    inset 0 2px 5px rgba(0, 0, 0, 0.22);
}
.nwm-nudge:is(
  .is-flipped,
  [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-1,
  [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-2,
  [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-3,
  [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-4,
  [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-at-5,
  [data-scene]:is(.step-6, .step-7, .step-8) .nwm-at-6,
  [data-scene]:is(.step-7, .step-8) .nwm-at-7,
  [data-scene]:is(.step-8) .nwm-at-8
),
:is(
  .is-flipped,
  [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-1,
  [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-2,
  [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-3,
  [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-4,
  [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-at-5,
  [data-scene]:is(.step-6, .step-7, .step-8) .nwm-at-6,
  [data-scene]:is(.step-7, .step-8) .nwm-at-7,
  [data-scene]:is(.step-8) .nwm-at-8
) .nwm-nudge {
  opacity: 0.6;
  animation: nwm-bump 0.5s var(--nwm-ease);
}

/* ============================ REDUCED MOTION ============================
   Same approach as the last block of mock.css: nothing animates or transitions.
   Static tilts stay; landing.js pins scenes to their rest step, so a flipped
   sheet shows its peeled (gone) stamp and an arrived sheet is simply there. */
@media (prefers-reduced-motion: reduce) {
  .nwm,
  .nwm *,
  .nwm *::before,
  .nwm *::after {
    animation: none !important;
    transition: none !important;
  }
  .nwm-sheet,
  .nwm-sheet:hover {
    transform: rotate(var(--rot, 0deg)) !important;
  }
  .nwm-envelope,
  .nwm-envelope:hover {
    transform: rotate(var(--rot, 0deg)) !important;
  }
  .nwm-sticker:hover,
  .nwm-tab:hover {
    transform: none !important;
  }
  .nwm-sticker:hover {
    transform: rotate(var(--r, 0deg)) !important;
  }
  :is(
    .is-flipped,
    [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-1,
    [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-2,
    [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-3,
    [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .nwm-at-4,
    [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .nwm-at-5,
    [data-scene]:is(.step-6, .step-7, .step-8) .nwm-at-6,
    [data-scene]:is(.step-7, .step-8) .nwm-at-7,
    [data-scene]:is(.step-8) .nwm-at-8
  ) .nwm-stamp {
    opacity: 0;
  }
}