/* The spirit level switch: three switches on a black page, each one a small torpedo level in anodised aluminium with
   rubber end caps and a glowing yellow-green vial, next to its name; the script draws the levels. */
:root {
  --page: #000000;            /* the page */
  --ink: #f4f5f7;             /* a name whose switch is on */
  --ink-off: #9ea3ab;         /* a name whose switch is off */
  --focus: #d4ef5e;           /* the ring of the keyboard's focus, the colour of the lit spirit */

  --fluid-off: #bfe29e;       /* the spirit of a level that is off, in the middle of the vial: cooler */
  --fluid-off-deep: #3a6f47;  /* the same spirit at the edges of the vial */
  --fluid-on: #e3f55c;        /* the spirit of a level that is on: warmer, greener, brighter */
  --fluid-on-deep: #6f9a14;   /* the same spirit at the edges of the vial */
  --bubble: #f7ffe6;          /* the air in the bubble, lit from behind */
  --light: #ffffff;           /* the glints on the glass and on the bubble */
  --meniscus: #142008;        /* the dark ring round the bubble */
  --mark: #18210c;            /* the marks engraved on the vial */

  --chamfer: #eef1f5;         /* machined edges: bare aluminium where the anodising is cut */
  --recess: #050607;          /* the window the vial sits in */
  --recess-lo: #16191d;       /* the lower wall of that window, catching some light */
  --cap-hi: #55585f;          /* the rubber end caps: their lit top */
  --cap: #222327;             /* the rubber end caps */
  --cap-lo: #0b0b0d;          /* the rubber end caps: their underside */
  --pin: #8d939b;             /* the steel pin the level rocks on */
  --pin-lo: #1d1f23;          /* the pin's shaded side */

  --cobalt-hi: #8eaee6;       /* the first level, anodised cobalt: its lit top edge */
  --cobalt: #31528f;          /* its face */
  --cobalt-lo: #13213f;       /* its underside */
  --graphite-hi: #b4b9c1;     /* the second level, anodised graphite: its lit top edge */
  --graphite: #4d525a;        /* its face */
  --graphite-lo: #1d1f23;     /* its underside */
  --ember-hi: #ffc29b;        /* the third level, anodised orange: its lit top edge */
  --ember: #c2531d;           /* its face */
  --ember-lo: #4a1906;        /* its underside */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Geist Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 40px 16px;
}

/* ---------------------------------------------------------------- the three switches */
/* two columns shared by the rows: the names on the left, the levels lined up on the right */
.lv {
  --lw: min(224px, calc(100vw - 150px));   /* the width of a level; it is 56 pixels tall at 224 */
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: clamp(16px, 4vw, 30px);
  row-gap: 22px;
}

.lv__row {
  --lit: 0;                 /* set by the script: how far the bubble has come up to the on marks */
  --metal-hi: var(--graphite-hi);
  --metal: var(--graphite);
  --metal-lo: var(--graphite-lo);
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

.lv__row--cobalt {
  --metal-hi: var(--cobalt-hi);
  --metal: var(--cobalt);
  --metal-lo: var(--cobalt-lo);
}

.lv__row--ember {
  --metal-hi: var(--ember-hi);
  --metal: var(--ember);
  --metal-lo: var(--ember-lo);
}

/* the name brightens as the bubble arrives at the on marks */
.lv__name {
  font-size: 16px;
  font-weight: 520;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--ink) calc(var(--lit) * 100%), var(--ink-off));
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- a level */
/* the button keeps still and takes the pointer; the drawing in it rocks about the pin under the vial. The drawing's
   box is cut to the level tipped all the way, so on or off it fills the 56 pixels and no more */
.lv__switch {
  position: relative;
  display: block;
  width: var(--lw);
  height: calc(var(--lw) * 57 / 228);
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: none;
  cursor: grab;
  /* a finger dragged across tips the level; up and down the page still scrolls */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.lv__switch.is-held {
  cursor: grabbing;
}

.lv__switch:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

html[data-using='pointer'] .lv__switch:focus-visible {
  outline: none;
}

.lv__art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 77.19%;
  will-change: transform;
  pointer-events: none;
}