/* 官网公告弹窗：Material 3 对话框（surface-container-high、extra-large 圆角、level3 阴影、headline-small 标题）。
   2026-10-31：配色是跨性别旗官方色 + 苹果 Pride 壁纸粉蓝白（主按钮和右下角入口用旗帜浅蓝 #5BCEFA）；
   关闭、行动按钮、标题用 Material Symbols 图标，悬停/按下时图标和容器按 M3E 弹簧做状态动画。
   颜色、形状、字体、动效、图标字体都来自 /m3-tokens.css；那份文件没加载时用括号里的兜底值。 */
.yn-launch {
  position: fixed; inset: 0; margin: auto; height: fit-content; box-sizing: border-box;
  width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; overflow: auto; overscroll-behavior: contain;
  border-radius: var(--md-sys-shape-corner-extra-large, 28px);
  background: var(--md-sys-color-surface-container-high, #EAF3F8);
  color: var(--md-sys-color-on-surface, #16242C);
  box-shadow: var(--md-sys-elevation-level3, 0 1px 3px rgb(0 0 0 / .3), 0 4px 8px 3px rgb(0 0 0 / .15));
  font: var(--md-sys-typescale-body-medium, 400 14px / 20px system-ui, sans-serif);
}
.yn-launch::backdrop { background: rgb(0 0 0 / .32); }
.yn-launch * { box-sizing: border-box; }
.yn-launch .msr { font-size: 18px; }
.yn-launch-head { position: relative; padding: 24px 24px 16px; }
.yn-launch-eyebrow { font: var(--md-sys-typescale-label-large, 500 14px / 20px system-ui, sans-serif); color: var(--md-sys-color-primary, #0872A0); }
.yn-launch h1 { margin: 8px 48px 4px 0; font: var(--md-sys-typescale-headline-small, 400 24px / 32px system-ui, sans-serif); color: var(--md-sys-color-on-surface, #16242C); }
.yn-launch-head > p { margin: 0; color: var(--md-sys-color-on-surface-variant, #45565F); }
.yn-launch-date {
  display: inline-flex; align-items: center; vertical-align: 3px; height: 24px; margin-left: 8px; padding: 0 10px;
  border-radius: var(--md-sys-shape-corner-small, 8px); background: var(--md-sys-color-secondary-container, #DCECF4);
  color: var(--md-sys-color-on-secondary-container, #0C3E52); font: var(--md-sys-typescale-label-medium, 500 12px / 16px system-ui, sans-serif);
}
/* 关闭：M3E 标准图标按钮（40×40）。悬停时 × 转 90°，按下时容器从全圆形变成 medium 圆角 */
.yn-launch-x {
  position: absolute; right: 12px; top: 12px; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: var(--md-sys-shape-corner-full, 999px); background: transparent; cursor: pointer;
  color: var(--md-sys-color-on-surface-variant, #45565F);
  transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration, 300ms) var(--md-sys-motion-spring-fast-spatial, ease),
    background-color var(--md-sys-motion-spring-fast-effects-duration, 150ms) var(--md-sys-motion-spring-fast-effects, ease);
}
.yn-launch-x .msr { font-size: 24px; }
.yn-launch-x:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.yn-launch-x:hover .msr, .yn-launch-x:focus-visible .msr { transform: rotate(90deg); --msr-wght: 500; }
.yn-launch-x:active { border-radius: var(--md-sys-shape-corner-medium, 12px); background: color-mix(in srgb, currentColor 12%, transparent); }
.yn-launch-body { padding: 0 24px 8px; }
.yn-launch section { padding: 16px 0; border-top: 1px solid var(--md-sys-color-outline-variant, #CADDE7); }
.yn-launch h2 { margin: 0 0 6px; font: var(--md-sys-typescale-emphasized-title-medium, 700 16px / 24px system-ui, sans-serif); color: var(--md-sys-color-on-surface, #16242C); }
/* 标题前的图标（原来是 emoji）：实心，提醒用主色、庆祝用旗帜粉的深色版 */
.yn-launch h2 .msr { --msr-fill: 1; font-size: 22px; margin-right: 6px; vertical-align: -5px; color: var(--md-sys-color-primary, #0872A0); }
.yn-launch h2 .msr[data-icon="celebration"] { color: var(--md-sys-color-tertiary, #B4416A); }
.yn-launch p { margin: 6px 0; color: var(--md-sys-color-on-surface-variant, #45565F); }
.yn-launch p strong { color: var(--md-sys-color-on-surface, #16242C); }
.yn-launch-highlight h2 strong, .yn-launch-em { color: var(--md-sys-color-tertiary, #B4416A); font: var(--md-sys-typescale-emphasized-title-large, 600 22px / 28px system-ui, sans-serif); }
/* 订阅更新提示：M3 填充卡片（surface-container-highest） */
.yn-launch-warn { margin: 0 0 8px; padding: 16px !important; border: 0 !important; border-radius: var(--md-sys-shape-corner-large, 16px); background: var(--md-sys-color-surface-container-highest, #E3EEF5); }
.yn-launch-warn + section { border-top: 0; }
.yn-launch code {
  padding: 2px 8px; border-radius: var(--md-sys-shape-corner-small, 8px); letter-spacing: .04em;
  background: var(--md-sys-color-tertiary-container, #F5A9B8); color: var(--md-sys-color-on-tertiary-container, #4A1426);
  font: 600 13px / 20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.yn-launch a { color: var(--md-sys-color-primary, #0872A0); text-underline-offset: 3px; }
/* 行动按钮：M3 tonal 按钮（苹果壁纸浅蓝 secondary-container，高 40，全圆）；悬停时箭头往前走，按下时圆角收成 small */
.yn-launch-action, .yn-launch-links a {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; margin-top: 6px; padding: 0 16px 0 20px;
  border-radius: var(--md-sys-shape-corner-full, 999px); text-decoration: none;
  background: var(--md-sys-color-secondary-container, #DCECF4); color: var(--md-sys-color-on-secondary-container, #0C3E52);
  font: var(--md-sys-typescale-label-large, 500 14px / 20px system-ui, sans-serif);
  transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration, 300ms) var(--md-sys-motion-spring-fast-spatial, ease);
}
.yn-launch-action:hover, .yn-launch-links a:hover { background: color-mix(in srgb, var(--md-sys-color-on-secondary-container, #0C3E52) 8%, var(--md-sys-color-secondary-container, #DCECF4)); }
.yn-launch-action:hover .msr, .yn-launch-action:focus-visible .msr { transform: translateX(4px); --msr-wght: 600; }
.yn-launch-links a:hover .msr, .yn-launch-links a:focus-visible .msr { transform: translate(2px, -2px); --msr-wght: 600; }
.yn-launch-action:active, .yn-launch-links a:active { border-radius: var(--md-sys-shape-corner-small, 8px); }
.yn-launch-links { display: flex; flex-wrap: wrap; gap: 8px; }
.yn-launch-list { margin: 4px 0 0; padding-left: 1.2em; color: var(--md-sys-color-on-surface-variant, #45565F); }
.yn-launch-list li { margin: 6px 0; }
.yn-launch-list li::marker { color: var(--md-sys-color-primary, #0872A0); }
.yn-launch-list b { color: var(--md-sys-color-on-surface, #16242C); }
.yn-launch-rule { padding: 8px 12px; border-radius: var(--md-sys-shape-corner-medium, 12px); background: var(--md-sys-color-surface-container-highest, #E3EEF5); }
/* 底部：「我知道了」用旗帜浅蓝（primary-container）+ 深色字，和首页主按钮一致 */
.yn-launch footer {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 16px 24px 20px;
  background: var(--md-sys-color-surface-container-high, #EAF3F8); border-top: 1px solid var(--md-sys-color-outline-variant, #CADDE7);
}
.yn-launch-dismiss {
  flex: none; height: 40px; padding: 0 24px; border: 0; cursor: pointer;
  border-radius: var(--md-sys-shape-corner-full, 999px);
  background: var(--md-sys-color-primary-container, #5BCEFA); color: var(--md-sys-color-on-primary-container, #062A38);
  font: var(--md-sys-typescale-label-large, 500 14px / 20px system-ui, sans-serif);
  transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration, 300ms) var(--md-sys-motion-spring-fast-spatial, ease), box-shadow .2s;
}
.yn-launch-dismiss:hover { box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15)); }
.yn-launch-dismiss:active { border-radius: var(--md-sys-shape-corner-small, 8px); }
.yn-launch footer span { font: var(--md-sys-typescale-body-small, 400 12px / 16px system-ui, sans-serif); color: var(--md-sys-color-on-surface-variant, #45565F); }
/* 右下角重新打开：M3 小号扩展 FAB（旗帜浅蓝 primary-container、medium 圆角、level3）；悬停时喇叭图标变实心并「喊」一下；
   往下滚动时收成 40×40 的图标 FAB（文字宽度按 default spatial 弹簧收起），往上滚再展开 */
.yn-launch-reopen {
  position: fixed; right: 16px; bottom: 24px; z-index: 9998; display: inline-flex; align-items: center;
  height: 40px; padding: 0 16px 0 10px; border: 0; cursor: pointer; white-space: nowrap;
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  background: var(--md-sys-color-primary-container, #5BCEFA); color: var(--md-sys-color-on-primary-container, #062A38);
  box-shadow: var(--md-sys-elevation-level3, 0 1px 3px rgb(0 0 0 / .3), 0 4px 8px 3px rgb(0 0 0 / .15));
  font: var(--md-sys-typescale-label-large, 500 14px / 20px system-ui, sans-serif);
  transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration, 300ms) var(--md-sys-motion-spring-fast-spatial, ease),
    padding var(--md-sys-motion-spring-default-spatial-duration, 400ms) var(--md-sys-motion-spring-default-spatial, ease);
}
.yn-launch-reopen .msr { font-size: 20px; }
.yn-launch-reopen-label {
  display: inline-block; overflow: hidden; max-width: 6em; margin-left: 8px;
  transition: max-width var(--md-sys-motion-spring-default-spatial-duration, 400ms) var(--md-sys-motion-spring-default-spatial, ease),
    margin-left var(--md-sys-motion-spring-default-spatial-duration, 400ms) var(--md-sys-motion-spring-default-spatial, ease),
    opacity var(--md-sys-motion-spring-fast-effects-duration, 150ms) var(--md-sys-motion-spring-fast-effects, ease);
}
.yn-launch-reopen--collapsed { padding: 0 10px; }
.yn-launch-reopen--collapsed .yn-launch-reopen-label { max-width: 0; margin-left: 0; opacity: 0; }
.yn-launch-reopen:hover .msr, .yn-launch-reopen:focus-visible .msr {
  --msr-fill: 1;
  animation: yn-launch-shout var(--md-sys-motion-spring-default-spatial-duration, 500ms) var(--md-sys-motion-spring-fast-spatial, ease);
}
.yn-launch-reopen:active { border-radius: var(--md-sys-shape-corner-small, 8px); }
@keyframes yn-launch-shout {
  30% { transform: rotate(-16deg) scale(1.12); }
  65% { transform: rotate(8deg); }
}
.yn-launch :focus-visible, .yn-launch-reopen:focus-visible { outline: 3px solid var(--md-sys-color-primary, #0872A0); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .yn-launch[open] { animation: yn-launch-in var(--md-sys-motion-spring-default-spatial-duration, 400ms) var(--md-sys-motion-spring-default-spatial, ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .yn-launch-reopen .msr { animation: none !important; }
}
@keyframes yn-launch-in { from { opacity: 0; transform: scale(.92); } }
@media (max-width: 600px) {
  .yn-launch { max-height: calc(100dvh - 24px); border-radius: var(--md-sys-shape-corner-extra-large, 28px); }
  .yn-launch-head { padding: 20px 20px 12px; }
  .yn-launch-body { padding: 0 20px 8px; }
  .yn-launch footer { padding: 12px 20px 16px; }
  .yn-launch-reopen { bottom: calc(168px + env(safe-area-inset-bottom)); right: 16px; }
}
html[data-yn-footer] .yn-launch-reopen { bottom: calc(var(--yn-footer-h, 0px) + 12px); }