/* The galaxy loader: a spiral galaxy that takes shape as a scene renders, alone on a black page, with the phase and
   the percentage under it and the pills below. The stars, the dust and the core are painted by script.js with these
   colours. To put it back where it really lives (a render panel, a modal over the scene, the corner of an editor),
   drop .stage and place .gx in that panel: it only needs its width. */
:root {
  --page: #000000;          /* the page */
  --text: #eef0f7;          /* the words */
  --muted: #8b90a3;         /* the quiet words */
  --ok: #9fe3c0;            /* scene rendered */
  --error: #ff7a6b;         /* the render node is lost */
  --core: #ffcf8a;          /* the core of the galaxy and the old stars near it */
  --star: #f4f1ff;          /* the stars of the disc */
  --young: #9cc2ff;         /* the young blue stars along the arms */
  --dust-1: #ff4f9d;        /* the dust along the arms: pink */
  --dust-2: #7d5cff;        /* violet */
  --dust-3: #2fb8ff;        /* blue */
  --mist: #7e88b4;          /* the loose cloud before the render */
  --lost: #ff6a55;          /* the tint of the stars when the render node is lost */
  --icon-a: #b49bff;        /* the tick at the end, from its short side */
  --icon-b: #ffd2a1;        /* to its long side */
  --button: #eef0f7;        /* the main pill */
  --button-ink: #0b0c12;    /* its words */
  --line: #3a3e52;          /* the ring round the quiet pill */
  --focus: #b49bff;         /* the keyboard's focus ring */
}

* {
  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(--text);
  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;
  /* la colonna è larga quanto la pagina meno i margini: senza, il 100% della galassia si misura sul suo contenuto e
     sul telefono esce di lato */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 40px 16px;
}

/* ---------------------------------------------------------------- the galaxy */
.gx {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(380px, 100%);
}

/* the sky: 380 by 250, with nothing drawn round it; the galaxy fades out before its edges */
.gx__sky {
  position: relative;
  width: 100%;
  aspect-ratio: 380 / 250;
  touch-action: pan-y;
  cursor: grab;
}

.gx__paint {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- the phase and the percentage */
.gx__readout {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
  padding: 0 4px;
}

.gx__words {
  min-width: 0;
}

.gx__title,
.gx__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}

.gx__title {
  height: 22px;
  font-size: 16px;
  font-weight: 600;
  font-stretch: 100%;
  line-height: 22px;
  letter-spacing: -0.005em;
}

.gx__meta {
  height: 19px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 440;
  font-stretch: 92%;
  line-height: 19px;
  font-variant-numeric: tabular-nums;
}

.gx__swap {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the colour of the words changes with the words themselves, not before */
.gx__swap[data-tone='error'] {
  color: var(--error);
}

.gx__swap[data-tone='ok'] {
  color: var(--ok);
}

/* the tick in front of Scene rendered, drawn in by script.js */
.gx__tick {
  display: none;
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ok);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.gx[data-mode='done'] .gx__tick {
  display: block;
}

/* the percentage keeps its place while its figures change; script.js widens it and makes it heavier with the
   progress, on the width and weight axes of the font */
.gx__pct {
  flex: none;
  min-width: 2.6em;
  margin: 0;
  font-size: 38px;
  font-weight: 300;
  font-stretch: 72%;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  transition: color 0.4s ease;
}

.gx[data-mode='idle'] .gx__pct,
.gx[data-mode='paused'] .gx__pct,
.gx[data-mode='failed'] .gx__pct {
  color: var(--muted);
}

/* ---------------------------------------------------------------- the pills */
.gx__buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

/* the fill is a layer of its own that swells past the edge with a bounce, and the words widen on the width axis of
   the font; pressed, a pill squashes a little */
.pill {
  position: relative;
  display: inline-grid;
  place-items: center;
  height: 44px;
  min-width: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--button-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 620;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.pill[hidden] {
  display: none;
}

.pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--button);
  transition: inset 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, box-shadow 0.25s ease;
}

.pill__label {
  display: inline-block;
  font-stretch: 88%;
  transition: font-stretch 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.pill.is-quiet::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line);
}

/* opened: the main pill turns green */
.pill.is-saved::before {
  background: var(--ok);
}

/* while the galaxy folds up there is nothing to press */
.pill[aria-disabled='true'] {
  color: var(--muted);
  cursor: default;
}

.pill[aria-disabled='true']::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line);
}

@media (hover: hover) and (pointer: fine) {
  .pill:not([aria-disabled='true']):hover::before {
    inset: -2px -5px;
  }

  .pill:not([aria-disabled='true']):hover .pill__label {
    font-stretch: 104%;
  }

  .pill.is-quiet:not([aria-disabled='true']):hover::before {
    background: color-mix(in srgb, var(--line) 45%, transparent);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .pill::before,
  .pill__label {
    transition: none;
  }

  .gx__sky {
    cursor: default;
  }
}