/* Adapts to whichever page it's on via CSS variable fallback chains -
   day.html's dark hacker theme (--bg-panel, --amber, --teal, --mono...)
   or index.html's light theme (--surface, --warm, --course, --font-body...)
   - falling through to a sensible hardcoded default if neither is present.
   Fixed position, top-left by default, reset there on every page load
   (see namepicker.js) so a drag from a previous session can never leave
   it stranded off-screen or hidden. */
.np-shell{
  position:fixed; left:16px; top:16px; z-index:9000;
  width:240px; font-family:var(--font-body, var(--sans, 'Inter', sans-serif));
  background:var(--bg-panel, var(--surface, #1a1a2e));
  border:1.5px solid var(--border, #3a3a5c);
  border-radius:14px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.45);
  color:var(--text, #eaeaf5);
  overflow:hidden;
}
.np-shell.np-dragging{ box-shadow:0 20px 44px -10px rgba(0,0,0,.6); }
.np-shell.np-collapsed{ width:auto; }
.np-shell.np-collapsed .np-body{ display:none; }

.np-header{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:var(--bg-panel-2, var(--warm-bg, rgba(0,0,0,.08)));
  border-bottom:1px solid var(--border, rgba(255,255,255,.12));
  cursor:grab; user-select:none;
}
.np-shell.np-collapsed .np-header{ border-bottom:none; }
.np-shell.np-dragging .np-header{ cursor:grabbing; }
.np-grip{ opacity:.5; font-size:12px; }
.np-header-label{
  flex:1; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--amber, var(--warm, #E8A33D));
  font-family:var(--font-heading, var(--mono, 'JetBrains Mono', monospace));
}
.np-toggle{
  background:transparent; border:1px solid var(--border, rgba(255,255,255,.2));
  color:var(--text-muted, var(--muted, #8B95A7)); font-family:inherit; font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:999px; cursor:pointer;
}
.np-toggle:hover{ border-color:var(--amber, var(--warm, #E8A33D)); color:var(--amber, var(--warm, #E8A33D)); }

.np-body{ padding:14px; }

.np-label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted, var(--muted, #8B95A7)); margin-bottom:10px;
}
.np-teacher-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.np-teacher-head .np-label{ margin-bottom:0; }

.np-period-select{
  font-family:inherit; font-size:12px; font-weight:700;
  color:var(--bg, #1a1a2e); background:var(--amber, var(--warm, #E8A33D));
  border:none; border-radius:7px; padding:4px 10px; cursor:pointer;
}

/* A small "UP NOW" ribbon badge, rather than just a plain box - this was
   the "ugly" part before: no visual hierarchy signaling this is the one
   that actually matters versus the queue behind it. */
.np-upnow{
  position:relative;
  font-size:24px; font-weight:800; text-align:center; padding:16px 10px;
  background:linear-gradient(160deg, var(--bg-panel-2, var(--warm-bg, rgba(0,0,0,.06))), transparent);
  border:2px solid var(--amber, var(--warm, #E8A33D)); border-radius:12px;
  color:var(--text, #eaeaf5); margin-top:6px;
  filter:blur(0); transition:filter .1s ease;
}
.np-upnow::before{
  content:"UP NOW"; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:var(--amber, var(--warm, #E8A33D)); color:var(--bg, #1a1a2e);
  font-size:10px; font-weight:800; letter-spacing:.08em; padding:2px 10px; border-radius:999px;
}
.np-upnow.np-rolling{ filter:blur(1.5px); color:var(--amber, var(--warm, #E8A33D)); }

.np-nextrow{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px; min-height:22px; }
.np-next-chip{
  font-size:11.5px; font-weight:600;
  background:var(--bg-panel-2, var(--warm-bg, rgba(0,0,0,.06)));
  border:1px solid var(--border, rgba(255,255,255,.14));
  border-radius:999px; padding:4px 10px;
  color:var(--text-muted, var(--muted, #8B95A7));
}
/* The very next person in line gets a subtle highlight distinct from the
   rest of the queue, so "on deck" reads at a glance. */
.np-next-chip:first-child{
  color:var(--teal, var(--course, #4FD1C5));
  border-color:var(--teal, var(--course, #4FD1C5));
}

.np-controls{ display:flex; gap:8px; margin-top:14px; }
.np-btn{
  flex:1; font-family:inherit; font-size:12.5px; font-weight:700; border-radius:8px;
  padding:9px 8px; cursor:pointer; border:2px solid transparent; transition:.15s;
}
.np-answered{ background:transparent; border-color:var(--border, rgba(255,255,255,.25)); color:var(--text, #eaeaf5); }
.np-answered.np-armed{ background:var(--teal, #3fd68a); border-color:var(--teal, #3fd68a); color:var(--bg, #0d2618); }
.np-next{ background:var(--amber, var(--warm, #E8A33D)); border-color:var(--amber, var(--warm, #E8A33D)); color:var(--bg, #1a1a2e); }
.np-next:hover:not(:disabled){ filter:brightness(1.1); }
.np-next:disabled{ opacity:.6; cursor:default; }

@media (max-width:600px){
  .np-shell{ width:200px; }
  .np-upnow{ font-size:20px; padding:14px 8px; }
}

/* Tiny standalone "bring it back" button - lives outside .np-shell (its
   own fixed element, top-right) so it's never at the mercy of wherever
   the panel itself last ended up. Click it any time to snap the panel
   back to its default top-left spot and un-collapse it. */
.np-relocate{
  position:fixed; top:16px; right:16px; z-index:9001;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; cursor:pointer;
  background:var(--bg-panel, var(--surface, #1a1a2e));
  border:1.5px solid var(--border, #3a3a5c);
  color:var(--amber, var(--warm, #E8A33D));
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5);
  padding:0;
}
.np-relocate:hover{ filter:brightness(1.15); }

/* Shown from cache before the live whoami/active_periods check has come
   back yet - a faint pulsing "..." on the header, nothing more intrusive
   than that, since in the overwhelming majority of loads this is about
   to quietly confirm itself and disappear a moment later. */
.np-shell.np-pending .np-header-label::after{
  content:'\00b7\00b7\00b7';
  margin-left:4px;
  animation:npPendingPulse 1.1s ease-in-out infinite;
}
@keyframes npPendingPulse{ 0%,100%{ opacity:.25; } 50%{ opacity:.85; } }


/* ============================================================================
   EFFECTS LEVELS (see effects.js). namepicker.js stamps data-fxlv (0-3) and
   data-fxbr (1 = breathing effect on) on the shell, in the page panel AND in
   the Picture-in-Picture window, so the same rules work in both. Light (1) is
   the classic look and has no extra rules here.
   ============================================================================ */

/* The name box while rolling: border cycles through the palette */
.np-upnow[data-roll="2"].np-rolling,
.np-upnow[data-roll="3"].np-rolling{ animation:npRollHue .6s linear infinite; }
.np-upnow[data-roll="3"].np-rolling{ animation-duration:.35s; text-shadow:0 0 14px currentColor; }
@keyframes npRollHue{
  0%,100%{ border-color:#E8A33D; } 25%{ border-color:#4FD1C5; } 50%{ border-color:#C77DFF; } 75%{ border-color:#FF6FB5; }
}

/* ...then it lands */
.np-upnow[data-roll="2"].np-land{ animation:npLand .7s cubic-bezier(.2,.9,.3,1.25); }
@keyframes npLand{
  0%{ transform:scale(.88); } 55%{ transform:scale(1.1); } 100%{ transform:scale(1); }
}
.np-upnow[data-roll="3"].np-land{ animation:npLandMax 1.2s cubic-bezier(.2,.9,.3,1.25), npGlow 1.7s ease-out; }
@keyframes npLandMax{
  0%{ transform:scale(.7) rotate(-4deg); } 35%{ transform:scale(1.22) rotate(2deg); }
  60%{ transform:scale(.96) rotate(-1deg); } 100%{ transform:scale(1) rotate(0deg); }
}
@keyframes npGlow{
  0%{ border-color:#FF6FB5; box-shadow:0 0 0 0 rgba(255,111,181,.9), 0 0 34px 10px rgba(232,163,61,.85); }
  40%{ border-color:#4FD1C5; box-shadow:0 0 0 14px rgba(79,209,197,0), 0 0 34px 10px rgba(79,209,197,.7); }
  100%{ border-color:#E8A33D; box-shadow:0 0 0 0 rgba(232,163,61,0), 0 0 0 0 rgba(232,163,61,0); }
}

/* The Next button: color-shifting at Moderate, heavy neon pulse at MAX */
[data-fxlv="2"][data-fxbr="1"] .np-next:not(:disabled){ animation:npBtnHue 6s linear infinite; }
[data-fxlv="3"][data-fxbr="1"] .np-next:not(:disabled){ animation:npBtnMax 2.2s ease-in-out infinite; }
@keyframes npBtnHue{ from{ filter:hue-rotate(0deg); } to{ filter:hue-rotate(360deg); } }
@keyframes npBtnMax{
  0%,100%{ transform:scale(1); filter:hue-rotate(0deg) brightness(1.05); box-shadow:0 0 10px 1px rgba(232,163,61,.7); }
  50%{ transform:scale(1.02); filter:hue-rotate(180deg) brightness(1.25); box-shadow:0 0 24px 6px rgba(79,209,197,.85); }
}
[data-fxlv="2"] .np-btn:active, [data-fxlv="3"] .np-btn:active{ transform:scale(.93); }

@media (prefers-reduced-motion:reduce){
  .np-upnow.np-rolling, .np-upnow.np-land, .np-next{ animation:none !important; }
}