/* The cake slice rating: a question, a strawberry fraisier on a porcelain cake stand, a plate and a cake server, and a
   word, on a white page. The sponge is golden, the cream a warm ivory, the strawberries red with a pale heart, the top
   a pink glaze; the china is white with a gold line, the server steel with a walnut handle. The script reads every
   colour below, so changing them here repaints the drawing. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #2b1a1e;           /* the question, the word */
  --muted: #8f8387;         /* the thanks, the hint before a pick */
  --crust: #d9a058;         /* the sponge seen on the outside of the cake */
  --sponge: #f1c97c;        /* the sponge where it is cut */
  --pore: #c48a3c;          /* the little holes in the sponge */
  --cream: #fbefd7;         /* the cream between the layers */
  --berry: #d3283f;         /* the strawberries' skin */
  --berry-flesh: #f17784;   /* the strawberries' flesh, cut */
  --berry-core: #fde1dc;    /* the strawberries' pale heart */
  --glaze: #ee7f9a;         /* the pink glaze on top */
  --glaze-edge: #c64f6c;    /* the lines where the top is cut */
  --piping: #fff7ea;        /* the piped cream on every slice */
  --leaf: #5c8c3a;          /* the strawberries' leaves */
  --china: #f6f4f1;         /* the stand and the plate */
  --china-shade: #d4cec6;   /* their shaded side */
  --gold: #c39a4e;          /* the gold line on the china */
  --steel: #c9ced4;         /* the server's blade */
  --steel-light: #f4f6f8;   /* the light on the blade */
  --steel-dark: #7b838c;    /* the blade's edge */
  --handle: #4a2a1c;        /* the server's walnut handle */
  --handle-light: #8c5b3d;  /* the light on the handle */
  --shadow: #3a2320;        /* the shadows, used see-through */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

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

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

.cake {
  display: grid;
  justify-items: center;
  width: min(400px, 100%);
  margin: 0;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

.cake__ask {
  margin: 0 0 10px;
  font-size: clamp(23px, 6.4vw, 27px);
  font-weight: 560;
  font-variation-settings: 'opsz' 72, 'SOFT' 60;
  line-height: 1.12;
  letter-spacing: -0.012em;
}

/* ---------------------------------------------------------------- the cake */
.cake__row {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
  touch-action: pan-y;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cake__art {
  display: block;
  width: 100%;
  aspect-ratio: 332 / 142;
}

/* the real choices: five radio buttons lying over the drawing, see-through. The hand works on the cake, the keyboard
   and screen readers on the radio buttons */
.cake__choices {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--n, 5), 1fr);
  pointer-events: none;
}

.cake__choices label {
  position: relative;
}

.cake__choices input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
}

/* the keyboard's ring: round the whole drawing (the slice it stands for is the one raised) */
.cake__row:has(input:focus-visible)::after {
  content: '';
  position: absolute;
  inset: -4px -6px;
  border-radius: 22px;
  box-shadow: 0 0 0 2px var(--ink);
  pointer-events: none;
}

/* ---------------------------------------------------------------- the word and the thanks */
.cake__word {
  height: 36px;
  margin: 6px 0 0;
  font-size: 29px;
  line-height: 36px;
  font-style: italic;
}

.cake__word span {
  display: inline-block;
  font-weight: 480;
}

.cake__word .is-idle {
  color: var(--muted);
  font-size: 21px;
  font-weight: 440;
}

.cake__thanks {
  min-height: 22px;
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 450;
  font-variation-settings: 'opsz' 14;
  color: var(--muted);
}