/* How-it-works page: one animated figure per concept.
   Each figure sits idle until how-it-works.js adds .play (first time it
   scrolls into view) — so a reader always sees the start of the story, not
   the middle of a loop. Under prefers-reduced-motion the script adds .still
   instead and every figure settles on its finished frame. */

/* ---------------------------------------------------------------- 1. anchors */

.fig-anchors .stage { padding: 30px 26px 26px; }
.fig-anchors .rail {
  position: relative; display: flex; justify-content: space-between; align-items: flex-start;
  padding-top: 26px;
}
/* the capture-time axis and the track that will be drawn along it */
.fig-anchors .axis {
  position: absolute; left: 30px; right: 30px; top: 12px; height: 2px;
  background: rgba(0, 0, 0, .1); border-radius: 2px;
}
.fig-anchors .axis::before, .fig-anchors .axis::after {
  content: ''; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--certain);
}
.fig-anchors .axis::before { left: 0; }
.fig-anchors .axis::after { right: 0; }
.fig-anchors .axis .track {
  position: absolute; left: 4px; right: 4px; top: -2px; height: 6px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--likely) 0 10px, transparent 10px 16px);
  transform-origin: left center; transform: scaleX(0);
  opacity: 0;
}
.fig-anchors .axis .arrow {
  position: absolute; right: -14px; top: -6px;
  font-size: 12px; color: var(--sub); line-height: 1;
}
.fig-anchors .axis .lbl {
  position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--sub);
  white-space: nowrap;
}

.fig-anchors .shot { position: relative; width: 74px; text-align: center; }
.fig-anchors .thumb {
  position: relative; width: 74px; height: 74px; border-radius: 14px;
  box-shadow: 0 6px 16px rgba(22, 24, 28, .18);
  border: 3px solid #fff;
  transform: rotate(var(--tilt, 0deg));
}
.fig-anchors .t { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.fig-anchors .dev { display: block; font-size: 10.5px; color: var(--sub); }
/* the GPS badge in the thumb's corner: solid green for anchors, an
   amber "guessed" one that pops in for camera shots, a grey "none" that leaves */
.fig-anchors .badge {
  position: absolute; right: -8px; top: -8px; z-index: 2;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  border: 2px solid #fff; color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .3px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.fig-anchors .badge.gps { background: var(--certain); }
.fig-anchors .badge.none { background: #a1a7b0; }
.fig-anchors .badge.pin { background: var(--likely); transform: scale(0); opacity: 0; }
.fig-anchors .anchor .thumb { border-color: var(--certain); }
.fig-anchors .cam .thumb { border-color: #fff; }

/* the loop, 10 s: anchors pulse → track draws left to right → each camera
   shot's grey badge leaves and an amber pin pops in, in capture order → hold */
.fig-anchors.play .anchor .thumb { animation: hiw-anchor-pulse 10s ease-in-out infinite; }
.fig-anchors.play .axis .track { animation: hiw-track-draw 10s ease-in-out infinite; }
.fig-anchors.play .cam .badge.none { animation: hiw-badge-leave 10s ease infinite; animation-delay: calc(var(--i) * .42s); }
.fig-anchors.play .cam .badge.pin { animation: hiw-badge-pop 10s cubic-bezier(.2, 1.4, .4, 1) infinite; animation-delay: calc(var(--i) * .42s); }
.fig-anchors.play .cam .thumb { animation: hiw-cam-lift 10s ease infinite; animation-delay: calc(var(--i) * .42s); }

@keyframes hiw-anchor-pulse {
  0%, 4%   { box-shadow: 0 6px 16px rgba(22, 24, 28, .18); }
  10%      { box-shadow: 0 0 0 8px rgba(47, 209, 90, .28), 0 6px 16px rgba(22, 24, 28, .18); }
  18%, 100%{ box-shadow: 0 0 0 0 rgba(47, 209, 90, 0), 0 6px 16px rgba(22, 24, 28, .18); }
}
@keyframes hiw-track-draw {
  0%, 12%  { transform: scaleX(0); opacity: 0; }
  14%      { opacity: 1; }
  30%, 88% { transform: scaleX(1); opacity: 1; }
  94%, 100%{ transform: scaleX(1); opacity: 0; }
}
@keyframes hiw-badge-leave {
  0%, 30%  { transform: scale(1); opacity: 1; }
  34%, 90% { transform: scale(0); opacity: 0; }
  96%, 100%{ transform: scale(1); opacity: 1; }
}
@keyframes hiw-badge-pop {
  0%, 32%  { transform: scale(0); opacity: 0; }
  38%, 88% { transform: scale(1); opacity: 1; }
  92%, 100%{ transform: scale(0); opacity: 0; }
}
@keyframes hiw-cam-lift {
  0%, 32%  { border-color: #fff; }
  38%, 88% { border-color: var(--likely); }
  92%, 100%{ border-color: #fff; }
}
/* reduced motion: solved */
.fig-anchors.still .axis .track { transform: scaleX(1); opacity: 1; }
.fig-anchors.still .cam .badge.none { display: none; }
.fig-anchors.still .cam .badge.pin { transform: scale(1); opacity: 1; }
.fig-anchors.still .cam .thumb { border-color: var(--likely); }

@media (max-width: 640px) {
  .fig-anchors .stage { padding: 26px 14px 20px; }
  /* seven 74 px shots do not fit a phone; five 54 px ones do. The second and
     fourth camera shots go — the story (anchor, camera, camera, camera,
     anchor) reads the same with three in the middle. */
  .fig-anchors .shot.cam:nth-child(4), .fig-anchors .shot.cam:nth-child(6) { display: none; }
  .fig-anchors .shot { width: 54px; }
  .fig-anchors .thumb { width: 54px; height: 54px; border-radius: 11px; }
  .fig-anchors .t { font-size: 11px; }
  .fig-anchors .dev { display: none; }
  .fig-anchors .badge { min-width: 18px; height: 18px; font-size: 8px; padding: 0 4px; right: -6px; top: -6px; }
  .fig-anchors .axis { left: 20px; right: 20px; }
}

/* ---------------------------------------------------------------- 2. groups */

.fig-groups .stage { height: 250px; overflow: hidden; background: linear-gradient(180deg, #fbfbfc, #f3f4f6); }
.fig-groups .scatter { position: absolute; inset: 0; }
.fig-groups .bit {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; border-radius: 10px;
  border: 2.5px solid #fff; box-shadow: 0 5px 14px rgba(22, 24, 28, .18);
  background-size: cover;
  /* scattered pose comes from JS as --x/--y/--r; gathered pose is a tight fan */
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1);
  transition: transform 1s cubic-bezier(.4, 0, .2, 1), opacity .5s ease;
  transition-delay: var(--d);
}
.fig-groups .bit::after {
  /* every one is a camera photo with no location: a little grey badge */
  content: ''; position: absolute; right: -6px; top: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #a1a7b0; border: 2px solid #fff;
  transition: opacity .3s ease;
}
.fig-groups.gathered .bit {
  transform: translate(calc(-50% + var(--gx)), calc(-50% + var(--gy))) rotate(var(--gr)) scale(.72);
}
.fig-groups.gathered .bit::after { opacity: 0; }

/* the one card the forty photos become */
.fig-groups .grp-card {
  position: absolute; left: 50%; top: 50%;
  width: 340px; height: 96px; border-radius: 18px;
  background: #fff; box-shadow: 0 16px 40px rgba(22, 24, 28, .2);
  transform: translate(-50%, -50%) scale(.9);
  opacity: 0; transition: transform .5s cubic-bezier(.2, 1.2, .4, 1), opacity .4s ease;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  z-index: 5;
}
.fig-groups.gathered .grp-card { transform: translate(-50%, -50%) scale(1); opacity: 1; transition-delay: .9s; }
.fig-groups .grp-card .fan { position: relative; width: 74px; height: 72px; flex: 0 0 74px; }
.fig-groups .grp-card .fan i {
  position: absolute; left: 6px; top: 6px; width: 60px; height: 60px; border-radius: 12px;
  border: 2.5px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); background-size: cover;
}
.fig-groups .grp-card .fan i:nth-child(1) { transform: rotate(-9deg) translate(-4px, 2px); }
.fig-groups .grp-card .fan i:nth-child(2) { transform: rotate(4deg) translate(3px, -1px); }
.fig-groups .grp-card .fan i:nth-child(3) { transform: rotate(0deg); }
.fig-groups .grp-card .fan b {
  position: absolute; right: -4px; top: -6px; z-index: 2;
  min-width: 24px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--pill); color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}
.fig-groups .grp-card .txt { flex: 1; min-width: 0; }
.fig-groups .grp-card .txt .h { font-size: 14px; font-weight: 750; letter-spacing: -.2px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fig-groups .grp-card .txt .s { font-size: 11.5px; color: var(--sub); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fig-groups .grp-card .txt .tlb { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 7px; background: #eef0f3; }
.fig-groups .grp-card .txt .tlb i { display: block; height: 100%; }
.fig-groups .grp-card .txt .tlb .a { background: rgba(47, 209, 90, .8); }
.fig-groups .grp-card .txt .tlb .g { background: var(--likely); }
.fig-groups .grp-card .ok {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--certain); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(47, 209, 90, .45);
}
.fig-groups .grp-card .ok svg { width: 18px; height: 18px; }
/* "one decision, not forty" — the counter that ticks up while they gather */
.fig-groups .count {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-size: 12px; font-weight: 700; color: var(--sub); letter-spacing: .3px;
  background: rgba(255, 255, 255, .85); padding: 4px 12px; border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .06);
  font-variant-numeric: tabular-nums; white-space: nowrap; z-index: 6;
}
@media (max-width: 480px) {
  .fig-groups .grp-card { width: 310px; padding: 10px 12px; gap: 10px; }
  .fig-groups .grp-card .fan { width: 60px; height: 60px; flex-basis: 60px; }
  .fig-groups .grp-card .fan i { width: 50px; height: 50px; left: 5px; top: 5px; }
  .fig-groups .grp-card .txt .h { font-size: 13px; }
  .fig-groups .grp-card .txt .s { font-size: 11px; }
  .fig-groups .grp-card .ok { flex-basis: 34px; width: 34px; height: 34px; }
  .fig-groups .bit { width: 36px; height: 36px; }
}

/* ---------------------------------------------------------------- 3. confidence tiles */

.hiw-conf {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 22px 0 8px;
}
.hiw-conf .tile {
  position: relative; border-radius: 16px; overflow: hidden;
  background: #fff; border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 8px 22px rgba(22, 24, 28, .06);
}
.hiw-conf .tile .map { position: relative; height: 128px; overflow: hidden; background: #f6f3ec; }
.hiw-conf .tile .map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hiw-conf .tile.flip .map svg { transform: scaleX(-1); }
.hiw-conf .tile .cap { padding: 10px 12px 12px; }
.hiw-conf .tile .cap .k { font-size: 13.5px; font-weight: 800; letter-spacing: -.2px; }
.hiw-conf .tile .cap .e { font-size: 11.5px; color: var(--sub); margin-top: 1px; line-height: 1.35; }
.hiw-conf .tile.certain .k { color: #1f9e44; }
.hiw-conf .tile.likely .k { color: #c98508; }
.hiw-conf .tile.uncertain .k { color: #9b3fd1; }
.hiw-conf .tile.manual .k { color: var(--manual); }
/* the little "what the map shows" tag, top-left of the map */
.hiw-conf .tag {
  position: absolute; left: 8px; top: 8px; z-index: 6;
  font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 9px; color: #fff; background: var(--pill);
  opacity: 0; transform: translateY(-4px);
}
.hiw-conf .tile.certain .tag { background: #1f9e44; }
.hiw-conf .tile.likely .tag { background: #c98508; }
.hiw-conf .tile.uncertain .tag { background: #9b3fd1; }
.hiw-conf .tile.manual .tag { background: var(--manual); }

/* map objects positioned by % of the map box */
.hiw-conf .cpin { width: 26px; height: 26px; }
.hiw-conf .a1, .hiw-conf .a2 { --ring: var(--certain); }
.hiw-conf .line {
  /* left/top/width/--rot are measured by how-it-works.js from the data-x/y
     endpoints, because a %-width does not equal a diagonal on a landscape map */
  position: absolute; height: 0; border-top: 3px solid var(--likely); z-index: 2;
  transform-origin: left center; border-radius: 2px;
  transform: rotate(var(--rot, 0deg)) scaleX(0);
}
.hiw-conf .line.dashed { border-top-style: dashed; border-color: var(--uncertain); }
.hiw-conf .region {
  position: absolute; z-index: 2; border-radius: 50%;
  background: rgba(191, 90, 240, .16); border: 2px dashed rgba(191, 90, 240, .8);
  transform: translate(-50%, -50%) scale(0); opacity: 0;
}
.hiw-conf .region::after {
  content: '?'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
  font-size: 22px; font-weight: 800; color: #9b3fd1;
}
.hiw-conf .finger {
  position: absolute; z-index: 7; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(22, 24, 28, .18); border: 2px solid rgba(255, 255, 255, .9);
  transform: translate(-50%, -50%);
  opacity: 0;
}

/* Certain: an anchor already there; the target pin drops onto the same spot
   and its ring blooms green — nothing to guess. 6 s loop. */
.hiw-conf .certain .tgt { --ring: var(--certain); z-index: 5; opacity: 0; }
.hiw-conf.play .certain .tgt { animation: hiw-c-drop 6s cubic-bezier(.3, 1.3, .4, 1) infinite; }
.hiw-conf.play .certain .a1 { animation: hiw-c-anchor 6s ease infinite; }
.hiw-conf.play .certain .tag { animation: hiw-tag 6s ease infinite; }
@keyframes hiw-c-drop {
  0%, 12%  { transform: translate(-50%, -140%) scale(1.15); opacity: 0; box-shadow: 0 0 0 2.5px var(--certain), 0 3px 9px rgba(0,0,0,.3); }
  16%      { opacity: 1; }
  30%      { transform: translate(-50%, -50%) scale(1); opacity: 1; box-shadow: 0 0 0 2.5px var(--certain), 0 3px 9px rgba(0,0,0,.3); }
  40%      { box-shadow: 0 0 0 10px rgba(47, 209, 90, .22), 0 3px 9px rgba(0,0,0,.3); }
  50%, 84% { transform: translate(-50%, -50%) scale(1); opacity: 1; box-shadow: 0 0 0 2.5px var(--certain), 0 3px 9px rgba(0,0,0,.3); }
  92%, 100%{ transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@keyframes hiw-c-anchor {
  0%, 26%  { box-shadow: 0 0 0 2.5px var(--certain), 0 3px 9px rgba(0,0,0,.3); }
  34%      { box-shadow: 0 0 0 14px rgba(47, 209, 90, 0), 0 3px 9px rgba(0,0,0,.3); }
  36%, 100%{ box-shadow: 0 0 0 2.5px var(--certain), 0 3px 9px rgba(0,0,0,.3); }
}
@keyframes hiw-tag {
  0%, 44%  { opacity: 0; transform: translateY(-4px); }
  50%, 86% { opacity: 1; transform: translateY(0); }
  92%, 100%{ opacity: 0; transform: translateY(-4px); }
}

/* Likely: two anchors a short walk apart; the amber pin slides out from the
   first and settles where the time says — closer to the anchor it was shot
   nearer to. 6 s loop. */
.hiw-conf .likely .tgt { --ring: var(--likely); z-index: 5; opacity: 0; }
.hiw-conf.play .likely .line { animation: hiw-l-line 6s ease-in-out infinite; }
.hiw-conf.play .likely .tgt { animation: hiw-l-slide 6s cubic-bezier(.4, 0, .2, 1) infinite; }
.hiw-conf.play .likely .tag { animation: hiw-tag 6s ease infinite; }
@keyframes hiw-l-line {
  0%, 8%   { transform: rotate(var(--rot, 0deg)) scaleX(0); opacity: 1; }
  26%, 86% { transform: rotate(var(--rot, 0deg)) scaleX(1); opacity: 1; }
  92%, 100%{ transform: rotate(var(--rot, 0deg)) scaleX(1); opacity: 0; }
}
@keyframes hiw-l-slide {
  0%, 20%  { left: var(--from-x); top: var(--from-y); opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  26%      { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  46%, 86% { left: var(--to-x); top: var(--to-y); opacity: 1; transform: translate(-50%, -50%) scale(1); }
  92%, 100%{ left: var(--to-x); top: var(--to-y); opacity: 0; transform: translate(-50%, -50%) scale(.6); }
}

/* Uncertain: anchors far apart with hours between them. A dashed route draws
   itself, a violet region with a question mark blooms in the middle — and
   nothing that looks like a pin ever appears. 6 s loop. */
.hiw-conf.play .uncertain .line { animation: hiw-l-line 6s ease-in-out infinite; }
.hiw-conf.play .uncertain .region { animation: hiw-u-region 6s ease infinite; }
.hiw-conf.play .uncertain .tag { animation: hiw-tag 6s ease infinite; }
@keyframes hiw-u-region {
  0%, 26%  { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  40%, 86% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  92%, 100%{ transform: translate(-50%, -50%) scale(0); opacity: 0; }
}

/* Manual: an amber proposal, then a finger drags it three blocks over; the
   ring turns blue — this one is yours. 6 s loop. */
.hiw-conf .manual .tgt { --ring: var(--likely); z-index: 5; }
.hiw-conf.play .manual .tgt { animation: hiw-m-drag 6s cubic-bezier(.4, 0, .2, 1) infinite; }
.hiw-conf.play .manual .finger { animation: hiw-m-finger 6s cubic-bezier(.4, 0, .2, 1) infinite; }
.hiw-conf.play .manual .tag { animation: hiw-tag 6s ease infinite; }
@keyframes hiw-m-drag {
  0%, 24%  { left: var(--from-x); top: var(--from-y); box-shadow: 0 0 0 2.5px var(--likely), 0 3px 9px rgba(0,0,0,.3); transform: translate(-50%, -50%) scale(1); }
  28%      { transform: translate(-50%, -50%) scale(1.15); }
  46%      { left: var(--to-x); top: var(--to-y); box-shadow: 0 0 0 2.5px var(--likely), 0 6px 16px rgba(0,0,0,.35); transform: translate(-50%, -50%) scale(1.15); }
  50%, 100%{ left: var(--to-x); top: var(--to-y); box-shadow: 0 0 0 2.5px var(--manual), 0 3px 9px rgba(0,0,0,.3); transform: translate(-50%, -50%) scale(1); }
}
@keyframes hiw-m-finger {
  0%, 16%  { left: calc(var(--from-x) + 14%); top: calc(var(--from-y) + 22%); opacity: 0; }
  22%      { left: var(--from-x); top: var(--from-y); opacity: 1; }
  28%      { left: var(--from-x); top: var(--from-y); opacity: 1; }
  46%      { left: var(--to-x); top: var(--to-y); opacity: 1; }
  52%      { left: calc(var(--to-x) + 10%); top: calc(var(--to-y) + 24%); opacity: 0; }
  100%     { opacity: 0; }
}
/* reduced motion: every tile on its finished frame */
.hiw-conf.still .certain .tgt { opacity: 1; }
.hiw-conf.still .line { transform: rotate(var(--rot, 0deg)) scaleX(1); }
.hiw-conf.still .likely .tgt { opacity: 1; left: var(--to-x); top: var(--to-y); }
.hiw-conf.still .uncertain .region { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.hiw-conf.still .manual .tgt { left: var(--to-x); top: var(--to-y); --ring: var(--manual); }
.hiw-conf.still .tag { opacity: 1; transform: none; }

@media (max-width: 760px) { .hiw-conf { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .hiw-conf { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 4. timeline bars */

.fig-bars .stage { padding: 22px 26px 8px; }
.fig-bars .row {
  display: grid; grid-template-columns: 196px 1fr 84px; gap: 14px; align-items: center;
  padding: 10px 0;
}
.fig-bars .row + .row { border-top: 1px dashed rgba(0, 0, 0, .07); }
.fig-bars .name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.fig-bars .name small { display: block; font-size: 11px; font-weight: 500; color: var(--sub); }
.fig-bars .bar {
  position: relative; display: flex; height: 16px; border-radius: 6px; overflow: hidden;
  background: #eef0f3;
}
.fig-bars .bar i { display: block; height: 100%; transform-origin: left center; transform: scaleX(0); }
.fig-bars .bar .s { background: rgba(47, 209, 90, .8); }
.fig-bars .bar .g { background: var(--likely); }
.fig-bars .bar .g.violet { background: var(--uncertain); }
.fig-bars .gap {
  font-size: 12.5px; font-weight: 750; text-align: right; white-space: nowrap;
  opacity: 0; transform: translateX(-6px);
  font-variant-numeric: tabular-nums;
}
.fig-bars .row.r1 .gap { color: #1f9e44; }
.fig-bars .row.r2 .gap { color: #c98508; }
.fig-bars .row.r3 .gap { color: #9b3fd1; }
.fig-bars .legend {
  display: flex; gap: 16px; justify-content: center; margin-top: 8px;
  font-size: 11.5px; color: var(--sub);
}
.fig-bars .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* 8 s loop, rows staggered .35 s: before → gap → after grow in turn, then the
   gap label slides in. */
.fig-bars.play .bar .s:first-child { animation: hiw-seg 8s ease-out infinite; animation-delay: calc(var(--i) * .35s); }
.fig-bars.play .bar .g              { animation: hiw-seg 8s ease-out infinite; animation-delay: calc(var(--i) * .35s + .55s); }
.fig-bars.play .bar .s:last-child   { animation: hiw-seg 8s ease-out infinite; animation-delay: calc(var(--i) * .35s + 1.1s); }
.fig-bars.play .gap                 { animation: hiw-gaplbl 8s ease infinite; animation-delay: calc(var(--i) * .35s + 1.5s); }
@keyframes hiw-seg {
  0%       { transform: scaleX(0); }
  8%, 86%  { transform: scaleX(1); }
  92%, 100%{ transform: scaleX(0); }
}
@keyframes hiw-gaplbl {
  0%       { opacity: 0; transform: translateX(-6px); }
  6%, 84%  { opacity: 1; transform: translateX(0); }
  90%, 100%{ opacity: 0; transform: translateX(-6px); }
}
.fig-bars.still .bar i { transform: scaleX(1); }
.fig-bars.still .gap { opacity: 1; transform: none; }
@media (max-width: 560px) {
  .fig-bars .stage { padding: 16px 14px 6px; }
  /* name on its own line, bar and gap label beneath it */
  .fig-bars .row { grid-template-columns: 1fr 72px; gap: 6px 10px; }
  .fig-bars .name { grid-column: 1 / -1; font-size: 12.5px; }
  .fig-bars .name small { display: inline; margin-left: 6px; }
  .fig-bars .gap { font-size: 11.5px; }
}

/* ---------------------------------------------------------------- 5. journal */

.fig-journal .stage {
  display: grid; grid-template-columns: 1fr 210px; gap: 0;
  min-height: 250px;
}
.fig-journal .ledger {
  padding: 18px 20px 16px 22px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
  border-right: 1px solid rgba(0, 0, 0, .06);
}
.fig-journal .ledger .hd {
  display: flex; justify-content: space-between; align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--sub);
  margin-bottom: 8px;
}
.fig-journal .ledger .hd .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #c9ced6; display: inline-block; margin-right: 6px;
  vertical-align: 0; transition: background .3s ease, box-shadow .3s ease;
}
.fig-journal.writing .ledger .hd .dot { background: var(--certain); box-shadow: 0 0 0 4px rgba(47, 209, 90, .2); }
.fig-journal.undoing .ledger .hd .dot { background: var(--manual); box-shadow: 0 0 0 4px rgba(10, 132, 255, .2); }
.fig-journal .jrow {
  display: grid; grid-template-columns: 116px 1fr 18px; gap: 8px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, .05);
  color: #6b7280;
  transition: color .3s ease, background .3s ease;
}
.fig-journal .jrow .f { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fig-journal .jrow .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fig-journal .jrow .v .prior { color: #9aa0a8; }
.fig-journal .jrow .v .arrow { color: #9aa0a8; margin: 0 4px; }
.fig-journal .jrow .v .coord { color: #1f9e44; font-weight: 600; opacity: 0; transition: opacity .35s ease; }
.fig-journal .jrow .st {
  width: 16px; height: 16px; border-radius: 50%; justify-self: end;
  background: #e2e5ea; position: relative; transition: background .3s ease;
}
.fig-journal .jrow .st::after {
  content: ''; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: #fff; opacity: 0;
}
.fig-journal .jrow.written .coord { opacity: 1; }
.fig-journal .jrow.written .st { background: var(--certain); }
.fig-journal .jrow.restored .coord { text-decoration: line-through; color: #9aa0a8; font-weight: 500; }
.fig-journal .jrow.restored .st { background: var(--manual); }
.fig-journal .jrow.restored .prior { color: var(--manual); font-weight: 600; }
.fig-journal .jrow.skipped { background: rgba(255, 176, 32, .12); }
.fig-journal .jrow.skipped .st { background: var(--likely); }
.fig-journal .jrow.skipped .coord { color: #c98508; }
.fig-journal .jrow.skipped .v .prior { color: #c98508; font-weight: 700; }
.fig-journal .jrow.skipped .v .prior::before { content: attr(data-label); }
.fig-journal .sum {
  margin-top: 10px; font-size: 11.5px; min-height: 16px; color: var(--sub);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  opacity: 0; transition: opacity .3s ease;
}
.fig-journal .sum.show { opacity: 1; }

/* the two buttons the whole thing hangs off */
.fig-journal .ctl {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px;
  padding: 18px; background: #f7f7f9;
}
.fig-journal .btn {
  width: 150px; padding: 11px 0; border-radius: 14px; text-align: center;
  font-size: 14px; font-weight: 750; letter-spacing: -.1px;
  transition: transform .18s ease, box-shadow .18s ease, opacity .3s ease;
}
.fig-journal .btn.apply { background: var(--pill); color: #fff; box-shadow: 0 6px 16px rgba(47, 54, 60, .28); }
.fig-journal .btn.undo { background: #fff; color: var(--ink); border: 1.5px solid rgba(0, 0, 0, .12); }
.fig-journal .btn.pressed { transform: scale(.94); box-shadow: 0 2px 6px rgba(47, 54, 60, .25); }
.fig-journal .btn.dim { opacity: .45; }
.fig-journal .prog { width: 150px; height: 6px; border-radius: 3px; background: #e6e8ec; overflow: hidden; }
.fig-journal .prog i { display: block; height: 100%; width: 0; background: var(--certain); transition: width .5s linear; }
.fig-journal.undoing .prog i { background: var(--manual); }
.fig-journal .note { font-size: 11px; color: var(--sub); text-align: center; line-height: 1.35; max-width: 160px; }
@media (max-width: 600px) {
  .fig-journal .stage { grid-template-columns: 1fr; }
  .fig-journal .ledger { border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: 11px; }
  .fig-journal .jrow { grid-template-columns: 96px 1fr 16px; }
  .fig-journal .ctl { flex-direction: row; flex-wrap: wrap; padding: 14px; }
  .fig-journal .note { max-width: none; width: 100%; }
}