/* The backup movement: a dark panel on a black page, with a watch movement behind a sapphire case back.
   The movement is painted by script.js with these colours; the panel, the words and the button are plain CSS. */
:root {
  --page: #000000;          /* the page */
  --panel: #0f0f11;         /* the panel */
  --panel-edge: #1f1f23;    /* its fine edge */
  --ink: #f3efe6;           /* the words */
  --muted: #8f8b84;         /* the quieter words */
  --brass: #d9b264;         /* the wheels */
  --bridge: #c9bfa5;        /* the bridges with their Geneva stripes */
  --plate: #2b2d31;         /* the plate under the wheels, with its perlage */
  --steel: #c9ccd2;         /* the polished steel: the case, the lever, the pinions */
  --blued: #3b5fb4;         /* the blued steel: the hand, the screws, the hairspring */
  --ruby: #a3122e;          /* the jewels */
  --flange: #141518;        /* the ring of the case that carries the scale */
  --scale: #e9e4d8;         /* the scale printed on it */
  --error: #ff6a55;         /* the words that say what went wrong */
  --button: #e6cf98;        /* the button */
  --button-ink: #17140e;    /* 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: 'Saira 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: 32px 16px;
}

/* ---------------------------------------------------------------- the panel */
.backup {
  position: relative;
  width: min(380px, 100%);
  padding: 20px 20px 18px;
  border-radius: 28px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--panel-edge), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* the case back, a square canvas: the case, the movement and its shadow */
.backup__case {
  position: relative;
  width: 248px;
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
}

.backup__movement {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- the words and the button */
.backup__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'title figure'
    'meta button';
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  margin-top: 16px;
}

.backup__words,
.backup__side {
  display: contents;
}

.backup__title {
  grid-area: title;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  font-stretch: 104%;
  line-height: 1.25;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.backup__meta {
  grid-area: meta;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 430;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}

/* the words that change slide by themselves */
.backup__swap {
  display: inline-block;
}

/* a long computer name ends in an ellipsis rather than running under the figure */
.backup__title .backup__swap {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.backup__swap .is-error {
  color: var(--error);
}

/* the tick that is drawn when the backup is complete */
.backup__tick {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--brass);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  visibility: hidden;
}

/* the figure above the button: the size at rest, the percentage while it runs */
.backup__figure {
  grid-area: figure;
  justify-self: end;
  margin: 0 4px 0 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 560;
  font-stretch: 112%;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.backup__figure .is-quiet {
  color: var(--muted);
  font-weight: 460;
}

/* the button: its words widen on the variable width axis under the pointer, and it squashes a little when pressed */
.backup__btn {
  grid-area: button;
  justify-self: end;
  position: relative;
  height: 34px;
  padding: 0 16px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--button);
  color: var(--button-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 620;
  line-height: 34px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.backup__label {
  display: inline-block;
  font-stretch: 96%;
  transition: font-stretch 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* while the backup runs the button only pauses it: it steps back */
.backup__btn.is-quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 20%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .backup__btn:hover .backup__label {
    font-stretch: 112%;
  }

  .backup__btn:hover {
    background: color-mix(in srgb, var(--button) 88%, #ffffff);
  }

  .backup__btn.is-quiet:hover {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .backup__label {
    transition: none;
  }
}