/* Grid parameters mirror static/preview/preview-3d.js syncGridTheme():
   dark RGB 116/122/127 at .10 opacity, 0.55 width;
   light RGB 255/231/163 at .12 opacity, 0.35 width.
   Keep the existing 32px * zoom pitch and camera-relative pan in canvas.js. */
body[data-theme="dark"]{
  --daailok-grid-line:rgba(116,122,127,.10);
  --daailok-grid-width:.55px;
}
body[data-theme="light"]{
  --daailok-grid-line:rgba(255,231,163,.12);
  --daailok-grid-width:.35px;
}
body[data-theme] .canvas-viewport,
body[data-theme] .board-preview{
  background-image:
    linear-gradient(90deg,var(--daailok-grid-line) var(--daailok-grid-width),transparent var(--daailok-grid-width)),
    linear-gradient(0deg,var(--daailok-grid-line) var(--daailok-grid-width),transparent var(--daailok-grid-width))!important;
}
body[data-theme] .board-preview{background-size:24px 24px!important;}

/* The website optical shader is enabled for selectable controls in both themes.
   Do not change their rest state, position, or hit-testing. */
body[data-theme] [data-canvas-optics]{
  isolation:isolate;
}
body[data-theme] [data-canvas-optics]>.canvas-glass-render{
  position:absolute!important;inset:-8px!important;
  width:calc(100% + 16px)!important;height:calc(100% + 16px)!important;
  border:0!important;box-shadow:none!important;
  max-width:none!important;max-height:none!important;
  pointer-events:none!important;z-index:1!important;
  background:transparent!important;
}
body[data-theme] [data-canvas-optics]>:not(.canvas-glass-render){
  position:relative;z-index:2;
}
body[data-theme] :is(.canvas-toptools button,.palette button,.zoom-controls button,.top-actions .quiet,.board-card,.board-new,.canvas-account-action,.inspector button)[data-canvas-optics]{
  transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s;
}
body[data-theme="dark"] :is(.canvas-toptools button,.palette button,.zoom-controls button,.top-actions .quiet,.canvas-account-action)[data-canvas-optics]:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 12px rgba(240,203,125,.10)!important;
}
body[data-theme="dark"] .canvas-node[data-canvas-optics]>:is(.node-port,.node-resize){
  z-index:5!important;position:absolute!important;
}
body[data-theme="dark"] .canvas-node[data-canvas-optics]>.node-resize{right:-1px;bottom:-1px}
body[data-theme="dark"] .canvas-node[data-canvas-optics]>.port-in{left:-7px}
body[data-theme="dark"] .canvas-node[data-canvas-optics]>.port-out{right:-7px}
@media(prefers-reduced-motion:reduce){
  body[data-theme] [data-canvas-optics]>.canvas-glass-render{display:none!important;}
}

/* Fix: glass canvases must be positioned relative to THEIR OWN button.
   Previously the nearest positioned ancestor was the whole toolbar/palette:
   that stretched the refraction across the entire bar. */
body[data-theme] :is(
 .canvas-toptools button,
 .palette button,
 .zoom-controls button,
 .top-actions .quiet,
 .canvas-account-action,
 .inspector button
)[data-canvas-optics]{
 position:relative!important;
 isolation:isolate!important;
 overflow:hidden!important;
 contain:paint;
}
body[data-theme] :is(
 .canvas-toptools button,
 .palette button,
 .zoom-controls button,
 .top-actions .quiet,
 .canvas-account-action,
 .inspector button
)[data-canvas-optics]>.canvas-glass-render{
 position:absolute!important;
 inset:-8px!important;
 width:calc(100% + 16px)!important;
 height:calc(100% + 16px)!important;
 pointer-events:none!important;
 max-width:none!important;max-height:none!important;
 border:0!important;box-shadow:none!important;
 z-index:0!important;
}
/* The lens must not turn toolbar containers into reflective surfaces. */
body[data-theme] :is(.palette,.canvas-toptools,.zoom-controls,.topbar)>.canvas-glass-render{
 display:none!important;
}

/* Studio's yellow optical selection lives on the actual clicked control only.
   Do not brighten its containing toolbar or palette. */
body[data-theme] :is(
 .canvas-toptools button,
 .palette button,
 .zoom-controls button,
 .top-actions .quiet,
 .canvas-account-action,
 .inspector button
).canvas-click-gold{
 color:var(--ds-optical-accent,#f0cb7d)!important;
 border-color:rgba(240,203,125,.62)!important;
 background:rgba(240,203,125,.12)!important;
 box-shadow:inset 0 0 0 1px rgba(240,203,125,.30),0 0 12px rgba(240,203,125,.26)!important;
 text-shadow:0 0 9px rgba(240,203,125,.43)!important;
}
body[data-theme="light"] :is(
 .canvas-toptools button,
 .palette button,
 .zoom-controls button,
 .top-actions .quiet,
 .canvas-account-action,
 .inspector button
).canvas-click-gold{
 color:#6b4b0d!important;
 background:rgba(240,203,125,.24)!important;
 border-color:rgba(195,154,58,.64)!important;
}