/*!
 * mock-dock.css —— 跨题目共用的 Mock 演示控制层（MeetSync / ProdFlow 同一份实现）
 * 设计立场：Mock 是「环境层」，不是产品 chrome。两题共用同一套紫灰配色与几何，
 * 与各自产品主题刻意区分，评委一眼能分清「哪是产品、哪是演示开关」。
 * 只依赖自身变量，不读题目 token；唯一对外插槽是 --md-safe-bottom（让开底部导航）。
 */

.mockdock,
.mockstage {
  --md-accent: #5f4bd8;
  --md-accent-2: #8b7bf0;
  --md-on-accent: #ffffff;
  --md-soft: #f1eefe;
  --md-surface: #ffffff;
  --md-surface-2: #faf9ff;
  --md-fg: #1b1a26;
  --md-muted: #6a6780;
  --md-border: #e4e0f5;
  --md-graphite: #1b1a26;
  --md-stage: #e9e6f5;
  --md-stage-dot: #cfc9e8;
  --md-bezel: #16151f;
  --md-shadow: 0 18px 48px rgba(24, 22, 46, .22);
  --md-radius: 14px;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

[data-theme="dark"] .mockdock,
[data-theme="dark"] .mockstage {
  --md-accent: #9c8cff;
  --md-accent-2: #6f5fd6;
  --md-on-accent: #14121f;
  --md-soft: #262137;
  --md-surface: #1c1a27;
  --md-surface-2: #232032;
  --md-fg: #f3f1fb;
  --md-muted: #a7a3bf;
  --md-border: #332f47;
  --md-graphite: #0f0e17;
  --md-stage: #131220;
  --md-stage-dot: #262238;
  --md-bezel: #0b0a12;
  --md-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}

/* ---------------- 停靠控件 ---------------- */
.mockdock {
  position: fixed; right: 18px; bottom: var(--md-safe-bottom, 18px); z-index: 1080;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  font-size: 12px; line-height: 1.35; color: var(--md-fg);
}
.mockdock * { box-sizing: border-box; }

.mockdock-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 10px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  background: var(--md-graphite); color: #fff; box-shadow: var(--md-shadow);
  font: inherit; font-size: 11px; cursor: pointer;
}
.mockdock-trigger:hover { background: #2a2740; }
.mockdock-trigger .md-dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--md-accent-2); box-shadow: 0 0 0 3px rgba(139, 123, 240, .22);
}
.mockdock-trigger .md-key { font-weight: 800; letter-spacing: .14em; opacity: .62; }
.mockdock-trigger .md-val { font-weight: 700; letter-spacing: .01em; }
.mockdock-trigger .md-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .18); }
.mockdock-trigger svg { opacity: .8; }

.mockdock-panel {
  width: 304px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--md-accent) 34%, var(--md-border));
  border-top: 3px solid var(--md-accent); border-radius: var(--md-radius);
  background: var(--md-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-accent) 12%, transparent), var(--md-shadow);
}
.mockdock[data-open="false"] .mockdock-panel { display: none; }
.mockdock[data-open="true"] .mockdock-trigger { display: none; }

.mockdock-head {
  display: flex; align-items: center; gap: 9px; padding: 11px 11px 10px;
  border-bottom: 1px solid var(--md-border);
  background: linear-gradient(180deg, var(--md-soft), var(--md-surface));
}
.mockdock-mark {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: 8px; background: var(--md-accent); color: var(--md-on-accent);
}
.mockdock-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.mockdock-copy strong { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 750; letter-spacing: .01em; }
.mockdock-badge {
  padding: 2px 6px; border-radius: 999px; background: var(--md-accent); color: var(--md-on-accent);
  font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .12em;
}
.mockdock-copy small { margin-top: 2px; color: var(--md-muted); font-size: 10px; }
.mockdock-close {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border: 1px solid var(--md-border); border-radius: 7px;
  background: var(--md-surface); color: var(--md-muted); cursor: pointer;
}
.mockdock-close:hover { color: var(--md-fg); }

.mockdock-body { padding: 11px; display: flex; flex-direction: column; gap: 10px; }
.mockdock-field { display: flex; flex-direction: column; gap: 6px; }
.mockdock-label {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--md-muted); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
}
.mockdock-label em { font-style: normal; font-weight: 650; letter-spacing: 0; text-transform: none; font-size: 10px; }

.mockdock-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px;
  border: 1px solid var(--md-border); border-radius: 9px; background: var(--md-surface-2);
}
.mockdock-seg--grid { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
.mockdock-seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 30px; padding: 4px 6px; border: 0; border-radius: 6px;
  background: transparent; color: var(--md-muted); font: inherit; font-size: 11px; font-weight: 700;
  white-space: nowrap; cursor: pointer;
}
.mockdock-seg button:hover { color: var(--md-fg); }
.mockdock-seg button[aria-pressed="true"] {
  background: var(--md-accent); color: var(--md-on-accent);
  box-shadow: 0 1px 3px rgba(27, 26, 38, .18);
}
.mockdock-seg svg { flex: none; }

.mockdock-foot {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  border-top: 1px solid var(--md-border); background: var(--md-surface-2);
}
.mockdock-hint {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--md-muted); font-size: 10px;
}
.mockdock-reset {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 4px 9px;
  border: 1px solid var(--md-border); border-radius: 7px; background: var(--md-surface);
  color: var(--md-fg); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.mockdock-reset:hover { border-color: var(--md-accent); color: var(--md-accent); }

.mockdock button:focus-visible,
.mockstage button:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; }

/* ---------------- 设备预览台 ---------------- */
body.mockdock-staged { overflow: hidden; }
body.mockdock-staged > *:not(.mockstage):not(.mockdock) { display: none !important; }

.mockstage {
  position: fixed; inset: 0; z-index: 1070;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 18px 18px 22px; overflow: auto;
  background:
    radial-gradient(circle at 1px 1px, var(--md-stage-dot) 1px, transparent 1.4px) 0 0 / 22px 22px,
    var(--md-stage);
  color: var(--md-fg); font-size: 12px;
}
.mockstage-bar {
  display: flex; align-items: center; gap: 9px; flex: none; max-width: 100%;
  padding: 8px 14px; border: 1px solid var(--md-border); border-radius: 999px;
  background: var(--md-surface); box-shadow: 0 6px 20px rgba(24, 22, 46, .1);
}
.mockstage-bar .md-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  border-radius: 999px; background: var(--md-accent); color: var(--md-on-accent);
  font-size: 10px; font-weight: 750; letter-spacing: .04em;
}
.mockstage-bar b { font-size: 12px; font-weight: 750; }
.mockstage-bar small { color: var(--md-muted); font-size: 10.5px; }
.mockstage-bar .md-sep { width: 1px; height: 14px; background: var(--md-border); }

.mockstage-viewport {
  /* align-items 必须是 flex-start：否则设备框会被拉伸到已按缩放算好的容器高度，
     下一次测量拿到被拉伸后的值，机身底部被裁掉。 */
  display: flex; align-items: flex-start; justify-content: center;
  width: 100%; flex: none; overflow: hidden;
}
.mockstage-device { transform-origin: top center; flex: none; }
.mockstage-frame { display: block; border: 0; background: var(--md-surface); }

.mockstage[data-vp="mobile"] .mockstage-device {
  position: relative; padding: 13px; border-radius: 52px;
  background: linear-gradient(160deg, #2c2a3d, var(--md-bezel) 46%);
  box-shadow: 0 30px 70px rgba(18, 16, 36, .38), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.mockstage[data-vp="mobile"] .mockstage-screen {
  position: relative; overflow: hidden; border-radius: 40px; background: var(--md-surface);
}

.mockstage[data-vp="desktop"] .mockstage-device {
  overflow: hidden; border-radius: 14px; background: var(--md-bezel);
  box-shadow: 0 30px 70px rgba(18, 16, 36, .34), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.mockstage-chrome {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
  background: linear-gradient(180deg, #2b2940, #1e1c2c); color: rgba(255, 255, 255, .5);
}
.mockstage-chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.mockstage-chrome span {
  margin-left: 10px; padding: 3px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .09); font-size: 10.5px; letter-spacing: .02em;
}

@media (max-width: 640px) {
  .mockdock { right: 12px; }
  .mockdock-panel { width: min(304px, calc(100vw - 24px)); }
  .mockstage { padding: 12px 10px 16px; }
  .mockstage-bar { flex-wrap: wrap; justify-content: center; border-radius: 14px; }
}