/* Mobile-only optimization. Desktop layout is intentionally untouched. */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }

  .app-shell { display:block; min-height:100dvh; }
  .main { width:100%; min-width:0; }

  /* Slide-out navigation stays off-canvas and uses most of the phone width. */
  .sidebar {
    width:min(86vw, 320px);
    left:min(-90vw, -330px);
    padding:14px 12px calc(14px + env(safe-area-inset-bottom));
    z-index:50;
  }
  .sidebar.open { left:0; }
  .nav-link { min-height:44px; padding:11px 12px; font-size:14px; }

  /* Two-row mobile header: title first, project-document shortcuts second. */
  .topbar {
    height:auto;
    min-height:64px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:8px 10px;
    padding:8px 12px 7px;
    padding-top:max(8px, env(safe-area-inset-top));
    background:#0b0e13f5;
    z-index:30;
  }
  .menu-button {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:0;
    border-radius:11px;
    font-size:19px;
  }
  .top-title { min-width:0; }
  .top-title strong {
    font-size:18px;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .top-title span { display:none; }

  .top-actions {
    grid-column:1 / -1;
    width:100%;
    margin:0;
    display:flex;
    gap:7px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:1px 0 3px;
  }
  .top-actions::-webkit-scrollbar { display:none; }
  .top-actions .main-file-action {
    display:inline-flex !important;
    flex:0 0 auto;
    min-height:40px;
    padding:8px 11px;
    border-radius:10px;
    font-size:12px;
    line-height:1.15;
    white-space:nowrap;
  }
  .top-actions > .button:not(.main-file-action) { display:none !important; }

  /* Main page density. */
  .content {
    width:100%;
    max-width:none;
    padding:14px 12px calc(24px + env(safe-area-inset-bottom));
  }
  .hero-row {
    display:block;
    margin-bottom:14px;
  }
  .hero-row h1 { font-size:25px; line-height:1.1; margin:4px 0 5px; }
  .hero-row p { font-size:11px; line-height:1.4; }
  .version-card { display:none; }

  /* Dashboard tiles: compact but still easy to tap. */
  .metric-grid,
  .metric-grid.compact {
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:12px;
  }
  .metric-card,
  .metric-grid.compact .metric-card {
    min-height:92px;
    padding:13px 14px;
    gap:12px;
    border-radius:14px;
    align-items:center;
  }
  .metric-card:hover { transform:none; }
  .metric-icon { width:44px; height:44px; border-radius:12px; }
  .metric-card small { font-size:11px; }
  .metric-card strong { font-size:24px; line-height:1.05; margin:3px 0; }
  .metric-card p { font-size:11px; line-height:1.35; }

  .two-col,
  .warning-grid,
  .doc-grid { grid-template-columns:1fr; gap:10px; margin-bottom:10px; }
  .panel { padding:14px; border-radius:14px; margin-bottom:10px; }
  .panel-head { margin-bottom:11px; }
  .panel-head h2 { font-size:19px; }
  .panel-head a { font-size:11px; }

  .fact-list { gap:7px; }
  .fact-list > div { padding:10px 11px; }
  .fact-list strong { font-size:14px; line-height:1.25; overflow-wrap:anywhere; }
  .warning { padding:9px; }
  .warning p { font-size:11px; }

  /* Routing summary stays readable without giant stacked blocks. */
  .route-summary {
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:7px;
  }
  .route-stat { padding:11px; }
  .route-stat strong { font-size:19px; }
  .route-stat span { line-height:1.25; }

  /* Forms and document tools use full phone width. */
  .search-bar,
  .hardware-toolbar,
  .form-grid.two,
  .quick-links { grid-template-columns:1fr; }
  .search-bar .button { grid-column:auto; }
  .button { min-height:42px; }
  input, select, textarea { font-size:16px !important; } /* prevents iOS focus zoom */

  .doc-card { padding:10px; }
  .doc-text strong { font-size:12px; }

  /* Tables remain usable with touch horizontal scrolling. */
  .table-wrap {
    width:calc(100vw - 24px);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:10px;
  }
  table { font-size:10px; }
  th, td { padding:8px 9px; }

  .viewer-actions {
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .viewer-actions::-webkit-scrollbar { display:none; }
  .viewer-actions .button { flex:0 0 auto; }
  .pdf-viewer { height:72dvh; min-height:440px; border-radius:8px; }

  .auth-page { padding:16px 12px; }
  .auth-card { padding:20px 16px; border-radius:14px; }
}

@media (max-width: 390px) {
  .top-title strong { font-size:17px; }
  .content { padding-left:10px; padding-right:10px; }
  .metric-card { padding:12px; }
  .metric-card strong { font-size:22px; }
  .route-summary { grid-template-columns:1fr; }
  .table-wrap { width:calc(100vw - 20px); }
}