/**
 * Tour — Users, "Your team" (walkthrough/screens/users.php). Prefix lus-.
 *
 * Rebuilt from pages/system-users.php (the .usr-light overrides are the real
 * look; the dark rules above them in that file are dead on this page) and the
 * Drivers tab's .dad-* block in handlers/41-drivers.php.
 *
 * ⚠️ Light app inside a dark site: every colour is explicit. Volt as TEXT on
 *    white is #4a6b00. Volt is otherwise a FILL (badges, pills, buttons) with
 *    #0a0a0a on top. The head card is the one dark thing, as in the product.
 * ⚠️ No transitions or animations anywhere: the engine drives all motion, and
 *    the product's own card hover-lift is reproduced as a still state.
 * ⚠️ Phone = .lw-scaler.is-hand (420 × 760). Never @media: the scaler always
 *    reports its design width.
 */

/* ---------------- guards ---------------- */

/* The engine hides by [hidden], a UA rule that any class display beats. */
.lw-scaler .lus[hidden], .lw-scaler .lus [hidden],
.lw-scaler .lus-modal[hidden], .lw-scaler .lus-modal [hidden],
.lw-scaler .lus-chip[hidden]{ display:none !important; }

/* A film, not a form: a real tap must not focus an input or raise a keyboard. */
.lw-scaler .lus, .lw-scaler .lus-modal{ pointer-events:none; -webkit-user-select:none; user-select:none; }

/* style.css forces 16px !important on inputs on touch screens (its iOS zoom
   guard, specificity 0,6,1). Nothing here takes focus, so it buys nothing and
   would make phones render a different form from the one QA checked. */
.lw-scaler .lus .lus-input.lus-input.lus-input.lus-input.lus-input.lus-input,
.lw-scaler .lus-modal .lus-minput.lus-minput.lus-minput.lus-minput.lus-minput.lus-minput{ font-size:14px !important; }
.lw-scaler .lus .lus-dinput.lus-dinput.lus-dinput.lus-dinput.lus-dinput.lus-dinput{ font-size:15px !important; }
.lw-scaler .lus .lus-dlink input[data-lw-dlink][data-lw-dlink][data-lw-dlink][data-lw-dlink][data-lw-dlink]{ font-size:13px !important; }

.lw-scaler .lus{ color:#0a0a0a; font-family:'Inter',system-ui,sans-serif; }
/* AND-nesting wrappers for state: no box of their own, so no stray margins. */
.lw-scaler .lus-and{ display:contents; }

/* ---------------- head card — dark, volt edge, as in the product ---------------- */
.lw-scaler .lus-head{
  background:#0a0a0a; border:1px solid #C8F135; border-radius:16px;
  padding:22px 26px; margin:0 0 24px;
  box-shadow:0 0 0 4px rgba(200,241,53,.10), 0 16px 36px rgba(15,18,22,.22);
}
.lw-scaler .lus-eyebrow{ margin:0 0 4px; font-family:'Inter',sans-serif; font-size:13px; line-height:1.4; letter-spacing:.06em; text-transform:uppercase; color:rgba(242,242,242,.55); }
.lw-scaler .lus-h1{ font-family:'Anta',sans-serif; font-weight:400; font-size:42px; line-height:1.05; letter-spacing:-.02em; color:#F2F2F2; margin:0; }
.lw-scaler .lus-h1 .a{ color:#C8F135; }
.lw-scaler .lus-sub{ margin:8px 0 0; font-size:14px; line-height:1.5; color:rgba(242,242,242,.62); }
.lw-scaler .lus-sub strong{ color:#F2F2F2; font-weight:500; }

/* ---------------- tab strip (admins only) ----------------
 * Each tab is one element with an "on" layer inside it, so a state change
 * never swaps the element the cursor is resting on. The 1px border is an
 * inset shadow so the on layer covers it cleanly. */
.lw-scaler .lus-tabs{ display:flex; gap:8px; margin:0 0 18px; flex-wrap:wrap; }
.lw-scaler .lus-tab{
  position:relative; overflow:hidden; display:inline-flex; align-items:center;
  padding:11px 17px; border-radius:999px; background:#ffffff; box-shadow:inset 0 0 0 1px #e3e6ea;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:700; line-height:1.3; color:#5a6068;
  text-decoration:none; transition:none; cursor:pointer;
}
.lw-scaler .lus-tab .lus-on{ position:absolute; inset:0; border-radius:inherit; background:#0a0a0a; }
.lw-scaler .lus-tab .lus-t{ position:relative; display:inline-flex; align-items:center; gap:8px; color:#5a6068; }
.lw-scaler .lus-tab .lus-t i{ color:inherit; font-size:13px; }
.lw-scaler .lus-tab .lus-on:not([hidden]) + .lus-t{ color:#C8F135; }
.lw-scaler .lus-tab.lw-hover{ box-shadow:inset 0 0 0 1px #C8F135; }

/* ---------------- office tab: one flex column, so hidden things take no space ---------------- */
.lw-scaler .lus-people{ display:flex; flex-direction:column; }
.lw-scaler .lus-drv{ display:flex; flex-direction:column; }

/* flash banners (after a reload; they do not animate in the product) */
.lw-scaler .lus-flash{
  display:flex; align-items:center; gap:10px; margin:0 0 18px; padding:14px 18px;
  background:rgba(200,241,53,.16); border:1px solid #C8F135; border-radius:10px;
  color:#0a0a0a; font-size:15px; line-height:1.45;
}
.lw-scaler .lus-flash i{ color:#4a6b00; flex:none; }
.lw-scaler .lus-flash span{ color:#0a0a0a; }

/* section titles — the count covers office users only */
.lw-scaler .lus-sec{
  font-family:'Anta',sans-serif; font-weight:400; font-size:14px; line-height:1.3;
  letter-spacing:.10em; text-transform:uppercase; color:#0a0a0a; margin:0 0 12px;
}
/* Every card carries 8px below it; a following section adds 24 to make 32. */
.lw-scaler .lus-sec.is-next{ margin-top:24px; }

/* ---------------- team + pending cards ---------------- */
.lw-scaler .lus-card{
  display:flex; align-items:center; gap:14px; margin:0 0 8px; padding:18px 20px;
  background:#ffffff; border:1px solid #e3e6ea; border-radius:14px;
  box-shadow:0 1px 2px rgba(15,18,22,.04); color:#0a0a0a;
}
/* The product's desktop hover lift, as a still: on while the cursor rests on
   one of the card's buttons. No transition — the engine owns motion. */
.lw-scaler.is-desk .lus-card:has(.lw-hover){ transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,18,22,.08); border-color:#C8F135; }
.lw-scaler .lus-av{
  flex:none; width:42px; height:42px; border-radius:50%; background:#C8F135; color:#0a0a0a;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Anta',sans-serif; font-size:15px; font-weight:700;
}
.lw-scaler .lus-body{ flex:1; min-width:0; }
.lw-scaler .lus-name{ font-size:15px; font-weight:600; line-height:1.45; color:#0a0a0a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lw-scaler .lus-meta{ font-size:12px; line-height:1.5; color:#5a6068; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lw-scaler .lus-type{ color:#4a6b00; font-weight:600; }
.lw-scaler .lus-you{ font-size:12px; font-weight:400; color:#6a6f78; margin-left:4px; }
.lw-scaler .lus-owner{
  display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:2px 7px; border-radius:999px;
  background:#C8F135; color:#0a0a0a; font-family:'Anta',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; line-height:1.4; vertical-align:1px;
}
.lw-scaler .lus-owner i{ font-size:8px; color:#0a0a0a; }

/* badges: markup is the raw lowercase role, CSS uppercases it (as live) */
.lw-scaler .lus-badge-slot{ flex:none; display:inline-flex; }
.lw-scaler .lus-badge{
  flex:none; display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px;
  font-family:'Inter',sans-serif; font-size:11px; line-height:1.4; letter-spacing:.08em; text-transform:uppercase;
}
.lw-scaler .lus-badge.is-admin{ background:#C8F135; color:#0a0a0a; border:0; font-weight:700; }
.lw-scaler .lus-badge.is-member{ background:#f3f4f6; color:#5a6068; border:1px solid #e3e6ea; font-weight:600; }
.lw-scaler .lus-badge.is-pending{ background:rgba(255,200,80,.25); color:#8a5500; border:1px solid rgba(255,200,80,.55); font-weight:700; }

/* icon-only action buttons */
.lw-scaler .lus-acts{ display:flex; gap:6px; flex:none; }
.lw-scaler .lus-act{
  position:relative; overflow:hidden; width:34px; height:34px; padding:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:#ffffff; border:1px solid #d6dae0; border-radius:8px; color:#5a6068;
  font-family:'Inter',sans-serif; font-size:12px; cursor:pointer;
}
.lw-scaler .lus-act i{ color:inherit; }
.lw-scaler .lus-act.lw-hover{ background:#f7f8fa; border-color:#b8bdc4; color:#0a0a0a; }
.lw-scaler .lus-act.is-danger.lw-hover{ background:rgba(255,92,53,.10); border-color:rgba(255,92,53,.40); color:#ff5c35; }

/* pending: amber-tinted card, amber avatar */
.lw-scaler .lus-card.is-pending{ background:rgba(255,200,80,.10); border-color:rgba(255,200,80,.55); }
.lw-scaler .lus-card.is-pending .lus-av{ background:rgba(255,200,80,.30); color:#b87c00; }

/* ---------------- invite form (admins) — white card, LEFT-aligned ---------------- */
.lw-scaler .lus-invite{
  max-width:720px; margin:24px 0 0; padding:24px 26px;
  background:#ffffff; border:1px solid #e3e6ea; border-radius:14px;
  box-shadow:0 1px 2px rgba(15,18,22,.04); color:#0a0a0a;
}
.lw-scaler .lus-invite-h2{ font-family:'Anta',sans-serif; font-weight:400; font-size:20px; line-height:1.1; letter-spacing:-.01em; margin:0 0 4px; color:#0a0a0a; }
.lw-scaler .lus-invite-sub{ margin:0 0 18px; font-size:14px; line-height:1.5; color:#5a6068; }
.lw-scaler .lus-invite-sub strong{ color:#0a0a0a; font-weight:500; }
.lw-scaler .lus-form{ max-width:640px; }
.lw-scaler .lus-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 14px; }
.lw-scaler .lus-field{ margin:0 0 18px; }
.lw-scaler .lus-label{
  display:block; margin:0 0 6px; font-family:'Anta',sans-serif; font-size:10px; line-height:1.4;
  letter-spacing:.10em; text-transform:uppercase; color:#5a6068;
}
.lw-scaler .lus-req{ color:#ff5c35; }
.lw-scaler .lus-opt{ font-family:'Inter',sans-serif; font-size:11px; font-weight:400; letter-spacing:0; text-transform:none; color:#8a909a; }
.lw-scaler .lus-input, .lw-scaler .lus-minput{
  display:block; width:100%; margin:0; padding:11px 14px; border-radius:8px;
  background:#ffffff; border:1px solid #d6dae0; color:#0a0a0a; box-shadow:none; outline:0;
  font-family:'Inter',sans-serif; font-size:14px; line-height:1.4;
  -webkit-appearance:none; appearance:none;
}
.lw-scaler .lus-input::placeholder, .lw-scaler .lus-minput::placeholder{ color:#8a909a; opacity:1; }
/* the focus ring, while the film types into the field */
.lw-scaler .lus-input.lw-caret, .lw-scaler .lus-minput.lw-caret{ border-color:#C8F135; box-shadow:0 0 0 3px rgba(200,241,53,.25); }

/* type pills — same on-layer build as the tabs */
.lw-scaler .lus-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.lw-scaler .lus-pill{
  position:relative; overflow:hidden; display:inline-flex; align-items:center;
  padding:10px 17px; border-radius:999px; background:#ffffff; box-shadow:inset 0 0 0 1px #d6dae0;
  font-family:'Anta',sans-serif; font-size:12px; line-height:1.2; letter-spacing:.02em; color:#5a6068; cursor:pointer;
}
.lw-scaler .lus-pill .lus-on{ position:absolute; inset:0; border-radius:inherit; background:#C8F135; }
.lw-scaler .lus-pill .lus-t{ position:relative; color:#5a6068; }
.lw-scaler .lus-pill .lus-on:not([hidden]) + .lus-t{ color:#0a0a0a; font-weight:600; }
.lw-scaler .lus-pill.lw-hover{ box-shadow:inset 0 0 0 1px #b8bdc4; }
.lw-scaler .lus-pill.lw-hover .lus-t{ color:#0a0a0a; }

.lw-scaler .lus-foot{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  border-top:1px solid #e3e6ea; padding-top:16px;
}
.lw-scaler .lus-foot p{ margin:0; flex:1; min-width:220px; font-size:12px; line-height:1.5; color:#5a6068; }
.lw-scaler .lus-send{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; margin:0; border:0; border-radius:8px; background:#C8F135; color:#0a0a0a;
  font-family:'Anta',sans-serif; font-size:14px; line-height:1.3; cursor:pointer;
  box-shadow:0 6px 16px rgba(200,241,53,.20);
}
.lw-scaler .lus-send i{ color:#0a0a0a; }
.lw-scaler .lus-send.lw-hover{ background:#d6ff52; }

/* members: a dashed note instead of the form */
.lw-scaler .lus-restricted{
  max-width:560px; margin:24px 0 0; padding:18px 20px;
  background:#ffffff; border:1px dashed #c8ccd1; border-radius:12px;
  box-shadow:0 1px 2px rgba(15,18,22,.04); color:#5a6068; font-size:14px; line-height:1.5;
}
.lw-scaler .lus-restricted i{ margin-right:8px; color:#6a6f78; }

/* ---------------- drivers tab ---------------- */
.lw-scaler .lus-dnote{
  margin:0 0 16px; padding:18px; background:#ffffff; border:1px solid #e3e6ea; border-radius:14px;
  box-shadow:0 1px 2px rgba(15,18,22,.04); color:#0a0a0a;
}
.lw-scaler .lus-dnote h3, .lw-scaler .lus-dadd h3{ font-family:'Anta',sans-serif; font-weight:400; font-size:17px; line-height:1.2; letter-spacing:-.01em; color:#0a0a0a; }
.lw-scaler .lus-dnote h3{ margin:0 0 6px; }
.lw-scaler .lus-dnote p{ margin:0 0 12px; font-size:14px; line-height:1.55; color:#5a6068; }
.lw-scaler .lus-dnote .lus-dwarn{ margin:10px 0 0; font-size:12.5px; line-height:1.5; color:#8a5a00; }
.lw-scaler .lus-dwarn i{ color:#8a5a00; }
.lw-scaler .lus-dref{
  display:inline-block; padding:5px 11px; border-radius:8px; background:#0a0a0a; color:#C8F135;
  font-family:'Anta',sans-serif; font-size:15px; line-height:1.3; letter-spacing:.04em;
}
.lw-scaler .lus-dlink{ display:flex; gap:8px; align-items:center; margin-top:10px; }
.lw-scaler .lus-dlink input{
  flex:1 1 auto; min-width:0; margin:0; padding:12px; border-radius:10px;
  border:1px solid #d8dde3; background:#f7f8fa; color:#0a0a0a; outline:0; box-shadow:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; line-height:1.3;
  -webkit-appearance:none; appearance:none;
}
.lw-scaler .lus-dcopy{
  position:relative; overflow:hidden; flex:0 0 auto; margin:0; padding:12px 16px; border:0; border-radius:10px;
  background:#C8F135; color:#0a0a0a; font-family:'Inter',sans-serif; font-size:14px; font-weight:800; line-height:1.3; cursor:pointer;
}
.lw-scaler .lus-dcopy.lw-hover{ background:#d6ff52; }

.lw-scaler .lus-dadd{
  margin:0 0 18px; padding:18px; background:#ffffff; border:1px solid #e3e6ea; border-radius:14px;
  box-shadow:0 1px 2px rgba(15,18,22,.04); color:#0a0a0a;
}
.lw-scaler .lus-dadd h3{ margin:0 0 4px; }
.lw-scaler .lus-dhint{ margin:0 0 14px; font-size:13.5px; line-height:1.5; color:#5a6068; }
.lw-scaler .lus-dform{ display:flex; gap:10px; flex-wrap:wrap; }
.lw-scaler .lus-dinput{
  flex:1 1 200px; min-width:0; margin:0; padding:13px; border-radius:10px;
  border:1px solid #d8dde3; background:#ffffff; color:#0a0a0a; outline:0; box-shadow:none;
  font-family:'Inter',sans-serif; font-size:15px; line-height:1.3;
  -webkit-appearance:none; appearance:none;
}
.lw-scaler .lus-dinput::placeholder{ color:#8a909a; opacity:1; }
.lw-scaler .lus-dinput.lw-caret{ border-color:#C8F135; box-shadow:0 0 0 3px rgba(200,241,53,.25); }
.lw-scaler .lus-dgo{
  position:relative; overflow:hidden; margin:0; padding:13px 20px; border:0; border-radius:10px;
  background:#C8F135; color:#0a0a0a; font-family:'Inter',sans-serif; font-size:15px; font-weight:800; line-height:1.3;
  white-space:nowrap; cursor:pointer;
}
.lw-scaler .lus-dgo i{ color:#0a0a0a; margin-right:3px; }
.lw-scaler .lus-dgo.lw-hover{ background:#d6ff52; }

.lw-scaler .lus-dempty{
  padding:40px 24px; text-align:center; background:#ffffff; border:1px solid #e3e6ea; border-radius:14px;
  box-shadow:0 1px 2px rgba(15,18,22,.04); color:#5a6068; font-size:15px; line-height:1.5;
}

/* one row per driver: a PALE avatar with ONE letter — the inverse of the office cards */
.lw-scaler .lus-drow{
  display:flex; align-items:center; gap:14px; margin:0 0 10px; padding:14px 16px;
  background:#ffffff; border:1px solid #e3e6ea; border-radius:14px; box-shadow:0 1px 2px rgba(15,18,22,.04); color:#0a0a0a;
}
.lw-scaler .lus-dav{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:#eef8cc; color:#4a6b00; font-family:'Anta',sans-serif; font-size:16px; font-weight:800;
}
.lw-scaler .lus-db{ flex:1 1 auto; min-width:0; }
.lw-scaler .lus-dname{ font-size:15.5px; font-weight:700; line-height:1.4; color:#0a0a0a; }
.lw-scaler .lus-dmeta{ margin-top:2px; font-size:13px; line-height:1.5; color:#5a6068; }
.lw-scaler .lus-dmeta code{
  font-family:'Anta',sans-serif; font-size:13px; letter-spacing:.03em; color:#4a6b00;
  background:none; border:0; padding:0; margin:0; border-radius:0;
}
.lw-scaler .lus-dstat .is-ok{ color:#4a6b00; }
.lw-scaler .lus-dstat .is-wait{ color:#8a5a00; }
.lw-scaler .lus-dacts{ flex:0 0 auto; display:flex; gap:8px; }
.lw-scaler .lus-dbtn{
  position:relative; overflow:hidden; margin:0; padding:9px 13px; border-radius:9px;
  border:1px solid #d8dde3; background:#ffffff; color:#0a0a0a;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:700; line-height:1.3; cursor:pointer;
}
.lw-scaler .lus-dbtn.is-danger{ color:#a33218; }
.lw-scaler .lus-dbtn.lw-hover{ border-color:#C8F135; }

/* ---------------- edit modal — light, over the stage, NO entrance animation ---------------- */
.lw-scaler .lus-modal{ position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; padding:20px; }
.lw-scaler .lus-modal-bg{ position:absolute; inset:0; background:rgba(15,18,22,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.lw-scaler .lus-panel{
  position:relative; width:100%; max-width:540px; max-height:100%; display:flex; flex-direction:column; overflow:hidden;
  background:#ffffff; border:1px solid #e3e6ea; border-radius:14px; box-shadow:0 30px 70px rgba(15,18,22,.30);
  color:#0a0a0a; font-family:'Inter',sans-serif;
}
.lw-scaler .lus-mhead{ position:relative; padding:22px 24px 14px; border-bottom:1px solid #e3e6ea; }
.lw-scaler .lus-mhead h3{ margin:0 0 6px; font-family:'Anta',sans-serif; font-weight:400; font-size:19px; line-height:1.2; letter-spacing:-.01em; color:#0a0a0a; }
.lw-scaler .lus-mhead p{ margin:0; font-size:13px; line-height:1.5; color:#5a6068; }
.lw-scaler .lus-mclose{
  position:absolute; top:14px; right:14px; width:32px; height:32px; margin:0; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:#ffffff; border:1px solid #d6dae0; border-radius:8px; color:#5a6068; font-size:12px;
}
.lw-scaler .lus-mclose i{ color:#5a6068; }
.lw-scaler .lus-mbody{ padding:18px 24px; overflow-y:auto; }
.lw-scaler .lus-mfield{ margin:0 0 14px; }
.lw-scaler .lus-mgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 14px; }
.lw-scaler .lus-minput.is-disabled{ opacity:.6; }
.lw-scaler .lus-helper{ display:block; margin-top:6px; font-size:11px; line-height:1.45; color:#6a6f78; }
.lw-scaler .lus-mfoot{ display:flex; gap:10px; justify-content:flex-end; padding:14px 24px; border-top:1px solid #e3e6ea; }
.lw-scaler .lus-mghost, .lw-scaler .lus-mprimary{
  position:relative; overflow:hidden; margin:0; border-radius:8px; cursor:pointer;
  font-family:'Anta',sans-serif; font-size:13px; line-height:1.3;
}
.lw-scaler .lus-mghost{ padding:10px 16px; background:transparent; border:1px solid #d6dae0; color:#5a6068; }
.lw-scaler .lus-mghost.lw-hover{ background:#f7f8fa; color:#0a0a0a; }
.lw-scaler .lus-mprimary{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border:0;
  background:#C8F135; color:#0a0a0a; box-shadow:0 6px 16px rgba(200,241,53,.20);
}
.lw-scaler .lus-mprimary i{ color:#0a0a0a; }
.lw-scaler .lus-mprimary.lw-hover{ background:#d6ff52; }

/* =====================================================================
 * PHONE (narrow design space, 420 × 760) — the product's own narrow rules
 * ===================================================================== */
/* Only what the product itself changes below 900px. Everything else (card and
   form padding, the head card, the modal) is the same size on a phone. */
/* clamp(28px,3.4vw,42px) bottoms out on a phone */
.lw-scaler.is-hand .lus-h1{ font-size:28px; }
/* <=600px: cards wrap. The badge (order 3) and the actions (margin-left:auto)
   drop to a second line, badge AFTER the buttons — the product's own order. */
.lw-scaler.is-hand .lus-card{ flex-wrap:wrap; }
.lw-scaler.is-hand .lus-body{ flex:1 1 calc(100% - 56px); }
.lw-scaler.is-hand .lus-card > .lus-badge,
.lw-scaler.is-hand .lus-card > .lus-badge-slot{ order:3; }
.lw-scaler.is-hand .lus-acts{ margin-left:auto; }
/* <=540px: the invite grid stacks; <=480px: so does the modal's */
.lw-scaler.is-hand .lus-grid2{ grid-template-columns:1fr; }
.lw-scaler.is-hand .lus-mgrid{ grid-template-columns:1fr; }
/* ⚠️ Deliberate deviation: the live .dad-row-item has no narrow rule and
   squeezes the name into ~75px beside two buttons at 420px. Here the buttons
   take the second line, the way the office cards do. Flagged for a product fix. */
.lw-scaler.is-hand .lus-drow{ flex-wrap:wrap; }
.lw-scaler.is-hand .lus-db{ flex:1 1 calc(100% - 54px); }
.lw-scaler.is-hand .lus-dacts{ margin-left:auto; }