/*
 * today-web.css -- styling for the today-web page and its DOS/CRT monitor.
 * Copyright (c) 2026, Leo Bicknell. Distributed under the 3-Clause BSD
 * License; see LICENSE.
 */

@font-face {
  font-family: "IBM VGA";
  src: url("fonts/Web437_IBM_VGA_9x16.woff") format("woff");
}

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

/* Everything (title, form, monitor) at natural pixel size, scaled as one
   unit by JS to whatever fits the viewport -- see the script at the end
   of the body. */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  transform-origin: center center;
}

/* Page chrome around the monitor -- ordinary modern-font UI, deliberately
   not styled to match the CRT/CP437 look inside it. */
.title {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 4.5rem;
  font-weight: 600;
  color: #EDEDED;
  letter-spacing: 0.01em;
}

.blurb {
  margin: 0;
  max-width: 34em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  color: #BBBBBB;
  text-align: center;
}

.blurb a {
  color: #EDEDED;
}

.blurb a:hover {
  color: #fff;
}

.datebar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.datebar label {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 8px 0;
  border: 1px solid transparent;
  font-size: 1.1rem;
  color: #EDEDED;
}

.datebar input {
  font-family: inherit;
  font-size: 1.1rem;
  width: 4.5em;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #999;
  text-align: center;
}

.datebar button {
  font-family: inherit;
  font-size: 1.1rem;
  padding: 8px 22px;
  border-radius: 6px;
  border: none;
  background: #3B6EA5;
  color: #fff;
  cursor: pointer;
}

.datebar button.enter {
  margin-left: 28px;
}

.footer {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  color: #888;
  text-align: center;
}

.footer a {
  color: #aaa;
}

.footer a:hover {
  color: #fff;
}

/* Five nested layers, outside in, matching a real IBM 8513-era monitor
   face: thin light outer case -> recessed dark groove (50% of the outer
   case color) -> wide taupe bezel -> black surround -> screen. */
.monitor {
  position: relative;
  background: #C7BCB6;
  padding: 14px;
  border-radius: 26px;
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

.groove {
  background: #645E5B;
  padding: 12px;
  border-radius: 18px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6);
}

.bezel {
  position: relative;
  background: #73645D;
  padding: 64px 64px 96px;
  border-radius: 12px;
}

.blackband {
  background: #000000;
  padding: 44px;
  border-radius: 36px;
}

.badge {
  position: absolute;
  top: 12px;
  left: 32px;
  display: flex;
  gap: 0;
}

.badge-half, .badge-rect {
  box-sizing: border-box;
  width: 21px;
  height: 42px;
  background: #544843;
}

.badge-half.left { border-radius: 21px 0 0 21px; }
.badge-rect { margin-left: -1px; }
.badge-half.right { border-radius: 0 21px 21px 0; margin-left: -1px; }

.led {
  position: absolute;
  right: 38px;
  bottom: 32px;
  width: 14px;
  height: 8px;
  border-radius: 2px;
  background: #4CFF52;
  box-shadow: 0 0 6px 2px rgba(76, 255, 82, 0.8);
}

/* Font rendered at 32px = 2x its native 16px pixel height, per int10h's
   own guidance: these outline fonts only look crisp at the original
   pixel height or an integer multiple of it. Everything else (aspect
   correction, final display size) is done by resizing enclosing boxes
   with CSS transforms, never by picking a fractional font-size.

   .canvas is the native, aspect-corrected size before any final zoom:
     width  = 80 cols * (32px * 9/16) = 1440px
     height = 25 rows * 32px * 1.35 (VGA 4:3 aspect stretch) = 1080px
   .stage displays that canvas zoomed out 20% (1440x1080 * 0.8): 1152x864 */
.stage {
  --zoom: 0.8;
  position: relative;
  width: 1152px;
  height: 864px;
  overflow: hidden;
  box-shadow: inset 0 0 18px 4px rgba(0, 0, 0, 0.8);
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 1080px;
  transform: scale(var(--zoom));
  transform-origin: top left;
}

.screen {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 1440px;
  height: 800px;
  transform: scaleY(1.35);
  transform-origin: top left;
  font-family: "IBM VGA", monospace;
  font-size: 32px;
  line-height: 32px;
  white-space: pre;
  background: #051CA2;
  color: #AAAAAA;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

.brd, .hdr { color: #FFFFFF; }
.sec { color: #FFFF50; }
.body { color: #51FFFF; }
.yr { color: #E3485B; }

/* Plain DOS prompt screen: same box/font/scale as .screen, just a black
   background instead of TODAY's blue, and no CP437 border -- a real DOS
   prompt doesn't draw one, only TODAY.EXE's own screen does. */
.screen.dos {
  background: #000000;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.cursor {
  animation: blink 1s steps(1, end) infinite;
}

/* Scanline overlay is a direct child of .canvas, so it only picks up
   .canvas's scale(--zoom) -- not .screen's separate scaleY(1.35). Its
   period is defined so that AFTER that zoom is applied, the final,
   on-screen period is exactly 2 real CSS pixels: a fractional final
   period is what caused the banding artifact both previous times. */
.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2px / var(--zoom) * 0.8),
    rgba(0, 0, 0, 0.35) calc(2px / var(--zoom) * 0.8),
    rgba(0, 0, 0, 0.35) calc(2px / var(--zoom))
  );
}