/* ===== GLASS CHROME =====
   One material for the chrome of all six galleries, loaded last by every
   section so it sits over both engines (shared/viewer.css and the legacy
   3d / interactive sheets) without forking them.

   The material is drawn, not blurred: a vertical sheen, a gradient rim that is
   bright along the top edge and catches again at the bottom, and an accent
   glow from one corner on hover. backdrop-filter is kept to surfaces that sit
   over the static shell or only exist while open — anything parked over a
   running WebGL frame would re-blur it on every frame. */

:root {
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --glass-dur: .24s;

  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .045) 100%);
  --glass-fill-hover: linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .055) 55%, rgba(255, 255, 255, .07) 100%);
  --glass-rim: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 38%, rgba(255, 255, 255, .03) 62%, rgba(255, 255, 255, .12) 100%);
  --glass-hi: rgba(255, 255, 255, .1);
  --glass-edge: rgba(255, 255, 255, .06);
  --glass-shade: 0 1px 2px rgba(0, 0, 0, .28), 0 6px 16px -10px rgba(0, 0, 0, .55);
  --glass-panel: color-mix(in srgb, var(--surface-solid) 86%, transparent);
  --glass-panel-shadow:
    inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge),
    0 28px 64px -24px rgba(0, 0, 0, .7), 0 2px 10px -4px rgba(0, 0, 0, .4);
  --glass-glow: color-mix(in srgb, var(--menu-orb) 42%, transparent);
  --glass-focus: color-mix(in srgb, var(--menu-orb) 70%, #fff);
}

/* Light scenes flip --fg to ink; the rim stays a white highlight but the
   hairline around it has to darken or the edge disappears. */
:root[data-mode="light"] {
  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .42) 60%, rgba(255, 255, 255, .55) 100%);
  --glass-fill-hover: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .6) 60%, rgba(255, 255, 255, .7) 100%);
  --glass-rim: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(20, 20, 30, .1) 40%, rgba(20, 20, 30, .1) 70%, rgba(20, 20, 30, .16) 100%);
  --glass-hi: rgba(255, 255, 255, .8);
  --glass-edge: rgba(20, 20, 30, .1);
  --glass-shade: 0 1px 2px rgba(20, 20, 40, .1), 0 6px 16px -10px rgba(20, 20, 40, .25);
  --glass-glow: color-mix(in srgb, var(--menu-orb) 30%, transparent);
  --glass-focus: color-mix(in srgb, var(--menu-orb) 80%, #000);
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--glass-focus);
  outline-offset: 2px;
}

/* ===== KEYS =====
   Every square or pill control in the chrome. ::before is the rim (a 1px ring
   cut out of a gradient with a mask), ::after the corner glow; the glow fades
   in on hover and the key presses in on click. It never travels upward. */
.action-btn,
.scene-help-btn,
.scene-open-btn,
.lab-home,
.sidebar-pin,
.modal-close,
.scene-help-close,
.lab-notch-btn {
  position: relative;
  isolation: isolate;
  background: var(--glass-fill);
  border-color: transparent;
  box-shadow: var(--glass-shade);
  color: var(--fg-a75);
  transition:
    color var(--glass-dur) var(--ease-expo),
    transform .14s var(--ease-expo),
    grid-template-columns var(--transition-med);
}
.action-btn::before,
.scene-help-btn::before,
.scene-open-btn::before,
.lab-home::before,
.sidebar-pin::before,
.modal-close::before,
.scene-help-close::before,
.lab-notch-btn::before,
.tag-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.action-btn::after,
.scene-help-btn::after,
.scene-open-btn::after,
.lab-home::after,
.sidebar-pin::after,
.modal-close::after,
.scene-help-close::after,
.lab-notch-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(130% 110% at 0% 0%, var(--glass-glow), transparent 58%),
    var(--glass-fill-hover);
  opacity: 0;
  transition: opacity var(--glass-dur) var(--ease-expo);
  pointer-events: none;
}
.action-btn:hover, .action-btn:focus-visible,
.scene-help-btn:hover, .scene-help-btn:focus-visible,
.scene-open-btn:hover, .scene-open-btn:focus-visible,
.lab-home:hover, .lab-home:focus-visible,
.sidebar-pin:hover, .sidebar-pin:focus-visible,
.modal-close:hover, .modal-close:focus-visible,
.scene-help-close:hover, .scene-help-close:focus-visible,
.lab-notch-btn:hover, .lab-notch-btn:focus-visible {
  background: var(--glass-fill);
  border-color: transparent;
  color: var(--fg);
}
.action-btn:hover::after, .action-btn:focus-visible::after,
.scene-help-btn:hover::after, .scene-help-btn:focus-visible::after,
.scene-open-btn:hover::after, .scene-open-btn:focus-visible::after,
.lab-home:hover::after, .lab-home:focus-visible::after,
.sidebar-pin:hover::after, .sidebar-pin:focus-visible::after,
.modal-close:hover::after, .modal-close:focus-visible::after,
.scene-help-close:hover::after, .scene-help-close:focus-visible::after,
.lab-notch-btn:hover::after, .lab-notch-btn:focus-visible::after { opacity: 1; }
.action-btn:active,
.scene-help-btn:active,
.scene-open-btn:active,
.sidebar-pin:active,
.modal-close:active,
.scene-help-close:active,
.lab-notch-btn:active { transform: scale(.94); }

/* Engaged: a menu open, the interface hidden — the glow stays on and the
   accent soaks into the fill so the state reads without hovering. */
.scene-help.open .scene-help-btn,
.lang-selector.open > .action-btn,
.ui-toggle[aria-pressed="true"],
.lab-notch-btn[aria-expanded="true"] {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--menu-orb) 34%, transparent),
    color-mix(in srgb, var(--menu-orb) 14%, transparent));
  color: var(--fg);
}
.scene-help.open .scene-help-btn::after,
.lang-selector.open > .action-btn::after,
.ui-toggle[aria-pressed="true"]::after,
.lab-notch-btn[aria-expanded="true"]::after { opacity: 1; }

.lab-home > svg, .lab-home-label { position: relative; }

/* ===== NAV TABS — prev / next =====
   Cut into the window frame the way the notch is: the tab is painted in the
   shell's own ground and meets the frame edge through two concave fillets, so
   the frame itself seems to reach into the lab. No backdrop-filter — the tab
   rests over a running scene.

   ::before is the body. It is wider than it looks and its spare width hides in
   the gutter, which is the same colour; hovering slides it inward, so the tab
   widens with a transform and nothing is re-laid out. ::after is the fillet
   column — a mask cut from SVG, so the curves stay sharp at any DPR. */
.nav-arrow {
  --tab-w: 20px;
  --tab-grow: 6px;
  --tab-h: 64px;
  --tab-r: 10px;
  --tab-fillet: 12px;
  position: fixed;
  /* Centred inside the window; dvh, then a whole-pixel round, as progressive steps. */
  top: calc((var(--header-h) + 100vh  - var(--stage-bottom, 0px) - var(--shell-gap)) / 2);
  top: calc((var(--header-h) + 100dvh - var(--stage-bottom, 0px) - var(--shell-gap)) / 2);
  top: round(calc((var(--header-h) + 100dvh - var(--stage-bottom, 0px) - var(--shell-gap)) / 2), 1px);
  transform: translateY(-50%);
  width: calc(var(--tab-w) + var(--tab-grow));
  height: var(--tab-h);
  padding: 0;
  border: 0; border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--fg-a55);
  opacity: 1;
  display: block;
  z-index: 21;
  transition:
    color var(--glass-dur) var(--ease-expo), opacity var(--glass-dur) var(--ease-expo),
    visibility 0s,
    top var(--transition-med), left var(--transition-med), right var(--transition-med);
}
.nav-left  {
  left:  calc(var(--stage-left,  0px) + var(--shell-gap));
  filter: drop-shadow(4px 0 6px rgba(0, 0, 0, .16));
}
.nav-right {
  right: calc(var(--stage-right, 0px) + var(--shell-gap));
  filter: drop-shadow(-4px 0 6px rgba(0, 0, 0, .16));
}
.nav-arrow:hover:not(:disabled) {
  transform: translateY(-50%);
  background: none;
  opacity: 1;
  color: color-mix(in srgb, var(--menu-orb) 82%, var(--fg));
}

.nav-arrow::before,
.nav-arrow::after {
  content: '';
  position: absolute;
  background: var(--shell-bg);
  pointer-events: none;
  transition: background .45s;
}
.nav-arrow::before {
  top: 0; bottom: 0;
  width: calc(var(--tab-w) + var(--tab-grow));
  transition: transform .28s var(--ease-expo), background .45s, box-shadow var(--glass-dur) var(--ease-expo);
}
.nav-left::before  { left:  calc(-1 * var(--tab-grow)); border-radius: 0 var(--tab-r) var(--tab-r) 0; }
.nav-right::before { right: calc(-1 * var(--tab-grow)); border-radius: var(--tab-r) 0 0 var(--tab-r); }
.nav-left:hover:not(:disabled)::before,
.nav-left:focus-visible::before  { transform: translateX(var(--tab-grow)); }
.nav-right:hover:not(:disabled)::before,
.nav-right:focus-visible::before { transform: translateX(calc(-1 * var(--tab-grow))); }

.nav-arrow::after {
  top: calc(-1 * var(--tab-fillet));
  bottom: calc(-1 * var(--tab-fillet));
  width: var(--tab-fillet);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--tab-fillet) var(--tab-fillet), var(--tab-fillet) var(--tab-fillet), 100% calc(100% - 2 * var(--tab-fillet) + 2px);
  mask-size: var(--tab-fillet) var(--tab-fillet), var(--tab-fillet) var(--tab-fillet), 100% calc(100% - 2 * var(--tab-fillet) + 2px);
  -webkit-mask-position: top, bottom, center;
  mask-position: top, bottom, center;
}
.nav-left::after {
  left: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 0C0 11.046 8.954 20 20 20H0Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 20C0 8.954 8.954 0 20 0H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 0C0 11.046 8.954 20 20 20H0Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 20C0 8.954 8.954 0 20 0H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
}
.nav-right::after {
  right: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='geometricPrecision'%3E%3Cpath d='M20 0C20 11.046 11.046 20 0 20H20Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='geometricPrecision'%3E%3Cpath d='M20 20C20 8.954 11.046 0 0 0H20Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='geometricPrecision'%3E%3Cpath d='M20 0C20 11.046 11.046 20 0 20H20Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='geometricPrecision'%3E%3Cpath d='M20 20C20 8.954 11.046 0 0 0H20Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
}

/* The glyph sits on the visible body's centre and rides half the growth. */
.nav-arrow svg,
.nav-arrow.nav-left > svg,
.nav-arrow.nav-right > svg {
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: transform .28s var(--ease-expo);
}
.nav-left svg  { left: calc(var(--tab-w) / 2); }
.nav-right svg { left: calc(100% - var(--tab-w) / 2); }
.nav-left:hover:not(:disabled) > svg,
.nav-left:focus-visible > svg  { transform: translate(calc(-50% + var(--tab-grow) / 2), -50%); }
.nav-right:hover:not(:disabled) > svg,
.nav-right:focus-visible > svg { transform: translate(calc(-50% - var(--tab-grow) / 2), -50%); }
.nav-left  { --chev-out: -3px; }
.nav-right { --chev-out:  3px; }

/* The chevron slides out and a shaft draws in behind it, completing an arrow.
   The move is on the polyline, so the shaft is drawn in place, not dragged. */
.nav-arrow polyline { transition: transform .28s var(--ease-expo); }
.nav-arrow:hover:not(:disabled) polyline { transform: translateX(var(--chev-out, 0px)); }
.nav-arrow .nav-shaft {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  transition: stroke-dashoffset .28s var(--ease-expo);
}
.nav-arrow:hover:not(:disabled) .nav-shaft { stroke-dashoffset: 0; }

/* At either end of the list the cut closes rather than greying out: a dimmed
   tab would let the scene show through a hole in the frame. */
.nav-arrow:disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--glass-dur) var(--ease-expo), visibility 0s var(--glass-dur);
}
.nav-arrow:focus-visible { outline: none; color: color-mix(in srgb, var(--menu-orb) 82%, var(--fg)); }
.nav-arrow:focus-visible::before { box-shadow: inset 0 0 0 1.5px var(--glass-focus); }

/* Hint: a glass card beside the tab. It only exists while hovered, so the
   blur behind it is paid for a moment, not every frame of the lab. */
.nav-tip {
  position: absolute;
  top: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 12px 7px;
  border-radius: 12px;
  border: 0;
  background:
    radial-gradient(140% 120% at 0% 0%, color-mix(in srgb, var(--menu-orb) 18%, transparent), transparent 55%),
    var(--glass-panel);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--glass-panel-shadow);
  color: var(--fg);
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--tip-from, 0px), -50%);
  transition: opacity .2s var(--ease-expo), transform .3s var(--ease-expo);
  z-index: 1;
}
.nav-left  .nav-tip { left:  calc(100% + 6px); right: auto; --tip-from: -6px; }
.nav-right .nav-tip { right: calc(100% + 6px); left: auto;  --tip-from:  6px; }
.nav-tip kbd {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--fg-a55);
  padding: 0; border: 0; background: none;
}
:root:not(.nav-hints-dismissed) .nav-arrow:hover .nav-tip { opacity: 1; transform: translate(0, -50%); }
:root.nav-hints-dismissed .nav-tip { display: none; }

/* ===== SIDEBAR ===== */
.sidebar.open .sidebar-panel {
  box-shadow:
    inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge),
    0 30px 70px -30px rgba(0, 0, 0, .7);
}
.sidebar-head { position: relative; border-bottom: 0; }
.sidebar-head::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fg-a12) 20%, var(--fg-a12) 80%, transparent);
  pointer-events: none;
}
.sidebar-logo {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px -6px var(--glass-glow);
}
.sidebar-footer {
  border-top: 0;
  background: linear-gradient(90deg, transparent, var(--fg-a12) 20%, var(--fg-a12) 80%, transparent) top / 100% 1px no-repeat;
}

/* Tag chips: small glass pills; the active one is lit with the accent. */
.tag-chip {
  isolation: isolate;
  background: var(--glass-fill);
  border-color: transparent;
  color: var(--fg-a75);
  transition: color var(--glass-dur) var(--ease-expo), background var(--glass-dur) var(--ease-expo),
              transform .14s var(--ease-expo);
}
.tag-chip:hover { background: var(--glass-fill-hover); color: var(--fg); }
.tag-chip:active { transform: scale(.95); }
.tag-chip.active { background: transparent; border-color: transparent; }
.tag-chip.active::before { opacity: 0; }
.tag-chip.active:not([data-tag="all"]),
.filter-indicator {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 55%),
    var(--menu-orb);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .12),
              0 6px 16px -8px var(--menu-orb);
}

/* The 3D section's segmented filter: a recessed well the lit pill slides in. */
.sidebar-filter {
  background: rgba(0, 0, 0, .18);
  border-color: transparent;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--glass-edge), 0 1px 0 var(--glass-hi);
}
:root[data-mode="light"] .sidebar-filter { background: rgba(20, 20, 30, .05); }

/* Scene rows: the active one becomes a glass card with a lit rail on the left. */
.scene-item {
  position: relative;
  transition: background var(--glass-dur) var(--ease-expo), color var(--glass-dur) var(--ease-expo),
              box-shadow var(--glass-dur) var(--ease-expo);
}
.scene-item::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: var(--menu-orb);
  opacity: 0;
  transform: scaleY(.3);
  transition: opacity var(--glass-dur) var(--ease-expo), transform .3s var(--ease-expo);
  pointer-events: none;
}
.scene-item:hover { background: var(--fg-a05); }
.scene-item.active {
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--menu-orb) 22%, transparent), transparent 60%),
    var(--fg-a05);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge);
}
.scene-item.active::before { opacity: 1; transform: scaleY(1); }
.scene-item.active .scene-thumb {
  outline: 1px solid color-mix(in srgb, var(--menu-orb) 60%, var(--fg-a55));
  outline-offset: 2px;
}
.scene-thumb { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }

/* ===== MOBILE DOCK ===== */
.mobile-dock {
  box-shadow: inset 0 1px 0 var(--glass-hi);
  border-top-color: var(--glass-edge);
}
.mobile-dock-track { scrollbar-width: none; }
.mobile-dock-track::-webkit-scrollbar { display: none; }
/* The current item is marked on its thumbnail, not with a box around the
   whole item: the legacy dock items have no padding to hold one. */
.dock-item,
.dock-item:hover,
.dock-item.active { background: none; }
.dock-thumb {
  outline: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.dock-item.active .dock-thumb {
  outline: 1.5px solid color-mix(in srgb, var(--menu-orb) 75%, var(--fg));
  outline-offset: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 18px -8px var(--menu-orb);
}
.dock-item.active .dock-name { color: var(--fg); }

/* ===== FLOATING PANELS =====
   Language list, tips, shortcuts, toast, tooltip: one glass card each, lit from
   the top-left corner by the section's accent. They exist only while open. */
.lang-dropdown,
.scene-help-panel,
.modal,
.toast,
.ui-tip {
  border: 0;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--menu-orb) 16%, transparent), transparent 55%),
    var(--glass-panel);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--glass-panel-shadow);
}
.ui-tip { box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge), 0 12px 30px -14px rgba(0, 0, 0, .6); }

.scene-help-panel,
.lang-dropdown {
  transition: opacity .2s var(--ease-expo), transform .3s var(--ease-expo), visibility .2s;
}

/* Inside the sidebar the language list is a sheet sitting on the footer. */
.sidebar-footer .lang-dropdown {
  background:
    radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--menu-orb) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--menu-bg) 80%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 1px 0 0 var(--glass-edge), inset -1px 0 0 var(--glass-edge),
              0 -22px 50px -20px rgba(0, 0, 0, .6);
  transition: opacity var(--transition-fast), visibility var(--transition-fast),
              clip-path .3s var(--ease-expo);
}

.lang-option {
  transition: background var(--glass-dur) var(--ease-expo), color var(--glass-dur) var(--ease-expo);
}
.lang-option:hover { background: var(--fg-a08); }
.lang-option.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--menu-orb) 22%, transparent), transparent);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge);
}
.lang-option.active::after { color: var(--fg); }
.lang-option .flag-icon,
.flag-icon { box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2); }

/* Tips: one card per hint with a small lit diamond in place of an emoji. */
.scene-help-list { gap: 6px; }
.scene-help-list li,
.lab-notch-tips li {
  position: relative;
  padding: 9px 12px 9px 30px;
  border: 0;
  border-radius: 10px;
  background: var(--fg-a05);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-a75);
}
.scene-help-list li::before,
.lab-notch-tips li::before {
  content: '';
  position: absolute;
  left: 13px; top: 16px;
  width: 6px; height: 6px;
  border-radius: 1px;
  background: var(--menu-orb);
  box-shadow: 0 0 8px -1px var(--menu-orb);
  transform: rotate(45deg);
  font-size: 0;
}
.scene-help-list li.scene-help-credit,
.lab-notch-tips li.scene-help-credit {
  margin-top: 4px;
  padding: 8px 2px 0;
  background: none;
  box-shadow: none;
  border-top: 1px solid var(--fg-a08);
  border-radius: 0;
  font-size: 11px;
  color: var(--fg-a40);
}
.scene-help-list li.scene-help-credit::before,
.lab-notch-tips li.scene-help-credit::before { content: none; }

.shortcut-row {
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--fg-a05);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}
.shortcut-row kbd {
  background: var(--glass-fill);
  border: 0;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge), 0 1px 0 rgba(0, 0, 0, .3);
  color: var(--fg);
}

/* ===== NOTCH =====
   The island keeps the shell's ground — that is the illusion it is built on —
   so the glass lives in its controls and in a lit lip along its free edge. */
.lab-notch-btn { color: var(--fg-a75); }
.lab-notch-identity {
  position: relative;
  transition: background var(--glass-dur) var(--ease-expo);
}
.lab-notch-identity:hover,
.lab-notch.open-menu .lab-notch-identity {
  background: var(--glass-fill);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge);
}
.lab-notch-logo {
  outline: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 14px -6px var(--glass-glow);
}
/* The brand mark (the favicon the welcome slide shows) turns about its own
   centre when its control is hovered; scene thumbnails are left alone. */
.lab-notch-logo:has(img[src$="favicon.svg"]),
.scene-label-icon:has(img[src$="favicon.svg"]) {
  transform-origin: 50% 50%;
  transition: transform .7s var(--ease-expo), filter .3s;
}
.lab-notch-identity:hover .lab-notch-logo:has(img[src$="favicon.svg"]),
.lab-notch-identity:focus-visible .lab-notch-logo:has(img[src$="favicon.svg"]),
.scene-label:hover .scene-label-icon:has(img[src$="favicon.svg"]) { transform: rotate(180deg); filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) {
  .lab-notch-identity:hover .lab-notch-logo:has(img[src$="favicon.svg"]),
  .lab-notch-identity:focus-visible .lab-notch-logo:has(img[src$="favicon.svg"]),
  .scene-label:hover .scene-label-icon:has(img[src$="favicon.svg"]) { transform: none; }
}
.lab-notch-bar { position: relative; }
.lab-notch-bar::after {
  content: '';
  position: absolute;
  left: 22px; right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fg-a12) 25%, color-mix(in srgb, var(--menu-orb) 55%, transparent) 50%, var(--fg-a12) 75%, transparent);
  opacity: .8;
  pointer-events: none;
}
.lab-notch[data-position="top"] .lab-notch-bar::after { bottom: 0; }
.lab-notch[data-position="bottom"] .lab-notch-bar::after { top: 0; }
.lab-notch-row {
  transition: background var(--glass-dur) var(--ease-expo), color var(--glass-dur) var(--ease-expo);
}
.lab-notch-row.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--menu-orb) 22%, transparent), transparent);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge);
}
.lab-notch-tips li { font-size: 13px; }

/* ===== CORNER RESTORE ===== */
.ui-restore {
  box-shadow: inset 1px 1px 0 var(--glass-hi);
}

/* ===== TOUCH ===== */
@media (max-width: 760px) {
  /* The tab stays slim and does not grow; the hit area is a 44px target. */
  .nav-arrow { --tab-w: 16px; --tab-grow: 0px; --tab-h: 52px; --tab-r: 8px; --tab-fillet: 10px; width: 44px; }
  .nav-tip { display: none; }
}

@media (hover: none) {
  .nav-arrow:hover:not(:disabled)::before { transform: none; }
  .nav-arrow:hover:not(:disabled) > svg { transform: translate(-50%, -50%); }
  .nav-arrow:hover:not(:disabled) polyline { transform: none; }
  .nav-arrow:hover:not(:disabled) .nav-shaft { stroke-dashoffset: 10; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-arrow::before,
  .nav-arrow svg,
  .nav-arrow polyline,
  .nav-arrow .nav-shaft,
  .nav-tip,
  .scene-item::before { transition: opacity var(--glass-dur) linear; }
  .nav-arrow:hover:not(:disabled) polyline { transform: none; }
  .action-btn:active, .scene-help-btn:active, .scene-open-btn:active,
  .sidebar-pin:active, .modal-close:active, .scene-help-close:active,
  .lab-notch-btn:active, .tag-chip:active { transform: none; }
}