/* ── guild-announcements task 3.1 (R6, D6): the "what's new" blade and the
   top-bar unread dot ──────────────────────────────────────────────────────
   Every rule for the what's-new UI lives here (`wn-` prefix) — app.css is not
   edited (the range / gex-page / alerts containment precedent). A fixed
   right-hand drawer under the top bar, above the status bar; one step above
   the alert-log blade (600), below the alerts dialog (900). Tokens only (no
   hex), sharp corners, borders not shadows (the drawer takes the menu
   shadow), mono, no transitions — it appears. */
#whatsNewBtn{position:relative}
/* the unread count (R6.2): 1–9, then 9+ — a green chip, black figures */
.wn-dot{position:absolute;top:0;right:0;min-width:11px;height:11px;padding:0 2px;box-sizing:border-box;border-radius:0;background:var(--green);color:var(--bg-0);font-family:var(--font-mono);font-size:8px;font-weight:700;line-height:11px;letter-spacing:0;text-align:center;font-variant-numeric:tabular-nums;pointer-events:none}
.wn-dot[hidden]{display:none}

#wn-blade{display:none;position:fixed;top:var(--topbar-h,40px);right:0;bottom:var(--statusbar-h,24px);width:440px;max-width:100vw;box-sizing:border-box;z-index:610;flex-direction:column;background:var(--bg-1);border:0;border-left:1px solid var(--border);border-radius:0;box-shadow:var(--shadow-menu);font-family:var(--font-mono)}
#wn-blade[data-open="1"]{display:flex}
#wn-blade:focus{outline:none}
.wn-hd{justify-content:flex-start;gap:8px}
.wn-hd .mws-btn{padding:0 5px}
.wn-status{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.wn-err{color:var(--red)}
.wn-scroll{flex:1 1 auto;min-height:0;overflow:auto}
.wn-msg{padding:12px;font-size:.66rem;color:var(--fg-mute)}
.wn-more{margin:8px 12px}

.wn-entry{padding:10px 12px 12px;border-bottom:1px solid var(--border-dim);font-size:.7rem;line-height:1.5;color:var(--fg-1);overflow-wrap:anywhere}
.wn-date{font-size:.6rem;color:var(--fg-mute);letter-spacing:1px;font-variant-numeric:tabular-nums}
/* the date line; an unread post's NEW tag (R6.2) sits beside the date */
.wn-line{display:flex;align-items:center;gap:8px;min-height:16px}
.wn-new{letter-spacing:1px}
/* a read, older post (R6.5): one line, a real button — date + title + ▸/▾.
   Hover is an instant bg step-up; no transition. */
.wn-entry--fold{padding:0}
.wn-toggle{display:flex;align-items:baseline;gap:8px;width:100%;min-width:0;margin:0;padding:8px 12px;box-sizing:border-box;border:0;border-radius:0;background:transparent;color:var(--fg-1);font:inherit;font-family:var(--font-mono);text-align:left;cursor:pointer}
.wn-toggle:hover{background:var(--bg-4)}
.wn-toggle:focus-visible{outline:none;box-shadow:var(--glow-focus)}
.wn-glyph{flex:0 0 auto;color:var(--fg-mute)}
.wn-tdate{flex:0 0 auto;font-size:.6rem;color:var(--fg-mute);letter-spacing:1px;font-variant-numeric:tabular-nums}
.wn-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
.wn-entry--fold .wn-body{padding:0 12px 12px}
.wn-body[hidden]{display:none}
.wn-body .wn-h{font-family:var(--font-mono);font-weight:700;line-height:1.35;margin:10px 0 4px;color:var(--fg-hi)}
.wn-body .wn-h1{font-size:.86rem}
.wn-body .wn-h2{font-size:.78rem}
.wn-body .wn-h3{font-size:.72rem;color:var(--green)}
.wn-body > .wn-h:first-child{margin-top:4px}
.wn-p{margin:4px 0}
.wn-ul{margin:4px 0;padding-left:16px}
.wn-ul li{margin:1px 0}
.wn-quote{margin:6px 0;padding:2px 0 2px 10px;border-left:2px solid var(--border-hot);color:var(--fg-2)}
.wn-body strong{color:var(--fg-hi);font-weight:700}

/* toasts step left of the open blade — it is 440px, wider than the 380px
   alert-log / history blades alerts.css offsets them for (body[data-right-blade]);
   same specificity, loaded after alerts.css, so this wins while it is open */
body[data-wn-blade="1"] #alr-toasts{right:452px}

/* phone: the rail is a bottom tab bar, so the blade goes full width and stops
   above it — the alert-log / history blade rule */
@media (max-width:768px){
  #wn-blade{left:0;width:auto;border-left:0;bottom:calc(var(--statusbar-h,24px) + var(--mtab-h,44px))}
  body[data-wn-blade="1"] #alr-toasts{right:12px}
}