/* Notifications, Escalate and What's new in the Hallmark look (Rami approved the mockup on 2 November 2026:
   review/hallmark/notifications-rethink.html). The bell's side sheet (public/app.js bellHtml), the Escalate form and an escalation
   (public/escalate.js), and the What's new and announcement pop-ups (public/app.js wnPop, openNews). Cadence tokens only, so light and
   dark follow by themselves; logical sides, so Arabic mirrors; nothing wider than a 400px phone. */

/* ---------- the bell ---------- */
html body .sp.hb-sp .hb:not(#_){display:flex;flex-direction:column;gap:0;flex:1 0 auto}
html body .sp.hb-sp .sp-b:not(#_){display:flex;flex-direction:column}
html body .sp.hb-sp .hb-ask:not(#_){gap:10px 12px;padding:14px 16px;margin:0 0 14px;border-radius:var(--radius-lg);font-size:13.5px;line-height:1.45}
html body .sp.hb-sp .hb-ask .btn-s:not(#_):not(#_){height:34px;min-height:34px;padding:0 14px;font-weight:600}
html body .sp.hb-sp .hb-tabs:not(#_){padding:0;margin:0 0 8px;gap:8px;background:transparent;border-radius:0}
html body .sp.hb-sp .hb-tabs button:not(#_):not(#_){display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--surface-sunken);color:var(--c-ink);font-size:13px;font-weight:600;box-shadow:none}
html body .sp.hb-sp .hb-tabs button:hover:not(#_):not(#_){background:var(--surface-hover)}
html body .sp.hb-sp .hb-tabs button.on:not(#_):not(#_){background:var(--c-ink);color:var(--surface)}
html body .sp.hb-sp .hb-tabs em:not(#_){margin:0;opacity:.65;font-size:12.5px;font-weight:600}
html body .sp.hb-sp .hb-g:not(#_){margin:16px 0 6px;font-size:13px;font-weight:600;color:var(--ink-muted)}
html body .sp.hb-sp .hb-row:not(#_){border-radius:0;border-bottom:1px solid var(--border)}
html body .sp.hb-sp .hb-n:not(#_){--hb-bg:var(--surface);grid-template-columns:40px minmax(0,1fr);gap:14px;padding:12px 40px 14px 6px;border-radius:0}
html body[dir="rtl"] .sp.hb-sp .hb-n:not(#_),html[dir="rtl"] body .sp.hb-sp .hb-n:not(#_){padding:12px 6px 14px 40px}
html body .sp.hb-sp .hb-n.u:not(#_){--hb-bg:color-mix(in srgb,var(--focus) 8%,var(--surface))}
html body .sp.hb-sp .hb-n:hover:not(#_){--hb-bg:var(--surface-hover)}
html body .sp.hb-sp .hb-n .av:not(#_):not(#_){width:40px;height:40px;border-radius:50%;font-size:13px}
html body .sp.hb-sp .hb-n .av img:not(#_){border-radius:50%}
html body .sp.hb-sp .hb-n .av.hub:not(#_):not(#_){background:var(--c-ink);color:var(--surface)}
html body .sp.hb-sp .hb-ty:not(#_){right:auto;inset-inline-end:-6px;bottom:-6px}
html body .sp.hb-sp .hb-who:not(#_){display:flex;align-items:center;gap:8px;min-width:0}
html body .sp.hb-sp .hb-who b:not(#_){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .sp.hb-sp .hb-u:not(#_){flex:none;width:7px;height:7px;border-radius:50%;background:var(--focus)}
html body .sp.hb-sp .hb-meta:not(#_){font-size:12.5px;white-space:normal}
html body .sp.hb-sp .hb-body:not(#_){font-size:13.5px}
html body .sp.hb-sp .hb-act:not(#_){font-weight:600}
html body .sp.hb-sp .hb-x:not(#_):not(#_){top:12px;right:auto;inset-inline-end:6px;width:28px;height:28px;background:transparent;color:var(--ink-muted);font-size:18px}
html body .sp.hb-sp .hb-x:hover:not(#_):not(#_){background:var(--surface-hover);color:var(--c-ink)}
@media (hover:hover){html body .sp.hb-sp .hb-x:not(#_):not(#_){display:grid;place-items:center}}
html body .sp.hb-sp .hb-row.has-go .hb-n:not(#_){padding-bottom:52px}
html body .sp.hb-sp .hb-go:not(#_):not(#_){left:auto;inset-inline-start:60px;bottom:14px;height:30px;padding:0 12px;border-radius:8px;background:var(--surface);color:var(--c-ink);font-size:13px;box-shadow:inset 0 0 0 1px var(--border-strong)}
html body .sp.hb-sp .hm-empty:not(#_){padding:28px 6px;color:var(--ink-muted)}
/* the foot: what the list keeps, and Mark all as read; it stays at the bottom of the sheet */
html body .sp.hb-sp .hb-foot:not(#_){position:sticky;bottom:calc(-1 * var(--space-4,16px));z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:auto calc(-1 * var(--space-4,16px)) calc(-1 * var(--space-4,16px));max-width:none!important;width:auto;padding:12px var(--space-4,16px);background:var(--bg,var(--surface));border-top:1px solid var(--border)}
html body .sp.hb-sp .hb-foot small:not(#_){color:var(--ink-muted);font-size:13px;min-width:0}
html body .sp.hb-sp .hb-foot .hb-read:not(#_){flex:none}
html body .sp.hb-sp .hb-foot .hb-read:not(#_):not(#_){height:38px;min-height:38px;padding:0 16px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--c-ink);font-size:14px;font-weight:600}
html body .sp.hb-sp .hb-foot .hb-read:hover:not(#_):not(#_){background:var(--surface-hover)}
/* its ⋯ (the cog it was) */
html body .sp.hb-sp .sp-tools .hl-menu>summary.hb-mb:not(#_):not(#_){width:34px;height:34px;min-height:34px;padding:0;display:inline-grid;place-items:center;border:1px solid var(--border-strong);border-radius:8px;background:transparent;color:var(--c-ink)}
html body .sp.hb-sp .hb-mb svg:not(#_){width:18px;height:18px;fill:currentColor}

/* ---------- Escalate ---------- */
html body .sp.esc-sp .esc-k:not(#_){display:block;font-size:12.5px;font-weight:700;color:var(--ink-muted)}
html body .sp.esc-sp .esc-from:not(#_){font-size:13.5px;color:var(--ink-muted)}
html body .sp.esc-sp .esc-from a:not(#_){color:var(--c-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
html body .sp.esc-sp .esc-form label>span:not(#_){font-size:13px;font-weight:600}
html body .sp.esc-sp .esc-count:not(#_){display:block;margin-top:4px;font-size:12px;font-weight:600;color:var(--ink-muted);font-variant-numeric:tabular-nums}
html body .sp.esc-sp .esc-climb:not(#_){display:grid;gap:10px;padding:14px 16px;border-radius:var(--radius-lg);background:var(--surface-sunken)}
html body .sp.esc-sp .esc-climb ol:not(#_){list-style:none;margin:0;padding:0;display:grid;gap:8px}
html body .sp.esc-sp .esc-climb li:not(#_){display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-muted)}
html body .sp.esc-sp .esc-climb li b:not(#_){color:var(--c-ink);font-weight:600}
html body .sp.esc-sp .esc-climb li>i:not(#_){flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--border-strong);font-style:normal;font-size:11.5px;font-weight:700;color:var(--c-ink);background:var(--surface)}
html body .sp.esc-sp .esc-climb li.now>i:not(#_){background:#d64545;border-color:#d64545;color:#fff}
html body .sp.esc-sp .esc-cn:not(#_){font-size:12.5px;color:var(--ink-muted);line-height:1.45}
html body .sp.esc-sp .esc-foot:not(#_){display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding-top:12px;border-top:1px solid var(--border)}
html body .sp.esc-sp .esc-fn:not(#_){flex:1 1 220px;font-size:13px;color:var(--ink-muted)}
html body .sp.esc-sp .esc-foot .wk-err:not(#_){flex-basis:100%}
html body .sp.esc-sp :is(.esc-foot,.esc-reach,.esc-act,.esc-reply,.esc-btns) .btn-s:not(#_):not(#_){height:36px;min-height:36px;padding:0 14px;font-weight:600}
/* an escalation: the yellow box while it waits for your Seen */
html body .sp.esc-sp .esc-reach:not(#_){display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:var(--radius-lg);background:color-mix(in srgb,#fbe08a 38%,var(--surface));box-shadow:inset 4px 0 0 #e3b51c}
html body .sp.esc-sp .esc-reach p:not(#_){margin:0;font-size:14px;line-height:1.5;color:var(--c-ink)}
html body .sp.esc-sp .esc-row:not(#_){gap:8px;padding:16px 0;border-bottom:1px solid var(--border)}
html body .sp.esc-sp .esc-row.full:not(#_){padding-top:0;border-bottom:0}
html body .sp.esc-sp .esc-row.done:not(#_){opacity:1}
html body .sp.esc-sp .esc-st:not(#_){display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
html body .sp.esc-sp .esc-seen:not(#_){display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--surface-sunken);font-size:12.5px;font-weight:600;color:var(--ink-muted)}
html body .sp.esc-sp .esc-txt:not(#_){margin:2px 0 0;font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
html body .sp.esc-sp .esc-txt b:not(#_){font-weight:600}
html body .sp.esc-sp .esc-row.full .esc-txt:not(#_){font-size:17px;line-height:1.45;letter-spacing:-.005em}
html body .sp.esc-sp .esc-meta:not(#_){font-size:13px;color:var(--ink-muted)}
html body .sp.esc-sp .esc-meta a:not(#_){color:var(--c-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
html body .sp.esc-sp .esc-up:not(#_){display:block;font-size:13px;font-weight:600;color:var(--status-stuck-fg)} /* when it passes up by itself (3 November 2026) */
html body .sp.esc-sp .esc-trail:not(#_){list-style:none;margin:4px 0;padding:2px 0;padding-inline-start:14px;border-inline-start:2px solid var(--border);display:grid;gap:7px;font-size:13px;line-height:1.45;color:var(--ink-muted)}
html body .sp.esc-sp .esc-trail b:not(#_){color:var(--c-ink);font-weight:600}
html body .sp.esc-sp .esc-trail time:not(#_){margin-inline-end:4px;color:var(--ink-subtle);font-variant-numeric:tabular-nums}
html body .sp.esc-sp .esc-trail li.auto:not(#_){color:var(--status-stuck-fg,#c62828);font-weight:600}
html body .sp.esc-sp .esc-trail li.ok:not(#_){color:var(--accent-green,#1f9d55);font-weight:600}
html body .sp.esc-sp .esc-list>.esc-row:last-child:not(#_){border-bottom:0}
html body .sp.esc-sp .esc-re:not(#_):not(#_){padding:10px 12px;border-radius:12px;background:var(--surface-sunken);font-size:14px;line-height:1.45;max-width:88%}
html body .sp.esc-sp .esc-re.me:not(#_):not(#_){background:color-mix(in srgb,var(--focus) 12%,var(--surface))}
html body .sp.esc-sp .esc-re small:not(#_):not(#_){font-size:12px;font-weight:600;color:var(--ink-muted);margin-bottom:3px}
html body .sp.esc-sp .esc-btns:not(#_){display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
html body .sp.esc-sp .esc-act:not(#_){display:grid;gap:10px;padding:14px;border-radius:var(--radius-lg);background:var(--surface-sunken)}
html body .sp.esc-sp .esc-act label:not(#_){display:grid;gap:6px;font-size:13px;font-weight:600}
html body .sp.esc-sp .esc-act textarea:not(#_){width:100%;min-width:0;background:var(--surface)}
html body .sp.esc-sp .esc-act .wk-do:not(#_){display:flex;gap:8px;align-items:center}
html body .sp.esc-sp .esc-act .wk-err:not(#_){color:var(--status-stuck-fg);font-weight:600}
html body .sp.esc-sp .esc-note:not(#_){margin:0;font-size:13px;color:var(--ink-muted)}
html body .sp.esc-sp .esc-reply label:not(#_){font-size:13px;font-weight:600;color:var(--c-ink)}
html body .sp.esc-sp .esc-reply .wk-do:not(#_){display:flex}
html body .sp.esc-sp .esc-list:not(#_){display:grid}
html body .sp.esc-sp .esc-list>.esc-row:first-child:not(#_){padding-top:4px}
html body .esc-pill:not(#_):not(#_){display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--status-stuck-bg,#fde8e8);color:var(--status-stuck-fg,#b42318);font-size:12.5px;font-weight:700}
html body .esc-pill[hidden]:not(#_):not(#_){display:none}

/* ---------- What's new and announcements ---------- */
html body .ann-modal .ann-card:not(#_){max-width:540px;padding:22px 24px 20px;border-radius:16px;background:var(--surface);border:0;box-shadow:var(--shadow-menu,0 18px 50px rgba(0,0,0,.25))}
html body .ann-modal .ann-top:not(#_){gap:12px;align-items:center}
html body .ann-modal .ann-top .buddy:not(#_){width:44px;height:44px}
html body .ann-modal .ann-hd:not(#_){display:flex;flex-direction:column;gap:2px;min-width:0}
html body .ann-modal .ann-kicker:not(#_){font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink-muted)}
html body .ann-modal .ann-title:not(#_){font-size:20px;line-height:1.2;font-weight:650;letter-spacing:-.01em;color:var(--c-ink)}
html body .ann-modal .ann-items:not(#_){margin-top:16px;gap:14px}
html body .ann-modal .ann-item+.ann-item:not(#_){border-top:1px solid var(--border);padding-top:14px}
html body .ann-modal .ann-item small:not(#_){display:block;font-size:12.5px;font-weight:600;color:var(--ink-muted);margin-bottom:2px}
html body .ann-modal .ann-item h2:not(#_){font-family:inherit;font-size:16.5px;line-height:1.3;font-weight:650;letter-spacing:-.01em}
html body .ann-modal .ann-item p:not(#_){font-size:14px;color:var(--ink-muted)}
html body .ann-modal .ann-greet:not(#_):not(#_){display:inline-flex;margin-top:10px;height:34px;align-items:center;padding:0 12px;border-radius:8px;font-weight:600;text-decoration:none}
html body .ann-modal .wn-pts:not(#_){font-size:14px;color:var(--c-ink)}
html body .ann-modal .ann-actions:not(#_){margin-top:18px;gap:8px}
html body .ann-modal .ann-actions .btn-s:not(#_):not(#_),html body .ann-modal .ann-actions .gbtn:not(#_):not(#_){height:38px;min-height:38px;padding:0 16px;border-radius:8px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
html body .ann-modal .ann-actions .gbtn:not(#_):not(#_),html body .ann-modal .ann-actions .gbtn:focus:not(#_):not(#_){background:var(--c-ink)!important;color:var(--surface)!important;border:0!important}
html body .ann-modal .ann-actions .gbtn:focus-visible:not(#_):not(#_){outline:2px solid var(--focus);outline-offset:2px}
html body .ann-modal .wn-actions .wn-all:not(#_):not(#_){margin-inline-end:auto;background:color-mix(in srgb,var(--accent-violet,#7a4bd1) 12%,var(--surface));color:var(--c-ink);border:1px solid color-mix(in srgb,var(--accent-violet,#7a4bd1) 45%,var(--surface))}
html body .ann-modal .wn-actions [data-wnoff]:not(#_):not(#_){border:0;background:transparent}
html body .ann-modal .wn-actions [data-wnoff]:hover:not(#_):not(#_){background:var(--surface-hover)}
html[dir="rtl"] .ann-modal .wn-all span:not(#_){display:inline-block;transform:scaleX(-1)}
@media (max-width:520px){
  html body .ann-modal .ann-card:not(#_){padding:18px 16px 16px}
  html body .ann-modal .wn-actions .wn-all:not(#_):not(#_){flex-basis:100%;justify-content:center;margin-inline-end:0}
}
html body .sp.esc-sp .esc-1st:not(#_){font-size:inherit;color:var(--ink-muted)}html body .sp.esc-sp .esc-1st:not(#_)::before{content:" · "}
html body .sp.esc-sp .esc-st .hl-dw b:not(#_){font-weight:600}