/* Tour screen — "Post from your own system" (walkthrough/screens/api.php). Prefix lap-.
   Light, neutral: this is the SHIPPER's own system beside a sample of what goes
   across. Every colour set explicitly (the site body is dark). No transitions. */

.lw-scaler .lap{ position:absolute; inset:0; background:#eef0f3; color:#0a0a0a; padding:26px 30px; font-family:'Inter',system-ui,sans-serif; overflow:hidden; }
.lw-scaler .lap-kicker{ margin:0 0 14px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#8a909a; display:flex; gap:8px; align-items:center; }
.lw-scaler .lap-kicker i{ color:#4a6b00; }
.lw-scaler .lap-grid{ display:grid; grid-template-columns:1.12fr 1fr; gap:22px; align-items:start; }

/* ---- their system ---- */
.lw-scaler .lap-tms{ background:#fff; border:1px solid #dcdfe4; border-radius:12px; box-shadow:0 10px 30px rgba(10,10,10,.08); overflow:hidden; }
.lw-scaler .lap-tms-bar{ display:flex; align-items:center; gap:12px; padding:10px 14px; background:#f4f5f7; border-bottom:1px solid #e3e6ea; font-size:12.5px; color:#3b4046; }
.lw-scaler .lap-tms-bar strong{ font-weight:600; color:#1d2126; }
.lw-scaler .lap-dots{ display:flex; gap:5px; }
.lw-scaler .lap-dots i{ width:9px; height:9px; border-radius:50%; background:#cfd3d9; display:block; }
.lw-scaler .lap-tms-tab{ margin-left:auto; font-size:11.5px; font-weight:600; color:#1d2126; background:#fff; border:1px solid #dcdfe4; border-radius:6px; padding:3px 9px; }
.lw-scaler .lap-orders{ width:100%; border-collapse:collapse; font-size:12.5px; }
.lw-scaler .lap-orders th{ text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#8a909a; font-weight:600; padding:10px 14px 8px; border-bottom:1px solid #eceef1; }
.lw-scaler .lap-orders td{ padding:10px 14px; border-bottom:1px solid #f0f1f4; color:#3b4046; white-space:nowrap; }
.lw-scaler .lap-orders td strong{ color:#0a0a0a; }
.lw-scaler .lap-orders tr.is-sel td{ background:#f7fbe8; }
.lw-scaler .lap-orders tr.is-dim td{ color:#9aa0a8; }
.lw-scaler .lap-poa{ color:#c43c16 !important; font-weight:600; }
.lw-scaler .lap-chip{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; letter-spacing:.04em; border-radius:99px; padding:3px 9px; }
.lw-scaler .lap-chip.is-idle{ color:#5a6068; background:#eef0f2; }
.lw-scaler .lap-chip.is-live{ color:#2f4400; background:#e3f5a8; }
.lw-scaler .lap-chip.is-bad{ color:#fff; background:#c43c16; }
.lw-scaler .lap-detail{ padding:16px 16px 18px; }
.lw-scaler .lap-detail-top{ display:flex; gap:14px; justify-content:space-between; align-items:flex-start; }
.lw-scaler .lap-k{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8a909a; }
.lw-scaler .lap-k.is-volt{ color:#4a6b00; display:flex; gap:6px; align-items:center; }
.lw-scaler .lap-k.is-volt i{ font-size:7px; color:#7fb800; }
.lw-scaler .lap-route{ font-family:'Anta','Inter',sans-serif; font-size:20px; color:#0a0a0a; margin:4px 0 4px; }
.lw-scaler .lap-route span{ font-family:'Inter',sans-serif; font-size:12px; color:#8a909a; }
.lw-scaler .lap-meta{ font-size:12.5px; color:#5a6068; }
.lw-scaler .lap-price{ font-family:'Anta','Inter',sans-serif; font-size:26px; color:#0a0a0a; }
.lw-scaler .lap-send{ margin-top:14px; display:inline-flex; align-items:center; gap:8px; background:#0a0a0a; color:#c8f135; border:0; border-radius:9px; padding:11px 18px; font-weight:700; font-size:13.5px; font-family:inherit; }

/* ---- what goes across ---- */
.lw-scaler .lap-code{ background:#0d0f12; color:#e8eaed; border-radius:12px; box-shadow:0 14px 36px rgba(10,10,10,.22); overflow:hidden; }
.lw-scaler .lap-code-bar{ display:flex; justify-content:space-between; align-items:baseline; padding:11px 16px; border-bottom:1px solid rgba(255,255,255,.08); font-size:12px; font-weight:600; color:#f2f2f2; }
.lw-scaler .lap-code-bar em{ font-style:normal; font-weight:500; font-size:11px; color:rgba(242,242,242,.5); }
.lw-scaler .lap-code pre{ margin:0; padding:12px 16px; font-family:'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace; font-size:11.8px; line-height:1.6; color:#d9dde3; white-space:pre; overflow:hidden; }
.lw-scaler .lap-code .m{ color:#c8f135; font-weight:700; }
.lw-scaler .lap-code .h{ color:#8fb3ff; }
.lw-scaler .lap-code .k{ color:#9ecbff; }
.lw-scaler .lap-code .s{ color:#ffcf8a; }
.lw-scaler .lap-code .n{ color:#c8f135; }
.lw-scaler .lap-code .is-bad{ color:#ff8a6b; }
.lw-scaler .lap-res{ border-top:1px solid rgba(255,255,255,.08); }
.lw-scaler .lap-status{ display:flex; align-items:center; gap:8px; padding:10px 16px 0; font-size:12.5px; font-weight:700; }
.lw-scaler .lap-status.is-ok{ color:#c8f135; }
.lw-scaler .lap-status.is-bad{ color:#ff8a6b; }
.lw-scaler .lap-list{ padding:14px 16px 16px; }
.lw-scaler .lap-list-h{ font-family:'Anta','Inter',sans-serif; font-size:16px; color:#f2f2f2; margin-bottom:10px; }
.lw-scaler .lap-can{ display:flex; gap:11px; align-items:flex-start; padding:8px 0; border-top:1px solid rgba(255,255,255,.06); }
.lw-scaler .lap-can:first-of-type{ border-top:0; }
.lw-scaler .lap-can .ic{ flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:rgba(200,241,53,.12); color:#c8f135; font-size:12px; }
.lw-scaler .lap-can .ic.is-n{ font-weight:700; font-size:13px; }
.lw-scaler .lap-can strong{ display:block; font-size:13px; color:#f2f2f2; font-weight:600; }
.lw-scaler .lap-can span{ display:block; font-size:12px; color:rgba(242,242,242,.62); line-height:1.45; }
.lw-scaler .lap-foot{ margin:10px 0 0; font-size:11.5px; line-height:1.5; color:rgba(242,242,242,.6); display:flex; gap:8px; }
.lw-scaler .lap-foot i{ color:#c8f135; margin-top:2px; }
.lw-scaler .lap-onlaydn{ margin:12px 16px 16px; background:#fff; color:#0a0a0a; border-radius:10px; padding:11px 13px; }
.lw-scaler .lap-on-row{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.lw-scaler .lap-on-row strong{ font-family:'Anta','Inter',sans-serif; font-weight:400; font-size:15px; color:#0a0a0a; }
.lw-scaler .lap-live{ font-size:10px; font-weight:700; color:#2f4400; background:#e3f5a8; border-radius:99px; padding:2px 8px; }
.lw-scaler .lap-on-price{ margin-left:auto; font-family:'Anta','Inter',sans-serif; font-size:17px; color:#0a0a0a; }
.lw-scaler .lap-on-meta{ font-size:11.5px; color:#5a6068; margin-top:2px; }

/* ---- phone: one column; the orders table gives way to the order itself ---- */
.lw-scaler.is-hand .lap{ padding:16px 14px; overflow:hidden; }
.lw-scaler.is-hand .lap-kicker{ font-size:10px; margin-bottom:10px; }
.lw-scaler.is-hand .lap-grid{ grid-template-columns:1fr; gap:12px; }
.lw-scaler.is-hand .lap-orders{ display:none; }
.lw-scaler.is-hand .lap-tms-bar{ font-size:11px; padding:8px 12px; }
.lw-scaler.is-hand .lap-detail{ padding:12px 13px 14px; }
.lw-scaler.is-hand .lap-route{ font-size:17px; }
.lw-scaler.is-hand .lap-price{ font-size:21px; }
.lw-scaler.is-hand .lap-send{ margin-top:10px; padding:9px 14px; font-size:12.5px; }
.lw-scaler.is-hand .lap-code pre{ font-size:9.6px; padding:10px 12px; }
.lw-scaler.is-hand .lap-list{ padding:12px 13px 14px; }
.lw-scaler.is-hand .lap-can{ padding:6px 0; }
.lw-scaler.is-hand .lap-can span{ font-size:11px; }
.lw-scaler.is-hand .lap-onlaydn{ margin:10px 12px 12px; }

/* A desk stage is 1280×820 and the caption band takes the bottom fifth: set the
   type larger so the two panels fill the frame instead of floating at the top. */
.lw-scaler.is-desk .lap{ padding:34px 40px; }
.lw-scaler.is-desk .lap-kicker{ font-size:12.5px; margin-bottom:18px; }
.lw-scaler.is-desk .lap-grid{ gap:28px; }
.lw-scaler.is-desk .lap-tms-bar{ font-size:14px; padding:13px 18px; }
.lw-scaler.is-desk .lap-orders{ font-size:14.5px; }
.lw-scaler.is-desk .lap-orders th{ font-size:11.5px; padding:13px 18px 10px; }
.lw-scaler.is-desk .lap-orders td{ padding:13px 18px; }
.lw-scaler.is-desk .lap-chip{ font-size:11.5px; padding:4px 10px; }
.lw-scaler.is-desk .lap-detail{ padding:22px 20px 24px; }
.lw-scaler.is-desk .lap-route{ font-size:25px; }
.lw-scaler.is-desk .lap-meta{ font-size:14px; }
.lw-scaler.is-desk .lap-price{ font-size:32px; }
.lw-scaler.is-desk .lap-send{ font-size:15px; padding:13px 22px; margin-top:18px; }
.lw-scaler.is-desk .lap-code-bar{ font-size:13.5px; padding:14px 20px; }
.lw-scaler.is-desk .lap-code pre{ font-size:13.6px; padding:16px 20px; }
.lw-scaler.is-desk .lap-status{ font-size:14px; padding:13px 20px 0; }
.lw-scaler.is-desk .lap-list{ padding:18px 20px 20px; }
.lw-scaler.is-desk .lap-list-h{ font-size:19px; }
.lw-scaler.is-desk .lap-can strong{ font-size:14.5px; }
.lw-scaler.is-desk .lap-can span{ font-size:13px; }
.lw-scaler.is-desk .lap-foot{ font-size:12.5px; }
.lw-scaler.is-desk .lap-onlaydn{ margin:14px 20px 20px; padding:14px 16px; }
.lw-scaler.is-desk .lap-on-row strong{ font-size:17px; }
.lw-scaler .lap-price.is-poa{ color:#c43c16; }
/* On a phone the lists need the room: the order card steps aside for them. */
.lw-scaler.is-hand .lap:has([data-lw-manage]:not([hidden])) .lap-tms,
.lw-scaler.is-hand .lap:has([data-lw-access]:not([hidden])) .lap-tms{ display:none; }