/* The lab's shared look: this page, the status page, and whatever replaces
   them. Linked by /status/ too, so a lab is visually one thing from the
   first boot rather than after somebody writes a stylesheet.
   No JavaScript, no webfonts, no build step.

   THE PALETTE LIVES HERE AND ONLY HERE. The status page consumes these as
   var(--ok, #fallback) so that a lab with no stylesheet is still readable
   and a lab with one cannot drift into two colour schemes. Change a colour
   here and both surfaces change together. */

:root {
  color-scheme: dark;              /* say so, so scrollbars and form
                                      controls agree with the page */
  --bg:     #0b0e14;               /* deep blue-black, not pure black */
  --fg:     #c5cddc;               /* cool slate, high contrast on bg */
  --dim:    #6b7694;               /* labels, prefixes, secondary text */
  --bright: #e6ecf7;               /* headings */
  --accent: #78a9ff;               /* links */
  --rule:   #1e2430;               /* hairlines */

  /* Status semantics. Also the gauge gradient, in that order. */
  --ok:     #9fd47f;
  --info:   #7ad3f0;
  --warn:   #e2b062;
  --bad:    #f2788e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  -webkit-text-size-adjust: 100%;
}

.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 3rem 1.25rem 4rem;      /* side padding never collapses: phones */
}
.content { width: 100%; max-width: 34rem; }

h1 {
  color: var(--bright);
  font-size: clamp(1rem, 3.4vw, 1.15rem);
  font-weight: 600;
  margin: 0 0 1.25rem;
}
h1::before { content: "$ "; color: var(--dim); }

h2 {
  color: var(--bright);
  font-size: 0.95em;
  font-weight: 600;
  margin: 1.9rem 0 0.7rem;
}
h2::before { content: "# "; color: var(--dim); }

p { margin: 0 0 1rem; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover, a:focus-visible { border-bottom-color: currentColor; }

ul, ol { margin: 0 0 1rem; padding: 0; list-style: none; }
li { margin: 0 0 0.3rem; }
ul li::before { content: "- "; color: var(--dim); }
ol { counter-reset: step; }
ol li::before { counter-increment: step; content: counter(step) ". "; color: var(--dim); }

code { color: var(--bright); }

/* A prompt the reader is meant to copy. Deliberately looks like a terminal
   line rather than a quote: it is one. */
.ask {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 2px solid var(--accent);
  background: #10141d;
  color: var(--fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ask::before { content: "> "; color: var(--accent); }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

.muted { color: var(--dim); }
.foot  { margin: 2rem 0 0; font-size: 0.8em; color: var(--rule); }
.back  { color: var(--dim); font-size: 0.85em; display: inline-block; margin: 0 0 1rem; }
.back:hover { color: var(--fg); }