/* The enamel avatar: a white profile card on a white page, with a round recess for a cloisonné token in gold. */
:root {
  --page: #ffffff;          /* the page */
  --card: #ffffff;          /* the card */
  --edge: #e8e7ed;          /* the card's border */
  --ink: #1c1b21;           /* text, the Save button */
  --muted: #76747f;         /* the second line */
  --soft: #f1f0f4;          /* the Cancel button */
  --slot: #eceaf0;          /* the floor of the recess */
  --gold: #c9a24f;          /* the token's metal */
  --gold-hi: #fff1c2;       /* the metal where the light shines on it */
  --gold-lo: #6f521c;       /* the metal in the shade */
  --glow: #ff6a1a;          /* the token's glow in the kiln */
  --ring: #b48a33;          /* the ring round the choice */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

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

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

/* ---------------------------------------------------------------- the card */
.card {
  position: relative;
  width: min(352px, 100%);
  padding: 20px 20px 20px;
  border: 1px solid var(--edge);
  border-radius: 28px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(24, 20, 40, 0.04), 0 22px 44px -22px rgba(24, 20, 40, 0.2);
}

/* the token, in its recess. The canvas is wider than the token: the kiln's glow spills onto the card */
.card__coin {
  position: relative;
  display: grid;
  place-items: center;
  height: 136px;
}

.card__slot {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--slot);
  box-shadow: inset 0 2px 5px rgba(20, 16, 32, 0.16), inset 0 0 0 1px rgba(20, 16, 32, 0.05), 0 1px 0 rgba(255, 255, 255, 0.9);
}

.card__canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  pointer-events: none;
}

.card__token {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 122px;
  height: 122px;
  margin: -61px 0 0 -61px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.card__token:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

/* ---------------------------------------------------------------- what is under it: the name, or the choices */
.card__body {
  position: relative;
  z-index: 1;
  display: grid;
  margin-top: 16px;
}

.rest,
.editor {
  grid-area: 1 / 1;
  min-width: 0;
}

.rest {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.rest__name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.015em;
}

.rest__meta {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}

.rest .btn {
  min-width: 148px;
  margin-top: 18px;
}

.editor {
  display: grid;
  gap: 10px;
  margin: 0;
}

.editor__row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* an animal: a little token over a real radio button (smaller on a very narrow screen) */
.pick {
  position: relative;
  display: block;
  flex: 0 1 44px;
  min-width: 30px;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pick input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pick__face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.pick__face svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pick__face .bg,
.pick__face .ink {
  transition: fill 0.35s ease, stroke-width 0.35s ease;
}

/* the ring round the one chosen */
.pick::after,
.tint::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--ring);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
  pointer-events: none;
}

.pick.is-on::after,
.tint.is-on::after {
  opacity: 1;
  transform: scale(1);
}

/* a colour: a bar of enamel in a gold frame (narrower if there are more than six) */
.tint {
  position: relative;
  display: block;
  flex: 0 1 44px;
  min-width: 18px;
  height: 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tint::after {
  border-radius: 12px;
}

.tint input {
  position: absolute;
  inset: -6px 0;
  z-index: 1;
  width: 100%;
  height: calc(100% + 12px);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.tint__chip {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: var(--c);
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 3px rgba(60, 40, 10, 0.18);
  transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1);
}

@media (hover: hover) {
  .pick:not(.is-on):hover .pick__face,
  .tint:not(.is-on):hover .tint__chip {
    transform: translateY(-2px);
  }
}

.pick input:focus-visible ~ .pick__face,
.tint input:focus-visible ~ .tint__chip {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

.tint input:focus-visible ~ .tint__chip {
  outline-offset: 7px;
}

/* while the save is on its way the choices are locked, and step back */
.editor__row {
  transition: opacity 0.25s ease;
}

.editor__row:disabled {
  opacity: 0.5;
}

fieldset:disabled .pick,
fieldset:disabled .tint,
fieldset:disabled input {
  cursor: default;
}

/* ---------------------------------------------------------------- the buttons */
.editor__actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.editor__actions .btn {
  flex: 1;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font: 500 15px/1 'Lexend Variable', system-ui, sans-serif;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.16s ease-out, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.97);
}

.btn--line {
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px #d9d7df;
}

.btn--soft {
  background: var(--soft);
  color: var(--ink);
}

.btn--ink {
  background: var(--ink);
  color: #ffffff;
}

@media (hover: hover) {
  .btn--line:hover {
    box-shadow: inset 0 0 0 1px #b9b6c2;
  }

  .btn--soft:hover {
    background: #e7e6ec;
  }

  .btn--ink:hover {
    background: #34323c;
  }
}

.btn[aria-disabled='true'] {
  cursor: default;
}

.btn--soft[aria-disabled='true'] {
  color: #a9a7b1;
}

.btn--ink[aria-disabled='true'] {
  transform: none;
}

.btn__label {
  display: inline-block;
}

.btn__tick {
  display: none;
  width: 18px;
  height: 18px;
  margin-left: -4px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn--ink.is-done .btn__tick {
  display: block;
}

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

html[data-using='pointer'] .btn:focus-visible,
html[data-using='pointer'] .card__token:focus-visible,
html[data-using='pointer'] .pick input:focus-visible ~ .pick__face,
html[data-using='pointer'] .tint input:focus-visible ~ .tint__chip {
  outline: none;
}

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