/* The taut wire switch: on black, a hairline of wire between two posts and a bead threaded on it; the name above and
   the word On or Off beside it, in Archivo (a variable sans, weight 100 to 900 and width 62 to 125). The script draws
   the wire, moves the bead and sets the weight and the width of the word. */
:root {
  --page: #000000;          /* the page */
  --ink: #f1eee7;           /* the name, the word On and the posts */
  --muted: #8b877e;         /* the word Off */
  --wire: #aaa69d;          /* the wire */
  --bead: #f1eee7;          /* the bead, off */
  --accent: #ff5a1f;        /* the bead, on */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

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

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Archivo Variable', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

/* ---------------------------------------------------------------- the name and the word */
.dnd {
  display: grid;
  gap: 2px;
}

/* the name starts where the wire is tied */
.dnd__name {
  justify-self: start;
  padding-left: 10px;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.004em;
  font-variation-settings: 'wght' 470, 'wdth' 100;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.dnd__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* the word, On or Off: two words in the same place, one fading into the other */
.dnd__state {
  position: relative;
  flex: none;
  width: 2.3em;
  height: 56px;
  font-size: 24px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.dnd__word {
  position: absolute;
  left: 0;
  top: 50%;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.012em;
  margin-top: -0.52em;
}

.dnd__word--off {
  color: var(--muted);
  font-variation-settings: 'wght' 320, 'wdth' 100;
}

.dnd__word--on {
  color: var(--ink);
  font-variation-settings: 'wght' 760, 'wdth' 100;
  opacity: 0;
}

/* ---------------------------------------------------------------- the switch */
.wire {
  position: relative;
  flex: none;
  display: block;
  width: 184px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  /* the bead can be pulled up and down as well as along, so the finger does not scroll the page here */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.wire.is-dragging {
  cursor: grabbing;
}

.wire:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}

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

.wire__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.wire__line {
  fill: none;
  stroke: var(--wire);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wire__post {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-linecap: butt;
}

.wire__ball {
  fill: var(--bead);
}

.wire__ball--on {
  fill: var(--accent);
  opacity: 0;
}

@media (max-width: 300px) {
  .wire {
    width: 156px;
  }
}