/* sine — NFO textmode theme. Grey monotone on black. */

/* VT323 has no box-drawing or block glyphs (U+2500–25A0), so ─│┌ fell back to
   a wider system font and the tables drifted. SineBox supplies just those
   glyphs at VT323's 0.4em advance; unicode-range keeps it out of everything else. */
@font-face{
  font-family:"SineBox";
  src:url(fonts/sinebox.woff2) format("woff2");
  unicode-range:U+2500-25A0;
  font-display:swap;
}

:root{
  --bg:#000;
  --fg:hsl(0 0% 72%);
  --dim:hsl(0 0% 62% / .62);
  --line:hsl(0 0% 55% / .45);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font:20px/1.45 "VT323","SineBox",ui-monospace,Menlo,Consolas,monospace;
  /* VT323 ships fi/fl/ff and 1/2 1/4 3/4 ligatures: each one eats a column */
  font-variant-ligatures:none;font-kerning:none;
}
/* browsers give <pre> font-family:monospace, which silently replaced VT323
   with the system mono font in every NFO block */
pre{font-family:inherit}
button{
  font:inherit;color:inherit;
  background:transparent;
  border:1px solid var(--line);
  padding:1px 14px;cursor:pointer;
  text-transform:uppercase;letter-spacing:.08em;
}
button:hover{background:rgba(255,255,255,.12)}
a{color:var(--fg)}


/* stage: footage + spectrum canvas, full-bleed behind the sheet */
#stage{position:fixed;inset:0;overflow:hidden;background:var(--bg);z-index:-1}
#footage{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity 2s ease;
  filter:grayscale(1) brightness(.55);
}
#stage.live #footage{opacity:.85}
#viz{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.9}

/* the NFO sheet proper */
#nfo{
  position:relative;z-index:10;
  width:min(94vw,760px);
  margin:12px auto 70px;
  padding:20px 24px;
  background:rgba(0,3,1,.78);
  border:1px solid var(--line);
  container-type:inline-size;      /* cqi below = sheet's inner width */
}

/* header art: a canvas player.js paints from 8x16 glyph bitmaps and sizes in
   whole device pixels; color is read from here */
#logo{
  display:block;margin:0 auto 18px;max-width:100%;
  color:var(--fg);
  image-rendering:pixelated;
}
#logo:not([width]){display:none}

/* NFO text blocks sit on a fixed 71-column grid (VT323: 71 x 0.4em = 28.4em),
   scaled to the sheet instead of re-wrapping, so tables and rules stay intact */
#info,#tracks-label,#notes,#sites,#greets{
  font-size:clamp(9px, 2.6vw, 20px);
  font-size:min(20px, 100cqi / 28.4);
  white-space:pre;overflow-x:auto;
}
#info{margin:0 0 14px;line-height:1;text-align:center}

#now{
  display:flex;align-items:center;gap:12px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:8px 0;margin-bottom:8px;
}
#now-title{flex:1;min-width:0;font-size:22px;min-height:1.2em;overflow-wrap:anywhere}
#now-time{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}

#tracks-label{margin:0;color:var(--dim)}
#tracks{list-style:none;margin:0 0 14px;padding:0}
.track{
  display:flex;align-items:center;gap:10px;
  padding:5px 6px;cursor:pointer;
  border:1px solid transparent;
}
.track:hover{background:rgba(255,255,255,.08)}
.track:focus-visible{outline:1px solid var(--fg)}
.track.current{
  border-color:var(--line);
  background:var(--fg);color:#000;
}
.track.current .idx,.track.current .dur,.track.current .leader{color:#000;border-color:#000}
.track.current a{color:#000;border-color:#000}
.idx{color:var(--dim)}
.leader{
  flex:1;min-width:24px;align-self:center;
  border-bottom:1px dotted rgba(255,255,255,.35);
}
.dls{display:inline-flex;gap:6px}
.dls a{
  font-size:.75em;padding:0 8px;text-decoration:none;
  border:1px solid var(--line);
  text-transform:uppercase;letter-spacing:.08em;
}
.dls a:hover{background:rgba(255,255,255,.16)}
.dur{color:var(--dim);font-variant-numeric:tabular-nums}

#greets{margin:0;color:var(--dim)}
#notes{margin:0 0 14px;color:var(--dim)}
#sites{margin:0 0 14px;color:var(--dim)}
#sites a{color:var(--fg);text-decoration:none;border-bottom:1px dotted var(--line)}
#sites a:hover{background:rgba(255,255,255,.12)}



@media (max-width:600px){
  body{font-size:17px}
  #nfo{padding:14px 10px}          /* every column counts for 79-col art */
  #now-title{font-size:19px}
}

/* zen mode: [ hide ] button + everything UI fades away */
#zen{
  position:fixed;right:14px;bottom:14px;z-index:60;
  font:15px "VT323",ui-monospace,monospace;
  color:var(--dim);background:rgba(0,0,0,.7);
  border:1px solid var(--line);border-radius:3px;
  padding:4px 10px;cursor:pointer;
}
#zen:hover{color:var(--fg);border-color:var(--fg)}
#nfo{transition:opacity .6s ease}
body.zen #nfo{opacity:0;pointer-events:none}