/**
 * Tour — Compliance (walkthrough/screens/compliance.php). Prefix lcp-.
 *
 * Rebuilt from pages/system-compliance.php. Its .cmp-light overrides are the
 * real look (the dark rules above them in that file are dead on this page);
 * where the two fight, the value here is the one that wins in the product.
 *
 * ⚠️ Light app inside a dark site: every colour is explicit. style.css gives
 *    every h1–h6 a margin and every <p> var(--muted) (near-white) — both are
 *    reset below, or a white card reads blank. Volt as TEXT on white is
 *    #4a6b00; volt is otherwise a fill with #0a0a0a on top. The head card is
 *    the one dark thing, as in the product. The More sheet, the attention dot
 *    and the bell are the shell's (laydn-tour.css, SHELL PIECES).
 * ⚠️ No transitions or animations anywhere. The engine drives all motion; the
 *    product's spinning upload icon is drawn still.
 * ⚠️ Phone = .lw-scaler.is-hand (420 × 760), the product's own <700px rules.
 *    Never @media: the scaler always reports its design width.
 */

/* ---------------- guards ---------------- */
.lw-scaler .lcp[hidden], .lw-scaler .lcp [hidden]{ display:none !important; }
/* A film, not a form: a real tap must not select text or raise a keyboard. */
.lw-scaler .lcp{ pointer-events:none; -webkit-user-select:none; user-select:none; }
.lw-scaler .lcp *{ transition:none !important; animation:none !important; }

.lw-scaler .lcp{ color:#0a0a0a; font-family:'Inter',system-ui,sans-serif; font-size:13px; line-height:1.7; }
.lw-scaler .lcp p{ color:#5a6068; }

/* ---------------- back button (.laydn-back-btn, light) ---------------- */
.lw-scaler .lcp-back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
  padding:9px 14px 9px 12px; border-radius:9px; background:#ffffff; border:1px solid #e3e6ea;
  box-shadow:0 1px 2px rgba(15,18,22,.04);
  font-family:'Anta',sans-serif; font-size:12px; line-height:1; letter-spacing:.02em; color:#5a6068;
}
.lw-scaler .lcp-back i{ color:#4a6b00; font-size:11px; }

/* ---------------- head card — dark, volt edge (.cmp-headcard) ---------------- */
.lw-scaler .lcp-head{
  background:#0a0a0a; border:1px solid #C8F135; border-radius:16px; padding:24px 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 .lcp .lcp-h1{ font-family:'Anta',sans-serif; font-weight:400; font-size:28px; line-height:1.05; letter-spacing:-.015em; color:#F2F2F2; margin:0 0 8px; }
.lw-scaler .lcp .lcp-lead{ font-size:14px; line-height:1.5; color:rgba(242,242,242,.62); margin:0; max-width:640px; }
.lw-scaler .lcp-spill{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:6px 12px; border-radius:99px;
  border:1px solid transparent; font-family:'Anta',sans-serif; font-size:11px; line-height:1.5;
  letter-spacing:.03em; text-transform:uppercase;
}
.lw-scaler .lcp-spill i{ font-size:10px; }
/* on the dark card: amber while incomplete, volt once compliant, fire when expired */
.lw-scaler .lcp-spill.is-incomplete{ background:rgba(255,200,80,.10); color:#ffc450; border-color:rgba(255,200,80,.35); }
.lw-scaler .lcp-spill.is-compliant{ background:rgba(200,241,53,.12); color:#C8F135; border-color:rgba(200,241,53,.40); }
.lw-scaler .lcp-spill.is-expired{ background:rgba(255,92,53,.12); color:#ff5c35; border-color:rgba(255,92,53,.40); }

/* ---------------- stepper — black circles, volt icons ---------------- */
.lw-scaler .lcp-stepper{
  display:grid; gap:8px; margin:24px 0 28px; padding:6px;
  background:#ffffff; border:1px solid #e3e6ea; border-radius:12px; box-shadow:0 1px 2px rgba(15,18,22,.04);
}
.lw-scaler .lcp-stepper.is-n5{ grid-template-columns:repeat(5,1fr); }
.lw-scaler .lcp-stepper.is-n6{ grid-template-columns:repeat(6,1fr); }
.lw-scaler .lcp-step{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; border-radius:8px; text-align:center;
  font-family:'Anta',sans-serif; font-size:11px; line-height:1.2; letter-spacing:.02em; color:#6a6f78;
}
.lw-scaler .lcp-step-ic{
  position:relative; width:32px; height:32px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center; background:#0a0a0a; border:1px solid #0a0a0a;
}
.lw-scaler .lcp-step-ic i{ font-size:13px; color:#C8F135; }
.lw-scaler .lcp-step.is-current{ background:rgba(200,241,53,.16); color:#4a6b00; }
.lw-scaler .lcp-step.is-current .lcp-step-ic{ box-shadow:0 0 0 3px rgba(200,241,53,.40); }
.lw-scaler .lcp-step.is-done{ color:#4a6b00; }
.lw-scaler .lcp-step.is-done .lcp-step-ic::after{
  content:'\2713'; position:absolute; bottom:-3px; right:-3px; width:15px; height:15px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:#C8F135; color:#0a0a0a; border:2px solid #ffffff; font-size:9px; font-weight:900; line-height:1;
}

/* ---------------- attention banner (amber: due · fire: lapsed) ---------------- */
.lw-scaler .lcp-att{ margin-bottom:22px; padding:20px 22px; border:1px solid; border-radius:12px; }
.lw-scaler .lcp-att.is-soon{ background:rgba(255,200,80,.16); border-color:rgba(255,200,80,.65); }
.lw-scaler .lcp-att.is-expired{ background:rgba(255,92,53,.10); border-color:rgba(255,92,53,.55); }
.lw-scaler .lcp-att-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
.lw-scaler .lcp-att-head > i{ font-size:22px; margin-top:2px; flex-shrink:0; color:#b87c00; }
.lw-scaler .lcp-att.is-expired .lcp-att-head > i{ color:#ff5c35; }
.lw-scaler .lcp .lcp-att-h3{ margin:0 0 4px; font-family:'Anta',sans-serif; font-weight:400; font-size:17px; line-height:1.05; letter-spacing:-.01em; color:#0a0a0a; }
.lw-scaler .lcp .lcp-att-p{ margin:0; font-size:13px; line-height:1.45; color:#5a6068; }
.lw-scaler .lcp-att-items{ display:flex; flex-direction:column; gap:8px; }
.lw-scaler .lcp-att-item{
  display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:9px;
  background:#ffffff; border:1px solid #e3e6ea; box-shadow:0 1px 2px rgba(15,18,22,.04);
}
.lw-scaler .lcp-att-item.is-expired{ border-color:rgba(255,92,53,.40); }
.lw-scaler .lcp-att-ic{ width:38px; height:38px; border-radius:9px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,200,80,.16); }
.lw-scaler .lcp-att-ic i{ font-size:14px; color:#b87c00; }
.lw-scaler .lcp-att-item.is-expired .lcp-att-ic{ background:rgba(255,92,53,.14); }
.lw-scaler .lcp-att-item.is-expired .lcp-att-ic i{ color:#ff5c35; }
.lw-scaler .lcp-att-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lw-scaler .lcp-att-meta strong{ font-family:'Anta',sans-serif; font-size:14px; line-height:1.2; color:#0a0a0a; }
.lw-scaler .lcp-att-meta span{ font-size:12px; font-weight:500; color:#b87c00; }
.lw-scaler .lcp-att-item.is-expired .lcp-att-meta span{ color:#ff5c35; }
.lw-scaler .lcp-att-cta{
  position:relative; overflow:hidden; flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:7px; background:#C8F135; color:#0a0a0a;
  font-family:'Anta',sans-serif; font-size:12px; font-weight:600; line-height:1.5;
}
.lw-scaler .lcp-att-item.is-expired .lcp-att-cta{ background:#ff5c35; color:#ffffff; }

/* ---------------- flash ---------------- */
.lw-scaler .lcp-flash{
  display:flex; align-items:center; gap:10px; margin-bottom:22px; padding:12px 16px; border-radius:9px;
  background:rgba(200,241,53,.18); border:1px solid #C8F135; color:#4a6b00; font-size:13px; line-height:1.7;
}
.lw-scaler .lcp-flash i{ font-size:14px; }

/* ---------------- the step card ---------------- */
.lw-scaler .lcp-card{
  background:#ffffff; border:1px solid #e3e6ea; border-radius:14px; padding:32px 30px; margin-bottom:24px;
  box-shadow:0 1px 2px rgba(15,18,22,.04); color:#0a0a0a;
}
.lw-scaler .lcp .lcp-h2{ margin:0 0 6px; font-family:'Anta',sans-serif; font-weight:400; font-size:22px; line-height:1.05; letter-spacing:-.01em; color:#0a0a0a; }
/* Step 3 renders without the product's sub-line: keep the same air under the title. */
.lw-scaler .lcp .lcp-h2.is-solo{ margin-bottom:24px; }
.lw-scaler .lcp .lcp-sub{ margin:0 0 26px; font-size:13px; line-height:1.5; color:#5a6068; }

/* ---------------- rows, labels, fields ---------------- */
.lw-scaler .lcp-row{ margin-bottom:18px; }
.lw-scaler .lcp-lab{
  display:block; margin-bottom:8px; font-family:'Anta',sans-serif; font-size:11px; line-height:1.7;
  letter-spacing:.06em; text-transform:uppercase; color:#5a6068;
}
.lw-scaler .lcp-req{ color:#ff5c35; font-weight:700; }
.lw-scaler .lcp-box{
  position:relative; display:flex; align-items:center; width:100%; padding:12px 14px;
  background:#ffffff; border:1px solid #e3e6ea; border-radius:8px;
}
.lw-scaler .lcp-box.is-date{ min-height:44px; }
.lw-scaler .lcp-in{
  position:relative; z-index:1; flex:1; min-width:0; min-height:17px; display:flex; align-items:center;
  overflow:hidden; white-space:nowrap; font-family:'Inter',sans-serif; font-size:14px; line-height:17px; color:#0a0a0a;
}
.lw-scaler .lcp-in:empty::before{ content:attr(data-ph); color:#8a909a; }
/* Postcode, O licence and VAT number: text-transform:uppercase, as the page does. */
.lw-scaler .lcp-in.is-upper{ text-transform:uppercase; }
/* a still caret while the film types (the engine adds .lw-caret, then removes it) */
.lw-scaler .lcp-in.lw-caret::after{ content:''; flex:none; width:1.5px; height:16px; margin-left:1px; background:#0a0a0a; }
.lw-scaler .lcp-in.lw-caret:empty::after{ order:-1; margin:0 1px 0 0; }
/* the focus edge: volt border, faint volt wash */
.lw-scaler .lcp-ring{ position:absolute; inset:-1px; z-index:0; border:1px solid #C8F135; border-radius:8px; background:rgba(200,241,53,.05); pointer-events:none; }
/* the date field's own calendar glyph, as the browser draws it */
.lw-scaler .lcp-cal{ position:relative; z-index:1; flex:none; margin-left:10px; font-size:14px; color:#0a0a0a; }
.lw-scaler .lcp-hint{ display:block; margin-top:6px; font-size:12px; line-height:1.45; color:#6a6f78; }

.lw-scaler .lcp-cols{ display:grid; gap:14px; }
.lw-scaler .lcp-cols.is-2{ grid-template-columns:1fr 1fr; }
.lw-scaler .lcp-cols.is-3{ grid-template-columns:1fr 1fr 1fr; }
.lw-scaler .lcp-cols > .lcp-row{ min-width:0; }

/* ---------------- pills + pill cards ----------------
 * The product's pills are <label>s inside .cmp-row, so its label rule wins:
 * Anta 11px, uppercase, .06em, with an 8px margin under each. The hooked
 * element never changes. Its state is an empty marker (.lcp-pill-on) and
 * :has() paints the product's .is-active on the pill itself: volt fill, ink
 * text, weight 600 — one label, reflowing exactly as the product's does. The
 * 1px border is an inset shadow (padding +1px to match), so the pill can clip
 * the engine's press ripple without losing its edge. */
.lw-scaler .lcp-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.lw-scaler .lcp-pill{
  position:relative; overflow:hidden; display:block; margin-bottom:8px; padding:11px 17px; border-radius:8px;
  background:#ffffff; box-shadow:inset 0 0 0 1px #e3e6ea; color:#5a6068;
  font-family:'Anta',sans-serif; font-size:11px; line-height:1.7; letter-spacing:.06em; text-transform:uppercase;
}
.lw-scaler .lcp-pill.is-card{ flex:1 1 220px; min-width:220px; padding:15px 17px; text-align:left; }
.lw-scaler [data-lw-cmp-fr].lcp-pill.is-card{ flex:1 1 280px; }
.lw-scaler .lcp-pill-t{ display:block; }
.lw-scaler .lcp-pill-meta{ display:block; margin-top:3px; font-size:11px; opacity:.65; }
.lw-scaler .lcp-pill-on{ display:none; }
.lw-scaler .lcp-pill.lw-hover{ background:#f7f8fa; color:#0a0a0a; box-shadow:inset 0 0 0 1px #b8bdc4; }
.lw-scaler .lcp-pill:has(> .lcp-pill-on:not([hidden])){ background:#C8F135; box-shadow:inset 0 0 0 1px #C8F135; color:#0a0a0a; font-weight:600; }

/* ---------------- switches ---------------- */
.lw-scaler .lcp-swrow{ display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:14px 16px; background:#ffffff; border:1px solid #e3e6ea; border-radius:9px; }
.lw-scaler .lcp-swlab{ display:flex; align-items:center; gap:12px; flex:1; font-family:'Inter',sans-serif; font-size:14px; line-height:1.7; color:#0a0a0a; }
.lw-scaler .lcp-sw{ position:relative; overflow:hidden; width:40px; height:22px; flex-shrink:0; border-radius:99px; background:#d8dce1; }
.lw-scaler .lcp-sw-knob{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#ffffff; }
.lw-scaler .lcp-sw-on{ position:absolute; inset:0; z-index:1; border-radius:99px; background:#C8F135; }
.lw-scaler .lcp-sw-on .lcp-sw-knob{ left:20px; }

/* ---------------- the teal info note ---------------- */
.lw-scaler .lcp-info{
  display:flex; gap:12px; margin-bottom:18px; padding:14px 16px; border-radius:9px;
  background:rgba(0,201,167,.10); border:1px solid rgba(0,201,167,.40); color:#0a0a0a; font-size:13px; line-height:1.55;
}
.lw-scaler .lcp-info.is-sm{ font-size:12px; }
.lw-scaler .lcp-info i{ flex-shrink:0; margin-top:1px; font-size:16px; color:#00C9A7; }

/* ---------------- file drop ----------------
 * ⚠️ On the live (light) page a too-big file keeps the VOLT border: the
 *    page's `.cmp-light .cmp-file-drop.has-file` (0,3,0) beats its own
 *    `.cmp-file-drop.is-toobig` red border (0,2,0). Only the file name turns
 *    red, then the error line appears on Save. Mirrored here. If the product
 *    is fixed, add: .lw-scaler .lcp-drop-in.is-toobig{ border-color:#ff5c35; } */
.lw-scaler .lcp-drop{ position:relative; overflow:hidden; border-radius:10px; }
.lw-scaler .lcp-drop-in{
  position:relative; min-height:120px; padding:22px 18px; border-radius:10px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#f7f8fa; border:2px dashed #c8ccd1;
}
.lw-scaler .lcp-drop-in.is-file{ border-style:solid; border-color:#C8F135; background:rgba(200,241,53,.10); }
.lw-scaler .lcp-drop-ic{ width:44px; height:44px; margin-bottom:10px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#ffffff; border:1px solid #e3e6ea; }
.lw-scaler .lcp-drop-ic i{ font-size:18px; color:#5a6068; }
.lw-scaler .lcp-drop-in.is-file .lcp-drop-ic{ background:#C8F135; border-color:#C8F135; }
.lw-scaler .lcp-drop-in.is-file .lcp-drop-ic i{ color:#0a0a0a; }
.lw-scaler .lcp-drop-t{ display:block; max-width:100%; margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'Anta',sans-serif; font-size:13px; line-height:1.7; color:#0a0a0a; }
.lw-scaler .lcp-drop-in.is-toobig .lcp-drop-t{ color:#ff5c35; }
.lw-scaler .lcp-drop-h{ display:block; font-size:12px; line-height:1.7; color:#5a6068; }
.lw-scaler .lcp-drop.lw-hover .lcp-drop-in:not(.is-file){ border-color:#C8F135; background:rgba(200,241,53,.06); }

/* ---------------- a stored document row (.cmp-doc-existing) ---------------- */
.lw-scaler .lcp-doc{ display:flex; align-items:center; gap:12px; margin-bottom:12px; padding:12px 14px; border-radius:9px; background:rgba(200,241,53,.10); border:1px solid #C8F135; }
.lw-scaler .lcp-doc-ic{ width:36px; height:36px; flex-shrink:0; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:#C8F135; }
.lw-scaler .lcp-doc-ic i{ font-size:14px; color:#0a0a0a; }
.lw-scaler .lcp-doc-info{ flex:1; min-width:0; }
.lw-scaler .lcp-doc-name{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-family:'Anta',sans-serif; font-size:13px; line-height:1.7; color:#0a0a0a; }
.lw-scaler .lcp-doc-meta{ margin-top:2px; font-size:11px; line-height:1.7; color:#5a6068; }
.lw-scaler .lcp-doc-view{ flex-shrink:0; padding:6px 10px; border-radius:6px; border:1px solid #C8F135; font-size:12px; line-height:1.7; color:#4a6b00; }
/* lapsed: fire wash; the page's light rule keeps the icon black and View volt */
.lw-scaler .lcp-doc.is-expired{ background:rgba(255,92,53,.08); border-color:rgba(255,92,53,.50); }
.lw-scaler .lcp-doc.is-expired .lcp-doc-ic{ background:rgba(255,92,53,.20); }
/* "Not VAT registered": the neutral grey row */
.lw-scaler .lcp-doc.is-empty{ background:#f7f8fa; border-color:#e3e6ea; }
.lw-scaler .lcp-doc.is-empty .lcp-doc-ic{ background:#e9ebef; }
.lw-scaler .lcp-doc.is-empty .lcp-doc-ic i{ color:#6a6f78; }
.lw-scaler .lcp-doc.is-empty .lcp-doc-view{ color:#5a6068; border-color:#d6dae0; }

/* ---------------- Step 5 sections ---------------- */
.lw-scaler .lcp-sec{ margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid #e3e6ea; }
.lw-scaler .lcp-sec-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.lw-scaler .lcp .lcp-h3{ margin:0; font-family:'Anta',sans-serif; font-weight:400; font-size:16px; line-height:1.05; letter-spacing:-.01em; color:#0a0a0a; }
.lw-scaler .lcp-badge{ padding:3px 9px; border-radius:99px; border:1px solid; font-family:'Anta',sans-serif; font-size:10px; line-height:1.7; letter-spacing:.04em; text-transform:uppercase; }
.lw-scaler .lcp-badge.is-req{ background:rgba(255,92,53,.12); color:#ff5c35; border-color:rgba(255,92,53,.50); }
.lw-scaler .lcp-badge.is-opt{ background:#f3f4f6; color:#5a6068; border-color:#e3e6ea; }
.lw-scaler .lcp .lcp-sec-sub{ margin:0 0 16px; font-size:12px; line-height:1.5; color:#5a6068; }

/* ---------------- actions ---------------- */
.lw-scaler .lcp-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:26px; padding-top:22px; border-top:1px solid #e3e6ea; }
.lw-scaler .lcp-btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:9px;
  font-family:'Anta',sans-serif; font-size:13px; line-height:1.3; letter-spacing:.02em;
}
.lw-scaler .lcp-btn.is-volt{ background:#C8F135; color:#0a0a0a; }
.lw-scaler .lcp-btn.is-volt.lw-hover{ filter:brightness(1.05); }
.lw-scaler .lcp-btn.is-ghost{ background:#ffffff; color:#5a6068; border:1px solid #e3e6ea; }
.lw-scaler .lcp-btn-t{ display:inline-flex; align-items:center; gap:8px; }
/* the product greys the busy button to opacity .65 — on a white card, a 35% white veil */
.lw-scaler .lcp-btn-veil{ position:absolute; inset:0; border-radius:inherit; background:rgba(255,255,255,.35); }
.lw-scaler .lcp .lcp-note{ flex-basis:100%; margin:10px 0 0; font-size:13px; line-height:1.7; color:#5a6068; }
.lw-scaler .lcp .lcp-note.is-error{ color:#a33218; font-weight:600; }

/* =====================================================================
 * PHONE — the product's own rules below 700 / 640 / 600px
 * ===================================================================== */
.lw-scaler.is-hand .lcp-back{ font-size:11px; padding:8px 12px 8px 11px; margin-bottom:14px; }
.lw-scaler.is-hand .lcp-stepper{ gap:2px; padding:4px; }
.lw-scaler.is-hand .lcp-step{ padding:8px 2px; gap:4px; font-size:9px; }
.lw-scaler.is-hand .lcp-step-ic{ width:26px; height:26px; }
.lw-scaler.is-hand .lcp-step-ic i{ font-size:10px; }
.lw-scaler.is-hand .lcp-card{ padding:22px 18px; border-radius:12px; }
.lw-scaler.is-hand .lcp-cols.is-2, .lw-scaler.is-hand .lcp-cols.is-3{ grid-template-columns:1fr; }
.lw-scaler.is-hand .lcp-att{ padding:16px; }
.lw-scaler.is-hand .lcp-att-item{ gap:10px; padding:10px 12px; }