/* Lotus 1-2-3, release 2, on an 80 column text screen.

   The palette is the sixteen colors a VGA adapter had, and only five of them
   are used: the blue the screen was, the light grey most text was, bright white
   for anything the eye should land on first, bright cyan for the furniture, and
   yellow for the one figure the page is building toward.

   Two deliberate departures from the real thing. The type is proportionally
   sized rather than locked to an 80 column grid, because a page that only works
   at one width is a page most people will open on a phone and close. And the
   cell rules are drawn faintly; 1-2-3 drew none at all, but without them the
   worksheet in the middle stops reading as a worksheet on a modern screen. */

:root {
  --lo-bg:     #0000aa;
  --lo-frame:  #000047;
  --lo-text:   #aaaaaa;
  --lo-bright: #ffffff;
  --lo-cyan:   #55ffff;
  --lo-yellow: #ffff55;
  --lo-green:  #55ff55;
  --lo-red:    #ff5555;
  --lo-line:   rgba(85, 255, 255, .16);
}

body {
  background: #101014;
  color: var(--lo-text);
  font: 15px/1.5 ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 18px 12px 40px;
}

.lo { max-width: 1000px; margin: 0 auto; }

/* The screen, inside a bezel. The inset shadow is the curve of a tube, which is
   the cheapest way to say "this is a monitor" without an image. */
.lo-screen {
  background: var(--lo-bg);
  border: 12px solid #26262c;
  border-radius: 10px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), 0 14px 40px rgba(0, 0, 0, .6);
  padding: 0 0 4px;
}

a { color: var(--lo-cyan); }
a:hover, a:focus { color: var(--lo-yellow); }

/* ── The control panel: the three lines above the sheet ────────────────── */

.lo-control { background: var(--lo-frame); padding: 6px 12px 8px; position: relative; }
.lo-cellref { margin: 0; color: var(--lo-bright); font-size: 14px; }
.lo-ref { color: var(--lo-cyan); }
.lo-entry { color: var(--lo-bright); }

.lo-menu ul { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 0; padding: 0; }
.lo-menu li { color: var(--lo-text); font-size: 14px; }
/* The highlighted menu item, which in 1-2-3 was a block of reverse video that
   you moved along the line with the arrow keys. */
.lo-menu .lo-on { background: var(--lo-cyan); color: #000047; padding: 0 6px; margin: 0 -6px; }
.lo-menuhelp { margin: 3px 0 0; font-size: 13px; color: #7f8fbf; }

.lo-mode { position: absolute; top: 6px; right: 12px; margin: 0; }
.lo-mode samp {
  background: var(--lo-cyan); color: #000047;
  padding: 1px 8px; font-size: 13px; font-weight: 700;
}

/* ── Column letters and row numbers, which are scenery ─────────────────── */

.lo-colhead { display: flex; background: var(--lo-cyan); color: #000047; font-size: 13px; }
.lo-colhead > span { flex: 1 1 0; text-align: center; padding: 1px 0; border-right: 1px solid rgba(0, 0, 71, .3); }
.lo-corner { flex: 0 0 42px !important; }

.lo-num {
  display: inline-block; width: 30px;
  color: var(--lo-cyan); font-size: 13px;
  text-align: right; padding-right: 12px;
  vertical-align: top; user-select: none;
}

/* ── The sheet ─────────────────────────────────────────────────────────── */

.lo-sheet { padding: 10px 12px 14px; }
.lo-row { display: flex; gap: 0; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--lo-line); }
.lo-cellblock { flex: 1 1 auto; min-width: 0; }

.lo-sheet h1 {
  color: var(--lo-bright);
  font: 700 clamp(20px, 4vw, 30px)/1.25 inherit;
  margin: 6px 0;
}
.lo-sheet h2 { color: var(--lo-yellow); font: 700 18px/1.35 inherit; margin: 8px 0 4px; }
.lo-sheet h3 { color: var(--lo-bright); font: 700 15px/1.4 inherit; margin: 14px 0 2px; }
.lo-sheet p  { margin: 6px 0; max-width: 74ch; }
.lo-lead { color: var(--lo-bright); }
.lo-note { color: #8f9fc8; font-size: 14px; }
.lo-list { margin: 8px 0; padding: 0 0 0 22px; max-width: 74ch; }
.lo-list li { margin-bottom: 8px; }

/* The block cursor, which is the one thing on this page that has to blink. */
.lo-caret {
  display: inline-block; width: .55em; height: 1em;
  background: var(--lo-bright); margin-left: 6px;
  vertical-align: -2px;
  animation: lo-blink 1.1s steps(1, end) infinite;
}
@keyframes lo-blink { 50% { opacity: 0; } }

/* ── The worksheet that adds up ────────────────────────────────────────── */

.lo-calc { width: 100%; border-collapse: collapse; margin: 4px 0 10px; }
.lo-caption { position: absolute; left: -9999px; }   /* named already by the h2 above it */
.lo-calc th {
  text-align: left; font-weight: 400; vertical-align: top;
  padding: 8px 12px 8px 42px; border-bottom: 1px solid var(--lo-line);
  position: relative;   /* the row number hangs in this gutter */
}
.lo-calc th .lo-num { position: absolute; left: 0; top: 8px; }
.lo-calc td { width: 190px; padding: 8px 0; border-bottom: 1px solid var(--lo-line); white-space: nowrap; }
.lo-calc label { color: var(--lo-bright); display: block; }
.lo-hint { display: block; color: #8f9fc8; font-size: 13px; margin-top: 2px; max-width: 62ch; }

.lo-currency { color: var(--lo-cyan); margin-right: 4px; }
.lo-input {
  width: 150px; padding: 3px 6px;
  background: #000047; color: var(--lo-yellow);
  border: 1px solid var(--lo-cyan);
  font: inherit; font-size: 15px; text-align: right;
}
.lo-input:focus { outline: 2px solid var(--lo-yellow); outline-offset: 1px; background: #001070; }
.lo-input::placeholder { color: #5566aa; }

.lo-total-row th { border-bottom: 0; padding-top: 12px; }
.lo-total-row td { border-bottom: 0; padding-top: 12px; }
.lo-total-label { color: var(--lo-bright); font-weight: 700; }
.lo-total {
  display: inline-block; min-width: 150px; padding: 3px 8px;
  background: var(--lo-yellow); color: #000047;
  font: 700 17px/1.4 inherit; text-align: right;
  border: 1px solid var(--lo-bright);
}

/* ── The input box, which is the form ──────────────────────────────────── */

/* The double rule is two borders with a gap between them, which is what the
   box drawing characters drew and is a great deal easier to keep aligned. */
.lo-box {
  border: 3px double var(--lo-cyan);
  padding: 14px 18px 18px;
  margin: 8px 0 4px;
  background: #000060;
  max-width: 640px;
}
.lo-box h2 { margin-top: 0; }

.lo-field { margin: 0 0 12px; max-width: 520px; }
.lo-field label { display: block; color: var(--lo-cyan); font-size: 14px; margin-bottom: 3px; }
.lo-field input, .lo-field textarea {
  width: 100%; padding: 4px 7px;
  background: #000047; color: var(--lo-bright);
  border: 1px solid var(--lo-cyan);
  font: inherit; font-size: 15px;
}
.lo-field input:focus, .lo-field textarea:focus { outline: 2px solid var(--lo-yellow); outline-offset: 1px; }
.lo-field.is-bad input, .lo-field.is-bad textarea { border-color: var(--lo-red); }
.lo-field ::placeholder { color: #5566aa; }

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

.lo-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 16px 0 0; }
.lo-actions button {
  background: var(--lo-cyan); color: #000047;
  border: 0; padding: 7px 22px;
  font: 700 15px/1.3 inherit; cursor: pointer;
}
.lo-actions button:hover, .lo-actions button:focus { background: var(--lo-yellow); }

/* ── The status line at the bottom of the screen ───────────────────────── */

.lo-status {
  border-top: 1px solid var(--lo-line);
  margin: 0 12px; padding: 8px 0 4px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.lo-keys ul { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; }
.lo-keys li { color: var(--lo-cyan); font-size: 13px; }
.lo-statusnote { margin: 0; flex: 1 1 240px; color: #8f9fc8; font-size: 13px; }
.lo-flags { display: flex; gap: 8px; margin: 0; }
.lo-flags span { background: #000047; border: 1px solid var(--lo-line); color: #6f7fb0; padding: 1px 8px; font-size: 12px; }
/* Lit while the sheet has something to recalculate, which is what the real
   indicator meant. retro.js turns it on. */
.lo-flags span.is-on { background: var(--lo-green); border-color: var(--lo-green); color: #003300; }

@media (max-width: 640px) {
  .lo-num { display: none; }
  .lo-colhead { display: none; }
  .lo-calc, .lo-calc tbody, .lo-calc tr, .lo-calc th, .lo-calc td { display: block; width: auto; }
  .lo-calc td { padding-top: 4px; }
  .lo-screen { border-width: 6px; }
  body { padding: 8px 6px 30px; }
}