/* responsive.css — Responsive breakpoints and reduced-motion */
/* Responsive */
@media (max-width: 860px) {
  .container { padding: 1.8rem 1.2rem 2.4rem; }
  .topbar { gap: .8rem; padding: .7rem 1rem; }
  .page-intro { flex-direction: column; align-items: stretch; gap: 1rem; }
  .editor-layout { grid-template-columns: 1fr; border-radius: 0 0 var(--r) var(--r); }
  .editor-heading { grid-template-columns: 1fr; gap: .8rem; }
  .abroll-grid { grid-template-columns: 1fr; }
  .abroll-audio-zone { grid-column: auto; }
  .ab-settings { grid-template-columns: 1fr; align-items: stretch; }
  .result-grid { grid-template-columns: 1fr; }
  .jobs-table th:nth-child(4), .jobs-table td:nth-child(4) { display: none; }
}
@media (max-width: 640px) {
  body { background-size: 100% 100%, 24px 24px, 24px 24px; }
  .topbar { flex-wrap: wrap; min-height: 0; padding: .7rem 1rem; }
  .topbar-actions { width: 100%; flex-wrap: wrap; justify-content: space-between; }
  .quota-bar { min-width: 0; padding: .45rem .6rem; }
  .quota-copy strong { font-size: .76rem; }
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .brand-mark svg { width: 20px; }
  .brand-copy small { display: none; }
  .brand-divider, .brand-cutdee { display: none; }
  h1 { font-size: 2rem; }
  .lead { font-size: .9rem; }
  .steps { max-width: none; margin-bottom: 1rem; }
  .steps::before { top: 13px; }
  .steps--three::before { right: 16.6%; left: 16.6%; }
  .step { flex-direction: column; gap: .2rem; text-align: center; }
  .step span { width: 26px; height: 26px; flex-basis: 26px; font-size: .68rem; }
  .step em { width: 100%; font-size: .62rem; }
  /* Three tabs in 390px left no room for the one-line description, and the
     squeezed text was unreadable. The panel heading repeats that copy anyway. */
  .tabs { width: 100%; }
  .tab { padding: .6rem .4rem; gap: .15rem; }
  .tab-kicker { font-size: .58rem; }
  .tab strong { font-size: .78rem; }
  .tab small { display: none; }
  .ai-policy { grid-template-columns: 1fr; }
  .editor-main { padding: 1.1rem 1rem; }
  .dropzone-label { flex-direction: column; text-align: center; padding: .9rem .8rem; gap: .55rem; }
  .upload-icon { width: 40px; height: 40px; }
  .upload-progress-head { gap: .5rem; }
  .dropzone-label.compact-label { flex-direction: row; }
  .upload-formats { padding: 0 1rem .9rem; text-align: center; }
  .queue-head { align-items: flex-start; }
  .queue-head > div { max-width: 65%; }
  .file-row { grid-template-columns: 26px minmax(0, 1fr) auto; gap: .5rem; padding: .6rem .65rem; }
  .file-type { display: none; }
  .file-actions { grid-column: 3; }
  .move-file { width: 30px; height: 30px; font-size: .62rem; }  /* touch target */
  .remove-file { padding: .35rem .5rem; }
  .editor-action { flex-direction: column; align-items: stretch; gap: .6rem;
                   margin: 1rem -1rem -1.1rem; padding: .8rem 1rem .85rem; }
  /* On a phone the explanatory line duplicates what the dialog says;
     keep the bar to the button alone. */
  .editor-action p { display: none; }
  .quota-confirm-actions { flex-direction: column-reverse; }
  .quota-confirm-actions .primary, .quota-confirm-actions .ghost { width: 100%; }
  .primary { width: 100%; }
  .status { text-align: center; }
  .result-container { padding-right: 1rem; padding-left: 1rem; }
  .result-intro h1 { font-size: 1.8rem; }
  .result-meta { grid-template-columns: 1fr; }
  .card { padding: 1rem; }
  .card .section-heading { align-items: flex-start; }
  .btn-download { flex: 0 0 auto; }
  .result-video { max-height: 58vh; }
  footer { gap: .7rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important;
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
}