/* css/phone.css — phone layout: the four workbench screens trade their fixed
   side panels for bottom-sheet drawers, and the topbar learns to scroll.

   LOADED LAST ON PURPOSE. The desktop rules are id-specificity; the overrides
   here use id lists to TIE that specificity and win by file order. Reordering
   the <link> tags in index.html silently breaks this file — don't.

   The @media condition below must stay in sync with PolySheets.MQ in
   js/engine/sheets.js — the two strings ARE the breakpoint; change both or
   neither. (max-width alone, not orientation: a rotated phone is 844+ wide and
   correctly falls back to the desktop layout, while a narrow split-view slot
   genuinely needs the drawers whatever its orientation.) */

/* outside the breakpoint the drawer furniture simply does not exist */
.sheet-tabbar, .sheet-scrim, .sheet-grip { display: none; }

@media (max-width: 720px) {
  /* ---- workbench skeleton: row → column (stage above the tab bar). Because
     both panels leave the flow below, the stage's flex:1 fills everything —
     the desktop skeleton needs no other change. ---- */
  #screen-lab.active, #screen-nets.active, #screen-studio.active, #screen-tess.active {
    flex-direction: column;
  }
  #lab-stage, #net-stage, #st-stage, #ts-stage { min-height: 0; }

  /* ---- the panels become bottom sheets ---- */
  #lab-tools, #net-tools, #st-tools, #ts-tools,
  #lab-info, #st-info, #net-side, #ts-side {
    position: absolute; left: 0; right: 0; top: auto;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px)); /* rests on the tab bar */
    width: auto; min-width: 0;              /* release the 250/300/320px floors */
    height: 52vh; height: min(52dvh, 430px);
    z-index: 45;
    border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0;
    background: #10141ffa; box-shadow: 0 -16px 44px #000d;
    transform: translateY(125%);            /* off-canvas; 125% puts the top edge fully below the viewport, not merely behind the tab bar */
    transition: transform .35s cubic-bezier(.2,.8,.2,1);   /* the fs-mode feel */
    overscroll-behavior: contain;           /* sheet scroll must not chain out */
  }
  #screen-lab.sheet-tools #lab-tools,   #screen-nets.sheet-tools #net-tools,
  #screen-studio.sheet-tools #st-tools, #screen-tess.sheet-tools #ts-tools,
  #screen-lab.sheet-info #lab-info,     #screen-nets.sheet-info #net-side,
  #screen-studio.sheet-info #st-info,   #screen-tess.sheet-info #ts-side {
    transform: translateY(0);
  }
  .sheet-dragging { transition: none !important; }  /* live finger-follow */

  /* ---- tab bar + scrim + grip (all generated by PolySheets) ---- */
  .sheet-tabbar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 46;
    display: flex; gap: 8px; align-items: center;
    height: calc(52px + env(safe-area-inset-bottom, 0px));
    padding: 0 10px env(safe-area-inset-bottom, 0px);
    background: linear-gradient(180deg, #141826f2, #10131df2);
    border-top: 1px solid var(--line);
  }
  .sheet-tabbar button { flex: 1; min-height: 44px; font-size: 15px; }
  .screen.sheet-tools .sheet-scrim, .screen.sheet-info .sheet-scrim {
    display: block; position: absolute; inset: 0; z-index: 44; background: #060810a8;
  }
  .sheet-grip { display: block; position: sticky; top: -14px; z-index: 2;
    height: 26px; margin: -14px -14px 0; touch-action: none; cursor: grab; }
  .sheet-grip::after { content: ''; display: block; width: 42px; height: 5px;
    border-radius: 3px; margin: 9px auto 0; background: var(--tx2); opacity: .5; }

  /* ---- fs-mode on a phone: neutralize lab.css's side-drawer geometry so the
     two systems cannot fight (same specificity, later file wins; the .fs-tools
     row is belt-and-braces — lab.js also stops adding that class on phone). */
  #screen-lab.fs-mode #lab-tools, #screen-lab.fs-mode #lab-info {
    top: auto; left: 0; right: 0; width: auto; transform: translateY(125%);
  }
  #screen-lab.fs-mode.fs-tools #lab-tools,
  #screen-lab.fs-mode.fs-info #lab-info { transform: translateY(125%); }
  #screen-lab.fs-mode.sheet-tools #lab-tools,
  #screen-lab.fs-mode.sheet-info #lab-info { transform: translateY(0); }

  /* ---- topbar at 390px: today body{overflow:hidden} silently AMPUTATES the
     buttons that don't fit. Scroll the nav instead, drop the subtitle. ---- */
  #topbar { gap: 8px;
    padding-right: calc(8px + env(safe-area-inset-right, 0px));
    padding-left: calc(8px + env(safe-area-inset-left, 0px)); }
  #logo .logo-sub { display: none; }
  #topbar nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  #topbar nav::-webkit-scrollbar { display: none; }
  #topbar nav button { flex: 0 0 auto; padding: 9px 12px; font-size: 14px; }

  /* Tiles: the 5-col shape grid spans the full-width sheet now, but the cells
     still need a finger-height floor */
  .ts-shape-grid button { min-height: 44px; }

  /* toasts must clear the tab bar */
  .toast { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}