/* beatchan98.css — beatchan's own flourishes layered on top of 98.css.
   98.css renders the operating system; this renders the application. */

body{
  margin:0; padding:20px 10px;
  background:#008080;
  font-family:"Pixelated MS Sans Serif",Arial,sans-serif; font-size:12px;
}
.desktop{ max-width:780px; margin:0 auto; }
.stack{ margin-bottom:12px; }
.center{ text-align:center; }
.row{ display:flex; gap:12px; align-items:flex-start; }
.row .col-main{ flex:1 1 60%; min-width:0; }
.row .col-side{ flex:1 1 38%; min-width:0; }

/* wordmark — the one place we break the OS chrome on purpose */
.wordmark{ text-align:center; padding:10px 6px 6px; }
.wordmark h1{
  margin:0; font-family:"Times New Roman",Georgia,serif; font-size:48px; letter-spacing:1px;
  color:#000080; text-shadow:2px 2px 0 #ffff00, 3px 3px 0 #ff00ff;
}
.wordmark .est{ font-size:11px; letter-spacing:2px; color:#aa0000; }
.blink{ animation:bc-blink 1s steps(1) infinite; }
@keyframes bc-blink{ 50%{ visibility:hidden; } }

/* scrolling marquee (CSS, no deprecated tag) */
.marquee{ overflow:hidden; white-space:nowrap; background:#000; color:#00ff00;
  font-family:"Courier New",monospace; padding:4px 0; }
.marquee span{ display:inline-block; padding-left:100%; animation:bc-scroll 16s linear infinite; }
@keyframes bc-scroll{ to{ transform:translateX(-100%); } }

/* green LCD readout — beat clock */
.lcd{ background:#000; color:#00ff66; font-family:"Courier New",monospace; text-align:center;
  padding:12px; border:2px inset #c0c0c0; }
.lcd .big{ font-size:44px; font-weight:bold; letter-spacing:2px; text-shadow:0 0 6px #00ff66; }
.lcd .sub{ color:#ffb000; font-size:12px; }

/* visitor odometer */
.odo{ display:inline-flex; gap:2px; }
.odo span{ background:#000; color:#0f0; font-family:"Courier New",monospace; font-weight:bold;
  padding:2px 5px; border:1px solid #404040; }

/* under-construction barber pole + 88x31 badges */
.uc{ height:16px; background:repeating-linear-gradient(45deg,#ffd700 0 12px,#000 12px 24px); }
.badge{ display:inline-block; background:#000; color:#fff; border:1px solid #fff;
  padding:2px 5px; font-size:10px; font-family:"Courier New",monospace; margin:2px; }

/* tab strip sits flush on the window below it */
menu[role=tablist]{ margin:0 0 -2px 2px; }

/* consensus / clash chips for the scheduler */
.chip{ display:inline-block; padding:1px 5px; font-size:11px; }
.chip.consensus{ background:#000080; color:#fff; }
.chip.clash{ background:#fff; color:#aa0000; border:1px solid #aa0000; }

/* ── mobile-forward: collapse the desktop to a single-window handheld ── */
@media (max-width:640px){
  body{ padding:0; }
  .desktop{ max-width:100%; }
  .row{ flex-direction:column; }
  .row .col-main, .row .col-side{ flex:1 1 100%; }
  .wordmark h1{ font-size:34px; }
  /* fat-finger targets: 98.css controls are tiny by default */
  .window-body button, .field-row button{ min-height:38px; padding:6px 12px; }
  .field-row input[type=text], .field-row select,
  .field-row-stacked input[type=text]{ min-height:34px; font-size:16px; }
  .field-row{ flex-wrap:wrap; }
  .lcd .big{ font-size:38px; }
}

/* taskbar — the Pocket-PC-era bottom nav */
.taskbar{ position:sticky; bottom:0; left:0; right:0; z-index:10;
  background:#c0c0c0; border-top:2px solid #fff;
  display:flex; align-items:stretch; gap:4px; padding:3px; }
.start-btn{ font-weight:bold; min-height:36px; display:flex; align-items:center; gap:5px; padding:0 10px; }
.task-clock{ margin-left:auto; display:flex; align-items:center; padding:0 10px;
  border:2px inset #c0c0c0; font-family:"Courier New",monospace; color:#000080; font-weight:bold; }
/* start menu sheet */
.start-menu{ position:fixed; left:3px; bottom:46px; width:200px; z-index:11; display:none; }
.start-menu.open{ display:block; }
.start-menu .window-body{ padding:2px; }
.start-menu a{ display:block; padding:9px 10px; text-decoration:none; color:#000; }
.start-menu a:hover{ background:#000080; color:#fff; }