/* Header notification bell + first-visit "free week of Premium" card (freeweek.js). */
.navbell{position:relative;margin-right:-12px}
.bellbtn{position:relative;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s}
.bellbtn:hover,.navbell.open .bellbtn{background:var(--sunk)}
.belldot{position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
.bellmenu{position:absolute;top:calc(100% + 8px);right:0;width:300px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:6px;z-index:30}
.bellmenu:not([hidden]){animation:pop .25s var(--ease) both}
.bellhead{font-weight:700;font-size:13px;padding:8px 10px 6px;color:var(--muted)}
.bellitem{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;text-align:left;border:0;background:var(--gold-soft);color:var(--ink);border-radius:8px;padding:12px;cursor:pointer;font:inherit;font-size:14px}
.bellitem:hover{filter:brightness(.97)}
.bellitem .muted{font-size:13px;line-height:1.4}
.bellempty{padding:10px 10px 14px;font-size:14px}
@media (max-width:820px){.navbell{margin-left:auto;margin-right:-8px}.navbell:not([hidden])+.navright{margin-left:0}}
/* Tighter header on phones so the bell fits. */
@media (max-width:560px){.nav .wrap{gap:10px}.navbell{margin-right:0}.navright{gap:4px}.navbell{position:static}.bellmenu{right:16px;top:calc(100% + 4px)}}

.fwpop{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:340px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--r);box-shadow:var(--shadow);padding:20px;z-index:40;animation:fwin .5s var(--ease) both}
.fwpop h3{font-size:18px;margin:10px 0 6px;padding-right:28px}
.fwpop p{font-size:14px;margin:0 0 14px}
.fwpop .close{top:10px;right:10px;width:30px;height:30px;font-size:16px}
@keyframes fwin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:560px){.fwpop{left:16px;right:16px;width:auto}}
@media (prefers-reduced-motion:reduce){.fwpop,.bellmenu:not([hidden]){animation:none}}