/**
 * DK Empty Canvas — Empty / Active 展示层
 *
 * 挂载标记 #dkShell.dk-empty-on：adapter 未启动时本文件零生效（准则 6）。
 * 抽屉显隐复用 dk-empty-pure（与 dk-share-ux 六字段同公式）以及既有
 * dk-sux-on / dk-sux-canvas，不平行建抽屉状态。
 * 显隐一律 opacity + visibility + pointer-events，禁 display:none。
 *
 * 命中测试（准则 4：显隐必须同时关掉视觉与命中）：
 *   ① #dkEmptyGuide 隐藏态带 visibility: hidden —— 该属性会连同整棵子树
 *      退出命中测试与可访问性树，子级即使声明 pointer-events: auto 也无效。
 *   ② Upload / Browse 自身默认 pointer-events: none，仅在
 *      .dk-empty-on.dk-empty-canvas.dk-empty-pure 下放开。
 *   两道都 scope 在 dk-empty-on 之下：adapter 未启动 → 引导节点根本不存在，
 *   不会出现"被静态 CSS 永久打死"的既有控件（准则 6）。
 *   Color 色板不在此列 —— .dk-swatch / .dk-color-more 全程未声明
 *   pointer-events，继承 #dkColorWrap 的 none 即可，故本文件不碰它们，
 *   避免 adapter 失效时把换色功能静态锁死。
 *
 * 定位（可印区锚定，第一阶段只做位置不做缩放）：
 *   默认路径 = #dkEmptyGuide 自由区内 flex 居中 + translateY(-16px)（保持原状）。
 *   锚定路径 = #dkShell.dk-empty-anchored 下 .dk-empty-stack 绝对定位到
 *   --dk-empty-x/y（由 JS 依当前 stage 的 limit_zone 中心投影并 clamp 得出）。
 *   两条路径互斥且默认态零改动 —— JS 未锚定时 class 不挂，表现与本次改动前一致。
 */

@media (max-width: 768px) {

  /* ── 中央引导：只占卡片/链接，不挡顶栏/底栏/Color ── */
  #dkEmptyGuide {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--dk-header-h) + var(--dk-nav-top-h));
    bottom: var(--dk-nav-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-16px); /* 整组相对中心上移约 10–20px */
    pointer-events: none;
    z-index: 40;                  /* 低于 Color(50) / FAB(90) / 抽屉(100+) */
    opacity: 0;
    visibility: hidden;
    /* visibility 延到淡出结束再切，保留 0.2s 过渡观感 */
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  #dkShell.dk-empty-on.dk-empty-canvas.dk-empty-pure #dkEmptyGuide {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }

  .dk-empty-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  /* ── 可印区锚定态：整组钉在 limit_zone 中心（已含上移与 clamp） ──
     变量与 dk-empty-anchored 由 dk-empty-canvas.js 的 CANVAS_GUIDE_ANCHOR
     处理器写入；读取失败 / 布局未就绪时该 class 不挂，自动回落上方的
     flex 居中路径（准则 6）。第一阶段只改位置，卡片尺寸维持 168px。 */
  #dkShell.dk-empty-anchored #dkEmptyGuide {
    /* 归零基线上移：锚定态的 16px 已并入 --dk-empty-y，
       保证「一个偏移只有一个来源」，也让 guide 矩形恰好等于自由区（clamp 基准） */
    transform: none;
  }
  #dkShell.dk-empty-anchored .dk-empty-stack {
    position: absolute;
    left: var(--dk-empty-x);
    top: var(--dk-empty-y);
    transform: translate(-50%, -50%);
  }

  .dk-empty-upload {
    width: 168px;
    height: 168px;
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(28, 28, 60, 0.12);
    cursor: pointer;
    pointer-events: none;         /* 默认不吃点击，见文件头 ② */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    position: relative;
  }
  .dk-empty-upload::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1.5px dashed rgba(60, 60, 80, 0.18);
    border-radius: 16px;
    pointer-events: none;
  }
  .dk-empty-upload:active { transform: scale(0.98); }

  .dk-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e8d5b5;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .dk-empty-icon svg { width: 24px; height: 24px; }

  .dk-empty-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    color: #111111;
    letter-spacing: -0.2px;
  }
  .dk-empty-sub {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: #8b8b9a;
  }

  .dk-empty-browse {
    border: none;
    background: transparent;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #3d3d4a;              /* 比副文案略深，仍为 secondary */
    cursor: pointer;
    pointer-events: none;         /* 默认不吃点击，见文件头 ② */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .dk-empty-browse:active { opacity: 0.7; }

  /* 唯一放开命中的状态：已 settle + 无设计内容 + 纯画布 */
  #dkShell.dk-empty-on.dk-empty-canvas.dk-empty-pure .dk-empty-upload,
  #dkShell.dk-empty-on.dk-empty-canvas.dk-empty-pure .dk-empty-browse {
    pointer-events: auto;
  }

  /* ── pending / 非纯画布：引导隐藏（restore 防闪：未 settle 不画 Empty） ── */
  #dkShell.dk-empty-on.dk-empty-pending #dkEmptyGuide,
  #dkShell.dk-empty-on:not(.dk-empty-pure) #dkEmptyGuide,
  #dkShell.dk-sux-on:not(.dk-sux-canvas) #dkEmptyGuide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  /* ── Empty：藏 Share / Front-Back（不改其业务） ── */
  #dkShell.dk-empty-on.dk-empty-canvas #dkShareFab,
  #dkShell.dk-empty-on.dk-empty-canvas #dkStageFab {
    opacity: 0;
    pointer-events: none;
  }

  /* pending：Share / Stage 一并先藏，避免空设计闪 FAB、恢复设计闪 Empty */
  #dkShell.dk-empty-on.dk-empty-pending #dkShareFab,
  #dkShell.dk-empty-on.dk-empty-pending #dkStageFab {
    opacity: 0;
    pointer-events: none;
  }

  /* ── 抽屉打开：Color 与引导一起藏（复用纯画布 class，不改换色逻辑） ── */
  #dkShell.dk-empty-on:not(.dk-empty-pure) #dkColorWrap,
  #dkShell.dk-sux-on:not(.dk-sux-canvas) #dkColorWrap {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  #dkShell.dk-empty-on #dkColorWrap {
    transition: opacity 0.2s ease;
  }

  /* ── Empty 收起视觉：只留当前色 + 箭头；白球细灰描边 ── */
  #dkShell.dk-empty-on.dk-empty-canvas .dk-color-swatches:not(.dk-colors-expanded) .dk-swatch:not(.dk-selected) {
    display: none;
  }
  #dkShell.dk-empty-on.dk-empty-canvas .dk-color-swatches:not(.dk-colors-expanded) .dk-swatch.dk-selected {
    border-color: rgba(0, 0, 0, 0.16) !important;
  }
  #dkShell.dk-empty-on.dk-empty-canvas .dk-color-swatches:not(.dk-colors-expanded) .dk-swatch-check {
    opacity: 0;
  }
  #dkShell.dk-empty-on.dk-empty-canvas .dk-color-swatches:not(.dk-colors-expanded):not(:has(.dk-color-more))::after {
    content: '';
    width: 10px;
    height: 10px;
    margin-top: -2px;
    border-right: 1.6px solid #3f4652;
    border-bottom: 1.6px solid #3f4652;
    transform: rotate(45deg);
    pointer-events: none;
  }

}