/* y2k.css -- Windows 98 / Centova-Cast-era chrome, shared by the player and the admin panel.
   Everything is drawn with borders and gradients: no images, no external fonts. */

:root{
  --face:#c0c0c0; --hi:#ffffff; --lo:#808080; --dk:#404040; --blk:#000000; --lt:#dfdfdf;
  --desk:#008080; --tb1:#000080; --tb2:#1084d0; --tbi1:#808080; --tbi2:#b5b5b5;
  --lcd-bg:#061006; --lcd-fg:#3cff3c; --lcd-dim:#1c7a1c; --lcd-amber:#ffb000; --lcd-red:#ff3030;
  --ok:#008000; --bad:#c00000; --link:#0000ee;
  --font:Tahoma,"MS Sans Serif","Segoe UI",Verdana,Geneva,sans-serif;
  --mono:"Courier New",Courier,"Lucida Console",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--desk);
  color:var(--blk);
  font:12px/1.35 var(--font);
  -webkit-font-smoothing:none; font-smooth:never;
  overflow-x:hidden;
}
a{color:var(--link)}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--tb1);color:#fff}

/* ---- bevels ---------------------------------------------------------- */
.raised,.btn,.win,.tab.on{
  background:var(--face);
  border:2px solid; border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset -1px -1px var(--lo), inset 1px 1px var(--lt);
}
.sunken,input[type=text],input[type=url],input[type=number],input[type=password],select,textarea,.grid-wrap,.lcd,.statusbar .cell,.field{
  border:2px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:inset 1px 1px var(--dk), inset -1px -1px var(--lt);
}
.win{padding:3px}

/* ---- window chrome --------------------------------------------------- */
.titlebar{
  display:flex;align-items:center;gap:6px;height:22px;padding:2px 3px 2px 4px;
  background:linear-gradient(90deg,var(--tb1),var(--tb2)); color:#fff; font-weight:700;
  user-select:none;
}
.titlebar.inactive{background:linear-gradient(90deg,var(--tbi1),var(--tbi2))}
.titlebar .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px}
.titlebar svg.ico{width:16px;height:16px;flex:none}
.tb-btns{display:flex;gap:2px;flex:none}
.tb-btn{
  width:16px;height:14px;padding:0;display:grid;place-items:center;cursor:default;
  background:var(--face);color:var(--blk);
  border:1px solid; border-color:var(--hi) var(--blk) var(--blk) var(--hi);
  box-shadow:inset -1px -1px var(--lo);
  font:700 9px/1 var(--font);
}
.tb-btn:active{border-color:var(--blk) var(--hi) var(--hi) var(--blk);box-shadow:inset 1px 1px var(--lo)}
.tb-btn svg{width:8px;height:8px;fill:none;stroke:currentColor;stroke-width:1.6;shape-rendering:crispEdges}

.menubar{display:flex;gap:0;padding:1px 0;position:relative}
.menubar button{
  background:none;border:1px solid transparent;padding:1px 7px;cursor:default;
}
.menubar button:hover,.menubar button.open{border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.menubar button.open{border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.menubar button u{text-decoration:underline}
.menu{
  position:fixed;z-index:60;min-width:170px;padding:2px;
  background:var(--face);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset -1px -1px var(--lo),2px 2px 0 rgba(0,0,0,.45);
}
.menu button,.menu a{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:4px 22px 4px 8px;
  background:none;border:0;color:var(--blk);text-decoration:none;cursor:default;
}
.menu button:hover,.menu a:hover,.menu button:focus-visible{background:var(--tb1);color:#fff;outline:0}
.menu hr{border:0;border-top:1px solid var(--lo);border-bottom:1px solid var(--hi);margin:3px 1px}
.menu svg{width:16px;height:16px;flex:none}

/* ---- controls -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-width:75px;min-height:23px;padding:2px 10px;cursor:default;color:var(--blk);text-decoration:none;
  white-space:nowrap;
}
.btn:active:not(:disabled),.btn.on{
  border-color:var(--dk) var(--hi) var(--hi) var(--dk);
  box-shadow:inset 1px 1px var(--lo);padding:3px 9px 1px 11px;
}
.btn:focus-visible{outline:1px dotted var(--blk);outline-offset:-5px}
.btn:disabled{color:var(--lo);text-shadow:1px 1px 0 var(--hi)}
.btn.default{outline:1px solid var(--blk);outline-offset:-1px}
.btn.small{min-width:0;min-height:19px;padding:0 7px}
.btn.danger{color:#900}
.btn svg{width:16px;height:16px;flex:none}

input[type=text],input[type=url],input[type=number],input[type=password],select,textarea{
  background:#fff;padding:3px 4px;min-height:23px;width:100%;outline:0;border-radius:0;
}
input:focus,select:focus,textarea:focus{background:#ffffe1}
select{appearance:auto}
label.chk{display:inline-flex;align-items:center;gap:6px;cursor:default}
label.chk input{margin:0;width:13px;height:13px}

fieldset{border:2px groove var(--lt);border-color:var(--lo) var(--hi) var(--hi) var(--lo);margin:0 0 10px;padding:8px 10px 10px;min-width:0}
fieldset{border:1px solid var(--lo);box-shadow:1px 1px 0 var(--hi),inset 1px 1px 0 var(--hi)}
legend{padding:0 4px;color:var(--blk);background:var(--face);position:relative}  /* covers the fieldset's inset highlight, which (unlike its border) doesn't gap around the legend */

/* trackbar (volume slider) */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:24px;margin:0;width:100%;cursor:default}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--face);
  border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);box-shadow:inset 1px 1px var(--dk)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:21px;margin-top:-9px;background:var(--face);
  border:1px solid;border-color:var(--hi) var(--blk) var(--blk) var(--hi);box-shadow:inset -1px -1px var(--lo),inset 1px 1px var(--lt)}
input[type=range]::-moz-range-track{height:4px;background:var(--face);border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
input[type=range]::-moz-range-thumb{width:9px;height:19px;border-radius:0;background:var(--face);border:1px solid;border-color:var(--hi) var(--blk) var(--blk) var(--hi)}

/* tabs (property sheet) */
.tabs{display:flex;gap:0;padding:0 2px;margin-bottom:-2px;position:relative;z-index:1;overflow-x:auto}
.tab{
  background:var(--face);border:2px solid;border-color:var(--hi) var(--dk) transparent var(--hi);
  box-shadow:inset 1px 1px var(--lt), inset -1px 0 var(--lo);
  padding:3px 11px 2px;margin:2px 0 2px;cursor:default;white-space:nowrap;border-bottom:0;
}
/* The tab strip overlaps the page by 2px (.tabs margin-bottom:-2px) and sits
   above it. Inactive tabs stop 2px short, so the page's top border shows
   under them; the active tab is 4px taller and reaches the strip's bottom
   edge, covering that border so it reads as attached to its page. */
.tab.on{margin:0;padding-top:5px;padding-bottom:4px;border-bottom:0;box-shadow:inset 1px 1px var(--lt), inset -1px 0 var(--lo);position:relative}
.tab:focus-visible{outline:1px dotted var(--blk);outline-offset:-4px}
.tabpage{padding:10px;border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--lo),inset 1px 1px var(--lt);background:var(--face);
  min-height:150px;max-height:230px;overflow:auto}

/* list view / grid */
.grid-wrap{background:#fff;overflow:auto;max-height:340px}
table.grid{border-collapse:separate;border-spacing:0;width:100%;background:#fff}
.grid th{
  position:sticky;top:0;background:var(--face);text-align:left;font-weight:400;padding:2px 6px;white-space:nowrap;
  border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--lo);cursor:default;
}
.grid th.sort::after{content:" \25B2";font-size:8px}
.grid th.sort.desc::after{content:" \25BC"}
.grid td{padding:2px 6px;border-bottom:1px dotted #d0d0d0;vertical-align:middle;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid tr:nth-child(even) td{background:#f4f4f4}
.grid tbody tr:hover td{background:#000080;color:#fff}
.grid tbody tr:hover td .btn{color:var(--blk)}
.grid td.num,.grid th.num{text-align:right}
.grid td.act{text-align:right;width:1%}
.grid td.empty{text-align:center;color:var(--lo);padding:18px}

/* LCD */
.lcd{
  background:var(--lcd-bg);color:var(--lcd-fg);font-family:var(--mono);
  text-shadow:0 0 5px rgba(60,255,60,.55);position:relative;overflow:hidden;
}
.lcd::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 3px)}
.lcd .dim{color:var(--lcd-dim);text-shadow:none}
.lcd .amber{color:var(--lcd-amber);text-shadow:0 0 5px rgba(255,176,0,.55)}
.lcd .red{color:var(--lcd-red);text-shadow:0 0 6px rgba(255,48,48,.7)}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.marquee{overflow:hidden;white-space:nowrap}
.marquee>span{display:inline-block}
.marquee.scroll>span{padding-left:100%;animation:marq 14s linear infinite}
@keyframes marq{to{transform:translateX(-100%)}}

/* segmented level meter */
.meter{height:14px;background:#000;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);position:relative;overflow:hidden}
.meter>i{position:absolute;left:0;top:0;bottom:0;width:0;
  background:repeating-linear-gradient(90deg,#00c000 0 5px,transparent 5px 7px)}
.meter>i.hot{background:repeating-linear-gradient(90deg,#e0a000 0 5px,transparent 5px 7px)}
.meter>i.clip{background:repeating-linear-gradient(90deg,#e00000 0 5px,transparent 5px 7px)}

/* status bar */
.statusbar{display:flex;gap:2px;margin-top:3px}
.statusbar .cell{padding:1px 6px;min-height:20px;display:flex;align-items:center;gap:6px;flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.statusbar .cell.fit{flex:0 0 auto}

/* LEDs */
.led{width:9px;height:9px;border-radius:50%;background:#555;border:1px solid #222;display:inline-block;flex:none}
.led.on{background:#20e020;box-shadow:0 0 4px #20e020}
.led.off{background:#a02020}
.led.warn{background:#ffb000;box-shadow:0 0 4px #ffb000}

/* taskbar + desktop */
.taskbar{
  position:fixed;left:0;right:0;bottom:0;height:30px;z-index:50;display:flex;align-items:center;gap:4px;
  padding:2px 3px calc(2px + env(safe-area-inset-bottom,0px));
  background:var(--face);border-top:2px solid var(--hi);box-shadow:0 -1px 0 var(--lt);
}
.taskbar .start{font-weight:700;min-width:0;padding:1px 8px;gap:5px}
.taskbar .task{flex:0 1 190px;justify-content:flex-start;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.taskbar .sep{width:2px;height:22px;border-left:1px solid var(--lo);border-right:1px solid var(--hi);margin:0 2px}
.tray{margin-left:auto;display:flex;align-items:center;gap:8px;padding:2px 8px;height:24px;
  border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.tray svg{width:14px;height:14px}
.desk-icons{position:fixed;left:14px;top:14px;display:flex;flex-direction:column;gap:14px;z-index:1}
.desk-icon{display:flex;flex-direction:column;align-items:center;gap:3px;width:78px;text-align:center;color:#fff;
  text-decoration:none;text-shadow:1px 1px 0 #000;font-size:11px;padding:2px;cursor:default;background:none;border:1px solid transparent}
.desk-icon svg{width:32px;height:32px;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.5))}
.desk-icon:focus-visible,.desk-icon:hover{border:1px dotted #fff;background:rgba(0,0,128,.55)}
.winflag{width:16px;height:14px;display:grid;grid-template:1fr 1fr/1fr 1fr;gap:1px;transform:skewX(-6deg)}
.winflag i:nth-child(1){background:#e03020}.winflag i:nth-child(2){background:#20b030}
.winflag i:nth-child(3){background:#1060e0}.winflag i:nth-child(4){background:#f0c010}

/* message box */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.18);z-index:80;display:grid;place-items:center;padding:16px}
.msgbox{width:min(380px,100%)}
.msgbox .mb-body{display:flex;gap:14px;padding:16px 14px 12px;align-items:flex-start}
.msgbox .mb-body svg{width:32px;height:32px;flex:none}
.msgbox .mb-btns{display:flex;justify-content:center;gap:8px;padding:6px 8px 10px}
.msgbox p{margin:0;white-space:pre-line;overflow-wrap:anywhere}

.marquee-hit{font:11px var(--mono)}
.muted{color:#606060}
.mono{font-family:var(--mono)}
.right{text-align:right}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1 1 200px;min-width:0}

@media (prefers-reduced-motion:reduce){
  .blink,.marquee.scroll>span{animation:none}
}

/* ---- added for the two-window public page (Jukebox + Stuy Radio) -------- */
/* A grid rather than a wrapping flexbox: Jukebox on the left, Stuy Radio and
   Chat stacked on the right. Grid items keep their cells when a neighbour is
   dragged out (goes position:absolute), so nothing reflows mid-drag. */
.desk-wrap{display:grid;grid-template-columns:minmax(0,520px) 320px;gap:20px;justify-content:center;align-items:start;
  max-width:900px;margin:0 auto;position:relative;min-height:520px}
.desk-wrap>#jukeStage{grid-column:1;grid-row:1 / span 2}
.desk-wrap>#stuyStage{grid-column:2;grid-row:1}
.desk-wrap>#chatStage{grid-column:2;grid-row:2}
.desk-wrap>.stage.glifs,.desk-wrap>.stage.schedule,.desk-wrap>.credit{grid-column:1 / -1;justify-self:center}
.desk-wrap .stage{cursor:default}
.desk-wrap .titlebar{cursor:move}
.desk-wrap>.stage{margin:0;flex:none}
.xtag{display:inline-block;font-size:10px;line-height:12px;padding:0 4px;margin-left:5px;
  background:var(--tb1);color:#fff;font-weight:700;vertical-align:1px;border:1px solid var(--dk)}
.callsign{text-align:center;font-size:11px;letter-spacing:2.5px;color:var(--blk);font-weight:700;margin-bottom:6px}
.onair-lamp{
  margin:2px auto 8px;width:140px;height:140px;border-radius:50%;position:relative;display:grid;place-items:center;
  background:var(--face);border:4px solid; border-color:var(--dk) var(--hi) var(--hi) var(--dk);
  box-shadow:inset -2px -2px var(--lo), inset 2px 2px var(--lt);
}
.onair-lamp .bulb{
  width:104px;height:104px;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:#8a8a8a;color:#4a4a4a;font-weight:800;letter-spacing:1px;font-size:17px;
  border:2px solid #333;transition:background .25s,color .25s,box-shadow .25s;
}
.onair-lamp.live .bulb{background:radial-gradient(circle at 40% 32%,#ff8a7a,#cc0000 65%);color:#3a0000;
  box-shadow:0 0 30px 8px rgba(204,0,0,.55), inset 0 0 16px rgba(255,255,255,.3)}
.onair-lamp.live .bulb.pulse{animation:lamp 1.6s ease-in-out infinite}
@keyframes lamp{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}
.onair-sub{text-align:center;font-size:11.5px;color:var(--lo);min-height:15px}
.onair-mode{text-align:center;font-size:13px;font-weight:700;letter-spacing:.5px;min-height:17px}
.onair-track{text-align:center;font-size:12px;min-height:34px;padding:0 6px;overflow-wrap:anywhere}
.onair-track b{display:block}
.onair-mini{display:flex;justify-content:center;margin-top:8px}
/* Phones / narrow windows: stack the windows and make each exactly as wide
   as the screen allows. (flex:none above sizes a window to its content --
   e.g. the history table's natural width -- which overflowed small screens.)
   Dragging is off at this width too; see player-common.js. */
@media (max-width:820px){
  .desk-wrap{display:flex;flex-direction:column;align-items:stretch;min-height:0}
  .desk-wrap>.stage{width:100%;margin:0 auto}
  .desk-wrap .titlebar{cursor:default}
}
.lcd-row>*{min-width:0;overflow:hidden;text-overflow:ellipsis}