/* Final pen UI recipe adapted to the watch and EUV without changing their models. */
body.suite-ui.glass-ui {
  --bg: #eef2f8; --surface: #f5f9ff; --paper: #f1f5fa;
  --ink: #243140; --ink-strong: #17222e; --muted: #6b788a; --faint: #8996a7;
  --glass-halo: 90 145 225; --glass-x: 50%; --glass-y: 25%;
  --suite-hover: rgb(210 230 255 / .48); --suite-selected: rgb(255 255 255 / .36);
  --suite-edge: rgb(255 255 255 / .76);
  --glass-ui-fill: linear-gradient(135deg,rgb(255 255 255 / .46),rgb(182 218 255 / .08) 52%,rgb(225 238 255 / .30));
  --suite-rim: inset 0 1px 0 rgb(255 255 255 / .88),inset 0 -2px 4px rgb(0 0 0 / .13),inset 2px 0 2px rgb(255 255 255 / .65),inset -2px 0 2px rgb(0 0 0 / .08);
  background: var(--bg); color: var(--ink);
}
body.suite-ui.dark.glass-ui {
  --bg: #181818; --surface: #242424; --paper: #1b1b1b;
  --ink: #e8e8e8; --ink-strong: #f4f4f4; --muted: #aaa; --faint: #888;
  --accent: #dedede; --accent-soft: #2c2c2c; --accent-line: #454545;
  --glass-halo: 255 255 255; --suite-hover: rgb(255 255 255 / .09);
  --suite-selected: rgb(255 255 255 / .08); --suite-edge: rgb(255 255 255 / .22);
  --glass-ui-fill: linear-gradient(135deg,rgb(255 255 255 / .16),rgb(255 255 255 / .025) 52%,rgb(255 255 255 / .08));
  --suite-rim: inset 0 1px 0 rgb(255 255 255 / .32),inset 0 -2px 4px rgb(0 0 0 / .45),inset 2px 0 2px rgb(255 255 255 / .12),inset -2px 0 2px rgb(0 0 0 / .3);
  background: var(--bg);
}
body.suite-ui.glass-ui :is(.header,.site-header,.view-header,.observatory,.workbench,.transport,.transport-bar,.playback) {
  border-color: transparent; background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.suite-ui.glass-ui :is(.header,.site-header,.observatory,.workbench,.view-header,.playback)::before,
body.suite-ui.glass-ui :is(.header,.site-header,.observatory,.workbench,.view-header,.playback)::after { content: none; }
body.suite-ui.glass-ui :is(.header,.site-header) { position: relative; overflow: visible; z-index: 12; }
body.suite-ui.glass-ui :is(.header,.site-header)::before {
  content: ''; display: block; position: absolute; inset: -20px 0 -28px;
  background: radial-gradient(ellipse at 50% 0,rgb(var(--glass-halo) / .10),transparent 75%);
  border: 0; border-radius: 0; box-shadow: none; filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; z-index: -1;
}
body.suite-ui.glass-ui :is(.brand-mark,.brand-glyph) {
  width: 32px; height: 32px; padding: 1px; border: 0; border-radius: 0;
  box-shadow: none; background: transparent; color: var(--ink-strong); stroke-width: 1.7;
}
body.suite-ui.glass-ui .header-tools { gap: 12px; border: 0; box-shadow: none; background: transparent; padding: 0; }
body.suite-ui.glass-ui :is(.header-spec,.header-specs,.header-actions .text-button,.source-link) { background: transparent; border: 0; box-shadow: none; }
body.suite-ui.glass-ui :is(.system-nav,.side-panel,.inspector) {
  position: relative; z-index: 2; margin: 10px 10px 14px;
  border: 1px solid var(--suite-edge); border-radius: 28px;
  background: radial-gradient(400px circle at var(--glass-x) var(--glass-y),rgb(var(--glass-halo) / .035),transparent 72%),var(--glass-ui-fill);
  box-shadow: var(--suite-rim); color: var(--ink);
  backdrop-filter: var(--glass-ui-blur);
  -webkit-backdrop-filter: var(--glass-ui-blur);
  transition: background 220ms ease,transform 320ms var(--ease),opacity 220ms ease,visibility 320ms;
}
body.suite-ui.glass-ui :is(.system-nav,.side-panel,.inspector)::before,
body.suite-ui.glass-ui :is(.system-nav,.side-panel,.inspector)::after { content: none; }
body.suite-ui.glass-ui .suite-selection-list { position: relative; isolation: isolate; }
body.suite-ui.glass-ui .suite-selection-list::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: var(--suite-w,0px); height: var(--suite-h,0px);
  transform: translate(var(--suite-x,0px),var(--suite-y,0px));
  background: var(--glass-ui-fill),var(--suite-selected); border: 1px solid var(--suite-edge);
  border-radius: 18px; box-shadow: var(--suite-rim); z-index: -1; pointer-events: none;
  opacity: 0; transition: transform 400ms var(--ease),width 400ms var(--ease),height 400ms var(--ease),opacity 180ms ease;
}
body.suite-ui.glass-ui .suite-has-selection::before { opacity: 1; }
body.suite-ui.glass-ui .suite-selection-list > :is(button,div) { position: relative; }
body.suite-ui.glass-ui :is(.system-item,.phase-item,.observation,.part-shortcuts button,.nav-aux button,.speed-control button) {
  border: 0; border-radius: 18px; background: transparent; box-shadow: none;
  color: var(--ink); transition: background-color 220ms ease,color 160ms ease,transform 220ms var(--ease);
}
body.suite-ui.glass-ui :is(.system-item,.phase-item,.observation,.part-shortcuts button,.nav-aux button,.speed-control button).active {
  border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-strong);
}
body.suite-ui.glass-ui :is(.system-item,.phase-item,.observation,.part-shortcuts button,.nav-aux button,.speed-control button):not(.active):hover { background: var(--suite-hover); transform: none; }
body.suite-ui.glass-ui :is(.system-item,.phase-item,.observation,.part-shortcuts button):active { transform: scale(.98); }
body.suite-ui.glass-ui :is(.view-tools,.viewport-tools,.selection-chip,.context-control,.light-panel,.light-popover,.focus-dim,.explosion-control,.explode-control,.segmented,.view-modes,.side-switch) {
  border: 1px solid var(--suite-edge); border-radius: 24px; background: var(--glass-ui-fill);
  box-shadow: var(--suite-rim); color: var(--ink);
  backdrop-filter: var(--glass-ui-blur);
  -webkit-backdrop-filter: var(--glass-ui-blur);
}
body.suite-ui.glass-ui :is(.view-tools,.viewport-tools,.selection-chip) { border-radius: 999px; }
body.suite-ui.glass-ui :is(.view-tools,.viewport-tools) button { border: 0; background: transparent; box-shadow: none; backdrop-filter: none; color: var(--ink); border-radius: 50%; }
body.suite-ui.glass-ui :is(.view-tools,.viewport-tools) button:hover { background: var(--suite-hover); }
body.suite-ui.glass-ui :is(.segmented-thumb,#mode-thumb) { display: none; }
body.suite-ui.glass-ui :is(.segmented,.view-modes,.side-switch) button { background: transparent; color: var(--muted); box-shadow: none; border-color: transparent; }
body.suite-ui.glass-ui :is(.segmented,.view-modes,.side-switch) button.active { background: transparent; color: var(--ink-strong); box-shadow: none; }
body.suite-ui.glass-ui :is(.text-button,.focus-return,.detail-focus,.evidence-button,.precision-link,.focus-clear,.focus-reset,#isolation-return) { border: 0; border-radius: 999px; box-shadow: none; color: var(--muted); background: transparent; }
body.suite-ui.glass-ui :is(.text-button,.focus-return,.detail-focus,.evidence-button,.precision-link,.focus-clear,.focus-reset,#isolation-return):hover { background: var(--suite-hover); }
body.suite-ui.glass-ui :is(.system-item strong,.observation strong,.part-shortcuts strong,.inspector h2) { color: var(--ink-strong); }
body.suite-ui.glass-ui :is(.system-item small,.observation small,.part-shortcuts small,.inspector p,.view-code,.viewer-corner em) { color: var(--muted); }
body.suite-ui.glass-ui :is(small,p,em,.eyebrow,.phase-time,.phase-index,.observation-index,.observation-number).model-ink { --ink-rest: var(--muted); }
body.suite-ui.glass-ui .viewer-corner b.model-ink { --ink-rest: var(--ink-strong); }
body.suite-ui.glass-ui :is(.source-drawer,.doc-panel,dialog.sheet) {
  position: fixed; inset: 40px auto auto 50%; transform: translateX(-50%);
  width: min(720px,calc(100vw - 64px)); max-width: none; height: auto;
  max-height: min(800px,calc(100dvh - 80px)); margin: 0;
  border: 1px solid var(--suite-edge); border-radius: 28px;
  background: #f5f9ff; color: var(--ink); box-shadow: 0 20px 70px rgb(0 0 0 / .18);
  overflow-y: auto; backdrop-filter: none; transition: opacity 220ms ease,translate 220ms var(--ease),visibility 220ms;
}
body.suite-ui.dark.glass-ui :is(.source-drawer,.doc-panel,dialog.sheet) { background: #222; }
body.suite-ui.glass-ui :is(.source-drawer,.doc-panel).open { transform: translateX(-50%); }
body.suite-ui.glass-ui :is(.source-drawer,.doc-panel,dialog.sheet)::before,
body.suite-ui.glass-ui :is(.source-drawer,.doc-panel,dialog.sheet)::after { content: none; }
body.suite-ui.glass-ui dialog.sheet { top: 50%; transform: translate(-50%,-50%); }
body.suite-ui.glass-ui dialog.sheet[open] { display: flex; flex-direction: column; }
body.suite-ui.glass-ui dialog.sheet .dialog-header { flex: 0 0 auto; padding: 24px 28px 20px; }
body.suite-ui.glass-ui dialog.sheet .dialog-body { min-height: 0; max-height: none; overflow-y: auto; padding: 4px 28px 28px; }
body.suite-ui.glass-ui :is(dialog::backdrop,.drawer-backdrop,.doc-backdrop) { background: rgb(0 0 0 / .28); backdrop-filter: blur(8px); }
body.suite-ui.glass-ui :is(.viewer-layout,.bench-body) { position: relative; }
body.suite-ui.glass-ui :is(#suite-canvas,#canvas-host) {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  mask-image: linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent),linear-gradient(to bottom,transparent,#000 48px,#000 calc(100% - 48px),transparent);
  mask-composite: intersect;
}
body.suite-ui.glass-ui #suite-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; }
body.suite-ui.glass-ui .viewport { background: transparent; border: 0; box-shadow: none; pointer-events: none; z-index: 1; }
body.suite-ui.glass-ui .viewport :is(button,input,select,a,.view-tools,.viewport-tools,.selection-chip,.light-panel,.light-popover,.explode-control,.explosion-control,.context-control) { pointer-events: auto; }
@supports (corner-shape: squircle) {
  body.suite-ui.glass-ui :is(.system-item,.phase-item,.observation,.part-shortcuts button,.suite-selection-list::before) { corner-shape: squircle; }
}
@media(max-width:1080px) {
  body.suite-ui.glass-ui :is(.inspector.open,.system-panel.open) { position: absolute; z-index: 46; background-color: rgb(238 242 248 / .80); }
  body.suite-ui.dark.glass-ui :is(.inspector.open,.system-panel.open) { background-color: rgb(24 24 24 / .80); }
}
@media(max-width:720px) {
  body.suite-ui.glass-ui :is(.system-nav,.side-panel,.inspector) { margin: 6px; border-radius: 24px; }
  body.suite-ui.glass-ui :is(.source-drawer,.doc-panel,dialog.sheet) { width: calc(100vw - 32px); max-height: calc(100dvh - 48px); top: 24px; border-radius: 24px; }
  body.suite-ui.glass-ui dialog.sheet { top: 50%; }
}
@media(prefers-reduced-motion:reduce) {
  body.suite-ui.glass-ui .suite-selection-list::before,
  body.suite-ui.glass-ui :is(.source-drawer,.doc-panel,dialog.sheet,.system-nav,.side-panel,.inspector) { transition: none; }
}

body.suite-ui.glass-ui :is(.source-drawer,.doc-panel):not(.open) { visibility:hidden;opacity:0;pointer-events:none;translate:0 8px; }
body.suite-ui.glass-ui :is(.source-drawer,.doc-panel).open { visibility:visible;opacity:1;pointer-events:auto;translate:0 0; }

body.suite-ui.glass-ui :is(.micro-heading,.source-links a,.demo-source-list a) { border-radius:14px;box-shadow:none;background:transparent; }
body.suite-ui.glass-ui :is(.system-nav,.side-panel,.inspector,.view-tools,.viewport-tools) { animation:suite-enter 320ms var(--ease) both; }
@keyframes suite-enter { from {opacity:0;translate:0 5px} to {opacity:1;translate:0 0} }
@media(prefers-reduced-motion:reduce) { body.suite-ui.glass-ui :is(.system-nav,.side-panel,.inspector,.view-tools,.viewport-tools) {animation:none} }
body.gallery-page.suite-ui.glass-ui .demo-side-panel {margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;}
body.gallery-page.suite-ui.glass-ui .demo-card :is(.context-control,.demo-static-control) {border:0;background:transparent;box-shadow:none;backdrop-filter:none;}
body.suite-ui.glass-ui .frame-card {border-radius:22px;background:var(--glass-ui-fill);box-shadow:var(--suite-rim);border:1px solid var(--suite-edge)}
body.suite-ui.glass-ui .frame-item {border-radius:14px}
body.suite-ui.glass-ui :is(#sources-dialog,#document-dialog) {
  inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(720px,calc(100vw - 64px));
  height:auto;max-height:min(800px,calc(100dvh - 80px));margin:0;border-radius:28px;
  background:var(--surface);box-shadow:0 20px 70px rgb(0 0 0 / .18);overflow:hidden;animation:none;
}
body.suite-ui.glass-ui :is(#sources-dialog,#document-dialog) .dialog-body {max-height:none;min-height:0;overflow-y:auto;}
@media(max-width:720px){body.suite-ui.glass-ui :is(#sources-dialog,#document-dialog){width:calc(100vw - 32px);max-height:calc(100dvh - 48px);border-radius:24px}}
body.suite-ui.glass-ui :is(.header-toggle,.header-tools .icon-button,.dialog-close,.close-button,.small-button,.mini-button,.outline-toggle,.light-toggle,.model-tone-toggle,.speed-control,.crown-position) {
  border:1px solid var(--suite-edge);border-radius:999px;background:var(--glass-ui-fill);box-shadow:var(--suite-rim);color:var(--ink);
  transition:background-color 200ms ease,transform 200ms var(--ease),opacity 180ms ease;
}
body.suite-ui.glass-ui :is(.header-toggle,.small-button,.mini-button,.outline-toggle,.light-toggle):hover {background-color:var(--suite-hover)}
body.suite-ui.glass-ui :is(.header-toggle,.small-button,.mini-button,.outline-toggle,.light-toggle):active {transform:scale(.96)}
body.suite-ui.glass-ui :is(.speed-control,.crown-position) button {box-shadow:none;background:transparent;border-color:transparent;color:var(--ink)}
body.suite-ui.glass-ui .explosion-control .explode-track {background:transparent;box-shadow:none}
body.suite-ui.glass-ui .swatch {border:1px solid var(--suite-edge);border-radius:20px;box-shadow:none;background:var(--glass-ui-fill)}
body.suite-ui.glass-ui .frame-row .icon-button {border-radius:999px;box-shadow:var(--suite-rim)}
body.suite-ui.glass-ui .wordmark .brand-glyph {color:var(--ink-strong)}
body.suite-ui.glass-ui.drawer-open .source-drawer,
body.suite-ui.glass-ui.doc-open .doc-panel {visibility:visible;opacity:1;pointer-events:auto;translate:0 0;transform:translateX(-50%)}

/* shell.css turns the panes into drawers below 1080px / 720px with a plain .inspector
   selector; suite-ui gives every pane position:relative with higher specificity, so the
   drawer placement has to be restored at the same widths or the hidden pane keeps a grid
   column and squeezes the viewport. Only pages whose panes are direct .bench-body children
   use that drawer model; a project with its own column layout (mechanical-watch) keeps its
   own positioning. */
@media (max-width: 1080px) {
  body[data-layout="observatory"].suite-ui.glass-ui .bench-body > .inspector { position: absolute; }
}
@media (max-width: 720px) {
  body[data-layout="observatory"].suite-ui.glass-ui .bench-body > .system-panel { position: absolute; }
}

/* The base pane rule delays visibility by 320ms; without this the pane is still
   visibility:hidden on the frame it opens, so the page's synchronous focus() into the
   drawer is ignored and keyboard users stay on the toggle. */
body[data-layout="observatory"].suite-ui.glass-ui :is(.inspector.open, .system-panel.open) {
  transition: transform 320ms var(--ease-drawer), visibility 0s;
}
/* drawer-backdrop sits at z-index 45, so an open drawer has to climb above it. */
@media (max-width: 1080px) {
  body[data-layout="observatory"].suite-ui.glass-ui :is(.inspector.open, .system-panel.open) { z-index: 46; }
}