/* 原 styles.css L5626-L6196 连续区间纯移动（UI 重构阶段 A）。内容：响应式大块（820/1240/680/620/reduced-motion）。层叠顺序由 01→12 的 <link> 顺序保持。 */
@media (max-width: 820px) {
  .account-modal-card {
    width: min(560px, 100%);
    height: auto;
    max-height: calc(100vh - 24px);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow: auto;
    border-radius: 20px;
  }

  .account-value-pane {
    gap: 16px;
    padding: 30px 28px 24px;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 64%, transparent);
  }

  .account-value-pane h3 {
    padding-right: 42px;
    font-size: 25px;
  }

  .account-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 12px;
    padding-top: 6px;
  }

  .account-benefit-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
  }

  .account-benefit-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .account-benefit-icon svg {
    width: 17px;
    height: 17px;
  }

  .account-benefit-row span:not(.account-benefit-icon) {
    display: none;
  }

  .account-modal-body {
    padding: 28px;
  }

  .account-auth-form,
  .account-signed-in {
    gap: 20px;
  }

  .account-resend-confirmation {
    margin-top: 0;
  }
}

@media (max-width: 1240px), (any-pointer: coarse) and (max-width: 1366px) {
  body {
    overflow: hidden;
  }

  .workspace {
    grid-template-columns: clamp(395px, var(--editor-width, 500px), calc(100% - 292px)) 12px minmax(320px, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding-right: env(safe-area-inset-right, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }

  .site-footer {
    gap: 6px;
  }

  .site-credit,
  .account-dock-button {
    font-size: 11px;
  }

  .panel-resizer {
    display: none;
  }

  .panel-resizer[data-panel-resize="editor"] {
    display: block;
    grid-column: 2;
    grid-row: 2;
    width: 12px;
    min-width: 12px;
  }

  .panel-resizer[data-panel-resize="editor"]::after {
    left: 5px;
  }

  .panel-resizer[data-panel-resize="editor"]:hover::after,
  .panel-resizer[data-panel-resize="editor"].active::after {
    left: 4px;
  }

  .selection-toolbar {
    gap: 7px;
    max-width: min(500px, calc(100vw - 24px));
    padding: 7px;
  }

  .selection-toolbar-row {
    gap: 7px;
  }

  .selection-tool-button {
    min-width: 64px;
    height: 44px;
    border-radius: 9px;
    font-size: 14px;
  }

  .selection-format-button {
    min-width: 44px;
    width: 44px;
  }

  .selection-tool-button svg {
    width: 18px;
    height: 18px;
  }

  .selection-swatch {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .history-head .icon-button {
    width: 44px;
    height: 44px;
  }

  .editor-panel {
    grid-column: 1;
    grid-row: 1;
    height: auto;
    min-width: 0;
    min-height: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .editor-textarea {
    min-height: 260px;
  }

  .preview-panel {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
  }

  .preview-topbar {
    top: 0;
  }

  .custom-color-action,
  .selection-palette .custom-color-action,
  .clear-inline-style-action {
    min-height: 44px;
  }

  .selection-custom-color-disclosure > summary,
  .selection-custom-color input[type="color"] {
    min-height: 44px;
  }

  .preview-body {
    grid-template-columns: 1fr;
  }

  .pages:not(.article-mode) {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    padding-top: 20px;
  }

  .article-settings {
    position: static;
    width: 100%;
    max-height: none;
    order: -1;
  }

  .live-photo-layout {
    grid-template-columns: minmax(260px, 0.8fr) minmax(390px, 1.2fr);
  }
}

/* 工具栏弹层右溢翻转：窄宽度下靠右的触发按钮（Obsidian 等）会把弹层推出视口。
   定位保持相对触发按钮，由 app.js 在 details 打开时测量，右溢则挂 .pop-flip 向左展开。 */
.tool-popover.pop-flip {
  left: auto;
  right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .history-drawer-right,
  .custom-color-action,
  .clear-inline-style-action,
  .selection-custom-color-disclosure > summary::after {
    transition: none;
  }
}

/* 820 以下收成单栏：双栏最低 395+6+360=761px，768（iPad 竖屏）下每栏不足 380px，
   编辑器与预览正文字号难以阅读——681-820 这一档此前没有布局设计，是破损区。
   块内的实况弹窗适配规则对 681-820 同样成立，随断点一并上移。 */
@media (max-width: 820px) {
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .panel-resizer[data-panel-resize="editor"] {
    display: none;
  }

  .editor-panel {
    grid-column: 1;
    grid-row: 1;
    height: 78vh;
    height: 78dvh;
    min-height: 560px;
    border-bottom: 1px solid var(--line);
  }

  .preview-panel {
    grid-column: 1;
    grid-row: 2;
    overflow: visible;
  }

  .live-photo-handoff-layout {
    grid-template-columns: 1fr;
  }

  .live-photo-handoff-preview {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 18px;
  }

  .live-photo-handoff-preview-frame {
    height: min(440px, calc(100vh - 300px));
  }

  .live-photo-handoff-results {
    padding: 28px 22px 34px;
  }
}

@media (max-width: 620px) {
  .feedback-dock-button {
    width: 44px;
    min-height: 44px;
    justify-content: center;
    padding-inline: 0;
  }

  .feedback-dock-button span {
    display: none;
  }

  #feedbackModal {
    align-items: start;
    padding: 12px;
  }

  .feedback-modal-card {
    max-height: calc(100dvh - 24px);
    border-radius: 16px;
  }

  .feedback-modal-head {
    padding: 18px 18px 15px;
  }

  .feedback-form {
    gap: 16px;
    padding: 18px;
  }

  .feedback-upload-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .feedback-actions .primary-button,
  .feedback-actions .secondary-button {
    min-width: 0;
    flex: 1;
  }

  .feedback-image-item button {
    width: 44px;
    height: 44px;
  }

  .welcome-back-modal {
    align-items: start;
    padding: 16px;
  }

  .welcome-back-card {
    padding: 32px 22px 24px;
    border-radius: 18px;
  }

  .welcome-back-features article {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 12px 0;
  }

  .welcome-back-feature-state {
    grid-column: 2;
    justify-self: start;
  }

  .welcome-back-actions {
    grid-template-columns: 1fr;
  }

  .entry-choice-modal {
    align-items: start;
    padding: 22px 16px;
  }

  .entry-choice-options {
    grid-template-columns: 1fr;
  }

  .entry-choice-option {
    padding: 20px;
  }

  .entry-choice-head h2 {
    font-size: 32px;
  }

  .editor-panel,
  .preview-panel {
    padding: 14px;
  }

  .editor-panel {
    height: 78vh;
    min-height: 560px;
    gap: 10px;
  }

  .brand-row h1 {
    font-size: 20px;
  }

  .brand-row {
    align-items: center;
  }

  .brand-title,
  .brand-actions {
    flex: none;
    width: auto;
    min-width: 0;
  }

  .mode-switch {
    width: auto;
  }

  .live-photo-modal-card {
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
  }

  .live-photo-layout {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .live-photo-preview-column {
    padding: 18px;
  }

  .live-photo-preview {
    width: min(72vw, 290px);
  }

  .live-photo-form {
    overflow: visible;
    padding: 18px;
  }

  .live-photo-number-grid,
  .live-photo-focus-grid {
    grid-template-columns: 1fr;
  }

  .live-photo-ratio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .live-photo-section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .live-photo-section-title span {
    text-align: left;
  }

  .live-photo-actions {
    flex-wrap: wrap;
  }

  .profile-inline {
    grid-template-columns: 38px minmax(0, 1fr) minmax(0, 0.82fr) 34px;
    gap: 6px;
  }

  .profile-inline .avatar-picker {
    width: 38px;
    height: 38px;
  }

  .compact-input {
    height: 34px;
    padding-inline: 8px;
    font-size: 13px;
  }

  .toolbar {
    gap: 6px;
  }

  .tool-button {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .search-tool-button {
    width: 34px;
  }

  .tool-popover {
    position: fixed;
    top: 104px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 128px);
    overflow: auto;
  }

  .obsidian-vault-actions {
    grid-template-columns: 1fr;
  }

  .search-popover {
    grid-template-columns: 1fr;
  }

  .preview-topbar {
    position: static;
    display: grid;
    margin: -18px -18px 18px;
    padding: 18px 18px 14px;
  }

  .preview-topbar::before,
  .preview-topbar::after {
    display: none;
  }

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

  /* 窄屏单列后恢复常规弹层宽度，max-content 会收得太窄不好点按 */
  .settings-popover {
    width: min(370px, calc(100vw - 36px));
  }

  .topbar-actions {
    flex-wrap: wrap;
  }

  .pages {
    grid-template-columns: 1fr;
  }

  .crop-layout {
    grid-template-columns: 1fr;
  }

  .crop-controls {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .wechat-cover-field {
    grid-template-columns: 1fr;
  }

  .wechat-cover-preview {
    width: min(100%, 320px);
  }

  .wechat-sync-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ================= 触屏（iPad 等 coarse pointer）：命中区 ≥44px =================
   PRODUCT.md 的无障碍承诺。只放宽尺寸不改布局：桌面（pointer: fine）不受影响。
   工具栏靠 flex-wrap 自然换行；popover 内的色板/比例网格是紧凑网格，本轮不动，
   待真机验证后再适配。 */
@media (pointer: coarse) {
  .tool-button,
  .search-tool-button,
  .icon-button,
  .page-actions button {
    width: 44px;
    height: 44px;
  }

  .secondary-button,
  .primary-button,
  .header-mode-button,
  .mode-switch button {
    height: 44px;
  }

  .history-filter button,
  .onboarding-actions button {
    min-height: 44px;
  }

  .history-delete {
    width: 44px;
    height: 44px;
  }
}

/* ================= 代码窗口 / 章节编号 / 列表：跨主题结构 =================
   只留节点怎么排。符号、配色由各主题皮肤决定。 */