/* Site notifications: the bell in the bottom-right corner of every page (ot-bell.js, since 2 Oct 2026). It is round 2's
   D8 "The pick" (notification-variants/bell/d8-the-pick.html): D in Dark, the ink of the latest-episode bar with the
   green kept for the dots and the equaliser, with the Green colour's bell (the header's greens, a white icon, the white
   number in its green ring) and the post's picture in the bubble, laid out like a row of the list. Dark goes against
   START-HERE §5 ("cards deep green, never white or black"): the team picked it on 2 Oct.
   Sits above the latest-episode dock (z 45), under the header (z 50); steps up over the dock when they'd touch (--nb-lift).
   With reduced motion nothing moves: things fade. */

.nb{--nb-ease:cubic-bezier(.2,.8,.2,1); --nb-spring:cubic-bezier(.34,1.56,.64,1); --nb-gap:24px; --nb-lift:0px;
  /* the bell: the Green colour's */
  --nb-bell:linear-gradient(180deg,#209D50 0%,#1C7940 42%,#164328 100%) border-box; --nb-bell-fg:#fff; --nb-bell-line:rgba(255,255,255,.14);
  --nb-bell-shadow:0 22px 44px -18px rgba(22,67,40,.85), inset 0 1px 0 rgba(255,255,255,.16); --nb-count-bg:#fff; --nb-count-fg:#164328; --nb-count-ring:#1C7940;
  /* the bubble and the list: Dark */
  --nb-panel:linear-gradient(165deg,#1D1D1D 0%,#111 100%); --nb-line:rgba(255,255,255,.1);
  --nb-shadow:0 30px 60px -26px rgba(0,0,0,.75), 0 10px 22px -14px rgba(0,0,0,.5);
  --nb-fg:#fff; --nb-dim:rgba(255,255,255,.7); --nb-faint:rgba(255,255,255,.48); --nb-hair:rgba(255,255,255,.1); --nb-hover:rgba(255,255,255,.06);
  --nb-accent:#3DD47D; --nb-chip:rgba(255,255,255,.08); --nb-chip-fg:#fff; --nb-chip-hover:#209D50; --nb-chip-hover-fg:#fff;
  --nb-x:rgba(255,255,255,.7); --nb-x-hover:rgba(255,255,255,.1); --nb-focus:#3DD47D;
  position:fixed; z-index:48; right:var(--nb-gap); bottom:var(--nb-gap); display:flex; flex-direction:column; align-items:flex-end;
  translate:0 calc(-1 * var(--nb-lift)); transition:translate .5s var(--nb-ease);
  font-family:var(--body,"Poppins",Arial,sans-serif); color:var(--nb-fg); line-height:1.4; text-align:left; -webkit-font-smoothing:antialiased}
@media (max-width:640px){ .nb{--nb-gap:16px} }

.nb *,.nb *::before,.nb *::after{box-sizing:border-box}
.nb p{margin:0}
.nb ul{margin:0; padding:0; list-style:none}
.nb img{display:block; max-width:none}
.nb button{font:inherit; -webkit-tap-highlight-color:transparent}
.nb :focus-visible{outline:2px solid var(--nb-focus); outline-offset:2px}
body.drawer-open .nb{visibility:hidden}
@media print{ .nb{display:none} }

/* ---------------------------------------------------------------- a post: the picture, the label · day, the line, where it went out */
.nb-th{position:relative; flex:none; display:block; width:44px; height:44px; border-radius:12px; overflow:hidden; background:#1F1F1F; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.nb-th img{width:100%; height:100%; object-fit:cover}
.nb-th--cover{background:#209D50}
.nb-th--disc img{object-position:50% 70%; filter:grayscale(1) contrast(1.05) brightness(.96)}
.nb-th--bw img{filter:grayscale(1) contrast(1.06)}
.nb-tx{min-width:0}
.nb-k{display:flex; align-items:center; gap:8px; min-width:0; font:600 11px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--nb-dim)}
.nb-k > span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nb-k time{flex:none; font-weight:500; letter-spacing:.08em; color:var(--nb-faint)}
.nb-k time::before{content:"·"; margin-right:8px}
/* every line on the calendar shows in full: four lines at most in the bubble, five in the list's narrower phone rows */
.nb-t{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden; margin-top:5px; font:500 13.5px/1.4 var(--body); color:var(--nb-fg); text-decoration:none; text-wrap:pretty}
/* the line is the post's link, stretched over the whole bubble or row; the platform buttons sit on top of it */
.nb-go{color:inherit; text-decoration:none; outline:none}
.nb-go::after{content:""; position:absolute; inset:0; z-index:1; border-radius:14px}
.nb .nb-go:focus-visible{outline:none}
.nb-go:focus-visible::after{outline:2px solid var(--nb-focus); outline-offset:2px}
/* where it went out: a round button per platform (the post on that platform once ot-feed.js has its link, the show's
   profile there until then); a platform with no link (TikTok) is named after them */
.nb-on{position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:7px; pointer-events:none;
  font:500 11.5px/1.3 var(--body); color:var(--nb-faint)}
.nb-on a{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--nb-chip); color:var(--nb-chip-fg); text-decoration:none; pointer-events:auto;
  transition:background-color .2s var(--nb-ease), color .2s var(--nb-ease)}
.nb-on a:hover{background:var(--nb-chip-hover); color:var(--nb-chip-hover-fg)}
.nb-on svg{width:12px; height:12px}
.nb-on span{margin-left:3px}
.nb-x{position:absolute; z-index:2; top:8px; right:8px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--nb-x); cursor:pointer; transition:background-color .2s, color .2s}
.nb-x:hover{background:var(--nb-x-hover); color:var(--nb-fg)}
.nb-x svg{width:14px; height:14px}

/* ---------------------------------------------------------------- the bell */
.nb-bellw{position:relative; flex:none; opacity:0; transform:scale(.6); transition:opacity .3s ease, transform .55s var(--nb-spring)}
.nb.is-up .nb-bellw{opacity:1; transform:none}
.nb-bell{position:relative; z-index:1; display:grid; place-items:center; width:56px; height:56px; padding:0; border-radius:50%; border:1px solid var(--nb-bell-line);
  background:var(--nb-bell); color:var(--nb-bell-fg); cursor:pointer; box-shadow:var(--nb-bell-shadow); transition:scale .45s var(--nb-spring)}
.nb-bell:hover{scale:1.06} .nb-bell:active{scale:.95}
.nb-bell svg{width:23px; height:23px; transform-origin:50% 12%}
.nb-bell.is-ring svg{animation:nb-shake 1.1s var(--nb-ease) 2}
@keyframes nb-shake{0%,62%,100%{rotate:0} 8%{rotate:16deg} 18%{rotate:-14deg} 28%{rotate:10deg} 38%{rotate:-7deg} 48%{rotate:4deg} 56%{rotate:-2deg}}
.nb-count{position:absolute; z-index:2; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--nb-count-bg);
  color:var(--nb-count-fg); font:700 12px/22px var(--body); text-align:center; box-shadow:0 0 0 2px var(--nb-count-ring), 0 4px 10px -4px rgba(17,17,17,.5);
  transition:scale .35s var(--nb-spring)}
.nb-count.is-gone{scale:0}

/* ---------------------------------------------------------------- the bubble beside the bell: the newest post, like a row of the list */
.nb-peek{position:absolute; z-index:2; right:70px; bottom:3px; display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:start;
  width:max-content; max-width:min(356px, calc(100vw - 2 * var(--nb-gap) - 72px)); padding:12px 12px 13px; border-radius:16px 16px 6px 16px;
  background:var(--nb-panel); border:1px solid var(--nb-line); box-shadow:var(--nb-shadow); color:var(--nb-fg);
  opacity:0; translate:10px 0; visibility:hidden; transition:opacity .3s ease, translate .5s var(--nb-ease), visibility 0s .5s}
.nb-peek.is-in{opacity:1; translate:0 0; visibility:visible; transition-delay:0s}
.nb-peek .nb-k{padding-right:24px}
.nb-peek .nb-t{-webkit-line-clamp:4}
.nb-peek .nb-go::after{border-radius:16px 16px 6px 16px}
.nb-peek .nb-x{top:5px; right:5px; width:28px; height:28px}
/* phones: beside the bell the line would get about 200px, so the bubble sits above the bell, the width of the screen */
@media (max-width:640px){
  .nb-peek{right:0; bottom:calc(100% + 16px); width:calc(100vw - 2 * var(--nb-gap)); max-width:none; translate:0 10px}
  .nb-peek.is-in{translate:0 0}
}

/* ---------------------------------------------------------------- the list: the latest six */
/* (never taller than the room between the bell and the header's foot, ~100px down, even when stepped up over the dock) */
.nb-panel{position:absolute; z-index:3; right:0; bottom:70px; display:flex; flex-direction:column; width:min(372px, calc(100vw - 2 * var(--nb-gap)));
  max-height:min(580px, calc(100vh - var(--nb-gap) - var(--nb-lift) - 70px - 100px)); border-radius:22px; background:var(--nb-panel); border:1px solid var(--nb-line); box-shadow:var(--nb-shadow);
  color:var(--nb-fg); overflow:hidden; transform-origin:100% 100%; opacity:0; scale:.96; translate:0 10px; visibility:hidden; outline:none;
  transition:opacity .22s ease, scale .4s var(--nb-ease), translate .4s var(--nb-ease), visibility 0s .4s}
.nb-panel.is-open{opacity:1; scale:1; translate:0 0; visibility:visible; transition-delay:0s}
.nb-panel__h{position:relative; flex:none; display:flex; align-items:center; gap:10px; padding:15px 50px 13px 18px; border-bottom:1px solid var(--nb-hair)}
.nb-panel__h img{width:28px; height:28px; border-radius:50%}
.nb-panel__h b{font:400 19px/1 var(--display,"Anton",sans-serif); letter-spacing:.01em; text-transform:uppercase; color:var(--nb-fg); white-space:nowrap}
.nb-panel__h .eq{height:14px; color:var(--nb-accent)}
.nb-panel__h .nb-x{top:50%; translate:0 -50%; right:10px}
.nb-scroll{flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin}
.nb-rows{padding:6px}
.nb-row{position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:start; padding:10px 12px 11px 16px; border-radius:14px;
  color:var(--nb-fg); transition:background-color .2s}
.nb-row:hover{background:var(--nb-hover)}
/* not read yet (not clicked): the green dot */
.nb-row.is-new::before{content:""; position:absolute; left:5px; top:28px; width:6px; height:6px; border-radius:50%; background:var(--nb-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--nb-accent) 22%, transparent)}

/* ---------------------------------------------------------------- reduced motion: nothing moves, things fade */
@media (prefers-reduced-motion:reduce){
  .nb *,.nb *::before,.nb *::after{animation:none !important}
  .nb-bellw{transform:none !important; transition:opacity .2s ease !important}
  .nb-peek,.nb-panel{translate:none !important; scale:none !important}
  .nb{transition:none}
}