/* ==========================================================================
   PROSPERITY SCHOOL — Dashboards catalog

   Every operating dashboard, one card each. Chrome is the house shader:
   same tokens, same swirl.js, same adaptive mark as HQ and the careers site.
   The mark inverts against the shader — that is standard across pages, so
   swirl.js and the [data-psc-adaptive] / [data-psc-mirror] pair below are
   copied verbatim from builds/infrastructure/hq/web.
   Source: company-context/reference/dashboard-theme.md
   ========================================================================== */

:root{
  --psc-bg:#0B0D0D;
  --psc-accent:#7DDFD4;      /* mint    — links, focus */
  --psc-accent-2:#00A896;    /* seafoam — fills, gradients */

  --psc-text:#ffffff;
  --psc-text-2:#dde1e0;
  --psc-muted:rgba(221,225,224,.66);
  --psc-dim:rgba(221,225,224,.44);
  --psc-line:rgba(255,255,255,.11);
  --psc-line-soft:rgba(255,255,255,.06);

  --psc-ease:cubic-bezier(.22,1,.36,1);
  --psc-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,
             "Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0; position:relative; min-height:100vh;
  display:flex; flex-direction:column;
  font-family:var(--psc-sans);
  color:var(--psc-text-2);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
  overflow-x:hidden;
  /* static fallback — visible if WebGL is unavailable or blocked */
  background:
    radial-gradient(1100px 620px at 76% 8%,rgba(0,168,150,.16),transparent 62%),
    radial-gradient(900px 520px at 8% 82%,rgba(125,223,212,.08),transparent 58%),
    var(--psc-bg);
  background-attachment:fixed;
}
p,h1,h2,h3{margin:0}

/* ---------- shader canvas ------------------------------------------------ */
#psc-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
  opacity:0;                       /* swirl.js reveals it once it compiles */
  transition:opacity 1.1s var(--psc-ease);
}
.psc-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.psc-bar,.psc-main{position:relative; z-index:2}

/* ---------- brand mark --------------------------------------------------- */
/* Two stacked layers cut to the emblem silhouette: a static green gradient,
   and above it a canvas that swirl.js paints each frame with the shader
   showing through, tone-inverted into brand colour. The canvas starts
   transparent and fades in only once the shader compiles, so no WebGL simply
   leaves the gradient showing. No wordmark — the mark is the whole header. */
.psc-bar{
  margin-top:auto;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(30px,5vw,54px) clamp(16px,4vw,40px) 0;
}
.psc-mark{position:relative; display:block; width:clamp(64px,8vw,86px); aspect-ratio:1}
.psc-mark-fill{
  position:absolute; inset:0;
  background:linear-gradient(150deg,var(--psc-accent) 0%,var(--psc-accent-2) 62%,
             #0f8f80 100%);
  -webkit-mask:url(/logo-emblem.png) no-repeat center / contain;
          mask:url(/logo-emblem.png) no-repeat center / contain;
  filter:drop-shadow(0 8px 26px rgba(0,168,150,.28));
}
.psc-mark-mirror{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .9s var(--psc-ease);
  -webkit-mask:url(/logo-emblem.png) no-repeat center / contain;
          mask:url(/logo-emblem.png) no-repeat center / contain;
}

/* ---------- shell -------------------------------------------------------- */
.psc-shell{
  /* width:100% is load-bearing: `margin:0 auto` on a flex item zeroes out
     stretch, so without it the shell shrinks to fit-content and the grid
     collapses to one column. */
  width:100%; max-width:1080px; margin:0 auto; padding:0 clamp(16px,4vw,40px);
}
.psc-main{
  margin-bottom:auto;
  padding-top:clamp(30px,5vw,52px);
  padding-bottom:clamp(30px,5vw,56px);
}

/* ---------- cards -------------------------------------------------------- */
/* Glass, not solid: the shader moves underneath, so an opaque slot would read
   as a hole punched in the page. Translucent fill + backdrop blur keeps the
   card legible while the gradient still travels behind it. */
.psc-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(292px,1fr))}

.psc-card{
  position:relative; display:flex; flex-direction:column; gap:9px;
  padding:22px 22px 20px; overflow:hidden;
  text-decoration:none; color:inherit;
  border:1px solid var(--psc-line); border-radius:16px;
  background:linear-gradient(180deg,rgba(16,22,21,.62),rgba(9,12,12,.76));
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 18px 50px rgba(0,0,0,.30);
  transition:border-color .2s,transform .2s var(--psc-ease),box-shadow .2s,background .2s;
}
.psc-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 200px at 50% -40%,rgba(0,168,150,.18),transparent 70%);
  opacity:0; transition:opacity .22s;
}
.psc-card:hover{
  border-color:rgba(0,168,150,.55); transform:translateY(-3px);
  background:linear-gradient(180deg,rgba(21,30,29,.70),rgba(11,16,15,.82));
  box-shadow:0 22px 56px rgba(0,0,0,.42),0 0 0 3px rgba(0,168,150,.08);
}
.psc-card:hover::before{opacity:1}
.psc-card:focus-visible{outline:none; border-color:var(--psc-accent-2);
  box-shadow:0 0 0 3px rgba(0,168,150,.22)}

.psc-slug{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px;
  font-weight:600; letter-spacing:0; color:var(--psc-accent-2)}
.psc-name{font-size:17px; font-weight:700; letter-spacing:-.025em; color:var(--psc-text)}
.psc-desc{font-size:13px; line-height:1.5; color:var(--psc-muted); flex:1}
.psc-dept{
  align-self:flex-start; margin-top:5px;
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--psc-accent); background:rgba(0,168,150,.11);
  border:1px solid rgba(0,168,150,.22); border-radius:999px; padding:4px 10px;
}

/* ---------- focus + motion ----------------------------------------------- */
a:focus-visible{outline:2px solid var(--psc-accent); outline-offset:3px; border-radius:4px}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}