/* DAAILOK · 2026-10-29. Palette is the ONE surface material authority.
   Geometry, behavior and data never change; no duplicate optical rims. */
html body{
 --canvas-rail-fill:var(--glass);
 --canvas-rail-edge:var(--edge);
 --canvas-rail-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 42px var(--light-shadow);
 --canvas-rail-blur:24px;
 --canvas-rail-saturation:135%;
}
html body[data-theme="light"]{
 --canvas-rail-fill:var(--daailok-home-glass-fill);
 --canvas-rail-edge:var(--daailok-home-glass-edge);
 --canvas-rail-shadow:var(--daailok-home-glass-shadow);
 --canvas-rail-blur:var(--daailok-home-glass-blur);
 --canvas-rail-saturation:.82;
}
/* One recipe for left palette, bottom-left map, centre status, bottom-right
   zoom, right inspector, account menu and account management dialog. */
html body :is(
 #editorView > .palette.glass,
 #editorView > #inspector.glass,
 #editorView > #canvasShell > #canvasMinimap.canvas-minimap,
 #editorView > #canvasShell > .zoom-controls.glass,
 .topbar #boardHead.canvas-status-dock:not([hidden]),
 .topbar #canvasAccountMenu.canvas-account-menu:not([hidden]),
 #canvasProfileDialog.canvas-profile-dialog[open]
){
 background:var(--canvas-rail-fill)!important;
 background-image:var(--canvas-rail-fill)!important;
 border:1px solid var(--canvas-rail-edge)!important;
 box-shadow:var(--canvas-rail-shadow)!important;
 backdrop-filter:blur(var(--canvas-rail-blur)) saturate(var(--canvas-rail-saturation))!important;
 -webkit-backdrop-filter:blur(var(--canvas-rail-blur)) saturate(var(--canvas-rail-saturation))!important;
}
/* No double edge/rim; keep each surface's native radius and dimensions. */
html body #editorView > #inspector.glass::before,
html body #editorView > #inspector.glass::after,
html body #editorView > #canvasShell > #canvasMinimap.canvas-minimap::before,
html body #editorView > #canvasShell > #canvasMinimap.canvas-minimap::after,
html body #canvasProfileDialog.canvas-profile-dialog::before,
html body #canvasProfileDialog.canvas-profile-dialog::after{
 content:none!important;display:none!important;
}
html body #editorView > #inspector.glass > :is(.inspector-header,.inspector-body,.inspector-bottom){
 background:transparent!important;background-image:none!important;
 box-shadow:none!important;backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
}
html body #editorView > #canvasShell > #canvasMinimap.canvas-minimap > #canvasMinimapSurface{
 background:transparent!important;background-image:none!important;
}
html body #editorView > :is(.palette.glass,#inspector.glass) > .canvas-glass-render,
html body #editorView > #canvasShell > :is(#canvasMinimap.canvas-minimap,.zoom-controls.glass) > .canvas-glass-render,
html body .topbar #boardHead.canvas-status-dock > .canvas-glass-render,
html body .topbar #canvasAccountMenu.canvas-account-menu > .canvas-glass-render{
 display:none!important;
}
html body .topbar #canvasAccountMenu.canvas-account-menu[hidden],
html body #canvasProfileDialog.canvas-profile-dialog:not([open]){
 display:none!important;
}
/* Director matches Studio's bare icon and 42px interactive hitbox. */
html body .topbar #canvasDirectorLink.canvas-nav-icon,
html body[data-theme="light"] .topbar #canvasDirectorLink.canvas-nav-icon,
html body[data-theme="dark"] .topbar #canvasDirectorLink.canvas-nav-icon{
 display:grid!important;place-items:center!important;
 width:42px!important;min-width:42px!important;
 height:42px!important;min-height:42px!important;
 margin:0!important;padding:0!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;overflow:visible!important;
 text-decoration:none!important;
}
html body .topbar #canvasDirectorLink.canvas-nav-icon svg{
 display:block!important;width:27px!important;height:27px!important;
 min-width:27px!important;min-height:27px!important;stroke-width:1.8!important;
}
html body .topbar #canvasDirectorLink.canvas-nav-icon:hover,
html body .topbar #canvasDirectorLink.canvas-nav-icon:active{
 color:var(--accent)!important;border:0!important;
 background:transparent!important;box-shadow:none!important;
}
html body .topbar #canvasDirectorLink.canvas-nav-icon:focus-visible{
 outline:2px solid var(--accent)!important;outline-offset:2px!important;
}
html body .topbar #canvasDirectorLink.canvas-nav-icon > .canvas-glass-render{
 display:none!important;
}
html[data-director-home="true"] body .topbar #canvasDirectorLink{display:none!important}

/* The older boards/editor rules can override the director item's size and
 * border. Make BOTH navigation links use the same hitbox and icon dimensions
 * in all modes; a clapperboard does NOT get a framed button around it. */
html body .topbar .top-actions :is(#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon,
html body:has(#boardsView:not([hidden])) > .topbar .top-actions :is(#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon,
html body:has(#editorView:not([hidden])) > .topbar .top-actions :is(#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon{
 display:grid!important;place-items:center!important;
 box-sizing:border-box!important;flex:0 0 42px!important;
 width:42px!important;min-width:42px!important;max-width:42px!important;
 height:42px!important;min-height:42px!important;max-height:42px!important;
 padding:0!important;margin:0!important;
 border:0!important;outline: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;
 transform:none!important;overflow:visible!important;
}
html body .topbar .top-actions :is(#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon svg,
html body:has(#boardsView:not([hidden])) > .topbar .top-actions :is(#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon svg,
html body:has(#editorView:not([hidden])) > .topbar .top-actions :is(#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon svg{
 width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;
 stroke-width:1.8!important;
}
html body .topbar .top-actions :is(#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon:focus-visible{
 outline:2px solid var(--accent)!important;outline-offset:2px!important;
}
html body .topbar .top-actions :is(#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon:is(:hover,:active){
 color:var(--accent)!important;border:0!important;
 background:transparent!important;box-shadow:none!important;
}
html body .topbar .top-actions :is(#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon > .canvas-glass-render,
html body .topbar .top-actions :is(#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon::before,
html body .topbar .top-actions :is(#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon::after{
 display:none!important;content:none!important;
}
html body:has(#boardsView:not([hidden])) > .topbar .top-actions{
 max-width:min(310px,calc(100vw - 104px))!important;
}

/* Optical size, not box size: the Studio cube occupies 16/24 of its 27px
 * viewBox while the clapper occupies 18/24. The clapper's wide silhouette needs a smaller
 * intrinsic size than the cube to look balanced on screen. Both retain identical hitboxes. */
html body .topbar .top-actions #canvasDirectorLink.canvas-nav-icon svg,
html body:has(#boardsView:not([hidden])) > .topbar .top-actions #canvasDirectorLink.canvas-nav-icon svg,
html body:has(#editorView:not([hidden])) > .topbar .top-actions #canvasDirectorLink.canvas-nav-icon svg{
 width:20px!important;height:20px!important;
 min-width:20px!important;min-height:20px!important;
 max-width:20px!important;max-height:20px!important;
 stroke-width:1.7!important;
}

/* Oct 29 · final navigation geometry. Equal centres and gaps, not equal
 * SVG viewBox sizes: three buttons use the SAME 36px box and 10px pitch. */
html body .topbar .top-actions,
html body:has(#boardsView:not([hidden])) > .topbar .top-actions,
html body:has(#editorView:not([hidden])) .topbar .top-actions{
 display:flex!important;
 flex-direction:row!important;
 flex-wrap:nowrap!important;
 align-items:center!important;
 justify-content:flex-end!important;
 column-gap:10px!important;
 row-gap:0!important;
 min-width:0!important;
 width:max-content!important;
 max-width:calc(100vw - 24px)!important;
}
html body:has(#editorView:not([hidden])) .topbar .top-actions{
 height:44px!important;
}
html body:has(#boardsView:not([hidden])) > .topbar .top-actions{
 height:44px!important;
 max-width:calc(100vw - 100px)!important;
}
html body .topbar .top-actions > :is(#themeToggle,#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon,
html body:has(#boardsView:not([hidden])) > .topbar .top-actions > :is(#themeToggle,#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon,
html body:has(#editorView:not([hidden])) .topbar .top-actions > :is(#themeToggle,#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon{
 display:grid!important;
 place-items:center!important;
 flex:0 0 36px!important;
 align-self:center!important;
 box-sizing:border-box!important;
 position:relative!important;
 inset:auto!important;
 width:36px!important;
 min-width:36px!important;
 max-width:36px!important;
 height:36px!important;
 min-height:36px!important;
 max-height:36px!important;
 margin:0!important;
 padding:0!important;
 gap:0!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;
 transform:none!important;
 line-height:0!important;
}
html body .topbar .top-actions > :is(#themeToggle,#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon:is(:hover,:active){
 transform:none!important;
 color:var(--accent)!important;
 background:transparent!important;
 box-shadow:none!important;
 border:0!important;
}
html body .topbar .top-actions > :is(#themeToggle,#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon > .canvas-glass-render,
html body .topbar .top-actions > :is(#themeToggle,#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon::before,
html body .topbar .top-actions > :is(#themeToggle,#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon::after{
 display:none!important;
 content:none!important;
}
html body .topbar .top-actions > :is(#themeToggle,#canvasDirectorLink).canvas-nav-icon svg,
html body:has(#boardsView:not([hidden])) > .topbar .top-actions > :is(#themeToggle,#canvasDirectorLink).canvas-nav-icon svg,
html body:has(#editorView:not([hidden])) .topbar .top-actions > :is(#themeToggle,#canvasDirectorLink).canvas-nav-icon svg{
 display:block!important;
 flex:none!important;
 width:22px!important;
 min-width:22px!important;
 max-width:22px!important;
 height:22px!important;
 min-height:22px!important;
 max-height:22px!important;
 stroke-width:1.7!important;
 transform:none!important;
}
html body .topbar .top-actions > #canvasStudioLink.canvas-nav-icon svg,
html body:has(#boardsView:not([hidden])) > .topbar .top-actions > #canvasStudioLink.canvas-nav-icon svg,
html body:has(#editorView:not([hidden])) .topbar .top-actions > #canvasStudioLink.canvas-nav-icon svg{
 display:block!important;
 flex:none!important;
 width:24px!important;
 min-width:24px!important;
 max-width:24px!important;
 height:24px!important;
 min-height:24px!important;
 max-height:24px!important;
 stroke-width:1.7!important;
 transform:none!important;
}
html body .topbar .top-actions > .daailok-credit-balance{
 margin:0 0 0 2px!important;
 align-self:center!important;
 flex:0 0 auto!important;
}
html body .topbar .top-actions > #canvasAccountControl{
 margin:0!important;
 align-self:center!important;
 flex:0 0 auto!important;
}
/* Keep a visible focus indicator for keyboard navigation, not a static box. */
html body .topbar .top-actions > :is(#themeToggle,#canvasStudioLink,#canvasDirectorLink).canvas-nav-icon:focus-visible{
 outline:2px solid var(--accent)!important;
 outline-offset:2px!important;
}

/* Restore ORIGINAL icon glyph sizes. Maintain 36px common hitboxes,
 * 10px gaps and same vertical centre; do not scale glyphs to align them. */
html body .topbar .top-actions > #themeToggle.canvas-nav-icon svg,
html body:has(#boardsView:not([hidden])) > .topbar .top-actions > #themeToggle.canvas-nav-icon svg,
html body:has(#editorView:not([hidden])) .topbar .top-actions > #themeToggle.canvas-nav-icon svg{
 width:17px!important;height:17px!important;
 min-width:17px!important;min-height:17px!important;
 max-width:17px!important;max-height:17px!important;
}
html body .topbar .top-actions > #canvasStudioLink.canvas-nav-icon svg,
html body:has(#boardsView:not([hidden])) > .topbar .top-actions > #canvasStudioLink.canvas-nav-icon svg,
html body:has(#editorView:not([hidden])) .topbar .top-actions > #canvasStudioLink.canvas-nav-icon svg{
 width:27px!important;height:27px!important;
 min-width:27px!important;min-height:27px!important;
 max-width:27px!important;max-height:27px!important;
}
html body .topbar .top-actions > #canvasDirectorLink.canvas-nav-icon svg,
html body:has(#boardsView:not([hidden])) > .topbar .top-actions > #canvasDirectorLink.canvas-nav-icon svg,
html body:has(#editorView:not([hidden])) .topbar .top-actions > #canvasDirectorLink.canvas-nav-icon svg{
 width:20px!important;height:20px!important;
 min-width:20px!important;min-height:20px!important;
 max-width:20px!important;max-height:20px!important;
}