/* @layer ui — 上手教程：一张贴在界面上的小纸片，加一圈把当前那一步点亮的光。
 *
 * 角色见 ../../../../docs/product/UI_PATTERNS.md「上手教程小纸片」。它不是弹层：
 * 弹层的意思是「这后面的事你现在管不着」（.scrim 有模糊，还吃掉全部点击），
 * 教程的意思是「顺便看一眼，你随时可以不理我」。所以两件事必须成立：
 *
 * 1. **整层不吃点击。** .tour 是 pointer-events: none，只有纸片自己收回来。
 *    本人在教程跑着的时候照样能点顶栏、点日历、点任何东西。
 * 2. **压暗那一层不是一块盖上来的板子**，而是光圈自己摊出去的一圈 box-shadow。
 *    被点亮的那个标签底下**什么都没有**——它不是被复制出来的一张图，
 *    就是界面上那颗真按钮，所以点它照样进那一面。
 *
 * 压暗的剂量与材质跟着 layout.css 的抽屉遮罩（.app::after）：一层地色的薄纱，
 * 不是压一层黑——themes.css 第五条明确不要 Material 那套。
 * 那边还叠了 saturate(0.82)，这里没有：box-shadow 画的是自己的影子，
 * 滤不到影子后面的东西。薄纱这一档单独也成立（实测把纸从 #FDFDFE 压到 #F8F9FB，
 * 正好是明度梯上的一格），何况这里还有一圈强调色的环在正面指路。
 *
 * 动效只用 themes.css 的时长与缓动令牌，一个新令牌都不加（0.4 起纸片的进场走 SwiftUI 同一组弹簧
 * --spring-snappy，与 iPhone 同拍；光圈的淡入仍是 --dur-slow + --ease）。
 * 每条动画都写死 fill-mode: both —— base.css 的 prefers-reduced-motion 会把
 * 时长压到 0.01ms，没有 both 的动画会停在**起始**关键帧上，
 * 也就是半透明、还偏着 6px 的那一帧：对需要减少动态效果的人，教程直接看不清。
 */

.tour {
  position: fixed;
  inset: 0;
  z-index: 90;                 /* 抽屉 30 < 这里 < 弹层 100 < 提示条 200 */
  pointer-events: none;
}
.tour[hidden] { display: none; }

/* 光圈：一个透明的框，它唯一的作用是**在自己以外的地方**投出那层薄纱，
   再在自己边上画一圈强调色。100vmax 的扩散保证不论它贴在屏幕哪个角，
   薄纱都铺满整块可视区。 */
.tour__spot {
  position: fixed;
  border-radius: var(--radius);
  pointer-events: none;
  box-shadow:
    0 0 0 100vmax color-mix(in srgb, var(--bg) 55%, transparent),
    0 0 0 2px var(--accent);
  animation: tour-spot-in var(--dur-slow) var(--ease) both;
}
.tour__spot[hidden] { display: none; }

/* 纸片。材质与弹层同一套语言（纸面渐变 + 一圈 --border + --shadow-lg），
   但圆角小一档、没有顶部高光：它是一张便条，不是一个对话框。 */
.tour__card {
  position: fixed;
  top: 0;
  left: 0;
  width: min(320px, calc(100vw - 24px));
  padding: 14px 16px 12px;
  background: var(--surface-grad);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: tour-card-in var(--spring-snappy-dur) var(--spring-snappy) both;
}

.tour__count {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  color: var(--text-faint);
  margin-bottom: 6px;
}
.tour__title {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 620;
  margin-bottom: 6px;
}
/* 说明句要有行长上限，与 modules.css 的 .ledger-note 同一条理由：
   320px 的纸片本来就窄，这里只管行距与墨色。 */
.tour__body {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-muted);
}

/* 动作行：次要动作是文字键（.link-btn），主要动作是小号实心键（.btn--sm）。
   两者中间那道线用 --hairline —— 它是**内部分隔**，不是又一个物体的边。 */
.tour__acts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.tour__skip { color: var(--text-muted); }
.tour__skip:hover { color: var(--text); }

@keyframes tour-spot-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tour-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 窄屏（与 layout.css 同一个断点）：工作面标签在屏幕底部那条浮起的栏里，
   纸片会翻到它上面（placeTour 的 'above'）。这里只把命中区补到 UI_PATTERNS §9
   要的 44——画出来的尺寸一个像素不动。 */
@media (max-width: 820px) {
  .tour__acts .link-btn,
  .tour__acts .btn { min-height: var(--touch-target); touch-action: manipulation; }
}