/**
 * Tour — the Dashboard (walkthrough/screens/dashboard.php). Prefix ldb-.
 *
 * Rebuilt from pages/system-app.php, whose page is the LIGHT .dash-light pilot:
 * the values below are that page's own light overrides, not the dark defaults.
 *
 * ⚠️ Light app inside a dark site: every colour is explicit. The site's body is
 *    var(--white), and its bare p / h1-h6 / a rules (margins, muted colour, a
 *    colour transition on every link) would all leak in, so this screen uses no
 *    <a> at all and sets margin and colour on every heading and paragraph.
 * ⚠️ Volt as TEXT on white is #4a6b00. (The product's compliant pill is #4a7b00;
 *    #4a6b00 is used per the tour palette, and the two are indistinguishable.)
 *    The compliant card's icon stays a raw #C8F135 glyph, as the product draws it.
 * ⚠️ NO transitions or animations. The product declares `transition: width .4s`
 *    on the funnel fill and `all .15s` on the pills; the tour engine drives all
 *    motion, and a free-running transition keeps moving after pause.
 * ⚠️ Stays DARK on purpose, as in the product: the hero card (and the email's
 *    header band). The two overlays are the film's own, drawn over the stage.
 * ⚠️ Phone = .lw-scaler.is-hand (NEVER @media: the scaler always reports its
 *    design width).
 */

/* Anything a state hides must really disappear, whatever display it sets. */
.lw-scaler .ldb [hidden],
.lw-scaler .ldb-chip[hidden],
.lw-scaler .ldb-ov[hidden],
.lw-scaler .ldb-ov [hidden]{ display:none !important; }

/* The page. .dash-light pads 32px 40px; .lw-main already gives 26px 30px, so the
   difference is added here. That makes the content 932px wide at the 1280 desk
   space, which resolves the product's auto-fit tile grid to 5 + 2, as at 1280.
   The base is the product's too: the app body inherits the site's 16px / 1.7
   (the tour's own base is 13px / 1.5), so pills, labels and notes size alike. */
.lw-scaler .ldb{ padding:6px 10px 4px; color:#1a1a1a; font-size:16px; line-height:1.7; }

/* ---------------- hero: the dark, volt-edged page-title card ---------------- */
.lw-scaler .ldb-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:22px 26px; margin:0 0 22px; 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);
}
.lw-scaler .ldb-head-title{ flex:1; min-width:220px; }
/* The eyebrow is the BODY font (Inter), not Anta. */
.lw-scaler .ldb-eyebrow{
  margin:0 0 4px; font-family:'Inter',system-ui,sans-serif; font-size:13px; font-weight:400; line-height:1.7;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(242,242,242,.55);
}
.lw-scaler .ldb-hi{
  margin:0; font-family:'Anta','Inter',sans-serif; font-weight:400; font-size:42px; line-height:1.05;
  letter-spacing:-.02em; color:#F2F2F2;
}
.lw-scaler .ldb-hi span{ color:#F2F2F2; }
.lw-scaler .ldb-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.lw-scaler .ldb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 22px;
  border-radius:9px; font-family:'Anta','Inter',sans-serif; font-size:14px; line-height:1; white-space:nowrap;
  position:relative; overflow:hidden;
}
/* ⚠️ Real quirk: the volt label sits in a <span> at .85em, so "Post a load" is
   smaller than "Find loads" beside it. */
.lw-scaler .ldb-btn.is-volt{ background:#C8F135; color:#0a0a0a; border:1.5px solid #C8F135; }
.lw-scaler .ldb-btn.is-volt i,
.lw-scaler .ldb-btn.is-volt span{ color:#0a0a0a; font-size:.85em; }
.lw-scaler .ldb-btn.is-volt.lw-hover{ background:#d6ff52; border-color:#d6ff52; }
.lw-scaler .ldb-btn.is-line{ background:transparent; color:#F2F2F2; border:1.5px solid rgba(255,255,255,.18); }
.lw-scaler .ldb-btn.is-line i{ color:#C8F135; font-size:.85em; }
.lw-scaler .ldb-btn.is-line.lw-hover{ background:rgba(200,241,53,.06); border-color:#C8F135; }

/* ---------------- range pills (links in the product: each one reloads) ---------------- */
.lw-scaler .ldb-range{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 24px; }
.lw-scaler .ldb-pill{
  display:inline-flex; align-items:center; padding:7px 14px; background:#fff; border:1px solid #e3e6ea;
  border-radius:8px; color:#5a6068; font-family:'Inter',system-ui,sans-serif; font-size:12px; font-weight:500;
  white-space:nowrap;
}
.lw-scaler .ldb-pill.is-on{ background:#C8F135; border-color:#C8F135; color:#0a0a0a; }

/* ---------------- compliance card (carrier / both only) ----------------
 * One element for the film to point at in every state. Its edge and ground are
 * a "skin" per state, so the border can change without the hook moving. */
.lw-scaler .ldb-cmp{
  position:relative; overflow:hidden; display:flex; align-items:center; gap:14px;
  padding:16px 18px; margin:0 0 22px; border-radius:12px; color:#1a1a1a;
  box-shadow:0 1px 2px rgba(15,18,22,.04);
}
.lw-scaler .ldb-cmp > *{ position:relative; z-index:1; }
.lw-scaler .ldb-cmp > .ldb-cmp-skin{ position:absolute; inset:0; z-index:0; border-radius:12px; border:1px solid #e3e6ea; background:#fff; }
.lw-scaler .ldb-cmp-skin.is-todo{ border-color:rgba(255,160,0,.45); background:#fff; }
.lw-scaler .ldb-cmp-skin.is-ok{ border-color:#e3e6ea; background:#fff; }
.lw-scaler .ldb-cmp-skin.is-bad{ border-color:rgba(255,92,53,.50); background:#fff7f4; }
/* The product's :hover beats every state's own edge and ground. */
.lw-scaler .ldb-cmp.lw-hover > .ldb-cmp-skin{ background:#fafbfc; border-color:rgba(200,241,53,.50); }
.lw-scaler .ldb-cmp-icon{
  width:46px; height:46px; border-radius:10px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.lw-scaler .ldb-cmp-icon i{ font-size:18px; }
.lw-scaler .ldb-cmp-icon.is-todo{ background:rgba(255,200,80,.12); }
.lw-scaler .ldb-cmp-icon.is-todo i{ color:#ffc450; }
.lw-scaler .ldb-cmp-icon.is-ok{ background:rgba(200,241,53,.10); }
.lw-scaler .ldb-cmp-icon.is-ok i{ color:#C8F135; }
.lw-scaler .ldb-cmp-icon.is-bad{ background:rgba(255,92,53,.12); }
.lw-scaler .ldb-cmp-icon.is-bad i{ color:#ff5c35; }
.lw-scaler .ldb-cmp-body{ flex:1; min-width:0; }
.lw-scaler .ldb-cmp-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 4px; }
.lw-scaler .ldb-cmp-row strong{ font-family:'Anta','Inter',sans-serif; font-weight:400; font-size:15px; letter-spacing:-.005em; color:#0a0a0a; }
.lw-scaler .ldb-cmp-pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; border:1px solid transparent;
  font-family:'Anta','Inter',sans-serif; font-size:10px; letter-spacing:.04em; text-transform:uppercase;
}
.lw-scaler .ldb-cmp-pill i{ font-size:9px; }
.lw-scaler .ldb-cmp-pill.is-warn{ background:rgba(220,140,0,.08); color:#a36200; border-color:rgba(220,140,0,.30); }
.lw-scaler .ldb-cmp-pill.is-ok{ background:rgba(120,180,30,.10); color:#4a6b00; border-color:rgba(120,180,30,.30); }
.lw-scaler .ldb-cmp-pill.is-bad{ background:rgba(220,60,30,.08); color:#b53412; border-color:rgba(220,60,30,.30); }
.lw-scaler .ldb-cmp-meta{ font-size:13px; line-height:1.4; color:#5a6068; }
.lw-scaler .ldb-cmp-cta{ flex-shrink:0; padding-left:6px; font-size:16px; color:rgba(0,0,0,.30); }
.lw-scaler .ldb-cmp.lw-hover .ldb-cmp-cta{ color:#1a1a1a; }

/* ---------------- the stat stacks ---------------- */
.lw-scaler .ldb-stack{ margin:0 0 28px; }
.lw-scaler .ldb-stack-head{ display:flex; align-items:baseline; gap:10px; margin:0 0 14px; }
.lw-scaler .ldb-stack-head h2{ margin:0; font-family:'Anta','Inter',sans-serif; font-weight:400; font-size:17px; line-height:1.05; letter-spacing:-.01em; color:#0a0a0a; }
.lw-scaler .ldb-note{ font-size:12px; color:#8a909a; }

.lw-scaler .ldb-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.lw-scaler .ldb-tile{
  position:relative; overflow:hidden; padding:16px 18px; background:#fff; border:1px solid #e3e6ea;
  border-radius:12px; box-shadow:0 1px 2px rgba(15,18,22,.04);
}
/* Featured tiles differ ONLY by a faint volt edge in the light page. */
.lw-scaler .ldb-tile.is-featured{ border-color:rgba(200,241,53,.50); box-shadow:0 1px 2px rgba(15,18,22,.04), inset 0 0 0 1px rgba(200,241,53,.10); }
.lw-scaler .ldb-tile-ic{ position:absolute; top:14px; right:14px; font-size:14px; color:rgba(0,0,0,.18); }
.lw-scaler .ldb-num{
  margin:0 0 6px; font-family:'Anta','Inter',sans-serif; font-size:28px; line-height:1; letter-spacing:-.02em;
  color:#0a0a0a; font-variant-numeric:tabular-nums;
}
.lw-scaler .ldb-num span{ color:#0a0a0a; }
.lw-scaler .ldb-num .ldb-unit{ margin-right:1px; font-family:'Inter',system-ui,sans-serif; font-weight:500; font-size:17px; color:#8a909a; }
.lw-scaler .ldb-num .ldb-trail{ margin-left:1px; font-family:'Inter',system-ui,sans-serif; font-weight:500; font-size:16px; color:#8a909a; }
.lw-scaler .ldb-lbl{ font-size:10px; letter-spacing:.10em; text-transform:uppercase; color:#6a6f78; }

.lw-scaler .ldb-charts{ display:grid; grid-template-columns:1.4fr 1fr; gap:14px; margin-top:14px; }
.lw-scaler .ldb-chart-card{
  min-width:0; padding:18px 20px; background:#fff; border:1px solid #e3e6ea; border-radius:12px;
  box-shadow:0 1px 2px rgba(15,18,22,.04);
}
/* Anta has one weight; the product asks for 600, so it renders faux-bold. Matched. */
.lw-scaler .ldb-chart-card h4{
  display:flex; align-items:center; gap:8px; margin:0 0 16px; font-family:'Anta','Inter',sans-serif;
  font-size:12px; font-weight:600; line-height:1.05; letter-spacing:.10em; text-transform:uppercase; color:#6a6f78;
}
.lw-scaler .ldb-chart-card h4 i{ font-size:11px; color:#1a1a1a; }

/* activity chart — a port of laydn_render_bar_chart(), light */
.lw-scaler .ldb-chart{ display:flex; align-items:flex-start; gap:10px; }
.lw-scaler .ldb-chart-y{
  width:24px; height:120px; flex-shrink:0; display:flex; flex-direction:column; justify-content:space-between;
  font-size:10px; line-height:1; text-align:right; color:#4a5159; font-variant-numeric:tabular-nums;
}
.lw-scaler .ldb-chart-plot{ flex:1; min-width:0; }
.lw-scaler .ldb-chart-plot svg{ display:block; width:100%; height:120px; overflow:hidden; }
.lw-scaler .ldb-chart-x{
  display:flex; justify-content:space-between; margin-top:8px; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:#4a5159;
}
/* Shown whenever the window is empty, which on first login is always. */
.lw-scaler .ldb-chart-empty{
  display:flex; align-items:center; justify-content:center; height:140px; padding:0 14px; text-align:center;
  font-size:13px; color:#8a909a; border:1px dashed #e3e6ea; border-radius:9px;
}

/* funnel — row 1 is hard-coded to a full bar, even at 0 (real quirk) */
.lw-scaler .ldb-fn{ display:flex; flex-direction:column; gap:12px; }
.lw-scaler .ldb-fn-row{ display:grid; grid-template-columns:minmax(80px,100px) 1fr 32px; align-items:center; gap:12px; }
.lw-scaler .ldb-fn-lbl{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#4a5159; }
.lw-scaler .ldb-fn-bar{ height:14px; background:#eef0f3; border-radius:4px; overflow:hidden; }
.lw-scaler .ldb-fn-fill{ height:100%; border-radius:4px; background:linear-gradient(90deg,rgba(200,241,53,.55),#C8F135); }
.lw-scaler .ldb-fn-val{ font-family:'Anta','Inter',sans-serif; font-size:14px; line-height:1; text-align:right; color:#4a5159; font-variant-numeric:tabular-nums; }

/* ---------------- overlays (outside the app, so they cover the stage) ---------------- */
.lw-scaler .ldb-ov{ position:absolute; inset:0; z-index:40; }

/* the welcome email — an inbox row, then the message as the product sends it */
.lw-scaler .ldb-mail-dim{ position:absolute; inset:0; background:rgba(10,10,10,.30); }
.lw-scaler .ldb-mail{
  position:absolute; top:24px; right:24px; width:440px; max-height:calc(100% - 48px); overflow:hidden;
  background:#fff; border:1px solid #e3e6ea; border-radius:16px; color:#0a0a0a;
  box-shadow:0 30px 70px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.10);
}
.lw-scaler .ldb-mail-row{ display:flex; align-items:flex-start; gap:11px; padding:13px 16px; background:#fff; border-bottom:1px solid #e3e6ea; }
.lw-scaler .ldb-mail-av{
  width:34px; height:34px; flex:none; border-radius:99px; background:#0a0a0a; border:1px solid rgba(200,241,53,.5);
  color:#C8F135; font-family:'Anta','Inter',sans-serif; font-size:15px; line-height:1; display:grid; place-items:center;
}
.lw-scaler .ldb-mail-meta{ flex:1; min-width:0; }
.lw-scaler .ldb-mail-top{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; line-height:1.4; color:#0a0a0a; }
.lw-scaler .ldb-mail-top strong{ font-weight:700; color:#0a0a0a; }
.lw-scaler .ldb-mail-top span{ font-size:11px; color:#8a909a; }
.lw-scaler .ldb-mail-subj{ margin-top:1px; font-size:13px; font-weight:600; line-height:1.35; color:#0a0a0a; }
.lw-scaler .ldb-mail-pre{ margin-top:1px; font-size:12px; line-height:1.4; color:#5a6068; }
.lw-scaler .ldb-mail-body{ padding:16px 16px 10px; background:#0a0a0a; }
.lw-scaler .ldb-mail-brand{ padding:0 2px 12px; font-family:'Anta','Inter',sans-serif; font-size:20px; line-height:1; letter-spacing:.04em; color:#C8F135; }
.lw-scaler .ldb-mail-card{ padding:20px 20px 14px; background:#fff; border-radius:12px; color:#222; }
.lw-scaler .ldb-mail-card h3{ margin:0 0 10px; font-family:'Anta','Inter',sans-serif; font-weight:400; font-size:19px; line-height:1.2; letter-spacing:-.01em; color:#0a0a0a; }
.lw-scaler .ldb-mail-card p{ margin:0 0 9px; font-size:12.5px; line-height:1.55; color:#333; }
.lw-scaler .ldb-mail-card p span{ color:#333; }
.lw-scaler .ldb-mail-cta{
  display:inline-block; margin:6px 0 12px; padding:11px 22px; border-radius:9px; background:#C8F135; color:#0a0a0a;
  font-family:'Anta','Inter',sans-serif; font-size:13px; line-height:1.2; letter-spacing:.02em; position:relative; overflow:hidden;
}
.lw-scaler .ldb-mail-card .ldb-mail-link{ margin:0; font-size:11px; line-height:1.5; color:#666; word-break:break-all; }
.lw-scaler .ldb-mail-card .ldb-mail-link span{ color:#3a7a00; }
.lw-scaler .ldb-mail-foot{ padding:12px 6px 2px; text-align:center; font-size:10px; line-height:1.6; color:#8a8a8a; }
.lw-scaler .ldb-mail-foot span{ color:#C8F135; }

/* "What it costs" — the closing lines, dark, over a dimmed page */
.lw-scaler .ldb-costs-ov{ display:grid; place-items:center; }
.lw-scaler .ldb-costs-dim{ position:absolute; inset:0; background:rgba(10,10,10,.60); }
.lw-scaler .ldb-costs{
  position:relative; width:560px; margin-bottom:120px; padding:24px 28px 20px; color:#F2F2F2;
  background:#0e0e0e; border:1px solid rgba(200,241,53,.45); border-radius:18px;
  box-shadow:0 0 0 4px rgba(200,241,53,.08), 0 30px 70px rgba(0,0,0,.55);
}
.lw-scaler .ldb-costs-k{ margin:0 0 10px; font-family:'Anta','Inter',sans-serif; font-size:11px; line-height:1.4; letter-spacing:.2em; text-transform:uppercase; color:#C8F135; }
.lw-scaler .ldb-costs-inc{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:2px 0 12px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.07); }
.lw-scaler .ldb-costs-inc b{ margin-right:3px; font-weight:600; font-size:12px; color:rgba(242,242,242,.62); }
.lw-scaler .ldb-costs-inc span{ padding:5px 11px; border-radius:999px; font-size:11.5px; line-height:1.3; color:#F2F2F2; background:rgba(200,241,53,.08); border:1px solid rgba(200,241,53,.28); }
.lw-scaler .ldb-costs-list{ list-style:none; margin:0; padding:0; }
.lw-scaler .ldb-costs-list li{ display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:10px; margin:0; padding:10px 0; border-top:1px solid rgba(255,255,255,.07); }
.lw-scaler .ldb-costs-list li:first-child{ border-top:0; }
.lw-scaler .ldb-costs-list i{ width:22px; height:22px; border-radius:99px; display:grid; place-items:center; font-size:10px; color:#C8F135; background:rgba(200,241,53,.14); }
.lw-scaler .ldb-costs-list span{ font-family:'Anta','Inter',sans-serif; font-size:19px; line-height:1.2; color:#F2F2F2; }
.lw-scaler .ldb-costs-list em{ font-style:normal; font-size:11px; white-space:nowrap; color:rgba(242,242,242,.45); }
.lw-scaler .ldb-costs-pay,
.lw-scaler .ldb-costs-drv{ margin:12px 0 0; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); font-size:13px; line-height:1.5; color:rgba(242,242,242,.72); }
.lw-scaler .ldb-costs-pay span{ color:rgba(242,242,242,.72); }
.lw-scaler .ldb-costs-drv{ color:#F2F2F2; }

/* ---------------- phone (narrow design space) ----------------
 * The product at <=900 (topbar + bottom nav, charts stacked), <=720 (hero
 * buttons full width) and <=640 (pills shrink, tiles two-up, a lone 7th tile
 * spans the row). .dash-light pads 20px 16px there; .lw-main gives 16px 14px. */
.lw-scaler.is-hand .ldb{ padding:4px 2px 0; }
.lw-scaler.is-hand .ldb-hi{ font-size:28px; }
.lw-scaler.is-hand .ldb-actions{ width:100%; }
.lw-scaler.is-hand .ldb-actions .ldb-btn{ flex:1; }
.lw-scaler.is-hand .ldb-range{ gap:5px; margin-bottom:18px; }
.lw-scaler.is-hand .ldb-pill{ padding:6px 11px; font-size:11px; }
.lw-scaler.is-hand .ldb-cmp{ padding:14px; }
.lw-scaler.is-hand .ldb-cmp-icon{ width:40px; height:40px; }
.lw-scaler.is-hand .ldb-grid{ grid-template-columns:1fr 1fr; gap:8px; }
.lw-scaler.is-hand .ldb-grid .ldb-tile:last-child:nth-child(odd){ grid-column:1 / -1; }
.lw-scaler.is-hand .ldb-tile{ padding:14px; }
.lw-scaler.is-hand .ldb-num{ font-size:24px; }
.lw-scaler.is-hand .ldb-tile-ic{ top:12px; right:12px; font-size:12px; }
.lw-scaler.is-hand .ldb-charts{ grid-template-columns:1fr; }
.lw-scaler.is-hand .ldb-mail{ top:10px; left:10px; right:10px; width:auto; max-height:calc(100% - 82px); border-radius:14px; }
.lw-scaler.is-hand .ldb-mail-body{ padding:12px 12px 8px; }
.lw-scaler.is-hand .ldb-mail-card{ padding:16px 16px 12px; }
.lw-scaler.is-hand .ldb-mail-card h3{ font-size:17px; }
.lw-scaler.is-hand .ldb-mail-card p{ font-size:12px; line-height:1.5; margin-bottom:8px; }
.lw-scaler.is-hand .ldb-costs{ width:388px; margin-bottom:90px; padding:20px 18px 16px; }
.lw-scaler.is-hand .ldb-costs-list li{ grid-template-columns:24px 1fr; row-gap:2px; }
.lw-scaler.is-hand .ldb-costs-list em{ grid-column:2; }
.lw-scaler.is-hand .ldb-costs-list span{ font-size:16px; }
.lw-scaler.is-hand .ldb-costs-pay,
.lw-scaler.is-hand .ldb-costs-drv{ font-size:12px; }