/* ==========================================================
   SHELL = NOIZE. Rail, nav, menu, wordmark, guides.
   Uses NOIZE tokens only. Never reads a client token.
   ========================================================== */
:root{
  --paper:#ffffff; --mist:#f5f5f7; --grey-line:#e8e8ed; --hairline:#d2d2d7;
  --quiet:#86868b; --mid:#6e6e73; --ink:#1d1d1f; --black:#000;
  --guide:#ff4fa0;
  --ease:cubic-bezier(0.23,1,0.32,1);
  --shell:"Geist", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --outside:#e8e8ed;
  /* control fills (Apple system fills: tints of a neutral grey, never outlines) */
  --fill:rgba(118,118,128,.12); --fill-2:rgba(118,118,128,.2); --fill-3:rgba(118,118,128,.28);

  /* TYPE SCALE. Every piece of shell text uses exactly one step; nothing in between.
     Sizes / line heights: display 52/1.02 · headline 36/1.06 · title 22/1.18 · lead 15/1.5 · small 13/1.5 · mono 11 */
  --t-display: 600 52px/1.02 var(--shell);   --ls-display:-.04em;
  --t-headline: 600 36px/1.06 var(--shell);  --ls-headline:-.035em;
  --t-title: 600 22px/1.18 var(--shell);     --ls-title:-.02em;
  --t-lead: 400 15px/1.5 var(--shell);
  --t-lead-strong: 600 15px/1.5 var(--shell);
  --t-small: 400 13px/1.5 var(--shell);
  --t-small-strong: 600 13px/1.5 var(--shell);
  --t-small-medium: 500 13px/1.5 var(--shell);   /* breadcrumb */
  --t-control: 500 13px/1 var(--shell);
  --t-mono: 400 11px/1.4 var(--mono);
  /* SPACING between text blocks: 8 (a heading and its text) · 12 · 20 (blocks) · 32 · 48 */
  --s-1:8px; --s-2:12px; --s-3:20px; --s-4:32px; --s-5:48px;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --outside:#111113; } }
:root[data-theme="dark"]{ --outside:#111113; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); height:100%; }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; height:100%; background:var(--outside); font-family:var(--shell); color:var(--ink);
  -webkit-font-smoothing:antialiased; overflow:hidden; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* focus: a thin ring in the control's own colour, never the guide pink */
button:focus-visible, input:focus-visible, [contenteditable]:focus-visible{ outline:1.5px solid currentColor; outline-offset:3px; }

/* headings break into balanced lines; paragraphs avoid a one-word last line */
.title, .x-half h2, .pillars h4, .points h4, .rationale h3{ text-wrap:balance; }   /* not the statement: it breaks where the sense does */
.sub, .rationale p, .x-half .body, .points p, .intro, .pillars p{ text-wrap:pretty; }

/* ---------- viewport + canvas: 819 tall, width follows the window (--W, 1456 at 16:9) ---------- */
.viewport{ position:fixed; inset:0; display:grid; place-items:center; overflow:hidden; }
.canvas{ --W:1456px; --Wn:1456; --ui:1; position:absolute; left:50%; top:50%; width:var(--W); height:819px; transform-origin:0 0;
  background:var(--paper); overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.08); }

/* the live page. Zooms into its menu thumbnail (see src/shell/menu.js) */
.page{ position:absolute; inset:0; transform-origin:0 0; overflow:hidden; background:var(--paper); z-index:1; }
.page.zooming{ z-index:20; will-change:transform; transition:transform .62s var(--ease), border-radius .62s var(--ease); }
.page.parked{ visibility:hidden; }
.page.instant, .page.instant *{ transition:none !important; }

/* ---------- wordmark (real NOIZE SVG, currentColor) ---------- */
.wordmark{ color:var(--black); line-height:0; }
/* sized so the cap height (16.3px) and cap top (y 33.7) match the signed-off 23px text wordmark */
.wordmark svg{ display:block; height:17.9px; width:auto; }
.spine .wordmark{ position:absolute; left:33px; top:33.3px; }

/* ---------- rail ---------- */
.rail{ position:absolute; top:0; left:0; bottom:0; width:var(--rail-w,311px); background:var(--paper);
  overflow:hidden; z-index:3; transition:width .7s var(--ease); }
/* the rail's edge line only shows on glass; on a solid rail the change from white to the stage colour
   is the edge (a 1px line on a scaled frame lands between pixels and draws as a soft double line) */
.rail::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:1px; background:transparent; }
.rail.is-full::after{ display:none; }
.rail:not(.is-full){ background:var(--rail-bg, var(--paper)); }   /* a client may tint the side panel (iMotiv8: silver) */
.spine{ position:absolute; left:0; top:0; width:311px; height:819px; }
/* title: the page's heading on a one-fifth rail; a quiet label beside a wider rail's headline */
.title{ position:absolute; left:33px; top:172px; width:254px; margin:0; font:var(--t-title); letter-spacing:var(--ls-title); }
.rail.is-half .title, .rail.is-full .title{ font:var(--t-lead-strong); letter-spacing:0; }
.sub{ position:absolute; left:33px; width:240px; margin:0; font:var(--t-small); color:var(--mid); }
.rationale{ position:absolute; left:33px; top:410px; width:240px; transition:opacity .35s var(--ease); }
.rationale h3{ margin:0 0 var(--s-1); font:var(--t-small-strong); }
.rationale p{ margin:0; font:var(--t-small); color:var(--mid); }
/* CONTROLS, in the Apple manner: soft grey fills, no outlines. Every control is 40px and full radius.
   One option = a filled circle (menu, close). Several = a filled track (previous / next, switchers). */
/* the nav sits on the bottom margin: 33 from the bottom, like 33 from the left and the wordmark 33 from the top */
.nav{ position:absolute; left:33px; bottom:33px; width:254px; height:40px; display:flex; align-items:flex-end; gap:8px; }
.circle{ width:40px; height:40px; border-radius:50%; background:var(--fill); display:grid; place-items:center; transition:background-color .25s var(--ease); }
.circle:hover{ background:var(--fill-2); }
.circle:active{ background:var(--fill-3); }
.circle svg{ width:14px; height:14px; }
.nav .spacer{ flex:1; }
/* chrome is counter-scaled to stay OS-sized (--ui, set in main.js fit); content is not */
#menuBtn{ scale:var(--ui); transform-origin:0 100%; }        /* scale towards the corner, so margins hold at any size */
.nav .track{ scale:var(--ui); transform-origin:100% 100%; }
.track{ display:inline-flex; height:40px; padding:3px; gap:2px; border-radius:999px; background:var(--fill); }
.track button{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; transition:background-color .25s var(--ease), opacity .2s; }
.track button:hover:not([disabled]){ background:var(--paper); box-shadow:0 1px 2px rgba(0,0,0,.1), 0 3px 8px rgba(0,0,0,.06); }
.track button:active:not([disabled]){ background:var(--fill-2); box-shadow:none; }
.track button[disabled]{ opacity:.25; cursor:default; }
.track svg{ width:14px; height:14px; }

/* rail extension (half + full): columns 3 onward, beside the spine */
/* the extension box never takes clicks itself (it spans the rail's height and would cover the nav);
   only its text does, for edit mode */
.ext{ position:absolute; top:0; left:311px; height:819px; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
.rail.is-half .ext, .rail.is-full .ext{ opacity:1; transition-delay:.25s; }
.rail.is-half .ext > *, .rail.is-full .ext > *{ pointer-events:auto; }
.rail.is-half .rationale, .rail.is-full .rationale{ opacity:0; pointer-events:none; }
.x-half{ left:33px; width:min(556px, calc(var(--W) / 2 - 66px)); }   /* one column from column 1, under the page name; positions set in rail.js */
/* breadcrumb (half rail): a quiet one-line "section › page" 12 above the headline. It reads as
   navigation, not as a heading, so it never competes with the headline below it. */
.crumb{ position:absolute; left:33px; top:140.5px; width:520px; margin:0; display:flex; align-items:center; gap:6px;
  font:var(--t-small-medium); color:var(--quiet); white-space:nowrap; overflow:hidden; opacity:0; pointer-events:none; }
.crumb svg{ width:8px; height:8px; flex:none; }
.crumb-page{ color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
.rail.is-half .crumb{ opacity:1; }

/* half rail: the headline is the page's heading, in the title's place (col 1, y 172).
   The page name and subheading step aside; they live in the menu and thumbnails. */
.title, .sub{ transition:opacity .35s var(--ease); }
.rail.is-half .title, .rail.is-half .sub{ opacity:0; pointer-events:none; }
.x-half h2{ position:absolute; top:230px; left:0; width:min(520px, 100%); margin:0; font:var(--t-headline); letter-spacing:var(--ls-headline); }
.x-half .body{ position:absolute; top:290px; left:0; width:min(470px, 100%); margin:0; font:var(--t-lead); color:var(--mid); }
/* points: three side by side, each with its own hairline (the pillar pattern, at Small) */
.points{ position:absolute; top:410px; left:0; width:100%; margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:0 var(--s-3); }
.points li{ border-top:1px solid var(--hairline); padding-top:var(--s-2); }
.points h4{ margin:0 0 var(--s-1); font:var(--t-small-strong); }
.points p{ margin:0; font:var(--t-small); color:var(--mid); }
.x-full{ width:calc(var(--W) - 344px); }   /* columns 3 to 10: 1112 at 16:9 */
/* statement at y 170 so its cap height lines up with the page-name label's (both ~y 178) */
.x-full .statement{ position:absolute; top:170px; left:0; width:min(973px, 100%); margin:0; font:var(--t-display); letter-spacing:var(--ls-display); }
.x-full .intro{ position:absolute; top:392px; left:0; width:calc(50% - 36px); margin:0; font:var(--t-lead); color:var(--mid); }
.x-full .intro-2{ left:50%; width:calc(50% - 56px); }   /* 520 / 556 / 500 at 16:9 */
.pillars{ position:absolute; top:548px; left:0; width:100%; display:grid; grid-template-columns:repeat(4, 1fr); margin:0; padding:0; list-style:none; }
.pillars li{ border-top:1px solid var(--hairline); padding:var(--s-2) 0 0; margin-right:28px; }
.pillars h4{ margin:0 0 var(--s-1); font:var(--t-lead-strong); }
.pillars p{ margin:0; font:var(--t-small); color:var(--mid); }

/* the edge tab: one collapse control on the rail's right edge, vertically centred.
   It rides the edge as the rail moves (same 0.7s ease) and flips its arrow when collapsed. */
.edge-tab{ position:absolute; left:calc(var(--rail-w,311px) - 3px); top:364.5px; width:25px; height:90px; border-radius:0 10px 10px 0;
  background:var(--paper); color:var(--ink); display:grid; place-items:center; z-index:4; padding-left:3px;
  /* seamless with the rail: overlaps the rail edge by 3px (1px showed a seam once the frame is scaled),
     and only the protruding side casts a shadow */
  box-shadow:0 2px 10px rgba(0,0,0,.08); clip-path:inset(-14px -14px -14px 0);
  scale:var(--ui); transform-origin:0 50%;
  transition:left .7s var(--ease), opacity .3s var(--ease), color .2s; }
.edge-tab svg{ width:10px; height:10px; transition:transform .7s var(--ease); }
.edge-tab:hover{ color:var(--mid); }
.page.is-collapsed .edge-tab svg{ transform:rotate(180deg); }
.edge-tab[hidden]{ display:grid; opacity:0; pointer-events:none; }

/* ---------- overlay (glass) rail: full-bleed stages ----------
   The rail floats over the stage as frosted glass; white type, glass controls. NOIZE recedes,
   the client's imagery does the talking. */
.rail{ transition:width .7s var(--ease), background-color .45s var(--ease); }
.page.is-overlay .rail{ background:rgba(16,18,22,.26); -webkit-backdrop-filter:blur(24px) saturate(1.2); backdrop-filter:blur(24px) saturate(1.2); color:#fff; }
.page.is-overlay .rail::after{ background:rgba(255,255,255,.16); }
.page.is-overlay .spine .wordmark{ color:#fff; }
.page.is-overlay .sub, .page.is-overlay .rationale p, .page.is-overlay .crumb{ color:rgba(255,255,255,.78); }
.page.is-overlay .crumb-page{ color:#fff; }
.page.is-overlay .circle, .page.is-overlay .nav .track{ background:rgba(255,255,255,.16); color:#fff; }
.page.is-overlay .circle:hover{ background:rgba(255,255,255,.26); }
.page.is-overlay .track button:hover:not([disabled]){ background:rgba(255,255,255,.24); box-shadow:none; }
/* glass tab: two translucent layers can't overlap without a darker seam, so the tab meets the rail
   edge exactly and the rail's edge line breaks where the tab sits (centre y 409.5, 90 tall, × --ui) */
.page.is-overlay .edge-tab{ left:var(--rail-w,311px); padding-left:0; background:rgba(16,18,22,.26); color:#fff; -webkit-backdrop-filter:blur(24px) saturate(1.2); backdrop-filter:blur(24px) saturate(1.2); box-shadow:none; }
.page.is-overlay .rail::after{ --tab-a:calc(409.5px - 45px * var(--ui, 1)); --tab-b:calc(409.5px + 45px * var(--ui, 1));
  -webkit-mask:linear-gradient(#000 var(--tab-a), transparent var(--tab-a) var(--tab-b), #000 var(--tab-b));
  mask:linear-gradient(#000 var(--tab-a), transparent var(--tab-a) var(--tab-b), #000 var(--tab-b)); }

/* ---------- guides overlay ---------- */
.guides{ position:absolute; inset:0; z-index:9; pointer-events:none; opacity:0; transition:opacity .25s; }
.canvas.show-guides .guides{ opacity:1; }

/* ---------- edit mode ---------- */
.canvas.editing [data-edit]{ outline:1px dashed var(--guide); outline-offset:4px; cursor:text; }
.edit-flag{ position:absolute; left:50%; top:14px; translate:-50% 0; scale:var(--ui); transform-origin:50% 0; z-index:11; background:var(--ink); color:var(--paper);
  font:var(--t-small); padding:8px 14px; border-radius:99px; display:none; }
.canvas.editing .edit-flag{ display:block; }

/* ---------- page swap ---------- */
.swap-out [data-swap]{ opacity:0 !important; transition:opacity .16s !important; }
[data-swap]{ transition:opacity .35s var(--ease); }

/* ---------- touch: feel like the OS, not a web page ----------
   44pt minimum targets, a quiet press-in, no tap flash, no stuck hover states on touch. */
button{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
@media (pointer:coarse){
  button:active{ transform:scale(.96); transition:transform .12s var(--ease); }
}
@media (hover:none){
  .circle:hover{ background:var(--fill); }
  .track button:hover:not([disabled]){ background:none; box-shadow:none; }
  .menu .pill:hover{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){ *{ transition-duration:.01ms !important; transition-delay:0s !important; animation-duration:.01ms !important; } }

/* the save note (src/core/edits.js), bottom right, chrome-sized */
.save-note{ position:fixed; right:16px; bottom:16px; z-index:60; padding:8px 14px; border-radius:99px; background:var(--ink); color:var(--paper);
  font:var(--t-control); opacity:0; translate:0 8px; pointer-events:none; transition:opacity .3s var(--ease), translate .4s var(--ease); }
.save-note.is-on{ opacity:1; translate:0 0; }
.save-note[data-state="error"]{ background:#b4232c; }
.edit-key{ border:0; border-radius:18px; padding:24px; width:min(360px, 90vw); font:var(--t-small); color:var(--ink); box-shadow:0 30px 60px -20px rgba(0,0,0,.4); }
.edit-key::backdrop{ background:rgba(0,0,0,.35); }
.edit-key p{ margin:0 0 12px; }
.edit-key input{ width:100%; height:40px; padding:0 14px; border:0; border-radius:99px; background:var(--mist); font:var(--t-small); }
.edit-key div{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.edit-key button{ height:36px; padding:0 16px; border:0; border-radius:99px; background:var(--grey-line); font:var(--t-control); cursor:pointer; }
.edit-key button.primary{ background:var(--ink); color:var(--paper); }