/* The button that rebuilds itself: a pill of blueprint blue with its words drawn in strokes of paper white. The
   strokes, the heap and the type designer's guide lines are drawn by script.js on the SVG; the pill, its depth and
   its states come from here. */
:root {
  --page: #ffffff;          /* the page */
  --pill: #173a6e;          /* the pill, blueprint blue */
  --pill-lit: #1c4583;      /* the pill under the pointer */
  --edge: #0c2148;          /* the pill's lower edge and its shadow */
  --stroke: #f5f1e6;        /* the strokes of the letters, paper white */
  --icon: #f5f1e6;          /* the strokes of the rebuild arrow */
  --done: #8fe3bd;          /* the strokes of the tick */
  --loose: #93abd4;         /* the strokes lying loose in the heap */
  --guide: #8db2ea;         /* the guide lines: baseline, x-height, cap height */
  --focus: #173a6e;         /* the ring of the keyboard's focus */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--pill);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

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

.kit {
  display: grid;
  justify-items: center;
}

/* ---------------------------------------------------------------- the pill */
.kit__btn {
  position: relative;
  display: block;
  width: 232px;              /* the script sets the real width, from the widest of the words */
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--pill);
  /* a thin lighter rim on top, a darker lip underneath, and the shadow on the page */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 -2px 0 rgba(4, 14, 34, 0.32),
    0 1px 1px rgba(12, 33, 72, 0.22),
    0 14px 26px -14px color-mix(in srgb, var(--edge) 75%, transparent);
  color: var(--stroke);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition:
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 220ms ease,
    box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .kit__btn:hover {
    background: var(--pill-lit);
  }
}

.kit__btn:active {
  transform: scale(0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(4, 14, 34, 0.32),
    0 1px 1px rgba(12, 33, 72, 0.22),
    0 8px 18px -12px color-mix(in srgb, var(--edge) 75%, transparent);
}

.kit__btn[aria-busy='true'] {
  cursor: progress;
}

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

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

/* the drawing: the strokes keep round ends, so a stroke of no length is a dot, and where two strokes meet the
   joint is round */
.kit__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.kit__pieces path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* a hair of shadow under the strokes, as if they lay on the pill */
.kit__pieces {
  filter: drop-shadow(0 1px 0.6px rgba(4, 14, 34, 0.45));
}

.kit__guides line {
  stroke: var(--guide);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: reduce) {
  .kit__btn,
  .kit__btn:active {
    transform: none;
  }

  .kit__btn:active {
    filter: brightness(0.94);
  }
}