/* ============================================================================
   guides-run.css — /guides "the run" section.
   The pinned phone: the phone stays put in the middle column, the notes
   scroll past on either side, and each text arrives in the phone when its
   note reaches the line. Layered on home.css tokens; every class is rn-
   prefixed to stay clear of home.css (.grid) and guides.css.
   Registered in build.py CACHE_BUST_ASSETS — run python3 build.py after edits.
   ========================================================================== */

#run .rn-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-size:12px;color:var(--q);}
#run .rn-legend span{display:inline-flex;align-items:center;gap:8px;}

/* the four step markers: shape only, no colour (verified stays the only saturated value) */
.rn-mk{display:inline-block;width:7px;height:7px;flex:none;}
.rn-mk.talk{border:1.5px solid var(--i);background:var(--p);}
.rn-mk.do{background:var(--i);}
.rn-mk.system{border:1.5px solid var(--q);border-radius:50%;}
.rn-mk.hand{background:var(--q);border-radius:50%;}

/* the grid: notes left, phone centre (sticky), notes right; one row per beat */
.rn-grid{display:grid;grid-template-columns:minmax(0,1fr) 372px minmax(0,1fr);column-gap:44px;margin-top:56px;}
.rn-colhead{grid-row:1;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--q);padding-bottom:10px;border-bottom:1px solid rgba(20,20,20,.14);align-self:end;}
.rn-colhead.L{grid-column:1;}
.rn-colhead.R{grid-column:3;}
.rn-cell{min-height:58vh;display:block;padding:12px 0;}
/* each note sticks beside the phone for the length of its beat, then scrolls on; the JS fires the beat when the row top meets the same line */
.rn-cell .rn-card{position:sticky;top:calc(50vh - 60px);}
.rn-cell.L{grid-column:1;}
.rn-cell.R{grid-column:3;}
.rn-pcol{grid-column:2;}
.rn-stick{position:sticky;top:3vh;height:94vh;display:flex;align-items:center;}

/* the notes */
.rn-card{border:1px solid rgba(20,20,20,.18);border-radius:4px;padding:12px 14px;font-size:13.5px;line-height:1.5;color:var(--q);background:var(--p);transition:border-color .25s,color .25s;}
.rn-card .ty{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--q);margin-bottom:6px;}
.rn-card.on{border-color:var(--i);color:var(--i);}
.rn-card .ok{color:var(--v);font-weight:600;}
.rn-card .ok::before{content:"\2713\00a0";}
.rn-card .nx{display:inline-block;margin-top:8px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--i);border:1px solid rgba(20,20,20,.35);border-radius:4px;padding:2px 7px;}
/* the right note lands after the reply, and stays once it has */
.rn-cell.R .rn-card{opacity:0;transform:translateY(6px);transition:opacity .25s cubic-bezier(.33,0,.2,1),transform .25s cubic-bezier(.33,0,.2,1),border-color .25s,color .25s;}
.rn-cell.R .rn-card.on,.rn-cell.R .rn-card.done{opacity:1;transform:none;}

/* the phone */
.rn-phone{width:100%;max-width:372px;margin:0 auto;border:5px solid var(--i);border-radius:32px;background:var(--p);display:flex;flex-direction:column;overflow:hidden;height:min(700px,88vh);box-sizing:border-box;}
.rn-head{display:flex;gap:10px;align-items:center;padding:14px 16px 12px;border-bottom:1px solid rgba(20,20,20,.14);flex:none;}
.rn-av{width:28px;height:28px;border-radius:50%;background:var(--i);color:var(--p);font-weight:700;font-size:13px;display:grid;place-items:center;flex:none;}
.rn-name{font-size:13px;font-weight:600;line-height:1.25;}
.rn-role{font-size:10.5px;color:var(--q);line-height:1.3;}
.rn-screen{flex:1;position:relative;overflow:hidden;min-height:0;}
.rn-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:11.5px;color:var(--q);text-align:center;padding:0 40px;transition:opacity .3s;}
.rn-empty.off{opacity:0;}
.rn-msgs{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:8px;padding:12px;transition:transform .55s cubic-bezier(.33,0,.2,1);}
.rn-msg{max-width:84%;border-radius:18px;padding:9px 12px;font-size:13px;line-height:1.45;overflow-wrap:anywhere;opacity:0;transform:translateY(6px);transition:opacity .2s cubic-bezier(.33,0,.2,1),transform .2s cubic-bezier(.33,0,.2,1);}
.rn-msg.guide{align-self:flex-start;border:1px solid rgba(20,20,20,.35);border-bottom-left-radius:5px;}
.rn-msg.me{align-self:flex-end;background:var(--i);color:var(--p);border-bottom-right-radius:5px;}
.rn-msg.photo{align-self:flex-end;background:none;color:var(--q);border:1px dashed rgba(20,20,20,.35);font-size:11.5px;padding:20px 12px;min-width:104px;text-align:center;}
.rn-msg.photo.has-img{padding:0;border:0;min-width:0;width:62%;overflow:hidden;border-radius:18px;border-bottom-right-radius:5px;background:var(--i);}
.rn-msg.photo img{display:block;width:100%;height:auto;max-height:250px;object-fit:cover;object-position:center top;}
.rn-link{text-decoration:underline;text-underline-offset:2px;font-weight:600;}
.rn-stamp{align-self:center;font-size:10.5px;color:var(--q);font-variant-numeric:tabular-nums;letter-spacing:.02em;margin:6px 0 0;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;}
.rn-switch{align-self:center;font-size:10.5px;color:var(--q);font-variant-numeric:tabular-nums;letter-spacing:.02em;margin:2px 0;text-align:center;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;}
.rn-msg.in,.rn-stamp.in,.rn-switch.in{opacity:1;transform:none;}
.rn-foot{display:flex;gap:8px;align-items:center;padding:10px 12px 14px;border-top:1px solid rgba(20,20,20,.14);flex:none;}
.rn-in{flex:1;border:1px solid rgba(20,20,20,.35);border-radius:16px;padding:7px 12px;font-size:12.5px;color:var(--q);}
.rn-send{background:var(--i);color:var(--p);border-radius:16px;padding:7px 12px;font-size:12px;font-weight:600;}

/* phones: the phone pins at the top, the notes scroll under it */
@media (max-width:960px){
  .rn-grid{grid-template-columns:minmax(0,1fr);column-gap:0;margin-top:36px;}
  .rn-colhead{display:none;}
  .rn-pcol{grid-column:1!important;grid-row:1!important;position:sticky;top:0;z-index:5;background:var(--p);padding:8px 0 10px;border-bottom:1px solid rgba(20,20,20,.14);}
  .rn-stick{position:static;height:auto;display:block;}
  .rn-phone{height:44svh;max-width:340px;}
  .rn-cell{grid-column:1!important;grid-row:auto!important;min-height:0;padding:14px 0 0;}
  .rn-cell .rn-card{position:static;}
  .rn-cell.L{padding-top:28px;}
  .rn-cell.R .rn-card{opacity:1;transform:none;}
}

/* assembled: ?rm=1 or reduced motion serves the whole run at rest, one column */
body.rn-static .rn-grid{grid-template-columns:minmax(0,1fr);column-gap:0;}
body.rn-static .rn-colhead{display:none;}
body.rn-static .rn-pcol{grid-column:1!important;grid-row:1!important;position:static;padding:0;border:0;}
body.rn-static .rn-stick{position:static;height:auto;display:block;}
body.rn-static .rn-phone{height:auto;}
body.rn-static .rn-screen{overflow:visible;}
body.rn-static .rn-msgs{position:static;transform:none!important;transition:none;}
body.rn-static .rn-msg,body.rn-static .rn-stamp,body.rn-static .rn-switch{opacity:1;transform:none;transition:none;}
body.rn-static .rn-empty{display:none;}
body.rn-static .rn-cell{grid-column:1!important;grid-row:auto!important;min-height:0;padding:14px 0 0;max-width:640px;}
body.rn-static .rn-cell .rn-card{position:static;}
body.rn-static .rn-cell.L{padding-top:28px;}
body.rn-static .rn-cell.R .rn-card{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .rn-msg,.rn-stamp,.rn-card,.rn-msgs,.rn-empty{transition:none!important;}
}

/* ============================================================================
   Top placement (.rn-dark): the run in the descent's place, on the black
   ground, in the descent's own language — glass slabs with the paper glow,
   the blue text slab (#2E6FE0→#1A47A2, edge #A8CAFF), Newsreader captions on
   the left, the verified green (#45D07E) as the only other colour.
   ========================================================================== */
#runband{background:#0A0A0A;color:var(--p);padding:52px 0 120px;}
#runband .rn-credit{margin:56px 0 0;font-size:11.5px;color:var(--pl62);max-width:70ch;}
.rn-dark .rn-intro{color:var(--pl62);font-size:15.5px;line-height:1.65;max-width:60ch;margin:0;}
.rn-dark .rn-intro b{color:var(--p);font-weight:600;}
.rn-dark .rn-legend{color:var(--pl62);margin-top:18px;}
.rn-dark .rn-mk.talk{border-color:var(--p);background:transparent;}
.rn-dark .rn-mk.do{background:var(--p);}
.rn-dark .rn-mk.system{border-color:var(--pl62);}
.rn-dark .rn-mk.hand{background:var(--pl62);}
.rn-dark .rn-grid{margin-top:64px;}
.rn-dark .rn-colhead{color:var(--pl62);border-bottom-color:rgba(252,252,251,.18);}

/* left: the trigger, in the descent's caption voice */
.rn-dark .rn-cell.L .rn-card{border:0;background:transparent;padding:0;box-shadow:none;color:var(--pl62);transition:color .45s ease;max-width:none;}
.rn-dark .rn-cell.L .rn-card .ty{color:var(--pl62);margin-bottom:12px;}
.rn-dark .rn-cell.L .rn-card p{margin:0;max-width:19ch;font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(23px,2.3vw,31px);line-height:1.28;letter-spacing:-.005em;}
.rn-dark .rn-cell.L .rn-card.on{color:var(--p);}

/* right: what it changes, as a glass slab that lights when it lands */
.rn-dark .rn-cell.R .rn-card{border:1px solid rgba(252,252,251,.28);background:#0A0A0A;color:var(--pl62);box-shadow:0 0 16px rgba(252,252,251,.08),0 0 44px rgba(252,252,251,.04);transform:translateY(6px);transition:opacity .25s cubic-bezier(.33,0,.2,1),transform .25s cubic-bezier(.33,0,.2,1),border-color .35s,color .35s,box-shadow .35s;}
.rn-dark .rn-cell.R .rn-card.on,.rn-dark .rn-cell.R .rn-card.done{transform:none;}
.rn-dark .rn-cell.R .rn-card.on{border-color:rgba(252,252,251,.6);color:var(--p);box-shadow:0 0 18px rgba(252,252,251,.18),0 0 60px rgba(252,252,251,.09);}
.rn-dark .rn-card .ty{color:var(--pl62);}
.rn-dark .rn-card .ok{color:#45D07E;}
.rn-dark .rn-cell.R .rn-card.on .ok{text-shadow:0 0 12px rgba(69,208,126,.55);}
.rn-dark .rn-card .nx{color:var(--p);border-color:rgba(252,252,251,.35);}

/* the phone: a glass slab, floating in the slabs' own space */
.rn-dark .rn-phone{border:1px solid rgba(252,252,251,.45);background:#0A0A0A;box-shadow:0 0 22px rgba(252,252,251,.18),0 0 70px rgba(252,252,251,.08);}
.rn-dark .rn-head{border-bottom-color:rgba(252,252,251,.16);}
.rn-dark .rn-av{background:var(--p);color:var(--i);}
.rn-dark .rn-role{color:var(--pl62);}
.rn-dark .rn-empty{color:var(--pl62);}
.rn-dark .rn-msg.guide{border-color:rgba(252,252,251,.4);background:#0A0A0A;color:var(--p);box-shadow:0 0 14px rgba(252,252,251,.12),0 0 40px rgba(252,252,251,.05);}
.rn-dark .rn-msg.me{background:linear-gradient(160deg,#2E6FE0,#1A47A2);border:1px solid rgba(168,202,255,.55);color:#fff;box-shadow:0 0 16px rgba(61,126,255,.3),0 0 44px rgba(61,126,255,.12);}
.rn-dark .rn-msg.photo{background:transparent;border:1px dashed rgba(168,202,255,.5);color:rgba(252,252,251,.72);box-shadow:none;}
.rn-dark .rn-msg.photo.has-img{border:1px solid rgba(168,202,255,.55);box-shadow:0 0 16px rgba(61,126,255,.3),0 0 44px rgba(61,126,255,.12);background:#0A0A0A;}
.rn-dark .rn-link{color:#A8CAFF;}
.rn-dark .rn-stamp{color:var(--pl62);}
.rn-dark .rn-foot{border-top-color:rgba(252,252,251,.16);}
.rn-dark .rn-in{border-color:rgba(252,252,251,.3);color:var(--pl62);}
.rn-dark .rn-send{background:var(--p);color:var(--i);}

@media (max-width:960px){
  #runband{padding:32px 0 96px;}
  .rn-dark .rn-pcol{background:#0A0A0A;border-bottom-color:rgba(252,252,251,.16);}
  .rn-dark .rn-phone,.rn-dark .rn-cell.R .rn-card,.rn-dark .rn-cell.R .rn-card.on,.rn-dark .rn-cell.R .rn-card.done{transform:none;}
  .rn-dark .rn-cell.L .rn-card p{font-size:22px;}
}
body.rn-static .rn-dark .rn-phone,body.rn-static .rn-dark .rn-cell.R .rn-card{transform:none;}

/* ── other channels in the one thread: the email card, the voice call ── */
.rn-msg.email,.rn-msg.call{max-width:92%;border-radius:12px;border-bottom-left-radius:12px;}
.rn-ch{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--q);margin-bottom:6px;}
.rn-sub{font-weight:600;margin-bottom:4px;}
.rn-meta{display:block;font-size:10.5px;letter-spacing:.02em;color:var(--q);font-variant-numeric:tabular-nums;margin-top:6px;}
.rn-msg.call{display:flex;gap:10px;align-items:flex-start;}
.rn-msg.call svg{flex:none;margin-top:2px;}
.rn-msg.call .rn-t{display:block;font-weight:600;}
.rn-msg.call .rn-meta{margin-top:3px;}
.rn-msg.call .rn-n{display:block;font-size:12.5px;line-height:1.45;color:var(--q);margin-top:6px;}
.rn-dark .rn-switch{color:var(--pl62);}
.rn-dark .rn-ch,.rn-dark .rn-meta,.rn-dark .rn-msg.call .rn-n{color:var(--pl62);}
.rn-dark .rn-msg.email{border-color:rgba(252,252,251,.4);box-shadow:0 0 16px rgba(252,252,251,.14),0 0 44px rgba(252,252,251,.07);}
.rn-dark .rn-msg.call{border-color:rgba(190,172,252,.55);box-shadow:0 0 16px rgba(154,134,240,.26),0 0 44px rgba(154,134,240,.12);}

/* ── where it all lands: the portal on the axis, pinned; captions scroll past and swap its screens ── */
.rn-portal{margin-top:120px;}
.rn-pgrid{display:grid;grid-template-columns:400px minmax(0,1fr);column-gap:40px;align-items:start;}
.rn-psteps{padding-top:10vh;}
.rn-pstep{min-height:74vh;display:flex;flex-direction:column;justify-content:center;max-width:420px;}
.rn-pstep .lab{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--pl62);margin:0 0 18px;}
.rn-pstep .big{margin:0;font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(25px,2.5vw,36px);line-height:1.24;letter-spacing:-.005em;color:var(--pl62);max-width:18ch;transition:color .45s ease;}
.rn-pstep.on .big{color:var(--p);}
.rn-pstep .rn-intro{margin-top:18px;max-width:38ch;}
.rn-ptcol{position:relative;min-height:100%;}
.rn-pstick{position:sticky;top:0;height:100vh;}
.rn-iso{position:absolute;left:50%;top:50%;width:1120px;height:1400px;transform:translate(-44%,-50%) perspective(3200px) rotateX(30deg) rotateZ(22deg) rotateY(-6deg) scale(.62);transform-origin:50% 50%;pointer-events:none;}
.rn-deck{position:relative;width:1120px;height:1400px;border-radius:14px;overflow:hidden;background:#F3F5F8;box-shadow:0 0 0 1px rgba(252,252,251,.6),0 0 30px rgba(252,252,251,.32),0 0 110px rgba(252,252,251,.14);}
.rn-pscreen{position:absolute;inset:0;transition:opacity .32s cubic-bezier(.33,0,.2,1),transform .4s cubic-bezier(.33,0,.2,1);}
.rn-pscreen .pt{min-height:100%;user-select:none;}
.rn-pscreen.past{opacity:0;transform:translate(-3%,-5%) scale(.98);}
.rn-pscreen.now{opacity:1;transform:none;}
.rn-pscreen.future{opacity:0;transform:translate(3%,5%) scale(.98);}
@media (max-width:960px){
  .rn-portal{margin-top:72px;}
  .rn-pgrid{grid-template-columns:minmax(0,1fr);column-gap:0;}
  .rn-ptcol{order:-1;position:sticky;top:0;z-index:5;background:#0A0A0A;height:calc(1400px * .28 + 20px);border-bottom:1px solid rgba(252,252,251,.16);}
  .rn-pstick{position:static;height:auto;}
  .rn-iso{left:0;top:10px;transform:scale(.28);transform-origin:0 0;}
  .rn-psteps{padding-top:0;}
  .rn-pstep{min-height:0;padding:28px 0 8px;}
}
body.rn-static .rn-pstick,body.rn-static .rn-ptcol{position:static;height:auto;}
body.rn-static .rn-iso{position:relative;left:auto;top:auto;transform:scale(.3);transform-origin:0 0;height:calc(1400px * 3 * .3);}
body.rn-static .rn-deck{height:auto;overflow:visible;box-shadow:none;background:none;}
body.rn-static .rn-pscreen{position:static;opacity:1;transform:none;margin-bottom:20px;}
body.rn-static .rn-pstep{min-height:0;padding:20px 0;}