/* 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(--danger);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)}}

/* Popout that slides out of the bell: anchored under it, with a little tip pointing up at it. */
.fwpop{position:fixed;top:64px;right:max(16px,calc((100vw - 1160px)/2));width:320px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 2px 6px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.10);padding:16px 16px 14px;z-index:40;transform-origin:calc(100% - var(--fw-tip,24px)) 0;animation:fwin .45s var(--ease) both}
.fwpop::before{content:"";position:absolute;top:-7px;right:var(--fw-tip,24px);width:12px;height:12px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);border-top-left-radius:3px}
.fwpop.out{animation:fwout .2s var(--ease) both}
.fwpop-h{display:flex;align-items:center;gap:8px;padding-right:26px;font-size:15px}
.fwpop-star,.bellstar{display:grid;place-items:center;border-radius:50%;background:var(--gold);color:var(--surface)}
.fwpop-star{width:22px;height:22px;flex:none;font-size:12px}
.fwpop p{font-size:13px;line-height:1.45;margin:8px 0 12px}
.fwpop .close{top:8px;right:8px;width:28px;height:28px;font-size:16px}
.fwpop .row{gap:6px}
@keyframes fwin{from{opacity:0;transform:translateY(-6px) scale(.6)}to{opacity:1;transform:none}}
@keyframes fwout{to{opacity:0;transform:translateY(-4px) scale(.85)}}
/* Phones: one slim line under the header, no paragraph, so it doesn't cover the page. */
@media (max-width:560px){.fwpop{left:12px;right:12px!important;width:auto;max-width:calc(100vw - 24px);padding:10px 8px 10px 12px;display:flex;align-items:center;gap:10px}
  .fwpop p,.fwpop-later,.fwpop-long{display:none}.fwpop-h{padding-right:0;font-size:14px;white-space:nowrap;flex:1;min-width:0}.fwpop .row{flex-wrap:nowrap}
  .fwpop .close{position:static;flex:none;order:3}}
/* The gold star on the bell while a free week is waiting. */
.bellstar{position:absolute;bottom:-5px;right:-5px;width:16px;height:16px;font-size:10px;line-height:1;box-shadow:0 0 0 2px var(--surface)}
@media (prefers-reduced-motion:reduce){.fwpop,.fwpop.out,.bellmenu:not([hidden]){animation:none}}