/* ==========================================================================
   03 落地元素 · 贴纸墙（可拖动）
   2026-10-27 追加。只用于风格页实验室的 tuscany 页，不影响主站六页。
   依赖 style-page.css 的令牌：--sb-ink / --sb-mut / --sb-line / --sb-accent
   ========================================================================== */

.sb-wall { margin: 0; }

/* ---------- 画板 ---------- */
.sb-wall-stage {
  position: relative;
  height: clamp(25rem, 52vw, 33.75rem);
  border-radius: var(--radius-xl);
  /* 2026-10-30 客户：「主题色加深一点，整个背景同一个颜色，而非现在的渐变」，
     随后又「部分颜色有点奇怪，让你来选择与匹配，可以更深或者近似色」。
     底色改成**每页自己的 `--sb-wall-bg`**（写在该页 palette 里，见 content/styles.json）。
     为什么不留统一公式：accent-dark × 85% + 黑 在 8 个页里只有 5 个成立 ——
     原木 #566450、法式 #745C3F 本身带绿，算出来是军绿/橄榄棕；孟菲斯 #8E231D 加深后发闷。
     一页一色才跟得上各自的气质。
     ⚠️ 三行是 fallback 链：某页漏了 `--sb-wall-bg` 时退回「accent-dark 再压 15%」，
       浏览器不支持 color-mix 时再退回纯 accent-dark —— 任何一层都不会掉成透明。 */
  background: var(--sb-accent-dark, #4A3427);
  background: var(--sb-wall-bg, color-mix(in srgb, var(--sb-accent-dark, #4A3427) 85%, #000));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .055),
    0 28px 64px -34px rgba(46, 40, 28, .55);
  overflow: hidden;
  touch-action: none;
}
.sb-wall-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image: radial-gradient(rgba(255, 255, 255, .045) .5px, transparent .5px);
  background-size: 3px 3px;
}

/* ---------- 贴纸 ---------- */
.sb-sticker {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  cursor: grab;
  will-change: transform;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .55));
  outline: none;
  -webkit-tap-highlight-color: transparent;
  animation: sbPop .5s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes sbPop { from { opacity: 0; } }

.sb-sticker img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}
.sb-sticker:hover { filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .62)); }

/* ---------- 材质微距（2026-11-02） ----------
   把「靠近」这个动作补完整：悬停时阴影先起来（上一行），贴纸再推近一点点（1.05）。
   🔴 放大只能加在**内层 img** 上，不能加在 .sb-sticker 本体：
      · 外层的 transform 由 sticker-stage.js 的 apply() 每帧写死（translate3d + rotate），
        CSS 写 transform 会被行内样式盖掉（写了等于没写）；
      · 若改为写进 JS，就回到 2026-10-30 删掉的那版「按下 1.06 / 松手回弹」，
        正是客户报的「拖动时会闪一下」。
      内层 img 自己没有 transform、且 pointer-events:none，所以外层位置与倾角一个字节不动。
   · 1.05 是上限附近：再大就读成「图片在放大」而不是「凑近看」。
   · 拖动期间**保持**放大，不写 .is-drag 归零 —— 按下前后状态不变，才不会闪。
   · 触摸端不做（裸 :hover 会「粘住」）；降动下关掉。 */
@media (hover: hover) {
  .sb-sticker img {
    transform: scale(1);
    transition: transform var(--duration-normal) var(--ease-out-quart);
  }
  .sb-sticker:hover img { transform: scale(1.05); }
}
.sb-sticker.is-drag {
  cursor: grabbing;
  /* 🔴 只把 transform 归零（拖动要跟手），filter 留 0.3s 过渡 ——
     原来整条 `transition: none` 会让阴影也瞬变，按下的那一帧「阴影猛地变深」，
     和旧的 sbPick 脉冲叠在一起就是客户说的「闪一下」。 */
  transition: transform 0s, filter .3s ease;
  filter: drop-shadow(0 32px 42px rgba(0, 0, 0, .72));
}
.sb-sticker:focus-visible {
  outline: 2px dashed var(--sb-accent, #A8765A);
  outline-offset: 10px;
  border-radius: var(--radius-sm);
}
/* 🔴 2026-10-30：删掉「按下 = 阴影脉冲」的选中提示（`.is-pick` + `@keyframes sbPick`）。
   客户：「拖动时会闪一下，很影响互动体验」。那个脉冲是 0.55s 内 drop-shadow 加深再回来，
   一进一出就是「闪」；用户明确要求「别用消失闪现类的效果」。
   现在的选中反馈全部是**持续态**：置顶（JS 的 front()）+ 拖动期间阴影加深 + 光标改为 grabbing，
   松手就停在那儿，没有脉冲、没有淡入淡出。 */

.sb-wall-noscript {
  position: absolute;
  inset: auto 0 24px;
  margin: 0;
  text-align: center;
  color: #C9BDAA;
  font-size: var(--fs-caption);
}

/* ---------- 工具条 ---------- */
.sb-wall-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.sb-wall-btn {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-small, .875rem);
  letter-spacing: .04em;
  color: var(--sb-ink, #2A251F);
  background: transparent;
  border: 1px solid var(--sb-line, #E4DDD0);
  /* ⚠️ 2026-10-29：胶囊圆角走令牌（`--radius-full` = 9999px，与 999px 在 24–44px 高上
     视觉完全等价）。判据要求全站无 999/9999 硬值，且**不许写兜底值**（`var(--x, 9999px)`
     是第二份定义，改令牌会静默不生效）。本页与风格页都同时加载 shared CSS，令牌一定在。 */
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.sb-wall-btn:hover { background: rgba(0, 0, 0, .035); }
.sb-wall-btn[aria-pressed="true"] {
  background: var(--sb-accent, #A8765A);
  border-color: var(--sb-accent, #A8765A);
  color: #fff;
}
.sb-wall-hint {
  margin: 0 0 0 auto;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--sb-mut, #6E6455);
}

/* ---------- 说明清单（同时是选中控件） ---------- */
.sb-wall-list {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-6);
  row-gap: var(--space-5);
}
.sb-wall-list button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--sb-line, #E4DDD0);
  padding: var(--space-3-5) 2px 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .2s ease;
}
.sb-wall-list button:hover { border-top-color: var(--sb-mut, #6E6455); }
.sb-wall-list button.is-active { border-top-color: var(--sb-accent, #A8765A); }
.sb-wall-list b {
  display: block;
  font-size: var(--fs-body, .9375rem);
  color: var(--sb-ink, #2A251F);
  margin-bottom: var(--space-1-5);
  transition: color .2s ease;
}
/* 🔴 选中态标题不能用主题原色当文字：法式 #C08B5C 白底只有 **2.96:1**、
   原木 #8A9A7B 3.00:1（16px/700 ⇒ 需 4.5）。主题色是「装饰色」，不是「文字色」。
   改回 --sb-ink（正文压深色），选中态靠 border-top 变色 + 加粗区分 —— 颜色不是唯一线索。
   （同一条判据案例卡已用「压深 30%」解决，见 cases.py::_style_palette；这里条目只有一行，
     不必再算一套色，直接用已压深的 ink 更省事也更稳。） */
.sb-wall-list button.is-active b { color: var(--sb-ink, #2A251F); }
.sb-wall-list span {
  font-size: var(--fs-small, .875rem);
  line-height: 1.75;
  color: var(--sb-mut, #6E6455);
}

/* 读屏用状态播报 */
.sb-wall-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 断点（白名单：1023 / 767） ---------- */
@media (max-width: 1023px) {
  .sb-wall-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  /* 手机端更紧凑：画板略降 5%，卡片列表改两列（原来一列 6 行，占掉整屏） */
  .sb-wall-stage { height: clamp(25rem, 98vw, 31.25rem); }
  .sb-wall-list { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-3-5); column-gap: var(--space-4); }
  .sb-wall-hint { margin-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-sticker { animation: none; transition: none; }
  .sb-sticker img { transition: none; }
}
/* 降动下连悬停放大也去掉。必须同时带 (hover: hover)：`.sb-sticker:hover img` 的
   特异度高于上面的 `.sb-sticker img`，只写后者压不住；而裸 :hover 会判红。 */
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .sb-sticker:hover img { transform: none; }
}