/* The sync sprout: a clay pot with a seedling, alone on a white page, with a line of words and a pill under it.
   The pot, the soil and the plant are drawn by script.js on a canvas with these colours; the words are plain CSS. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #1b211d;           /* the words */
  --muted: #6c746e;         /* the quieter words */
  --error: #c4432b;         /* the words that say what went wrong */
  --ok: #2f7a45;            /* the tick of All notes synced */
  --pot: #c56a45;           /* the clay pot */
  --pot-light: #e59a72;     /* where the light catches the clay */
  --pot-dark: #8a3f24;      /* the clay in its own shadow */
  --soil: #3a2a20;          /* the soil */
  --seed: #9a6a3c;          /* the seed and its coat */
  --stem: #4f8a3a;          /* the stem */
  --leaf: #2f7d3c;          /* a grown leaf */
  --leaf-young: #8cc04a;    /* a leaf just unrolled */
  --vein: #c9e79a;          /* the veins */
  --wilt: #8f8a4a;          /* the colour a wilting leaf turns towards */
  --petal: #ffcf3f;         /* the petals */
  --petal-deep: #f08a1c;    /* the petals at the heart */
  --heart: #7a3d12;         /* the middle of the flower */
  --shadow: #1d2a20;        /* the shadows on the soil and under the pot */
  --button: #1f3326;        /* the button */
  --button-ink: #ffffff;    /* its words */
  --line: #d9ded9;          /* the ring of the quiet button */
  --focus: #4f8a3a;         /* 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(--ink);
  font-family: 'Bricolage Grotesque 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 sprout */
.sprout {
  width: min(380px, 100%);
}

/* the drawing: the canvas reaches a little past the box, so a leaf that sways or droops is never cut */
.sprout__scene {
  position: relative;
  height: 236px;
  touch-action: pan-y;
}

.sprout__paint {
  position: absolute;
  left: -14px;
  top: -14px;
  display: block;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the words and the button */
.sprout__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 0 4px;
}

.sprout__words {
  min-width: 0;
}

.sprout__title {
  margin: 0;
  font-size: 17px;
  font-weight: 640;
  font-stretch: 92%;
  line-height: 1.25;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.sprout__meta {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 430;
  font-stretch: 94%;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the words that change slide by themselves */
.sprout__swap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

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

/* the tick before All notes synced, drawn in when it arrives */
.sprout__tick {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ok);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: draw 0.5s 0.15s cubic-bezier(0.3, 0.7, 0.3, 1) backwards;
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
}

/* the pill: 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, it squashes a little (script.js) */
.sprout__btn {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--button-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  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;
}

.sprout__btn::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;
}

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

/* the quiet pill: Pause while the notes come in */
.sprout__btn.is-quiet {
  color: var(--ink);
}

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

@media (hover: hover) and (pointer: fine) {
  .sprout__btn:hover::before {
    inset: -2px -6px;
  }

  .sprout__btn:hover .sprout__label {
    font-stretch: 100%;
  }

  .sprout__btn.is-quiet:hover::before {
    background: color-mix(in srgb, var(--line) 40%, transparent);
  }
}

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

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

  .sprout__tick {
    animation: none;
  }
}