/* Phone-width fixes shared by every page. Injected by pwa::inject_head.
   Selectors start with `html` so they outrank each page's own rules (same selector plus one
   element) without `!important`, which is kept for inline styles only. */

@media (max-width: 640px) {
  /* Safari zooms the page when a field under 16px gets focus. */
  html input:not([type=checkbox]):not([type=radio]), html select, html textarea { font-size: 16px; }
  html img, html video, html iframe { max-width: 100%; }
  /* A stray pixel of overflow makes phones zoom the whole page out. `clip` (unlike
     `hidden`) doesn't create a scroll container, so sticky headers keep working. */
  html, html body { overflow-x: clip; }

  /* Page headers: let the title and its controls wrap instead of pushing sideways. */
  html .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  html .topbar > div { flex-wrap: wrap; gap: 8px; }
  html .topbar h1 { font-size: 18px; }
  html .topbar .back-link { display: none; }

  /* News sources and ministries: a swipeable row of chips above the list, instead of a
     long column you scroll past first. */
  html .layout { gap: 10px; margin-top: 10px; padding: 0 12px; }
  html .layout .sidebar {
    position: static; display: flex; gap: 6px; overflow-x: auto; max-height: none;
    padding: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  html .layout .sidebar::-webkit-scrollbar { display: none; }
  html .layout .sidebar h3 { display: none; }
  html .layout .sidebar .filter {
    flex: 0 0 auto; width: auto; white-space: nowrap; border: 1px solid #e5e7eb;
    border-radius: 999px; padding: 8px 12px; margin: 0;
  }
  html .layout .sidebar .filter.active { border-color: #7c3aed; }

  /* Day headers stick below the sticky nav rather than sliding under it. */
  html .daygroup > summary { top: 46px; }

  /* The nav is always there, so "back to dashboard" links only take space. */
  html .back-link { display: none; }

  /* Dashboard: the nav already shows the name, so skip the big title.
     A viewer has no header actions left (refresh is admin-only), so drop the header. */
  html .header .brand { display: none; }
  html.md-viewer .header:has(.brand) { display: none; }

  /* Dashboard */
  html .widget { padding: 16px; }
  html .widget h2 { font-size: 1.1rem; }
  html .widget-refresh, html .glance-upd { min-width: 36px; min-height: 36px; }
  html #currency-analysis-widget .main-content { flex-direction: column; height: auto; }
  html #currency-analysis-widget .analytics-panel { flex: 1 1 auto; }
  html #currency-analysis-widget .entries-section { max-height: 360px; }
  html #currency-analysis-widget .quick-actions { flex-wrap: wrap; }

  /* NEPSE */
  html .np-toolsrow { grid-template-columns: 1fr !important; }
  html .np-check { white-space: normal; }
  html table.np-holdings { display: block; overflow-x: auto; max-width: 100%; }
  html code { overflow-wrap: anywhere; }
  html .np-alert-add, html .np-act-refresh, html .np-alert-del { min-height: 34px; padding: 6px 10px; }

  /* Parliament tabs scroll sideways when they don't fit. */
  html .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html .tabs::-webkit-scrollbar { display: none; }
  html .tabs > * { flex: 0 0 auto; white-space: nowrap; }

  /* Country situation */
  html .grid { grid-template-columns: 1fr; }
  html .eco-t { display: block; overflow-x: auto; }

  /* Settings: inline widths made for desktop */
  html .settings-container { padding: 0 12px; }
  html .settings-container input[style*="min-width"],
  html .settings-container select[style*="min-width"],
  html .settings-container input[style*="width"],
  html .settings-container select[style*="width"] { min-width: 0 !important; width: 100% !important; }
  html .settings-container table { display: block; overflow-x: auto; }

  /* NEPSE guide: jumping to a heading lands below the nav. */
  html .doc h2, html .doc h3 { scroll-margin-top: 60px; }

  /* Modals opened from the dashboard can be taller than a phone screen. */
  html #income-modal > div, html #conversion-modal > div, html #convert-modal > div, html #edit-modal > div {
    max-height: 90vh; overflow-y: auto;
  }
}