/* Lane B mobile overrides: phone, settings, kb, vpat. Desktop keeps styles.css. */
@media (max-width: 899px) {
  /* No sideways page scroll on Lane B surfaces. */
  html { overflow-x: hidden; overflow-x: clip; }
  body[data-page="phone"],
  body[data-page="settings"],
  body[data-page="kb"],
  body[data-page="vpat"] { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
  body[data-page="phone"] main.shell,
  body[data-page="settings"] main.shell,
  body[data-page="kb"] main.shell,
  body[data-page="vpat"] main.shell {
    padding: 16px;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }
  /* Header may wrap, never push the page wide (chrome itself stays Lane A). */
  body[data-page="phone"] .header,
  body[data-page="settings"] .header,
  body[data-page="kb"] .header,
  body[data-page="vpat"] .header { min-width: 0; max-width: 100%; overflow-x: hidden; overflow-x: clip; }
  body[data-page="phone"] .nav,
  body[data-page="settings"] .nav,
  body[data-page="kb"] .nav,
  body[data-page="vpat"] .nav { flex-wrap: wrap; max-width: 100%; }
  body[data-page="phone"] .nav a,
  body[data-page="settings"] .nav a,
  body[data-page="kb"] .nav a,
  body[data-page="vpat"] .nav a { min-height: 44px; }
  body[data-page="phone"] .footer,
  body[data-page="settings"] .footer,
  body[data-page="kb"] .footer,
  body[data-page="vpat"] .footer { position: static; max-width: 100%; padding: 12px 16px; }
  /* Touch targets and full-width controls. */
  body[data-page="phone"] .btn,
  body[data-page="settings"] .btn,
  body[data-page="kb"] .btn,
  body[data-page="vpat"] .btn { min-height: 44px; }
  body[data-page="phone"] input,
  body[data-page="phone"] select,
  body[data-page="settings"] input,
  body[data-page="settings"] select,
  body[data-page="kb"] input,
  body[data-page="kb"] select { min-height: 44px; min-width: 0; max-width: 100%; }
  body[data-page="settings"] textarea,
  body[data-page="kb"] textarea { min-height: 120px; min-width: 0; max-width: 100%; }

  /* Phone: the page is the call, no decorative bezel. Panel stacks below. */
  body[data-page="phone"] .phone-grid { display: flex; flex-direction: column; gap: 16px; flex: none; }
  body[data-page="phone"] .device {
    width: 100%; max-width: 100%; height: auto; min-height: 0;
    margin: 0; padding: 0; background: none;
  }
  body[data-page="phone"] .device-screen { border: 1px solid var(--line); background: var(--card); }
  body[data-page="phone"] .device-top { gap: 10px; padding: 12px; }
  body[data-page="phone"] .device-btns { flex-wrap: wrap; }
  body[data-page="phone"] .device-btns .btn { flex: 1 1 140px; min-height: 44px; font-size: 14px; color: #fff; }
  body[data-page="phone"] .device-btns .btn.gold { color: #1a1404; }
  body[data-page="phone"] #phoneThread { min-height: 240px; max-height: 50vh; padding: 12px; }
  body[data-page="phone"] .device-composer { flex-wrap: wrap; gap: 8px; padding: 10px; }
  body[data-page="phone"] .device-composer input { flex: 1 1 100%; width: auto; min-width: 0; min-height: 44px; }
  body[data-page="phone"] .mic-btn { width: 44px; min-height: 44px; flex: none; }
  body[data-page="phone"] .device-composer .btn { flex: 1 1 auto; min-height: 44px; }
  body[data-page="phone"] .phone-panel { gap: 12px; padding-bottom: 8px; min-width: 0; }
  body[data-page="phone"] .panel-block { padding: 16px; min-width: 0; }
  body[data-page="phone"] #xfer,
  body[data-page="phone"] #cbForm button[type="submit"] { width: 100%; min-height: 44px; }
  body[data-page="phone"] #cbTopic { min-height: 44px; }

  /* Settings: single column, everything fits 390. */
  body[data-page="settings"] .settings-form { grid-template-columns: 1fr; gap: 16px; padding: 16px; min-width: 0; }
  body[data-page="settings"] .threshold-row { grid-template-columns: 1fr; }
  body[data-page="settings"] .hook-grid { grid-template-columns: 1fr; }
  body[data-page="settings"] .field { min-width: 0; }
  body[data-page="settings"] .save-bar { flex-wrap: wrap; }
  body[data-page="settings"] .save-bar .btn { width: 100%; }
  body[data-page="settings"] .purge-panel { padding-bottom: 24px; }

  /* KB: table becomes tappable stacked cards; toolbar and editor stack. */
  body[data-page="kb"] .kb-toolbar .spacer { display: none; }
  body[data-page="kb"] #addItem { flex: 1 1 100%; }
  body[data-page="kb"] .kb-table-card { border-top: 0; min-width: 0; }
  body[data-page="kb"] .table-wrap { overflow: visible; max-width: 100%; }
  body[data-page="kb"] .kb-table-card table { display: block; width: 100%; }
  body[data-page="kb"] .kb-table-card thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  body[data-page="kb"] .kb-table-card tbody { display: block; width: 100%; }
  body[data-page="kb"] tr.kb-row {
    display: block; width: 100%; margin: 0 0 10px; padding: 12px 14px;
    border: 1px solid var(--line); background: var(--card);
  }
  body[data-page="kb"] tr.kb-row td {
    display: block; width: 100%; padding: 2px 0; border: 0;
    white-space: normal; overflow-wrap: anywhere;
  }
  body[data-page="kb"] tr.kb-row td:nth-child(2) { font-weight: 700; }
  body[data-page="kb"] tr.kb-row td:nth-child(4),
  body[data-page="kb"] tr.kb-row td:nth-child(5) { color: var(--muted); font-size: 13px; }
  body[data-page="kb"] .kb-open { min-height: 44px; padding: 4px 0; font-size: 15px; }
  body[data-page="kb"] .kb-editor { padding: 16px; margin: 16px 0 24px; }
  body[data-page="kb"] .kb-grid { grid-template-columns: 1fr; }
  body[data-page="kb"] .kb-actions .btn { flex: 1 1 100%; }

  /* VPAT: report tables become stacked cards. */
  body[data-page="vpat"] .vpat-intro { max-width: 100%; }
  body[data-page="vpat"] .vpat-wrap { overflow: visible; max-width: 100%; }
  body[data-page="vpat"] .vpat-wrap table { display: block; width: 100%; }
  body[data-page="vpat"] .vpat-wrap thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  body[data-page="vpat"] .vpat-wrap tbody { display: block; width: 100%; }
  body[data-page="vpat"] .vpat-wrap tr {
    display: block; width: 100%; margin: 0 0 10px; padding: 12px 14px;
    border: 1px solid var(--line); background: var(--card);
  }
  body[data-page="vpat"] .vpat-wrap th[scope="row"],
  body[data-page="vpat"] .vpat-wrap td {
    display: block; width: 100%; padding: 4px 0; border: 0;
    text-align: left; white-space: normal; overflow-wrap: anywhere;
  }
}