/* ============================================================
   Wizzrd — "Baby Shiny" theme
   One stylesheet for every page. Link it, use .wz-* classes.

   Intensity is controlled by --holo on :root (or any card):
     .38 = Subtle | .85 = Baby Shiny (default) | 1.35 = Full Foil

   Only elements with .wz-tilt respond to the pointer in 3D.
   That is deliberately the login page alone.
   ============================================================ */

:root{
  /* ink */
  --wz-ink:#3b3550;
  --wz-ink-soft:#7b7392;
  --wz-ink-faint:#b9b4c9;

  /* silver frame */
  --wz-silver-1:#ffffff;
  --wz-silver-2:#eceaf2;
  --wz-silver-3:#d5d3e0;
  --wz-silver-4:#bcb9cc;

  /* accent */
  --wz-accent:#8b5cf6;
  --wz-accent-soft:#a78bfa;
  --wz-accent-deep:#6d28d9;

  /* pastel confetti palette */
  --wz-pink:#ffd7ea;
  --wz-mint:#cdf2e4;
  --wz-sky:#d3e8ff;
  --wz-butter:#ffeaba;
  --wz-lilac:#e4dcff;
  --wz-gold:#f0c419;

  /* semantic */
  --wz-ok:#10b981;
  --wz-warn:#f59e0b;
  --wz-bad:#ef4444;

  --wz-line:#e6e3f0;
  --wz-radius:20px;

  /* foil intensity — the dial writes to this */
  --holo:.85;
  --sparkle:1;
}

*{box-sizing:border-box;}

body.wz-page{
  margin:0;
  min-height:100vh;
  color:var(--wz-ink);
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(1100px 700px at 15% 8%,  #fff6fb 0%, transparent 60%),
    radial-gradient(1000px 700px at 88% 18%, #f2f8ff 0%, transparent 60%),
    radial-gradient(900px 700px at 70% 92%,  #f6fffb 0%, transparent 60%),
    linear-gradient(160deg,#fdfdff 0%,#f6f4fb 55%,#fbf8ff 100%);
  background-attachment:fixed;
}
body.wz-center{display:grid;place-items:center;padding:32px 16px;}

/* ── ambient confetti behind everything ─────────────────────── */
.wz-ambient{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
  /* Much quieter than the boards. A board is meant to be looked at from the
     back of a room; every other page has a teacher reading a roster on it,
     and the stars are there to say the app is alive, not to be noticed. */
  opacity:var(--wz-star-op,.5);
}
/* The little flash where two stars pass through each other. Pure transform
   and opacity, so it costs nothing to run one every few seconds all day. */
.wz-ambient .wzPop{
  position:absolute; left:0; top:0; opacity:0; pointer-events:none;
  border-radius:50%;
  /* closest-side and a zero-alpha stop of the SAME colour. A `transparent`
     stop interpolates through transparent black, which dims the falloff to
     grey and leaves a visible rim on what is meant to be a soft flash. */
  background:radial-gradient(closest-side, rgba(255,255,255,.95) 0%,
             rgba(226,205,255,.5) 40%, rgba(214,188,255,0) 86%);
}
.wz-ambient .wzPop.on{ animation:wz-pop .62s ease-out 1 }
@keyframes wz-pop{
  0%  { opacity:0;   transform:scale(.35) }
  22% { opacity:.95 }
  100%{ opacity:0;   transform:scale(1.9) }
}
@media (prefers-reduced-motion:reduce){ .wz-ambient .wzPop{ display:none } }

.wz-ambient svg{
  position:absolute; left:0; top:0;
  opacity:calc(.34 * var(--sparkle));
  /* No will-change. It asks for a compositor layer per element and there can
     be well over a hundred of them; on integrated graphics that is worse than
     the repaint it was meant to avoid. */
  /* No CSS animation. It used to be a keyframe that slid 38px and started
     over, which is exactly what "they seem to be on a loop" means — every
     star repeating the same short move forever. They are driven by script
     now, one velocity each, bouncing off the edges of the window. */
}

/* ── the foil card ──────────────────────────────────────────── */
.wz-stage{perspective:1300px;z-index:1;position:relative;}

.wz-card{
  position:relative;
  border-radius:calc(var(--wz-radius) + 4px);
  padding:5px;                         /* silver frame thickness */
  background:linear-gradient(135deg,
    var(--wz-silver-1) 0%,  var(--wz-silver-3) 14%, var(--wz-silver-1) 27%,
    var(--wz-silver-4) 40%, var(--wz-silver-1) 53%, var(--wz-silver-2) 66%,
    var(--wz-silver-4) 79%, var(--wz-silver-1) 92%, var(--wz-silver-3) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 46px -18px rgba(80,60,130,.42),
    0 3px 10px rgba(80,60,130,.10);
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}

/* iridescent film on the frame */
.wz-card::before{
  content:"";position:absolute;inset:0;
  border-radius:calc(var(--wz-radius) + 4px);
  background:linear-gradient(115deg,
    transparent 12%, var(--wz-pink) 24%, var(--wz-butter) 34%,
    var(--wz-mint) 44%, var(--wz-sky) 55%, var(--wz-lilac) 66%,
    var(--wz-pink) 76%, transparent 88%);
  background-size:260% 260%;
  mix-blend-mode:soft-light;
  opacity:var(--holo);
  animation:wz-shift 7s ease-in-out infinite alternate;
  pointer-events:none;z-index:1;
}
@keyframes wz-shift{
  0%  {background-position:0% 50%;}
  100%{background-position:100% 50%;}
}

/* white art box */
.wz-card__inner{
  position:relative;z-index:2;
  border-radius:var(--wz-radius);
  background:linear-gradient(170deg,#ffffff 0%,#fdfcff 58%,#f8f6fd 100%);
  overflow:hidden;
}

/* foil wash across the art box — scales with the dial so intensity is visible */
.wz-card__inner::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(118deg,
    transparent 8%, var(--wz-pink) 22%, var(--wz-butter) 33%,
    var(--wz-mint) 45%, var(--wz-sky) 57%, var(--wz-lilac) 70%,
    var(--wz-pink) 82%, transparent 94%);
  background-size:280% 280%;
  mix-blend-mode:multiply;
  opacity:calc(var(--holo) * .16);
  animation:wz-shift 9s ease-in-out infinite alternate;
  pointer-events:none;
}

/* pointer sheen — only meaningful on tilting cards, harmless elsewhere */
.wz-card::after{
  content:"";position:absolute;inset:0;z-index:3;
  border-radius:calc(var(--wz-radius) + 4px);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,.85) 0%, rgba(255,255,255,.28) 32%, transparent 62%);
  mix-blend-mode:overlay;opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.wz-tilt:hover::after{opacity:1;}

/* ── sparkle field ──────────────────────────────────────────── */
.wz-sparkles{position:absolute;inset:0;pointer-events:none;z-index:2;}
.wz-sparkles svg{position:absolute;animation:wz-twinkle ease-in-out infinite;}
@keyframes wz-twinkle{
  0%,100%{opacity:calc(.25 * var(--sparkle));transform:scale(.86) rotate(0deg);}
  50%    {opacity:var(--sparkle);transform:scale(1.1) rotate(10deg);}
}

.wz-body{position:relative;z-index:3;padding:38px 30px 32px;}

/* ── type ───────────────────────────────────────────────────── */
.wz-title{
  margin:0 0 4px;text-align:center;
  font-size:2.1rem;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--wz-accent-deep),#a855f7 42%,#7c3aed 70%,var(--wz-accent-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.wz-sub{
  margin:0 0 26px;text-align:center;
  font-size:.83rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--wz-ink-soft);
}
.wz-label{
  display:block;margin:0 0 6px 3px;
  font-size:.76rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--wz-ink-soft);
}

/* ── controls ───────────────────────────────────────────────── */
.wz-input{
  width:100%;padding:13px 15px;margin-bottom:17px;
  font:inherit;font-size:1rem;color:var(--wz-ink);
  background:#fff;border:1.5px solid var(--wz-line);border-radius:13px;
  transition:border-color .2s, box-shadow .2s;
}
.wz-input::placeholder{color:var(--wz-ink-faint);font-weight:400;}
.wz-input:focus{outline:none;border-color:#c4b5fd;box-shadow:0 0 0 4px rgba(167,139,250,.16);}

.wz-btn{
  width:100%;padding:14px;font:inherit;font-size:1.02rem;font-weight:800;
  color:#fff;cursor:pointer;border:none;border-radius:13px;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--wz-accent-soft) 0%,var(--wz-accent) 48%,var(--wz-accent-deep) 100%);
  box-shadow:0 7px 18px -6px rgba(109,40,217,.6), 0 1px 0 rgba(255,255,255,.35) inset;
  transition:transform .16s ease, box-shadow .16s ease;
}
.wz-btn:hover{transform:translateY(-1px);box-shadow:0 11px 24px -8px rgba(109,40,217,.68);}
.wz-btn:active{transform:translateY(1px);}
.wz-btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-100%);
}
.wz-btn:hover::after{animation:wz-wipe .85s ease;}
@keyframes wz-wipe{to{transform:translateX(100%);}}

.wz-links{margin-top:20px;text-align:center;display:grid;gap:8px;}
.wz-links a{
  justify-self:center;padding-bottom:1px;
  font-size:.87rem;font-weight:700;color:var(--wz-accent-deep);text-decoration:none;
  border-bottom:1.5px solid rgba(139,92,246,.3);
  transition:border-color .2s,color .2s;
}
.wz-links a:hover{color:#5b21b6;border-color:var(--wz-accent-soft);}

.wz-rarity{
  position:absolute;right:16px;bottom:11px;z-index:4;
  font-size:.63rem;font-weight:700;letter-spacing:.13em;color:#c3bed4;
}

/* ── app surfaces: panels, tables, navbar ───────────────────────
   Interior content areas stay calm and white. Foil lives on the
   frame and header; data must never sit on top of a holo wash. */

.wz-panel{
  position:relative;border-radius:16px;padding:3px;
  background:linear-gradient(135deg,
    var(--wz-silver-1) 0%, var(--wz-silver-3) 22%, var(--wz-silver-1) 44%,
    var(--wz-silver-4) 66%, var(--wz-silver-1) 88%, var(--wz-silver-3) 100%);
  box-shadow:0 10px 26px -14px rgba(80,60,130,.34), 0 1px 0 rgba(255,255,255,.9) inset;
  margin-bottom:20px;
}
.wz-panel__inner{background:#fff;border-radius:13px;overflow:hidden;}
.wz-panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--wz-line);
  background:linear-gradient(100deg,#fdfbff,#f7f3ff 55%,#fbf8ff);
  font-weight:800;font-size:.95rem;letter-spacing:.01em;color:var(--wz-accent-deep);
}
.wz-panel__body{padding:18px;}

.wz-table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;}
.wz-table th{
  text-align:left;padding:10px 14px;
  font-size:.71rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--wz-ink-soft);background:#fbfaff;border-bottom:1px solid var(--wz-line);
  position:sticky;top:0;z-index:1;
}
.wz-table td{padding:11px 14px;border-bottom:1px solid #f2f0f8;}
.wz-table tr:last-child td{border-bottom:none;}
.wz-table tbody tr:hover{background:#fcfaff;}

.wz-pill{
  display:inline-block;padding:3px 11px;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.03em;
}
.wz-pill--ok  {background:#dcfce7;color:#047857;}
.wz-pill--warn{background:#fef3c7;color:#b45309;}
.wz-pill--bad {background:#fee2e2;color:#b91c1c;}

.wz-navbar{
  position:relative;z-index:4;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 18px;margin-bottom:22px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--wz-line);
  box-shadow:0 4px 18px -12px rgba(80,60,130,.4);
}
.wz-navbar a{
  padding:7px 14px;border-radius:999px;text-decoration:none;
  font-size:.87rem;font-weight:700;color:var(--wz-ink-soft);
  transition:background .18s,color .18s;
}
.wz-navbar a:hover{background:#f3efff;color:var(--wz-accent-deep);}
.wz-navbar a.active{
  background:linear-gradient(135deg,var(--wz-accent-soft),var(--wz-accent));color:#fff;
}
.wz-navbar__brand{
  font-weight:800;font-size:1.15rem;margin-right:10px;
  background:linear-gradient(100deg,var(--wz-accent-deep),#a855f7);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.wz-shell{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 18px 40px;}

/* ── compatibility ──────────────────────────────────────────────
   navbar.js toggles the Tailwind `hidden` class to open and close
   the menu and the PIN modal. Defining it here means a page can
   drop the Tailwind CDN without the menu jamming open.
   !important so it always beats .modal's display:flex. */
.hidden{display:none !important;}

/* ── hamburger menu ─────────────────────────────────────────── */
.wz-menu{position:fixed;top:16px;left:16px;z-index:9999;}

.wz-menu__btn{
  width:46px;height:46px;font-size:1.4rem;line-height:1;cursor:pointer;
  color:var(--wz-accent-deep);
  background:linear-gradient(150deg,#fff,#f7f4ff);
  border:1.5px solid var(--wz-line);border-radius:14px;
  box-shadow:0 6px 16px -8px rgba(80,60,130,.5), 0 1px 0 rgba(255,255,255,.9) inset;
  transition:transform .16s ease, box-shadow .16s ease;
}
.wz-menu__btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(80,60,130,.55);}
.wz-menu__btn:active{transform:translateY(1px);}

.wz-menu__panel{
  margin-top:10px;width:224px;padding:4px;
  border-radius:18px;
  background:linear-gradient(135deg,
    var(--wz-silver-1) 0%, var(--wz-silver-3) 22%, var(--wz-silver-1) 44%,
    var(--wz-silver-4) 66%, var(--wz-silver-1) 88%, var(--wz-silver-3) 100%);
  box-shadow:0 16px 38px -16px rgba(80,60,130,.5), 0 1px 0 rgba(255,255,255,.9) inset;
}
.wz-menu__list{background:#fff;border-radius:15px;overflow:hidden;padding:5px;}
.wz-menu__list button{
  display:block;width:100%;text-align:left;
  padding:10px 13px;margin:1px 0;
  font:inherit;font-size:.9rem;font-weight:700;color:var(--wz-ink);
  background:transparent;border:none;border-radius:10px;cursor:pointer;
  transition:background .16s, color .16s;
}
.wz-menu__list button:hover{background:#f4efff;color:var(--wz-accent-deep);}
.wz-menu__list button.danger{color:#b91c1c;}
.wz-menu__list button.danger:hover{background:#fef2f2;}
.wz-menu__sep{height:1px;background:var(--wz-line);margin:5px 8px;}

/* ── modal + PIN pad ────────────────────────────────────────────
   Centralised here so bathroom.html, hallpass.html and
   settings.html can stop each defining their own .modal. */
.modal,.wz-modal{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(59,53,80,.42);backdrop-filter:blur(3px);
}
.wz-modal__card{
  width:min(330px,94vw);padding:4px;border-radius:22px;
  background:linear-gradient(135deg,
    var(--wz-silver-1) 0%, var(--wz-silver-3) 22%, var(--wz-silver-1) 44%,
    var(--wz-silver-4) 66%, var(--wz-silver-1) 88%, var(--wz-silver-3) 100%);
  box-shadow:0 26px 60px -22px rgba(40,25,80,.6);
}
.wz-modal__inner{background:#fff;border-radius:19px;padding:22px;}
.wz-modal__title{
  margin:0 0 16px;text-align:center;font-size:1.15rem;font-weight:800;
  color:var(--wz-accent-deep);
}

.wz-pin{
  border:1.5px solid var(--wz-line);border-radius:13px;
  padding:12px;margin-bottom:16px;text-align:center;
  font-size:1.7rem;letter-spacing:.42em;text-indent:.42em;
  color:var(--wz-accent-deep);background:#faf8ff;
}
.wz-pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px;}
.wz-pinpad button{
  padding:15px 0;font:inherit;font-size:1.3rem;font-weight:800;cursor:pointer;
  color:var(--wz-ink);background:linear-gradient(150deg,#fff,#f8f5ff);
  border:1.5px solid var(--wz-line);border-radius:13px;
  transition:transform .1s ease, background .16s, border-color .16s;
}
.wz-pinpad button:hover{background:#f4efff;border-color:#d9cffb;}
.wz-pinpad button:active{transform:scale(.95);}
.wz-pinpad button.warn{color:#b45309;background:linear-gradient(150deg,#fffbeb,#fef3c7);border-color:#fde68a;}
.wz-pinpad button.bad{color:#b91c1c;background:linear-gradient(150deg,#fef2f2,#fee2e2);border-color:#fecaca;}

.wz-modal__actions{display:flex;gap:10px;}
.wz-modal__actions .wz-btn{margin:0;}
.wz-btn--ghost{
  background:#fff;color:var(--wz-ink-soft);
  border:1.5px solid var(--wz-line);box-shadow:none;
}
.wz-btn--ghost:hover{background:#faf8ff;color:var(--wz-ink);box-shadow:none;}
.wz-btn--ghost::after{display:none;}

/* ── accessibility ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .wz-ambient svg,.wz-sparkles svg,
  .wz-card::before,.wz-card__inner::before{animation:none;}
  .wz-card{transition:none;}
  .wz-btn:hover::after{animation:none;}
}