/* The ring timer: a dark dial on a black page, a matcha arc with its knob, the time in the middle, three kinds of
   tea and the buttons under it. */
:root {
  --page: #000000;          /* the page */
  --ink: #f2f0ea;
  --muted: #8a8880;
  --track: #1b1c1a;
  --tick: #34352f;
  --accent: #b9e07a;        /* the arc, the knob, the lit ticks */
  --on-accent: #182008;
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

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

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

.timer {
  display: grid;
  justify-items: center;
  gap: 26px;
  width: min(360px, 100%);
}

/* ---------------------------------------------------------------- the dial */
.dial {
  position: relative;
  width: min(300px, 82vw);
  aspect-ratio: 1;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

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

.dial__art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dial__track {
  fill: none;
  stroke: var(--track);
  stroke-width: 16;
}

.dial__ticks line {
  stroke: var(--tick);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke 0.25s;
}

.dial__ticks line.is-lit {
  stroke: var(--accent);
}

.dial__arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 16;
  stroke-linecap: round;
}

.dial__rays line {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
}

/* the knob: on the end of the arc, moved by the script */
.dial__knob {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 5px var(--accent), 0 6px 18px rgba(0, 0, 0, 0.6);
  outline: none;
}

.dial__knob:focus-visible {
  box-shadow: 0 0 0 5px var(--accent), 0 0 0 8px var(--page), 0 0 0 10px var(--ink);
}

html[data-using='pointer'] .dial__knob:focus-visible {
  box-shadow: 0 0 0 5px var(--accent), 0 6px 18px rgba(0, 0, 0, 0.6);
}

.dial__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  pointer-events: none;
}

.dial__time {
  display: flex;
  font-size: clamp(48px, 15vw, 64px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* every figure in its own window, so it can roll */
.digit {
  position: relative;
  display: block;
  width: 0.62em;
  height: 1.05em;
  overflow: hidden;
  text-align: center;
}

.digit--colon {
  width: 0.3em;
}

.digit > span {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.dial__label {
  min-height: 1.3em;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

/* ---------------------------------------------------------------- the teas */
.teas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.tea {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 96px;
  padding: 9px 14px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  box-shadow: inset 0 0 0 1.5px var(--tick);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.tea b {
  font-size: 15px;
  font-weight: 650;
}

.tea small {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.3s;
}

@media (hover: hover) {
  .tea:hover {
    box-shadow: inset 0 0 0 1.5px var(--muted);
  }
}

.tea[aria-pressed='true'] {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.tea[aria-pressed='true'] small {
  color: rgba(24, 32, 8, 0.7);
}

/* ---------------------------------------------------------------- the buttons */
.controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ctl {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ctl--ghost {
  width: 48px;
  height: 48px;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--tick);
  transition: box-shadow 0.25s;
}

@media (hover: hover) {
  .ctl--ghost:hover {
    box-shadow: inset 0 0 0 1.5px var(--muted);
  }
}

.ctl--ghost svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ctl--main {
  width: 68px;
  height: 68px;
  background: var(--accent);
  color: var(--on-accent);
  transition: transform 0.2s;
}

.ctl--main:active {
  transform: scale(0.94);
}

.ctl--main svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.ctl:focus-visible,
.tea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

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

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