/* Layout-only overrides for /studio/, linked by index.php after the page's own CSS.
   Nothing here touches colour, type or copy, so all 13 themes keep their look, and the
   shell stays byte-for-byte (tools/roundtrip.php). Delete the <link> in index.php to undo. */

/* 1. The corner Menu sat on top of the page's own Contact button (desktop) and hamburger
      (phone). The nav now keeps that corner free and the Menu lines up with the nav row. */
@media (max-width:1700px){ .top-nav{padding-right:118px!important} }
@media (max-width:600px){ .top-nav{padding-right:64px!important} }
body .zr-bar{top:23px;transition:top .35s ease}
body .top-nav.scrolled ~ .zr-bar{top:15px}
@media (max-width:720px){ body .zr-bar,body .top-nav.scrolled ~ .zr-bar{top:12px} }

/* 2. Floating HUD blocks (diagnostics top right, radar bottom left) are fixed over the page.
      Below 1900px there is no empty gutter for them, so they covered the Contact button, the
      hero copy and both hero buttons. They now appear only where they fit. Hidden, not removed. */
@media (max-width:1899px){
  div.fixed.top-5.right-6.font-mono,
  div.radar-wrapper{display:none!important}
}
@media (min-width:1900px){ div.fixed.top-5.right-6.font-mono{right:124px!important} }

/* 3. The footer line ran underneath the fixed theme dock and its label. */
@media (min-width:721px){ .site-footer{padding-bottom:136px!important} }

/* 4. Phone: the e-mail address was wider than its panel and got cut off at the right edge. */
@media (max-width:720px){
  .contact-link{max-width:100%;gap:10px!important;font-size:clamp(.56rem,3.35vw,.9rem)!important}
  .contact-link i{flex:0 0 auto;width:38px!important;height:38px!important}
}

/* 5. Two blocks on this page are invented instrumentation: an "incoming transmission
      monitor" that prints made-up hex ids and status lines, and the per-theme
      atmosphere / doctrine / carrier readout. Neither reports anything real. Their
      text lives in the saved content revision and in the theme JavaScript, so they
      are hidden here rather than deleted; remove these three rules to bring them back. */
.contact-panel{grid-template-columns:1fr!important}
.terminal-panel{display:none!important}
#env-readout{display:none!important}

/* 6. The logo mark is set in Fabrik (OFL, installed on this machine). Visitors do not
      have the font, so the Z is drawn from the glyph's own outline and painted as a
      mask - it still takes its colour from whichever of the 13 themes is on. */
.brand-mark span{font-size:0!important}
.brand-mark span::before,.brand i::before{content:"";display:block;width:19.78px;height:24px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 562 682'%3E%3Cpath d='M92 0L92 0L562 0L171 594L555 594L555 682L0 682L407 80L66 80L92 0Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 562 682'%3E%3Cpath d='M92 0L92 0L562 0L171 594L555 594L555 682L0 682L407 80L66 80L92 0Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat}

/* 7. Corner bevels, 6px. Each rule mirrors a chamfer rule in the shell and uses the SAME
      selector, so it wins on source order alone - no !important, and every theme keeps the
      precedence it already had. Shapes that are not chamfers are deliberately untouched:
      the tamil and fantasy arrow buttons, the tamil / fantasy / artdeco diamond and
      hexagon marks, and the themes that round their panels with clip-path:none. */
:root{--bevel:6px}
body:not(.theme-cartoon):not(.theme-solarpunk):not(.theme-corporate):not(.theme-ocean):not(.theme-storybook):not(.theme-tamil):not(.theme-artdeco) .hard-panel{clip-path:polygon(var(--bevel) 0,100% 0,100% calc(100% - var(--bevel)),calc(100% - var(--bevel)) 100%,0 100%,0 var(--bevel))}
body:not(.theme-cartoon):not(.theme-solarpunk):not(.theme-corporate):not(.theme-ocean):not(.theme-storybook):not(.theme-artdeco) .magnetic-btn{clip-path:polygon(var(--bevel) 0,100% 0,100% calc(100% - var(--bevel)),calc(100% - var(--bevel)) 100%,0 100%,0 var(--bevel))}
.hero-command{clip-path:polygon(var(--bevel) 0,100% 0,100% calc(100% - var(--bevel)),calc(100% - var(--bevel)) 100%,0 100%,0 var(--bevel))}
.brand-mark{clip-path:polygon(var(--bevel) 0,100% 0,100% calc(100% - var(--bevel)),calc(100% - var(--bevel)) 100%,0 100%,0 var(--bevel))}                    /* themed diamonds and circles still win */
body:not([class*="theme-"]) .ornament::before{clip-path:polygon(var(--bevel) 0,100% 0,100% calc(100% - var(--bevel)),calc(100% - var(--bevel)) 100%,0 100%,0 var(--bevel))}
body:not([class*="theme-"]) .ornament::after{clip-path:polygon(var(--bevel) 0,100% 0,100% 100%,var(--bevel) 100%)}
/* themes with their own chamfer geometry keep it, just smaller */
body.theme-artdeco .hard-panel,body.theme-artdeco .magnetic-btn{clip-path:polygon(var(--bevel) 0,calc(100% - var(--bevel)) 0,100% var(--bevel),100% calc(100% - var(--bevel)),calc(100% - var(--bevel)) 100%,var(--bevel) 100%,0 calc(100% - var(--bevel)),0 var(--bevel))}
body.theme-espionage .hard-panel,body.theme-desert .hard-panel,body.theme-desert .magnetic-btn{clip-path:polygon(0 0,calc(100% - var(--bevel)) 0,100% var(--bevel),100% 100%,var(--bevel) 100%,0 calc(100% - var(--bevel)))}

/* 8. Art deco paints its Z with a gradient clipped to the letter. A letter with no height
      cannot carry one, so the drawn glyph takes the same gradient instead. */
body.theme-artdeco .brand-mark span::before{background:linear-gradient(180deg,#fff6d8,#e6c46a 50%,#8c6a1e)}