/* Design your shed on a phone (design-phone.js sets html.phone; design.css is the page's look and still
   applies). The building fills the screen, the keys sit under it, and a key's choices slide up between
   them, with the building still showing above. Nothing here outside html.phone, so a desktop never reads it. */
html.phone, html.phone body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.phone .studio { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; }

.phone .stage-col { position: relative; top: auto; flex: 1 1 0; height: auto; min-height: 0; padding: 0; gap: 0; z-index: auto; }
.phone .stage-head { padding: 7px 12px; align-items: center; }
.phone .stage-head h1 { font-size: 15px; }
.phone .head-nav { font-size: 10px; gap: 12px; }
.phone .view { border: 0; border-top: 1px solid var(--line); }
.phone #stage canvas { touch-action: none !important; }  /* over the engine's own pan-y: this page does not scroll */
.phone .view-hint { display: none; }
.phone .spec { font-size: 10px; padding: 5px 12px; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the choices: one step at a time, in a sheet of their own */
.phone .panel { display: none; flex: 0 0 46%; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 14px 14px; border-top: 1px solid var(--amber); gap: 0; }
.phone.sheet-open .panel { display: flex; }
.phone .panel .step { display: none; border: 0; margin: 0; padding: 0; }
.phone .panel .step.on-sheet { display: block; }
.phone .panel .step > h2 { display: none; }
.phone .panel .step .step-b { display: block; padding: 0 0 8px; }
.phone .guide { font-size: 13px; margin-bottom: 10px; }
.phone .ver { margin: 16px 0 0; }
.phone .sheet-head { position: sticky; top: 0; z-index: 2; flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--bg); padding: 8px 0; }
.phone .sheet-head b { color: var(--amber); font-weight: 500; font-size: 12px; }
.phone .sheet-head button { min-height: 36px; padding: 0 14px; color: var(--ink); background: none; border: 1px solid var(--line); cursor: pointer; font-size: 12px; }

/* thumb-sized controls */
.phone .seg button { min-height: 42px; padding: 7px 12px; }
.phone .item .seg button { min-height: 38px; }
.phone .swatches button { width: 38px; height: 38px; }
.phone .range input { height: 32px; }
.phone .add button { min-height: 40px; }
.phone .item-top button.x { min-height: 36px; min-width: 36px; }
.phone .view-tag button { padding: 8px 12px; }
.phone .view-tabs button { min-height: 36px; }

/* saved builds, in their sheet */
.phone .builds { flex-wrap: wrap; overflow: visible; }
.phone .build-list { flex: 1 0 100%; flex-direction: column; }
.phone .bld { justify-content: space-between; }
.phone .bld .pick { flex: 1; text-align: left; white-space: normal; }
.phone .bld button, .phone .build-act { min-height: 42px; }

/* the keys */
.phone .phone-keys { flex: none; display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.phone .phone-keys::-webkit-scrollbar { display: none; }
.phone .phone-keys button { flex: none; min-height: 46px; padding: 0 13px; font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; cursor: pointer; }
.phone .phone-keys button[aria-pressed="true"] { color: var(--ink); border-color: var(--amber); }
.phone .phone-keys button.flagged::after { content: " \2691"; color: var(--amber); }

/* a phone on its side: the choices beside the building */
@media (orientation: landscape) {
  .phone.sheet-open .studio { display: grid; grid-template-columns: minmax(0, 1fr) 46%; grid-template-rows: minmax(0, 1fr) auto; }
  .phone.sheet-open .phone-keys { grid-column: 1 / -1; }
  .phone.sheet-open .panel { border-top: 0; border-left: 1px solid var(--amber); }
  .phone .stage-head, .phone .spec { display: none; }
}