/* responsive.css - tablet, phone, landscape and touch layouts (load this LAST so it can override the others) */

body{overscroll-behavior:none}
@supports (height:100dvh){body{height:100dvh}}
.status{height:calc(24px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}

/* ---------- tablets and small windows: side panels float over the editor ---------- */
@media(max-width:900px){
  .brand small{display:none}
  .field select{max-width:150px}
  .side{position:absolute;left:64px;top:0;bottom:0;z-index:30}
  .side.open{box-shadow:8px 0 24px rgba(0,0,0,.25)}
  #stBoard{display:none}
}

/* ---------- phones in portrait: bottom dock, bottom sheet, stacked action bar ---------- */
@media(max-width:600px) and (orientation:portrait){
  .topbar{height:56px;padding:0 8px;gap:4px}
  .brand img{height:38px}
  .menus{margin-left:0;gap:3px}
  .nbtn{padding:4px 9px;font-size:12px}
  .name-wrap{display:none}

  /* menus open as a full-width sheet so they never run off the screen */
  .dd-panel{position:fixed;left:8px;right:8px;top:60px;min-width:0;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto}

  /* action bar: Verify + Upload, then Board, then Connect + font size */
  .actionbar{gap:8px;padding:8px 10px}
  .sep,.actionbar .spacer{display:none}
  #btnVerify,#btnUpload{order:1;flex:1 1 0;justify-content:center}
  .field{order:2;flex:1 1 100%}
  .custom-dropdown{flex:1}
  .custom-dropdown .selected{min-width:0;width:100%}
  .dropdown-list{max-height:50vh}
  #btnConnect{order:3;flex:1 1 0;justify-content:center}
  .fc{order:4}

  /* left rail becomes a bottom dock */
  .work{flex-direction:column}
  .workcol{order:1;flex:1 1 0}
  .rail{order:3;width:100%;height:56px;flex-direction:row;justify-content:space-around;border-right:none;border-top:1px solid var(--border);padding:4px 8px;gap:8px}
  .rail-btn{width:auto;min-width:104px;height:44px;flex-direction:row;gap:8px;padding:0 14px;font-size:12px}
  .rail-bottom{margin-top:0}

  /* panels open as a bottom sheet above the dock */
  .side{left:0;right:0;top:auto;bottom:56px;width:100%;height:0;transition:height .22s ease}
  .side.open{width:100%;height:62%;border-right:none;border-top:3px solid var(--brand-dk);box-shadow:0 -10px 28px rgba(0,0,0,.22)}
  .side-inner{width:100%}

  /* console and serial monitor */
  #bottom{height:200px}
  .tabs{padding:6px 8px}
  .serial-bar{padding:8px;gap:6px}
  .serial-bar input[type=text]{flex:1 1 100%;order:9}
}

/* ---------- small phones: popups ---------- */
@media(max-width:480px){
  #uploadStatusPopup{min-width:0;height:68px}
  #popupMessage{font-size:15px;padding:0 10px}
  .res-ico{width:54px}
  .status-modal{width:min(280px,86vw)}
}

/* ---------- short landscape (phones on their side) ---------- */
@media(max-height:520px) and (orientation:landscape){
  .topbar{height:48px}
  .brand img{height:36px}
  .actionbar{padding:4px 12px;gap:8px}
  .rail{width:52px}
  .rail-btn{width:44px;font-size:9.5px}
  .side{position:absolute;left:52px;top:0;bottom:0;z-index:30}
  #bottom{height:34%;min-height:38px}
  .status{display:none}
}

/* ---------- touch screens: bigger targets, no iOS zoom on inputs ---------- */
@media(pointer:coarse){
  .icon-btn{width:42px;height:42px}
  .pbtn{min-height:36px}
  .dd-item{padding:13px 20px}
  .dropdown-list .item{padding:13px 18px}
  .stab{padding:12px 2px}
  .lib-act .pbtn{height:34px}
  .link-btn{padding:8px 10px}
  #resizer{height:16px}
  .serial-bar select{height:34px}
  #sketchName,#libSearch,.serial-bar input[type=text],.serial-bar select{font-size:16px}
  #toastBox{bottom:calc(34px + env(safe-area-inset-bottom,0px))}
}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}