/* =============================================================================
   24-sandbox.css — the sandbox shell.

   Laid out after USD Composer: menu bar across the top, a vertical tool strip
   down the left edge of the viewport, the Stage / Layer / Render Settings dock
   on the RIGHT with Property beneath it, a tabbed dock along the bottom, and a
   status line. Dark, because the viewport is the brightest thing on screen and
   everything else has to get out of its way. The accent stays the site's gold
   so the two pages read as one project.
   ========================================================================== */

:root{
  --bg:#1B1A18; --panel:#232220; --panel2:#2A2825; --sunk:#151413;
  --line:#343230; --line2:#42403C;
  --ink:#E8E4DB; --ink2:#A9A399; --ink3:#7C766C;
  --acc:#D2AE55; --acc2:#8A6E2A; --accwash:rgba(210,174,85,.14);
  --live:#8FBF7A; --warn:#D98A5A;
  --x:#D96A6A; --y:#8FBF6A; --z:#6A94D9;
  --sans:'Libre Franklin',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Courier Prime',ui-monospace,Consolas,'DejaVu Sans Mono',monospace;
  --row:22px;
  --dock:312px;
}

*{box-sizing:border-box}
/* Several things this sheet hides with the `hidden` attribute also carry an
   author `display`, which beats the UA rule — so state it once, here. */
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
     font-size:13px;overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--accwash)}

/* ---------------------------------------------------------------- shell --- */
.app{display:grid;height:100%;
     grid-template-columns:42px minmax(0,1fr) var(--dock);
     grid-template-rows:30px minmax(0,1fr) auto 22px;
     grid-template-areas:
       "bar    bar     bar"
       "tools  centre  right"
       "tools  bottom  right"
       "status status  status";
     gap:1px;background:var(--line)}

.bar{grid-area:bar}
.tools{grid-area:tools}
.centre{grid-area:centre;display:flex;flex-direction:column;gap:1px;min-height:0;min-width:0;background:var(--line)}
.bottom{grid-area:bottom}
.right{grid-area:right}
.status{grid-area:status}

/* ------------------------------------------------------------- menu bar --- */
.bar{background:var(--panel);display:flex;align-items:center;gap:.1rem;padding:0 .3rem}
.bar .sep{width:1px;height:16px;background:var(--line2);margin:0 .35rem;flex:none}
.bar .grow{flex:1}

/* The way out. It is first in the bar, it is a link, and it says where it
   goes — a logo that happens to be clickable is not an exit. */
.back{display:flex;align-items:center;gap:.35rem;text-decoration:none;color:var(--ink);
      background:var(--panel2);border:1px solid var(--line2);border-radius:3px;
      padding:.16rem .5rem .16rem .34rem;font-size:.74rem;white-space:nowrap}
.back:hover{background:var(--accwash);border-color:var(--acc2);color:var(--acc)}
.back svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;
          stroke-linecap:round;stroke-linejoin:round;flex:none}
.back b{font-weight:600}
@media (max-width:1080px){ .back span b{display:none} }

.appname{display:flex;align-items:center;gap:.35rem;font-size:.74rem;color:var(--ink2);
         white-space:nowrap;padding-right:.2rem}

.exit{text-decoration:none;color:var(--ink3);font-size:.72rem;padding:.16rem .5rem;
      border:1px solid transparent;border-radius:3px;white-space:nowrap}
.exit:hover{color:var(--acc);border-color:var(--line2)}

.mbtn{background:none;border:0;padding:.2rem .48rem;border-radius:3px;cursor:pointer;
      font-size:.74rem;color:var(--ink2);white-space:nowrap}
.mbtn:hover{background:var(--panel2);color:var(--ink)}
.mbtn[aria-expanded="true"]{background:var(--panel2);color:var(--ink)}

/* drop menus ------------------------------------------------------------- */
.drop{position:absolute;z-index:60;min-width:222px;background:var(--panel2);
      border:1px solid var(--line2);border-radius:4px;padding:.25rem;
      box-shadow:0 12px 30px rgba(0,0,0,.5);display:none}
.drop.open{display:block}
.drop button{display:flex;width:100%;align-items:center;gap:.5rem;background:none;border:0;
             padding:.28rem .45rem;border-radius:3px;cursor:pointer;text-align:left;font-size:.76rem}
.drop button:hover{background:var(--accwash)}
.drop button s{margin-left:auto;text-decoration:none;color:var(--ink3);font-size:.68rem;font-family:var(--mono)}
.drop button em{font-style:normal;color:var(--acc);width:1.1rem;text-align:center;font-size:.8rem}
.drop .dsec{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
            padding:.4rem .45rem .2rem}
.drop hr{border:0;border-top:1px solid var(--line);margin:.25rem 0}

/* ----------------------------------------------------------- tool strip ---
   Down the left edge of the viewport, where Composer puts it. Each button
   carries its key, because a tool you cannot find is a tool that does not
   work — which is exactly how "I can't move the sphere" happens. */
.tools{background:var(--panel);display:flex;flex-direction:column;align-items:center;
       gap:.12rem;padding:.3rem .2rem}
.tools hr{width:60%;border:0;border-top:1px solid var(--line);margin:.35rem 0}
.tool{width:34px;padding:.2rem 0 .1rem;background:none;border:1px solid transparent;
      border-radius:3px;cursor:pointer;color:var(--ink2);display:flex;
      flex-direction:column;align-items:center;gap:1px}
.tool:hover{border-color:var(--line2);color:var(--ink)}
.tool[aria-pressed="true"]{background:var(--accwash);border-color:var(--acc2);color:var(--acc)}
.tool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;
          stroke-linecap:round;stroke-linejoin:round}
.tool s{text-decoration:none;font-size:.52rem;letter-spacing:.04em;font-family:var(--mono);
        color:var(--ink3);line-height:1}
.tool[aria-pressed="true"] s{color:var(--acc)}

/* ------------------------------------------------------ viewport top bar --- */
.vbar{background:var(--panel);display:flex;align-items:center;gap:.35rem;
      padding:.22rem .4rem;flex:0 0 auto}
.vbar .grow{flex:1}
.vpill{display:inline-flex;align-items:baseline;gap:.35rem;background:var(--sunk);
       border:1px solid var(--line);border-radius:3px;padding:.12rem .45rem;
       font-size:.7rem;color:var(--ink2);white-space:nowrap}
button.vpill{cursor:pointer}
button.vpill:hover{border-color:var(--line2);color:var(--ink)}
.vpill em{font-style:normal;font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.vpill b{color:var(--acc);font-weight:600;font-family:var(--mono);font-size:.72rem}
.vpill--tool b{text-transform:uppercase;letter-spacing:.05em}

/* -------------------------------------------------------------- viewport --- */
.view{position:relative;flex:1;min-height:0;background:var(--sunk);overflow:hidden}
.view canvas{display:block;width:100%;height:100%;cursor:default;touch-action:none}
.view.orbiting canvas{cursor:grabbing}

/* Composer parks its frame statistics in the top-right of the viewport. */
.stats{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:.64rem;
       color:var(--ink2);line-height:1.55;white-space:pre;text-align:right;
       background:rgba(21,20,19,.74);border:1px solid rgba(66,64,60,.7);
       border-radius:3px;padding:.26rem .5rem;pointer-events:none}
.hud{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:.64rem;
     color:var(--ink2);line-height:1.6;white-space:pre;
     background:rgba(21,20,19,.74);border:1px solid rgba(66,64,60,.7);
     border-radius:3px;padding:.26rem .5rem;pointer-events:none}
.axis{position:absolute;right:8px;bottom:8px;width:62px;height:62px;pointer-events:none;
      background:rgba(21,20,19,.74);border:1px solid rgba(66,64,60,.7);border-radius:3px}

.hint{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);text-align:center;
      color:var(--ink3);font-size:.78rem;line-height:1.7;pointer-events:none;max-width:26rem}
.hint b{display:block;color:var(--ink2);font-size:.9rem;margin-bottom:.3rem}
.hint kbd,.tiphint kbd{font-family:var(--mono);font-size:.72rem;color:var(--acc);
      border:1px solid var(--line2);border-radius:3px;padding:0 .22rem}

/* One line under the selection telling you what you can do to it right now. */
.tiphint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
         font-size:.72rem;color:var(--ink3);background:rgba(21,20,19,.8);
         border:1px solid var(--line);border-radius:3px;padding:.2rem .55rem;
         pointer-events:none;white-space:nowrap;max-width:calc(100% - 170px);
         overflow:hidden;text-overflow:ellipsis}
.tiphint:empty{display:none}

.nogl{position:absolute;inset:0;display:grid;place-items:center;padding:2rem;text-align:center;
      color:var(--ink2);font-size:.85rem;line-height:1.7}

/* ----------------------------------------------------------- right dock --- */
.right{background:var(--panel);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.dtabs{display:flex;align-items:stretch;gap:1px;background:var(--line);flex:0 0 auto}
.dtab{background:var(--panel2);border:0;border-bottom:2px solid transparent;
      padding:.32rem .55rem;cursor:pointer;font-size:.72rem;color:var(--ink3);white-space:nowrap;flex:0 0 auto}
.dtab:hover{color:var(--ink2)}
.dtab[aria-selected="true"]{color:var(--acc);border-bottom-color:var(--acc);background:var(--panel)}

.dsearch{padding:.3rem .4rem;border-bottom:1px solid var(--line);flex:0 0 auto}
.dsearch input{width:100%;background:var(--sunk);border:1px solid var(--line);border-radius:3px;
               padding:.2rem .4rem;font-size:.72rem;outline:none}
.dsearch input:focus{border-color:var(--acc2)}

.dock{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.dock[hidden]{display:none}
.thead{display:flex;align-items:center;gap:.3rem;padding:.22rem .5rem;flex:0 0 auto;
       font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
       border-bottom:1px solid var(--line)}
.thead .ty{margin-left:auto}
.thead .ey{width:22px;text-align:center}
.dbody{overflow:auto;flex:1;min-height:0}

/* ----------------------------------------------------------- stage tree --- */
.tree{padding:.2rem 0 .5rem;font-size:.76rem}
.tr{display:flex;align-items:center;gap:.3rem;height:var(--row);padding:0 .3rem 0 0;cursor:pointer;
    white-space:nowrap;border-left:2px solid transparent}
.tr:hover{background:var(--panel2)}
.tr.sel{background:var(--accwash);border-left-color:var(--acc)}
.tr .tw{width:12px;flex:0 0 12px;text-align:center;color:var(--ink3);font-size:.6rem}
.tr .ty{color:var(--ink3);font-size:.62rem;font-family:var(--mono);margin-left:auto;padding-left:.5rem}
.tr .nm{overflow:hidden;text-overflow:ellipsis}
.tr .sw{width:8px;height:8px;border-radius:2px;flex:0 0 8px;border:1px solid rgba(0,0,0,.35)}
.tr .ey{width:22px;flex:0 0 22px;text-align:center;background:none;border:0;cursor:pointer;
        color:var(--ink3);font-size:.72rem;padding:0;line-height:1}
.tr .ey:hover{color:var(--acc)}
.tr.hid .ey{color:var(--ink3);opacity:.45}
.tr.off .nm,.tr.off .ty{color:var(--ink3);text-decoration:line-through}
.tr.orphan .nm{color:var(--ink3);font-style:italic}
.tr.ghost{opacity:.5}

/* ---------------------------------------------------------- layer stack --- */
.lay{padding:.2rem 0 .4rem}
.lyr{display:grid;grid-template-columns:14px minmax(0,1fr) auto auto;align-items:center;gap:.3rem;
     padding:.24rem .5rem;cursor:pointer;border-left:2px solid transparent;font-size:.76rem}
.lyr:hover{background:var(--panel2)}
.lyr.edit{background:var(--accwash);border-left-color:var(--acc)}
.lyr .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:.72rem}
.lyr .pen{color:var(--acc);font-size:.72rem;text-align:center}
.lyr.muted .nm{color:var(--ink3);text-decoration:line-through}
.lyr .n{font-family:var(--mono);font-size:.62rem;color:var(--ink3)}
.lyr .acts{display:flex;gap:.1rem;opacity:0}
.lyr:hover .acts,.lyr.edit .acts{opacity:1}
.laynote{padding:.5rem .55rem;margin:.3rem 0 0;font-size:.68rem;color:var(--ink3);line-height:1.55;
         border-top:1px solid var(--line)}
.laynote b{color:var(--ink2);font-weight:600}
.wide{display:block;width:calc(100% - 1.1rem);margin:0 .55rem .6rem;background:var(--panel2);
      border:1px solid var(--line2);border-radius:3px;color:var(--ink2);padding:.24rem;
      cursor:pointer;font-size:.72rem}
.wide:hover{border-color:var(--acc2);color:var(--acc)}

.iconbtn{background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;
         color:var(--ink3);padding:0 .3rem;line-height:1.5;font-size:.72rem}
.iconbtn:hover{color:var(--ink);border-color:var(--line2)}

/* ------------------------------------------------------ render settings --- */
.rset{padding:.5rem .55rem;font-size:.74rem;color:var(--ink2);line-height:1.6}
.rset h4{margin:.7rem 0 .3rem;font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.rset h4:first-child{margin-top:0}
.rset label{display:flex;align-items:center;gap:.45rem;padding:.16rem 0;cursor:pointer}
.rset input[type=range]{flex:1;accent-color:var(--acc)}
.rset .val{font-family:var(--mono);font-size:.68rem;color:var(--acc);min-width:3.2em;text-align:right}
.rset p{margin:.6rem 0 0;color:var(--ink3);font-size:.68rem;line-height:1.55}

/* -------------------------------------------------------- property panel --- */
.prop{flex:0 0 auto;display:flex;flex-direction:column;min-height:0;max-height:52%;
      border-top:1px solid var(--line2);background:var(--panel)}
.props{overflow:auto;flex:1;min-height:0}
.pth{font-family:var(--mono);font-size:.7rem;color:var(--acc);word-break:break-all;
     padding:.4rem .55rem;border-bottom:1px solid var(--line);background:var(--panel2);flex:0 0 auto}
.pth s{display:block;text-decoration:none;color:var(--ink3);font-size:.64rem;margin-top:.1rem}

.grp{border-bottom:1px solid var(--line)}
.grp > h3{margin:0;font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
          padding:.4rem .55rem;display:flex;align-items:center;gap:.35rem;cursor:pointer;
          user-select:none;background:var(--panel)}
.grp > h3:hover{color:var(--ink2)}
.grp > h3 .tw{font-size:.55rem;color:var(--ink3)}
.grp .gb{padding:.1rem .55rem .5rem}
.grp[data-open="0"] .gb{display:none}
.grp[hidden]{display:none}

.row{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:.35rem;margin:.16rem 0}
.row > label{font-size:.7rem;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .v3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.18rem}
.num{position:relative;display:flex;align-items:center;background:var(--sunk);
     border:1px solid var(--line);border-radius:3px;overflow:hidden}
.num:focus-within{border-color:var(--acc2)}
.num i{font-style:normal;font-size:.6rem;font-family:var(--mono);padding-left:.24rem;cursor:ew-resize;
       user-select:none;color:var(--ink3)}
.num.ax i{color:var(--x)} .num.ay i{color:var(--y)} .num.az i{color:var(--z)}
.num input{width:100%;min-width:0;background:none;border:0;padding:.16rem .22rem;font-size:.72rem;
           font-family:var(--mono);outline:none;text-align:right}

.badge{border:0;background:none;padding:0;margin-left:.3rem;cursor:pointer;
       font-family:var(--mono);font-size:.6rem;color:var(--ink3);border-bottom:1px dotted var(--line2)}
.badge:hover{color:var(--acc)}
.badge.wins{color:var(--acc)}
.badge.fallback{color:var(--ink3);font-style:italic}
.rowhead{display:flex;align-items:center;gap:.3rem;margin:.5rem 0 .2rem;
         font-size:.66rem;color:var(--ink3);font-family:var(--mono)}
.rowhead .clear{margin-left:auto;background:none;border:1px solid var(--line);border-radius:3px;
                color:var(--ink3);font-size:.6rem;padding:0 .3rem;cursor:pointer}
.rowhead .clear:hover{color:var(--warn);border-color:var(--warn)}

.sel-empty{padding:1.2rem .8rem;color:var(--ink3);font-size:.76rem;line-height:1.7;text-align:center}

.swatches{display:flex;gap:.22rem;flex-wrap:wrap}
.swatches button{width:17px;height:17px;border-radius:3px;border:1px solid rgba(0,0,0,.4);cursor:pointer;padding:0}
.swatches button[aria-pressed="true"]{outline:1.5px solid var(--acc);outline-offset:1px}

/* --------------------------------------------------------- opinion stack --- */
.opin{position:absolute;z-index:70;background:var(--panel2);border:1px solid var(--line2);
      border-radius:4px;box-shadow:0 14px 34px rgba(0,0,0,.55);padding:.4rem;min-width:250px;
      max-width:330px;display:none;font-size:.72rem}
.opin.open{display:block}
.opin h4{margin:0 0 .35rem;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.opin h4 b{color:var(--ink);letter-spacing:0;text-transform:none;font-family:var(--mono);font-size:.72rem}
.opin ol{margin:0;padding:0;list-style:none}
.opin li{display:grid;grid-template-columns:1fr auto;gap:.4rem;align-items:baseline;
         padding:.24rem .3rem;border-radius:3px;border-left:2px solid transparent}
.opin li.win{background:var(--accwash);border-left-color:var(--acc)}
.opin li.mute{opacity:.5;text-decoration:line-through}
.opin li em{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--ink2)}
.opin li b{font-family:var(--mono);font-size:.68rem;font-weight:400}
.opin li.win b{color:var(--acc)}
.opin li s{grid-column:1/-1;text-decoration:none;font-size:.6rem;color:var(--ink3)}
.opin p{margin:.4rem 0 0;color:var(--ink3);line-height:1.55;font-size:.66rem}

/* ----------------------------------------------------------- bottom dock --- */
.bottom{background:var(--panel);display:flex;flex-direction:column;
        height:224px;min-height:0;overflow:hidden}
.bottom.collapsed{height:27px}
.bottom.collapsed .pane{display:none}
.tabs{display:flex;align-items:center;gap:.1rem;padding:.14rem .3rem;border-bottom:1px solid var(--line);
      overflow-x:auto;flex:0 0 auto}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:.16rem .45rem;cursor:pointer;
     font-size:.7rem;color:var(--ink3);font-family:var(--mono);white-space:nowrap}
.tab:hover{color:var(--ink2)}
.tab[aria-selected="true"]{color:var(--acc);border-bottom-color:var(--acc)}
.tab.muted{text-decoration:line-through}
.tabs .grow{flex:1}
.bottom .pane{overflow:auto;flex:1;min-height:0}
.bottom pre{margin:0;padding:.5rem .7rem 1rem;font-family:var(--mono);font-size:.71rem;line-height:1.55;
            color:var(--ink2);white-space:pre;tab-size:4}
.bottom .k{color:var(--acc)}          /* def / over / metadata keyword */
.bottom .t{color:#9EC3D8}             /* type name */
.bottom .s{color:#C8A97E}             /* string / asset path */
.bottom .n{color:#B6C79A}             /* number */
.bottom .c{color:var(--ink3);font-style:italic}

/* ------------------------------------------------------------ status bar --- */
.status{background:var(--panel);display:flex;align-items:center;gap:.4rem;padding:0 .5rem;
        font-size:.66rem;color:var(--ink3);overflow:hidden;white-space:nowrap}
.status .sep{width:1px;height:11px;background:var(--line2);flex:none}
.status .grow{flex:1}
.status b{color:var(--acc);font-weight:600}
.status #stHint{overflow:hidden;text-overflow:ellipsis}

/* ---------------------------------------------------------------- toast --- */
.toast{position:fixed;left:calc(50% - var(--dock) / 2);bottom:34px;transform:translate(-50%,14px);z-index:90;
       background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--acc);
       border-radius:4px;padding:.45rem .7rem;font-size:.74rem;max-width:32rem;
       box-shadow:0 12px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;
       transition:opacity .18s ease,transform .18s ease}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast b{color:var(--acc);font-weight:600}

/* ---------------------------------------------------------------- sheet --- */
.sheet{position:fixed;inset:0;z-index:100;display:none;place-items:center;
       background:rgba(12,11,10,.72);padding:1.5rem}
.sheet.open{display:grid}
.sheet .card{background:var(--panel);border:1px solid var(--line2);border-radius:6px;
             max-width:46rem;width:100%;max-height:88vh;overflow:auto;
             box-shadow:0 24px 60px rgba(0,0,0,.6)}
.sheet header{display:flex;align-items:center;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.sheet header h2{margin:0;font-size:.95rem;font-weight:600}
.sheet header button{margin-left:auto;background:none;border:1px solid var(--line2);border-radius:3px;
                     color:var(--ink2);cursor:pointer;padding:.1rem .4rem}
.sheet .cols{display:grid;grid-template-columns:1fr 1fr;gap:0 1.6rem;padding:.9rem}
.sheet h3{margin:.7rem 0 .3rem;font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;color:var(--acc)}
.sheet dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.16rem .6rem;align-items:baseline}
.sheet dt{font-family:var(--mono);font-size:.7rem;color:var(--ink)}
.sheet dd{margin:0;font-size:.73rem;color:var(--ink2)}
.sheet dd i{color:var(--ink3);font-style:italic}
.sheet .foot{padding:.7rem .9rem;border-top:1px solid var(--line);font-size:.73rem;color:var(--ink3);line-height:1.6}
.sheet .foot a{color:var(--acc)}

/* ------------------------------------------------------------ responsive --- */
@media (max-width:1240px){ :root{--dock:272px} }
@media (max-width:960px){
  .app{grid-template-columns:42px minmax(0,1fr);
       grid-template-rows:30px minmax(0,1fr) auto auto 22px;
       grid-template-areas:
         "bar    bar"
         "tools  centre"
         "right  right"
         "bottom bottom"
         "status status"}
  .right{max-height:44vh}
  .prop{max-height:none}
  .toast{left:50%}
  .sheet .cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .toast{transition:none} }