/* JuiceJr v2 — "editor" theme override. Loaded after the Next.js CSS.
   Flat dark editor palette, TypeScript blue accent, mono headings, Geist body. */

@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/assets/fonts/geist-latin-wght-normal.woff2) format("woff2-variations"),url(/assets/fonts/geist-latin-wght-normal.woff2) format("woff2");
  unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/assets/fonts/geist-latin-ext-wght-normal.woff2) format("woff2-variations"),url(/assets/fonts/geist-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}

:root{
  --jj-bg:#0d1117; --jj-bg-2:#010409; --jj-panel:#161b22; --jj-panel-2:#1c2128;
  --jj-line:#30363d; --jj-line-soft:#21262d;
  --jj-fg:#e6edf3; --jj-muted:#8b949e; --jj-dim:#6e7681;
  --jj-accent:#3178c6; --jj-accent-fg:#79b8ff;
  --jj-kw:#569cd6; --jj-type:#4ec9b0; --jj-str:#ce9178; --jj-num:#b5cea8; --jj-fn:#dcdcaa;
  --jj-prop:#9cdcfe; --jj-com:#6a9955; --jj-ctl:#c586c0;
  --jj-ok:#3fb950; --jj-warn:#d29922; --jj-err:#f85149;
  --jj-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --jj-sans:"Geist","Figtree Variable",system-ui,-apple-system,"Segoe UI",sans-serif;
  --jj-r:6px;
}
::selection{background:color-mix(in srgb,var(--jj-accent) 45%,transparent);color:#fff}

/* ── base ─────────────────────────────────────────────────────────────── */
html,:host{font-family:var(--jj-sans)}
body{background:var(--jj-bg)!important;color:var(--jj-fg)!important;font-family:var(--jj-sans)!important;
  font-size:1rem;letter-spacing:-.003em;
  background-image:linear-gradient(var(--jj-line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--jj-line-soft) 1px,transparent 1px)!important;
  background-size:48px 48px!important;background-position:-1px -1px!important;background-attachment:fixed!important}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 50% 0%,transparent 0%,var(--jj-bg) 70%)}
.font-sans{font-family:var(--jj-sans)!important}

/* headings + UI chrome in mono */
h1,h2,h3,h4,.font-display{font-family:var(--jj-mono)!important;letter-spacing:-.03em!important;font-weight:600!important}
h1{letter-spacing:-.045em!important;line-height:1.02!important}
h3{letter-spacing:-.015em!important}
.btn,nav a,header a,.kbd,kbd,[role=tab],dt,.tabular-nums,footer h2{font-family:var(--jj-mono)!important}
nav a,header nav a{font-size:.85rem!important}
footer h2,footer h2.font-sans{font-family:var(--jj-mono)!important;font-size:.78rem!important;text-transform:lowercase;color:var(--jj-muted)!important;font-weight:400!important}
footer h2::before{content:"// ";color:var(--jj-com)}

/* hero headline: smaller (mono is wide), no blur-in */
main h1.text-\[3\.1rem\]{font-size:2.6rem!important}
@media (min-width:640px){main h1.text-\[3\.1rem\]{font-size:3.6rem!important}}
@media (min-width:1024px){main h1.text-\[3\.1rem\]{font-size:4.1rem!important}}
main h1 span[style*="blur"]{filter:none!important}
main h1.text-\[3\.1rem\]::after{content:"_";color:var(--jj-accent-fg);font-weight:400;animation:jjBlink 1.1s steps(1) infinite;margin-left:-.1em}
@keyframes jjBlink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){main h1.text-\[3\.1rem\]::after{animation:none}}
main h1.text-5xl{font-size:2.4rem!important}
@media (min-width:640px){main h1.text-5xl{font-size:3.2rem!important}}
@media (min-width:768px){main h1.text-5xl{font-size:3.6rem!important}}

/* section headings get a // comment label above them */
main section h2.text-4xl{font-size:1.9rem!important}
@media (min-width:640px){main section h2.text-4xl{font-size:2.35rem!important}}
main section h2[id]::before{
  content:"//";display:block;margin-bottom:.6rem;font-size:.8rem;font-weight:400;letter-spacing:0;color:var(--jj-com)}
main section h2#menu-title::before{content:"// features.ts"}
main section h2#shelf-title::before{content:"// sections.ts"}
main section h2#steps-title::before{content:"// quickstart.ts"}
main section h2#diff-h::before{content:"// why-juicejr.md"}
main section h2#proj-h::before{content:"// project.md"}
main section h2#perm-h::before{content:"// permissions.ts"}
main section h2#guides-h::before{content:"// guides/"}
main section h2#faq-h::before{content:"// faq.md"}
main section h2#start-h::before{content:"// getting-started.md"}
main section h2#spot-h::before{content:"// highlights.ts"}
main section h2#moderation-h::before{content:"// sections/moderation.ts"}
main section h2#security-h::before{content:"// sections/security.ts"}
main section h2#setup-h::before{content:"// sections/setup.ts"}
main section h2#music-h::before{content:"// sections/music.ts"}
main section h2#levels-h::before{content:"// sections/levels.ts"}
main section h2#community-h::before{content:"// sections/community.ts"}
main section h2#utility-h::before{content:"// sections/utility.ts"}
main .prose-legal h2[id]::before{content:"## ";display:inline;margin:0;font-size:inherit;color:var(--jj-dim)}
main h3{font-size:1.05rem!important}

.lede{color:var(--jj-muted)!important;font-size:1.06rem!important;line-height:1.65!important}

/* ── colour tokens (Tailwind theme colours from the build) ───────────── */
.text-ice{color:var(--jj-fg)!important}
.text-ice\/80{color:color-mix(in srgb,var(--jj-fg) 80%,transparent)!important}
.text-mist{color:var(--jj-muted)!important}
.text-mist\/60{color:var(--jj-dim)!important}
.text-raspberry,.text-raspberry\/80{color:var(--jj-accent-fg)!important}
.hover\:text-raspberry:hover{color:var(--jj-accent-fg)!important}
.hover\:text-ice:hover{color:var(--jj-fg)!important}
.text-night{color:#0d1117!important}
.bg-night\/80,.bg-night\/95{background-color:color-mix(in srgb,var(--jj-bg) 94%,transparent)!important}
.bg-deep{background-color:var(--jj-panel)!important}
.bg-raspberry\/10{background-color:color-mix(in srgb,var(--jj-accent) 14%,transparent)!important}
.bg-white\/\[0\.02\],.bg-white\/\[0\.04\],.bg-white\/\[0\.05\]{background-color:var(--jj-panel)!important}
.bg-white\/\[0\.06\],.bg-white\/\[0\.07\]{background-color:var(--jj-panel-2)!important}
.ring-1,.ring-2{--tw-ring-color:var(--jj-line)!important}
.focus\:ring-2:focus{--tw-ring-color:var(--jj-accent)!important}
.border-white\/\[0\.05\],.border-white\/\[0\.06\],.border-white\/\[0\.07\],.border-white\/\[0\.08\]{border-color:var(--jj-line-soft)!important}

/* ── no glows, blobs, grain, aurora ──────────────────────────────────── */
.aurora,.grain,.blur-2xl,.blur-3xl{display:none!important}
.backdrop-blur-xl{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
[class*="drop-shadow-"]{filter:none!important}
.spotlight::before{display:none!important}
[class*="shadow-\["]{box-shadow:none!important}
span[style*="box-shadow"]{box-shadow:none!important}
[class*="mask-image"]{-webkit-mask-image:none!important;mask-image:none!important}

/* ── radii: small and square-ish ─────────────────────────────────────── */
.rounded-full,.rounded-2xl,.rounded-3xl,.rounded-\[2rem\],.rounded-\[2\.5rem\],.rounded-lg{border-radius:var(--jj-r)!important}
.rounded-md{border-radius:4px!important}
.rounded-b-full{border-radius:0 0 2px 2px!important}
/* status / category dots stay round */
.rounded-full.h-2,.rounded-full.h-2\.5,.rounded-full.h-3,.rounded-full.h-5{border-radius:50%!important}

/* ── panels ──────────────────────────────────────────────────────────── */
.glass-panel{background:var(--jj-panel)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-radius:var(--jj-r)!important;box-shadow:inset 0 0 0 1px var(--jj-line)!important}
article.glass-panel:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--flavor,var(--jj-accent)) 55%,var(--jj-line))!important}
/* the big gradient CTA */
section div[style*="radial-gradient"]{background:var(--jj-panel)!important;box-shadow:inset 0 0 0 1px var(--jj-line);
  border-top:2px solid var(--jj-accent)}
section div[style*="radial-gradient"] h2::before{content:"$ juicejr invite --free";display:block;margin-bottom:1rem;
  font-size:.85rem;font-weight:400;letter-spacing:0;color:var(--jj-com)}

/* header: flat bar when scrolled */
header > div{border-radius:var(--jj-r)!important}
header .glass-panel{background:color-mix(in srgb,var(--jj-bg) 92%,transparent)!important}
header nav a .absolute{background:var(--jj-panel-2)!important;box-shadow:inset 0 -2px 0 var(--jj-accent),inset 0 0 0 1px var(--jj-line)!important}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{border-radius:var(--jj-r)!important;font-weight:500!important;font-size:.88rem!important;letter-spacing:-.01em;will-change:auto}
.btn-primary{background:var(--jj-accent)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important}
.btn-primary:hover{background:color-mix(in srgb,var(--jj-accent) 85%,#fff)!important;transform:none!important}
.btn-ghost{background:transparent!important;box-shadow:inset 0 0 0 1px var(--jj-line)!important;color:var(--jj-fg)!important}
.btn-ghost:hover{background:var(--jj-panel)!important;box-shadow:inset 0 0 0 1px var(--jj-muted)!important}

/* ── code bits ───────────────────────────────────────────────────────── */
.kbd{background:var(--jj-bg-2)!important;color:var(--jj-prop)!important;border-radius:4px!important;
  box-shadow:inset 0 0 0 1px var(--jj-line)!important;font-size:.78em!important}
.kbd:hover{color:var(--jj-fn)!important}
input[type=search],input[type=text]{font-family:var(--jj-mono)!important;font-size:1rem!important;background:var(--jj-bg-2)!important}
.prose-legal h2{font-size:1.25rem!important}
.prose-legal h2::before{content:"## ";color:var(--jj-dim)}

/* home "verified" pill → comment-ish chip */
main section p.inline-flex.text-sm{font-family:var(--jj-mono);font-size:.78rem!important;color:var(--jj-com)!important}

/* step numbers look like line numbers */
li.glass-panel > span.font-display{font-size:1rem!important;color:var(--jj-dim)!important;font-weight:400!important}
li.glass-panel > span.font-display::before{content:"step "}
li.glass-panel > span.font-display::after{content:":";}

/* stats panel numbers */
dd.font-display{color:var(--jj-num)}
dt{font-size:.78rem!important;text-transform:lowercase}

/* ── live API panel (live.js) ────────────────────────────────────────── */
.jj-live{margin-top:2.5rem}
.jj-live[hidden]{display:none!important}
.jj-live__label{font-family:var(--jj-mono);font-size:.8rem;color:var(--jj-com);margin:0 0 .75rem}
.jj-live__label b{color:var(--jj-kw);font-weight:400}
.jj-live__label i{color:var(--jj-type);font-style:normal}
.jj-ed{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);background:var(--jj-bg-2);border:1px solid var(--jj-line);
  border-radius:var(--jj-r);overflow:hidden;font-family:var(--jj-mono);font-size:.8rem;line-height:1.65;color:var(--jj-fg)}
@media (max-width:860px){.jj-ed{grid-template-columns:minmax(0,1fr)}}
.jj-ed__tabs{grid-column:1/-1;display:flex;align-items:stretch;background:var(--jj-panel);border-bottom:1px solid var(--jj-line);min-width:0}
.jj-ed__tab{display:flex;align-items:center;gap:.5rem;padding:.55rem .95rem;border-right:1px solid var(--jj-line);color:var(--jj-muted);white-space:nowrap}
.jj-ed__tab--on{background:var(--jj-bg-2);color:var(--jj-fg);box-shadow:inset 0 2px 0 var(--jj-accent)}
.jj-ed__tab .ts{color:var(--jj-accent-fg);font-weight:600;font-size:.7rem}
.jj-ed__tab .js{color:var(--jj-warn);font-weight:600;font-size:.7rem}
.jj-ed__req{margin-left:auto;display:flex;align-items:center;gap:.6rem;padding:0 .95rem;color:var(--jj-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.jj-ed__req .m{color:var(--jj-ok);font-weight:600}
.jj-ed__req .c200{color:var(--jj-ok)}
@media (max-width:640px){.jj-ed__req .p{display:none}.jj-ed__tab:nth-child(2){display:none}}
.jj-code{margin:0;padding:.85rem 0;overflow:auto;max-height:30rem;counter-reset:ln;min-width:0}
.jj-code .l{display:grid;grid-template-columns:3.2rem minmax(0,1fr);padding-right:1rem}
.jj-code .l::before{counter-increment:ln;content:counter(ln);text-align:right;padding-right:1.1rem;color:var(--jj-dim);user-select:none}
.jj-code .t{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.jj-code .l--flash .t{animation:jjFlash 1.4s ease-out}
@keyframes jjFlash{0%{background:color-mix(in srgb,var(--jj-accent) 30%,transparent)}100%{background:transparent}}
.k{color:var(--jj-kw)}.ty{color:var(--jj-type)}.s{color:var(--jj-str)}.n{color:var(--jj-num)}.f{color:var(--jj-fn)}
.p{color:var(--jj-prop)}.c{color:var(--jj-com)}.ct{color:var(--jj-ctl)}.b{color:var(--jj-kw)}.nl{color:var(--jj-kw)}.pu{color:#d4d4d4}
.jj-side{border-left:1px solid var(--jj-line);background:var(--jj-bg);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:1rem;min-width:0}
@media (max-width:860px){.jj-side{border-left:0;border-top:1px solid var(--jj-line)}}
.jj-side h4{margin:0 0 .4rem;font-size:.72rem!important;font-weight:400!important;color:var(--jj-com);letter-spacing:0!important}
.jj-stat{display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .8rem;border:1px solid var(--jj-line);border-radius:var(--jj-r);background:var(--jj-panel)}
.jj-dot{flex:none;width:.6rem;height:.6rem;margin-top:.42rem;border-radius:50%;background:var(--jj-status,var(--jj-ok))}
.jj-stat strong{display:block;font-weight:600;color:var(--jj-status,var(--jj-ok))}
.jj-stat span{color:var(--jj-muted);overflow-wrap:anywhere}
.jj-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
.jj-kv div{border:1px solid var(--jj-line);border-radius:var(--jj-r);padding:.45rem .55rem;background:var(--jj-panel);min-width:0}
.jj-kv dt{font-size:.66rem!important;color:var(--jj-dim)!important;margin:0}
.jj-kv dd{margin:0;color:var(--jj-num);font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jj-feat{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .7rem;border:1px solid var(--jj-line);border-radius:var(--jj-r);
  background:var(--jj-panel);color:var(--jj-fn);text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jj-feat:hover{border-color:var(--jj-accent);color:#fff}
.jj-feat::after{content:"→";color:var(--jj-dim)}
.jj-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.jj-notes li{display:grid;grid-template-columns:1.4rem minmax(0,1fr);color:var(--jj-fg);overflow-wrap:anywhere}
.jj-notes li::before{content:"-";color:var(--jj-ctl)}
.jj-empty{color:var(--jj-dim)}
.jj-ed__bar{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 1.1rem;align-items:center;padding:.3rem .9rem;background:var(--jj-accent);color:#fff;font-size:.72rem}
.jj-ed__bar span{white-space:nowrap}
.jj-ed__bar .r{margin-left:auto}
.jj-live--stale .jj-ed__bar{background:#6e7681}

/* headline / tagline overrides from the bot (set by live.js as attributes, React text untouched) */
h1[data-jj-headline] > span{display:none!important}
h1[data-jj-headline]::before{content:attr(data-jj-headline)}
p.lede[data-jj-tagline]{font-size:0!important;line-height:0!important}
p.lede[data-jj-tagline]::before{content:attr(data-jj-tagline);font-size:1.06rem;line-height:1.65;display:block}