/* The DOS prompt, about 1991.

   ── Not the Lotus page ──

   Both are text on a dark screen, so the separation has to be deliberate and it
   is done three ways. Colour: bone white on true black, where Lotus is cyan on
   blue. Furniture: none at all. Lotus has a menu line, a control panel, column
   headers and row numbers, because a spreadsheet is a built environment; a
   command line is an empty room with one line of text at the bottom, and every
   box or rule added here would make it less like the thing it is imitating.
   Density: this sets wider and looser, because a terminal was 80 columns of
   sentences and a worksheet was a grid of values.

   The one flourish is the phosphor glow on the prompt, which is what a cheap
   monitor did to bright text and is two text shadows. */

:root {
  --ds-black: #07080a;
  --ds-bone:  #d8d8cf;
  --ds-bright:#ffffff;
  --ds-green: #6ee06e;   /* the prompt, and only the prompt */
  --ds-dim:   #7e8188;
  --ds-red:   #ff6b5e;
  --ds-orange:#E87722;
}

body {
  background: #000;
  color: var(--ds-bone);
  font: 15px/1.6 ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 0 0 44px;
}

.ds { max-width: 900px; margin: 0 auto; padding: 0 16px; }

a { color: var(--ds-green); }
a:hover, a:focus { color: var(--ds-bright); }

/* ── The screen ────────────────────────────────────────────────────────── */

/* No border, no bezel, no rounded corners. A command line filled the monitor
   and had nothing around it, and drawing a frame here would turn it into a
   picture of a terminal instead of a terminal. */
.ds-screen {
  background: var(--ds-black);
  padding: 26px 4px 30px;
  min-height: 60vh;
}

.ds-banner { margin: 0; color: var(--ds-dim); }
.ds-banner + .ds-banner { margin-bottom: 18px; }

.ds-h1 {
  font: 700 clamp(19px, 3.2vw, 26px)/1.35 inherit;
  color: var(--ds-bright);
  margin: 18px 0 10px;
}
.ds-lead { margin: 0 0 22px; max-width: 78ch; color: var(--ds-bone); }

.ds-log { margin: 0; }
.ds-echo { margin: 14px 0 2px; color: var(--ds-bright); }
.ds-prompt {
  color: var(--ds-green);
  margin-right: 8px;
  /* Phosphor. The one place on the page that glows, so it reads as the live
     part of the screen. */
  text-shadow: 0 0 6px rgba(110, 224, 110, .55);
}

.ds-out {
  margin: 0 0 4px;
  font: inherit;
  color: var(--ds-bone);
  white-space: pre-wrap;      /* wraps rather than scrolling sideways on a phone */
  overflow-wrap: break-word;
  max-width: 82ch;
}

.ds-prompt-line { margin: 14px 0 0; display: flex; align-items: baseline; }

/* The block cursor, on the picture of a prompt and on the real one. */
.ds-cursor {
  display: inline-block; width: .58em; height: 1.05em;
  background: var(--ds-bone);
  animation: ds-blink 1.1s steps(1, end) infinite;
  vertical-align: -2px;
}
@keyframes ds-blink { 50% { opacity: 0; } }

/* The real input, created by the script. Transparent and borderless so it is
   the same line of text as the prompt beside it rather than a box sitting on
   the screen. */
.ds-input {
  flex: 1 1 auto; min-width: 0;
  background: transparent;
  border: 0; padding: 0; margin: 0;
  font: inherit;
  color: var(--ds-bright);
  caret-color: var(--ds-bone);
}
.ds-input:focus { outline: 0; }
.ds-input::placeholder { color: #4d5158; }
/* The screen shows the focus, because the input itself has no edges to show it
   on and somebody has to be able to tell whether typing will go anywhere. */
.ds-screen:focus-within { box-shadow: inset 0 0 0 1px #2b2f36; }

.ds-error { color: var(--ds-red); }

/* ── The printed version, for a browser with no script ─────────────────── */

.ds-canned { padding: 8px 4px 0; }
.ds-canned h2 { color: var(--ds-bright); font: 700 18px/1.35 inherit; margin: 30px 0 6px; }
.ds-canned-item { margin-top: 26px; }
.ds-canned-item h3 {
  color: var(--ds-green); font: 700 15px/1.4 inherit; margin: 0 0 6px;
  display: flex; flex-wrap: wrap; gap: 0 14px; align-items: baseline;
}
.ds-canned-about { color: var(--ds-dim); font-weight: 400; }

/* ── The rest of the page ──────────────────────────────────────────────── */

.ds-page h2 { color: var(--ds-bright); font: 700 18px/1.35 inherit; margin: 34px 0 8px; }
.ds-page h3 { color: var(--ds-bone); font: 700 15px/1.4 inherit; margin: 18px 0 2px; }
.ds-page p  { margin: 8px 0; max-width: 78ch; }
.ds-note { color: var(--ds-dim); font-size: 14px; }
.ds-list { margin: 8px 0; padding: 0 0 0 24px; max-width: 78ch; }
.ds-list li { margin-bottom: 9px; }

/* ── The form ──────────────────────────────────────────────────────────── */

/* One rule around it and nothing else. The command line has no boxes on it, so
   the form does not get a panel: it gets a line, the way a DOS program drew a
   region when it had to. */
.ds-box {
  border: 1px solid #2b2f36;
  padding: 18px 22px 22px;
  margin: 34px 0 0;
  max-width: 620px;
}
.ds-box h2 { margin-top: 0; }

.ds-field { margin: 0 0 12px; max-width: 520px; }
.ds-field label { display: block; color: var(--ds-green); font-size: 14px; margin-bottom: 4px; }
.ds-field input, .ds-field textarea {
  width: 100%; padding: 7px 9px;
  background: var(--ds-black); color: var(--ds-bright);
  border: 1px solid #3a3f47;
  font: inherit; font-size: 15px;
}
.ds-field input:focus, .ds-field textarea:focus { outline: 2px solid var(--ds-orange); outline-offset: 1px; }
.ds-field.is-bad input, .ds-field.is-bad textarea { border-color: var(--ds-red); }
.ds-field ::placeholder { color: #565b63; }

.rt-field-err { color: var(--ds-red); font-size: 13px; margin: 4px 0 0; }
.rt-err { border: 1px solid var(--ds-red); color: var(--ds-red); padding: 10px 12px; font-size: 14px; margin: 0 0 12px; }

.ds-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 16px 0 0; }
.ds-actions button {
  background: var(--ds-bone); color: var(--ds-black);
  border: 0; padding: 9px 26px;
  font: 700 15px/1.3 inherit; cursor: pointer;
}
.ds-actions button:hover, .ds-actions button:focus { background: var(--ds-orange); color: #fff; }

@media (max-width: 560px) {
  .ds { padding: 0 12px; }
  .ds-screen { padding: 18px 2px 22px; min-height: 0; }
}