/* 触屏工作台：手机纵向编辑，平板保留编辑与预览双栏。 */
.mobile-workspace-tools, .mobile-table-hint { display: none; }

@media (max-width: 1180px), (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; }
  body { --workspace-top: calc(60px + env(safe-area-inset-top, 0px)); }
  .topbar {
    height: var(--workspace-top);
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .page {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  /* iOS 聚焦小字号输入框时会放大页面，表单统一使用 16px。 */
  body input:not([type="checkbox"]):not([type="range"]), body select, body textarea,
  body .text-style-controls label > select, body #json-text, body #image-json-result {
    font-size: 16px !important;
    min-height: 44px;
  }
  body button, body .text-button, body summary { min-height: 44px; }
  body .icon-button, body .icon-toggle, body .delete-row { min-width: 44px; }
  body .delete-row { display: block; width: 44px; }
  .primary-button, .secondary-button, .ghost-button, .add-button,
  .new-chart-button, .history-trigger, .text-button { font-size: 13px; }
  .text-button { display: inline-flex; align-items: center; justify-content: center; }
  .ui-font-control select { width: 116px; }
  .switch-row { min-height: 44px; }
  .switch-row input { flex-shrink: 0; }
  input[type="range"] { height: 44px; }
  .step-nav { top: var(--workspace-top); }
  .step-panel { scroll-margin-top: calc(var(--workspace-top) + 76px); }
  .editor, .preview-column, .step-nav { scroll-margin-top: calc(var(--workspace-top) + 12px); }
  .field-hint, .step-lead, .group-head p, .layout-note, .file-hint,
  .preview-view-tools > span, .extra > summary, .style-details > summary,
  .text-style-controls label, .theme-card, .layout-button, .header-style-button,
  .map-provinces button, .map-edit-actions button { font-size: 12px; }
  .group-head h3, label { font-size: 13px; }
  .step-lead { line-height: 1.8; }
  .step-tab-copy small { font-size: 11px; }
  .table-scroll { max-height: min(55dvh, 520px); overscroll-behavior-x: contain; }
  .table-scroll table { min-width: 680px; }
  .table-scroll th { font-size: 12px; white-space: normal; }
  .table-scroll th:first-child { width: 36px; }
  .table-scroll th:last-child { width: 48px; }
  .table-scroll td input { padding: 10px 8px; }
  .mobile-table-hint { display: block; margin-bottom: 8px; }
  .keyword-row { grid-template-columns: minmax(0, 1fr) 48px 44px; }
  .ranking-custom { flex-wrap: wrap; }
  .ranking-custom input { width: 76px; }
  .map-annotation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-tools { flex-direction: column; align-items: stretch; }
  .preview-tools .primary-button, .export-actions { width: 100%; flex: none; }
  .preview-footnote { gap: 10px; }
  .size-field { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .size-field select { max-width: 100%; }
  .size-field > span { display: inline; font-size: 12px; }
  #status { font-size: 13px; }
  .history-sheet { max-height: min(65dvh, 600px); }
  .history-copy small, .history-delete { font-size: 12px; }
  .history-copy strong { font-size: 14px; }
  .history-delete { padding: 6px 10px; }
  dialog { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
  body:has(dialog[open]) { overflow: hidden; }
  .dialog-heading, .viewer-heading { gap: 8px; }
  .dialog-heading h2, .viewer-heading h2 { min-width: 0; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions > button { flex: 1 1 auto; }
  #error-notification { top: calc(var(--workspace-top) + 10px); }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .workspace { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 16px; }
  .template-panel { grid-column: 1 / -1; position: static; max-height: none; }
  .template-list { flex-direction: row; overflow-x: auto; gap: 8px; padding: 10px; }
  .template-button { flex: 0 0 144px; min-height: 58px; }
  .template-button small, .aside-note, .ratio-badge, .top-motto { display: none; }
  .editor, .preview-column { width: auto; min-width: 0; }
  .preview-column { position: sticky; top: var(--workspace-top); max-height: calc(100dvh - var(--workspace-top) - 16px); overflow-y: auto; }
  .layout-choices, .theme-grid, .header-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-tab { padding: 10px 4px; gap: 4px; }
  .step-tab-index, .step-dot { display: none; }
}

@media (max-width: 760px), (max-width: 932px) and (max-height: 500px) {
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .topbar { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); gap: 8px; }
  .top-tools { gap: 5px; min-width: 0; }
  .topbar .brand-word { display: block; font-size: 14px; }
  .brand { gap: 7px; }
  .brand-word small, .ui-font-control > span, .local-badge { display: none; }
  .ui-font-control select { width: 106px; padding-left: 6px; }
  #model-settings-open { padding: 0 8px; font-size: 12px; }
  .masthead { flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 0 14px; }
  .masthead h1 { font-size: 23px; }
  .masthead-actions, .masthead-buttons { width: 100%; }
  .new-chart-button { flex: 1; justify-content: center; }
  .workspace { display: flex; flex-direction: column; gap: 14px; }
  .template-panel, .editor, .preview-column { width: 100%; min-width: 0; }
  .template-list { scroll-snap-type: x proximity; }
  .template-button { scroll-snap-align: start; }
  .template-button strong { font-size: 13px; }
  .preview-column { position: static; max-height: none; overflow: visible; }
  .step-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 6px; gap: 0; }
  .step-tab { min-height: 62px; padding: 8px 5px; border-bottom-width: 2px; }
  .step-tab-index, .step-dot { display: none; }
  .step-tab-copy strong { font-size: 15px; }
  .step-panel { padding: 16px 12px 20px; }
  .layout-choices, .theme-grid, .header-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .input-sources { padding: 10px 12px; }
  .input-sources > span { flex-basis: 100%; }
  .input-sources > button { flex: 1; }
  .data-actions { gap: 8px; }
  .sort-field { margin-left: 0; }
  .sort-field select { width: auto; }
  .preview-main { padding: 12px; }
  .preview-column .preview-stage { padding: 6px; }
  .preview-footnote { align-items: flex-start; flex-direction: column; }
  .preview-view-tools > span { max-width: 50%; }
  .preview-tools { position: sticky; top: var(--workspace-top); z-index: 9; padding: 10px 12px; }
  .history-sheet { position: fixed; top: calc(var(--workspace-top) + 8px); left: 16px; right: 16px; width: auto; }
  .mobile-workspace-tools {
    display: grid;
    grid-template-columns: 1fr 1fr 1.7fr;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 -6px 24px -16px var(--ink);
  }
  .mobile-workspace-tools button { border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
  .mobile-workspace-tools .primary-button { justify-content: center; border-color: var(--accent-solid); background: var(--accent-solid); color: var(--on-accent); }
  body:has(dialog[open]) .mobile-workspace-tools, body.is-editing-field .mobile-workspace-tools { display: none; }
  .page-footer { padding-left: 16px; padding-right: 16px; }
  body dialog, body #image-import-dialog, body #model-settings-dialog, body #preview-viewer {
    width: calc(100% - 16px);
    max-width: none;
    max-height: calc(100dvh - 16px);
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  }
  body #image-import-dialog, body #preview-viewer { height: calc(100dvh - 16px); }
  /* 手机上使用单一滚动面，软键盘出现后仍可到达底部操作。 */
  body #image-import-dialog { overflow-y: auto; }
  .image-import-grid { display: flex; flex-direction: column; overflow: visible; flex: none; }
  .import-section { overflow: visible; flex: none; }
  .model-manager { grid-template-columns: 1fr; gap: 14px; }
  .model-profile-list { max-height: 160px; }
  .model-name-input { flex-wrap: wrap; }
  .model-name-input input { flex-basis: 100%; }
  .image-drop { min-height: 160px; }
  .dialog-actions { gap: 8px; }
  .dialog-heading { position: sticky; top: 0; z-index: 3; padding-bottom: 6px; background: var(--surface); }
  .json-example-tools select { width: 100%; }
  .viewer-tools { gap: 6px; }
  #preview-zoom-in, #preview-zoom-out { min-width: 44px; }
  #preview-viewer-info { width: 100%; margin: 0; }
  #preview-viewer .viewer-hint { font-size: 12px; }
}

@media (max-width: 374px) {
  .topbar .brand-word { display: none; }
  .field-row, .map-annotation { grid-template-columns: 1fr; }
}