/* The windscreen wiper cleanup: a rainy windscreen at night, alone on a black page; under it one line of words with
   the percentage and the pill. The glass, the city lights behind it, the drops and the wipers are painted by
   script.js with these colours. */
:root {
  --page: #000000;          /* the page */
  --ink: #f2f0ea;           /* the words */
  --muted: #8b8984;         /* the quiet words */
  --ok: #8fe3b6;            /* cache cleared */
  --sky-top: #04070f;       /* the night sky behind the glass, at the top */
  --sky: #0d1730;           /* the sky lower down */
  --haze: #2d2340;          /* the glow of the city on the horizon */
  --road: #07070a;          /* the wet road */
  --lamp: #ffb35a;          /* the street lamps */
  --tail: #ff4558;          /* the tail lights */
  --cool: #cfe1ff;          /* the headlights and the shop windows */
  --signal: #3ff0a2;        /* the traffic light */
  --neon: #38c9d6;          /* a neon sign far away */
  --mist: #9fb3d1;          /* the mist on the wet glass */
  --wiper: #0c0d10;         /* the wiper arms and blades */
  --wiper-edge: #5d6370;    /* the light on their edges */
  --button: #f2f0ea;        /* the pill */
  --button-ink: #0b0b0c;    /* its words */
  --line: #3a3936;          /* the ring round the quiet pill */
  --focus: #ffb35a;         /* the keyboard's focus ring */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap, no zoom */
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', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

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

/* ---------------------------------------------------------------- the windscreen */
.wipe {
  display: grid;
  width: min(380px, 100%);
}

/* the drawing is 380 by 160 units and scales with the width */
.wipe__glass {
  position: relative;
  width: 100%;
  aspect-ratio: 380 / 160;
}

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

/* ---------------------------------------------------------------- the words */
.wipe__info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: end;
  margin: 14px 6px 0;
}

.wipe__title,
.wipe__meta,
.wipe__pct {
  margin: 0;
}

.wipe__title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 22px;
  font-size: 16px;
  font-weight: 640;
  font-stretch: 88%;
  line-height: 22px;
  letter-spacing: -0.006em;
  white-space: nowrap;
}

.wipe__meta {
  grid-column: 1;
  min-width: 0;
  height: 19px;
  font-size: 13.5px;
  font-weight: 450;
  font-stretch: 96%;
  line-height: 19px;
  color: var(--muted);
  white-space: nowrap;
}

.wipe__swap {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

/* the percentage keeps its width while the figures change, and narrows on the width axis */
.wipe__pct {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-width: 2.6em;
  font-size: 34px;
  font-weight: 560;
  font-stretch: 72%;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0;
}

.wipe[data-mode='done'] .wipe__title {
  color: var(--ok);
}

/* the tick of the cleared cache, drawn in by script.js */
.wipe__tick {
  display: none;
  flex: none;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--ok);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.wipe[data-mode='done'] .wipe__tick {
  display: block;
}

/* ---------------------------------------------------------------- the pill */
.wipe__buttons {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* the fill is a layer of its own that swells past the edge with a bounce, and the words widen on the width axis of
   the font; pressed, the pill squashes a little */
.pill {
  position: relative;
  display: inline-grid;
  place-items: center;
  height: 44px;
  min-width: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--button-ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 620;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  transition: color 0.25s ease;
}

.pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--button);
  transition: inset 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, box-shadow 0.25s ease;
}

.pill__label {
  display: inline-block;
  font-stretch: 84%;
  transition: font-stretch 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* while the wipers run the pill steps back: transparent with a ring, and it stops */
.pill.is-quiet {
  color: var(--ink);
}

.pill.is-quiet::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line);
}

@media (hover: hover) and (pointer: fine) {
  .pill:hover::before {
    inset: -2px -5px;
  }

  .pill:hover .pill__label {
    font-stretch: 100%;
  }

  .pill.is-quiet:hover::before {
    background: color-mix(in srgb, var(--line) 45%, transparent);
  }
}

.pill:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .pill::before,
  .pill__label {
    transition: none;
  }
}