/* F04 · the route replay player — one look for the page (replay.html) and the
   overlay it opens as from Community and from an activity. Everything is
   prefixed rp- so it sits inside any page without touching its rules. */
.rp-overlay{position:fixed;inset:0;z-index:1000;background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif}
.rp-page{position:fixed;inset:0;background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif}
/* The stage: the whole phone, and on a wide screen a 9:16 frame in the middle. */
.rp-stage{position:absolute;inset:0;margin:auto;width:100%;height:100%;max-width:calc(100dvh * 9 / 16);background:#000;overflow:hidden;container-type:inline-size;container-name:rpstage}
@media (min-width:700px){ .rp-stage{border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 6px #1b2130;max-height:calc(100vw * 16 / 9)} }
.rp-cesium{position:absolute;inset:0}
/* The opening: the card's poster (or dark) over the map until the scene is worth showing, then a fade */
.rp-cover{position:absolute;inset:0;z-index:2;background:#0b0f19;transition:opacity .5s ease;overflow:hidden}
.rp-cover-bg{position:absolute;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;filter:blur(26px) brightness(.5);opacity:.9}
.rp-cover-img{position:absolute;left:0;top:50%;width:100%;height:auto;transform:translateY(-50%);object-fit:contain}
/* while the cover is up, the player's chrome waits behind it and the ring sits under the picture */
.rp-stage.rp-covered .rp-top,.rp-stage.rp-covered .rp-live,.rp-stage.rp-covered .rp-mark,.rp-stage.rp-covered .rp-credit{opacity:0}
.rp-stage.rp-covered .rp-wait{top:auto;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-size:12px;color:rgba(255,255,255,.85);z-index:3}
.rp-stage.rp-covered .rp-wait i{width:22px;height:22px;border-width:2px}
.rp-cover.rp-gone{opacity:0;pointer-events:none}
.rp-top,.rp-close,.rp-wait,.rp-msg,.rp-foot,.rp-live,.rp-final,.rp-bar,.rp-signin{z-index:3}
.rp-stage .cesium-viewer-bottom,.rp-stage .cesium-viewer-toolbar,.rp-stage .cesium-widget-credits{display:none!important}
.rp-top{position:absolute;left:0;right:0;top:0;padding:calc(14px + env(safe-area-inset-top,0px)) 14px 40px;pointer-events:none;text-shadow:0 2px 6px rgba(0,0,0,.7)}
/* The stage is the container. An iPad story card is ~236px inside a wide window, so a viewport query never sees it.
   The title scales the way a poster does (23px on the 360-wide story grid): full size on a phone, smaller on that card, and at most two lines. */
.rp-top .rp-t{font-size:clamp(14px, 6.7cqi, 24px);font-weight:800;letter-spacing:-.3px;line-height:1.08;display:flex;align-items:flex-start;gap:clamp(4px, 2cqi, 8px);padding-right:48px}
.rp-top .rp-flag{font-size:.85em;line-height:1.15}
.rp-top .rp-title{min-width:0}
.rp-top .rp-d{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
/* A treadmill run on a borrowed route says so under the distance (26 Sep). The chip wraps inside the card; the stage clips anything that sticks out. */
.rp-top .rp-tag{display:inline-flex;align-items:flex-start;gap:6px;margin-top:7px;padding:4px 10px 4px 8px;border-radius:999px;background:rgba(10,12,18,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);font-size:clamp(10.5px, 4.4cqi, 12.5px);font-weight:600;line-height:1.25;text-shadow:none;max-width:100%;box-sizing:border-box}
.rp-top .rp-tag span{min-width:0}
.rp-top .rp-tag[hidden]{display:none}
.rp-top .rp-tag svg{width:13px;height:13px;flex:none;margin-top:.12em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.rp-close{position:absolute;right:10px;top:calc(10px + env(safe-area-inset-top,0px));width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;border:0;padding:0;font:inherit;font-size:22px;line-height:1;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);-webkit-tap-highlight-color:transparent}
/* Brand and the map credit share one row. On a story card the stage is a narrow 9:16 frame, so each keeps its own width. */
.rp-foot{position:absolute;left:8px;right:8px;bottom:calc(6px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;justify-content:space-between;gap:8px;pointer-events:none;min-width:0}
.rp-mark{position:static;flex:none;font-size:clamp(8px,2.6cqi,11px);font-weight:700;letter-spacing:.04em;opacity:.9;text-shadow:0 1px 3px #000;white-space:nowrap}
.rp-credit{position:static;flex:1 1 auto;min-width:0;text-align:right;font-size:clamp(7px,2.05cqi,9px);line-height:1.15;color:rgba(255,255,255,.7);text-shadow:0 1px 2px #000}
/* The closing card, variant A of the mockup (his pick, 20 Sep): the header its own box, every stat its own box, a soft gap */
.rp-final{position:absolute;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));display:grid;gap:8px;pointer-events:none}
.rp-head{background:rgba(11,15,25,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:14px;padding:10px 12px}
.rp-final h2{margin:0;font-size:15px;font-weight:700}.rp-final p{margin:2px 0 0;font-size:11px;color:rgba(235,235,245,.62)}
.rp-final .rp-row{display:flex;gap:14px}.rp-final .rp-row b{display:block;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}.rp-final .rp-row small{font-size:10px;letter-spacing:1px;color:rgba(235,235,245,.6);font-weight:600}
.rp-stage button{font:inherit;font-weight:600;border:0;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rp-stage button:disabled{opacity:.6;cursor:default}
/* While the map and the figure come in: a ring, and the map already showing behind it */
.rp-wait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;gap:10px;pointer-events:none;text-shadow:0 1px 3px #000;font-size:13px}
.rp-wait i{width:40px;height:40px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rp-spin .9s linear infinite}
.rp-wait span{display:inline-flex;align-items:center;gap:7px}
.rp-wait .rp-wait-sport{width:18px;height:18px;flex:none;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes rp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .rp-wait i{animation-duration:2s} }
/* The live strip: the head's heart rate, glucose and pace, and a small chart of the series over the line — small and discreet (his words) */
/* No backdrop blur here (22 Sep): on his 17 Pro Max (iOS 27) the blurred panel never painted once the cover
   had gone — the strip was there for layout (Share sat above it) and invisible; a plain translucent panel shows. */
.rp-live{position:absolute;left:clamp(8px,3.6cqi,14px);right:clamp(8px,3.6cqi,14px);bottom:calc(34px + env(safe-area-inset-bottom,0px));background:rgba(11,15,25,.72);border-radius:14px;padding:8px clamp(6px,3.2cqi,12px) 8px;pointer-events:none;transform:translateZ(0)}
/* The row follows the stage, not the window: an iPad story card is ~236px wide inside a wide web view. */
.rp-tiles{display:flex;gap:clamp(4px,4cqi,14px);align-items:center;min-width:0}
.rp-tile{display:flex;align-items:baseline;gap:clamp(2px,1.4cqi,5px);flex:1 1 0;min-width:min-content;white-space:nowrap}
.rp-tile svg{width:clamp(12px,4.2cqi,15px);height:clamp(12px,4.2cqi,15px);flex:none;align-self:center}
.rp-tile[data-tile="hr"] svg{fill:#FF375F}.rp-tile[data-tile="glucose"] svg{fill:#64D2FF}
.rp-tile svg.rp-stroke{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rp-tile[data-tile="time"] b{font-size:clamp(11px,4.4cqi,15px)}
.rp-tile b{font-size:clamp(11px,5cqi,17px);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.rp-tile small{font-size:clamp(8px,2.8cqi,10px);font-weight:600;color:rgba(235,235,245,.7);letter-spacing:.2px}
.rp-chartwrap{position:relative;margin-top:6px;padding-bottom:14px}
.rp-chart{display:block;width:100%;height:44px}
.rp-cursor-km{position:absolute;bottom:-2px;transform:translateX(-50%);font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 2px #000}
/* The closing card's stats: the post's own row — icon and label over the number, a box each.
   Four across when the stage can hold the words. Below that (the 236px iPad story card, the 305px iPhone frame)
   the same words sit two by two. The stage is the container: the iPad sheet is ~580px wide, so a viewport query never sees the card.
   Values stay on the 10px floor (clamp below). */
.rp-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.rp-stat{flex:0 0 calc(25% - 4.5px);box-sizing:border-box;display:grid;gap:3px;padding:8px 6px;min-width:0;border-radius:12px;background:rgba(11,15,25,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.rp-stat-l{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:rgba(235,235,245,.7);white-space:nowrap}
.rp-stat-l-noicon{padding-left:0}
.rp-stat-l-short{display:none}
.rp-stat-l svg{width:12px;height:12px;flex:none;fill:rgba(235,235,245,.75)}
.rp-stat-l svg.rp-stroke{fill:none;stroke:rgba(235,235,245,.75);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rp-stat:nth-child(n) .rp-stat-l svg[class*="heart"]{fill:#FF375F}
.rp-stat-v{display:flex;align-items:baseline;gap:2px}.rp-stat-v b{font-size:clamp(10px,calc(4.8cqi - 4px),15px);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.2px}.rp-stat-v small{font-size:clamp(8px,calc(3.2cqi - 2px),10px);font-weight:600;color:rgba(235,235,245,.7)}
.rp-stat-tappable{cursor:pointer;-webkit-tap-highlight-color:transparent;pointer-events:auto}
/* Face dots (face-dots.css) on the dark card: tertiary ink takes its dark-theme value; the column keeps 15 px on the right,
   and the values scale with the card (13.6 px at 390, 10 px at 320) so the longest ("2,450 kcal", "101 mg/dL") ends clear of it. */
.rp-stats{--ink-tertiary:rgba(235,235,245,.30);container-type:inline-size}
.rp-stat:has(> .ox-face-dots){padding-right:15px}
/* The exported frame is painted, not a screenshot of this card. Hide the hold dots while that paint is running so a capture of the stage cannot pick them up. */
.rp-stage.rp-export .ox-face-dots{display:none!important}
.rp-stat{position:relative}
@container rpstage (max-width: 340px){
  .rp-stat{flex:0 0 calc(50% - 3px)}
}
.rp-final .rp-row{display:none}
.rp-share.rp-ready{animation:rp-pulse 1s ease-in-out 3}
@keyframes rp-pulse{50%{transform:scale(1.06)}}
.rp-bar{position:absolute;left:14px;right:14px;bottom:calc(30px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;justify-content:flex-end}
.rp-stage.rp-noshare .rp-bar{display:none}
.rp-stage:has(.rp-live:not([hidden])) .rp-bar{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
.rp-bar button{min-height:44px;padding:0 18px;border-radius:12px;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:15px;display:inline-flex;align-items:center;gap:8px}
.rp-bar button.rp-primary{background:#0A84FF}
.rp-bar button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* A toast above the buttons: every tap on Share answers here */
.rp-msg{position:absolute;left:14px;right:14px;bottom:calc(84px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;font-size:14px;line-height:1.35;color:#fff;background:rgba(11,15,25,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;padding:10px 14px;pointer-events:none}
.rp-stage:has(.rp-live:not([hidden])) .rp-msg{bottom:calc(204px + env(safe-area-inset-bottom,0px))}
.rp-stage:has(.rp-final:not([hidden])) .rp-msg{bottom:auto;top:calc(70px + env(safe-area-inset-top,0px))}
/* During an export the progress line stays above the closing card: 84 inset + 200 card + 12 gap. */
.rp-stage.rp-export:has(.rp-final:not([hidden])) .rp-msg{top:auto;bottom:calc(296px + env(safe-area-inset-bottom,0px))}
.rp-msg .rp-prog{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.2);margin:8px auto 0;max-width:220px;overflow:hidden}
.rp-msg .rp-prog i{display:block;height:100%;border-radius:2px;background:#0A84FF;transition:width .3s ease}
.rp-msg .rp-prog.rp-indet i{width:35%;animation:rp-indet 1.2s ease-in-out infinite}
@keyframes rp-indet{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.rp-signin{position:absolute;left:0;right:0;top:55%;margin:0;text-align:center}
.rp-signin a{color:#fff;background:#0A84FF;text-decoration:none;font-weight:600;padding:12px 18px;border-radius:12px;display:inline-block}
.rp-stage [hidden]{display:none!important}