/* AMP - 3279 display station emulation */
:root {
  --fs: 18px;
  --room: #121110;
  --bezel: #2b2a27;
  --bezel-hi: #3b3a36;
  --bg: #050805;
  --g: #3cff6e;   /* green  */
  --b: #6f8cff;   /* blue   */
  --r: #ff4a4a;   /* red    */
  --p: #ff7bdc;   /* pink   */
  --t: #4ef0f0;   /* turquoise */
  --y: #ffef5a;   /* yellow */
  --w: #f4fff4;   /* white  */
  --glow: 0.55;
  --key: #d9d3c3;
  --key-ink: #2a2721;
}
:root[data-crt="green"] {
  --bg: #020a03; --g: #33ff66; --b: #1fae45; --r: #7dff9d; --p: #5dff86; --t: #2be35c; --y: #8cffaa; --w: #c8ffd6;
}
:root[data-crt="amber"] {
  --bg: #0b0600; --g: #ffb000; --b: #c77d00; --r: #ffd27a; --p: #ffc443; --t: #e89a00; --y: #ffcf5c; --w: #ffe2a8;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --room: #2a2825; }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 30%, #23211e 0%, var(--room) 70%);
  color: var(--g);
  font-family: 'VT323', 'Courier New', monospace;
  overflow-x: hidden;
}
#console {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 16px;
  gap: 12px;
}

/* ---------------------------------------------------------------- monitor */
#crt {
  width: max-content; max-width: 100%;
  padding: 22px 26px;
  background: linear-gradient(160deg, var(--bezel-hi), var(--bezel) 40%, #1d1c1a);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
#glass {
  position: relative;
  background: var(--bg);
  border-radius: 14px / 18px;
  padding: calc(var(--fs) * .6) calc(var(--fs) * .8);
  box-shadow: inset 0 0 calc(var(--fs) * 2.4) rgba(0,0,0,.95), 0 0 0 3px #0c0c0b;
  overflow: hidden;
  cursor: text;
}
#glass::before { /* scanlines */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.22) 3px);
}
#glass::after { /* curvature vignette + flicker */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.035) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
  animation: flicker 6s infinite steps(1);
}
@keyframes flicker { 0%, 96% { opacity: 1; } 97% { opacity: .9; } 98% { opacity: 1; } 99% { opacity: .94; } }

#screen, #oia {
  font-size: var(--fs);
  line-height: 1.18;
  white-space: pre;
  position: relative;
  z-index: 1;
}
#screen .row { height: 1.18em; }
#screen span { text-shadow: 0 0 calc(var(--fs) * .35) color-mix(in srgb, currentColor calc(var(--glow) * 100%), transparent); }
.probe { position: absolute; visibility: hidden; white-space: pre; }

.c-g { --c: var(--g); color: var(--c); }
.c-b { --c: var(--b); color: var(--c); }
.c-r { --c: var(--r); color: var(--c); }
.c-p { --c: var(--p); color: var(--c); }
.c-t { --c: var(--t); color: var(--c); }
.c-y { --c: var(--y); color: var(--c); }
.c-w { --c: var(--w); color: var(--c); }
.ul { box-shadow: inset 0 -0.09em 0 0 color-mix(in srgb, var(--c) 70%, transparent); }
.rev { background: var(--c); color: var(--bg) !important; text-shadow: none !important; }
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cur { box-shadow: inset 0 -0.18em 0 0 var(--w); animation: cursor 0.9s steps(1) infinite; }
.cur.ins { box-shadow: none; background: color-mix(in srgb, var(--w) 75%, transparent); color: var(--bg); }
@keyframes cursor { 50% { box-shadow: none; } }
.cur.ins { animation: none; }

#oia {
  margin-top: .25em;
  border-top: 1px solid color-mix(in srgb, var(--b) 70%, transparent);
  padding-top: .1em;
  color: var(--b);
  display: flex; justify-content: space-between;
}
.oia-box { display: inline-block; border: 1px solid var(--b); padding: 0 .15em; line-height: 1; margin-right: .1em; }
.oia-box.rev { background: var(--b); color: var(--bg); }
.clock { display: inline-block; animation: blink 1s steps(1) infinite; }

/* ---------------------------------------------------------------- keys */
#keys { display: flex; flex-direction: column; gap: 6px; width: min(100%, 860px); }
.keyrow { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#keys button {
  font: inherit; font-size: 15px; letter-spacing: .04em;
  min-width: 52px; padding: 5px 9px 4px;
  background: linear-gradient(#e9e4d6, var(--key));
  color: var(--key-ink);
  border: 1px solid #8f8a7c; border-bottom-width: 3px; border-radius: 4px;
  cursor: pointer;
}
#keys button:active { transform: translateY(2px); border-bottom-width: 1px; }
#keys button.alt { background: linear-gradient(#b9b3a4, #a39d8e); }
#keys button.enter { background: linear-gradient(#8fb08f, #6f936f); min-width: 96px; color: #0f1f0f; }
#kbd { position: fixed; left: -1000px; top: 0; width: 10px; height: 10px; opacity: 0; }

@media (max-width: 640px) {
  #crt { width: 100%; }
  #console { padding: 8px 6px; justify-content: flex-start; }
  #crt { padding: 8px; border-radius: 10px; }
  #keys button { min-width: 40px; font-size: 13px; padding: 4px 5px; }
}

/* ---------------------------------------------------------------- printer */
#printer {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
#printer[hidden] { display: none; }
.printer-box { width: min(1000px, 100%); max-height: 100%; display: flex; flex-direction: column; }
.printer-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: #34322e; color: #d9d3c3; padding: 8px 10px; font-size: 18px; border-radius: 6px 6px 0 0;
}
.printer-bar button {
  font: inherit; font-size: 15px; margin-left: 6px; padding: 3px 12px; cursor: pointer;
  background: var(--key); color: var(--key-ink); border: 1px solid #8f8a7c; border-bottom-width: 3px; border-radius: 4px;
}
.printer-out { overflow: auto; background: #4a4843; padding: 18px; border-radius: 0 0 6px 6px; }

/* ATB boarding passes */
.atb { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.bp {
  display: flex; width: min(760px, 100%); background: #f3eedf; color: #1f2a55;
  font-family: 'VT323', monospace; font-size: 19px;
  border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.4);
  background-image: linear-gradient(90deg, rgba(31,42,85,.06) 0 6px, transparent 6px);
}
.bp-main { flex: 1; padding: 12px 16px; border-right: 2px dashed #b9b19b; min-width: 0; }
.bp-stub { width: 170px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.bp-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #1f2a55; padding-bottom: 4px; gap: 8px; flex-wrap: wrap; }
.bp-logo { font-weight: bold; letter-spacing: .25em; font-size: 26px; color: #b0242d; }
.bp-logo.sm { font-size: 18px; }
.bp-name { font-size: 26px; margin: 8px 0; color: #111; }
.bp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 12px; color: #111; }
.bp-grid label { display: block; font-size: 14px; color: #1f2a55; letter-spacing: .08em; }
.bp-grid .big { font-size: 34px; }
.bp-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; color: #111; }
.bp-bar { display: flex; height: 34px; margin-top: 8px; }
.bp-bar i, .tag-bar i { display: block; background: #111; height: 100%; }
.bp-tags { margin-top: 6px; font-size: 16px; color: #1f2a55; }
.tags { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; }
.tag {
  width: 170px; background: #fff7c4; color: #111; font-family: 'VT323', monospace; padding: 10px;
  border-radius: 4px 4px 30px 30px; box-shadow: 0 4px 10px rgba(0,0,0,.4); text-align: center;
}
.tag-dst { font-size: 54px; line-height: 1; letter-spacing: .1em; }
.tag-bar { display: flex; height: 40px; justify-content: center; margin: 6px 0; }
.tag-num { font-size: 22px; letter-spacing: .1em; }

/* 3287 continuous form */
.greenbar .form {
  margin: 0 auto; width: max-content; min-width: 100%;
  background: #fbfbf4; color: #222; font-family: 'Courier Prime', 'Courier New', monospace; font-size: 12px;
  padding: 0 46px; position: relative;
  background-image:
    radial-gradient(circle at 18px 12px, #4a4843 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 18px) 12px, #4a4843 5px, transparent 6px),
    repeating-linear-gradient(#fbfbf4 0 51px, #d9efd9 51px 102px);
  background-size: 100% 24px, 100% 24px, 100% 102px;
  background-repeat: repeat-y;
}
.greenbar .ln { white-space: pre; line-height: 17px; height: 17px; }
.greenbar .perf { border-top: 1px dashed #999; margin: 8px 0; }

@media print {
  body { background: #fff; overflow: visible; }
  #console { display: none; }
  #printer { position: static; background: none; padding: 0; display: block; }
  .printer-bar { display: none; }
  .printer-out { background: none; overflow: visible; padding: 0; }
  .greenbar .form { background: none; padding: 0; }
  .bp, .tag { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
}