/* The guilloché payment: a card payment alone on a white page, with the shop and the amount above, the engraved plate
   in the middle and the pill at the foot. The pattern is engraved by script.js on the canvas in the colours below. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #141414;           /* the words */
  --muted: #86827a;         /* the quiet words */
  --ghost: #ece8e1;         /* the pattern not engraved yet */
  --band: #0b6e57;          /* the woven band, engraved while the card is authorized */
  --rosette: #c0612b;       /* the rosette, engraved while the bank checks */
  --star: #1b2440;          /* the star in the middle, engraved while the payment is confirmed */
  --graver: #141414;        /* the graver's hairline */
  --error: #d93a2b;         /* the bank did not answer */
  --ok: #0b8a5f;            /* paid */
  --button: #141414;        /* the pill */
  --button-ink: #ffffff;    /* its words */
}

* {
  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: 'Schibsted Grotesk 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 words */
.gp {
  display: grid;
  width: min(380px, 100%);
}

.gp__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.gp__words {
  min-width: 0;
}

.gp__title,
.gp__meta {
  margin: 0;
  white-space: nowrap;
}

.gp__title {
  font-size: 17px;
  font-weight: 620;
  line-height: 22px;
  letter-spacing: -0.015em;
}

.gp__meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 450;
  line-height: 17px;
}

.gp__swap {
  display: inline-block;
}

.gp[data-mode='lost'] .gp__title {
  color: var(--error);
}

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

/* the amount, in a soft engraver's serif */
.gp__amount {
  flex: none;
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 30px;
  font-weight: 380;
  font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 0;
  line-height: 32px;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------------------------------------------------------------- the plate */
.gp__plate {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: 14px;
  aspect-ratio: 380 / 250;
}

.gp__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- the foot */
.gp__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.gp__status {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  padding: 3px 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 450;
  line-height: 17px;
  white-space: nowrap;
}

.gp[data-mode='running'] .gp__status {
  font-variant-numeric: tabular-nums;
}

.gp[data-mode='lost'] .gp__status {
  color: var(--error);
}

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

/* the tick before Paid: it takes no room until it is drawn */
.gp__tick {
  flex: none;
  width: 0;
  height: 16px;
  fill: none;
  stroke: var(--ok);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* the pill: its fill swells from the middle with a small give and its words open up a little */
.pill {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  min-width: 124px;
  height: 46px;
  padding: 0 22px;
  overflow: hidden;
  border: 0;
  border-radius: 23px;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.pill__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--button);
  transform: scale(1);
  transition: transform 0.55s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.2s ease;
}

.pill__label {
  position: relative;
  display: inline-block;
  color: var(--button-ink);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: letter-spacing 0.5s cubic-bezier(0.3, 1.5, 0.5, 1), color 0.25s ease;
}

.pill.is-quiet .pill__fill {
  transform: scale(0.86, 0.4);
  opacity: 0;
}

.pill.is-quiet .pill__label {
  color: var(--ink);
}

@media (hover: hover) {
  .pill:hover .pill__label {
    letter-spacing: 0.04em;
  }

  .pill.is-quiet:hover .pill__fill {
    transform: scale(1);
    opacity: 1;
  }

  .pill.is-quiet:hover .pill__label {
    color: var(--button-ink);
  }
}

.pill:active .pill__label,
.pill.is-pressed .pill__label {
  letter-spacing: 0.04em;
}

.pill.is-quiet:active .pill__fill,
.pill.is-quiet.is-pressed .pill__fill {
  transform: scale(1);
  opacity: 1;
}

.pill.is-quiet:active .pill__label,
.pill.is-quiet.is-pressed .pill__label {
  color: var(--button-ink);
}

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

@media (prefers-reduced-motion: reduce) {
  .pill__fill {
    transition: opacity 0.25s ease;
  }

  .pill.is-quiet .pill__fill {
    transform: none;
  }

  .pill__label {
    transition: color 0.25s ease;
  }
}