/* ============================================================
   物料上传入口（/places 与 /people 共用）

   两个产品功能页各自定义了同名的一套 CSS 变量（--accent / --line /
   --surface-low 等），一个亮色一个暗色，所以这份样式只引用变量、
   不写死颜色，两边都能直接套。

   默认整套 UI 不可见；只有 body[data-assets="on"] 时才展开，
   保证营销预览时页面是干净的。
   ============================================================ */

/* ---------- 画位：插画替换掉这里的占位 mock ---------- */
/* isolation 不能省：插画层带 z-index，宿主若不自成层叠上下文，它就会冒到宿主的
   兄弟节点之上。对比滑块就是这样——左图会整片盖住右侧那半张。 */
.art-host { position: relative; isolation: isolate; }
.art-host > .art { display: none; background-size: cover; background-position: center; background-repeat: no-repeat; }
.art-host[data-filled="true"] > .art { display: block; }
.art-host[data-filled="true"] > .mock { display: none !important; }

/* 图标位：插画顶掉一个 Material Symbol，尺寸跟着图标走 */
.art-host.icon { display: inline-block; line-height: 0; }
.art-host.icon > .art { width: 44px; height: 44px; border-radius: 6px; }
.art-host.icon.lg > .art { width: 60px; height: 60px; border-radius: 8px; }

/* 铺满位：插画盖住整块可视化 / 整屏 hero */
.art-host.fill > .art { position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none; }

/* 整块替换：mock 由若干平级元素拼成时，一次性全部让位（功能卡可视化、收尾大图） */
.art-host.replace[data-filled="true"] > *:not(.art) { display: none !important; }

/* 头像位：圆形 */
.art-host.avatar > .art { width: 100%; height: 100%; border-radius: 50%; }

/* 画位在物料模式下描边，方便插画师看清边界 */
body[data-assets="on"] .art-host::after {
  content: "";
  position: absolute; inset: -4px;
  border: 1px dashed var(--accent);
  opacity: .5;
  border-radius: 6px;
  pointer-events: none;
}

/* ---------- 上传面板 ---------- */
.asset-panel { display: none; }
body[data-assets="on"] .asset-panel {
  display: block;
  position: relative;
  z-index: 5;
  margin: 1rem 0;
  border: 1px dashed var(--accent);
  border-radius: 6px;
  padding: .85rem 1rem 1rem;
  background: var(--surface-low);
}
.asset-panel__head {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.asset-panel__head .ms { color: var(--accent); }
.asset-panel__head b {
  font-family: var(--f-sans); font-weight: 500; font-size: .88rem; color: var(--on-surface);
}
.asset-panel__id {
  margin-left: auto;
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: .16rem .45rem;
}
.asset-panel__spec {
  margin: .5rem 0 .7rem;
  font-family: var(--f-mono); font-size: .62rem; line-height: 1.65; letter-spacing: .04em;
  color: var(--muted);
}
.asset-panel__drop {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 62px; padding: .7rem;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  font-size: .8rem; color: var(--muted);
  transition: border-color .25s, color .25s, background .25s;
}
.asset-panel__drop:hover,
.asset-panel[data-drag="true"] .asset-panel__drop {
  border-color: var(--accent); color: var(--accent);
}
.asset-panel__drop .ms { color: inherit; }
.asset-panel__drop input { display: none; }
.asset-panel__row {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .6rem;
}
.asset-panel__ok {
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .06em; color: var(--accent);
  overflow-wrap: anywhere;
}
.asset-panel__clear {
  margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); cursor: pointer; padding: .28rem .75rem;
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
}
.asset-panel__clear:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 底部工具条 ---------- */
.asset-bar { display: none; }
body[data-assets="on"] .asset-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: .75rem clamp(1rem, 3.2vw, 3.25rem);
  background: var(--surface-low);
  border-top: 1px solid var(--accent);
}
.asset-bar__t {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-surface);
}
.asset-bar__t .ms { color: var(--accent); vertical-align: -5px; margin-right: .35rem; }
.asset-bar__note {
  font-family: var(--f-mono); font-size: .56rem; letter-spacing: .05em; color: var(--muted);
}
.asset-bar button {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--on-surface); cursor: pointer; padding: .34rem .85rem;
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
}
.asset-bar button:hover { border-color: var(--accent); color: var(--accent); }
.asset-bar__off { margin-left: auto; }

/* 工具条会盖住页脚最后一行 */
body[data-assets="on"] footer { padding-bottom: 5.5rem; }

/* 物料模式开启时高亮 HUD 上的按钮 */
[data-assets-toggle][aria-pressed="true"] { color: var(--accent); }