/* Rider Log (Labs) — the ride list and the cinematic replay stage.
   Solid, tactile surfaces on the app's own theme tokens; the route orange
   (--route-highlight) is the single accent. No blur, no glass, no gradients
   on panels — the map is the visual. Touch targets are 44px or more. */

.rl-main{ padding-top:76px; }

.rl-kicker{
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--route-highlight);
}
.rl-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- buttons ---------- */
.rl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 16px; border-radius:10px;
  background:var(--bg-panel); color:var(--text-primary);
  border:1px solid var(--border-strong);
  font-family:var(--font-body); font-weight:600; font-size:13px; line-height:1;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.rl-btn:hover{ background:var(--bg-panel-hover); }
.rl-btn:active{ transform:translateY(1px); }
.rl-btn[aria-pressed="true"]{ background:var(--text-primary); color:var(--bg-panel); border-color:var(--text-primary); }
.rl-btn-primary{ background:var(--route-highlight); color:var(--route-highlight-ink); border-color:var(--route-highlight); }
.rl-btn-primary:hover{ background:var(--route-highlight); filter:brightness(1.06); }
.rl-btn-ghost{ background:transparent; border-color:transparent; color:var(--text-muted); }
.rl-btn-icon{ width:44px; padding:0; font-size:18px; }
.rl-btn[disabled]{ opacity:0.45; cursor:not-allowed; }

/* ---------- the log ---------- */
.rl-log-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.rl-log-head h1{
  margin:2px 0 6px; font-family:var(--font-display); font-weight:700; font-size:clamp(40px, 7vw, 68px);
  line-height:0.95; letter-spacing:0.01em; text-transform:uppercase; color:var(--text-primary);
}
.rl-lede{ margin:0; max-width:52ch; color:var(--text-muted); font-size:15px; line-height:1.5; }

.rl-totals{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  border:1px solid var(--border-strong); border-radius:12px; background:var(--bg-panel); overflow:hidden; margin-bottom:18px;
}
.rl-total{ padding:14px 18px; border-right:1px solid var(--border-subtle); }
.rl-total:last-child{ border-right:0; }
.rl-total strong{ display:block; font-family:var(--font-display); font-weight:700; font-size:34px; line-height:1; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.rl-total span{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); }

.rl-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.rl-field{ display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.rl-field select{
  min-height:44px; padding:0 12px; border-radius:10px; border:1px solid var(--border-strong);
  background:var(--bg-panel); color:var(--text-primary); font-family:var(--font-body); font-size:14px; text-transform:none; letter-spacing:0;
}
.rl-count{ font-family:var(--font-mono); font-size:12px; color:var(--text-muted); }

.rl-flash{
  margin:0 0 14px; padding:12px 16px; border-radius:10px; font-size:14px; line-height:1.4;
  background:var(--bg-panel); border:1px solid var(--border-strong); border-left:5px solid var(--route-highlight); color:var(--text-primary);
}
.rl-flash.is-error{ border-left-color:var(--alert-red); }

.rl-ride-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap:16px; }
.rl-card{
  display:flex; flex-direction:column; background:var(--bg-panel); border:1px solid var(--border-strong);
  border-radius:14px; overflow:hidden; transition:border-color 0.15s ease, transform 0.15s ease;
}
.rl-card:hover{ border-color:var(--route-highlight); transform:translateY(-2px); }
.rl-thumb-btn{
  position:relative; display:block; width:100%; aspect-ratio:16 / 9; padding:0; border:0; border-bottom:1px solid var(--border-subtle); cursor:pointer;
  background-color:var(--bg-panel-raised);
  background-image:linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size:28px 28px; color:var(--route-highlight-ink);
}
.rl-thumb{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.rl-thumb-play{
  position:absolute; right:12px; bottom:12px; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; background:var(--route-highlight); border:2px solid var(--route-highlight-ink);
  transition:transform 0.15s ease;
}
.rl-thumb-btn:hover .rl-thumb-play{ transform:scale(1.08); }
.rl-card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.rl-card-body h3{ margin:0; font-family:var(--font-display); font-weight:700; font-size:24px; line-height:1.1; letter-spacing:0.01em; color:var(--text-primary); overflow-wrap:anywhere; }
.rl-tag{
  display:inline-block; vertical-align:middle; margin-left:6px; padding:3px 7px; border-radius:6px;
  background:var(--text-primary); color:var(--bg-panel); font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
}
.rl-card-date{ font-size:13px; color:var(--text-muted); }
.rl-card-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin:0; padding:10px 0; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.rl-card-stats div{ display:flex; flex-direction:column-reverse; }
.rl-card-stats dd{ margin:0; font-family:var(--font-display); font-weight:700; font-size:21px; line-height:1.1; font-variant-numeric:tabular-nums; }
.rl-card-stats dt{ font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.rl-card-actions{ display:flex; gap:8px; margin-top:auto; }
.rl-card-actions .rl-btn{ flex:1; }

.rl-empty{ text-align:center; padding:56px 20px; border:1px dashed var(--border-strong); border-radius:14px; background:var(--bg-panel); }
.rl-empty h2{ margin:0 0 8px; font-family:var(--font-display); font-size:32px; text-transform:uppercase; }
.rl-empty p{ margin:0 auto 20px; max-width:46ch; color:var(--text-muted); line-height:1.5; }

/* ---------- the stage ---------- */
body.rl-in-stage .menu-btn,
body.rl-in-stage footer.foot{ display:none; }
body.rl-in-stage .rl-main{ padding:10px; max-width:none; }
body.rl-in-stage{ overscroll-behavior:none; }

.rl-stage{
  --rl-bar:0px;
  position:relative; height:calc(100dvh - 20px); min-height:320px; overflow:hidden;
  border:1px solid var(--border-strong); border-radius:14px; background:#e9eef2; color:var(--text-primary);
}
.rl-stage[hidden]{ display:none; }
.rl-stage.is-immersive{ position:fixed; inset:0; z-index:500; height:100dvh; border-radius:0; border:0; }
/* Where the map has nothing to draw (beyond the loaded tiles at a steep, high camera) the page shows
   through; a haze gradient reads as atmosphere rather than an error. */
.rl-map{ position:absolute; inset:0; touch-action:none; cursor:grab; background:linear-gradient(180deg, #9cc3e4 0%, #d9e6f0 55%, #e9eef2 100%); }
/* MapLibre's own stylesheet sets .maplibregl-map{position:relative} and loads after this one;
   without the extra specificity the map collapses to zero height. */
.rl-stage .rl-map.maplibregl-map{ position:absolute; inset:0; }
.rl-map:active{ cursor:grabbing; }
.rl-map .maplibregl-canvas{ outline:none; }
.rl-stage .maplibregl-ctrl-bottom-left,
.rl-stage .maplibregl-ctrl-bottom-right{ margin-bottom:132px; }

/* widescreen bars */
.rl-bars i{ position:absolute; left:0; right:0; height:var(--rl-bar); background:#000; pointer-events:none; transition:transform 0.4s ease; z-index:2; }
.rl-bars i:first-child{ top:0; transform:translateY(-101%); }
.rl-bars i:last-child{ bottom:0; transform:translateY(101%); }
.rl-stage.is-cinema .rl-bars i{ transform:none; }

/* rider locator: only visible while the true-scale bike is too small to see */
.rl-locator{ position:absolute; left:0; top:0; width:0; height:0; z-index:3; pointer-events:none; will-change:transform; }
.rl-locator span{
  position:absolute; left:-21px; top:-21px; width:42px; height:42px; border-radius:50%;
  border:3px solid var(--route-highlight); box-shadow:0 0 0 2px #fff, inset 0 0 0 2px #fff;
  animation:rl-ping 1.6s ease-out infinite;
}
.rl-locator span::after{ content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--route-highlight); }
@keyframes rl-ping{ 0%{ transform:scale(0.8); } 70%{ transform:scale(1.25); } 100%{ transform:scale(0.8); } }
@media (prefers-reduced-motion: reduce){ .rl-locator span{ animation:none; } }

.rl-topbar, .rl-hud, .rl-dock, .rl-caption-wrap, .rl-finish, .rl-buffering, .rl-rec{ z-index:4; }
.rl-topbar, .rl-hud, .rl-dock{ transition:opacity 0.35s ease; }
.rl-stage.is-cinema.is-ui-hidden .rl-topbar,
.rl-stage.is-cinema.is-ui-hidden .rl-hud,
.rl-stage.is-cinema.is-ui-hidden .rl-dock{ opacity:0; pointer-events:none; }

.rl-topbar{
  position:absolute; top:10px; left:10px; right:10px; display:flex; align-items:center; gap:10px; padding:6px;
  background:var(--bg-panel); border:1px solid var(--border-strong); border-radius:12px; box-shadow:0 2px 0 rgba(0,0,0,0.12);
}
.rl-titleblock{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; padding:0 4px; }
.rl-titleblock strong{ font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1; letter-spacing:0.01em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rl-titleblock small{ font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rl-topbar-actions{ display:flex; gap:6px; }

.rl-hud{
  position:absolute; top:76px; right:10px; width:244px; padding:12px 14px 14px;
  background:var(--bg-panel); border:1px solid var(--border-strong); border-top:5px solid var(--route-highlight); border-radius:12px;
  box-shadow:0 2px 0 rgba(0,0,0,0.12);
}
.rl-hud-speed{ display:flex; align-items:baseline; gap:8px; }
.rl-hud-speed span{ font-family:var(--font-display); font-weight:700; font-size:88px; line-height:0.9; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.rl-hud-speed small{ font-size:13px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); }
.rl-hud-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border-subtle); }
.rl-hud-grid strong{ display:block; font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.05; font-variant-numeric:tabular-nums; }
.rl-hud-grid small{ font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); }
.rl-hud-grid small b{ color:var(--route-highlight); }
.rl-hud-lean{ display:flex; align-items:center; gap:10px; }
.rl-lean-dial{ position:relative; width:42px; height:42px; flex:none; }
.rl-lean-dial::before{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--border-strong); border-bottom-color:transparent; transform:rotate(0deg); }
.rl-lean-dial i{ position:absolute; left:50%; bottom:6px; width:4px; height:30px; margin-left:-2px; border-radius:2px; background:var(--route-highlight); transform-origin:50% 100%; transition:transform 0.08s linear; }

.rl-caption-wrap{ position:absolute; left:10px; bottom:134px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; pointer-events:none; }
.rl-caption{
  padding:8px 14px; border-radius:8px; background:var(--bg-panel); border:1px solid var(--border-strong); border-left:5px solid var(--route-highlight);
  font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:0.06em; text-transform:uppercase;
}
.rl-caption.is-pulse{ animation:rl-caption-in 0.45s ease; }
@keyframes rl-caption-in{ from{ transform:translateX(-14px); opacity:0; } to{ transform:none; opacity:1; } }
.rl-callout{
  display:none; padding:8px 14px; border-radius:8px; background:var(--route-highlight); color:var(--route-highlight-ink);
  font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:0.06em; text-transform:uppercase;
}
.rl-callout.is-on{ display:block; }

.rl-buffering{
  position:absolute; top:76px; left:50%; transform:translateX(-50%); padding:8px 14px; border-radius:8px;
  background:var(--bg-panel); border:1px solid var(--border-strong); font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
}
.rl-rec{
  position:absolute; top:76px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:6px 8px 6px 14px; border-radius:10px;
  background:var(--bg-panel); border:1px solid var(--alert-red); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;
}
.rl-rec[hidden], .rl-buffering[hidden]{ display:none; }
.rl-rec b{ width:12px; height:12px; border-radius:50%; background:var(--alert-red); animation:rl-blink 1s steps(2, start) infinite; }
@keyframes rl-blink{ to{ visibility:hidden; } }

.rl-finish{
  position:absolute; left:50%; bottom:140px; transform:translate(-50%, 20px); width:min(94%, 520px); padding:16px 18px; text-align:center;
  background:var(--bg-panel); border:1px solid var(--border-strong); border-top:5px solid var(--route-highlight); border-radius:12px;
  opacity:0; pointer-events:none; transition:opacity 0.3s ease, transform 0.3s ease;
}
.rl-stage.is-finished .rl-finish{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.rl-finish-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:8px 0 14px; }
.rl-finish-stats strong{ display:block; font-family:var(--font-display); font-size:26px; line-height:1.05; }
.rl-finish-stats span{ font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); }

.rl-loader{ position:absolute; inset:0; z-index:6; display:grid; place-items:center; padding:20px; background:var(--bg-void); }
.rl-loader[hidden]{ display:none; }
.rl-loader-card{ width:min(100%, 380px); padding:22px; background:var(--bg-panel); border:1px solid var(--border-strong); border-top:5px solid var(--route-highlight); border-radius:12px; }
.rl-loader-card p{ margin:8px 0 16px; font-size:15px; line-height:1.4; }
.rl-loader-track{ height:6px; border-radius:3px; background:var(--border-subtle); overflow:hidden; margin-bottom:6px; }
.rl-loader-track div{ height:100%; width:0; background:var(--route-highlight); transition:width 0.4s ease; }
.rl-loader.is-error .rl-loader-track div{ background:var(--alert-red); }
.rl-loader-card .rl-btn{ margin-top:12px; }

/* dock: camera chips + transport */
.rl-dock{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px 12px;
  background:var(--bg-panel); border-top:1px solid var(--border-strong);
}
.rl-chips{ display:flex; gap:6px; overflow-x:auto; padding-bottom:10px; scrollbar-width:none; }
.rl-chips::-webkit-scrollbar{ display:none; }
.rl-chip{
  flex:none; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px; border-radius:10px;
  background:var(--bg-panel-raised); border:1px solid var(--border-strong); color:var(--text-primary);
  font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer;
}
.rl-chip kbd{ font-family:var(--font-mono); font-size:10px; padding:2px 5px; border-radius:4px; background:var(--bg-panel); border:1px solid var(--border-strong); color:var(--text-muted); }
.rl-chip:hover{ background:var(--bg-panel-hover); }
.rl-chip.is-on{ background:var(--route-highlight); border-color:var(--route-highlight); color:var(--route-highlight-ink); }
.rl-chip.is-on kbd{ background:transparent; border-color:currentColor; color:inherit; }

.rl-transport{ display:flex; align-items:center; gap:12px; }
.rl-play{
  flex:none; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--text-primary); color:var(--bg-panel); border:0;
}
.rl-play .i-pause{ display:none; }
.rl-play.is-playing .i-play{ display:none; }
.rl-play.is-playing .i-pause{ display:block; }
.rl-timeline-wrap{ position:relative; flex:1; min-width:0; height:52px; }
.rl-timeline{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:ew-resize; touch-action:none; }
#rlPlayhead{ position:absolute; inset:0; pointer-events:none; }
.rl-clock{ flex:none; font-family:var(--font-mono); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-muted); min-width:92px; text-align:right; }
.rl-rate select{ min-height:44px; padding:0 8px; border-radius:10px; border:1px solid var(--border-strong); background:var(--bg-panel-raised); color:var(--text-primary); font-family:var(--font-mono); font-size:13px; font-weight:700; }

/* ---------- share sheet ---------- */
.rl-sheet-overlay{ position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(12,14,18,0.6); }
.rl-sheet{
  width:min(100%, 460px); max-height:calc(100dvh - 32px); overflow:auto; background:var(--bg-panel); color:var(--text-primary);
  border:1px solid var(--border-strong); border-top:5px solid var(--route-highlight); border-radius:14px; padding:16px;
}
.rl-sheet-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.rl-sheet-head h2{ margin:2px 0 0; font-family:var(--font-display); font-size:26px; text-transform:uppercase; line-height:1.05; overflow-wrap:anywhere; }
.rl-icon-btn{ flex:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--border-strong); background:var(--bg-panel-raised); color:var(--text-primary); font-size:16px; cursor:pointer; }
.rl-share-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.rl-share-opt{
  width:100%; display:flex; align-items:center; gap:14px; min-height:60px; padding:10px 14px; text-align:left; cursor:pointer;
  background:var(--bg-panel-raised); border:1px solid var(--border-strong); border-radius:12px; color:var(--text-primary); font-family:var(--font-body);
}
.rl-share-opt:hover:not([disabled]){ border-color:var(--route-highlight); }
.rl-share-opt[disabled]{ opacity:0.5; cursor:not-allowed; }
.rl-share-ico{ font-size:24px; flex:none; width:32px; text-align:center; }
.rl-share-opt strong{ display:block; font-size:15px; }
.rl-share-opt small{ display:block; margin-top:2px; font-size:12px; color:var(--text-muted); line-height:1.35; }
.rl-seg{ display:flex; gap:6px; margin:8px 0 0 46px; }
.rl-seg-btn{ min-height:40px; min-width:56px; border-radius:8px; border:1px solid var(--border-strong); background:var(--bg-panel); color:var(--text-primary); font-family:var(--font-mono); font-size:12px; font-weight:700; cursor:pointer; }
.rl-seg-btn.is-on{ background:var(--text-primary); color:var(--bg-panel); border-color:var(--text-primary); }
.rl-sheet-flash{ margin-bottom:10px; padding:10px 12px; border-radius:8px; background:var(--bg-panel-raised); border-left:4px solid var(--route-highlight); font-size:13px; }
.rl-share-prepared-label{ font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; }
.rl-share-preview{ display:block; width:100%; max-height:46dvh; object-fit:contain; border-radius:10px; border:1px solid var(--border-strong); background:#000; }
.rl-share-file{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:26px 12px; border:1px dashed var(--border-strong); border-radius:10px; font-size:28px; text-align:center; }
.rl-share-file strong{ font-size:14px; overflow-wrap:anywhere; }
.rl-share-file small{ font-size:12px; color:var(--text-muted); }
.rl-share-actions{ display:flex; gap:8px; margin-top:14px; }
.rl-share-actions .rl-btn{ flex:1; }

/* ---------- small screens ---------- */
@media (max-width: 760px){
  .rl-main{ padding-left:14px; padding-right:14px; }
  body.rl-in-stage .rl-main{ padding:0; }
  .rl-stage{ height:100dvh; border-radius:0; border:0; }
  .rl-topbar{ top:8px; left:8px; right:8px; }
  .rl-titleblock small, #rlCinemaBtn, #rlStyleBtn{ display:none; }
  .rl-hud{ top:70px; right:8px; width:auto; min-width:150px; padding:8px 12px 10px; }
  .rl-hud-speed span{ font-size:62px; }
  .rl-hud-grid{ grid-template-columns:1fr; gap:6px; margin-top:8px; padding-top:8px; }
  .rl-hud-grid > div:nth-child(n+3){ display:none; }
  .rl-caption-wrap{ left:8px; bottom:150px; }
  .rl-clock{ display:none; }
  .rl-dock{ padding:8px 8px 10px; }
  .rl-finish{ bottom:156px; }
  .rl-card-stats dd{ font-size:19px; }
  .rl-sheet-overlay{ align-items:flex-end; padding:0; }
  .rl-sheet{ width:100%; border-radius:14px 14px 0 0; }
}
@media (max-width: 760px) and (orientation: landscape){
  .rl-hud{ display:none; }
}