/* Unitick · 功能指引的小窗口（guide.js，docs/specs/feature-guide.md）。归 M1 平台。类名都带 fg- 前缀。
   电脑上：背后淡淡一层，窗口在中间从略小弹到原大；手机上（760px 以下）从底部升起。
   叠放：盖过手机底部标签（40）和事项详情（50），和「功能与授权」窗口（58）同一层（两个不会同时开），在「撤销」条（70）之下 */
.fg-wrap { position: fixed; inset: 0; z-index: 58; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--scrim-strong); animation: u-fade var(--dur-3) ease-out backwards; }
.fg-box { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: min(400px, 100%); padding: 28px 28px 24px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-3);
  animation: fg-pop var(--dur-4) var(--ease-spring) backwards; }
@keyframes fg-pop { from { opacity: 0; transform: translateY(calc(var(--rise) * .75)) scale(var(--pop)); } }
@keyframes fg-up { from { transform: translateY(100%); } }
/* 退场比进场快；guide.js 到点就把整层拿走，浏览器在后台时动画不走也不会留下一层 */
.fg-wrap.is-out { opacity: 0; transition: opacity var(--dur-2) ease-in; }
.fg-wrap.is-out .fg-box { opacity: 0; transform: scale(.97); transition: opacity var(--dur-1) ease-in, transform var(--dur-2) var(--ease-in); }

.fg-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 12px; background: var(--tint-soft); color: var(--tint); }
.fg-ic .ic { width: 24px; height: 24px; }
.fg-tag { margin-bottom: 8px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--soft); color: var(--muted);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.fg-box h2 { margin: 0 32px 8px 0; color: var(--ink); font-size: 20px; font-weight: var(--fw-title); letter-spacing: var(--track-tight); line-height: 1.3; }
.fg-box p { margin: 0; color: var(--text); font-size: var(--fs-body); line-height: 1.65; }
.fg-acts { display: flex; gap: 10px; align-self: stretch; margin-top: 22px; }
.fg-acts .btn { flex: 1; height: 40px; font-size: 14px; }
button.fg-x { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
button.fg-x:hover { background: var(--soft); color: var(--ink); }
.fg-x .ic { width: 18px; height: 18px; }
.fg-wrap :is(button):focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }

@media (max-width: 760px) {
  .fg-wrap { align-items: flex-end; padding: 0; }
  .fg-box { width: 100%; padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation: fg-up var(--dur-4) var(--ease-sheet) backwards; }
  .fg-box::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--line-2); }
  .fg-wrap.is-out .fg-box { opacity: 1; transform: translateY(100%); transition: transform var(--dur-3) var(--ease-in); }
  .fg-acts .btn { height: 44px; font-size: 15px; }
}