@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=Geist:wght@400..800&display=swap");
/* Shared UI for every page (Christiaan, Oct 20): the one popover. Linked from every page's head next to the page's
   own stylesheet, so its look changes here without rebuilding pages. Behavior: /assets/ui.js. Style rules:
   docs/PLAYBOOK.md, Popovers. */
/* PALETTE (tools/restyle_site.py palette) */
/* Site colors. Light first, then dark (the device's setting, or data-theme on <html>). Names keep the old hex so a
   rule's color can be traced back; values come from THEME in tools/restyle_site.py. */
:root{--c-080A12:#0A0A0D;--c-0A0D18:#0D0D12;--c-0A0E1E:#0E0F15;--c-0B0F1A:#0E0F14;--c-0C0F1A:#0F0F14;--c-0E1220:#111218;--c-121726:#16171D;--c-141A2E:#191B23;--c-151A2B:#191A21;--c-1A2033:#1F2028;--c-1B2340:#222430;--c-1C2A44:#282A35;--c-222941:#282A34;--c-252C44:#2B2D36;--c-2A1D00:#00274C;--c-2A1F00:#00284F;--c-2E3650:#353741;--c-33260F:#00305C;--c-3A3120:#163B62;--c-3A4360:#424450;--c-463500:#004077;--c-5A6280:#61636F;--c-5E6782:#656772;--c-6E5212:#0060AE;--c-7A5C10:#006AC0;--c-8A6A12:#055CA6;--c-8A8070:#5F6F81;--c-8A8FA3:#8E8F98;--c-9A7A1E:#156BBB;--c-9AA3BE:#A1A3AE;--c-A3A9BF:#A8A9B2;--c-A87A12:#046FC7;--c-A87A1E:#1270C4;--c-AEB4CC:#B3B4BE;--c-B8860B:#007CDD;--c-B8902A:#2383DF;--c-C9952C:#248CEE;--c-C9A400:#1F94FF;--c-C9A94A:#439AF4;--c-C9CDDA:#CCCDD2;--c-C9CDE0:#CCCDD5;--c-D2A332:#2D97FE;--c-D4B45A:#52A5FD;--c-D5D9E6:#D8D9DE;--c-D9DCE6:#DBDCE0;--c-DFE3EF:#E2E3E8;--c-E2B54A:#5AAAFF;--c-E2B64E:#5CAAFF;--c-E8C34A:#71B5FF;--c-E8C873:#7BB9FF;--c-E8C892:#85BBF7;--c-E8CB78:#7FBCFF;--c-E9EBF3:#EBEBEE;--c-EBEDF3:#ECEDEF;--c-F1F2F8:#F2F2F5;--c-F3E1B0:#A5CFFF;--c-F3E7C2:#B2D4FB;--c-F3E7C9:#B8D4F5;--c-F3F4F8:#F4F4F6;--c-FBF0DE:#CADDF2;--c-FFD100:#8FC4FF;--acc:#1270C4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--c-080A12:#131417;--c-0A0D18:#16171C;--c-0A0E1E:#17181F;--c-0B0F1A:#18191D;--c-0C0F1A:#18191E;--c-0E1220:#1B1C22;--c-121726:#202127;--c-141A2E:#23242D;--c-151A2B:#23242B;--c-1A2033:#282A32;--c-1B2340:#2B2D3A;--c-1C2A44:#31333E;--c-222941:#31333D;--c-252C44:#343640;--c-2A1D00:#00274C;--c-2A1F00:#00284F;--c-2E3650:#3D3F4A;--c-33260F:#00305C;--c-3A3120:#163B62;--c-3A4360:#4A4C58;--c-463500:#004077;--c-5A6280:#686A76;--c-5E6782:#6C6E79;--c-6E5212:#0060AE;--c-7A5C10:#006AC0;--c-8A6A12:#055CA6;--c-8A8070:#5F6F81;--c-8A8FA3:#93949C;--c-9A7A1E:#156BBB;--c-9AA3BE:#A5A7B2;--c-A3A9BF:#ABADB6;--c-A87A12:#046FC7;--c-A87A1E:#1270C4;--c-AEB4CC:#B6B7C1;--c-B8860B:#007CDD;--c-B8902A:#2383DF;--c-C9952C:#248CEE;--c-C9A400:#1F94FF;--c-C9A94A:#439AF4;--c-C9CDDA:#CECFD4;--c-C9CDE0:#CECFD7;--c-D2A332:#2D97FE;--c-D4B45A:#52A5FD;--c-D5D9E6:#D9DADF;--c-D9DCE6:#DCDDE1;--c-DFE3EF:#E3E3E8;--c-E2B54A:#5AAAFF;--c-E2B64E:#5CAAFF;--c-E8C34A:#71B5FF;--c-E8C873:#7BB9FF;--c-E8C892:#85BBF7;--c-E8CB78:#7FBCFF;--c-E9EBF3:#EBEBEE;--c-EBEDF3:#ECEDEF;--c-F1F2F8:#F1F2F4;--c-F3E1B0:#A5CFFF;--c-F3E7C2:#B2D4FB;--c-F3E7C9:#B8D4F5;--c-F3F4F8:#F3F4F5;--c-FBF0DE:#CADDF2;--c-FFD100:#8FC4FF;--acc:#5CAAFF;--DeathKnight:#F3515F;--DemonHunter:#C758EE;--Shaman:#3791FF;--Evoker:#48A590}}
:root[data-theme="dark"]{--c-080A12:#131417;--c-0A0D18:#16171C;--c-0A0E1E:#17181F;--c-0B0F1A:#18191D;--c-0C0F1A:#18191E;--c-0E1220:#1B1C22;--c-121726:#202127;--c-141A2E:#23242D;--c-151A2B:#23242B;--c-1A2033:#282A32;--c-1B2340:#2B2D3A;--c-1C2A44:#31333E;--c-222941:#31333D;--c-252C44:#343640;--c-2A1D00:#00274C;--c-2A1F00:#00284F;--c-2E3650:#3D3F4A;--c-33260F:#00305C;--c-3A3120:#163B62;--c-3A4360:#4A4C58;--c-463500:#004077;--c-5A6280:#686A76;--c-5E6782:#6C6E79;--c-6E5212:#0060AE;--c-7A5C10:#006AC0;--c-8A6A12:#055CA6;--c-8A8070:#5F6F81;--c-8A8FA3:#93949C;--c-9A7A1E:#156BBB;--c-9AA3BE:#A5A7B2;--c-A3A9BF:#ABADB6;--c-A87A12:#046FC7;--c-A87A1E:#1270C4;--c-AEB4CC:#B6B7C1;--c-B8860B:#007CDD;--c-B8902A:#2383DF;--c-C9952C:#248CEE;--c-C9A400:#1F94FF;--c-C9A94A:#439AF4;--c-C9CDDA:#CECFD4;--c-C9CDE0:#CECFD7;--c-D2A332:#2D97FE;--c-D4B45A:#52A5FD;--c-D5D9E6:#D9DADF;--c-D9DCE6:#DCDDE1;--c-DFE3EF:#E3E3E8;--c-E2B54A:#5AAAFF;--c-E2B64E:#5CAAFF;--c-E8C34A:#71B5FF;--c-E8C873:#7BB9FF;--c-E8C892:#85BBF7;--c-E8CB78:#7FBCFF;--c-E9EBF3:#EBEBEE;--c-EBEDF3:#ECEDEF;--c-F1F2F8:#F1F2F4;--c-F3E1B0:#A5CFFF;--c-F3E7C2:#B2D4FB;--c-F3E7C9:#B8D4F5;--c-F3F4F8:#F3F4F5;--c-FBF0DE:#CADDF2;--c-FFD100:#8FC4FF;--acc:#5CAAFF;--DeathKnight:#F3515F;--DemonHunter:#C758EE;--Shaman:#3791FF;--Evoker:#48A590}
/* END PALETTE */

/* LOOK (Christiaan, Oct 28; mockups style-*-r8): Fraunces headings, Geist body (sized so lines wrap where Source Sans 3
   did), numbers that line up in columns, a faint top highlight on cards in dark mode, softer shadows in light mode. */
/* The heading "f" (Christiaan, Oct 29, option F of heading-f-r1): Fraunces draws a hooked "f" at headline sizes, so
   headings take just that one letter from Literata (a 2 KB file with only "f"); every other letter stays Fraunces. */
@font-face{font-family:"Heading f";src:url("/assets/fonts/literata-f.woff2") format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0066}
:root{--fh:"Heading f",Fraunces,Georgia,serif;--fhw:560;--fhls:-.01em;--fb:Geist,system-ui,sans-serif;--hl:transparent;
  --soft-sh:0 1px 2px rgb(16 24 40 / .06),0 8px 24px -8px rgb(16 24 40 / .16);
  --soft-sh-hi:0 1px 2px rgb(16 24 40 / .05),0 12px 32px -12px rgb(16 24 40 / .13)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hl:rgb(255 255 255 / .045);
  --soft-sh:0 1px 2px rgb(0 0 0 / .45),0 12px 30px -10px rgb(0 0 0 / .6);--soft-sh-hi:0 2px 6px rgb(0 0 0 / .5),0 22px 48px -12px rgb(0 0 0 / .7)}}
:root[data-theme="dark"]{--hl:rgb(255 255 255 / .045);--soft-sh:0 1px 2px rgb(0 0 0 / .45),0 12px 30px -10px rgb(0 0 0 / .6);--soft-sh-hi:0 2px 6px rgb(0 0 0 / .5),0 22px 48px -12px rgb(0 0 0 / .7)}
body{font-variant-numeric:tabular-nums;font-size-adjust:.477}

/* Motion (/assets/motion.js): the pill that glides between tabs, drawn under the labels while it moves */
.m-anim>.m-thumb{position:absolute;z-index:0;pointer-events:none;box-sizing:border-box;transform-origin:left center}
.m-anim>[data-tab],.m-anim>[data-t],.m-anim>button{position:relative;z-index:1}
.m-anim>[aria-selected="true"]{background:transparent!important;box-shadow:none!important;border-color:transparent!important}
html.m-seg-hide .mrow>:not(.seg),html.m-seg-hide .mrow~*{opacity:0!important}
details>summary::before,details .chev{transition:transform .22s cubic-bezier(.23,1,.32,1)!important}
/* END LOOK */



:root{--pop-bg:#FFFFFF;--pop-ink:var(--c-1B2340);--pop-line:var(--c-D9DCE6);--pop-shadow:color-mix(in srgb,var(--c-1B2340) 16%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pop-bg:var(--c-252C44);--pop-ink:var(--c-E9EBF3);--pop-line:var(--c-3A4360);--pop-shadow:rgba(0,0,0,.45)}}
:root[data-theme="dark"]{--pop-bg:var(--c-252C44);--pop-ink:var(--c-E9EBF3);--pop-line:var(--c-3A4360);--pop-shadow:rgba(0,0,0,.45)}

.ui-pop{position:absolute;z-index:1000;display:none;max-width:min(18rem,calc(100vw - 16px));padding:.55rem .7rem;border-radius:8px;
  background:var(--pop-bg);color:var(--pop-ink);border:1px solid var(--pop-line);box-shadow:0 8px 22px var(--pop-shadow);
  font:400 .82rem/1.4 var(--fb);letter-spacing:0;text-transform:none;text-align:left;white-space:normal;pointer-events:none}
.ui-pop.on{display:block}
.ui-pop.ml{white-space:pre-line}
.ui-pop b,.ui-pop strong{font-weight:700}
.ui-pop a{color:inherit}
.ui-pop-arrow{position:absolute;width:10px;height:10px;background:var(--pop-bg);transform:rotate(45deg)}
.ui-pop[data-side="below"] .ui-pop-arrow{top:-6px;border-left:1px solid var(--pop-line);border-top:1px solid var(--pop-line)}
.ui-pop[data-side="above"] .ui-pop-arrow{bottom:-6px;border-right:1px solid var(--pop-line);border-bottom:1px solid var(--pop-line)}

/* With the script on, the pages' own CSS-only tips stay hidden: one popover, ours */
.ui-js .info-tip,.ui-js .pwait-tip,.ui-js .pop-tip{display:none!important}
[data-tip]{cursor:help}
a[data-tip],button[data-tip]{cursor:pointer}

/* The (i) icon (Christiaan picked option B, Oct 20): a soft tinted dot with an upright i, no outline. Drawn here over
   the plain <span class="info">i<span class="info-tip">…</span></span> markup every builder writes, so this is the one
   place its look changes. ".howto" is the separate "How to avoid" link style and keeps its own look. */
:root{--info-dot:color-mix(in srgb,var(--c-5E6782) 20%,transparent);--info-dot-on:color-mix(in srgb,var(--c-A87A12) 28%,transparent);--info-ink:var(--c-3A4360)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--info-dot:color-mix(in srgb,var(--c-9AA3BE) 22%,transparent);--info-dot-on:color-mix(in srgb,var(--c-E2B54A) 30%,transparent);--info-ink:var(--c-D5D9E6)}}
:root[data-theme="dark"]{--info-dot:color-mix(in srgb,var(--c-9AA3BE) 22%,transparent);--info-dot-on:color-mix(in srgb,var(--c-E2B54A) 30%,transparent);--info-ink:var(--c-D5D9E6)}
:root .info:not(.howto){position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;
  width:1.1rem;height:1.1rem;border:0;border-radius:50%;background:var(--info-dot);color:transparent;font-size:0;font-style:normal;
  line-height:0;vertical-align:-.15em;cursor:help;outline:none}
:root .info:not(.howto)::before{content:"";width:.8rem;height:.8rem;background:var(--info-ink);opacity:.8;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 11v6'/%3E%3Ccircle cx='12' cy='7' r='.7' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 11v6'/%3E%3Ccircle cx='12' cy='7' r='.7' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat}
:root .info:not(.howto):hover,:root .info:not(.howto):focus-visible{background:var(--info-dot-on)}
:root .info:not(.howto):focus-visible{box-shadow:0 0 0 2px var(--info-dot-on)}
:root .info:not(.howto) .info-tip{font-size:.82rem;line-height:1.4;color:var(--pop-ink)}

/* View as (admins only, Oct 23; /assets/viewas.js): the top bar switch, its menu, and the amber bar under the top bar
   while viewing the site as someone else. Here so it looks the same on built pages and the Dashboard. */
:root{--vas-ink:#8A4F0C;--vas-bg:var(--c-FBF0DE);--vas-line:var(--c-E8C892)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--vas-ink:#F0B060;--vas-bg:var(--c-33260F);--vas-line:#6A4C1E}}
:root[data-theme="dark"]{--vas-ink:#F0B060;--vas-bg:var(--c-33260F);--vas-line:#6A4C1E}
.vas-sw{position:relative;flex:none}
.sn-top>.sn{position:relative;z-index:2}   /* the bar's menus open over the strips under it */
.vas-btn{display:flex;align-items:center;gap:.4rem;border:1px solid var(--pop-line);background:var(--pop-bg);color:var(--pop-ink);border-radius:999px;
  padding:.3rem .7rem .3rem .55rem;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;max-width:13rem}
.vas-btn svg,.vas-bar svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vas-btn .vas-lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vas-btn b{color:var(--cc,inherit)}
.vas-btn.on{background:var(--vas-bg);border-color:var(--vas-line);color:var(--vas-ink)}
.vas-btn:hover{border-color:var(--vas-line)}
.vas-menu{position:absolute;right:0;top:calc(100% + .4rem);width:21rem;max-width:calc(100vw - 16px);background:var(--pop-bg);color:var(--pop-ink);
  border:1px solid var(--pop-line);border-radius:12px;box-shadow:0 12px 30px var(--pop-shadow);padding:8px;z-index:60;text-align:left}
.vas-head{padding:4px 8px 8px;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.vas-q{display:block;width:100%;box-sizing:border-box;margin:0 0 8px;padding:.5rem .7rem;border:1px solid var(--pop-line);border-radius:8px;
  background:transparent;color:inherit;font:inherit;font-size:.95rem}
.vas-q:focus{outline:2px solid var(--vas-line);outline-offset:0}
.vas-list{max-height:22rem;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--pop-ink) 22%,transparent) transparent}
.vas-list::-webkit-scrollbar{width:8px}.vas-list::-webkit-scrollbar-track{background:transparent}
.vas-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--pop-ink) 22%,transparent);border-radius:8px}
.vas-row{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.vas-row:hover,.vas-row[aria-current="true"]{background:color-mix(in srgb,var(--pop-line) 55%,transparent)}
.vas-av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;
  background:color-mix(in srgb,var(--cc,var(--pop-line)) 22%,transparent);color:var(--cc,inherit)}
.vas-nm{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.vas-nm b{color:var(--cc,inherit);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vas-nm small{opacity:.65;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vas-n{margin-left:auto;flex:none;opacity:.65;font-size:.8rem;white-space:nowrap}
.vas-me{margin-bottom:4px;border-bottom:1px solid var(--pop-line);border-radius:8px 8px 0 0}
.vas-sub{padding:12px 8px 4px;font-size:.8rem;font-weight:700;opacity:.7}
.vas-fine{padding:8px;font-size:.85rem;opacity:.7}
.vas-bar{background:var(--vas-bg);color:var(--vas-ink);border-bottom:1px solid var(--vas-line)}
.vas-in{max-width:var(--sn-w,60rem);margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:12px;font-size:.92rem}
.vas-in p{margin:0;flex:1;min-width:0;line-height:1.35}
.vas-in b{color:var(--cc,inherit)}
.vas-back{flex:none;border:1px solid var(--vas-line);background:var(--pop-bg);color:var(--vas-ink);border-radius:999px;padding:.3rem .8rem;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}
.vas-back:hover{background:var(--vas-bg)}
@media (max-width:620px){.vas-sw{position:static}.vas-menu{left:8px;right:8px;width:auto;max-width:none}.vas-in .vas-ro{display:none}.vas-btn .vas-pre{display:none}.vas-btn{max-width:8.5rem}.vas-btn:not(.on) .vas-lb{display:none}.vas-btn:not(.on){padding:.4rem}}

/* The review bell and the "your review is ready" card (Christiaan, Oct 24; /assets/notify.js), on every page with the
   top bar. Colors fall back to the dark theme's when a page's stylesheet doesn't name them. */
.nb-hold{position:relative;flex:none;margin-right:.1rem}
.nb-bell{position:relative;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--pop-line);background:var(--pop-bg);color:var(--pop-ink);
  display:grid;place-items:center;cursor:pointer;padding:0}
.nb-bell svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nb-bell:focus-visible{outline:2px solid var(--gold,var(--c-E2B64E));outline-offset:2px}
.nb-bell.ring svg{animation:nb-ring .9s ease}
@keyframes nb-ring{10%,30%,50%{transform:rotate(14deg)}20%,40%{transform:rotate(-14deg)}60%{transform:none}}
.nb-ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;border-top-color:var(--t-blue,#3D8BFF);animation:nb-spin 1.4s linear infinite;pointer-events:none}
@keyframes nb-spin{to{transform:rotate(360deg)}}
.nb-badge{position:absolute;top:-.25rem;right:-.3rem;min-width:1.05rem;height:1.05rem;padding:0 .25rem;border-radius:999px;background:var(--kill,#8FD45E);
  color:#10200a;font:800 .68rem/1 var(--fb);display:grid;place-items:center;border:2px solid var(--bg,var(--c-121726))}
.nb-panel{position:absolute;right:0;top:calc(100% + .45rem);width:min(22rem,calc(100vw - 32px));background:var(--pop-bg);color:var(--pop-ink);border:1px solid var(--pop-line);
  border-radius:12px;box-shadow:0 14px 34px var(--pop-shadow);z-index:60;overflow:hidden;text-align:left;font:400 1rem/1.35 var(--fb)}
.nb-panel h5{margin:0;padding:.7rem .9rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.7;border-bottom:1px solid var(--pop-line)}
.nb-item{display:flex;gap:.65rem;align-items:center;padding:.65rem .9rem;border-bottom:1px solid var(--pop-line);text-decoration:none;color:inherit}
.nb-item:last-child{border-bottom:0}
a.nb-item:hover{background:color-mix(in srgb,var(--pop-ink) 6%,transparent)}
.nb-item img,.nb-ph{width:2.2rem;height:2.2rem;border-radius:8px;object-fit:cover;flex:none;background:color-mix(in srgb,var(--pop-ink) 10%,transparent)}
.nb-item b{display:block;font-size:.95rem}
.nb-item small{opacity:.7}
.nb-item.new{background:color-mix(in srgb,var(--kill,#8FD45E) 10%,transparent)}
.nb-item.new b::after{content:"New";margin-left:.45rem;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--kill,#8FD45E)}
.nb-go{margin-left:auto;color:var(--gold,var(--c-E2B64E));font-weight:800;white-space:nowrap}
.nb-run{margin-left:auto;color:var(--t-blue,#3D8BFF);font-weight:700;font-size:.85rem;white-space:nowrap}
.nb-toast{position:fixed;z-index:300;bottom:1rem;right:1rem;width:min(17rem,calc(100vw - 32px));background:var(--pop-bg);color:var(--pop-ink);border:1px solid var(--pop-line);
  border-radius:12px;box-shadow:0 16px 40px var(--pop-shadow);overflow:hidden;font:400 1rem/1.35 var(--fb);animation:nb-in .5s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes nb-in{from{transform:translateX(115%)}}
.nb-art{height:5rem;background:color-mix(in srgb,var(--pop-ink) 10%,transparent) center/cover;position:relative}
.nb-art::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,var(--pop-bg))}
.nb-tx{padding:.2rem .9rem .95rem}
.nb-tx b{display:block}
.nb-tx small{opacity:.75}
.nb-open{display:block;margin-top:.45rem;font-weight:800;color:var(--gold,var(--c-E2B64E));text-decoration:none}
.nb-open:hover{text-decoration:underline}
.nb-x{position:absolute;top:.35rem;right:.45rem;width:1.5rem;height:1.5rem;border-radius:50%;border:0;background:rgba(0,0,0,.4);color:#fff;cursor:pointer;font-size:.95rem;line-height:1}
.nb-bar{position:absolute;left:0;bottom:0;height:3px;background:var(--kill,#8FD45E);animation:nb-bar 10s linear forwards}
.nb-toast:hover .nb-bar{animation-play-state:paused}
@keyframes nb-bar{from{width:100%}to{width:0}}
@media (prefers-reduced-motion:reduce){.nb-ring,.nb-bell.ring svg,.nb-toast,.nb-bar{animation:none}}
.nb-none{margin:0;padding:.9rem;opacity:.7;font-size:.95rem}
/* The admin's bell (Oct 24, Christiaan, mockup admin-bell-reviews-2): sections that fold, Waiting for you and Published on
   their own with buttons in each row, one gold number. The panel scrolls with the style guide's thin scrollbar. */
.nb-badge.gold{background:var(--gold,var(--c-E2B64E));color:var(--c-2A1D00)}
.nb-panel.nb-admin{width:min(26rem,calc(100vw - 32px));max-height:min(40rem,calc(100vh - 6rem));overflow:auto;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--pop-ink) 22%,transparent) transparent}
.nb-panel.nb-admin::-webkit-scrollbar{width:8px}.nb-panel.nb-admin::-webkit-scrollbar-track{background:transparent}
.nb-panel.nb-admin::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--pop-ink) 22%,transparent);border-radius:8px;border:2px solid var(--pop-bg)}
.nb-panel.nb-admin::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--pop-ink) 38%,transparent)}
.nb-sec{display:flex;align-items:center;gap:.5rem;width:100%;margin:0;padding:.7rem .9rem .6rem;background:none;color:inherit;border:0;border-top:1px solid var(--pop-line);
  font:700 .75rem/1.2 var(--fb);letter-spacing:.08em;text-transform:uppercase;text-align:left;cursor:pointer;opacity:.78}
.nb-sec:first-child{border-top:0}
.nb-sec:hover{opacity:1}
.nb-sec:focus-visible{outline:2px solid var(--gold,var(--c-E2B64E));outline-offset:-2px}
.nb-sec[aria-expanded="true"]{border-bottom:1px solid var(--pop-line)}
.nb-chev{margin-left:auto;width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.nb-sec[aria-expanded="false"] .nb-chev{transform:rotate(-90deg)}
.nb-n{font-size:.68rem;font-weight:800;border-radius:999px;padding:.05rem .4rem;letter-spacing:0}
.nb-n.gold{background:color-mix(in srgb,var(--gold,var(--c-E2B64E)) 25%,transparent);color:var(--gold,var(--c-E2B64E))}
.nb-n.green{background:color-mix(in srgb,var(--kill,#8FD45E) 22%,transparent);color:var(--kill,#8FD45E)}
.nb-n.plain{background:color-mix(in srgb,var(--pop-ink) 14%,transparent)}
.nb-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .22s ease}
.nb-body > div{overflow:hidden;min-height:0}
.nb-body.shut{grid-template-rows:0fr}
.nb-adm{display:grid;grid-template-columns:2.2rem 1fr auto;gap:.15rem .65rem;align-items:center;padding:.65rem .9rem;border-bottom:1px solid var(--pop-line)}
.nb-adm:last-child{border-bottom:0}
.nb-adm img,.nb-adm .nb-ph{width:2.2rem;height:2.2rem;border-radius:8px;object-fit:cover;grid-row:span 2;background:color-mix(in srgb,var(--pop-ink) 10%,transparent)}
.nb-adm b{font-size:.95rem}
.nb-adm small{opacity:.72;grid-column:2}
.nb-when{font-size:.78rem;opacity:.6;justify-self:end;white-space:nowrap}
.nb-why{grid-column:2 / span 2;font-size:.85rem;color:var(--gold,var(--c-E2B64E));line-height:1.3}
.nb-acts{grid-column:2 / span 2;display:flex;gap:.9rem;align-items:baseline;margin-top:.25rem;line-height:1.2}
.nb-acts a,.nb-acts button{background:none;border:0;padding:0;font:inherit;font-weight:800;cursor:pointer;text-decoration:none}
.nb-acts a{color:var(--t-blue,#3D8BFF);font-weight:700}
.nb-acts a:hover,.nb-acts button:hover,.nb-acts button[data-armed]{text-decoration:underline}
.nb-acts button:disabled{opacity:.5;cursor:default}
.nb-ok{color:var(--gold,var(--c-E2B64E));margin-left:auto}
.nb-good{color:var(--kill,#8FD45E);margin-left:auto}
.nb-no{color:var(--prog,#F0A04B)}
.nb-err{grid-column:2 / span 2;font-size:.82rem;color:var(--prog,#F0A04B)}
.nb-adm.gone{animation:nb-gone .35s ease forwards}
@keyframes nb-gone{to{opacity:0;transform:translateX(12px)}}
@media (prefers-reduced-motion:reduce){.nb-body,.nb-chev{transition:none}.nb-adm.gone{animation:none;opacity:0}}
/* phones: the panel sits against the screen's right edge instead of under the bell, so it isn't cut off on the left */
@media (max-width:620px){.top-in,.sn-in{position:relative}.nb-hold{position:static}.nb-panel{right:8px;top:calc(100% + .3rem)}}