/* The airplane mode switch: a hairline track that is also a runway, and a knob with a small plane drawn inside it,
   on pure white; the words in Archivo (a variable sans, weight 100 to 900 and width 62 to 125). The script rolls the
   plane down the runway, lifts it off, keeps it hovering while airplane mode is on and lands it again. */
:root {
  --page: #ffffff;      /* the page */
  --ink: #0b0b0b;       /* the ink: words, track and plane */
  --soft: #8d8a84;      /* the quiet ink: the line under the name and the runway */
  --accent: #ff6a1f;    /* the plane in flight 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(420px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  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 {
  display: flex;
  align-items: center;
  gap: 7px;
  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;
}

.wifi {
  width: 18px;
  height: 13px;
  flex: none;
  overflow: visible;
}

.wifi__arc,
.wifi__cut {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
}

.wifi__cut {
  stroke: var(--accent);
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
}

.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__trail {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.8;
  stroke-linecap: round;
  opacity: 0;
}

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

.switch__runway {
  stroke: var(--soft);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  stroke-linecap: butt;
}

.switch__shadow {
  fill: var(--ink);
  opacity: 0.1;
}

.switch__knob {
  fill: var(--page);
  stroke: var(--ink);
  stroke-width: 1;
}

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