/* 2026-10-22 – precise infinite-canvas title/status separation & palette.
 * Scoped to an OPEN canvas, not the boards homepage, 3D stage, or account UI.
 * This stylesheet is last and overrides the old board-head + hint layout.
 */

/* Centered name: no glass/card frame. The pencil explicitly signals editing,
 * while the existing #boardTitle input retains debounce/auto-save behavior. */
html body:has(#editorView:not([hidden])) .topbar #canvasTitleDock:not([hidden]){
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:17px!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  height:36px!important;
  width:min(278px,34vw)!important;
  max-width:calc(100vw - 350px)!important;
  min-width:0!important;
  padding:0!important;margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  pointer-events:auto!important;
  z-index:86!important;
}
html body #canvasTitleDock[hidden]{display:none!important}
html body:has(#editorView:not([hidden])) #canvasTitleDock #boardTitle,
html body[data-theme="light"]:has(#editorView:not([hidden])) #canvasTitleDock #boardTitle,
html body[data-theme="dark"]:has(#editorView:not([hidden])) #canvasTitleDock #boardTitle{
  box-sizing:border-box!important;
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:238px!important;
  width:100%!important;
  height:34px!important;
  padding:0 2px!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-align:right!important;
  font-size:15px!important;
  font-weight:650!important;
  color:var(--text)!important;
  text-overflow:ellipsis!important;
  cursor:text!important;
  appearance:none!important;
}
html body:has(#editorView:not([hidden])) #canvasTitleDock #boardTitle:focus-visible{
  box-shadow:inset 0 -1px 0 var(--accent)!important;
}
html body:has(#editorView:not([hidden])) #canvasTitleDock #canvasTitleEdit{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 27px!important;
  width:27px!important;
  height:30px!important;
  padding:0!important;
  color:var(--muted)!important;
  background:transparent!important;
  border:0!important;
  border-radius:8px!important;
  box-shadow:none!important;
  pointer-events:auto!important;
}
html body:has(#editorView:not([hidden])) #canvasTitleDock #canvasTitleEdit:hover{
  color:var(--accent)!important;
}

/* Bottom-center existing board-head is now ONLY the operational ticker.
 * Position comes from the existing #canvas-dock-layout ResizeObserver so it
 * tracks the space left of the inspector in expanded and collapsed modes. */
html body:has(#editorView:not([hidden])) .topbar #boardHead.canvas-status-dock:not([hidden]),
html body[data-theme="light"]:has(#editorView:not([hidden])) .topbar #boardHead.canvas-status-dock:not([hidden]),
html body[data-theme="dark"]:has(#editorView:not([hidden])) .topbar #boardHead.canvas-status-dock:not([hidden]){
  position:fixed!important;
  top:auto!important;
  bottom:18px!important;
  left:var(--canvas-dock-status-center,50%)!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:6px 11px!important;
  height:35px!important;
  width:min(380px,calc(100vw - 250px))!important;
  min-width:180px!important;
  max-width:calc(100vw - 40px)!important;
  margin:0!important;
  border-radius:13px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:rgba(30,33,36,.65)!important;
  box-shadow:0 7px 22px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(17px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(17px) saturate(125%)!important;
  pointer-events:auto!important;
  z-index:83!important;
}
html body[data-theme="light"]:has(#editorView:not([hidden])) .topbar #boardHead.canvas-status-dock:not([hidden]){
  background:rgba(224,231,224,.76)!important;
  border-color:rgba(255,255,255,.48)!important;
}
html body:has(#editorView:not([hidden])) #boardHead .canvas-status-scroll{
  box-sizing:border-box!important;
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  flex:1 1 auto!important;
  min-width:0!important;
  height:22px!important;
  white-space:nowrap!important;
  pointer-events:none!important;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
html body:has(#editorView:not([hidden])) #boardHead #canvasHint.canvas-hint{
  position:relative!important;
  inset:auto!important;
  display:inline-block!important;
  width:max-content!important;
  max-width:none!important;
  height:22px!important;
  line-height:22px!important;
  padding:0 0 0 100%!important;
  margin:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  white-space:nowrap!important;
  overflow:visible!important;
  color:var(--muted)!important;
  font-size:11px!important;
  transform:none;
  animation:canvas-status-marquee 18s linear infinite!important;
  will-change:transform;
  pointer-events:none!important;
}
@keyframes canvas-status-marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}
html body:has(#editorView:not([hidden])) #boardHead #saveStatus{
  position:relative!important;
  flex:0 0 auto!important;
  min-width:0!important;
  max-width:130px!important;
  white-space:nowrap!important;
  font-size:10px!important;
  line-height:20px!important;
  border-left:1px solid var(--edge)!important;
  padding:0 0 0 9px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  cursor:pointer!important;
}
html body:has(#editorView:not([hidden])) #boardHead #saveStatus.error{
  color:#eb837c!important;
}
@media(prefers-reduced-motion:reduce){
  html body:has(#editorView:not([hidden])) #boardHead #canvasHint.canvas-hint{
    animation:none!important;padding-left:0!important;
  }
}

/* Left tools, strictly top-to-bottom:
 * PLUS, frame, 3D shot, assets, grid, guide, HOME.
 * No image-upload toolbar shortcut: it lives inside the plus popup. */
html body:has(#editorView:not([hidden])) #editorView #canvasAddBtn.canvas-add-button{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  align-self:center!important;
  flex:0 0 38px!important;
  background:#f4d544!important;
  background-image:none!important;
  color:#222014!important;
  width:38px!important;min-width:38px!important;max-width:38px!important;
  height:38px!important;min-height:38px!important;max-height:38px!important;
  border:0!important;
  border-radius:50%!important;
  margin:2px auto 5px!important;
  gap:0!important;
  padding:0!important;
  box-shadow:0 4px 12px rgba(192,155,35,.16)!important;
}
html body:has(#editorView:not([hidden])) #editorView #canvasAddBtn.canvas-add-button:hover,
html body:has(#editorView:not([hidden])) #editorView #canvasAddBtn.canvas-add-button[aria-expanded="true"]{
  background:#ffe164!important;
  box-shadow:0 5px 15px rgba(209,174,40,.24)!important;
}
html body:has(#editorView:not([hidden])) #editorView #canvasAddBtn .canvas-plus-icon{
  box-sizing:border-box!important;
  display:block!important;
  flex:0 0 20px!important;
  width:20px!important;
  height:20px!important;
  padding:0!important;
  margin:0!important;
  pointer-events:none!important;
  overflow:visible!important;
}

/* One compact glass popup, next to the PLUS: not an entire new navigation. */
html body #canvasAddMenu[hidden]{display:none!important}
html body:has(#editorView:not([hidden])) #editorView > #canvasAddMenu.canvas-add-menu:not([hidden]){
  box-sizing:border-box!important;
  position:absolute!important;
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  width:218px!important;
  max-width:calc(100vw - 24px)!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  padding:12px!important;
  border:1px solid var(--edge)!important;
  border-radius:16px!important;
  background:var(--glass)!important;
  box-shadow:0 15px 32px var(--light-shadow)!important;
  backdrop-filter:blur(20px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(145%)!important;
  z-index:25!important;
  pointer-events:auto!important;
}
html body:has(#editorView:not([hidden])) #canvasAddMenu .canvas-add-menu-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  padding:1px 4px 7px!important;
  margin-bottom:3px!important;
  border-bottom:1px solid var(--hair)!important;
}
html body:has(#editorView:not([hidden])) #canvasAddMenu .canvas-add-menu-head strong{
  font-size:12px!important;font-weight:650!important;
}
html body:has(#editorView:not([hidden])) #canvasAddMenu .canvas-add-menu-head button{
  width:25px!important;height:25px!important;
  padding:0!important;
  font-size:19px!important;
  border:0!important;
  background:transparent!important;
  color:var(--muted)!important;
}
html body:has(#editorView:not([hidden])) #canvasAddMenu > button,
html body:has(#editorView:not([hidden])) #canvasAddMenu > a{
  box-sizing:border-box!important;
  display:flex!important;align-items:center!important;
  gap:12px!important;
  width:100%!important;
  min-height:37px!important;
  padding:9px 11px!important;
  border-radius:9px!important;
  border:0!important;
  background:transparent!important;
  color:var(--text)!important;
  text-align:left!important;
  font-size:12px!important;
  font-weight:500!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
html body:has(#editorView:not([hidden])) #canvasAddMenu > :is(button,a):hover,
html body:has(#editorView:not([hidden])) #canvasAddMenu > :is(button,a):focus-visible{
  background:var(--hair)!important;
  color:var(--accent)!important;
}
html body:has(#editorView:not([hidden])) #canvasAddMenu > :is(button,a) span{
  display:inline-grid!important;place-items:center!important;
  width:19px!important;height:19px!important;
  font-size:16px!important;
  flex:0 0 19px!important;
  color:var(--accent)!important;
}
@media(max-width:780px){
  html body:has(#editorView:not([hidden])) .topbar #canvasTitleDock:not([hidden]){
    top:15px!important;
    width:min(190px,30vw)!important;
    max-width:calc(100vw - 245px)!important;
  }
  html body:has(#editorView:not([hidden])) #canvasTitleDock #boardTitle{
    font-size:12px!important;
  }
  html body:has(#editorView:not([hidden])) .topbar #boardHead.canvas-status-dock:not([hidden]){
    bottom:76px!important;
    width:min(300px,calc(100vw - 42px))!important;
  }
}

/* Follow-up 2026-10-22: bright UI continuity and single right-side guide. */

/* Light-coloured reference screenshot uses nine OUTLINED cells, not hash. */
html body:has(#editorView:not([hidden])) #editorView #canvasGridBtn .canvas-grid-squares{
  display:block!important;
  width:21px!important;
  height:21px!important;
  flex:none!important;
}

/* When guide is selected the ORIGINAL Inspector is still the only glass card.
   The panel is content only: no separate modal, border, nested glass or veil. */
html body #canvasGuidePanel[hidden]{
  display:none!important;
}
html body:has(#editorView:not([hidden])) #editorView > #inspector #canvasGuidePanel:not([hidden]){
  display:block!important;
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  max-width:100%!important;
  padding:17px 15px!important;
  margin:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:var(--text)!important;
}
html body:has(#editorView:not([hidden])) #canvasGuidePanel h3{
  margin:0 0 15px!important;
  font-size:14px!important;
  font-weight:650!important;
  color:var(--text)!important;
}
html body:has(#editorView:not([hidden])) #canvasGuidePanel p{
  margin:0 0 17px!important;
  padding:0!important;
  color:var(--muted)!important;
  font-size:12px!important;
  line-height:1.85!important;
}
html body:has(#editorView:not([hidden])) #canvasGuidePanel .canvas-guide-shortcuts{
  padding:11px!important;
  margin:0 0 17px!important;
  color:var(--text)!important;
  background:var(--hair)!important;
  border-radius:10px!important;
  border:0!important;
  font-size:11px!important;
  line-height:2.15!important;
}
html body:has(#editorView:not([hidden])) #canvasGuidePanel kbd{
  color:var(--accent)!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  font-size:11px!important;
}
html body:has(#editorView:not([hidden])) #canvasGuideBtn.is-active{
  color:var(--accent)!important;
}

/* The thumbnail canvas used to fill itself with opaque #d6d9d6 in LIGHT
   mode, completely concealing the surrounding page's refractive surface.
   Its drawing surface is now transparent; this one material owns the glass.
   Keep the exact existing mini-map frame and hit-testing dimensions. */
html body[data-theme="light"]:has(#editorView:not([hidden])) #editorView > #canvasShell > #canvasMinimap.canvas-minimap{
  background:linear-gradient(145deg,rgba(227,238,230,.31),rgba(174,186,175,.18) 65%,rgba(210,221,213,.24))!important;
  border:1px solid rgba(250,253,248,.54)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.57),
    0 9px 24px rgba(34,41,35,.16)!important;
  backdrop-filter:blur(18px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%)!important;
  isolation:isolate!important;
}
html body[data-theme="light"]:has(#editorView:not([hidden])) #editorView > #canvasShell > #canvasMinimap.canvas-minimap::before,
html body[data-theme="light"]:has(#editorView:not([hidden])) #editorView > #canvasShell > #canvasMinimap.canvas-minimap::after{
  content:none!important;
  display:none!important;
}
/* Canvas paints only topology/viewport, not a second opaque panel. */
html body[data-theme="light"]:has(#editorView:not([hidden])) #canvasMinimapSurface{
  position:relative!important;
  z-index:1!important;
  background:transparent!important;
  background-image:none!important;
}

/* Once the REAL shared website lens has mounted onto the mini-map, its
   shader supplies the only glass rim. Never double it with a CSS border.
   Transparent topology canvas remains above the refractive glass surface. */
@media(prefers-reduced-motion:no-preference){
  html body[data-theme="light"]:has(#editorView:not([hidden])) #editorView > #canvasShell > #canvasMinimap.canvas-minimap[data-canvas-optics-ready]{
    background:transparent!important;
    background-image:none!important;
    border-color:transparent!important;
    box-shadow:0 9px 24px rgba(34,41,35,.13)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}
html body[data-theme="light"]:has(#editorView:not([hidden])) #editorView > #canvasShell > #canvasMinimap.canvas-minimap > .canvas-glass-render{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  z-index:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:inherit!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none!important;
}