/* The walk: one step on the screen (run.js). Drawn on /r and a routine's page over
   site.css, and on /embed over embed.css, so it reads only the tokens both define.
   The routine's own colour (--t) is identity: the mark and how far the walk has got.
   The accent is the press that moves it forward; everything else is grey. */
.rw-open,.rw-open body{overflow:hidden}
.rw-sheet{position:fixed;inset:0;z-index:100;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--t-sheet,#7c5cff) 14%,transparent),transparent 70%),var(--page)}
.rw{--t:#7c5cff;--late:#B85C00;display:flex;flex-direction:column;min-height:100%;max-width:560px;margin:0 auto;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));box-sizing:border-box;color:var(--ink);font-family:var(--sans)}
.rw-sheet .rw{min-height:100vh;min-height:100dvh}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .rw{--late:#FF9F43}}
:root[data-theme=dark] .rw{--late:#FF9F43}

.rw-top{display:flex;align-items:center;gap:10px;min-height:44px}
.rw-mark{flex:none;width:22px;height:22px;border-radius:7px;background:var(--t)}
.rw-name{flex:1;min-width:0;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw-count{flex:none;font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rw-close{flex:none;height:32px;padding:0 14px;border:0;border-radius:999px;background:var(--chip);color:var(--ink);font:600 14px var(--sans);cursor:pointer}

.rw-track{height:4px;border-radius:2px;background:var(--chip);margin:8px 0 0;overflow:hidden}
.rw-track span{display:block;height:100%;background:var(--t);border-radius:2px;transition:width .3s var(--snappy,ease)}

.rw-body{flex:1;padding:28px 2px 8px}
.rw-intro{padding-top:20px}
.rw-kind{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.rw-title{margin:6px 0 0;font-family:var(--display);font-size:clamp(26px,6vw,34px);line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.rw-detail{margin:12px 0 0;font-size:17px;line-height:1.5;color:var(--ink)}
.rw-meta{margin:12px 0 0;font-size:15px;color:var(--ink-2)}
.rw-list{margin:18px 0 0;padding-left:1.4em;color:var(--ink-2);font-size:15px;line-height:1.6}
.rw-itself{margin:16px 0 0;padding:10px 12px;border-radius:12px;background:var(--chip);font-size:14px;line-height:1.45;color:var(--ink-2)}
.rw-link{display:inline-flex;align-items:center;margin-top:16px;height:40px;padding:0 16px;border-radius:999px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-ink);font-weight:600;font-size:15px;text-decoration:none}
.rw-link::after{content:"\2197";margin-left:6px}

.rw-clock{display:flex;align-items:center;gap:14px;margin-top:26px}
.rw-face{font-family:var(--display);font-size:clamp(48px,14vw,72px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.rw-face.late{color:var(--late)}
.rw-up{margin:10px 0 0;font-size:15px;font-weight:600;color:var(--late)}
.rw-asks{margin:18px 0 0;font-size:15px;font-weight:600;color:var(--ink)}

/* The two presses stay under the thumb however long a step's words run: a frame on
   somebody's page is often shorter than the walk drawn in it. */
.rw-verbs{display:flex;gap:10px;padding:16px 0 4px;margin-top:auto}
.rw>.rw-verbs{position:sticky;bottom:0;background:linear-gradient(to bottom,transparent,var(--page) 14px)}
.rw-body .rw-verbs{margin-top:22px;padding:0}
.rw-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 18px;border:0;border-radius:999px;
  background:var(--chip);color:var(--ink);font:600 17px var(--sans);cursor:pointer;text-decoration:none;text-align:center}
.rw-btn:hover{text-decoration:none;opacity:.88}
.rw-btn:disabled{opacity:.4;cursor:default}
.rw-go{background:var(--accent);color:#fff}
.rw-small{flex:none;min-height:36px;padding:0 14px;font-size:15px}
.rw-btn:focus-visible,.rw-close:focus-visible,.rw-link:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:2px}

.rw-note{display:block;width:100%;margin-top:20px;padding:12px 14px;border:0;border-radius:14px;background:var(--card);color:var(--ink);
  font:16px/1.4 var(--sans);resize:vertical;box-shadow:inset 0 0 0 .5px var(--separator)}
.rw-pitch{margin-top:28px;padding:18px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 .5px var(--separator)}
.rw-pitch p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.rw-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.rw-ctas .rw-btn{flex:1 1 160px;min-height:44px;font-size:15px}

.rw-credit{padding:12px 0 0;text-align:center;font-size:13px}
.rw-credit a{color:var(--ink-2);text-decoration:none}
.rw-credit a:hover{color:var(--ink);text-decoration:underline}

/* The button that opens it, on /r's card and on a routine's page. */
.lp-routine .rt-walk{margin-top:16px;height:44px;font-size:16px}
.r-walk{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.r-walk .btn{height:44px;font-size:16px;padding:0 20px}

/* The embed's page has nothing else on it: the walk is the page. */
.rr-embed .rw{min-height:100vh;min-height:100dvh;padding:14px 16px 10px}
.rr-embed .rw-body{padding-top:18px}
.rr-embed .rw-title{font-size:clamp(22px,6vw,28px)}
.rr-embed .rw-intro .rw-detail{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rr-embed .rw-face{font-size:clamp(40px,12vw,56px)}