/* =====================================================================
   ROADMAP
   ---------------------------------------------------------------------
   This page's alone, and a separate file on purpose. Every other page on
   the site would download these rules for nothing, and one page's feature
   landing in the shared bundle is how memesly.css got to 280KB.

   Three states, three colours, and the tick is the only one that is green.
   That matters more than it sounds: on a page whose entire job is to say
   what is finished, a reader scanning it should be able to count the green
   marks without reading a word.
   ===================================================================== */

/* ---- the phase card ---- */
.rd-p .card-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rd-b{
  margin-left:auto;font-size:10.5px;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--text-3);background:var(--surface-2);
  white-space:nowrap;
}
.rd-b-done{
  background:rgba(0,229,160,.14);border-color:rgba(0,229,160,.42);color:var(--ok);
}
.rd-b-now{
  background:rgba(2,165,245,.14);border-color:rgba(2,165,245,.42);color:var(--cyan);
}

/* A completed phase gets a hairline down its left edge rather than a tinted
   panel. A green wash behind five green ticks is a lot of green and it makes
   the ticks harder to find, not easier. */
.rd-p-done{border-left:2px solid rgba(0,229,160,.5)}
.rd-p-now{border-left:2px solid rgba(2,165,245,.45)}

/* ---- progress ---- */
.rd-bar{
  height:4px;border-radius:999px;background:var(--surface-3);
  overflow:hidden;margin:2px 0 8px;
}
.rd-bar i{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#00C88C,#00E5A0);
  /* Animated so a line that ticks itself off from the chain visibly moves the
     bar rather than silently redrawing it. */
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.rd-count{
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:12px;
}

/* ---- the lines ---- */
.rd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rd-i{
  display:flex;align-items:flex-start;gap:11px;
  font-size:14.5px;line-height:1.55;color:var(--text-2);
}
/* min-width:0 because the text is a flex item and its automatic minimum size is
   its min-content width, which on a long unbroken token is wider than the card. */
.rd-i .rd-t{min-width:0;flex:1}
.rd-m{flex:0 0 18px;width:18px;height:18px;margin-top:1px}
.rd-m svg{width:100%;height:100%;display:block}

.rd-done{color:var(--text)}
.rd-done .rd-m{color:var(--ok);filter:drop-shadow(0 0 6px rgba(0,229,160,.5))}
.rd-now .rd-m{color:var(--cyan);filter:drop-shadow(0 0 6px rgba(2,165,245,.45))}
.rd-todo{color:var(--text-3)}
.rd-todo .rd-m{color:var(--text-3);opacity:.6}

/* A line the page just ticked off from the chain, so the change is visible to
   somebody who was already looking at it rather than only to somebody who
   reloads. */
@keyframes rd-tick-in{
  0%{transform:scale(.4);opacity:0}
  60%{transform:scale(1.18);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.rd-just .rd-m{animation:rd-tick-in .42s cubic-bezier(.34,1.56,.64,1) both}
@media (prefers-reduced-motion:reduce){
  .rd-just .rd-m{animation:none}
  .rd-bar i{transition:none}
}

/* Visible to a screen reader, not on the page. The tick and the ring carry the
   state visually; without this they carry it to nobody else. */
.rd-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- the live strip ---- */
.rd-live{margin-bottom:18px}
.rd-live-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.rd-live-s{
  flex:1 1 120px;min-width:0;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line);
}
.rd-live-s b{
  display:block;font-size:23px;line-height:1.1;font-weight:900;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.rd-live-s span{
  display:block;margin-top:3px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);
}
@media (max-width:560px){
  .rd-live-s{flex:1 1 100%}
  .rd-i{font-size:14px}
}