/* Responsive controls and bounded content. Loaded after page-specific styles.
   Keep tables scrollable inside their own regions; never hide page overflow. */
@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; gap: 12px 20px; padding-inline: 22px; }
  .site-header nav { order: 3; width: 100%; justify-content: space-between; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
  .site-header nav a, .language { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .site-header nav a { padding-inline: 4px; line-height: 1.5; }
  .site-header nav a::after { bottom: 2px; }
  .header-actions { gap: 12px; margin-inline-start: auto; }
  .button, button.button, button[type="submit"] { min-height: 44px; min-width: 44px; }
  .auth-links { gap: 12px; flex-wrap: wrap; }
  .auth-links a, .back-link, .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-links a { min-height: 44px; display: flex; align-items: center; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .translation-workspace textarea { font-size: 16px; min-width: 0; }
  input:not([type="checkbox"]):not([type="radio"]), select { min-height: 46px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  .grid > *, .tool-grid > *, .hero > *, .guide-grid > *, .panel, .translation-workspace .card { min-width: 0; }
  .app-page h1, .app-page h2, .app-page h3, .app-page p, .auth-card p,
  .app-page li, .errorlist li, .helptext { overflow-wrap: anywhere; }
  .table-wrap, .table-scroll, .translation-workspace details > div { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .translation-workspace details > div { max-height: 460px; }
  .translation-workspace summary { min-height: 44px; padding-block: 8px; }
  .translation-workspace textarea { min-height: 250px; line-height: 1.8; resize: vertical; }
  .translation-workspace video, .translation-workspace audio { max-width: 100%; }
  .eyebrow { flex-wrap: wrap; }
  .copy-row input { min-width: 0; }
  .actions form { max-width: 100%; }
  .actions a, .actions button { overflow-wrap: anywhere; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 24px; padding-block: 48px 32px; }
  .hero-description { max-width: 620px; }
  .hero-visual { width: 100%; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 480px) {
  .container { padding-inline: 18px; }
  .header-inner { padding: 13px 18px 9px; gap: 9px 12px; }
  .header-actions { gap: 6px; }
  .header-actions .button.small { padding-inline: 12px; }
  .site-header nav { font-size: 11px; }
  .hero-actions { flex-wrap: wrap; gap: 10px 18px; }
  .hero-actions .button { flex-shrink: 0; }
  html[dir="ltr"] .hero h1 { font-size: clamp(34px, 10vw, 44px); }
  .app-page { padding-block: 28px 44px; }
  .app-page h1 { font-size: 27px; }
  .panel, .links-page .panel { padding: 18px; border-radius: 17px; }
  .translation-workspace .card { padding: 16px; }
  .auth-wrap { padding-inline: 18px; margin-block: 26px 44px; }
  .auth-card h1 { font-size: 27px; }
  .auth-card input:not([type="checkbox"]):not([type="radio"]) { max-width: 100%; }
  .footer-links { gap: 4px 18px; }
  .footer-top { padding-bottom: 20px; }
  .links-page .actions { align-items: stretch; gap: 10px; }
  .links-page .actions .button { flex: 1 1 100%; }
  .links-page .actions form { width: 100%; }
  .links-page .actions form .button { width: 100%; }
  .translation-workspace form input[type="file"] { padding: 8px; }
  input[type="file"]::file-selector-button { max-width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; margin-inline-end: 8px; background: var(--bg); color: var(--ink); font: inherit; }
}