/* Responsive behavior is loaded after the visual theme so navigation and forms
   retain their usable dimensions regardless of theme or dashboard overrides. */
.public-menu { display:contents; }
.public-menu-toggle { display:none; }
.mobile-sidebar-backdrop { display:none; }
.sidebar-mobile-close { display:none; }

@media (max-width:1200px) {
  html .topbar { position:sticky; top:0; height:auto; min-height:64px; flex-wrap:wrap; padding:10px 16px; }
  html.is-home-route .topbar { height:auto; min-height:64px; padding:10px 16px; }
  html .topbar .brand span:not(.brand-mark) { display:inline; }
  .public-menu-toggle { display:grid; place-items:center; width:44px; height:44px; margin-left:auto; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--panel); font-size:22px; cursor:pointer; }
  html .topbar .public-menu { display:none; flex-basis:100%; width:100%; min-width:0; max-height:calc(100dvh - 84px); overflow-y:auto; overscroll-behavior:contain; padding-bottom:env(safe-area-inset-bottom); }
  html .topbar.public-menu-open .public-menu { display:grid; gap:14px; }
  html .topbar .public-menu .nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; width:100%; margin:0; }
  html .topbar .public-menu .nav a { min-width:0; min-height:44px; padding:10px; white-space:normal; overflow-wrap:anywhere; font-size:14px; }
  html .topbar .public-menu .nav-actions { justify-content:flex-start; gap:8px; padding:12px 0; border-top:1px solid var(--line); }
  html .topbar .public-menu .lang-select-wrapper { display:block; }
  html .topbar .public-menu :is(.lang-select,.button,.ghost) { min-height:44px; max-width:100%; font-size:16px; }
  html .topbar .public-menu .lang-select { width:auto; padding-right:28px; }
  html .topbar .public-menu .ghost:not([hidden]) { display:inline-flex; align-items:center; }
}

@media (max-width:1024px) {
  /* 16px form text prevents focus zoom on iOS. Intrinsic widths must not push
     flex/grid children beyond their available space. */
  html body :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-width:0; max-width:100%; font-size:16px!important; }
  html body :is(button,.button,.ghost,.copy-btn,.page-btn) { min-height:44px; }
  html body :is(h1,h2,h3,p,label,.notice,.form-dialog-error) { overflow-wrap:anywhere; }
  html body :is(.form-grid,.settings-grid-2,.admin-grid,.panel,.app-main,.workspace-column,.docs-content,.docs-body) { min-width:0; }
  html body :is(.form-grid,.settings-grid-2,.admin-grid) > * { min-width:0; }
  html body :is(.form-actions,.panel-head,.pagination-bar,.pagination-controls) { flex-wrap:wrap; }
  html body :is(.form-grid,.settings-grid-2) { grid-template-columns:minmax(0,1fr); }
  html body .form-grid > .wide { grid-column:1 / -1; }
  html body dialog { max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; }
  html.is-auth-route body :is(.auth-page-dialog,.auth-page-form-dialog) { max-width:100%; max-height:100dvh; }
  html body :is(.dialog-close,.layers-modal-close) { min-width:44px; min-height:44px; }
  html body .showcase-modal[open] { display:flex; flex-direction:column; height:90dvh!important; }
  html body .showcase-modal-header { flex-wrap:wrap; gap:12px; padding:12px!important; }
  html body .showcase-modal-header > div { flex-wrap:wrap; min-width:0; }
  html body .showcase-modal-header .dialog-close { position:static; }
  html body .showcase-modal-body { flex:1; min-height:0; height:auto!important; }
  html body #showcaseModalFrame { max-width:100%; }
  @media (max-width:760px) {
  html.is-dashboard-route .sidebar { visibility:hidden; }
  html.is-dashboard-route .mobile-nav-open .sidebar { visibility:visible; }
  html.is-dashboard-route .mobile-nav-open .mobile-sidebar-backdrop { display:block; position:fixed; inset:0; z-index:89; width:100%; height:100dvh; border:0; border-radius:0; background:rgba(0,0,0,.48); }
  html.is-dashboard-route .sidebar-mobile-close { display:grid; place-items:center; flex:none; width:44px; height:44px; margin:0 0 8px auto; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--panel2); font-size:22px; }
  html.is-dashboard-route .sidebar { overscroll-behavior:contain; }
  }
  html.is-dashboard-route .workspace-account-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  html.is-dashboard-route .workspace-account-summary-item { display:block; min-height:66px; padding:6px; }
  html.is-dashboard-route .workspace-summary-icon { display:none; }
  html.is-dashboard-route .workspace-summary-copy { display:block; min-width:0; width:100%; }
  html.is-dashboard-route .workspace-summary-copy > span { display:block; font-size:11px; white-space:normal; line-height:1.3; }
  html.is-dashboard-route .workspace-summary-copy b { display:block; max-width:100%; font-size:12px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
  html.is-dashboard-route .workspace-account-summary { position:static; order:3; flex-basis:100%; margin-top:6px; }
  html.is-dashboard-route .workspace-header { flex-wrap:wrap; min-height:0; padding:10px 11px; }
  html.is-dashboard-route .workspace-header-primary { flex:1; }
  html.is-dashboard-route :is(.dashboard-stat span,.stat small,.panel-head p,.token-donut span,.token-donut-wrap > small,.token-rights-legend > div,.token-package-summary > span,.dashboard-chart-labels,.usage-summary-row span,.admin-log-usage-summary span) { font-size:12px; }
  html.is-dashboard-route :is(.dashboard-stat b,.usage-summary-row b) { font-size:20px; line-height:1.25; }
  html.is-dashboard-route :is(.usage-summary-row span,.admin-log-usage-summary span) { white-space:normal; overflow:visible; overflow-wrap:anywhere; }
  html.is-dashboard-route .admin-log-usage-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html.is-dashboard-route .admin-log-filter-grid { grid-template-columns:minmax(0,1fr); }
  html.is-dashboard-route :is(th,.api-keys-table td:before) { font-size:12px!important; }
  html.is-dashboard-route td { font-size:14px!important; }
  html.is-dashboard-route :is(.table-panel,.table-panel-wide,.overview-recent-panel,.usage-reference-logs) { max-width:100%; overflow-x:auto; }
  html.is-dashboard-route .app-main > .tabs { max-width:100%; overflow-x:auto; flex-wrap:nowrap; }
  html.is-dashboard-route .app-main > .tabs button { flex:none; white-space:nowrap; padding-inline:14px; }
  html body .playground-dialog { padding:20px 14px; }
  html body .playground { grid-template-columns:minmax(0,1fr); min-height:0; }
  html body :is(.playground-editor,.playground-result) { min-width:0; padding:16px 12px; }
  html body :is(.playground form,.playground label,.playground form > div,.playground form > div > div) { min-width:0; }
  html body .playground form > div { flex-wrap:wrap; gap:10px; }
  html body .playground-session { flex-direction:column; align-items:flex-start!important; }
  html body .playground-session > div { flex-wrap:wrap; overflow-wrap:anywhere; }
  html body :is(.playground-options,.playground-params-drawer) { grid-template-columns:minmax(0,1fr); }
  html body .playground-no-balance-banner { padding:12px!important; }
  html body .playground-no-balance-banner > div { flex-direction:column; }
  html body .playground-no-balance-banner button { white-space:normal; max-width:100%; }
  html body .playground-meta-bar { flex-wrap:wrap; gap:10px; }
  html body .showcase-title { white-space:normal!important; overflow:visible!important; }
  html.is-dashboard-route .usage-model-legend span { white-space:normal; overflow-wrap:anywhere; }
  html.is-dashboard-route .admin-stat-card-footer { flex-wrap:wrap; }
  html.is-dashboard-route .admin-stat-card-footer span { white-space:normal; overflow:visible; }
  html.is-dashboard-route .admin-stat-card-footer span:first-child { flex-shrink:0; }
}