/* The roller blind switch: a hairline pill that is also a small window, with a roller blind inside it and the blind's
   pull cord hanging below as the knob, on pure white; the words in Archivo (a variable sans, weight 100 to 900 and
   width 62 to 125). The script unrolls the blind when night reading is on and lets the spring roll it up again. */
:root {
  --page: #ffffff;      /* the page */
  --ink: #0b0b0b;       /* the ink: words, frame, rail and cord */
  --soft: #8d8a84;      /* the quiet ink: the line under the name */
  --cloth: #f1ece2;     /* the blind's cloth */
  --slat: #d6cfc1;      /* the fine folds across the cloth */
  --accent: #ef8a3a;    /* the sun in the window and the focus ring */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow: hidden;
}

body {
  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;
  background: var(--page);
}

/* ---------------------------------------------------------------- the setting row */
.setting {
  width: min(440px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0 26px;
  border-top: 1px solid rgba(11, 11, 11, 0.12);
  border-bottom: 1px solid rgba(11, 11, 11, 0.12);
}

.setting__text {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.setting__name {
  font-size: clamp(17px, 4.6vw, 20px);
  font-weight: 560;
  font-variation-settings: 'wdth' 92;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
}

.setting__sub {
  color: var(--soft);
  font-size: clamp(12px, 3.3vw, 13px);
  font-variation-settings: 'wdth' 88;
}

.setting__subwords {
  position: relative;
  display: inline-grid;
}

.setting__s {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.setting__s[data-sub-on] {
  opacity: 0;
}

.setting__ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.setting__word {
  position: relative;
  display: inline-grid;
  min-width: 2.2em;
  justify-items: end;
  font-size: clamp(15px, 4.2vw, 17px);
}

.setting__w {
  grid-area: 1 / 1;
  line-height: 1;
}

.setting__w[data-word-off] {
  color: var(--soft);
  font-variation-settings: 'wght' 320, 'wdth' 100;
}

.setting__w[data-word-on] {
  opacity: 0;
  font-variation-settings: 'wght' 130, 'wdth' 70;
}

/* ---------------------------------------------------------------- the switch */
.switch {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  width: 104px;
  height: 56px;
  border-radius: 28px;
  cursor: pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}

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

.switch__art {
  display: block;
  width: 104px;
  height: 56px;
  overflow: visible;
}

.switch__sun {
  fill: var(--accent);
  opacity: 0.85;
}

.switch__moon {
  fill: #ece7da;
  opacity: 0;
}

.switch__cloth {
  fill: var(--cloth);
}

.switch__slats {
  fill: none;
  stroke: var(--slat);
  stroke-width: 0.6;
}

.switch__rail {
  fill: #2a2724;
}

.switch__roll {
  fill: #e6dfd1;
}

.switch__rollline {
  stroke: rgba(11, 11, 11, 0.28);
  stroke-width: 0.6;
}

.switch__track {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
}

.switch__cord {
  stroke: var(--ink);
  stroke-width: 0.8;
  stroke-linecap: round;
}

.switch__pull {
  fill: var(--ink);
}

.switch__gleam {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.7;
  stroke-linecap: round;
}