/* Keep long integer examples inside the converter on narrow screens. */
.sample-chip {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .nav-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 0;
  }
  .brand { font-size: 0.8rem; }
  .brand-mark { width: 28px; height: 28px; }
  .nav-actions { grid-column: 2; grid-row: 1; }
  .nav-links { grid-column: 1 / -1; justify-content: center; }
  .nav-cta { display: none; }
  .language-select { width: 110px; min-width: 0; flex-basis: 110px; }
  .language-select-button { padding: 8px 10px; font-size: 0.75rem; }
  .hero-copy { padding: 18px; }
  .hero-copy h1 { font-size: 2rem; line-height: 1.1; margin-bottom: 10px; }
  .hero-lede { font-size: 0.9rem; line-height: 1.5; margin-bottom: 8px; }
  .hero-proof { gap: 8px; margin-top: 8px; }
  .hero-proof span { padding: 6px 8px; font-size: 0.65rem; }
  .panel-kicker, .mode-tabs { display: none; }
  .panel-head { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 12px; }
  .panel-head h2 { font-size: 1rem; margin: 0; }
  .status-pill { padding: 4px 6px; font-size: 0.65rem; }
  .option-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
  .switch { font-size: 0.7rem; gap: 6px; }
  .format-help { font-size: 0.7rem; line-height: 1.4; margin-bottom: 8px; }
  .text-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .text-box { min-width: 0; }
  textarea { min-height: 120px; padding: 10px; font-size: 0.9rem; }
  .text-box small { font-size: 0.7rem; line-height: 1.4; }
}