/* GoonLab design tokens (OVERNIGHT-PLAN.md 2.1). Dark is the only theme.
   Every variable is prefixed --gl-. New pages and the Staff Console link this file and use the variables and the .gl-* classes below;
   the older pages keep their own names (--bg, --panel, --brand ...) which app.css maps onto these. */

/* Fonts: self-hosted, SIL Open Font License 1.1 (licence files sit beside them). Latin subset, about 67 KB in all. */
@font-face{font-family:"Inter";src:url(/assets/fonts/Inter-var.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/InstrumentSerif-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/InstrumentSerif-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  color-scheme:dark;
  /* colour: ink, surfaces, hairlines, text */
  --gl-bg:#07060b;
  --gl-surface:#0f0d16;
  --gl-surface-2:#171322;
  --gl-surface-3:#201a30;
  --gl-line:rgba(255,255,255,.085);
  --gl-line-2:rgba(255,255,255,.17);
  --gl-text:#f5f2fb;
  --gl-text-2:#cdc7dc;
  --gl-muted:#a39cb7;
  --gl-dim:#8f88a5;
  /* colour: the brand is ultraviolet, with a cool cyan only inside the spectrum; red is for LIVE and nothing else */
  --gl-accent:#9d7bff;
  --gl-accent-hi:#bba4ff;
  --gl-accent-lo:#6b4ae0;
  --gl-accent-ink:#0b0618;
  --gl-cyan:#5ee1ff;
  --gl-signal:#ff4d6d;
  --gl-ok:#5fe3a1;
  --gl-warn:#ffc15e;
  --gl-danger:#ff7d8d;
  --gl-spectrum:linear-gradient(115deg,#9d7bff 0%,#6f8bff 45%,#5ee1ff 100%);
  --gl-scrim:linear-gradient(180deg,rgba(7,6,11,0) 0%,rgba(7,6,11,.55) 55%,#07060b 100%);
  /* type */
  --gl-font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gl-font-display:"Instrument Serif","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --gl-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gl-fs-xs:.75rem;--gl-fs-sm:.875rem;--gl-fs-md:1rem;--gl-fs-lg:1.125rem;--gl-fs-xl:1.375rem;--gl-fs-2xl:1.75rem;
  --gl-fs-3xl:clamp(2rem,4.6vw,3.1rem);--gl-fs-hero:clamp(2.9rem,10vw,7rem);
  --gl-track-caps:.14em;
  /* space (4 px steps), radius, layout */
  --gl-1:4px;--gl-2:8px;--gl-3:12px;--gl-4:16px;--gl-5:24px;--gl-6:32px;--gl-7:48px;--gl-8:72px;--gl-9:112px;
  --gl-r-sm:8px;--gl-r:14px;--gl-r-lg:22px;--gl-r-pill:999px;
  --gl-max:1320px;--gl-gutter:clamp(16px,4vw,44px);--gl-bar-h:60px;
  /* depth */
  --gl-shadow:0 14px 44px -14px rgba(0,0,0,.75);
  --gl-glow:0 0 0 1px rgba(157,123,255,.4),0 10px 44px -10px rgba(157,123,255,.6);
  /* motion */
  --gl-ease:cubic-bezier(.2,.8,.2,1);--gl-dur-1:.15s;--gl-dur-2:.3s;--gl-dur-3:.7s;
}

/* a keyboard's way past the top bar */
.gl-skip{position:absolute;left:var(--gl-3);top:-60px;z-index:2000;padding:12px 18px;border-radius:var(--gl-r-pill);background:var(--gl-text);color:var(--gl-bg);font:600 var(--gl-fs-sm)/1 var(--gl-font-ui);text-decoration:none;transition:top .15s}
.gl-skip:focus{top:var(--gl-3);outline:2px solid var(--gl-accent-hi);outline-offset:2px}
#app:focus{outline:none}

/* the page itself */
html{background:var(--gl-bg);color:var(--gl-text);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--gl-bg);color:var(--gl-text);font:400 var(--gl-fs-md)/1.55 var(--gl-font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:rgba(157,123,255,.45);color:#fff}
:focus-visible{outline:2px solid var(--gl-accent-hi);outline-offset:2px;border-radius:4px}
.gl-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* type */
.gl-display{font-family:var(--gl-font-display);font-weight:400;letter-spacing:-.01em;line-height:1.02}
.gl-display em{font-style:italic;color:var(--gl-accent-hi)}
.gl-eyebrow{font-size:var(--gl-fs-xs);font-weight:600;letter-spacing:var(--gl-track-caps);text-transform:uppercase;color:var(--gl-muted)}

/* buttons: primary is the one loud thing on a screen */
.gl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--gl-2);min-height:44px;padding:0 var(--gl-5);border-radius:var(--gl-r-pill);border:1px solid var(--gl-line-2);background:rgba(255,255,255,.04);color:var(--gl-text);font:600 var(--gl-fs-sm)/1 var(--gl-font-ui);letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--gl-dur-1),border-color var(--gl-dur-1),transform var(--gl-dur-1),box-shadow var(--gl-dur-2)}
.gl-btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.32)}
.gl-btn:active{transform:translateY(1px)}
.gl-btn--primary{background:var(--gl-accent);border-color:var(--gl-accent);color:var(--gl-accent-ink)}
.gl-btn--primary:hover{background:var(--gl-accent-hi);border-color:var(--gl-accent-hi);box-shadow:var(--gl-glow)}
.gl-btn--ghost{background:transparent}
.gl-btn--lg{min-height:54px;padding:0 var(--gl-6);font-size:var(--gl-fs-md)}
.gl-btn[disabled]{opacity:.45;cursor:not-allowed}

/* chips, inputs, cards, the live pill */
.gl-chip{display:inline-flex;align-items:center;gap:var(--gl-2);min-height:38px;padding:0 var(--gl-4);border-radius:var(--gl-r-pill);border:1px solid var(--gl-line);background:rgba(255,255,255,.035);color:var(--gl-text-2);font:500 var(--gl-fs-sm)/1 var(--gl-font-ui);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--gl-dur-1),border-color var(--gl-dur-1),color var(--gl-dur-1)}
.gl-chip:hover{border-color:var(--gl-line-2);color:var(--gl-text)}
.gl-chip[aria-pressed="true"],.gl-chip[aria-current="page"]{background:var(--gl-text);border-color:var(--gl-text);color:var(--gl-bg)}
.gl-input{width:100%;min-height:48px;padding:0 var(--gl-4);border-radius:var(--gl-r-sm);border:1px solid var(--gl-line-2);background:rgba(255,255,255,.04);color:var(--gl-text);font:inherit}
.gl-input:focus{outline:2px solid var(--gl-accent);outline-offset:1px;border-color:transparent}
.gl-card{background:var(--gl-surface);border:1px solid var(--gl-line);border-radius:var(--gl-r);overflow:hidden}
.gl-live{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:var(--gl-r-pill);background:rgba(255,77,109,.16);border:1px solid rgba(255,77,109,.5);color:#ffd9e0;font:700 var(--gl-fs-xs)/1 var(--gl-font-ui);letter-spacing:var(--gl-track-caps);text-transform:uppercase}
.gl-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gl-signal);box-shadow:0 0 0 0 rgba(255,77,109,.7);animation:gl-pulse 2s ease-out infinite}
@keyframes gl-pulse{0%{box-shadow:0 0 0 0 rgba(255,77,109,.65)}70%,100%{box-shadow:0 0 0 7px rgba(255,77,109,0)}}

/* the moving backgrounds (CSS only, transform and opacity, so they cost the GPU almost nothing) */
.gl-aurora{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 120%,#1a0f3a 0%,#0a0814 55%,#07060b 100%)}
.gl-aurora::before,.gl-aurora::after{content:"";position:absolute;left:50%;top:50%;width:140vmax;height:140vmax;margin:-70vmax 0 0 -70vmax;background:conic-gradient(from 0deg,rgba(157,123,255,0) 0deg,rgba(157,123,255,.35) 70deg,rgba(94,225,255,.18) 120deg,rgba(157,123,255,0) 200deg,rgba(255,92,200,.16) 280deg,rgba(157,123,255,0) 360deg);filter:blur(40px);animation:gl-spin 70s linear infinite;will-change:transform}
.gl-aurora::after{animation-duration:110s;animation-direction:reverse;opacity:.6;transform:scale(.8)}
@keyframes gl-spin{to{transform:rotate(360deg)}}
.gl-spiralart{position:absolute;left:50%;top:50%;width:var(--gl-spiral-size,min(130vmax,1500px));aspect-ratio:1;margin:calc(var(--gl-spiral-size,min(130vmax,1500px))/-2) 0 0 calc(var(--gl-spiral-size,min(130vmax,1500px))/-2);pointer-events:none;color:var(--gl-accent);animation:gl-spin var(--gl-spiral-speed,90s) linear infinite;will-change:transform}
.gl-spiralart svg{display:block;width:100%;height:100%}

/* the other generated looks: soft blooms, rings (a tunnel that breathes) and rays; each takes --c1 and --c2 from its card */
.gl-art{position:absolute;inset:-20%;pointer-events:none}
.gl-art--bloom{background:radial-gradient(50% 50% at 30% 40%,var(--c1),transparent 70%),radial-gradient(45% 45% at 75% 65%,var(--c2),transparent 70%);filter:blur(12px);animation:gl-drift var(--gl-art-speed,60s) ease-in-out infinite alternate}
.gl-art--rings{background:repeating-radial-gradient(circle at 50% 58%,transparent 0 10px,color-mix(in srgb,var(--c1) 90%,transparent) 10px 13px);-webkit-mask-image:radial-gradient(circle at 50% 58%,#000 4%,transparent 68%);mask-image:radial-gradient(circle at 50% 58%,#000 4%,transparent 68%);animation:gl-breathe var(--gl-art-speed,60s) ease-in-out infinite alternate}
.gl-art--rays{background:repeating-conic-gradient(from 0deg at 50% 60%,color-mix(in srgb,var(--c2) 70%,transparent) 0 4deg,transparent 4deg 14deg);-webkit-mask-image:radial-gradient(circle at 50% 60%,transparent 2%,#000 22%,transparent 72%);mask-image:radial-gradient(circle at 50% 60%,transparent 2%,#000 22%,transparent 72%);animation:gl-spin var(--gl-art-speed,90s) linear infinite}
@keyframes gl-drift{from{transform:translate(-5%,-4%) scale(1)}to{transform:translate(6%,5%) scale(1.2)}}
@keyframes gl-breathe{from{transform:scale(1)}to{transform:scale(1.25)}}

/* a person who asks for less motion gets stillness: nothing moves on its own */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .gl-aurora::before,.gl-aurora::after,.gl-spiralart,.gl-art{animation:none!important}
}