/* style.css — dark, out of the way, and shaped around one fact: the thing on
   screen is a 4:3-ish 80x25 CGA text page, not a resizable document. */

:root {
  --bg: #0b0d10;
  --panel: #14171c;
  --line: #262b33;
  --fg: #d7dae0;
  --muted: #8b93a1;
  --accent: #7fd88f;
  --warn: #e6b455;
  --error: #e2706b;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- header --- */

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: none;
}

h1 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0.3px;
}

.sub {
  color: var(--muted);
  font-size: 13px;
}

.status {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-variant: all-small-caps;
  letter-spacing: 0.6px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.status.ok    { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.status.busy  { color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.status.error { color: var(--error);  border-color: color-mix(in srgb, var(--error) 40%, transparent); }

button {
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #1e232b;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: #262d37; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- the prose panels (intro, and the two ways this can't work) --- */

section {
  max-width: 620px;
  margin: 40px auto;
  padding: 0 24px;
  flex: none;
}

section h2 {
  font-size: 20px;
  margin: 0 0 12px;
}

#unsupported h2, #insecure h2 { color: var(--warn); }

section p, section li { color: var(--muted); }
section ul { padding-left: 20px; }
section li { margin: 6px 0; }

.muted { font-size: 13px; }

code, kbd {
  font-family: "DejaVu Sans Mono", Consolas, monospace;
  font-size: 0.9em;
  background: #1a1f26;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--fg);
}

/* --- the screen --- */

main {
  flex: 1 1 auto;
  min-height: 0;                /* so the flex child may actually shrink */
  padding: 16px;
}

#crt {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;             /* the unscaled 80x25 box may exceed the frame */
  background: #000;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.9);
}

/* app.js sets transform: scale(k). Layout size stays 80x25 at the xterm font
   size — the PC's screen is a fixed grid and gets scaled, never reflowed. */
#term {
  transform-origin: center center;
  flex: none;
}

/* scrollback is 0, so the viewport can never scroll — but xterm still lays out
   a scrollbar gutter, which reads as "there is more up there" when there is
   not. A CGA text page has no history: 25 rows, and the 26th scrolled the top
   one into oblivion, exactly as it did in 1983. */
.xterm .xterm-viewport {
  background: transparent !important;
  overflow: hidden !important;
  scrollbar-width: none;
}
.xterm .xterm-viewport::-webkit-scrollbar { display: none; }

/* --- footer --- */

footer {
  flex: none;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 12.5px;
}