/* The viewer. Utomaton-840's screen and rulers (from its style.css), on a
   page that sits in labofbabel.org's type and palette. */

@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --bg: #0d1014;
  --text: #e9e9e9;
  --muted: #909090;
  --line: #555;
  --line-faint: #2a2f35;
  --link: #93b7d9;
  --warn: #d9b893;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* the installation's screen */
  --bezel: 8px;
  --screen: min(92vw, 640px);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.warn { color: var(--warn); }

.viewer { width: var(--screen); margin: 0 auto; padding: 0 0 48px; }
.top { padding: 16px 0 24px; color: var(--muted); font-size: 13px; }
.top a { color: var(--text); }

/* The screen, as on the installation: a dark bezel with a little radius, a
   round canvas, and a soft inner shadow over its edge (an overlay, since a
   canvas paints over its own inset shadow). */
.screen {
  position: relative;
  width: var(--screen); aspect-ratio: 1;
  padding: var(--bezel);
  background: #141414;
  border: 1px solid #333;
  border-radius: 32px;
}
#uto { display: block; width: 100%; height: 100%; background: #000; border-radius: 50%; pointer-events: none; }
.screen::after {
  content: ''; position: absolute; inset: var(--bezel);
  border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 3px 40px rgba(0, 0, 0, 0.5), inset 0 3px 40px rgba(0, 0, 0, 0.5);
}
.screen-note { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20%; text-align: center; color: var(--muted); }

.status { margin: 16px 0 20px; color: var(--muted); font-size: 13px; min-height: 1.5em; }
.status .coord { font-family: var(--mono); color: var(--text); }

/* One single-layer ruler per axis, stacked. */
.axes { display: flex; flex-direction: column; gap: 14px; }
.axis-readout { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; font-family: var(--mono); font-size: 13px; }
.axis-name { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; width: 5.5em; }
.axis-pos { color: var(--text); }
.axis-limit { color: var(--muted); }

.ruler { height: 56px; border: 1px solid var(--line); position: relative; }
.ruler > .oomph { width: 100%; height: 100%; }
/* oomph themed into the instrument (its own variables). Oomph adds .oomph to
   this element and injects its light defaults later, so both classes win. */
.ruler, .ruler.oomph {
  --oomph-bg: #000;
  --oomph-edge: #333;
  --oomph-minor-color: #3a3a3a;
  --oomph-mid-color: #666;
  --oomph-major-color: #aaa;
  --oomph-major-width: 1px;
  --oomph-label-bg: #000;
  --oomph-label-color: #777;
  --oomph-tooltip-bg: #111;
  --oomph-tooltip-color: #ddd;
  --oomph-stack-size: 56px;
}

/* The algorithm, in a box framed like the screen. */
.algorithm { margin-top: 24px; }
.expr-box { padding: var(--bezel); background: #0e0e0e; border: 1px solid #333; border-radius: 12px; }
#expr { border-radius: 8px; overflow: hidden; min-height: 80px; }
.expr-note { color: var(--muted); text-align: center; }