/* ==========================================================================
   notices.css — 公告弹窗（右下角一条卡片）
   --------------------------------------------------------------------------
   只有 data/announcements.json 里有公告时，build.mjs 才会把这份样式注入全站；
   没有公告时整站一个字节都不引用它。

   约定：
     · 颜色全部取 theme.css 的变量，所以深色主题（:root[data-theme="dark"]）自动跟着走，
       本文件不出现任何写死的色值。
     · 层级：导航 20 < 公告 70 < art 切断层 80 < 命令面板/搜索浮层 90。
       公告要盖住正文，但不能盖住命令面板。
     · 非全屏、无遮罩，只有右下角一张卡片；≤640px 时左右各留 12px 自适应。
     · 系统开启「减少动态效果」时关掉过渡；html.no-motion / ?perf=low 同理（JS 里
       直接贴 is-in，CSS 这里再兜一次）。
   ========================================================================== */

.notice {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  width: min(360px, calc(100vw - 48px));
  max-width: 360px;
  margin: 0;
  padding: 14px 16px 12px 14px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  line-height: 1.55;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .24s ease, transform .24s ease;
}

.notice.is-in {
  opacity: 1;
  transform: none;
}

/* 重要提醒（level=notice）：左侧色条换成警告色，和普通公告一眼分得开。 */
.notice[data-level="notice"] {
  border-left-color: var(--warn);
}

.notice-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.notice-title {
  flex: 1 1 auto;
  margin: 0;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  word-break: break-word;
}

.notice-x {
  flex: 0 0 auto;
  margin: -2px -4px 0 0;
  padding: 0 4px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1.2;
  cursor: pointer;
}

.notice-x:hover {
  color: var(--ink);
}

.notice-x:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.notice-body {
  margin: 6px 0 0;
  color: var(--ink-soft);
  white-space: pre-line;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.notice-foot {
  margin: 10px 0 0;
}

.notice-more {
  font-size: var(--fs-xs);
  color: var(--accent);
  border-bottom: 1px solid var(--tech-hair-2);
}

.notice-more:hover {
  color: var(--tech-blue-deep);
  border-bottom-color: var(--tech-blue);
}

.notice-more:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* 窄屏：不贴边，左右各 12px，正文缩到 2 行，绝不横向滚动。 */
@media (max-width: 640px) {
  .notice {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }

  .notice-body {
    -webkit-line-clamp: 2;
  }
}

/* 无动效档：直接出现/消失。JS 侧（prefers-reduced-motion / html.no-motion /
   ?perf=low）会给卡片加 .notice-static，三种路径都在这里落地。 */
@media (prefers-reduced-motion: reduce) {
  .notice {
    transition: none;
  }
}

html.no-motion .notice,
.notice.notice-static {
  transition: none;
}