/* Unitick · 改版公告的窗口（news.js，docs/specs/announcements.md）。归 M1 平台。类名都带 nw- 前缀。
   和功能指引的小窗口（guide.css）一个样子：电脑上在正中，手机上（760px 以下）从底部升起；字多了窗口里面滚动。
   开发者平台的预览（pages/devnews.js）用的也是这一套。叠放和功能指引同一层（两个不会同时开） */
.nw-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; }
.nw-box { position: relative; display: flex; flex-direction: column; width: min(460px, 100%); max-height: min(680px, 100%); padding: 28px 0 24px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-3);
  animation: nw-pop var(--dur-4) var(--ease-spring) backwards; }
@keyframes nw-pop { from { opacity: 0; transform: translateY(calc(var(--rise) * .75)) scale(var(--pop)); } }
@keyframes nw-up { from { transform: translateY(100%); } }
.nw-wrap.is-out { opacity: 0; transition: opacity var(--dur-2) ease-in; }
.nw-wrap.is-out .nw-box { opacity: 0; transform: scale(.97); transition: opacity var(--dur-1) ease-in, transform var(--dur-2) var(--ease-in); }

.nw-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: 0 28px 14px;
  border-radius: 12px; background: var(--tint-soft); color: var(--tint); }
.nw-ic .ic { width: 24px; height: 24px; }
.nw-scroll { overflow-y: auto; padding: 0 28px; overscroll-behavior: contain; }
.nw-note + .nw-note { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.nw-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.nw-tag { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--soft); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.nw-note 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; }
.nw-note + .nw-note h2 { margin-right: 0; }
.nw-body { margin: 0; color: var(--text); font-size: var(--fs-body); line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.nw-items { margin: 12px 0 0; padding: 0 0 0 1.2em; color: var(--text); font-size: var(--fs-body); line-height: 1.6; }
.nw-items li + li { margin-top: 4px; }
.nw-items li > span:first-child { white-space: pre-line; overflow-wrap: anywhere; }
.nw-credit { margin-left: 6px; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.nw-sec { margin-top: 14px; }
.nw-sec h3 { margin: 0; color: var(--ink); font-size: var(--fs-body); font-weight: var(--fw-title); }
.nw-sec .nw-items { margin-top: 6px; }
.nw-acts { display: flex; flex: none; margin: 20px 28px 0; }
.nw-acts .btn { flex: 1; height: 40px; font-size: 14px; }
button.nw-x { position: absolute; top: 14px; right: 14px; z-index: 1; 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.nw-x:hover { background: var(--soft); color: var(--ink); }
.nw-x .ic { width: 18px; height: 18px; }
.nw-wrap :is(button):focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }

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