/* Self-contained on purpose. This page is framed into the homepage and is also a
   real page on its own, so it carries its own styles rather than pulling
   shared.css and inheriting a layout it is not laid out in. Same palette. */
:root { --page:#000; --surface:#1a1a19; --ink:#fff; --ink2:#cdccc2;
        --muted:#98968e; --grid:#2c2c2a; --warm:#f5c86a; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--page); color:var(--ink); line-height:1.5;
       font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.shell { max-width:1440px; margin:0 auto; padding:14px 14px 22px; }
.head { display:flex; align-items:flex-end; justify-content:space-between;
        gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.head h1 { font-size:clamp(16px,2.4vw,22px); font-weight:800; letter-spacing:-0.2px; }
.head .facts { font-size:12.5px; color:var(--muted); letter-spacing:0.4px; }
.head .facts b { color:var(--warm); font-weight:700; }

/* The stage. position:relative so the floating panel and the buttons can sit on
   the canvas, and it is the element that goes full screen - the canvas alone
   would take the buttons and the layer panel off the screen with it. */
.stage { position:relative; border:1px solid var(--grid); border-radius:12px;
         overflow:hidden; background:#09182b; touch-action:none; }
.stage:fullscreen { border-radius:0; border:0; }
.stage:fullscreen canvas { height:100vh; }
canvas { display:block; width:100%; height:clamp(340px,56vh,620px); cursor:grab; }
canvas.dragging { cursor:grabbing; }

.tools { position:absolute; top:10px; right:10px; display:flex; gap:6px;
         flex-wrap:wrap; justify-content:flex-end; max-width:calc(100% - 20px); }
.tools button { font:600 12.5px/1 system-ui,sans-serif; color:var(--ink);
                background:rgba(12,22,38,0.86); border:1px solid rgba(160,180,210,0.34);
                border-radius:8px; padding:9px 11px; min-height:36px; cursor:pointer; }
.tools button:hover { background:rgba(24,40,66,0.95); border-color:var(--warm); }
.tools button[aria-pressed=true] { color:#161206; background:var(--warm); border-color:var(--warm); }

.panel { position:absolute; top:10px; left:10px; width:246px; max-width:calc(100% - 20px);
         max-height:calc(100% - 20px); overflow:auto; background:rgba(9,20,36,0.92);
         border:1px solid rgba(160,180,210,0.3); border-radius:10px; padding:10px 11px; }
.panel h2 { font:700 11px/1.3 system-ui,sans-serif; letter-spacing:1.1px;
            text-transform:uppercase; color:var(--warm); margin-bottom:7px; }
.panel .pbtns { display:flex; gap:5px; margin-bottom:8px; flex-wrap:wrap; }
.panel .pbtns button { font:600 11.5px/1 system-ui,sans-serif; color:var(--ink2);
                       background:rgba(20,34,56,0.9); border:1px solid rgba(160,180,210,0.28);
                       border-radius:6px; padding:7px 8px; min-height:30px; cursor:pointer; }
.panel .pbtns button:hover { color:var(--ink); border-color:var(--warm); }
.panel label { display:flex; align-items:flex-start; gap:7px; font-size:12.5px;
               color:var(--ink2); padding:4px 0; cursor:pointer; }
.panel input { margin-top:2px; accent-color:var(--warm); width:15px; height:15px;
               flex:0 0 auto; cursor:pointer; }
.panel label span.zero { color:var(--muted); font-size:11px; }
.panel.hid { display:none; }

.under { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
         margin-top:10px; font-size:12.5px; color:var(--muted); }
.under a { color:var(--warm); }
.legend { margin-top:14px; border:1px solid var(--grid); background:var(--surface);
          border-radius:12px; padding:13px 16px; font-size:13px; color:var(--ink2); }
.legend h2 { font-size:12px; letter-spacing:0.8px; color:var(--warm);
             text-transform:uppercase; margin-bottom:7px; }
.legend ul { list-style:none; display:grid; gap:4px 18px;
             grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.legend li { padding-left:2px; }
.legend b { color:var(--ink); font-weight:650; }
.legend p { margin-top:9px; color:var(--muted); font-size:12.5px; }
@media (max-width:760px){
  /* A 68 ft house seen from the kerb is a wide flat band, so a tall phone stage
     is mostly blueprint paper. Sized off the width instead. */
  canvas { height:max(300px, 82vw); }
  /* And the menu drops UNDER the model rather than floating over it. A 246 px
     card of thirteen ticks on a 390 px screen is the whole house, so opening
     the layer list on a phone used to mean losing the thing being layered. */
  .stage { display:flex; flex-direction:column; }
  .panel { position:static; width:auto; max-width:none; max-height:none;
           border:0; border-top:1px solid rgba(160,180,210,0.3); border-radius:0;
           background:rgba(9,20,36,0.96); padding:11px 12px 13px; }
  .panel #rows { display:grid; gap:0 12px;
                 grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); }
  .panel.hid { display:none; }
  /* Full screen puts it back on the glass, because there is no "under" there. */
  .stage:fullscreen { display:block; }
  .stage:fullscreen canvas { height:100vh; }
  .stage:fullscreen .panel { position:absolute; top:10px; left:10px; width:246px;
           max-height:calc(100% - 20px); overflow:auto; border-radius:10px;
           border:1px solid rgba(160,180,210,0.3); background:rgba(9,20,36,0.92); }
  .stage:fullscreen .panel #rows { display:block; }
}
/* EMBED MODE, ?embed=1. The homepage frames this page, and inside a frame the
   heading, the legend and the hint line are the page's furniture arriving in
   somebody else's living room. The stage fills the frame and nothing else is
   there. Written after the media query so it wins at any width. */
body.embed .head, body.embed .under, body.embed .legend { display:none; }
body.embed .shell { padding:0; max-width:none; }
body.embed .stage { display:block; border:0; border-radius:0; }
body.embed canvas { height:100vh; }
body.embed .panel { position:absolute; top:10px; left:10px; width:246px;
  max-width:calc(100% - 20px); max-height:calc(100% - 20px); overflow:auto;
  border:1px solid rgba(160,180,210,0.3); border-radius:10px;
  background:rgba(9,20,36,0.92); padding:10px 11px; }
body.embed .panel #rows { display:block; }