/* Compact desktop and landscape tablet. */
@media (max-width: 1180px) {
  :root { --canvas-max: 100%; }
  .shell { padding-inline: clamp(16px, 3vw, 32px); }
  .workspace { grid-template-columns: 176px minmax(0, 1fr); gap: 16px; }
  .module-grid { grid-template-columns: repeat(auto-fit, minmax(min(245px, 100%), 1fr)); }
}

/* Narrow CSS viewport, including desktop browser zoom. */
@media (max-width: 900px) {
  .shell { padding-inline: clamp(10px, 3vw, 22px); border-inline: 0; }
  .access { width: min(100%, 480px); margin-block: clamp(14px, 5svh, 46px); padding: clamp(28px, 6vw, 44px); }
  .access::before, .access::after { display: none; }
  .access h1 { font-size: clamp(38px, 9vw, 52px); line-height: .9; }
  .access h1 i { padding-left: clamp(18px, 6vw, 34px); }
  .access .muted { font-size: clamp(13px, 2.4vw, 15px); }
  .access code { white-space: normal; }

  .workspace { grid-template-columns: 160px minmax(0, 1fr); gap: 12px; }
  .device-id { display: none; }
  .module-grid { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
  .construct i:nth-child(3), .construct i:nth-child(4), .construct i:nth-child(7) { display: none; }
}

/* Portrait tablet and large phone: navigation becomes a horizontal rail. */
@media (max-width: 760px) {
  .dashboard { padding-top: 10px; }
  .topbar { align-items: flex-start; }
  .brand span, .ghost { display: none; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; min-height: 0; border: 1px solid rgba(8,8,8,.2); }
  #categories { display: flex; gap: 9px; width: 100%; max-width: 100%; padding: 2px 2px 9px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #7b7b78 transparent; }
  #categories::-webkit-scrollbar { height: 6px; }
  #categories::-webkit-scrollbar-track { background: transparent; }
  #categories::-webkit-scrollbar-thumb { border-radius: 99px; background: #868683; }
  #categories button { width: auto; min-width: max-content; padding-inline: 14px; border-color: rgba(8,8,8,.14); background: rgba(255,255,255,.32); white-space: nowrap; }
  #categories button.active { background: rgba(250,250,247,.8); }
  .protocol { display: none; }
  .content { padding-top: 4px; }
  .content-head { min-height: 82px; }
  .module-grid { margin-top: 14px; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard::before, .dashboard::after { display: none; }
  .construct i:nth-child(5) { display: none; }
}

/* Phone. */
@media (max-width: 560px) {
  .shell { padding-inline: 10px; }
  .access { width: 100%; padding: 28px 22px; }
  .access h1 { font-size: clamp(34px, 11vw, 46px); }
  .access .brand-mark { width: 48px; height: 48px; }
  #hwid, #pairing-code, .access form button { height: 46px; }

  .topbar { gap: 10px; padding-inline: 10px; }
  .top-actions { margin-left: auto; }
  .status { padding: 7px 8px; }
  .content-head { align-items: flex-end; gap: 10px; }
  .content-head h2 { font-size: 34px; }
  #summary { max-width: 42%; font-size: 9px; }
  .module-grid { grid-template-columns: minmax(0, 1fr); }
  .setting { grid-template-columns: minmax(82px, .85fr) minmax(0, 1.15fr); }
  .construct i:nth-child(1), .construct i:nth-child(2) { width: 80%; }
}

/* Very narrow phone. */
@media (max-width: 380px) {
  .access { padding-inline: 18px; }
  .access h1 { font-size: 36px; }
  .setting { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 10px; }
  .number-control { grid-template-columns: minmax(0, 1fr) 58px; }
  #summary { display: none; }
}

/* Short windows and heavy desktop zoom: never center content above the scroll origin. */
@media (max-height: 720px) {
  .shell { align-items: start; }
  .access { margin-block: 16px; }
}

@media (pointer: coarse) {
  #categories button, .ghost, .status { min-height: 42px; }
  .setting input, .setting select { min-height: 38px; }
  .switch { width: 44px; height: 26px; }
  .switch span::after { width: 18px; height: 18px; top: 3px; left: 3px; }
  .switch input:checked + span::after { transform: translateX(18px); }
}