/* The oven knob: the front of an oven in cobalt enamel on a white page, with the door's window above and the mode
   knob below. Everything is drawn at 360 units wide and scales with the oven (--u is one unit). */
:root {
  --page: #ffffff;          /* the page */
  --enamel: #23408f;        /* the oven's cobalt enamel */
  --enamel-edge: #172c66;   /* the enamel where it turns away from the light */
  --print: #f6f2e8;         /* the white printing on the enamel */
  --print-soft: #c3c8d4;    /* the smaller printing */
  --brass: #c9a45c;         /* the ring round the knob */
  --knob: #18191d;          /* the bakelite knob */
  --glass: #08090b;         /* the door's dark glass */
  --cavity: #3e444e;        /* the enamel inside the oven */
  --lamp: #ffe3c2;          /* the oven lamp's light */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

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

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

.wrap {
  width: min(360px, 100%);
  container-type: inline-size;
}

/* ---------------------------------------------------------------- the oven's front */
.oven {
  --u: calc(100cqw / 360);
  --s: calc(var(--u) * 172 / 152);   /* the dial is drawn 152 wide and shown 172 wide */
  position: relative;
  display: grid;
  gap: calc(16 * var(--u));
  padding: calc(16 * var(--u));
  border-radius: calc(26 * var(--u));
  background:
    linear-gradient(172deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0) 34%),
    linear-gradient(180deg, var(--enamel) 62%, var(--enamel-edge));
  box-shadow:
    inset 0 calc(1 * var(--u)) 0 rgb(255 255 255 / 0.28),
    inset 0 calc(-2 * var(--u)) calc(3 * var(--u)) rgb(0 0 0 / 0.22),
    0 1px 2px rgb(14 24 56 / 0.24),
    0 calc(18 * var(--u)) calc(36 * var(--u)) calc(-14 * var(--u)) rgb(14 24 64 / 0.5);
  user-select: none;
  -webkit-user-select: none;
}

/* the door's window: the dark glass, the oven behind it and the reflections are all on the canvas */
.oven__window {
  position: relative;
  aspect-ratio: 328 / 184;
  border-radius: calc(14 * var(--u));
  overflow: hidden;
  background: var(--glass);
  box-shadow: 0 0 0 calc(1 * var(--u)) rgb(0 0 0 / 0.35), 0 calc(1 * var(--u)) 0 calc(1 * var(--u)) rgb(255 255 255 / 0.12);
}

.oven__cavity {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.oven__controls {
  display: grid;
  grid-template-columns: calc(152 * var(--s)) minmax(0, 1fr);
  align-items: center;
  column-gap: calc(14 * var(--u));
}

/* ---------------------------------------------------------------- the knob and its printing */
/* the slider: the knob, its brass ring and the symbols round it. A finger turns it without scrolling the page */
.dial {
  position: relative;
  width: calc(152 * var(--s));
  aspect-ratio: 1;
  border-radius: 50%;
  outline: none;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

.dial.is-held,
.dial.is-held .icon {
  cursor: grabbing;
}

.dial__print {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tick {
  stroke: var(--print-soft);
  stroke-linecap: round;
  opacity: 0.7;
  transition: stroke 0.2s ease, opacity 0.2s ease;
}

.tick.is-on {
  stroke: var(--print);
  opacity: 1;
}

/* a symbol: its printing is soft until the knob points at it */
.icon {
  cursor: pointer;
}

.icon__art {
  color: var(--print-soft);
  opacity: 0.74;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.icon.is-on .icon__art,
.icon__art:has(.icon__word) {
  opacity: 1;
}

.icon.is-on .icon__art {
  color: var(--print);
}

.icon__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon__line.is-thick {
  stroke-width: 2.2;
}

.icon__fill {
  fill: currentColor;
}

.icon__word {
  fill: currentColor;
  font-family: 'Encode Sans Variable', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 640;
  font-stretch: 118%;
  letter-spacing: 0.02em;
}

.icon__hit {
  fill: transparent;
}

@media (hover: hover) {
  .dial:not(.is-held):not([aria-disabled='true']) .icon:hover .icon__art {
    color: var(--print);
    opacity: 1;
  }
}

/* the hub: the brass ring, the knob's shadow on it and the knob. The script scales it when the knob is pressed */
.dial__hub {
  position: absolute;
  left: calc(30 * var(--s));
  top: calc(30 * var(--s));
  width: calc(92 * var(--s));
  height: calc(92 * var(--s));
  pointer-events: none;
}

.dial__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 246 214 / 0.55), rgb(255 246 214 / 0) 42%),
    conic-gradient(from 200deg,
      color-mix(in srgb, var(--brass), #000000 42%),
      color-mix(in srgb, var(--brass), #ffffff 52%) 10%,
      color-mix(in srgb, var(--brass), #000000 22%) 22%,
      color-mix(in srgb, var(--brass), #ffffff 60%) 36%,
      color-mix(in srgb, var(--brass), #000000 36%) 50%,
      var(--brass) 64%,
      color-mix(in srgb, var(--brass), #ffffff 70%) 74%,
      color-mix(in srgb, var(--brass), #000000 32%) 88%,
      color-mix(in srgb, var(--brass), #000000 42%));
  box-shadow:
    0 0 0 calc(1 * var(--s)) rgb(10 18 44 / 0.55),
    0 calc(2 * var(--s)) calc(4 * var(--s)) rgb(6 12 34 / 0.45),
    inset 0 0 0 calc(1 * var(--s)) rgb(255 240 200 / 0.35);
}

/* the knob's own shadow, cast on the brass from a light high on the left */
.dial__shade {
  position: absolute;
  inset: calc(8 * var(--s));
  border-radius: 50%;
  box-shadow:
    calc(2 * var(--s)) calc(3 * var(--s)) calc(3 * var(--s)) rgb(0 0 0 / 0.55),
    calc(4 * var(--s)) calc(7 * var(--s)) calc(10 * var(--s)) rgb(0 0 0 / 0.32);
  transition: box-shadow 0.25s ease;
}

.dial.is-pressed .dial__shade {
  box-shadow:
    calc(1 * var(--s)) calc(1.5 * var(--s)) calc(2 * var(--s)) rgb(0 0 0 / 0.6),
    calc(2 * var(--s)) calc(4 * var(--s)) calc(6 * var(--s)) rgb(0 0 0 / 0.3);
  transition-duration: 0.12s;
}

@media (hover: hover) {
  .dial:not(.is-held):not([aria-disabled='true']):hover .dial__shade {
    box-shadow:
      calc(2.5 * var(--s)) calc(4 * var(--s)) calc(4 * var(--s)) rgb(0 0 0 / 0.5),
      calc(6 * var(--s)) calc(10 * var(--s)) calc(14 * var(--s)) rgb(0 0 0 / 0.3);
  }
}

.dial__knob {
  position: absolute;
  inset: calc(6 * var(--s));
  width: calc(80 * var(--s));
  height: calc(80 * var(--s));
  overflow: visible;
}

/* the dial answers a finger a little beyond its symbols, so each symbol is a big target */
.dial::before {
  content: '';
  position: absolute;
  inset: calc(-12 * var(--s));
  border-radius: 50%;
}

/* the keyboard's ring goes round the whole dial */
.dial::after {
  content: '';
  position: absolute;
  inset: calc(-3 * var(--s));
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--print);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.dial:focus-visible::after {
  opacity: 1;
}

html[data-using='pointer'] .dial:focus-visible::after {
  opacity: 0;
}

/* locked (aria-disabled): the knob does not turn and the printing fades */
.dial[aria-disabled='true'] {
  cursor: not-allowed;
}

.dial[aria-disabled='true'] .icon {
  cursor: not-allowed;
}

.dial[aria-disabled='true'] .dial__print {
  opacity: 0.45;
}

.dial[aria-disabled='true'] .dial__hub {
  filter: saturate(0) brightness(0.72);
}

/* ---------------------------------------------------------------- the mode, written out */
.read {
  min-width: 0;
  padding-bottom: calc(2 * var(--u));
}

.read p {
  margin: 0;
}

.read p + p {
  margin-top: calc(6 * var(--u));
}

.read__name {
  display: block;
  color: var(--print);
  font-size: calc(25 * var(--u));
  font-weight: 640;
  font-stretch: 122%;
  line-height: 1.16;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.read__name span {
  display: inline-block;
}

.read__line {
  min-height: calc(3 * max(15px, 18 * var(--u)));
  color: var(--print-soft);
  font-size: max(11px, 13 * var(--u));
  font-weight: 450;
  line-height: max(15px, 18 * var(--u));
  text-wrap: pretty;
}

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