/* ── 33. Utilities ────────────────────────────────────────── */
[hidden] { display: none !important; }

.tabular-nums { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── 34. Responsive · Tablet (≤1024px) ───────────────────── */
@media (max-width: 1024px) {
  .login-page { grid-template-columns: 1fr; }
  .login-brand { padding: var(--space-8) var(--space-6); min-height: auto; }
  .login-metrics { grid-template-columns: repeat(2, 1fr); }

  .topbar-inner { flex-wrap: wrap; height: auto; min-height: var(--topbar-height); padding: var(--space-2) var(--space-4); }
  .topbar-left { flex-wrap: wrap; }
  .user-chip-meta { display: none; }

  .home-metrics { grid-template-columns: repeat(2, 1fr); }
  .home-layout { grid-template-columns: 1fr; }

  .voice-console,
  .voice-form,
  .voice-studio { grid-template-columns: 1fr; }

  .waveform-time { min-width: 52px; }

  .add-task-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .add-task-hero-action {
    max-width: 360px;
  }

  .task-settings-grid { grid-template-columns: 1fr 1fr; }
  .advanced-settings-card { grid-column: 1 / -1; }
  .advanced-settings-body { grid-template-columns: 1fr; }

  .batch-grid { grid-template-columns: 1fr; }
  .publish-grid { grid-template-columns: 1fr; }

  .batch-console { grid-template-columns: 1fr; }
  .batch-stats { flex-wrap: wrap; }
  .batch-stat { flex: 1; min-width: 104px; }

  .publish-hero { grid-template-columns: 1fr; }
  .publish-hero-stat { flex: 1; min-width: 120px; }
  .publish-hero-cta { justify-content: space-between; }

  .script-fields { grid-template-columns: 1fr; }
  .form-grid.two { grid-template-columns: 1fr; }

  .publish-account-grid { grid-template-columns: 1fr; }
  .persona-manager-layout { grid-template-columns: 1fr; }
  .persona-editor-panel { position: static; }
  .publish-platform-list {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--color-line);
  }
}

/* ── 35. Responsive · Mobile (≤768px) ─────────────────────── */
@media (max-width: 768px) {
  .menu-toggle { display: flex; }

  .studio-grid {
    grid-template-columns: 1fr;
    position: relative;
  }

  .rail {
    position: fixed;
    top: calc(var(--chrome-height) + env(safe-area-inset-top));
    left: 0;
    bottom: 0;
    width: var(--rail-width-mobile);
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }

  body.rail-open .rail,
  .studio-grid.rail-open .rail {
    transform: translateX(0);
  }

  .topbar-left .menu-toggle { order: -1; }

  .demand-wall-btn { padding: 0 var(--space-3); }
  .demand-wall-btn-label { display: none; }

  .workspace {
    padding: var(--space-3) var(--space-4) 0;
  }

  .surface { padding: var(--space-4); }

  .stage-head {
    flex-direction: column;
    align-items: stretch;
  }

  .stage-head .actions {
    justify-content: flex-start;
  }

  .stage-head .actions .btn,
  .stage-head .actions .mini-btn {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }

  .home-metrics { grid-template-columns: 1fr; }
  .home-head { flex-direction: column; }
  .home-head .btn { width: 100%; min-height: 44px; }

  .home-project-card,
  .home-output-card {
    flex-direction: column;
    align-items: stretch;
  }

  .home-project-actions,
  .home-output-actions {
    justify-content: flex-start;
  }

  .home-project-actions .mini-btn,
  .home-output-actions .mini-btn,
  .home-output-actions .btn {
    min-height: 44px;
    flex: 1;
  }

  .workflow-track {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-1);
  }

  .workflow-step {
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
  }

  .add-task-head-btn {
    display: none;
  }

  .add-task-hero {
    padding: var(--space-4);
  }

  .add-task-hero-copy h3 {
    font-size: 16px;
  }

  .add-task-flow {
    align-items: stretch;
  }

  .add-task-flow span {
    flex: 1 1 150px;
    white-space: normal;
  }

  .add-task-flow i {
    display: none;
  }

  .add-task-hero-action {
    max-width: none;
  }

  .add-task-field-head,
  .add-task-submit-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .task-head-actions {
    justify-content: flex-start;
  }

  .task-head-actions .btn {
    flex: 1;
  }

  .add-task-submit-btn {
    width: 100%;
    min-height: 48px;
  }

  .task-settings-grid { grid-template-columns: 1fr; }
  .add-task-common-grid { grid-template-columns: 1fr; }

  .copy-type-grid { grid-template-columns: 1fr; }
  .copy-persona-grid { grid-template-columns: 1fr; }
  .persona-list { grid-template-columns: 1fr; }
  .persona-card-actions .mini-btn { flex: 1; }

  .copy-mode-tabs { max-width: none; }

  .copy-link-row {
    grid-template-columns: 1fr;
  }

  .copy-link-row .btn {
    width: 100%;
    justify-content: center;
  }

  .voice-list-grid { grid-template-columns: 1fr; }
  .bgm-library { grid-template-columns: 1fr; }

  .asset-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

  .script-card,
  .script-asset-card-top {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .script-asset-toolbar .toolbar-secondary {
    justify-content: flex-start;
  }

  .script-asset-visual {
    margin: 0 var(--space-4);
  }

  .script-asset-copy {
    padding: var(--space-4);
  }

  .script-index { width: 32px; height: 32px; font-size: 12px; }

  .publish-mode-row { flex-direction: column; align-items: stretch; }
  .publish-stay { margin-left: 0; min-height: 44px; }

  .publish-video-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .publish-video-edit-inline {
    grid-template-columns: 1fr;
  }

  .publish-video-save {
    width: 100%;
    min-height: 36px;
  }

  .publish-video-input,
  .publish-video-textarea {
    min-height: 36px;
    font-size: 13px;
  }

  .video-schedule-field {
    min-width: 0;
    width: 100%;
  }

  .video-schedule-input {
    min-height: 44px;
    font-size: 14px;
  }

  .publish-job { flex-direction: column; }
  .publish-job-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }

  .task-item { flex-direction: column; align-items: stretch; }
  .task-right { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }

  .batch-section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .result-head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .result-head-actions .mini-btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  .result-item { flex-wrap: wrap; }

  .result-meta {
    flex: 1 1 calc(100% - 88px);
    min-width: 0;
  }

  .result-actions { width: 100%; opacity: 1; justify-content: stretch; }
  .result-actions .btn,
  .result-actions .mini-btn { flex: 1 1 0; min-width: 0; min-height: 44px; }

  .publish-hero-cta { flex-direction: column; align-items: stretch; }
  .publish-hero-hint { text-align: left; max-width: none; }
  .publish-hero .publish-cta { width: 100%; }

  .modal-backdrop { padding: var(--space-4); align-items: flex-end; }
  .modal-backdrop > section {
    max-height: 90dvh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .preset-grid,
  .subtitle-preset-grid { grid-template-columns: repeat(2, 1fr); }

  .top-project-switch select,
  .industry-picker-btn { max-width: 160px; }

  .workspace-bar { flex-wrap: wrap; }
  .ws-picker { max-width: 150px; }
  .ws-field > label { font-size: 10px; }

  .quick-create {
    flex-wrap: wrap;
    justify-content: center;
  }

  .user-chip .btn.ghost { min-height: 44px; }

  .btn, .mini-btn, .icon-btn, .step-nav button {
    min-height: 44px;
  }

  .win-btn {
    width: 44px;
    height: 32px;
  }

  .login-metrics { grid-template-columns: 1fr 1fr; }
  .login-panel { padding: var(--space-6); }

  .voice-select-row { flex-direction: column; }
  .voice-select-row .btn { width: 100%; min-height: 44px; }

  .publish-login-box { flex-direction: column; align-items: stretch; }
  .publish-login-box .btn { min-height: 44px; }

  .platform-picker button { min-height: 44px; flex: 1 1 calc(50% - var(--space-2)); }
}

/* ── 36. Reduced Motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}