/* The 10a look (nb-50) for the pages the landing page's redesign did not cover: map, the Deco invite page, Deco help,
   Pulse, privacy, terms, and the builder's bar (sign-in, blocks, billing). Linked from each page's head.json. Since
   nb-54 those pages' own stylesheets are in this look too; this sheet still supplies the mark and the shared values. Those pages read their colors and fonts by name (--pine, --lime, --ink, --disp, ...); this
   gives the names 10a's values: ink buttons, the sky's blue, the sun's gold, the pen's pink, Fraunces headings over
   Plus Jakarta Sans (fonts from fraunces_plus-jakarta-sans_fredoka-*.css, also in each head.json). The Deco characters
   keep their own colors: they are drawn, not themed. Dark mode keeps its own palette (lib/blaine/dark.css).
   :root x3 and :not(#nb50) outrank the pages' own rules whatever order the stylesheets arrive in. */
:root:root:root{
  --pine:#1B1714;--lime:#F3C64D;--lilac:#BFE3FB;--sky:#BFE3FB;--pink:#FCE4EF;
  --disp:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --nb-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --nb-pen:#DB2777;
}
:root:root:root:not(.dark){
  --ink:#1B1714;--body-c:#4A433B;--mute:#6B645B;--grey:#6B645B;--line:#E6E1D9;--cream:#EEF6FD;
}
h1:not(#nb50),h2:not(#nb50){font-family:var(--nb-serif);font-weight:600;letter-spacing:-.025em}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--nb-pen);outline-offset:3px}

/* the mark: 10a's rounded ink tile with a white street and a small white block, in place of the three blocks */
:is(.brand,.logo) > svg[viewBox="0 0 64 64"]{display:none!important}
:is(.brand,.logo):not(#nb50){display:inline-flex;align-items:center;gap:10px;font-family:var(--nb-serif);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
:is(.brand,.logo)::before{content:"";display:block;flex:0 0 auto;width:32px;height:32px;
  background:url(/assets/look/mark.svg) center/contain no-repeat}
html.dark :is(.brand,.logo)::before{background-image:url(/assets/look/mark-dark.svg)}
.brand span:not(#nb50){font-family:var(--nb-serif);font-weight:600;letter-spacing:-.01em}

/* map: 10a's bar, white with a hairline, the mark with the name beside it, and an ink pill to sign in */
#topnav#topnav{background:#FFFFFF;border-bottom:1px solid var(--line);box-shadow:0 6px 20px rgba(27,23,20,.06)}
#topnav .logo::after{content:"Neighborhood Blocks";content:"Neighborhood Blocks" / "";font-size:19px;white-space:nowrap}
.signpill:not(#nb50){background:var(--ink);border-color:var(--ink);color:#FFFFFF;font-family:var(--body);font-weight:600}
html.dark #topnav#topnav{background:#101310;border-bottom-color:#2C332C}
html.dark .signpill:not(#nb50){background:#F3F5F1;border-color:#F3F5F1;color:#101310}

/* Deco invite page and Pulse: the name beside the mark, and their pills in the body face */
.top .brand span:not(#nb50){font-size:17px;line-height:1.08}
:is(.pulselink,.decopill):not(#nb50){font-family:var(--body);font-weight:600}

/* the builder (apps/block) has its own stylesheet in this look since nb-54 (app.css); only the mark above reaches it */