/* ==========================================================
   MENU (NOIZE shell). A contents page: chapters of real page
   thumbnails. Opens by zooming the live page into its card.
   ========================================================== */
/* the menu is OS-sized UI: it lays out on a larger (or smaller) logical canvas and is scaled by --ui,
   so its controls and labels stay at normal size and bigger screens fit more thumbnails per row */
.menu{ position:absolute; left:0; top:0; width:calc(100% / var(--ui)); height:calc(100% / var(--ui));
  transform:scale(var(--ui)); transform-origin:0 0; z-index:10; background:var(--paper); }
.menu[hidden]{ display:none; }
.menu-top, .chapters, .presenter{ opacity:0; transition:opacity .4s var(--ease); }
.menu.shown .menu-top, .menu.shown .chapters, .menu.shown .presenter{ opacity:1; transition-delay:.18s; }

/* top bar: wordmark (fixed spine position), search from column 3, actions right */
.menu-top .wordmark{ position:absolute; left:33px; top:33.3px; }
/* search: an Apple search field (filled, magnifier), 40px like every control */
.search-wrap{ position:absolute; left:50%; top:31px; width:420px; margin-left:-210px; }
.search-wrap::before{ content:""; position:absolute; left:13px; top:13px; width:14px; height:14px; pointer-events:none; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231d1d1f' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='m9.5 9.5 3 3'/%3E%3C/svg%3E") no-repeat center/contain; }
.search{ width:100%; height:40px; border:0; border-radius:12px; background:var(--fill); padding:0 14px 0 36px;
  font:var(--t-lead); color:var(--ink); outline:none; transition:background-color .2s, box-shadow .2s; -webkit-appearance:none; appearance:none; }
.search::placeholder{ color:var(--quiet); }
.search:focus{ background:var(--paper); box-shadow:0 0 0 1.5px var(--ink); }
.search::-webkit-search-cancel-button{ display:none; }
.menu-actions{ position:absolute; right:33px; top:31px; display:flex; gap:8px; align-items:center; }

.menu .pill{ height:40px; padding:0 20px; border-radius:999px; background:var(--fill); font:var(--t-control);
  display:inline-flex; align-items:center; white-space:nowrap; transition:background-color .25s, color .25s, opacity .2s; }
.menu .pill:hover{ background:var(--fill-2); }
.menu .pill[aria-pressed="true"], .menu .pill-solid{ background:var(--ink); color:var(--paper); }
.menu .pill-solid:hover, .menu .pill[aria-pressed="true"]:hover{ background:#000; }

/* chapters: a heading and its cards; no rules (headings and space do the grouping). Blocks flow side by side and wrap */
.chapters{ position:absolute; left:33px; right:33px; top:106px; bottom:33px; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-wrap:wrap; align-content:flex-start; gap:32px 20px; padding:2px 2px 8px; scrollbar-width:thin; }
.menu.presenter-on .chapters{ bottom:100px; }
.chapter{ min-width:212px; }
.chapter > h2{ margin:0 0 var(--s-2); font:var(--t-small-strong); display:flex; gap:var(--s-1); align-items:baseline; }
.chapter > h2 span{ font:var(--t-mono); color:var(--quiet); }
.cards{ display:flex; flex-wrap:wrap; gap:20px; }

.menu-card{ width:212px; text-align:left; display:block; }
.menu-card .menu-frame{ position:relative; width:212px; aspect-ratio:var(--Wn) / 819; border-radius:8px; overflow:hidden; background:var(--paper);
  box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.08), 0 6px 18px -6px rgba(0,0,0,.12);
  transition:box-shadow .3s var(--ease), transform .35s var(--ease); }
.menu-card:hover .menu-frame{ box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.08), 0 14px 30px -10px rgba(0,0,0,.2); transform:translateY(-2px); }
.menu-card.current .menu-frame{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.menu-card.parked .menu-frame{ visibility:hidden; }
.menu-card > p{ margin:var(--s-2) 0 0; display:flex; gap:var(--s-1); align-items:baseline; font:var(--t-small-strong); }
.menu-card > p span{ font:var(--t-mono); color:var(--quiet); }
.chapters .empty{ font:var(--t-small); color:var(--quiet); margin:0; }

/* a page rendered small: same markup and CSS as the live page, frozen.
   Menu rules must use child selectors (> h2, > p) so they never reach into a thumbnail. */
.mini{ position:absolute; left:0; top:0; width:var(--W); height:819px; transform-origin:0 0; pointer-events:none; background:var(--paper); overflow:hidden; }
.mini *, .mini *::before, .mini *::after{ transition:none !important; animation:none !important; }

/* presenter tools: only for the presenter (localhost, or P). Hidden on client share links. */
.presenter{ position:absolute; left:33px; right:33px; bottom:24px; height:53px; border-top:1px solid var(--grey-line); padding-top:12px;
  display:none; align-items:center; gap:8px; }
.menu.presenter-on .presenter{ display:flex; }
.presenter .pill{ padding:0 16px; }
.presenter-label{ font:var(--t-small); color:var(--quiet); margin-right:2px; }
.presenter-rule{ width:1px; height:18px; background:var(--grey-line); margin:0 8px; }
.presenter .row{ display:flex; gap:8px; }
.presenter .keys{ margin-left:auto; font:var(--t-small); color:var(--mid); display:flex; align-items:center; gap:4px; }
.presenter kbd{ font:var(--t-mono); border:1px solid var(--hairline); border-radius:5px; padding:1px 5px; color:var(--ink); }

/* keyboard focus on a card: an ink ring on the thumbnail, not the pink system ring */
.menu-card:focus-visible{ outline:none; }
.menu-card:focus-visible .menu-frame{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }

/* reorder (presenter tools on): drag a card; a line marks where it lands */
.menu-card[draggable="true"]{ cursor:grab; }
.menu-card.is-dragging{ opacity:.35; }
.menu-card.drop-before .menu-frame{ box-shadow:-4px 0 0 var(--ink); }
.menu-card.drop-after .menu-frame{ box-shadow:4px 0 0 var(--ink); }