/* Adaptive controls: phone bottom navigation, tablet rail and native dialog sheets.
   Same navigation/form nodes preserve drafts, focus and authenticated media. */
.mobile-task-picker { display: none; }

@media (max-width: 1100px) {
  :root { --control-height: 48px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  button, .primary, .secondary, .text-button, summary { min-height: 48px; }
  summary { padding-block: 12px; }
  .caption-word span { font-size: 13px; }
  .caption-words { overscroll-behavior: contain; }
  .caption-toggle { min-height: 48px; }
  :is(#finishing-editor, [data-montage-finish], #reframe-editor, .analysis-candidate) input[type="checkbox"],
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; flex: 0 0 auto; }
  label:has(> input[type="checkbox"]) { min-height: 48px; display: flex; align-items: center; gap: 10px; }
  dialog { max-height: calc(var(--visible-height, 100dvh) - 32px); overflow-y: auto; overscroll-behavior: contain; }
  body:has(dialog[open]) { overflow: hidden; }
  .editor-source-player video, .final-player video { max-height: min(60svh, 480px); }
}

/* Tablet: a compact, persistent rail leaves room for the actual work. */
@media (min-width: 601px) and (max-width: 1100px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; display: flex; width: 92px; padding: 20px 8px; border-right: 1px solid var(--line); border-bottom: 0; }
  .sidebar .brand { justify-content: center; }
  .sidebar .brand > span:last-child, .sidebar .nav-label, .sidebar-note { display: none; }
  .sidebar nav { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .sidebar nav a { flex-direction: column; gap: 5px; padding: 10px 2px; font-size: 12px; text-align: center; min-height: 64px; }
  .sidebar nav .nav-full { display: none; }
  .sidebar nav .nav-short { display: inline; white-space: normal; }
  .workspace { margin-left: 92px; }
  .topbar { padding: 12px 24px; }
  .topbar > span { flex-basis: auto; }
  .locale-picker select { max-width: 165px; }
  main { padding: 24px; }
  .post-task-nav { gap: 8px; }
  .post-task-nav a { flex: 1 1 auto; justify-content: center; }
  .catalog-search { grid-template-columns: minmax(0,1fr) minmax(120px,160px); }
  .catalog-search button { grid-column: 1 / -1; }
}
@media (min-width: 1000px) and (max-width: 1100px) {
  .editor-workspace { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 20px; align-items: start; }
  .editor-workspace .native-preview { position: sticky; top: 16px; margin-top: 0; padding: 12px; }
}

/* Phone: reachable navigation with room for the home indicator and keyboard. */
@media (max-width: 600px) {
  :root { --text-small: 13px; --text-support: 14px; --text-body: 15px; --mobile-nav-height: 72px; }
  html { scroll-padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 16px); }
  .sidebar { position: fixed; inset: auto 0 0; width: 100%; padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); border: 0; border-top: 1px solid var(--line); background: var(--white); z-index: 5; }
  .sidebar .brand, .sidebar .nav-label, .sidebar-note { display: none; }
  .sidebar nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 2px; margin: 0; }
  .sidebar nav a { min-height: 60px; padding: 5px 1px; gap: 4px; font-size: 11px; font-weight: 650; }
  .sidebar .nav-icon { width: 22px; height: 22px; }
  .sidebar nav .nav-short { white-space: normal; }
  .workspace { margin-left: 0; padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)); }
  .topbar { flex-wrap: nowrap; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; }
  .topbar > span { display: block; flex: 1; min-width: 0; font-size: 15px; }
  .topbar .workspace-label, .topbar .separator, .locale-picker > span { display: none; }
  .topbar strong { font-weight: 650; overflow-wrap: anywhere; }
  .locale-picker { margin-left: 0; }
  .locale-picker select { width: 120px; max-width: 120px; padding-inline: 6px; }
  #session { min-width: 56px; padding-inline: 8px; margin-left: 0; }
  #session::after { font-size: 13px; }
  #notice { min-height: 0; padding: 8px 16px; }
  #notice[hidden] { display: none !important; }
  main { padding: 20px 14px; }
  .intro { font-size: 14px; }
  h1 { font-size: 26px; line-height: 1.2; }
  .card { padding: 18px; }
  .drop { min-height: 144px; }
  .caption-word { grid-template-columns: 1fr; gap: 4px; padding-block: 6px; }
  .caption-word span { font-size: 13px; }
  .caption-controls { grid-template-columns: minmax(0,1fr); }
  .post-task-nav { display: none; }
  .mobile-task-picker { display: grid; gap: 8px; margin-block: 16px 24px; }
  .mobile-task-picker > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .mobile-task-picker button { max-width: 120px; white-space: normal; }
  .row-card .row-actions { flex-wrap: wrap; }
  .actions { gap: 10px; }
  .actions > :is(button,a) { white-space: normal; text-align: center; }
  .catalog-thumbnail { height: 200px; }
  footer { font-size: 12px; }
  dialog { position: fixed; top: auto; bottom: var(--keyboard-inset, 0px); left: 0; right: 0; margin: 0 auto; width: 100%; max-width: none; max-height: min(88dvh, calc(var(--visible-height, 100dvh) - 16px)); padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; border-bottom: 0; }
  dialog::before { content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 18px; border-radius: 2px; background: var(--control-line); }
  dialog .actions { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom, 0px)); background: var(--white); padding-block: 12px; }
  dialog p { font-size: 14px; }
  html[data-keyboard-open] .sidebar { display: none; }
  html[data-keyboard-open] .workspace { padding-bottom: 16px; }
}
@media (pointer: coarse) { button, .primary, .secondary, .text-button, summary { min-height: 48px; } }