/* 1999.LOC - the line counter's face.
 *
 * THE MS-DOS PROMPT, which is where anybody counting lines in 1999 would have
 * been standing. Black, grey-white fixed pitch, one green for what the machine
 * is telling you and one amber for what it is warning you about. The output is
 * a run rather than a report: it scrolls, it says what it skipped, and the
 * number arrives at the end of it.
 */

/* ---- the menu bar, pinned to the window --------------------------- */
[data-app="code"] .app-window > .dos-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 2px 4px;
  background: #d4d0c8;
  border-bottom: 1px solid #808080;
  /* Stated rather than inherited: this sits outside the panels, so it would
     otherwise come out in the page's serif. */
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  line-height: 1.3;
  color: #000000;
}
[data-app="code"] .app-window > .dos-menu .menu-title {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  /* A thumb needs a target. */
  min-height: 26px;
}
[data-app="code"] .client-title { background: linear-gradient(90deg,#000000 0%,#303030 100%); color: #ffffff; }

/* ---- the body ------------------------------------------------------ */
[data-app="code"] .app-body {
  background: #000000;
  color: #c0c0c0;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
}
/* The gutter. The shell sets `padding: 0` on an application's body, for the
   programs that lay themselves out in bands and bring their own spacing; this
   one is content, and with no gutter every line starts hard against the tube.
   A plain `[data-app] .app-body` loses to that shell rule, which carries an
   element plus two classes, which is why the padding this asked for never
   arrived. Naming the desk the window sits on wins on class count without
   reaching outside the app. */
[data-app="code"] .desk-shell .app-window > .app-body { padding: 8px 14px; }

[data-app="code"] .app-body h3 {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #00a800;
  margin: 12px 0 6px 0;
}
[data-app="code"] .app-body p,
[data-app="code"] .app-body label,
[data-app="code"] .app-body li,
[data-app="code"] .app-body legend {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #c0c0c0;
}
[data-app="code"] .app-body .note { color: #808080; }
[data-app="code"] .app-body > p,
[data-app="code"] .app-body > div > p { max-width: 620px; }

/* What to do on this screen. */
[data-app="code"] .app-body .dos-hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 10px 0;
  padding: 6px 9px;
  background: #ffffe1;
  border: 1px solid #808080;
  color: #000000;
  font-size: 11.5px;
  line-height: 1.45;
  max-width: 820px;
}
[data-app="code"] .app-body .dos-hint,
[data-app="code"] .app-body .dos-hint * { color: #000000; }
[data-app="code"] .app-body .dos-hint > .dos-hint-mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00a800;
  color: #ffffff;
  font-weight: bold;
  font-style: italic;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

/* ---- controls ------------------------------------------------------ */
[data-app="code"] button:not(.notice-x):not(.menu-title):not(.win-min) {
  border: 2px outset #d4d0c8;
  background: #d4d0c8;
  color: #000000;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  padding: 3px 12px;
  cursor: pointer;
}
[data-app="code"] button:not(.notice-x):active { border-style: inset; }
[data-app="code"] select,
[data-app="code"] input[type="text"],
[data-app="code"] input[type="number"],
[data-app="code"] textarea {
  border: 2px inset #d4d0c8;
  background: #000000;
  color: #000000;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
}
[data-app="code"] .dropzone {
  background: #000000;
  border: 2px inset #d4d0c8;
  color: #000000;
}
[data-app="code"] fieldset {
  border: 2px groove #ffffff;
  background: #d4d0c8;
  color: #000000;
  margin: 0 0 10px 0;
  padding: 8px 10px;
  max-width: 620px;
}
/* A fieldset is a light tray, even in a program whose chrome is dark, so
   everything inside it goes back to black. Said with .app-body in the
   selector on purpose: the body rule above sets a light ink for the dark
   chrome and is an attribute plus a class plus an element, so a plainer
   `fieldset label` loses to it and the tray comes out grey on grey. */
[data-app="code"] .app-body fieldset p,
[data-app="code"] .app-body fieldset label,
[data-app="code"] .app-body fieldset legend,
[data-app="code"] .app-body fieldset span,
[data-app="code"] .app-body fieldset li,
[data-app="code"] .app-body fieldset .note { color: #000000; }
/* The groove border is 2px, and a legend with no ground of its own lets that
   line run through the top of the letters. Its own background sits it cleanly
   on the border, the way a labelled frame is drawn. */
[data-app="code"] .app-body fieldset legend { background: #d4d0c8; }

/* The boxes the tool draws into. */
[data-app="code"] .notice-box,
[data-app="code"] .app-body details {
  background: #ffffe1;
  border: 1px solid #808080;
  max-width: 820px;
}
[data-app="code"] .notice-box *,
[data-app="code"] .app-body details * { color: #000000; }

/* ---- THE RUN -------------------------------------------------------
   Everything the counter says is terminal output: fixed pitch, on black,
   scrolling. The result is not a card, it is the last line of a run. */
[data-app="code"] .app-body,
[data-app="code"] #report,
[data-app="code"] #result,
[data-app="code"] code,
[data-app="code"] pre {
  font-family: "Courier New", Courier, monospace;
}
[data-app="code"] .app-body h3 { font-weight: normal; text-transform: uppercase; letter-spacing: 1px; }
[data-app="code"] #report table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #303030;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}
[data-app="code"] #report th {
  background: #101010;
  color: #00d000;
  border: 1px solid #303030;
  text-align: left;
  font-weight: normal;
}
[data-app="code"] #report td {
  background: #000000;
  color: #c0c0c0;
  border: 1px solid #202020;
}
/* A number in a report lines up on the right, which is half of why these
   were monospaced in the first place. */
[data-app="code"] #report td.n { text-align: right; color: #ffffff; }

/* Every other table on this screen too, not just the count. The golf board
   is a table this page draws and it was inheriting the base stylesheet's
   pale headings, which on black is a heading you cannot read. */
[data-app="code"] .app-body table {
  border-collapse: collapse;
  border: 1px solid #303030;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}
[data-app="code"] .app-body th,
[data-app="code"] .app-body thead th,
[data-app="code"] .app-body th[scope="row"] {
  background: #101010;
  color: #00d000;
  border: 1px solid #303030;
  text-align: left;
  font-weight: normal;
}
[data-app="code"] .app-body td {
  background: #000000;
  color: #c0c0c0;
  border: 1px solid #202020;
}
[data-app="code"] .app-body td.n { text-align: right; color: #ffffff; }
[data-app="code"] input[type="text"],
[data-app="code"] select {
  background: #000000;
  color: #00d000;
  border: 1px solid #00a800;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
}
/* Without this line the golf-challenge dropdown inherited the grouped
   black-on-black rule above and was invisible (1:1) on every load — the
   readable override named only input[type="text"]. #00d000 on #000000 is
   about 9:1. */
[data-app="code"] button:not(.notice-x):not(.menu-title):not(.win-min) {
  border: 1px solid #505050;
  background: #202020;
  color: #d0d0d0;
}
[data-app="code"] button:not(.notice-x):hover:not(:disabled) { background: #2c2c2c; }
/* The site-wide focus ring is 2px solid black, which on this face's black
   body marks the focused control with nothing at all. Phosphor green, like
   everything else the terminal draws attention with. */
[data-app="code"] button:focus-visible,
[data-app="code"] select:focus-visible,
[data-app="code"] input:focus-visible,
[data-app="code"] a:focus-visible {
  outline: 2px solid #00d000;
  outline-offset: 1px;
}
[data-app="code"] .status { color: #00d000; }
[data-app="code"] .error { color: #ffb000; }
[data-app="code"] a { color: #00d0d0; }

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 700px) {
  [data-app="code"] .desk-shell .app-window > .app-body { padding: 6px 10px; }
  [data-app="code"] .app-window > .dos-menu span { padding: 2px 5px; }
}