/* What's New (web) — held behind platform setting whats_new_web. Nothing here renders until public/js/whats-new.js builds .wn-root.
   Spacing law: 24 between sections, 12 label->field, 16 rows, 8 status line. Tokens --space-1..8 (4..32px). */
.wn-root {
  --wn-space-1: 4px; --wn-space-2: 8px; --wn-space-3: 12px; --wn-space-4: 16px; --wn-space-6: 24px;
  --wn-ink: #14203a; --wn-muted: #66718a; --wn-accent: #2f6bb0;
  --wn-sheet: #ffffff; --wn-stage: #e9eff7; --wn-ring: rgba(47, 90, 150, .09);
  --wn-pill-bg: #14203a; --wn-pill-ink: #ffffff; --wn-dot: #cdd5e2; --wn-dot-on: #14203a;
  --wn-close-bg: #ffffff; --wn-close-ink: #14203a; --wn-close-line: #d9e0ec;
  --wn-bezel: #0f1624; --wn-screen: #ffffff; --wn-edge: rgba(20, 32, 58, .10);
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body, 'Absans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  color: var(--wn-ink); -webkit-font-smoothing: antialiased;
}
html[data-remodel-mode="night"] .wn-root {
  --wn-ink: #eaf0fa; --wn-muted: #9aa6bd; --wn-accent: #6b9fd4;
  --wn-sheet: #121a2b; --wn-stage: #0b1424; --wn-ring: rgba(120, 160, 220, .10);
  --wn-pill-bg: #e9eef6; --wn-pill-ink: #14203a; --wn-dot: #33405a; --wn-dot-on: #eaf0fa;
  --wn-close-bg: #121a2b; --wn-close-ink: #eaf0fa; --wn-close-line: #2a3650;
  --wn-bezel: #05080f; --wn-screen: #14171c; --wn-edge: rgba(255, 255, 255, .10);
}
.wn-root[hidden] { display: none; }
.wn-scrim { position: absolute; inset: 0; background: rgba(10, 18, 34, .55); }
.wn-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  width: 560px; max-width: calc(100vw - 32px); height: min(720px, calc(100vh - 48px));
  background: var(--wn-stage); border-radius: 28px; box-shadow: 0 24px 64px rgba(10, 18, 34, .35);
}
.wn-stage {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; justify-content: center; align-items: flex-start;
  padding: 56px 0 var(--wn-space-6);
  background:
    repeating-radial-gradient(circle at 50% 60%, transparent 0 58px, var(--wn-ring) 58px 59px),
    radial-gradient(circle at 12% 18%, var(--wn-ring) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 42%, var(--wn-ring) 0 3px, transparent 4px),
    var(--wn-stage);
}
.wn-phone {
  position: relative; flex: 0 0 auto; width: 248px; border: 9px solid var(--wn-bezel); border-bottom: 0;
  border-radius: 40px 40px 0 0; background: var(--wn-screen); overflow: hidden; min-height: 760px; box-shadow: 0 0 0 1px var(--wn-edge);
}
.wn-phone::before { content: ""; position: absolute; top: 9px; left: 50%; width: 76px; height: 22px; margin-left: -38px; border-radius: 12px; background: var(--wn-bezel); z-index: 2; }
.wn-shot { display: block; width: 100%; height: auto; margin-top: 40px; }
.wn-shot-dark { display: none; }
html[data-remodel-mode="night"] .wn-shot-light { display: none; }
html[data-remodel-mode="night"] .wn-shot-dark { display: block; }
.wn-close {
  position: absolute; top: var(--wn-space-4); right: var(--wn-space-4); z-index: 5; width: 44px; height: 44px; min-height: 44px; padding: 0; box-sizing: border-box;
  border-radius: 50%; border: 1px solid var(--wn-close-line); background: var(--wn-close-bg); color: var(--wn-close-ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.wn-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.wn-sheet {
  position: relative; z-index: 3; flex: 0 0 auto; margin-top: -28px; box-sizing: border-box;
  padding: var(--wn-space-6) var(--wn-space-6) var(--wn-space-6); background: var(--wn-sheet); border-radius: 28px 28px 0 0;
  box-shadow: 0 -1px 0 var(--wn-edge);
}
.wn-eyebrow { margin: 0 0 var(--wn-space-3); font-size: 12px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--wn-accent); font-weight: 400; }
.wn-h { margin: 0 0 var(--wn-space-3); font-size: 32px; line-height: 38px; font-weight: 400; letter-spacing: -.01em; color: var(--wn-ink); }
.wn-body { margin: 0; min-height: 52px; font-size: 17px; line-height: 26px; color: var(--wn-muted); }
.wn-dots { display: flex; justify-content: center; align-items: center; margin: var(--wn-space-2) 0 0; }
.wn-dot { width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wn-dot i { display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--wn-dot); transition: width .2s ease, background .2s ease; }
.wn-dot[aria-current="true"] i { width: 28px; background: var(--wn-dot-on); }
.wn-cont {
  display: block; width: 100%; min-height: 56px; margin: var(--wn-space-2) 0 0; padding: 0 var(--wn-space-6); box-sizing: border-box; border: 0; border-radius: 28px;
  background: var(--wn-pill-bg); color: var(--wn-pill-ink); font: inherit; font-size: 18px; cursor: pointer;
}
.wn-close:focus-visible, .wn-dot:focus-visible, .wn-cont:focus-visible, .wn-entry:focus-visible { outline: 2px solid var(--wn-accent); outline-offset: 2px; }
.wn-fade { animation: wn-in .22s ease both; }
@keyframes wn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wn-fade { animation: none; } .wn-dot i { transition: none; } }

/* Settings entry (only added while the switch is on) */
.wn-entry {
  display: inline-flex; align-items: center; min-height: 44px; margin: var(--space-3, 12px) 0 0; padding: 0 var(--space-4, 16px); box-sizing: border-box;
  border: 1px solid var(--border, #d9e0ec); border-radius: 22px; background: transparent; color: var(--blue, #2f6bb0); font: inherit; font-size: 14px; cursor: pointer;
}

/* Phone: full screen like the iOS reference */
@media (max-width: 600px) {
  .wn-card { width: 100vw; max-width: none; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
  .wn-stage { padding-top: 64px; }
  .wn-phone { width: min(270px, 70vw); }
  .wn-sheet { padding-bottom: max(var(--wn-space-6), env(safe-area-inset-bottom)); }
  .wn-h { font-size: 30px; line-height: 36px; min-height: 72px; }
  .wn-body { min-height: 78px; }
}
@media (max-height: 700px) and (max-width: 600px) { .wn-phone { width: 200px; } .wn-stage { padding-top: 56px; } }