/* =========================================================================
   MarinovOS — shell.css
   Owner: shell worker. Menu bar, wallpaper, desktop identity+stage, dock,
   window manager chrome, popovers, settings/about, mobile sheets.
   Tokens below are the single source of truth — app modules consume them.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  --blue-900:#0f2f8f; --blue-700:#1747c8; --blue-600:#1d5be6; --blue-500:#2f73f0; --blue-300:#8fb5ff; --blue-100:#e3edff;
  --ink:#101828; --ink-2:#344054; --ink-3:#667085; --line:#e4e7ec; --line-2:#d0d5dd;
  --paper:#fbfcfe; --paper-2:#f4f6fa;
  --amber:#f4c542; --amber-ink:#5b4300;
  --ok:#1f8f5f; --warn:#b5620e; --danger:#c0392b;
  /* Glass material (web approximation of a translucent chrome material — strict
     review "How to add liquid glass"): one blur per surface, a low fill, a thin
     directional edge light (upper-left key light), one soft outer shadow.
     Content surfaces stay opaque paper; only menu bar, dock, window bezels,
     popovers and the stage frames use these. */
  --glass:rgba(232,243,255,.22); --glass-strong:rgba(244,248,255,.78); --glass-line:rgba(255,255,255,.38);
  --glass-bezel:rgba(216,236,255,.16); --glass-blur:12px; --glass-sat:1.22;
  --glass-edge:linear-gradient(145deg,rgba(255,255,255,.82),rgba(237,247,255,.26) 25%,rgba(255,255,255,.08) 58%,rgba(238,249,255,.56));
  --glass-shadow:0 16px 40px rgba(8,34,94,.18),0 2px 5px rgba(8,34,94,.12);
  --glass-surface:linear-gradient(155deg,rgba(255,255,255,.18),rgba(255,255,255,.02) 48%,rgba(183,222,255,.09));
  --glass-inner:inset 0 1px 1px rgba(255,255,255,.45),inset 1px 0 2px rgba(255,255,255,.15),inset 0 -2px 3px rgba(20,70,142,.14);
  --chrome-paper:rgba(240,247,255,.22);
  --radius-xl:22px; --radius-lg:16px; --radius-md:10px; --radius-sm:6px;
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",Menlo,Consolas,monospace;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-fast:140ms; --dur-base:260ms; --dur-slow:480ms;
  --wall-base:#2b6cf0;
  --identity-w:clamp(340px,30vw,460px);
  color-scheme:light;
}
/* Effective motion state. shell.js publishes data-motion="reduced" when either
   the site Setting or the OS preference asks for it; every transition and
   animation in the shell, the dock, the sheets and the app stylesheets reads
   these tokens, so one attribute quiets all of them (strict review P2). The
   media query below is the no-JS fallback for the same state. */
:root[data-motion="reduced"]{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}
@media (prefers-reduced-motion: reduce){
  :root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}
}
:root[data-theme="dark"]{
  --wall-base:#0f2a6e;
  --glass:rgba(14,26,66,.46); --glass-strong:rgba(18,32,80,.74); --glass-line:rgba(160,184,255,.22);
  --glass-bezel:rgba(14,26,66,.26);
  --glass-edge:linear-gradient(135deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.12) 28%,rgba(255,255,255,.02) 55%,rgba(255,255,255,.09) 100%);
  --glass-shadow:0 14px 36px rgba(2,8,32,.5), 0 1px 2px rgba(2,8,32,.4);
  --glass-surface:linear-gradient(155deg,rgba(194,219,255,.10),rgba(17,29,58,.03) 48%,rgba(96,145,218,.08));
  --glass-inner:inset 0 1px 1px rgba(223,237,255,.2),inset 1px 0 2px rgba(255,255,255,.06),inset 0 -2px 3px rgba(0,8,26,.22);
  --chrome-paper:rgba(13,24,49,.36);
  --paper:#141a2b; --paper-2:#101526;
  --ink:#e8edf8; --ink-2:#c3cbe0; --ink-3:#8891ad; --line:#2a3450; --line-2:#384268;
  color-scheme:dark;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--wall-base);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
button:disabled{cursor:default;opacity:.55}
a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr-live{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.skiplink{position:fixed;left:12px;top:-100px;z-index:1000;padding:10px 16px;background:var(--paper);color:var(--ink);border-radius:var(--radius-sm);transition:top var(--dur-fast) var(--ease-out)}
.skiplink:focus{top:12px}

/* ---------- Shared component classes ---------- */
/* Bare .btn is the secondary button: paper-2 fill, hairline border. Named
   modifiers (.primary/.glass/.amber/.quiet) restore their own size + look
   below so this base change doesn't shift their appearance. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap;
  background:var(--paper-2);border:1px solid var(--line-2);color:var(--ink);text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
a.btn{text-decoration:none}
.btn:hover{transform:translateY(-1px);background:var(--blue-100);border-color:var(--blue-300)}
.btn:active{transform:translateY(1px)}
.btn.primary{height:44px;padding:0 22px;font-size:15px;background:var(--blue-600);color:#fff;border:0;box-shadow:0 1px 2px rgba(9,36,110,.22),0 4px 12px rgba(23,71,200,.16)}
.btn.primary:hover{background:var(--blue-700);border-color:transparent}
.btn.primary:active{transform:translateY(0)}
.btn.glass{height:44px;padding:0 22px;font-size:15px;background:var(--glass);color:var(--ink);border:1px solid var(--glass-line);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.btn.glass:hover{background:var(--glass);border-color:var(--glass-line)}
.btn.glass:active{transform:translateY(0)}
.btn.quiet{background:none;border:0;height:auto;padding:0;color:var(--ink-2);text-underline-offset:4px;text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color var(--dur-fast)}
.btn.quiet:hover{background:none;border-color:transparent;transform:none;text-decoration-color:currentColor}
.btn.quiet:active{transform:none}
.btn.amber{height:44px;padding:0 20px;font-size:15px;background:var(--amber);color:var(--amber-ink);border:0;box-shadow:0 1px 2px rgba(91,67,0,.18),0 4px 12px rgba(244,197,66,.22)}
.btn.amber:hover{filter:brightness(1.04);background:var(--amber);border-color:transparent}
.btn.amber:active{transform:translateY(0)}
.btn[disabled]{transform:none;box-shadow:none}

.seg{display:inline-flex;padding:3px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;gap:2px}
.seg>button{height:34px;padding:0 16px;border-radius:999px;font-size:13px;color:var(--ink-2)}
.seg>button[aria-pressed="true"]{background:var(--blue-600);color:#fff}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tabs>button[role="tab"]{height:40px;padding:0 16px;font-size:14px;color:var(--ink-3);border-bottom:2px solid transparent}
.tabs>button[role="tab"][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--blue-600)}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5)}
.note{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:13px;color:var(--ink-2);line-height:1.5}
.label-demo{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.label-demo::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--amber)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;color:var(--ink)}
table.table{width:100%;border-collapse:collapse;font-size:14px}
table.table th{position:sticky;top:0;background:var(--paper);text-align:left;color:var(--ink-3);font-weight:500;padding:10px 12px;border-bottom:1px solid var(--line)}
table.table td{padding:10px 12px;border-bottom:1px solid var(--line)}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px}
.field label{color:var(--ink-2)}
.field input,.field select{height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--paper)}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--blue-100);color:var(--blue-700);font-size:12px;font-weight:500}
:root[data-theme="dark"] .tag{background:rgba(143,181,255,.16);color:var(--blue-300)}

.ico{display:inline-block;vertical-align:middle}

/* ---------- Menu bar ---------- */
#menubar{position:fixed;inset:0 0 auto 0;height:40px;z-index:400;display:flex;align-items:center;gap:2px;padding:0 12px;
  background:var(--glass);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom:1px solid var(--glass-line);box-shadow:0 1px 0 rgba(255,255,255,.28) inset}
.mb-item{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;font-size:13px;color:var(--ink);transition:background var(--dur-fast)}
:root[data-theme="dark"] #menubar,:root[data-theme="dark"] .mb-item{color:var(--ink)}
.mb-item:hover{background:rgba(255,255,255,.28)}
:root[data-theme="dark"] .mb-item:hover{background:rgba(255,255,255,.1)}
.mb-brand{font-weight:600;gap:8px;padding-left:8px}
.brandmark{width:22px;height:22px;border-radius:6px;background:var(--blue-600);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-family:var(--font-sans);box-shadow:0 1px 2px rgba(0,0,0,.25) inset,0 2px 6px rgba(15,47,143,.4)}
.brand-label{font-size:13px}
.mb-spacer{flex:1}
.mb-sound{gap:8px}
.mb-ico{width:16px;height:16px;display:inline-flex}
.mb-clock{font:12px var(--font-mono);color:var(--ink-2);padding:0 8px}

/* ---------- Wallpaper (no images) — a light study rather than geometry:
   an upper-left key light, one broad soft ribbon of light crossing the field,
   two blurred floor pools, a deep lower-right vignette and a faint top wash.
   No hard-edged bands (strict review §3). All static; nothing animates. ---------- */
.wallpaper{position:fixed;inset:0;background:var(--wall-base);overflow:hidden;z-index:0}
.wp-light{position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 14% 78%,rgba(173,219,255,.45),transparent 42%),
    radial-gradient(ellipse at 73% 10%,rgba(129,207,255,.32),transparent 46%),
    radial-gradient(ellipse at 28% 35%,rgba(10,68,170,.18),transparent 48%)}
.wp-ribbon{position:absolute;left:-14%;top:-30%;width:84vw;height:74vh;transform:rotate(-22deg);transform-origin:center;
  filter:blur(56px);
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.17) 40%, rgba(255,255,255,.07) 62%, rgba(255,255,255,0) 100%)}
.wp-pool{position:absolute;border-radius:50%;filter:blur(36px)}
.wp-pool-a{left:-8%;bottom:4%;width:56vw;height:14vh;transform:rotate(-18deg);background:rgba(198,235,255,.28)}
.wp-pool-b{left:30%;bottom:-3%;width:48vw;height:14vh;transform:rotate(-12deg);background:rgba(148,208,255,.22)}
.wp-vignette{position:absolute;inset:0;
  background:radial-gradient(1200px 900px at 94% 100%, rgba(15,47,143,.62), transparent 68%)}
.wp-top{position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 36%)}
:root[data-theme="dark"] .wp-light{opacity:.5}
:root[data-theme="dark"] .wp-ribbon{opacity:.45}
:root[data-theme="dark"] .wp-pool{opacity:.5}
:root[data-theme="dark"] .wp-vignette{background:radial-gradient(1200px 900px at 94% 100%, rgba(2,8,32,.7), transparent 68%)}
[data-transparency="reduced"] .wp-light,[data-transparency="reduced"] .wp-ribbon,[data-transparency="reduced"] .wp-pool,[data-transparency="reduced"] .wp-top{display:none}
@media (prefers-reduced-transparency: reduce){
  .wp-light,.wp-ribbon,.wp-pool,.wp-top{display:none}
}

/* ---------- Desktop grid ---------- */
/* Height budget (Fable audit pass, corrected): content area = viewport − menubar(40) −
   dock band. Dock band = real dock height(109) + 18px bottom offset + clearance.
   #main (the HOME STAGE only) keeps a 16px clearance above the dock — its bottom
   inset (143) is that exact figure, so anything that simply stays inside #main
   automatically respects the 16px stage clearance. #windows (correction 2) gets a
   tighter 8px clearance instead — see its own inset below — so window bodies get
   the extra ~26px of height the audit flagged as too tight (Operations/Records
   bodies were ~454px at 1280x720; the 8px allowance lifts that to >=480px). */
#main{position:fixed;inset:40px 0 143px 0;overflow:hidden;z-index:1}
/* Short viewports scroll the home deliberately rather than deleting the
   record: the grid keeps the composition's minimum height and #main gains a
   scrollbar only when the viewport cannot afford it. */
@media (min-width:1025px){
  #main{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
  .desktop-grid{min-height:480px}
  /* Windows are pinned horizontally/at top to the same rect as #main so a
     scrolled home can never drag them out of place, but the bottom inset is
     shallower than #main's (135 vs 143 = dock height 109 + 18px offset + 8px
     clearance, vs #main's 16px) — windows are allowed to sit closer to the
     dock than the home stage is (correction 2). shell.js's contentRect()
     measures #windows directly (not #main) so window bounds always reflect
     this rect, not the home stage's. */
  #windows{position:fixed;inset:40px 0 135px 0}
}
.desktop-grid{position:relative;height:100%;width:100%}

.identity{position:absolute;left:48px;top:50%;transform:translateY(-50%);width:var(--identity-w);color:#fff;z-index:2;
  transform-origin:top left;transition:transform var(--dur-slow) var(--ease-out)}
.identity-eyebrow{font-size:13px;color:rgba(255,255,255,.8);margin-bottom:20px;letter-spacing:.02em}
.identity-name{font-weight:700;font-size:clamp(56px,min(8.6vw,13.5vh),128px);line-height:.92;letter-spacing:-.04em;color:#fff;margin-bottom:22px}
.identity-tagline{font-family:var(--font-serif);font-weight:400;font-size:clamp(19px,2.6vh,30px);line-height:1.2;color:#fff;margin-bottom:20px}
.identity-support{font-size:16px;line-height:1.5;color:rgba(255,255,255,.85);max-width:34ch;margin-bottom:32px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:opacity var(--dur-slow) var(--ease-out) 0s,visibility 0s linear 0s}
.identity-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-height:44px;
  transition:opacity var(--dur-slow) var(--ease-out) 0s,visibility 0s linear 0s}
.identity-actions .btn.quiet{color:rgba(255,255,255,.9)}
.identity-actions .btn.glass{color:#fff}

/* Active-work mode: body.has-window is toggled by shell.js while any desktop
   window is visible. Identity settles to a compact top-left mark; the support
   line and action row retire (kept in the DOM, hidden after their fade). */
body.has-window .identity{transform:translateY(-50%) scale(.72)}
body.has-window .identity-support,body.has-window .identity-actions{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out) 0s,visibility 0s linear var(--dur-slow)}


/* ---------- Stage: the featured-project composition ----------
   Roughly 30% identity / 65% project area with a 40px gutter. In front, the
   selected project sits inside a Records frame: the record object beside a
   real capture of the delivered website, then its name, one line and the one
   amber action. Behind it, offset up and to the left, a Signal frame carries
   the analytics entry: heading, synthetic-data label, one real comparison
   from the demo and its own action — all of it inside the strip (--peek) that
   the front frame never covers. Below 1200px the overlap collapses: the
   Signal frame becomes a strip above the Records frame so no text is ever
   covered (strict review §1, §2, §4). */
.stage{position:absolute;left:calc(48px + var(--identity-w) + 40px);right:48px;top:14px;bottom:10px;z-index:2;
  --peek:180px;--front-top:46px;--rec:118px;--site-max:none;
  display:flex;align-items:center;align-items:safe center;justify-content:flex-end;
  transition:opacity var(--dur-slow) var(--ease-out)}
.stage-group{position:relative;width:100%;max-width:980px;padding-top:var(--front-top)}

/* Shared frame for the two stage objects: the same bezel language as .win. */
.stage-win{position:relative;isolation:isolate;padding:6px;border-radius:var(--radius-xl);
  background:var(--glass-surface),var(--glass-bezel);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:var(--glass-shadow),var(--glass-inner)}
.stage-win::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:var(--glass-edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.stage-win-bar{height:36px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:var(--chrome-paper);color:var(--ink);font-size:13px}
.stage-win-dots{display:inline-flex;gap:6px;margin-right:2px}
.stage-win-dots i{width:10px;height:10px;border-radius:50%;background:var(--line-2);display:block}
.stage-win-icon{width:16px;height:16px;flex:none;color:var(--blue-600);display:inline-flex}
:root[data-theme="dark"] .stage-win-icon{color:var(--blue-300)}
.stage-win-name{font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.stage-win-body{position:relative;background:var(--paper);border-top:1px solid var(--line);border-radius:0 0 var(--radius-lg) var(--radius-lg)}

/* --- Records frame (front) --- */
.stage-records{position:relative;z-index:2;margin-left:auto;width:calc(100% - var(--peek))}
.stage-records-body{padding:18px 18px 16px}
.stage-records-row{display:flex;align-items:center;gap:16px}
/* The shared record object reserves 1.72S x 1.16S for the drawn disc and its
   ground shadow and clamps S to whatever box it is given. */
.record-host{position:relative;width:calc(1.72 * var(--rec));height:calc(1.16 * var(--rec));flex:none}
.stage-site{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding:0;text-align:left;cursor:pointer;
  border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);background:var(--paper-2);
  box-shadow:0 8px 22px rgba(9,36,110,.14);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.stage-site:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(9,36,110,.18)}
.stage-site:active{transform:translateY(0)}
.stage-site-bar{height:24px;flex:none;display:flex;align-items:center;gap:8px;padding:0 10px;background:var(--paper-2);border-bottom:1px solid var(--line);
  font:11px var(--font-mono);color:var(--ink-3)}
.stage-site-dots{display:inline-flex;gap:4px}
.stage-site-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);display:block}
.stage-site-shot{display:block;position:relative;aspect-ratio:16/10;max-height:var(--site-max);overflow:hidden;background:#121212}
.stage-site-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.stage-site-shot.shot-missing::after{content:'Website capture';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:13px}
.stage-records-caption{margin-top:14px;color:var(--ink)}
.stage-eyebrow{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:4px}
.stage-title{font-family:var(--font-serif);font-weight:500;font-size:28px;line-height:1.1;color:var(--ink);margin-bottom:4px}
.stage-line{font-size:14px;line-height:1.45;color:var(--ink-2);margin-bottom:12px}
.stage-record-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:44px}
.stage-record-actions .btn.quiet{color:var(--ink-2)}
.stage-credit{font-size:12px;color:var(--ink-3);margin-left:auto}

/* CSS fallback — the same object-space constants os/record-object.js uses
   (sleeve at .02S/.06S, disc diameter .94S, disc centre .98S + .24 * drawn),
   held at the same resting draw, so the composition and the screenshots match
   whether or not the shared object is available. */
.record-fallback{position:absolute;inset:0;--draw:.55}
.record-fallback .rec-disc{position:absolute;
  left:calc((.98 + .24 * var(--draw) - .47) * var(--rec));top:calc(.09 * var(--rec));
  width:calc(.94 * var(--rec));height:calc(.94 * var(--rec));border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #1c4fc0 0 11%, #0f2f8f 11% 14%, #060709 14.5% 100%),
    repeating-radial-gradient(circle at 50% 50%, #0b0c0f 0 2.5px, #18191d 2.5px 5px);
  box-shadow:0 22px 40px rgba(0,0,0,.42), 0 6px 14px rgba(0,0,0,.28)}
.record-fallback .rec-disc::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;
  background:var(--paper-2);transform:translate(-50%,-50%)}
.record-fallback .rec-sleeve{position:absolute;left:calc(.02 * var(--rec));top:calc(.06 * var(--rec));
  width:var(--rec);height:var(--rec);border-radius:10px;overflow:hidden;
  background:#f3efe6;border:1px solid rgba(0,0,0,.06);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.1), inset 0 0 0 1px rgba(255,255,255,.35), 0 18px 34px rgba(9,36,110,.22)}
.record-fallback .rec-sleeve img{position:absolute;left:5.5%;top:5.5%;width:89%;height:89%;object-fit:cover;border-radius:4px;z-index:1}
.record-fallback .rec-sleeve-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:16px;color:var(--ink-2);z-index:0}
.record-fallback .rec-ground{position:absolute;left:4%;right:2%;bottom:calc(.02 * var(--rec));height:16px;
  background:radial-gradient(ellipse at center, rgba(9,20,50,.34), transparent 72%);filter:blur(6px)}

/* --- Signal frame (behind) --- */
.stage-signal{position:absolute;left:0;top:0;z-index:1;width:min(360px,100%)}
.stage-signal-body{padding:16px;min-height:300px}
/* Everything readable lives in the strip the front frame never covers. */
.stage-signal-lead{width:calc(var(--peek) - 24px);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.stage-signal-title{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.15;color:var(--ink)}
.stage-signal-line{font-size:13px;line-height:1.4;color:var(--ink-2)}
.stage-signal-compare{width:100%;font-size:12px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:8px}
.stage-signal-post{font-weight:600;color:var(--ink);font-size:12.5px;line-height:1.3;margin-bottom:6px}
.stage-signal-rows{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;font-variant-numeric:tabular-nums;margin:0;font-size:11.5px}
.stage-signal-rows dt{display:flex;align-items:center;gap:6px;color:var(--ink-2);white-space:nowrap}
.stage-signal-rows dd{margin:0;text-align:right;color:var(--ink);white-space:nowrap}
.stage-signal-rows dd.is-unknown{color:var(--ink-3);font-style:italic}
.stage-signal-mark{width:8px;height:8px;border-radius:2px;flex:none;display:inline-block}
.stage-signal-mark.tt{background:#111}
.stage-signal-mark.ig{background:#c0397f}
.stage-signal-mark.fb{background:#1b74e4}
.stage-signal-units{font-size:11px;color:var(--ink-3);margin-top:6px}
.stage-signal .btn.primary{margin-top:2px}

/* Active-work mode quiets the whole composition; nothing is deleted. */
body.has-window .stage-group{opacity:.35;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .identity,.identity-support,.identity-actions,.stage,.stage-site{transition-duration:0s !important}
}

/* Laptop widths 1025–1199px: the same composition at tighter proportions.
   The Signal column keeps only heading, label, line and a compact action —
   the comparison list needs more width than the uncovered strip offers, so
   it is withheld rather than covered (no text is ever under the front frame). */
@media (min-width:1025px) and (max-width:1199px){
  .stage{--peek:150px;--front-top:40px;--rec:96px;--site-max:200px;left:calc(48px + var(--identity-w) + 32px);right:40px}
  .stage-signal-body{min-height:240px;padding:14px}
  .stage-signal-lead{width:calc(var(--peek) - 20px);gap:8px}
  .stage-signal-title{font-size:17px}
  .stage-signal-line{font-size:12.5px}
  .stage-signal-compare{display:none}
  .stage-signal .btn.primary{height:40px;padding:0 14px;font-size:14px}
  .stage-records-body{padding:14px 16px 14px}
  .stage-records-row{gap:12px}
  .stage-title{font-size:24px}
  .stage-line{font-size:13px}
}
/* 1200–1366px: the overlap composition at laptop proportions. */
@media (min-width:1200px) and (max-width:1366px){
  .stage{--peek:180px;--rec:118px;--site-max:240px}
}
@media (min-width:1367px){
  .stage{--peek:212px;--front-top:52px;--rec:150px;top:20px;bottom:16px}
  .stage-records-body{padding:20px 20px 18px}
  .stage-records-row{gap:18px}
  .stage-signal-body{padding:18px}
  .stage-signal-lead{width:calc(var(--peek) - 30px)}
  .stage-signal-title{font-size:20px}
}
@media (min-width:1600px){
  .stage{--rec:168px;--peek:232px}
}
/* Short desktop viewports (e.g. 1280x720 at a larger zoom): the home may
   scroll rather than delete the composition — see #main above. */
@media (min-width:1025px) and (max-height:700px){
  .stage{--rec:104px;--front-top:40px}
  .stage-records-body{padding:14px 16px 14px}
  .stage-title{font-size:24px}
}

/* ---------- Tablet (761px–1024px): stacked home, windows open expanded ---------- */
@media (min-width: 761px) and (max-width: 1024px){
  #main{overflow-y:auto;overflow-x:hidden}
  .desktop-grid{height:auto;min-height:100%;display:flex;flex-direction:column}
  #windows{position:fixed;inset:40px 0 112px 0}

  .identity{position:static;transform:none;left:auto;top:auto;width:100%;max-width:none;padding:56px 40px 8px;box-sizing:border-box}
  .identity-name{font-size:clamp(56px,9vw,84px)}

  .stage{position:static;transform:none;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:none;
    --peek:0px;--front-top:0px;--rec:124px;
    display:block;padding:20px 40px 56px;box-sizing:border-box}
  .stage-group{max-width:none;padding-top:0}
  .stage-signal{position:relative;width:100%;margin-bottom:14px}
  .stage-signal-body{min-height:0;padding:12px 16px}
  .stage-signal-lead{width:100%;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 16px}
  .stage-signal-line{flex:1 1 220px}
  .stage-signal-compare{display:none}
  .stage-signal .btn.primary{margin-top:0}
  .stage-records{width:100%}
}

/* ---------- Windows layer ----------
   Material treatment (Fable audit pass): the whole window is a 6px glass
   bezel — padding on .win carries that ring around both the title bar and
   the body, so the title bar reads as part of the frame rather than a
   separate flat strip. Radius 22 outside (.win) / 16 inside (titlebar top
   corners, body bottom corners). */
/* position/inset are intentionally NOT set here: #windows is nested inside
   #main, and the two breakpoint rules above (which set position:fixed with a
   viewport-relative inset) must win the cascade for their own inset values to
   take effect — an earlier version of this rule set position:absolute;inset:0
   here, which (same specificity, declared after the @media blocks) silently
   overrode both of them so #windows always just filled #main's own box. Every
   viewport where #windows is visible (>=761px) is covered by one of the two
   breakpoint rules; below that #windows is display:none. */
#windows{z-index:5;pointer-events:none}
/* One backdrop per window. The title bar transmits that backdrop; the body
   stays opaque. A fine edge and shallow inner light keep the material quiet
   at rest, matching the approved glass-v4 direction. */
.win{position:absolute;pointer-events:auto;display:flex;flex-direction:column;padding:6px;border-radius:var(--radius-xl);overflow:hidden;
  background:var(--glass-surface),var(--glass-bezel);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:var(--glass-shadow),var(--glass-inner);border:0;will-change:transform,opacity}
.win::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:4;
  background:var(--glass-edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.win-titlebar{height:44px;flex:none;display:flex;align-items:center;padding:0 14px;gap:10px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:var(--chrome-paper);color:var(--ink);cursor:grab}
.win-titlebar:active{cursor:grabbing}
.win-btngroup{display:flex;gap:6px;flex:none}
.win-btn{width:28px;height:28px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);transition:background var(--dur-fast)}
.win-btn:hover{background:var(--blue-100);border-color:var(--blue-300)}
:root[data-theme="dark"] .win-btn:hover{background:rgba(143,181,255,.18)}
.win-btn .ico{width:14px;height:14px}
.win-titletext{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--ink-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.win-titletext .ico{width:16px;height:16px;flex:none;color:var(--ink-3)}
.win-more{position:relative;flex:none}
.win-morebtn{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2)}
.win-morebtn:hover{background:var(--blue-100)}
.win-moremenu{position:absolute;top:34px;right:0;min-width:180px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--glass-shadow);padding:6px;z-index:10}
.win-moremenu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:var(--radius-sm);font-size:13px}
.win-moremenu button:hover{background:var(--paper-2)}
.win-body{flex:1;min-height:0;overflow:auto;background:var(--paper);position:relative;border-top:1px solid var(--line);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.win:not(.win-focused) .win-titlebar{color:var(--ink-3)}
.win.win-opening{animation:winOpen var(--dur-slow) var(--ease-out) both}
@keyframes winOpen{from{opacity:0;transform:scale(.2) translate(var(--origin-x,0),var(--origin-y,0))}to{opacity:1;transform:scale(1) translate(0,0)}}
.win.win-closing{animation:winClose var(--dur-base) var(--ease-out) both}
@keyframes winClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.92)}}
.win.win-minimizing{animation:winMinimize var(--dur-base) var(--ease-out) both;pointer-events:none}
@keyframes winMinimize{from{opacity:1;transform:scale(1) translate(0,0)}to{opacity:0;transform:scale(.15) translate(var(--dock-x,0),var(--dock-y,0))}}
.win.win-hidden{display:none}

.app-placeholder{display:flex;align-items:center;justify-content:center;height:100%;padding:40px;text-align:center}
.app-placeholder .note{max-width:40ch}

/* ---------- Dock ----------
   Glass tray (one blur, edge ring, one shadow); white tiles with a shallow
   relief carry the cobalt icon family; dark 12px labels in the light theme. */
#dock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:400;
  background:var(--glass-surface),var(--glass);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:0;border-radius:26px;box-shadow:var(--glass-shadow),var(--glass-inner);padding:10px 12px 7px;isolation:isolate}
#dock::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:var(--glass-edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* Pointer-driven reflection (shell.js sets --sx/--sy in requestAnimationFrame
   while hovered; nothing loops). */
#dock::after,#menubar::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(240px 150px at var(--sx,30%) var(--sy,0%), rgba(255,255,255,.22), transparent 70%);
  transition:opacity var(--dur-base) var(--ease-out)}
#dock.is-lit::after,#menubar.is-lit::after{opacity:1}
:root[data-motion="reduced"] #dock::after,:root[data-motion="reduced"] #menubar::after{opacity:0 !important}
.dock-items{position:relative;z-index:1;display:flex;align-items:flex-end;gap:6px}
.dock-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:64px;padding:6px 4px 6px;border-radius:var(--radius-md);
  transition:transform var(--dur-fast) var(--ease-out)}
.dock-item:hover{transform:translateY(-3px)}
.dock-item:active{transform:translateY(0)}
.dock-icon{width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#ffffff 0%,#eef3fd 100%);border:1px solid rgba(9,36,110,.12);color:var(--blue-700);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(9,36,110,.05),0 1px 2px rgba(9,36,110,.14);
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.dock-item:hover .dock-icon{border-color:rgba(9,36,110,.2)}
:root[data-theme="dark"] .dock-icon{background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.10));color:var(--blue-300);border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.3)}
.dock-icon .ico{width:27px;height:27px}
.dock-icon-fallback{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.5)}
.dock-label{font-size:12px;font-weight:500;color:var(--ink);letter-spacing:.005em}
:root[data-theme="dark"] .dock-label{color:var(--ink)}
.dock-item .dock-dot{width:4px;height:4px;border-radius:50%;background:var(--ink-3);opacity:0;margin-top:-2px;transition:opacity var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.dock-item.is-open .dock-dot{opacity:.55}
/* Active tile (current view — desktop or the focused app): blue-100 body,
   grounded amber dot, matching the reference dock's single active mark. */
.dock-item[aria-pressed="true"] .dock-icon{background:linear-gradient(180deg,#eef3ff 0%,var(--blue-100) 100%);border-color:rgba(29,91,230,.28)}
:root[data-theme="dark"] .dock-item[aria-pressed="true"] .dock-icon{background:rgba(143,181,255,.22)}
.dock-item[aria-pressed="true"] .dock-dot{opacity:1;background:var(--amber)}

/* ---------- Popovers ---------- */
.popover{position:fixed;top:46px;min-width:220px;background:var(--glass-strong);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:0;border-radius:var(--radius-lg);box-shadow:var(--glass-shadow);padding:8px;z-index:500}
.popover::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--glass-edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.popover-wide{min-width:280px}
.popover button[role="menuitem"],.popover a.popover-link{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:var(--radius-sm);font-size:14px;color:var(--ink);text-decoration:none}
.popover button[role="menuitem"]:hover,.popover a.popover-link:hover{background:rgba(255,255,255,.55)}
:root[data-theme="dark"] .popover button[role="menuitem"]:hover,:root[data-theme="dark"] .popover a.popover-link:hover{background:rgba(255,255,255,.1)}
.popover-divider{height:1px;background:var(--line);margin:6px 4px}
.popover-find{display:flex;align-items:center;gap:8px;padding:6px 10px;margin-top:2px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm)}
.popover-find .find-ico{width:15px;height:15px;color:var(--ink-3);flex:none}
.popover-find input{flex:1;border:0;background:none;font-size:13px;height:28px;outline:none}
.find-results{margin-top:6px;max-height:220px;overflow:auto}
.find-row{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:var(--radius-sm);font-size:13px}
.find-row:hover{background:rgba(255,255,255,.5)}
.find-row .find-kind{display:block;font-size:11px;color:var(--ink-3)}
.find-empty{padding:10px 12px;font-size:13px;color:var(--ink-3)}
.find-empty a{color:var(--blue-600)}
.find-status{margin:8px 12px 4px;font-size:11px;color:var(--ink-3)}
.find-status:empty{display:none}
.find-description{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--ink-2)}
.find-title{font-weight:600}
.win-btn.app-search{width:36px;height:36px;min-width:36px;border-radius:8px;flex:none}
@media(max-width:760px){.win-btn.app-search{width:44px;height:44px;min-width:44px}}
#workPopover{width:min(400px,calc(100vw - 24px));min-width:0;max-height:calc(100dvh - 76px);overflow:auto;z-index:700}
#workPopover .popover-find input{min-width:0;width:100%}
#workPopover .popover-find:focus-within{outline:2px solid var(--blue-600);outline-offset:1px}
#workPopover .find-results{max-height:min(440px,calc(100dvh - 170px))}
#workPopover.has-search-query .work-shortcuts{display:none}
.find-row:focus-visible{outline:2px solid var(--blue-600);outline-offset:-2px;background:var(--paper-2)}
.work-search-elsewhere{border-top:1px solid var(--line);margin-top:24px;padding-top:20px;max-width:680px}
.work-search-elsewhere h2{font-size:16px;margin-bottom:10px}
@media(max-width:760px){#workPopover .find-row{min-height:44px}#workPopover .popover-find input{font-size:16px;height:36px}}

.contact-email{padding:8px 12px 2px;font-family:var(--font-mono);font-size:13px;color:var(--ink-2)}
.sound-volume-label{display:block;padding:8px 12px 2px;font-size:12px;color:var(--ink-3)}
#soundVolume{width:calc(100% - 24px);margin:2px 12px 8px}

/* ---------- Toast ---------- */
.toast-region{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);z-index:600;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--glass-strong);backdrop-filter:blur(20px);border:1px solid var(--glass-line);border-radius:999px;padding:10px 20px;font-size:13px;color:var(--ink);box-shadow:var(--glass-shadow);
  animation:toastIn var(--dur-base) var(--ease-out) both}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Dialogs ---------- */
dialog{border:0;padding:0;border-radius:var(--radius-xl);background:var(--paper);box-shadow:var(--glass-shadow);color:var(--ink);max-width:min(720px,92vw)}
dialog::backdrop{background:rgba(9,20,50,.45);backdrop-filter:blur(4px)}
#lightbox{width:min(1000px,92vw)}
.lightbox-frame{display:flex;flex-direction:column;max-height:88vh}
.lightbox-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.lightbox-title{font-size:15px;font-weight:600}
.lightbox-head-actions{display:flex;align-items:center;gap:8px}
.lightbox-body{flex:1;min-height:0;display:block;background:var(--paper-2);overflow:auto;padding:12px}
.lightbox-body img{display:block;max-width:none;max-height:none;border-radius:var(--radius-sm)}
.lightbox-body video{display:block;margin:auto;max-width:100%;max-height:70vh;border-radius:var(--radius-sm)}
.lightbox-body.fit{display:flex;align-items:center;justify-content:center}
.lightbox-body.fit img{flex-shrink:1;min-width:0;max-width:100%;max-height:70vh;width:auto;height:auto;object-fit:contain}
.lightbox-foot{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--line)}
.lightbox-caption{flex:1;font-size:13px;color:var(--ink-2);margin:0}
.lightbox-index{font-size:12px;color:var(--ink-3);font-family:var(--font-mono)}

.copydialog-frame,.confirm-frame{padding:24px;display:flex;flex-direction:column;gap:14px;max-width:420px}
.copydialog-frame input{height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:13px}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px}

/* ---------- Settings / About window content ---------- */
.settings-app,.about-app{padding:28px 32px;max-width:560px}
.settings-section{margin-bottom:28px}
.settings-section h3{font-size:15px;font-weight:600;margin-bottom:12px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.settings-storagenote{font-size:12px;color:var(--warn);margin-top:8px}
.settings-reset{margin-top:4px}
.about-app p{margin-bottom:14px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.about-app h2{font-size:20px;font-weight:600;margin-bottom:14px}
.about-app h3{font-size:15px;font-weight:600;margin:22px 0 10px}
.about-app details{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.about-app summary{cursor:pointer;font-size:13px;color:var(--ink-2)}
.about-app .kbd-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:13px}
.about-app .kbd-list kbd{font-family:var(--font-mono);background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:2px 6px;font-size:12px}

/* ================= Mobile (<=760px) ================= */
@media (max-width: 760px){
  body{overflow-x:hidden}
  #menubar{display:none}
  #mMenubar{position:fixed;inset:0 0 auto 0;height:44px;z-index:400;display:flex;align-items:center;gap:8px;padding:0 14px;
    background:var(--glass);backdrop-filter:blur(24px) saturate(1.6);border-bottom:1px solid var(--glass-line)}
  #mMenubar .brand-label{font-size:14px;font-weight:600}
  #mMenubar .mb-spacer{flex:1}
  #mSoundBtn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
  #mSoundBtn .mb-ico{width:18px;height:18px}

  #main{position:fixed;inset:44px 0 calc(64px + env(safe-area-inset-bottom)) 0;overflow-y:auto;overflow-x:hidden}
  .desktop-grid{height:auto;min-height:100%;display:flex;flex-direction:column}
  .identity{position:static;transform:none;width:100%;max-width:none;padding:14px 20px 4px;left:auto;top:auto;box-sizing:border-box}
  .identity-eyebrow{font-size:12px;margin-bottom:8px}
  .identity-name{font-size:clamp(42px,12vw,56px);margin-bottom:10px}
  .identity-tagline{font-size:17px;margin-bottom:10px}
  .identity-tagline br{display:none}
  .identity-support{font-size:14px;-webkit-line-clamp:2;margin-bottom:14px}
  .identity-actions{flex-direction:row;align-items:center;gap:14px}
  .identity-actions .btn.glass{flex:1}
  .identity-actions .btn.quiet{width:auto}
  .identity-actions .btn.glass{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.55);color:#fff}

  /* Stacked, deliberate (strict review §7): a compact analytics strip first,
     then the Records frame with the website capture directly above its name
     and action, and the record object small beside the caption. No
     horizontal overflow; nothing is a miniature overlapping desktop. */
  .stage{position:static;transform:none;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:none;
    --peek:0px;--front-top:0px;--rec:72px;
    display:block;padding:8px 16px calc(24px + 64px + env(safe-area-inset-bottom));box-sizing:border-box}
  .stage-group{max-width:none;padding-top:0}
  .stage-win{padding:5px}
  .stage-win-bar{height:32px;font-size:12px}
  .stage-signal{position:relative;width:100%;margin-bottom:12px}
  .stage-signal-body{min-height:0;padding:12px 14px}
  .stage-signal-lead{width:100%;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 12px}
  .stage-signal-title{font-size:17px}
  .stage-signal-line{flex:1 1 100%;order:3}
  .stage-signal-compare{display:none}
  .stage-signal .btn.primary{order:4;margin-top:0;width:100%}
  .stage-records{width:100%}
  .stage-records-body{padding:12px 12px 12px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"site site" "rec cap";gap:10px 12px;align-items:start}
  .stage-records-row{display:contents}
  .stage-site{grid-area:site;width:100%}
  .stage-site-shot{max-height:170px}
  .record-host{grid-area:rec;align-self:center}
  .stage-records-caption{grid-area:cap;margin-top:0;min-width:0}
  .stage-eyebrow{font-size:10.5px;letter-spacing:.06em}
  .stage-title{font-size:22px}
  .stage-line{font-size:13px;margin-bottom:10px}
  .stage-record-actions{gap:10px;flex-direction:column;align-items:stretch}
  .stage-record-actions .btn.amber{width:100%}
  .stage-record-actions .btn.quiet{display:none}
  .stage-credit{margin-left:0}

  #dock,#windows{display:none}

  #mBar{position:fixed;inset:auto 0 0 0;z-index:400;display:flex;height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:var(--glass-strong);backdrop-filter:blur(24px) saturate(1.6);border-top:1px solid var(--glass-line)}
  .m-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink-2);min-height:44px}
  .m-tab .ico{width:22px;height:22px}
  .m-tab span:last-child{font-size:11px}
  .m-tab[aria-current="page"]{color:var(--blue-600)}

  .sheet{position:fixed;inset:0;z-index:500;background:var(--paper);display:flex;flex-direction:column;transform:translateY(100%);transition:transform var(--dur-slow) var(--ease-out)}
  .sheet.sheet-open{transform:translateY(0)}
  .sheet-head{height:52px;flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;
    background:var(--glass-strong);backdrop-filter:blur(24px);border-bottom:1px solid var(--glass-line)}
  .sheet-head-back{display:flex;align-items:center;gap:6px;font-size:14px;height:40px;padding:0 10px;border-radius:var(--radius-sm)}
  .sheet-head-title{flex:1;margin:0;text-align:center;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;outline-offset:-3px}
  .sheet-head-title .ico{width:16px;height:16px}
  .sheet-body{flex:1;min-height:0;overflow:auto}
  .sheet-more .sheet-body{padding:10px}
  .more-row{display:flex;align-items:center;gap:14px;width:100%;height:52px;padding:0 14px;font-size:15px;border-radius:var(--radius-md)}
  .more-row:hover{background:var(--paper-2)}
  .more-row .ico{width:20px;height:20px;color:var(--ink-3)}

  /* Settings targets: segmented buttons, volume slider hit area, reset button */
  .settings-app .seg>button{height:44px}
  .settings-app input[type=range]{-webkit-appearance:none;appearance:none;height:44px;margin:0;padding:0;background:none;display:block;width:100%}
  .settings-app input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:var(--line-2)}
  .settings-app input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--blue-600);margin-top:-8px;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3);cursor:pointer}
  .settings-app input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:var(--line-2)}
  .settings-app input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--blue-600);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3);cursor:pointer}
  .settings-app .settings-reset{min-height:44px}
}
@media (min-width: 761px){
  #mMenubar,#mBar,.sheet,#moreSheet{display:none!important}
}


/* Startup styling is owned by os/boot.css. */

/* ---------- Reduced transparency ----------
   Settings > Transparency: Reduced. Every glass surface the shell owns becomes
   a readably opaque panel instead of a blurred one — same geometry, same
   hierarchy, no backdrop-filter, no edge ring, no reflection. */
[data-transparency="reduced"] #menubar,
[data-transparency="reduced"] #dock,
[data-transparency="reduced"] #mMenubar,
[data-transparency="reduced"] #mBar,
[data-transparency="reduced"] .popover,
[data-transparency="reduced"] .win,
[data-transparency="reduced"] .win-moremenu,
[data-transparency="reduced"] .toast,
[data-transparency="reduced"] .sheet-head,
[data-transparency="reduced"] .btn.glass,
[data-transparency="reduced"] .stage-win{
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
[data-transparency="reduced"] #menubar,
[data-transparency="reduced"] #dock,
[data-transparency="reduced"] #mMenubar,
[data-transparency="reduced"] #mBar,
[data-transparency="reduced"] .popover,
[data-transparency="reduced"] .win-moremenu,
[data-transparency="reduced"] .toast,
[data-transparency="reduced"] .sheet-head,
[data-transparency="reduced"] .win,
[data-transparency="reduced"] .stage-win{background:var(--paper);border:1px solid var(--line-2)}
[data-transparency="reduced"] #dock::before,[data-transparency="reduced"] .win::before,[data-transparency="reduced"] .popover::before,[data-transparency="reduced"] .stage-win::before,
[data-transparency="reduced"] #dock::after,[data-transparency="reduced"] #menubar::after{display:none}
[data-transparency="reduced"] #menubar,[data-transparency="reduced"] .mb-item,
[data-transparency="reduced"] .dock-label{color:var(--ink)}
[data-transparency="reduced"] .dock-icon{background:var(--paper-2);border-color:var(--line-2);box-shadow:none}
[data-transparency="reduced"] .win-titlebar,
[data-transparency="reduced"] .stage-win-bar{background:var(--paper-2)}
[data-transparency="reduced"] .btn.glass{background:var(--paper);color:var(--ink);border-color:var(--line-2);box-shadow:none}
[data-transparency="reduced"] .identity-actions .btn.glass{color:var(--ink)}

/* Preserve legibility when backdrop materials are unavailable or the device
   asks for opaque surfaces. No animation or layout change is needed. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root,:root[data-theme]{--glass:var(--paper);--glass-strong:var(--paper);--glass-bezel:var(--paper);--chrome-paper:var(--paper-2);--glass-surface:linear-gradient(transparent,transparent)}
  #dock::before,.win::before,.stage-win::before,.popover::before,#dock::after,#menubar::after{display:none}
  :root .identity-actions .btn.glass{background:var(--paper);color:var(--ink)}
}
@media (prefers-reduced-transparency:reduce){
  :root,:root[data-theme]{--glass:var(--paper);--glass-strong:var(--paper);--glass-bezel:var(--paper);--chrome-paper:var(--paper-2);--glass-surface:linear-gradient(transparent,transparent)}
  #menubar,#dock,#mMenubar,#mBar,.stage-win,.win,.popover,.win-moremenu,.toast,.sheet-head,.btn.glass{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  #dock::before,.win::before,.stage-win::before,.popover::before,#dock::after,#menubar::after{display:none}
  :root .identity-actions .btn.glass{background:var(--paper);color:var(--ink)}
}