/* Plebware readable mobile typography and controls */

body { font-size: 1.2rem; line-height: 1.75; }

main p, main li, main blockquote, main td, main th {
  font-size: 1.2rem;
  line-height: 1.75;
}

.excerpt { font-size: 1rem; line-height: 1.65; }

/* Header navigation: large, readable, and touch-friendly. */
.modes-list li a {
  font-size: 1.5rem !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  padding: 0.45rem 0.5rem !important;
  text-align: left !important;
}

/* Primary category titles are deliberately bold. */
.modes-list.primary-nav li a,
.modes-list li a {
  font-weight: 700 !important;
}

/* Secondary navigation is a full-width hamburger menu at every screen size. */
.secondary-nav-toggle {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  clear: both !important;
  box-sizing: border-box !important;
  margin: 0.5rem 0 !important;
  padding: 0.65rem 0.8rem !important;
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.secondary-navigation-panel {
  display: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  clear: both !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.secondary-navigation-panel.is-open {
  display: block !important;
}

.secondary-navigation-panel .secondary-nav {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.35rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0.35rem 0 0.75rem !important;
  padding: 0.5rem !important;
  box-sizing: border-box !important;
}

.secondary-navigation-panel .secondary-nav li {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}

.secondary-navigation-panel .secondary-nav li a {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: 1.35rem !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: left !important;
  padding: 0.55rem 0.5rem !important;
}

.nav-brand a { font-size: 1.35rem !important; }
.theme-toggle { font-size: 1.25rem !important; padding: 0.4rem 0.8rem !important; }
.systems-links, .systems-links li a { font-size: 1.05rem !important; }
.nav-label { font-size: 1rem !important; }

/* User-facing buttons and controls. */
.console-btn .label,
.footer-btn,
.copy-btn,
#read-aloud-voice-select {
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

.console-btn .label { font-weight: 600 !important; }
.copy-btn { padding: 0.4rem 0.8rem !important; opacity: 1 !important; }

/* On laptops/tablets, let the 12 primary categories use the full
   navigation width instead of the old 140px-per-column cap. */
@media (min-width: 601px) {
  .modes-list.primary-nav,
  .modes-list {
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: stretch !important;
  }

  .modes-list li {
    text-align: left !important;
  }
}

@media (max-width: 600px) {
  /* Keep article text comfortable. */
  body { font-size: 1.2rem !important; }
  main p, main li, main blockquote, main td, main th { font-size: 1.2rem !important; }

  /* Phone primary navigation remains two equal columns. */
  .modes-list.primary-nav,
  .modes-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.35rem 0.5rem !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.5rem !important;
    box-sizing: border-box !important;
  }

  .modes-list li {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .modes-list li a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: left !important;
    padding: 0.45rem 0.35rem !important;
  }

  /* Keep AI Helpers together as a single navigation label. */
  .modes-list.primary-nav li:nth-child(9) a {
    white-space: nowrap !important;
  }

  /* Keep the main category titles bold on phones. */
  .modes-list.primary-nav li a,
  .modes-list li a {
    font-weight: 700 !important;
  }

  .nav-brand a { font-size: 1.35rem !important; }
  .theme-toggle { font-size: 1.2rem !important; }
  .secondary-nav-toggle { font-size: 1.2rem !important; }
  .secondary-navigation-panel .secondary-nav li a { font-size: 1.2rem !important; }
  .console-btn .label, .footer-btn, .copy-btn, #read-aloud-voice-select { font-size: 1rem !important; }
  .excerpt { font-size: 1rem !important; }
  .post-date { font-size: 0.95rem !important; }
}

@media (max-width: 400px) {
  main p, main li, main blockquote, main td, main th { font-size: 1.15rem !important; }

  /* Keep two primary navigation columns on very small phones too. */
  .modes-list.primary-nav,
  .modes-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .modes-list li a { font-size: 1.1rem !important; }
  .modes-list.primary-nav li a,
  .modes-list li a { font-weight: 700 !important; }
  .secondary-nav-toggle { font-size: 1.1rem !important; }
  .secondary-navigation-panel .secondary-nav li a { font-size: 1.1rem !important; }
  .console-btn .label, .footer-btn, .copy-btn, #read-aloud-voice-select { font-size: 0.95rem !important; }
}

@media (min-width: 601px) and (max-width: 1024px) {
  body { font-size: 1.2rem !important; }
  .modes-list li a { font-size: 1.5rem !important; }
  .modes-list.primary-nav li a, .modes-list li a { font-weight: 700 !important; }
}