/* Showroom: "Check the space" (EXPERIMENTAL, ?space=1). */
#space-card{position:relative;margin:12px 0 4px;background:var(--panel);border:2px solid #24412f;border-radius:14px;padding:12px 14px;display:grid;gap:8px}
#space-card[hidden]{display:none}
#space-card p{margin:0}
.space-head{display:flex;align-items:center;gap:8px}
.space-head b{font-size:16px}
.space-sub{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:#e8efe2;color:#24412f}
.space-close{margin-left:auto;display:inline-flex;align-items:center;gap:4px;min-height:40px;min-width:44px;padding:0 10px;border:1px solid #b9c4bd;border-radius:999px;background:#fff;color:#1d2a22;font:600 13px/1 system-ui,sans-serif;cursor:pointer}
.space-close svg{width:16px;height:16px}
.space-guide{font-size:14px}
.space-row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.space-in{display:grid;gap:2px;font-size:13px;font-weight:600}
.space-in input{width:104px;font-size:16px;padding:8px 10px;border-radius:10px;border:1px solid #b9c4bd}
#space-unit{font-size:16px;padding:8px;border-radius:10px;border:1px solid #b9c4bd;min-height:42px}
.space-err{font-size:13px;font-weight:600;color:#7a2512;background:#f6dcd4;border-radius:8px;padding:6px 10px}
.space-err[hidden],.space-prev[hidden],.space-result[hidden]{display:none}
.space-prev{font-size:13px}
.space-result{display:grid;gap:6px}
.space-verdict{font-weight:700;font-size:15px;padding:6px 10px;border-radius:8px;background:#e8efe2;color:#1d4a2a}
.space-verdict[data-verdict="fitsTurned"]{background:#fdf1d8;color:#6b4a07}
.space-verdict[data-verdict="larger"]{background:#f6dcd4;color:#7a2512}
.space-orient{display:flex;gap:6px}
.space-orient .tb{min-height:38px}
.space-orient .tb[aria-pressed="true"]{background:#24412f;color:#fff;border-color:#24412f}
.space-svg{width:100%;max-width:340px;height:auto;display:block;background:#faf8f2;border-radius:10px}
.space-svg .sp-area{fill:#eef3ea;stroke:#24412f;stroke-width:1.5;stroke-dasharray:6 4}
.space-svg .sp-rug{fill:rgba(29,111,163,.28);stroke:#1d6fa3;stroke-width:2}
.space-svg .sp-rug.over{fill:rgba(163,52,29,.22);stroke:#a3341d}
.space-svg .sp-t{font:600 11px/1 system-ui,sans-serif;text-anchor:middle;fill:#1d2a22}
.space-svg .sp-t.rug{fill:#14405f}
.space-diffs{margin:0;padding-left:18px;font-size:13px;display:grid;gap:2px}
.space-diffs li.over{color:#7a2512;font-weight:600}
.space-rug{font-size:12.5px;color:#3c4a41}
.space-note{font-size:12px;color:#55615a}
#space-open[hidden],#dock-space[hidden]{display:none}
#space-open svg,#dock-space svg{width:20px;height:20px}

@media (max-width:600px),(max-height:520px){
  #sheet-body #space-card{position:static;border:0;padding:0;background:none;gap:6px}
  /* the result and the close button first, without a long scroll */
  #sheet-body .space-head{position:sticky;top:0;background:var(--panel,#fff);z-index:2;padding:2px 0}
  #sheet-body .space-guide{font-size:13px}
  #sheet-body .space-in input{width:92px}
  #sheet-body .space-svg{max-width:260px}
  #sheet-body .space-note{font-size:11.5px}
}
/* a low landscape phone: the check opens beside the photo, not under it, so the
   verdict and Close stay on screen; it scrolls on its own if it is taller */
@media (max-height:520px) and (orientation:landscape){
  body.space-open .edit-sheet{left:auto;top:0;right:0;bottom:0;width:min(400px,48vw);max-height:none;border-radius:16px 0 0 16px;padding-top:8px}
  body.space-open .sheet-grip{display:none}
  body.space-open.sheet-on{padding-bottom:12px}
  body.space-open.sheet-on #stage{width:min(calc(100vw - min(400px,48vw) - 24px), calc((var(--vvh,100vh) - 20px) * var(--stage-ar,.75)));margin-left:8px;margin-right:auto}
  #sheet-body .space-guide{font-size:12px}
  #sheet-body .space-svg{max-width:220px}
}