/* nav-responsive.css
 *
 * The shared .navbar puts a quote, an XP widget and eight nav pills in one row
 * that cannot wrap or shrink. Measured on a 412px viewport (Galaxy S24 Ultra):
 * Reader rendered 950px wide, Writer 928px, News 803px — every page scrolled
 * sideways, and the pills past "Speaker" were off screen entirely.
 *
 * Loaded by every app page. Overrides only, so it can't break the desktop
 * layout: nothing here applies above 900px.
 */

@media (max-width: 900px) {
  /* The quote is the first thing worth losing — it's decorative, and it was
     taking flex:1 of a row that had no room to give. */
  .nav-quote,
  .top-bar-quote,
  #navQuote { display: none !important; }

  /* Let the pills scroll on their own instead of pushing the page wider.
     Momentum scrolling on, scrollbar hidden — it should feel like a phone
     tab strip, not a broken desktop layout. */
  .navbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 12px;
    padding-right: 12px;
    gap: 6px;
  }
  .navbar::-webkit-scrollbar { display: none; }

  .nav-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.72rem;
    padding: 4px 8px;
  }

  .navbar .nav-divider { display: none; }

  /* The XP widget was the single widest element on the row. */
  #xpNavWidget {
    flex: 0 0 auto;
    gap: 4px !important;
    padding: 2px 8px !important;
    font-size: 0.7rem;
  }
  #xpNavXp { display: none; }

  /* Nothing on a phone should be able to force the document wider than the
     screen. Catches long words, wide tables and oversized media. */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, canvas, svg, iframe, table, pre { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

@media (max-width: 600px) {
  .navbar .brand { font-size: 0.8rem; }
  .nav-pill { font-size: 0.7rem; padding: 3px 7px; }
}

@media (max-width: 380px) {
  /* Galaxy Fold, folded. */
  .navbar .brand { display: none; }
  #xpNavWidget { display: none !important; }
}