/**
 * Laydn guided tour — the driver's phone (screen: driver, prefix: .dvr-).
 *
 * Loaded alongside laydn-tour.css. This screen is the odd one out: it is not
 * the desktop shell, it is a device sitting in the dark of a cab inside the
 * 1280x820 "desk" stage, or filling the 420x880 "hand" stage.
 *
 * ⚠️ THE APP IS A LIGHT THEME INSIDE A DARK SITE. The marketing body colour is
 *    var(--white) (#F2F2F2) and style.css gives every <p> rgba(242,242,242,.55);
 *    inheriting either into a white card is the documented way to render an
 *    invisible screen on this theme. Every colour below is set explicitly, on
 *    containers as well as leaves — ink #0a0a0a, body #5a6068, faint #8a909a,
 *    line #e3e6ea, hairline #eef0f3, card #fff, ground #f7f8fa. Volt as TEXT
 *    on light is #4a6b00, never #C8F135 (1.3:1 on white).
 *
 * ⚠️ LOAD ORDER IS NOT GUARANTEED against laydn-tour.css, so nothing here may
 *    rely on coming second. Where a shared rule has the same specificity as
 *    one of ours, ours is written one class heavier:
 *      .lw-scaler.is-hand .lw-main { padding }   (0,3,0) — main is (0,4,0)
 *      .lw-scaler h2 { font-family:Anta }        (0,1,1) — card h2 is (0,2,1)
 *      .lw-hover / .lw-scanning { position:relative } (0,1,0) — the engine
 *        adds these to whatever a film points at; every absolutely positioned
 *        element that carries a data-lw hook is (0,2,0) so a cursor landing on
 *        it cannot knock it back into the flow.
 *
 * ⚠️ [hidden] must beat the display rules below, or every state renders at once.
 */

/* ---------- the cab the phone is held in ---------- */
.dvr-stage{
  position:relative; width:100%; height:100%; min-height:820px; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 8%, #21252b 0%, #15181c 45%, #0b0d10 100%);
  font-family:'Inter',system-ui,sans-serif; color:#F2F2F2;
}
.dvr-stage::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}
.dvr-stage [hidden]{ display:none !important; }
.dvr-stage *{ box-sizing:border-box; }

.dvr-glow{
  position:absolute; left:50%; top:50%; width:640px; height:640px; margin:-320px 0 0 -320px;
  border-radius:50%; pointer-events:none; filter:blur(10px);
  background:radial-gradient(circle, rgba(200,241,53,.13), rgba(200,241,53,.03) 45%, transparent 70%);
}

/* film furniture, not product UI — outside the device, and kept clear of the
   stage's own caption gradient, which fades in over the bottom of the stage. */
.dvr-caption{
  position:absolute; left:56px; top:96px; z-index:3; max-width:280px; color:#F2F2F2;
}
.dvr-caption .k{
  display:block; font-family:'Anta',sans-serif; font-size:15px; letter-spacing:.02em; color:#F2F2F2;
}
.dvr-caption .v{
  display:block; margin-top:4px; font-size:12px; color:rgba(242,242,242,.48);
}

/* ---------- the device ----------
   ⚠️ Never scale() the phone. The engine's scrollTo measures rects and divides
   by the STAGE scale only, so any extra scale on an ancestor of .lw-main makes
   every scroll land short by that factor. Resize it with geometry instead. */
.dvr-stage .dvr-phone{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:416px; height:796px; z-index:2;
}
.dvr-bezel{
  position:relative; width:100%; height:100%; padding:13px; border-radius:46px;
  background:linear-gradient(160deg,#2a2e34 0%,#15171a 34%,#0d0f11 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 2px 0 0 rgba(255,255,255,.05) inset,
    0 44px 90px rgba(0,0,0,.62),
    0 8px 26px rgba(0,0,0,.5);
}
.dvr-screen{
  position:relative; width:390px; height:770px; border-radius:34px; overflow:hidden;
  background:#f7f8fa; color:#0a0a0a; display:flex; flex-direction:column;
  box-shadow:0 0 0 1px rgba(0,0,0,.6) inset;
}

/* ---------- OS status bar ---------- */
.dvr-status{
  flex:none; height:30px; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; background:#0a0a0a; color:#F2F2F2; font-size:11.5px; font-weight:600;
  letter-spacing:.02em; position:relative;
}
.dvr-clock{ color:#F2F2F2; font-variant-numeric:tabular-nums; }
.dvr-island{
  position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width:88px; height:18px; border-radius:99px; background:#000;
}
.dvr-sys{ display:inline-flex; align-items:center; gap:8px; color:#F2F2F2; }
.dvr-bars{ display:inline-flex; align-items:flex-end; gap:2px; height:11px; }
.dvr-bars i{ display:block; width:3px; border-radius:1px; background:#F2F2F2; }
.dvr-bars i:nth-child(1){ height:4px; }
.dvr-bars i:nth-child(2){ height:6px; }
.dvr-bars i:nth-child(3){ height:8.5px; }
.dvr-bars i:nth-child(4){ height:11px; }
/* the dead-signal glyph is the same four bars, dimmed — same spacing, still
   standing on the baseline — with the words beside them */
.dvr-bars.is-off i{ background:rgba(242,242,242,.28); }
.dvr-bars.is-off em{
  align-self:center; margin-left:5px; line-height:1;
  font-style:normal; font-size:11px; font-weight:700; letter-spacing:.04em; color:#ffb37a;
}
.dvr-batt{
  position:relative; display:inline-block; width:22px; height:11px; border-radius:3px;
  border:1px solid rgba(242,242,242,.6);
}
.dvr-batt::after{
  content:''; position:absolute; right:-3px; top:3px; width:2px; height:5px; border-radius:0 2px 2px 0;
  background:rgba(242,242,242,.6);
}
.dvr-batt b{ position:absolute; left:1.5px; top:1.5px; bottom:1.5px; width:13px; border-radius:1.5px; background:#F2F2F2; }

/* ---------- app topbar (driver variant: refresh + avatar, no bell) ---------- */
.dvr-topbar{
  flex:none; height:52px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; background:rgba(10,10,10,.94); border-bottom:1px solid rgba(255,255,255,.06);
  position:relative; z-index:6; color:#F2F2F2;
}
.dvr-brand{ font-family:'Anta',sans-serif; font-size:19px; color:#C8F135; letter-spacing:.02em; }
.dvr-topbar-r{ display:inline-flex; align-items:center; gap:8px; }
.dvr-refresh{
  width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  color:#F2F2F2; font-size:13px; cursor:pointer; padding:0;
}
.dvr-avatar-wrap{ position:relative; display:inline-block; }
.dvr-avatar{
  width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center; padding:0;
  background:#C8F135; color:#0a0a0a; border:0; font-family:'Anta',sans-serif; font-size:13px; cursor:pointer;
}
.dvr-avatar-wrap .dvr-menu{
  position:absolute; right:0; top:44px; width:210px; z-index:8; display:block; padding:6px;
  background:#131518; border:1px solid rgba(255,255,255,.10); border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.55); color:#F2F2F2;
}
.dvr-menu-head{ display:block; padding:8px 10px 10px; border-bottom:1px solid rgba(255,255,255,.07); }
.dvr-menu-head b{ display:block; color:#F2F2F2; font-size:13px; font-weight:600; }
.dvr-menu-head em{ display:block; font-style:normal; color:rgba(242,242,242,.5); font-size:11px; margin-top:2px; }
.dvr-menu-item{ display:block; padding:10px; font-size:13px; font-weight:600; color:#ff5c35; }
.dvr-menu-item i{ margin-right:8px; }

/* ---------- scrolling app body ---------- */
.dvr-body{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background:#f7f8fa; color:#0a0a0a; }
/* ⚠️ .lw-main is the engine's scroll target (Ctx.scrollTo). Reset the desktop
   shell's padding and flex, keep the class. (0,4,0) so neither .lw-main nor
   .lw-scaler.is-hand .lw-main can win on load order. */
.dvr-screen .dvr-body > .lw-main.dvr-main{
  flex:none; padding:16px 16px 28px; min-height:100%; background:#f7f8fa; color:#0a0a0a;
  will-change:transform;
}
.dvr-wrap, .dvr-jobwrap{ width:100%; color:#0a0a0a; }
.dvr-tailspace{ height:120px; }

/* ---------- offline queue banner ---------- */
.dvr-pending{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; margin-bottom:16px;
  background:#fff4e0; border:1px solid #f0c884; color:#8a5a00; font-size:13px; font-weight:600; line-height:1.35;
}
.dvr-pending i{ font-size:15px; color:#8a5a00; }
.dvr-pending span{ color:#8a5a00; }
.dvr-pending strong{ color:#8a5a00; font-variant-numeric:tabular-nums; }

/* ---------- dark hero card ---------- */
.dvr-headcard{
  padding:20px 20px; margin-bottom:18px; background:#0a0a0a; border:1px solid #C8F135; border-radius:16px;
  box-shadow:0 0 0 4px rgba(200,241,53,.10), 0 16px 36px rgba(15,18,22,.22); color:#F2F2F2;
}
.dvr-eyebrow{ margin:0 0 4px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(242,242,242,.55); }
.dvr-headcard h1{
  font-family:'Anta',sans-serif; font-weight:400; font-size:30px; line-height:1.05; letter-spacing:-.02em;
  margin:0; color:#F2F2F2;
}
.dvr-headcard h1 span{ color:#C8F135; }
.dvr-count{ margin:10px 0 0; color:rgba(242,242,242,.62); font-size:13.5px; }
.dvr-count span{ color:rgba(242,242,242,.62); font-variant-numeric:tabular-nums; }

/* ---------- day navigator ---------- */
.dvr-daynav{
  display:flex; align-items:center; gap:6px; background:#fff; border:1px solid #e3e6ea; color:#0a0a0a;
  border-radius:11px; padding:5px; margin-bottom:16px; box-shadow:0 1px 2px rgba(15,18,22,.04);
}
.dvr-daybtn{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px;
  padding:0 12px; border-radius:8px; color:#0a0a0a; font-size:15px; font-weight:700;
}
.dvr-daylabel{ flex:1 1 auto; font-family:'Anta',sans-serif; font-weight:400; font-size:15px; }

/* ---------- group heading + job cards ---------- */
.dvr-group-label{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#6a6f78; font-weight:700;
  margin:20px 0 10px;
}
/* position + overflow keep the engine's tap ripple inside the card */
.dvr-card{
  display:block; position:relative; overflow:hidden;
  background:#fff; border:1px solid #e3e6ea; border-radius:14px; padding:16px;
  margin-bottom:12px; color:#0a0a0a; box-shadow:0 1px 2px rgba(15,18,22,.04);
}
.dvr-card.is-hero{ border-color:#d5dae0; }
.dvr-card.lw-hover{ border-color:#C8F135; box-shadow:0 6px 18px rgba(15,18,22,.08); }
.dvr-pillwrap{ display:block; margin-bottom:10px; }
.dvr-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:999px; font-family:'Inter',system-ui,sans-serif;
}
.dvr-pill.is-amber{ background:#fff4e0; color:#8a5a00; }
.dvr-pill.is-cyan{ background:#e0f6fb; color:#0b6b7d; }
.dvr-pill.is-volt{ background:#eef8cc; color:#4a6b00; }
.dvr-lane{ font-size:16.5px; font-weight:700; color:#0a0a0a; line-height:1.35; margin-bottom:6px; }
.dvr-lane .arr{ color:#7a8a1f; margin:0 6px; font-size:13px; }
.dvr-pc{ color:#6a6f78; font-weight:400; font-size:.78em; }
.dvr-meta{ display:flex; flex-wrap:wrap; gap:8px 14px; color:#5a6068; font-size:12.5px; margin-top:8px; }
.dvr-meta span{ display:inline-flex; align-items:center; gap:6px; color:#5a6068; }
.dvr-meta i{ color:#8a909a; font-size:12px; }

/* ---------- job detail ---------- */
.dvr-back{
  display:inline-flex; align-items:center; gap:7px; color:#5a6068; font-size:13px; margin-bottom:14px;
}
.dvr-flash{
  padding:12px 14px; border-radius:11px; margin-bottom:16px; font-size:13.5px; font-weight:600;
  background:rgba(200,241,53,.18); color:#3f5c00; border:1px solid #C8F135;
}
.dvr-flash.is-err{ background:#fdece8; color:#a33218; border-color:#f3b7a6; }
.dvr-h{ font-family:'Anta',sans-serif; font-weight:400; font-size:22px; color:#0a0a0a; margin:0 0 4px; }
.dvr-sub{ color:#5a6068; font-size:13px; margin:0 0 18px; }
.dvr-sub span{ color:#5a6068; }

.dvr-jcard{
  background:#fff; border:1px solid #e3e6ea; border-radius:14px; padding:16px; margin-bottom:14px;
  box-shadow:0 1px 2px rgba(15,18,22,.04); color:#0a0a0a;
}
/* (0,2,1): the product's card eyebrow is Inter, and .lw-scaler h2 (0,1,1)
   would otherwise make it Anta whenever laydn-tour.css loads second. */
.dvr-screen .dvr-jcard h2{
  font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:#6a6f78; font-weight:700; line-height:1.3; margin:0 0 12px;
}
.dvr-stop{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #eef0f3; }
.dvr-stop:first-child{ padding-top:0; }
.dvr-stop:last-child{ border-bottom:0; padding-bottom:0; }
.dvr-dot{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; margin-top:2px;
}
.dvr-dot.is-c{ background:#e0f6fb; color:#0b6b7d; }
.dvr-dot.is-d{ background:#eef8cc; color:#4a6b00; }
.dvr-stop-b{ flex:1 1 auto; min-width:0; }
.dvr-town{ font-size:16px; font-weight:700; color:#0a0a0a; }
.dvr-fpc{ color:#4a6b00; font-weight:700; font-size:14px; margin-left:6px; }
.dvr-line{ color:#5a6068; font-size:13px; margin-top:3px; line-height:1.45; }
.dvr-notes{ margin-top:12px; }
.dvr-facts{ display:flex; flex-wrap:wrap; gap:10px 20px; }
.dvr-fact span{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#6a6f78; }
.dvr-fact strong{ font-size:15px; color:#0a0a0a; font-weight:700; }

/* ---------- sticky action rail ----------
   Production is position:sticky above the bottom nav. The engine scrolls the
   app body with a transform, which sticky does not survive, so this is pinned
   to the screen instead — same picture, deterministic. */
.dvr-screen .dvr-act{ position:absolute; left:16px; right:16px; bottom:86px; z-index:5; color:#0a0a0a; }
/* position + overflow keep the engine's tap ripple inside the button's corners */
.dvr-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:16px;
  position:relative; overflow:hidden;
  border:0; border-radius:14px; background:#C8F135; color:#0a0a0a; font-size:16px; font-weight:800;
  font-family:'Anta',sans-serif; cursor:pointer; box-shadow:0 8px 26px rgba(200,241,53,.35);
}
.dvr-btn span{ display:inline-flex; align-items:center; gap:10px; color:#0a0a0a; }
.dvr-btn i{ color:#0a0a0a; }
/* the engine's ripple is volt — invisible on a volt button. Ink it instead. */
.dvr-btn.lw-rippling::after{ background:rgba(10,10,10,var(--lw-ripple-o,0)); }
.dvr-done{
  text-align:center; padding:16px; border-radius:12px; background:#fff; border:1px solid #e3e6ea;
  color:#4a6b00; font-weight:700; font-size:14px; box-shadow:0 6px 18px rgba(15,18,22,.08);
}
.dvr-done i{ color:#4a6b00; margin-right:6px; }

/* ---------- bottom nav: 5 columns, one tab. Deliberate. ---------- */
.dvr-bottomnav{
  flex:none; display:grid; grid-template-columns:repeat(5,1fr); z-index:6;
  background:rgba(10,10,10,.96); border-top:1px solid rgba(255,255,255,.08); color:rgba(242,242,242,.55);
}
.dvr-bottomnav > span{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:10px 4px; color:rgba(242,242,242,.55); font-size:10px; font-weight:500; letter-spacing:.04em;
}
.dvr-bottomnav > span i{ font-size:18px; }
.dvr-bottomnav > span.is-active{ color:#C8F135; }
.dvr-bottomnav > span.is-active span{ color:#C8F135; }
.dvr-homebar{
  flex:none; height:16px; background:rgba(10,10,10,.96); position:relative;
}
.dvr-homebar::after{
  content:''; position:absolute; left:50%; top:3px; transform:translateX(-50%);
  width:126px; height:4px; border-radius:99px; background:rgba(242,242,242,.42);
}

/* ---------- confirm sheet ----------
   The CSS comment in production says "deliberately dark"; the panel is
   #ffffff. The comment is stale. Only the scrim is dark. */
.dvr-screen .dvr-sheet{ position:absolute; inset:0; z-index:30; color:#0a0a0a; }
.dvr-sheet .dvr-sheet-bg{ position:absolute; inset:0; background:rgba(10,12,15,.55); }
.dvr-sheet .dvr-sheet-in{
  position:absolute; left:0; right:0; bottom:0; max-height:92%; overflow:hidden;
  background:#fff; color:#0a0a0a; border-radius:18px 18px 0 0; border-top:1px solid #e3e6ea;
  padding:18px 18px 20px; box-shadow:0 -12px 40px rgba(15,18,22,.18);
}
.dvr-sheet-in h3{
  font-family:'Anta',sans-serif; font-weight:400; font-size:19px; line-height:1.2; color:#0a0a0a; margin:0 0 14px;
}
.dvr-label{ display:block; font-size:12px; color:#5a6068; margin:0 0 6px; font-weight:600; }
/* 16px, as production: it is also what style.css forces with !important on
   touch screens, so desk and phone now render the same field. */
.dvr-in{
  display:block; width:100%; padding:12px 13px; border-radius:11px; border:1px solid #d8dde3;
  background:#fff; color:#0a0a0a; font-family:'Inter',system-ui,sans-serif; font-size:16px;
  margin-bottom:14px;
}
.dvr-in::placeholder{ color:#b0b6be; opacity:1; }
.dvr-in.lw-caret{ border-color:#C8F135; box-shadow:0 0 0 3px rgba(200,241,53,.25); }

.dvr-sigwrap{ position:relative; margin-bottom:6px; }
.dvr-sig{
  width:100%; height:132px; border-radius:11px; background:#fff; border:1px solid #d8dde3;
  display:block; overflow:hidden;
}
.dvr-ink{ display:block; width:100%; height:100%; }
/* ⚠️ pathLength="1000" on the path, so the engine's rail op — which drives
   stroke-dashoffset 1000 → 0 — draws exactly this signature end to end.
   The dash is 1010, not 1000: at exactly 1000 the pattern boundary lands on
   the path's last point and the round cap renders a stray ink dot on a pad
   nobody has signed yet. */
.dvr-ink path{
  fill:none; stroke:#0a0a0a; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1010; stroke-dashoffset:1010;
}
.dvr-ink.is-done path{ stroke-dashoffset:0; }
.dvr-sigwrap .dvr-sigclear{
  position:absolute; top:8px; right:8px; background:#0a0a0a; color:#fff; border-radius:8px;
  padding:6px 11px; font-size:12px; font-weight:700; line-height:1;
  display:inline-flex; align-items:center;
}
.dvr-hint{ color:#6a6f78; font-size:12px; margin:0 0 14px; }
.dvr-submit{ margin-top:2px; }
.dvr-cancel{
  display:block; width:100%; text-align:center; padding:12px; color:#5a6068; font-size:14px; margin-top:8px;
}

/* ⚠️ No reduced-motion override on the ink. The engine shortens every op's
   duration under prefers-reduced-motion but still runs the draw, so forcing
   stroke-dashoffset:0 here would show a signed pad before anybody signs. */

/* =====================================================================
 * NARROW DESIGN SPACE — .lw-scaler.is-hand, 420 x 880
 *
 * ⚠️ No @media here, ever: the scaler is a fixed-pixel box that is
 *    transform-scaled, so it always reports its design width. The engine
 *    stamps .is-hand on the scaler instead.
 *
 * The stage is already phone-shaped, so the device fills it: the owner's
 * name centred above, 10px of cab either side, 12px below. The bezel is
 * sized by insets rather than by transform (see the scrollTo note on
 * .dvr-phone), so it can neither overflow the 420px width nor shrink to a
 * thumbnail, and it follows the stage if the design height ever changes.
 *
 * Inside the glass nothing restacks: it already IS the product's phone
 * layout — one column, wrapping lanes and meta rows — now 380px wide
 * instead of 390. Type stays at the product's phone sizes.
 * ===================================================================== */
.lw-scaler.is-hand .dvr-stage{ min-height:0; }
.lw-scaler.is-hand .dvr-glow{ width:520px; height:520px; margin:-260px 0 0 -260px; }

/* the caption sat at left:56px over the top of the phone; lift it clear */
.lw-scaler.is-hand .dvr-caption{ left:16px; right:16px; top:12px; max-width:none; text-align:center; }
.lw-scaler.is-hand .dvr-caption .k{ line-height:1.25; }
.lw-scaler.is-hand .dvr-caption .v{
  margin-top:2px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 400 x 808 device, 380 x 788 glass */
.lw-scaler.is-hand .dvr-stage .dvr-phone{
  left:10px; right:10px; top:60px; bottom:12px; width:auto; height:auto; transform:none;
}
.lw-scaler.is-hand .dvr-bezel{ padding:10px; border-radius:42px; }
.lw-scaler.is-hand .dvr-screen{ width:100%; height:100%; border-radius:32px; }

/* =====================================================================
 * FL-05 — a brand-new driver (states setup, setfocus, jobs)
 *
 * The /driver-setup/ page is laydn_driver_setup_page() in
 * handlers/41-drivers.php: its own dark page, outside the app shell. The
 * product sizes (26px mark, 64px avatar, 28px card padding…) run ~730px tall,
 * which is taller than this phone's glass, so everything is scaled down a
 * notch in proportion — the whole page, button and footnote included, then
 * fits the 380 x 582 hand glass with no scroll (the engine can only scroll
 * .lw-main, which is the app body underneath). Colours are the product's.
 *
 * No transitions anywhere: the engine drives every change.
 * ===================================================================== */

/* ---------- My Jobs, first landing: the Face ID card (system-driver-jobs.php .dj-pk) ---------- */
.dvr-pk{
  background:#fff; border:1px solid #e3e6ea; border-radius:14px; padding:16px 18px; margin-bottom:16px;
  box-shadow:0 1px 2px rgba(15,18,22,.04); color:#0a0a0a;
}
.dvr-pk-top{ display:flex; align-items:flex-start; gap:13px; }
.dvr-pk-ico{
  flex:0 0 auto; width:40px; height:40px; border-radius:11px; background:#eef8cc;
  display:flex; align-items:center; justify-content:center; color:#4a6b00; font-size:18px;
}
.dvr-pk-ico i{ color:#4a6b00; }
.dvr-pk-tx{ min-width:0; color:#0a0a0a; }
.dvr-screen .dvr-pk h2{
  font-family:'Anta',sans-serif; font-weight:400; font-size:16px; line-height:1.25; letter-spacing:0;
  color:#0a0a0a; margin:0 0 3px;
}
.dvr-screen .dvr-pk p{ margin:0; font-size:13.5px; line-height:1.45; color:#5a6068; }
.dvr-pk-btns{ display:flex; gap:9px; margin-top:13px; flex-wrap:wrap; }
.dvr-screen .dvr-pk-go{
  flex:1 1 190px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:0 18px; border:1px solid #0a0a0a; border-radius:10px; background:#0a0a0a;
  color:#C8F135; font-family:'Anta',sans-serif; font-weight:700; font-size:15px; position:relative; overflow:hidden;
}
.dvr-pk-go i{ color:#C8F135; }
.dvr-screen .dvr-pk-no{
  display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 15px;
  border:1px solid #e3e6ea; border-radius:10px; background:#fff; color:#5a6068; font-size:14px; font-weight:600;
  position:relative; overflow:hidden;
}

/* ---------- My Jobs, nothing assigned (system-driver-jobs.php .dj-empty) ---------- */
.dvr-empty{
  background:#fff; border:1px solid #e3e6ea; border-radius:14px; text-align:center; padding:56px 24px;
  box-shadow:0 1px 2px rgba(15,18,22,.04); color:#0a0a0a;
}
/* direct child only, as the product: an icon inside a button keeps its own size */
.dvr-empty > i{ display:block; width:fit-content; margin:0 auto 14px; font-size:34px; color:rgba(200,241,53,.75); }
.dvr-screen .dvr-empty h2{
  font-family:'Anta',sans-serif; font-weight:400; font-size:19px; line-height:1.2; letter-spacing:0;
  color:#0a0a0a; margin:0 0 6px;
}
.dvr-screen .dvr-empty p{ margin:0; font-size:14px; line-height:1.5; color:#5a6068; }

/* ---------- /driver-setup/ — over the app, below the OS status bar, above the home bar ---------- */
.dvr-screen .dvr-ds{
  position:absolute; left:0; right:0; top:30px; bottom:16px; z-index:40;
  display:flex; flex-direction:column; background:#0a0a0a; color:#F2F2F2;
  font-family:'Inter',system-ui,sans-serif;
}
/* a neutral mobile-browser address bar: the page is a link, not the app */
.dvr-ds-url{
  position:relative; flex:none; height:34px; margin:6px 12px 0; border-radius:10px; background:#1b1d21;
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:500; color:rgba(242,242,242,.82);
}
.dvr-ds-url span{ color:rgba(242,242,242,.82); }
.dvr-ds-url i{ position:absolute; right:11px; top:50%; transform:translateY(-50%); font-size:11px; color:rgba(242,242,242,.45); }
.dvr-ds-page{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; padding:10px 16px; }
/* margin:auto centres it when there is room and, unlike place-items:center,
   never pushes the top off the glass when there is not */
.dvr-ds-wrap{ width:100%; max-width:420px; margin:auto; text-align:center; color:#F2F2F2; }
.dvr-ds-mark{
  font-family:'Anta',sans-serif; font-size:22px; line-height:1.2; letter-spacing:.02em; color:#C8F135; margin-bottom:12px;
}
.dvr-ds-card{
  background:#111316; border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:18px 16px; color:#F2F2F2;
}
.dvr-ds-av{
  width:44px; height:44px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center;
  background:rgba(200,241,53,.14); color:#C8F135; font-family:'Anta',sans-serif; font-size:20px; line-height:1;
}
.dvr-screen .dvr-ds-h{
  font-family:'Anta',sans-serif; font-weight:400; font-size:21px; line-height:1.2; letter-spacing:0;
  color:#F2F2F2; margin:0 0 6px;
}
.dvr-screen .dvr-ds-p{ margin:0 0 14px; font-size:14px; line-height:1.5; color:rgba(242,242,242,.62); }
.dvr-screen .dvr-ds-p strong{ color:#F2F2F2; font-weight:600; }
.dvr-ds-id{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:11px;
  padding:9px 12px; margin-bottom:14px;
}
.dvr-ds-id span{
  display:block; font-size:10.5px; line-height:1.3; letter-spacing:.07em; text-transform:uppercase; color:rgba(242,242,242,.45);
}
.dvr-ds-id strong{
  display:block; margin-top:1px; font-family:'Anta',sans-serif; font-weight:400; font-size:19px; line-height:1.2;
  letter-spacing:.04em; color:#C8F135;
}
.dvr-ds-lab{ text-align:left; font-size:12px; line-height:1.3; font-weight:600; color:rgba(242,242,242,.62); margin:0 0 5px; }
.dvr-ds-box{ position:relative; margin-bottom:11px; }
/* the product's password input, as a span the film types bullets into */
.dvr-ds-field{
  display:flex; align-items:center; height:42px; padding:0 13px; border-radius:11px; overflow:hidden; white-space:nowrap;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:#F2F2F2; font-size:16px; letter-spacing:.14em; text-align:left;
}
/* a still caret while the film types (the engine adds .lw-caret, then removes it) */
.dvr-ds-field.lw-caret::after{ content:''; flex:none; width:1.5px; height:18px; margin-left:2px; background:#C8F135; }
/* the product's :focus — border volt, 3px volt halo — held by setfocus */
.dvr-ds-ring{
  position:absolute; inset:0; border-radius:11px; pointer-events:none;
  border:1px solid #C8F135; box-shadow:0 0 0 3px rgba(200,241,53,.22);
}
.dvr-screen .dvr-ds-btn{
  display:flex; align-items:center; justify-content:center; width:100%; height:48px; margin-top:3px;
  border-radius:13px; background:#C8F135; color:#0a0a0a;
  font-family:'Anta',sans-serif; font-size:16px; font-weight:800; position:relative; overflow:hidden;
}
/* the engine's ripple is volt — invisible on a volt button. Ink it instead. */
.dvr-ds-btn.lw-rippling::after{ background:rgba(10,10,10,var(--lw-ripple-o,0)); }
.dvr-screen .dvr-ds-foot{ margin:13px 0 0; font-size:11px; line-height:1.45; color:rgba(242,242,242,.40); }
.dvr-screen .dvr-ds-foot strong{ color:rgba(242,242,242,.75); font-weight:600; }

/* phone design space: the glass is 380 x 668. The set-up page already fits;
   the first-landing empty card gives up some padding so "No jobs yet" and its
   line clear the bottom nav without a scroll. */
.lw-scaler.is-hand .dvr-empty{ padding:40px 20px; }