/**
 * Laydn guided tour — ROAMR SCREEN.
 *
 * ⚠️ THE APP IS A LIGHT THEME INSIDE A DARK SITE. The marketing body colour is
 *    var(--white) (#F2F2F2); inheriting it into a white card renders invisible
 *    text. Every rule below sets colour explicitly, and every var() carries a
 *    literal fallback so the file also works inside walkthrough/print.php.
 *
 * Palette: ink #0a0a0a · body #5a6068 · muted #6a6f78 · faint #8a909a
 *          line #e3e6ea · hairline #eef0f3 · card #fff · ground #f7f8fa
 *          volt-as-text #4a6b00 (never #C8F135 on white)
 *          amber #fff4e0 / #8a5a00 / #f0dcb8   cyan #e0f6fb / #0b6b7d
 *
 * ⚠️ Faint #8a909a is ~3.3:1 on white — only for uppercase stat labels, the
 *    placeholder and the disclaimer (as shipped). Anything a haulier actually
 *    reads at 11–12px (leg sub-line, notes, driver, day run) is #6a6f78, which
 *    is also what the shipped screen uses.
 *
 * Prefix: rmr-  (matches the shipped product's own class names). Desktop rules
 *    are bare .rmr-* rather than .lw-scaler-scoped because walkthrough/print.php
 *    renders screens OUTSIDE a scaler. Phone rules are .lw-scaler.is-hand only.
 *
 * ⚠️ DELIBERATE DIVERGENCE from the shipped cascade: in production a later
 *    duplicate rule repaints .rmr-overnight grey and .rmr-tipin slate, so the
 *    two hand-off banners look nearly identical (recon gotcha #1). This screen
 *    exists to make the overnight hand-off legible, so the night-out banner is
 *    amber and the morning tip-in is cyan.
 *    Other deliberate divergences (markup side, roamr.php): the stat row shows
 *    Total mi where the product shows Empty mi (the data-lw-miles hook is on
 *    it); legs carry a collection time; the card names the driver; the day
 *    meta shows "N mi empty" only when N > 0 (the product always shows it).
 */

.rmr-form, .rmr-form *,
.rmr-tour, .rmr-tour *,
.rmr-empty, .rmr-empty *,
.rmr-solving, .rmr-solving *,
.rmr-caveat, .rmr-caveat *{ box-sizing:border-box; }

.rmr-glyph{ transform-origin:60% 50%; }

/* ---------------- form ---------------- */
.rmr-form{ padding:18px 20px; margin-bottom:20px; color:var(--lw-ink,#0a0a0a); }
.rmr-grid{ display:grid; grid-template-columns:1.4fr 1fr .9fr 1.1fr; gap:12px; }
.rmr-field{ display:block; min-width:0; }
.rmr-field span{
  display:block; font-size:11px; font-weight:600; color:var(--lw-body,#5a6068);
  margin-bottom:5px; letter-spacing:.02em;
}
.rmr-field input{
  width:100%; height:40px; padding:0 12px; border:1px solid var(--lw-line,#e3e6ea);
  border-radius:9px; font:inherit; font-size:13px; color:var(--lw-ink,#0a0a0a); background:#fff;
}
.rmr-field input::placeholder{ color:#b0b6be; }
.rmr-field input[readonly]{ color:var(--lw-body,#5a6068); background:#fbfcfd; }

.rmr-profile-row{ display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; }
.rmr-profile-row .lbl{ font-size:11px; font-weight:600; color:var(--lw-body,#5a6068); letter-spacing:.02em; }
.rmr-seg{
  display:inline-flex; gap:4px; padding:4px; background:#f3f4f6;
  border:1px solid var(--lw-line,#e3e6ea); border-radius:12px;
}
.rmr-seg label{
  padding:6px 13px; border-radius:8px; cursor:default; color:var(--lw-body,#5a6068);
  font-family:'Anta','Inter',sans-serif; font-size:12px; line-height:1.2;
  transition:background .18s ease, color .18s ease;
}
.rmr-seg input{ position:absolute; opacity:0; width:0; height:0; }
.rmr-seg label.is-on,
.rmr-seg label:has(input:checked){
  background:var(--lw-volt,#C8F135); color:#0a0a0a; box-shadow:0 1px 2px rgba(15,18,22,.12);
}

.rmr-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; flex-wrap:wrap; }

.rmr-home{ display:inline-flex; align-items:center; gap:9px; position:relative; }
.rmr-home input{ position:absolute; opacity:0; width:0; height:0; }
.rmr-home .track{
  width:38px; height:22px; flex:none; border-radius:99px; background:#d8dce1; position:relative;
  transition:background .18s ease;
}
.rmr-home .knob{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:99px;
  background:#fff; box-shadow:0 1px 2px rgba(15,18,22,.18);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background .18s ease;
}
.rmr-home.is-on .track,
.rmr-home:has(input:checked) .track{ background:var(--lw-volt,#C8F135); }
.rmr-home.is-on .knob,
.rmr-home:has(input:checked) .knob{ transform:translateX(16px); background:#0a0a0a; }
.rmr-home .txt{ font-size:12.5px; color:var(--lw-body,#5a6068); }

.rmr-go{ display:inline-flex; align-items:center; gap:9px; }
.rmr-go i{ font-size:12px; color:#0a0a0a; }

/* ---------------- solving (staged; no such state ships) ---------------- */
.rmr-solving{ padding:26px 20px; text-align:center; }
.rmr-scan-line{
  height:3px; border-radius:99px; margin-bottom:14px;
  background:linear-gradient(90deg,transparent,var(--lw-volt,#C8F135),transparent);
}
.rmr-scan-text{ font-size:13px; color:var(--lw-body,#5a6068); margin:0; }

/* ---------------- results head ---------------- */
.rmr-results-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.rmr-results-head h2{ font-size:17px; color:var(--lw-ink,#0a0a0a); margin:0; }
.rmr-note{ font-size:12px; color:#6a6f78; }

/* ---------------- caveat ---------------- */
.rmr-caveat{
  display:flex; gap:11px; align-items:flex-start; background:rgba(255,200,80,.14);
  border:1px solid rgba(255,200,80,.55); box-shadow:0 0 0 4px rgba(255,200,80,.08);
  border-radius:12px; padding:11px 14px; margin-bottom:16px;
}
.rmr-caveat > i{ color:#b87c00; font-size:15px; margin-top:1px; flex:none; }
.rmr-caveat div{ font-size:12px; color:#6a4400; line-height:1.5; }
.rmr-caveat strong{ display:block; color:var(--lw-ink,#0a0a0a); font-weight:600; }
.rmr-caveat strong.rmr-inline{ display:inline; color:#6a4400; font-weight:700; }

/* ---------------- tour card ---------------- */
.rmr-tour{
  background:#fff; border:1px solid var(--lw-line,#e3e6ea); border-radius:16px;
  box-shadow:0 1px 3px rgba(15,18,22,.05); overflow:hidden; margin-bottom:14px;
  color:var(--lw-ink,#0a0a0a);
}
.rmr-tour.is-loop{ border-color:var(--lw-volt,#C8F135); box-shadow:0 0 0 3px rgba(200,241,53,.12); }

.rmr-tour-top{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:13px 18px; background:rgba(200,241,53,.06); border-bottom:1px solid var(--lw-hair,#eef0f3);
}
.rmr-tour-title{
  font-family:'Anta','Inter',sans-serif; font-size:14px; color:var(--lw-ink,#0a0a0a);
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.rmr-tour-title > i{ color:var(--lw-volt-ink,#4a6b00); }
.rmr-loop-pill{
  font-family:'Anta','Inter',sans-serif; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 9px; border-radius:99px; background:rgba(200,241,53,.22); color:var(--lw-volt-ink,#4a6b00);
}
.rmr-who{ font-family:'Inter',sans-serif; font-size:11.5px; color:#6a6f78; }

.rmr-tour-stats{ display:flex; gap:16px; flex-wrap:wrap; }
.rmr-stat{ text-align:right; }
.rmr-stat .v{
  font-family:'Anta','Inter',sans-serif; font-size:17px; color:var(--lw-ink,#0a0a0a);
  line-height:1; font-variant-numeric:tabular-nums;
}
.rmr-stat.pay .v{ color:var(--lw-volt-ink,#4a6b00); }
.rmr-stat .l{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--lw-faint,#8a909a); margin-top:3px;
}

/* ---------------- day block ---------------- */
.rmr-day{ position:relative; border-bottom:1px solid var(--lw-hair,#eef0f3); }
.rmr-day:last-child{ border-bottom:0; }

.rmr-day-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:12px 18px 6px;
}
.rmr-day-head .d-name{
  font-family:'Anta','Inter',sans-serif; font-size:13px; color:var(--lw-ink,#0a0a0a);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.rmr-day-head .d-num{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 6px; border-radius:99px; background:#0a0a0a; color:#fff; font-size:11px; flex:none;
}
.rmr-day-head .d-run{
  font-family:'Inter',sans-serif; font-size:11.5px; color:#6a6f78;
  display:inline-flex; align-items:center; gap:6px;
}
.rmr-day-head .d-run i{ color:#b0b6be; font-size:10px; }
.rmr-day-head .d-meta{
  font-size:11.5px; color:var(--lw-body,#5a6068); display:flex; gap:12px; flex-wrap:wrap;
}
.rmr-day-head .d-meta i{ color:var(--lw-volt-ink,#4a6b00); font-size:10px; }
.rmr-day-head .d-meta strong{
  color:var(--lw-volt-ink,#4a6b00); font-family:'Anta','Inter',sans-serif; font-weight:400;
  font-variant-numeric:tabular-nums;
}
/* empty running is unpaid — muted and italic, like the shipped reposition row */
.rmr-day-head .d-meta .d-empty{ color:#6a6f78; font-style:italic; }
.rmr-day-head .d-meta .d-empty i{ color:#b0b6be; }

/* ---------------- legs ---------------- */
.rmr-legs{ padding:2px 18px 12px; }
.rmr-leg{
  display:grid; grid-template-columns:26px 1fr auto; gap:12px; align-items:center;
  padding:10px 0; border-bottom:1px solid #f4f6f8;
}
.rmr-leg:last-child{ border-bottom:0; }
.rmr-leg-num{
  width:26px; height:26px; border-radius:99px; background:var(--lw-volt,#C8F135); color:#0a0a0a;
  font-family:'Anta','Inter',sans-serif; font-size:12px;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.rmr-leg-route{
  font-family:'Anta','Inter',sans-serif; font-size:13.5px; color:var(--lw-ink,#0a0a0a);
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.rmr-leg-route strong{ font-weight:400; color:var(--lw-ink,#0a0a0a); }
.rmr-leg-route > i{ color:#b0b6be; font-size:11px; }
/* the pill wraps as a whole onto the next line, never mid-phrase */
.rmr-leg-route .lw-pill{ white-space:nowrap; }
.rmr-leg-sub{
  font-size:11px; color:#6a6f78; display:flex; gap:12px; flex-wrap:wrap; margin-top:3px;
}
.rmr-leg-sub i{ color:var(--lw-volt-ink,#4a6b00); font-size:10px; }
.rmr-leg-price{
  font-family:'Anta','Inter',sans-serif; font-size:15px; color:var(--lw-volt-ink,#4a6b00);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---------------- the hand-off: night out (amber) ---------------- */
.rmr-overnight{
  display:flex; align-items:center; gap:8px;
  margin:4px 18px 12px; padding:8px 12px; border-radius:10px;
  background:var(--lw-amber-bg,#fff4e0); color:var(--lw-amber-ink,#8a5a00);
  border:1px solid var(--lw-amber-line,#f0dcb8); font-size:12px; font-weight:600;
}
.rmr-overnight i{ color:#b87c00; font-size:12px; flex:none; }

/* the truck is loaded and parked — sits INSIDE .rmr-legs, so it steps a further
   18px in from the day-end banner below it. That step is real; keep it. */
/* The amber edge bar is a background layer, NOT an inset box-shadow: the
   engine's pulse op writes an inline box-shadow on its target, which would wipe
   the bar for the whole pulse — and [data-lw-endsloaded] is the thing a film
   pulses at the screen's key moment. */
.rmr-overnight.is-loaded{
  margin:8px 18px 0; border-color:#e9cf9d; color:#7a4e00;
  background:linear-gradient(90deg,#b87c00 3px,transparent 3px) #fdeecf;
}

/* home for the night is the reward, not a warning */
.rmr-overnight.is-home{
  background:rgba(200,241,53,.14); border-color:rgba(200,241,53,.55);
  color:var(--lw-volt-ink,#4a6b00);
}
.rmr-overnight.is-home i{ color:var(--lw-volt-ink,#4a6b00); }

/* ---------------- the hand-off: morning tip-in (cyan) ---------------- */
/* no flex-wrap: icon + one sentence span, so the span shrinks and wraps beside
   the icon (as .rmr-overnight does) instead of dropping underneath it */
.rmr-tipin{
  display:flex; align-items:center; gap:8px;
  margin:4px 18px 10px; padding:8px 12px; border-radius:10px;
  background:#e0f6fb; color:#0b6b7d; border:1px solid #b9e7f1;
  font-size:12px; font-weight:600;
}
.rmr-tipin i{ color:#0b6b7d; font-size:12px; flex:none; }
.rmr-tipin strong{ color:#07505e; font-weight:700; }
.rmr-day.is-carried .rmr-day-head{ padding-bottom:2px; }

/* Film-only continuity thread: invisible at rest (the product draws no line),
   revealed by setting --lw-thread 0→1 on the element. */
.rmr-thread{
  position:absolute; left:27px; top:-30px; width:2px; height:64px; border-radius:2px;
  background:linear-gradient(180deg,#b87c00,#0b6b7d);
  transform:scaleY(var(--lw-thread,0)); transform-origin:50% 0;
  opacity:var(--lw-thread,0); pointer-events:none;
}

/* ---------------- empty / failure ---------------- */
.rmr-empty{
  background:#fff; border:1px dashed #d6dae0; border-radius:14px; padding:30px 24px;
  text-align:center; color:var(--lw-body,#5a6068); margin-bottom:14px;
}
.rmr-empty > i{ display:block; font-size:24px; color:#b0b6be; margin-bottom:12px; }
.rmr-empty h3{ font-size:16px; color:var(--lw-ink,#0a0a0a); margin:0 0 6px; }
.rmr-empty p{ font-size:12.5px; color:var(--lw-body,#5a6068); max-width:48ch; margin:0 auto; line-height:1.55; }

/* ---------------- disclaimer ---------------- */
.rmr-disclaimer{
  font-size:11px; color:var(--lw-faint,#8a909a); line-height:1.5; max-width:70ch; margin:8px 0 0;
}

/* =====================================================================
 * NARROW DESIGN SPACE — the 420px phone layout, played at ~1:1.
 *
 * ⚠️ NO @media width queries in this file. The scaler is a fixed-pixel box,
 *    so a viewport query either never fires inside it or — on a landscape
 *    phone 700–999px wide, where the engine plays the 1280 DESK space — fires
 *    against the wrong layout and collapses the desktop form grid. The engine
 *    puts .is-hand on the scaler instead; every phone rule keys off that.
 * ⚠️ Never set `display` on a [data-when-week] element (.rmr-solving,
 *    .rmr-empty): a class-level display beats the UA [hidden] rule and that
 *    state would show through in every scene.
 * ⚠️ On touch devices style.css forces text inputs to 16px !important (iOS
 *    zoom guard). The 2-up form is sized so "Artic Curtain" still fits at 16px.
 *
 * Content width: 420 − 2×14 (.lw-main) = 392px; card interiors ≈ 362px.
 * ===================================================================== */

/* form: four across → 2×2, segmented control full width, button full width */
.lw-scaler.is-hand .rmr-form{ padding:14px 15px; margin-bottom:14px; }
.lw-scaler.is-hand .rmr-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.lw-scaler.is-hand .rmr-field input{ height:38px; padding:0 10px; }
.lw-scaler.is-hand .rmr-profile-row{ flex-direction:column; align-items:stretch; gap:6px; margin-top:12px; }
.lw-scaler.is-hand .rmr-seg{ display:flex; }
.lw-scaler.is-hand .rmr-seg label{ flex:1 1 0; min-width:0; text-align:center; padding:7px 8px; }
.lw-scaler.is-hand .rmr-foot{ flex-direction:column; align-items:stretch; gap:12px; margin-top:14px; }
.lw-scaler.is-hand .rmr-go{ width:100%; justify-content:center; }

/* solving / failure states (padding and type only — see the display warning) */
.lw-scaler.is-hand .rmr-solving{ padding:20px 8px; }
.lw-scaler.is-hand .rmr-scan-text{ font-size:12px; }
.lw-scaler.is-hand .rmr-empty{ padding:24px 18px; border-radius:12px; }
.lw-scaler.is-hand .rmr-empty > i{ font-size:22px; margin-bottom:10px; }
.lw-scaler.is-hand .rmr-empty h3{ font-size:15px; }
.lw-scaler.is-hand .rmr-empty p{ font-size:12px; }

/* results head: note drops under the heading */
.lw-scaler.is-hand .rmr-results-head{ flex-direction:column; align-items:flex-start; gap:3px; margin-bottom:10px; }
.lw-scaler.is-hand .rmr-results-head h2{ font-size:15px; }
.lw-scaler.is-hand .rmr-note{ font-size:11px; line-height:1.45; }

.lw-scaler.is-hand .rmr-caveat{ gap:9px; padding:10px 12px; margin-bottom:14px; }
.lw-scaler.is-hand .rmr-caveat > i{ font-size:14px; }
.lw-scaler.is-hand .rmr-caveat div{ font-size:11px; }

/* tour header: title over a 3×2 stat grid (six right-aligned stats in a
   wrapping row strand one on its own line at 362px) */
.lw-scaler.is-hand .rmr-tour{ border-radius:14px; }
.lw-scaler.is-hand .rmr-tour-top{ flex-direction:column; gap:10px; padding:12px 14px; }
.lw-scaler.is-hand .rmr-tour-title{ gap:4px 8px; }
.lw-scaler.is-hand .rmr-who{ flex-basis:100%; font-size:11px; }
.lw-scaler.is-hand .rmr-tour-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 10px; width:100%;
  padding-top:10px; border-top:1px solid rgba(15,18,22,.07);
}
.lw-scaler.is-hand .rmr-stat{ text-align:left; min-width:0; }
.lw-scaler.is-hand .rmr-stat .v{ font-size:16px; }
.lw-scaler.is-hand .rmr-stat .l{ font-size:11px; letter-spacing:.04em; margin-top:4px; }

/* day head: date line over the meta line */
.lw-scaler.is-hand .rmr-day-head{ flex-direction:column; align-items:flex-start; gap:5px; padding:12px 14px 4px; }
.lw-scaler.is-hand .rmr-day.is-carried .rmr-day-head{ padding-bottom:2px; }
.lw-scaler.is-hand .rmr-day-head .d-meta{ gap:4px 10px; }

/* legs: keep the three-column row, just tighter */
.lw-scaler.is-hand .rmr-legs{ padding:2px 14px 10px; }
.lw-scaler.is-hand .rmr-leg{ grid-template-columns:24px minmax(0,1fr) auto; gap:10px; }
.lw-scaler.is-hand .rmr-leg-num{ width:24px; height:24px; font-size:11px; }
.lw-scaler.is-hand .rmr-leg-route{ font-size:13px; gap:4px 6px; }
.lw-scaler.is-hand .rmr-leg-sub{ gap:3px 10px; }
.lw-scaler.is-hand .rmr-leg-price{ font-size:14px; }

/* the hand-off banners. The inner "ends loaded" one keeps a (smaller) step in
   from the day-end banner; its own rule must follow the generic one, which
   would otherwise out-rank .rmr-overnight.is-loaded and flatten the step. */
.lw-scaler.is-hand .rmr-tipin{ margin:6px 14px 8px; padding:8px 11px; font-size:11.5px; }
.lw-scaler.is-hand .rmr-overnight{ margin:4px 14px 12px; padding:8px 11px; font-size:11.5px; }
.lw-scaler.is-hand .rmr-overnight.is-loaded{ margin:8px 10px 0; }

/* continuity thread: same relation as desktop (9px inside the banner edge),
   longer because the two-line day head pushes the tip-in banner ~22px lower */
.lw-scaler.is-hand .rmr-thread{ left:23px; height:90px; }

@media (prefers-reduced-motion: reduce){
  .rmr-home .track, .rmr-home .knob, .rmr-seg label{ transition:none; }
}