/* Owner stone-wall drawer / floor fog. The wall asset is a seam-corrected,
   transparent WEBP derived from the supplied original (not a substitute image). */
@media screen {
  .shell { --stone-width: 250px; grid-template-columns:var(--stone-width) minmax(0,1fr); transition:grid-template-columns .46s cubic-bezier(.25,.75,.25,1) }
  .shell.site-collapsed { grid-template-columns:58px minmax(0,1fr) }
  .panel {
    width:var(--stone-width); max-width:none; min-width:0; min-height:100vh; height:auto; position:relative;
    background:linear-gradient(90deg,#110e0d,#131717 78%,#0b1311);
    border:0; overflow:visible; isolation:isolate;
    transform:translateX(0); transition:transform .46s cubic-bezier(.25,.75,.25,1);
    box-shadow:inset -12px 0 20px #03070580
  }
  .panel::before {
    content:""; position:absolute; inset:0 -25px 0 0; z-index:-1;
    background-image:url("./real-life-wall-seamless.webp");
    background-size:100% auto; background-position:left top; background-repeat:repeat-y;
    pointer-events:none;
  }
  /* In RTL the rugged edge faces the slide, not the outside of the viewport. */
  html[dir=rtl] .panel::before {inset:0 0 0 -25px;transform:scaleX(-1)}
  .panel > * {position:relative;z-index:1}
  .panel .site-nav-top button,.panel .project-btn,.panel #siteFounderLink,.panel .action-btn,.panel .lang-switch {
    text-shadow:0 2px 4px #000; box-shadow:0 2px 9px #0008;
  }
  .panel .brand,.panel .site-nav,.panel .controls,.panel .site-save,.panel .footer-tag {
    background:rgba(9,11,11,.44); border-radius:6px;
  }
  .panel .brand,.panel .site-nav,.panel .controls,.panel .site-save {padding:7px}
  .panel #sitePresentations>summary,.panel .control-label {color:#f6d4a3}
  .shell.site-collapsed .panel {transform:translateX(calc(58px - var(--stone-width)))}
  html[dir=rtl] .shell.site-collapsed .panel {transform:translateX(calc(var(--stone-width) - 58px))}
  .shell.site-collapsed .panel .site-nav {position:absolute;top:12px;right:4px;left:auto;margin:0;padding:0;background:transparent}
  html[dir=rtl] .shell.site-collapsed .panel .site-nav {right:auto;left:4px}
  .shell.site-collapsed .panel .site-nav-top {position:static;flex-direction:column}
  #siteFog {position:fixed;left:0;bottom:0;width:100%;height:min(27vh,230px);
    pointer-events:none;z-index:35;opacity:.72;mix-blend-mode:screen;
    mask-image:linear-gradient(to bottom,transparent,#000 48%);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 48%)}
  @media (max-width:780px) {
    .shell,.shell.site-collapsed {display:block}
    .panel {position:fixed;inset:0 auto 0 0;width:min(310px,85vw);height:100dvh;
      min-height:0;overflow-y:auto;transform:translateX(-110%);z-index:30}
    html[dir=rtl] .panel {inset:0 0 0 auto;transform:translateX(110%)}
    .shell.site-mobile-open .panel,html[dir=rtl] .shell.site-mobile-open .panel {transform:translateX(0)}
    .shell.site-collapsed .panel {transform:translateX(-110%)}
    html[dir=rtl] .shell.site-collapsed .panel {transform:translateX(110%)}
    .shell.site-mobile-open.site-collapsed .panel {transform:translateX(0)}
    /* The wall extends over scrollable mobile menu contents, not just the viewport. */
    .panel::before {background-size:100% auto;height:var(--stone-scroll-height,100dvh);bottom:auto}
  }
  @media (prefers-reduced-motion:reduce) {
    .shell,.panel {transition:none!important}
    #siteFog {opacity:.42}
  }
}
@media print {#siteFog{display:none!important}.panel::before{display:none!important}}


/* OWNER CORRECTIONS 2026-10-28: bare stone typography, invisible scrollbars,
   chevron-only handle, and real slide reflow. Keep all scrolling functional. */
@media screen {
  html,body,.shell,.workspace,.panel {
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }
  html::-webkit-scrollbar,body::-webkit-scrollbar,
  .shell::-webkit-scrollbar,.workspace::-webkit-scrollbar,
  .panel::-webkit-scrollbar {display:none!important;width:0!important;height:0!important}
  html,body {max-width:100%;overflow-x:clip}
  .shell {
    grid-template-columns:var(--stone-width) minmax(0,1fr)!important;
    width:100%;max-width:100%;min-width:0;overflow-x:clip;
  }
  .shell.site-collapsed {grid-template-columns:58px minmax(0,1fr)!important}
  .workspace {min-width:0;max-width:100%;overflow-x:clip!important}
  .slide-wrap,.slides-nav {min-width:0;max-width:100%}
  .panel {background:transparent!important;box-shadow:none!important;scrollbar-width:none!important}
  .panel::before {z-index:-1}
  .panel .brand,.panel .site-nav,.panel .controls,.panel .site-save,.panel .footer-tag,
  .panel .site-tree,.panel .project-group,
  .panel #siteHome,.panel #siteToggle,.panel .project-btn,.panel .lang-btn,
  .panel .lang-switch,.panel #siteFounderLink,.panel #siteSave,.panel .action-btn,
  .panel .control select,.panel .control input,
  .panel #sitePresentations>summary {
    background:transparent!important;
    background-image:none!important;
    border-color:transparent!important;
    border-radius:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  .panel .brand,.panel .site-nav,.panel .controls,.panel .site-save,.panel .footer-tag {
    background:transparent!important;
    padding-inline:5px;
  }
  .panel .project-btn,.panel #siteFounderLink,.panel .control-label,
  .panel #sitePresentations>summary,.panel .brand,.panel .lang-btn,
  .panel .lang-switch,.panel #siteToggle,.panel #siteHome,.panel #siteSave {
    color:#ffe4b2!important;
    text-shadow:0 2px 2px #080808,0 3px 8px #000,0 0 15px #000,
                -1px -1px 2px #100b07,1px 1px 2px #100b07!important;
  }
  .panel button:focus-visible,.panel a:focus-visible,.panel summary:focus-visible,
  #workspaceToggle:focus-visible {
    outline:2px solid #ffe3a8!important;outline-offset:1px;
    background:rgba(0,0,0,.16)!important;
  }
  .panel .project-btn[aria-pressed=true] {
    color:#fff7da!important;
    text-decoration:underline;text-decoration-color:#efd096;
    text-underline-offset:5px;
  }
  /* The toggle remains a real button; only the visual frame disappears. */
  #siteToggle,#siteHome,#workspaceToggle {
    display:inline-flex;justify-content:center;align-items:center;
    font:700 34px/1 Georgia,serif!important;
    color:#ffda9d!important;background:transparent!important;
    border:0!important;border-radius:0!important;
    box-shadow:none!important;text-shadow:0 2px 6px #000,0 0 12px #000!important;
    min-width:42px;min-height:44px;padding:0;
  }
  .shell.site-collapsed .panel .site-nav {z-index:5}
  .shell.site-collapsed .panel #siteHome {display:none!important}
  .shell.site-collapsed .panel #siteToggle {margin:0}
  /* v14 hides the whole heading, which also hides its mobile open button. */
  .workspace {position:relative}
  .workspace-head {
    display:flex!important;position:absolute;left:7px;top:7px;z-index:40;
    background:transparent!important;padding:0!important;margin:0!important;
    min-height:0!important;width:auto!important;
  }
  .workspace-head>span {display:none!important}
  #workspaceToggle {display:none!important}
  .shell.site-collapsed #workspaceToggle {display:none!important} /* desktop: the wall itself retains its chevron */
  html[dir=rtl] .workspace-head {left:auto;right:7px}
  @media(min-width:781px){
    /* Without the sidebar the real slide expands within the freed grid column. */
    .shell .slide-wrap {width:min(100%,calc((100dvh - 43px) * 16 / 9))!important}
    .shell .slides-nav {width:100%!important}
  }
  @media(max-width:780px){
    .shell,.shell.site-collapsed{display:block!important}
    .panel {
      overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;
      scrollbar-width:none!important;
    }
    .workspace {overflow-x:clip!important}
    #workspaceToggle {display:inline-flex!important}
    .shell.site-collapsed #workspaceToggle {display:inline-flex!important}
    .shell.site-mobile-open #workspaceToggle {display:none!important} /* keep one close arrow on the wall */
    .workspace-head{position:fixed;z-index:42;top:8px;left:8px}
    html[dir=rtl] .workspace-head{right:8px;left:auto}
    .panel .site-save,.panel .controls {max-width:100%}
    .panel .project-btn {white-space:normal!important;text-overflow:clip!important}
  }
  @media (prefers-reduced-motion:reduce){
    .shell,.panel{transition:none!important}
  }
}
@media print {.workspace-head,#workspaceToggle{display:none!important}}


/* Owner review: one compact, fixed-height top row for both desktop/mobile/RTL. */
@media screen {
  .panel {padding:8px!important}
  .panel .site-nav {margin:0!important;padding:0!important;gap:6px}
  .panel .site-nav-top,.shell.site-collapsed .panel .site-nav-top {
    display:flex!important;flex-direction:row!important;align-items:center;
    justify-content:flex-start;gap:6px;height:36px;min-height:36px;
  }
  #siteToggle,#siteHome,#workspaceToggle {
    flex:0 0 34px!important;width:34px!important;height:34px!important;
    min-width:34px!important;min-height:34px!important;max-width:34px!important;
    max-height:34px!important;padding:0!important;margin:0!important;
    font-size:25px!important;line-height:1!important;
  }
  #workspaceToggle {position:static!important;top:auto!important;left:auto!important;right:auto!important}
  #siteToggle {order:0!important;margin-inline-start:0!important}
  #siteHome {order:1!important}
  .shell.site-collapsed .panel .site-nav,
  html[dir=rtl] .shell.site-collapsed .panel .site-nav {
    position:absolute!important;top:8px!important;
    left:auto!important;right:auto!important;
    inset-inline-start:calc(var(--stone-width) - 49px)!important;
    inset-inline-end:auto!important;
    margin:0!important;padding:0!important;
  }
  .site-tree .site-project-direction {
    min-width:0;margin:6px 0;padding:2px 4px;display:grid;gap:5px;
  }
  .site-tree .site-project-direction select {
    width:100%;min-height:36px;padding:4px 2px;color:#ffe4b2!important;
    text-shadow:0 1px 5px #000!important;appearance:auto;
    border:0!important;background:transparent!important;
  }
  .site-tree .site-project-direction option {color:#f4ddbb;background:#13181a}
  #sitePresentations > summary {margin-top:7px}
  #siteFog {
    height:min(20vh,180px);
    opacity:.64;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 53%);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 53%);
  }
  @media(max-width:780px) {
    .workspace-head,.panel .site-nav {top:8px!important}
    .workspace-head{left:8px!important;right:auto!important}
    html[dir=rtl] .workspace-head{left:auto!important;right:8px!important}
    .shell.site-mobile-open .panel .site-nav {position:relative!important;top:auto!important}
  }
}


@media screen {
  #siteHome .home-glyph {
    width:25px;height:25px;display:block;fill:none;
    stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 2px 4px #000);pointer-events:none;
  }
}

/* Owner review IV: readable type and one sliding direction submenu per project. */
@media screen {
  #sitePresentations>summary {
    font-size:20px!important;line-height:1.35!important;font-weight:750!important;
  }
  .site-tree .project-folder {
    display:block;min-width:0;padding:0;margin:0;
    background:transparent!important;border:0!important;
  }
  .site-tree .project-folder>summary {
    display:flex;align-items:center;gap:6px;cursor:pointer;
    list-style:none;font-size:18px!important;font-weight:650!important;
    line-height:1.4;padding:9px 4px!important;min-height:43px;
    color:#ffe4b2!important;text-shadow:0 2px 5px #000,0 0 13px #000!important;
    background:transparent!important;border:0!important;box-shadow:none!important;
  }
  .site-tree .project-folder>summary::-webkit-details-marker {display:none}
  .site-tree .project-folder>summary::before {
    content:"▸";display:inline-block;opacity:.88;font-size:15px;
    transition:transform .23s ease;
  }
  .site-tree .project-folder[open]>summary::before {transform:rotate(90deg)}
  html[dir=rtl] .site-tree .project-folder>summary::before {transform:scaleX(-1)}
  html[dir=rtl] .site-tree .project-folder[open]>summary::before {transform:scaleX(-1) rotate(90deg)}
  .site-tree .project-folder>summary[aria-current=true] {color:#fff3d1!important}
  .site-tree #siteFounderLink {
    display:block;font-size:16px!important;line-height:1.4!important;
    font-weight:500!important;margin:7px 0;
  }
  .site-tree .site-project-direction {
    margin:0 5px 9px 19px;padding:4px 0 7px 10px;
    border-inline-start:1px solid rgba(255,213,144,.45)!important;
  }
  html[dir=rtl] .site-tree .site-project-direction {
    margin:0 19px 9px 5px;padding:4px 10px 7px 0;
  }
  .site-tree .site-project-direction[hidden]{display:none!important}
  .site-tree .site-project-direction .control-label{font-size:16px!important}
  .site-tree .site-project-direction select{font-size:16px!important}
  .panel #sitePresentations>summary:focus-visible,
  .site-tree .project-folder>summary:focus-visible{
    outline:2px solid #ffe3a8;outline-offset:2px;
  }
  /* Native disclosure animates down/up without extra stateful animation libraries. */
  @supports selector(details::details-content) {
    .site-tree .project-folder {interpolate-size:allow-keywords}
    .site-tree .project-folder::details-content {
      height:0;opacity:0;overflow:clip;
      transition:height .27s ease,opacity .22s ease,content-visibility .27s allow-discrete;
    }
    .site-tree .project-folder[open]::details-content {height:auto;opacity:1}
  }
  @media (prefers-reduced-motion:reduce) {
    .site-tree .project-folder::details-content,
    .site-tree .project-folder>summary::before{transition:none!important}
  }
}