/**
 * Laydn guided tour — DRIVERS screen (the mini-TMS).
 *
 * ⚠️ THE LIGHT-THEME TRAP. The marketing body colour is var(--white) (#F2F2F2),
 *    bare links are volt (fire on hover) and every bare <p> is var(--muted),
 *    rgba(242,242,242,.55). This screen is white cards on #f7f8fa, so every
 *    colour below is stated in hex — nothing inherits. Volt as TEXT on light is
 *    #4a6b00; plain #C8F135 is only ever a border, a fill, a marker, or text on
 *    a black chip here.
 *
 * ⚠️ SCOPE. Every selector starts .dv- or .lw-scaler — all the screen sheets load
 *    on one page, so an unprefixed class (".grip" used to be one) styles every
 *    other screen and the marketing page too.
 *
 * ⚠️ NO WIDTH MEDIA QUERIES. The screen plays in a fixed-pixel box that is
 *    transform-scaled, so a media query answers for the visitor's window, never
 *    for this layout. The phone layout is keyed off .lw-scaler.is-hand, at the
 *    bottom of this file.
 *
 * .lw-hover mirrors :hover wherever the film might point the cursor, because the
 * engine marks the target with that class instead of producing a real hover.
 *
 * Prefix: .dv-  (drivers)
 * Load order: after laydn-tour.css (it reuses .lw-head, .lw-app, .lw-main).
 */

/* [hidden] is how the engine applies state — it must beat every display rule
   in this file, including the flex/grid ones below. */
.dv-wrap [hidden],
.dv-ov[hidden],
.dv-ov [hidden] { display: none !important; }

.dv-wrap { max-width: 1600px; margin: 0 auto; color: #0a0a0a; }

/* ================= HEAD CARD ================= */
/* .lw-head supplies the dark ground, volt border and halo; this only turns it
   into the two-column row the real page uses, with the volt CTA on the right. */
.dv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dv-head-l { min-width: 0; }
/* .dv-head .dv-count, not .dv-count: ".lw-head p" outranks a lone class. */
.dv-head .dv-count { color: rgba(242, 242, 242, .62); font-size: 13px; margin: 8px 0 0; }

.dv-add {
	display: inline-flex; align-items: center; gap: 8px; flex: none;
	background: #C8F135; color: #0a0a0a !important; text-decoration: none;
	font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 13px;
	padding: 10px 15px; border-radius: 11px; box-shadow: 0 6px 18px rgba(200, 241, 53, .30);
}
.dv-add:hover,
.dv-add.lw-hover { filter: brightness(1.05); }
.dv-add i { font-size: 11px; color: #0a0a0a; }

/* ================= DAY BAR ================= */
/* The three controls share one 42px height, set rather than left to padding:
   on touch devices the site forces every input to 16px (iOS zoom), which would
   otherwise make the search box taller than its neighbours. */
.dv-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }

.dv-daynav {
	position: relative; display: flex; align-items: center; gap: 4px;
	background: #fff; border: 1px solid #e3e6ea; border-radius: 11px; padding: 4px;
	box-shadow: 0 1px 2px rgba(15, 18, 22, .04);
}
.dv-daynav > a {
	width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; flex: none;
	color: #5a6068 !important; text-decoration: none; font-size: 12px;
}
.dv-daynav > a:hover,
.dv-daynav > a.lw-hover { background: #f1f3f6; }
.dv-daylabel {
	min-width: 150px; background: none; border: 0; cursor: pointer; padding: 0 10px;
	font-family: 'Anta', 'Inter', sans-serif; font-size: 14px; color: #0a0a0a; line-height: 32px;
}
.dv-daylabel span { color: #6a6f78; font-weight: 400; }
/* after the hover rule on purpose: the chip stays black with volt text */
.dv-daynav a.is-today,
.dv-daynav a.is-today:hover,
.dv-daynav a.is-today.lw-hover {
	width: auto; padding: 0 11px; height: 32px; background: #0a0a0a; color: #C8F135 !important;
	font-family: 'Anta', 'Inter', sans-serif; font-size: 11px; letter-spacing: .04em;
}
/* ⚠️ The app shell forces input[type=date] to display:block;width:100%;min-height:44px,
   which once stretched this picker across the page, invisible, on top of the day
   arrows — every click went into it. pointer-events:none still allows showPicker(). */
.dv-datepick {
	position: absolute; left: 0; top: 0; opacity: 0;
	width: 1px !important; height: 1px !important; min-width: 0 !important;
	padding: 0 !important; border: 0 !important; margin: 0 !important;
	pointer-events: none !important;
}

.dv-freebtn {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer; height: 42px;
	background: #fff; border: 1px solid #e3e6ea; border-radius: 11px;
	color: #5a6068; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 13px;
	padding: 0 15px; line-height: 1;
}
.dv-freebtn:hover,
.dv-freebtn.lw-hover { border-color: #C8F135; }
.dv-freebtn[aria-pressed="true"] { background: #0a0a0a; border-color: #0a0a0a; color: #C8F135; }

.dv-search { position: relative; flex: 1 1 260px; min-width: 220px; }
.dv-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #8a909a; font-size: 12px; }
.dv-search input {
	width: 100%; height: 42px; background: #fff; border: 1px solid #e3e6ea; border-radius: 11px;
	padding: 0 12px 0 34px; margin: 0; font: inherit; font-size: 13px; color: #0a0a0a;
	-webkit-appearance: none; appearance: none;
}
/* #8a909a, not the usual #b0b6be: at rest the placeholder is the only thing in
   the box, and the film plays it scaled down. */
.dv-search input::placeholder { color: #8a909a; opacity: 1; }
.dv-search input::-webkit-search-decoration,
.dv-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dv-search input:focus { outline: 0; border-color: #C8F135; box-shadow: 0 0 0 3px rgba(200, 241, 53, .25); }

/* ================= TOTALS ================= */
.dv-totals { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.dv-tot {
	background: #fff; border: 1px solid #e3e6ea; border-radius: 12px; padding: 10px 16px;
	min-width: 118px; box-shadow: 0 1px 2px rgba(15, 18, 22, .04);
}
.dv-tot span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #6a6f78; }
.dv-tot strong {
	display: block; font-family: 'Anta', 'Inter', sans-serif; font-weight: 400;
	font-size: 21px; color: #0a0a0a; margin-top: 3px; font-variant-numeric: tabular-nums;
}
.dv-tot.is-warn { border-color: #f0c884; background: #fff9ef; padding: 0; }
.dv-tot.is-warn a { display: block; padding: 10px 16px; text-decoration: none; color: #8a5a00 !important; }
.dv-tot.is-warn span,
.dv-tot.is-warn strong { color: #8a5a00 !important; }

/* ================= UNASSIGNED POOL ================= */
.dv-pool { background: #fffdf5; border: 1px solid #f0dfa8; border-radius: 14px; padding: 13px 16px; margin-bottom: 14px; }
.dv-pool-head { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #8a5a00; margin-bottom: 9px; }
.dv-pool-head i { color: #8a5a00; }
.dv-pool-head strong { color: #8a5a00; font-weight: 700; }
.dv-pool-head span { margin-left: auto; color: #a08a5a; font-size: 12px; }

/* The chips are spaced by the lane's gap, not by their own margins: the first
   chip sits inside a data-when-drag wrapper, so a :last-child rule saw it as
   last-of-its-wrapper and butted it straight up against the second. */
.dv-pool .dv-lane { display: flex; flex-direction: column; gap: 7px; margin-top: 0; }
.dv-chip {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border: 1px solid #e8dcb8; border-radius: 10px;
	padding: 8px 11px; font-size: 13px; color: #5a6068;
}
.dv-chip a { color: #0a0a0a !important; text-decoration: none; font-weight: 600; }
.dv-chip .p { margin-left: auto; font-family: 'Anta', 'Inter', sans-serif; color: #0a0a0a; font-size: 14px; }
.dv-chip.is-src { opacity: .32; }

.dv-wrap .grip {
	display: grid; place-items: center; width: 20px; height: 24px; flex: none;
	color: #c2c8d0; font-size: 11px; border-radius: 5px; cursor: grab; touch-action: none;
}
.dv-chip .grip:hover,
.dv-job .grip:hover,
.dv-wrap .grip.lw-hover { color: #6a6f78; background: #f1f3f6; }

/* ================= THE BOARD ================= */
.dv-rowwrap { display: block; }

.dv-row {
	display: flex; align-items: flex-start; gap: 14px; cursor: pointer;
	background: #fff; border: 1px solid #e3e6ea; border-radius: 14px;
	padding: 14px 16px; margin-bottom: 11px; box-shadow: 0 1px 2px rgba(15, 18, 22, .04);
	transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.dv-row:hover,
.dv-row.lw-hover { border-color: #C8F135; box-shadow: 0 6px 20px rgba(15, 18, 22, .09); }
.dv-row:active { transform: scale(.996); }
.dv-row:focus-visible { outline: 0; border-color: #C8F135; box-shadow: 0 0 0 3px rgba(200, 241, 53, .45); }

.dv-av {
	width: 40px; height: 40px; flex: none; border-radius: 999px; display: grid; place-items: center;
	background: #eef8cc; color: #4a6b00; font-family: 'Anta', 'Inter', sans-serif; font-size: 14px; font-weight: 400;
}
.dv-b { flex: 1; min-width: 0; }
.dv-name { font-size: 15px; font-weight: 700; color: #0a0a0a; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.dv-ref { font-family: 'Anta', 'Inter', sans-serif; font-size: 11px; font-weight: 400; color: #6a6f78; letter-spacing: .03em; }
.dv-veh { font-size: 11.5px; font-weight: 400; color: #8a909a; }

/* Status pills — every one legible on white. Volt-as-text is #4a6b00. */
.dv-state {
	display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
	padding: 3px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.5;
}
.dv-state.is-free { background: #eef0f3; color: #6a6f78; }
.dv-state.is-amber { background: #fff4e0; color: #8a5a00; border: 1px solid #f0dcb8; }
.dv-state.is-cyan { background: #e0f6fb; color: #0b6b7d; }
.dv-state.is-volt { background: #eef8cc; color: #4a6b00; }
.dv-state.is-done { background: #eef0f3; color: #4a6b00; }

.dv-lane { position: relative; min-height: 8px; margin-top: 4px; }
.dv-laneglow {
	position: absolute; inset: -6px -8px; border-radius: 10px; pointer-events: none;
	background: rgba(200, 241, 53, .16); box-shadow: inset 0 0 0 2px #C8F135;
}
.dv-marker { height: 3px; background: #C8F135; border-radius: 3px; margin: 5px 0; box-shadow: 0 0 0 3px rgba(200, 241, 53, .22); }

.dv-job {
	position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 7px 0; border-top: 1px solid #eef0f3; font-size: 13px; color: #5a6068;
}
/* Only the lane's own first job loses its divider. (A :first-of-type rule also
   stripped it from every job crewed in from the pool, because each of those is
   first inside its data-when-crewed wrapper.) */
.dv-lane > .dv-job:first-child { border-top: 0; }
.dv-job.is-locked { opacity: .72; }
.dv-job a.lane { color: #0a0a0a !important; text-decoration: none; font-weight: 600; }
.dv-job a.lane:hover { color: #4a6b00 !important; }
.dv-job .win { color: #6a6f78; font-size: 12px; font-variant-numeric: tabular-nums; }
.dv-job .val { margin-left: auto; font-family: 'Anta', 'Inter', sans-serif; font-weight: 400; font-size: 14px; color: #0a0a0a; font-variant-numeric: tabular-nums; }
.dv-nojobs { font-size: 13px; color: #8a909a; padding: 5px 0; }

/* The lifted card, mid-flight over the insertion point. It hangs off the drop
   wrapper, not the lane, so it hovers over the marker and the empty middle of
   the job above — it used to sit on Sam's name line and hide who it was being
   dropped on. It also stays inside Sam's row: if a film reveals the rows, each
   row becomes a stacking context and the next row would paint over any part of
   the ghost that hung below. */
.dv-lane [data-lw-drop] { position: relative; }
.dv-ghost {
	position: absolute; left: 36%; top: -24px; z-index: 20; width: 300px; max-width: 62%;
	display: flex; align-items: center; gap: 10px; pointer-events: none;
	background: #fff; border: 1px solid #C8F135; border-radius: 11px; padding: 8px 11px;
	font-size: 13px; color: #5a6068; opacity: .96; transform: rotate(-1deg);
	box-shadow: 0 18px 40px rgba(15, 18, 22, .24);
}
.dv-ghost a { color: #0a0a0a !important; text-decoration: none; font-weight: 600; white-space: nowrap; }
.dv-ghost .p { margin-left: auto; font-family: 'Anta', 'Inter', sans-serif; color: #0a0a0a; font-size: 14px; }

.dv-side { min-width: 96px; text-align: right; flex: none; }
.dv-side .amt { display: block; font-family: 'Anta', 'Inter', sans-serif; font-size: 19px; color: #0a0a0a; font-variant-numeric: tabular-nums; }
.dv-side .amt.is-none { color: #8a909a; }
.dv-side .lbl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #6a6f78; margin-top: 3px; }

.dv-noresults { text-align: center; color: #8a909a; font-size: 13px; padding: 26px 0; }

/* ================= SAVE TOAST ================= */
/* absolute, not fixed: it hangs over the stage rather than scrolling with the
   page the way anything inside .lw-main does. */
.dv-toast {
	position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60;
	display: flex; align-items: center; gap: 9px; white-space: nowrap;
	background: #0a0a0a; color: #C8F135; padding: 10px 18px; border-radius: 11px;
	font-size: 13px; font-weight: 700; box-shadow: 0 10px 30px rgba(15, 18, 22, .3);
}
.dv-toast span { color: inherit; }
.dv-toast.is-error { background: #a33218; color: #fff; }

/* ================= DRIVER PANEL ================= */
.dv-panel { position: absolute; inset: 0; z-index: 70; }
.dv-scrim { position: absolute; inset: 0; background: rgba(10, 12, 15, .5); }
.dv-panel-in {
	position: absolute; right: 0; top: 0; bottom: 0; width: min(460px, 100%);
	background: #f7f8fa; border-left: 1px solid #e3e6ea; padding: 22px; overflow-y: auto;
	box-shadow: -18px 0 50px rgba(15, 18, 22, .16); color: #0a0a0a;
	scrollbar-width: none; /* nobody scrolls a film; a classic scrollbar is just a grey bar */
}
.dv-panel-in::-webkit-scrollbar { width: 0; height: 0; }
.dv-x {
	position: absolute; right: 16px; top: 16px; width: 32px; height: 32px; cursor: pointer;
	background: #fff; border: 1px solid #e3e6ea; border-radius: 9px; color: #5a6068; font-size: 13px;
	display: grid; place-items: center; padding: 0;
}
.dv-x:hover,
.dv-x.lw-hover { background: #f1f3f6; }
.dv-p-head { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.dv-p-av {
	width: 50px; height: 50px; flex: none; border-radius: 999px; display: grid; place-items: center;
	background: #0a0a0a; color: #C8F135; font-family: 'Anta', 'Inter', sans-serif; font-size: 19px;
}
.dv-p-id { min-width: 0; }
.dv-p-id h2 { font-family: 'Anta', 'Inter', sans-serif; font-weight: 400; font-size: 21px; line-height: 1.15; color: #0a0a0a; margin: 0; }
.dv-p-id p { margin: 5px 0 0; display: flex; align-items: center; gap: 8px; color: #6a6f78; }
.dv-p-ref { font-family: 'Anta', 'Inter', sans-serif; font-size: 11.5px; color: #6a6f78; letter-spacing: .03em; }

.dv-p-stats { display: flex; gap: 10px; margin: 16px 0 4px; }
.dv-p-stats > div { flex: 1; min-width: 0; background: #fff; border: 1px solid #e3e6ea; border-radius: 12px; padding: 11px 14px; }
.dv-p-stats span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #6a6f78; }
.dv-p-stats span em { font-style: normal; color: #6a6f78; }
.dv-p-stats strong { display: block; font-family: 'Anta', 'Inter', sans-serif; font-weight: 400; font-size: 23px; color: #0a0a0a; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dv-p-stats small { display: block; font-size: 10.5px; color: #8a909a; }

.dv-sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: #6a6f78; font-weight: 700; margin: 20px 0 9px; }
.dv-p-loading { display: flex; align-items: center; gap: 9px; color: #8a909a; font-size: 13px; padding: 22px 0; }

.dv-pjob { background: #fff; border: 1px solid #e3e6ea; border-radius: 13px; padding: 13px 15px; margin-bottom: 10px; }
.dv-pjob-top { display: flex; align-items: baseline; gap: 10px; }
.dv-pjob-top a { color: #0a0a0a !important; text-decoration: none; font-size: 14.5px; font-weight: 700; }
.dv-pjob-top a:hover { color: #4a6b00 !important; }
.dv-pjob-top .p { margin-left: auto; font-family: 'Anta', 'Inter', sans-serif; color: #0a0a0a; font-size: 15px; }
.dv-pjob-win { font-size: 12px; color: #6a6f78; margin-top: 3px; }

.dv-track { display: flex; margin-top: 13px; }
.dv-stage { position: relative; flex: 1; min-width: 0; text-align: center; padding-top: 2px; }
.dv-stage::before {
	content: ''; position: absolute; left: -50%; top: 9px; width: 100%; height: 2px;
	background: #e3e6ea;
}
.dv-stage:first-child::before { display: none; }
.dv-stage.is-done::before { background: #C8F135; }
.dv-dot {
	position: relative; z-index: 1; display: grid; place-items: center; margin: 0 auto 6px;
	width: 18px; height: 18px; border-radius: 999px; background: #fff; border: 2px solid #e3e6ea;
	color: #0a0a0a; font-size: 8px;
}
.dv-stage.is-done .dv-dot { background: #C8F135; border-color: #C8F135; }
.dv-stage.is-now .dv-dot { box-shadow: 0 0 0 4px rgba(200, 241, 53, .28); }
.dv-stage b { display: block; font-size: 10.5px; font-weight: 700; color: #8a909a; }
.dv-stage.is-done b { color: #0a0a0a; }
.dv-stage > span { display: block; font-size: 10px; color: #8a909a; line-height: 1.4; margin-top: 2px; min-height: 14px; }

.dv-p-note { font-size: 11px; color: #8a909a; line-height: 1.5; margin: 14px 0 0; }

@media (prefers-reduced-motion: reduce) {
	.dv-row { transition: none; }
}

/* =====================================================================
 * NARROW DESIGN SPACE — the board at 420px, as a readable list
 *
 * The engine plays the phone layout in a 420 x 880 box with .is-hand on the
 * scaler. .lw-main keeps 14px gutters, so content here is 392px wide. (A
 * max-width:860px block used to stand in for this: it never fired on a phone
 * stage, and on a landscape phone — which plays the DESKTOP space — it turned
 * the desktop panel into a bottom sheet.)
 *
 * Nothing here drops below 11px except the uppercase tile labels' letter-spaced
 * caps, which read larger than their size.
 * ===================================================================== */

/* head: title block, then the CTA beneath it — the real page does this under 640px */
.lw-scaler.is-hand .dv-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.lw-scaler.is-hand .dv-head .dv-count { font-size: 12px; margin-top: 6px; }
.lw-scaler.is-hand .dv-add { font-size: 12.5px; padding: 8px 13px; border-radius: 10px; }

/* day bar: the day pill owns line one; Free only and search share line two */
.lw-scaler.is-hand .dv-bar { gap: 8px; margin-bottom: 12px; }
.lw-scaler.is-hand .dv-daynav { flex: 1 1 100%; min-width: 0; }
.lw-scaler.is-hand .dv-daylabel {
	flex: 1 1 auto; min-width: 0; padding: 0 6px; font-size: 13.5px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lw-scaler.is-hand .dv-freebtn { flex: none; height: 40px; padding: 0 12px; gap: 7px; font-size: 12.5px; }
.lw-scaler.is-hand .dv-search { flex: 1 1 0; min-width: 0; }
.lw-scaler.is-hand .dv-search input { height: 40px; }

/* totals: one even row of tiles, however many are showing. Flex-basis 0 with
   fixed weights (money and "Nobody on" get the wider tiles), so a count-up
   rewriting the digits can never make the row reflow mid-animation. */
.lw-scaler.is-hand .dv-totals { flex-wrap: nowrap; gap: 8px; margin-bottom: 12px; }
.lw-scaler.is-hand .dv-tot { flex: .8 1 0; min-width: 0; padding: 8px 10px; border-radius: 11px; }
.lw-scaler.is-hand .dv-tot:nth-child(3),
.lw-scaler.is-hand .dv-tot.is-warn { flex-grow: 1.2; }
.lw-scaler.is-hand .dv-tot.is-warn { padding: 0; }
.lw-scaler.is-hand .dv-tot.is-warn a { padding: 8px 10px; }
.lw-scaler.is-hand .dv-tot span { font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
.lw-scaler.is-hand .dv-tot strong { font-size: 18px; margin-top: 2px; white-space: nowrap; }

/* pool */
.lw-scaler.is-hand .dv-pool { padding: 11px 12px; border-radius: 13px; margin-bottom: 12px; }
.lw-scaler.is-hand .dv-pool-head { font-size: 12px; gap: 8px; margin-bottom: 8px; }
.lw-scaler.is-hand .dv-pool-head span { font-size: 11px; }
.lw-scaler.is-hand .dv-pool .dv-lane { gap: 6px; }
.lw-scaler.is-hand .dv-chip { gap: 8px; padding: 7px 10px; font-size: 12.5px; }
.lw-scaler.is-hand .dv-chip .p { font-size: 13px; }

/* rows: a list card. Avatar, name and the day's value across the top; the lane
   full-width underneath. As a three-column row the jobs had ~190px to wrap in
   and every one broke across three lines. .dv-b dissolves (display:contents) so
   its name line and lane can take their own grid areas. */
.lw-scaler.is-hand .dv-row {
	display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
	grid-template-areas: "av name side" "lane lane lane";
	gap: 0 10px; align-items: start; /* row-gap 0: the desktop's flex gap:14px would otherwise open a hole above the lane */
	padding: 12px 14px; margin-bottom: 9px; border-radius: 13px;
}
.lw-scaler.is-hand .dv-b { display: contents; }
.lw-scaler.is-hand .dv-av { grid-area: av; width: 34px; height: 34px; font-size: 12px; }
.lw-scaler.is-hand .dv-name { grid-area: name; min-width: 0; font-size: 14px; line-height: 1.3; gap: 2px 6px; }
/* the name gets its own line; ref, status and vehicle wrap beneath it */
.lw-scaler.is-hand .dv-name::after { content: ''; order: 0; flex: 0 0 100%; height: 0; }
.lw-scaler.is-hand .dv-name > span { order: 1; }
.lw-scaler.is-hand .dv-ref,
.lw-scaler.is-hand .dv-veh { font-size: 11px; }
.lw-scaler.is-hand .dv-state { padding: 2px 8px; }
.lw-scaler.is-hand .dv-side { grid-area: side; min-width: 0; }
.lw-scaler.is-hand .dv-side .amt { font-size: 16px; line-height: 1.25; }
.lw-scaler.is-hand .dv-side .lbl { font-size: 11px; margin-top: 1px; }

.lw-scaler.is-hand .dv-row .dv-lane { grid-area: lane; margin-top: 10px; padding-top: 1px; border-top: 1px solid #eef0f3; }
.lw-scaler.is-hand .dv-job { flex-wrap: nowrap; gap: 8px; padding: 8px 0; font-size: 12.5px; }
.lw-scaler.is-hand .dv-job a.lane { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-scaler.is-hand .dv-job .dv-state,
.lw-scaler.is-hand .dv-job .win,
.lw-scaler.is-hand .dv-job .val { flex: none; }
.lw-scaler.is-hand .dv-job .win { font-size: 11.5px; }
.lw-scaler.is-hand .dv-job .val { font-size: 13px; }
.lw-scaler.is-hand .dv-wrap .grip { width: 18px; height: 22px; }
.lw-scaler.is-hand .dv-nojobs { font-size: 12px; padding: 8px 0 1px; }

.lw-scaler.is-hand .dv-ghost { left: 40%; max-width: 58%; padding: 7px 10px; gap: 8px; font-size: 12.5px; }
.lw-scaler.is-hand .dv-ghost .p { font-size: 13px; }

.lw-scaler.is-hand .dv-noresults { font-size: 12.5px; padding: 22px 8px; }

/* toast: clear of the 60px tab bar */
.lw-scaler.is-hand .dv-toast { bottom: 76px; padding: 10px 16px; font-size: 12.5px; }

/* panel: a bottom sheet, as the real page is under 640px. max-height is a
   percentage of the 880px box — vh would measure the visitor's window. */
.lw-scaler.is-hand .dv-panel-in {
	left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 88%;
	padding: 18px 16px 22px; border-left: 0; border-top: 1px solid #e3e6ea;
	border-radius: 18px 18px 0 0; box-shadow: 0 -18px 50px rgba(15, 18, 22, .2);
}
.lw-scaler.is-hand .dv-x { right: 12px; top: 12px; }
.lw-scaler.is-hand .dv-p-av { width: 44px; height: 44px; font-size: 17px; }
.lw-scaler.is-hand .dv-p-id h2 { font-size: 19px; }
.lw-scaler.is-hand .dv-p-stats { margin-top: 14px; gap: 8px; }
.lw-scaler.is-hand .dv-p-stats > div { padding: 10px 12px; }
.lw-scaler.is-hand .dv-p-stats span,
.lw-scaler.is-hand .dv-p-stats small { font-size: 11px; }
.lw-scaler.is-hand .dv-p-stats strong { font-size: 20px; }
.lw-scaler.is-hand .dv-sec { font-size: 11px; margin: 16px 0 8px; }
.lw-scaler.is-hand .dv-pjob { padding: 12px 13px; margin-bottom: 8px; }
.lw-scaler.is-hand .dv-pjob-top a,
.lw-scaler.is-hand .dv-pjob-top .p { font-size: 14px; }
.lw-scaler.is-hand .dv-track { margin-top: 11px; }
.lw-scaler.is-hand .dv-stage b,
.lw-scaler.is-hand .dv-stage > span { font-size: 11px; }
.lw-scaler.is-hand .dv-p-note { font-size: 11.5px; }