/* =========================================================
   TEMPER | The 30-Day Reset
   Figures: bold pictogram people drawn by figures.js.
   White on dark sections, ink on paper. Marker yellow is the only accent.
   ========================================================= */

.figure { position: relative; color: var(--bone); }
.paper .figure { color: var(--paper-ink); }

.fig-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Shared marks */
.fig-limb,
.fig-line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fig-head, .fig-fill { fill: currentColor; }
.fig-ground { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; opacity: .32; }
.fig-dash { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* 01 Target */
.fig-pole { stroke-width: 3; }
.fig-flag { fill: var(--highlight); }
.fig-ghost { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 2; }
.fig-ring { fill: none; stroke: var(--highlight); stroke-width: 1.6; }

/* Sample day: watering */
.figure-water { display: flex; flex-direction: column; }
.figure-water .fig-svg { flex: 1 1 auto; min-height: 0; height: auto; }
.fig-stem { stroke-width: 3.4; stroke-dasharray: 100 120; stroke-dashoffset: 100; }
.fig-petal { fill: var(--highlight); stroke: currentColor; stroke-width: 1.1; }
.fig-drop { fill: currentColor; }

/* Captions, in the voice of the TikTok overlays */
.fig-caption { margin: 0; color: inherit; }
.fig-caption--serif {
  flex: none;
  padding-top: 4px;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.2;
  text-align: center;
  color: var(--paper-ink);
}
.fig-caption-svg {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 10.5px;
  letter-spacing: .02em;
  fill: var(--bone-dim);
}

/* Month route */
.fig-route {
  fill: none;
  stroke: var(--bone);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fig-route-ghost {
  fill: none;
  stroke: var(--bone);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1 7;
  opacity: .3;
}
.fig-area { fill: var(--bone); opacity: .035; }

.fig-check { color: var(--bone-dim); }
.fig-check-tick { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: stroke .45s var(--ease-out); }
.fig-check-dot {
  fill: var(--ink);
  stroke: currentColor;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .45s var(--ease-out), stroke .45s var(--ease-out), transform .5s var(--ease-out);
}
.fig-check.is-lit { color: var(--highlight); }
.fig-check.is-lit .fig-check-dot { fill: var(--highlight); transform: scale(1.3); }

@media (max-width: 680px) {
  .figure-climb { height: 200px; }
  .fig-caption--serif { font-size: 1.05rem; padding-top: 2px; }
}