/**
 * Tour — "Rate this job" (walkthrough/screens/rate.php). Prefix lrt-.
 *
 * Rebuilt from pages/system-rate.php. The real page is LIGHT from the start and
 * sits in ONE centred 760px column: a slim form floating in a wide #f7f8fa
 * field. Don't stretch it.
 *
 * ⚠️ Every colour is explicit. The site's body is var(--white), its `p` is muted
 *    white and its h1-h6 carry their own margins; inheriting any of that into a
 *    white card is how a screen renders invisible.
 * ⚠️ Volt as TEXT on white is #4a6b00. Volt #C8F135 here is only ever a FILL:
 *    the stars, the button, the Top Rated pill, borders.
 * ⚠️ No transitions or animations. The product's .1s/.12s colour transitions
 *    are dropped because the engine drives every change.
 * ⚠️ No @media: the scaler always reports its design width. Phone rules key off
 *    .lw-scaler.is-hand at the bottom.
 */

/* The engine hides by [hidden], and the UA's [hidden]{display:none} loses to ANY
   author display rule (FA7 icons are inline-block, the flash is flex...). */
.lw-scaler .lrt-light [hidden],
.lw-scaler .lrt-note[hidden],
.lw-scaler .lrt-note [hidden]{ display:none !important; }

.lw-scaler .lrt-light{ background:#f7f8fa; color:#1a1a1a; padding:8px 0 0; }
.lw-scaler .lrt-wrap{ max-width:760px; margin:0 auto; }

/* ---------- hero: dark, volt-bordered, as the product ---------- */
.lw-scaler .lrt-head{
	position:relative; overflow:hidden; padding:22px 26px; margin-bottom: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 .lrt-kicker,
.lw-scaler .lrt-h1{ position:relative; z-index:1; }
.lw-scaler .lrt-kicker{ font-family:'Anta',sans-serif; font-size:13px; line-height:1.5; letter-spacing:.06em; text-transform:uppercase; color:rgba(242,242,242,.55); margin:0 0 4px; }
.lw-scaler .lrt-h1{ font-family:'Anta',sans-serif; font-weight:400; font-size:36px; line-height:1.05; letter-spacing:-.02em; color:#F2F2F2; margin:0; }
.lw-scaler .lrt-accent{ color:#C8F135; }
.lw-scaler .lrt-head-glyph{
	position:absolute; z-index:0; top:50%; right:26px; transform:translateY(-50%) rotate(-8deg);
	font-size:140px; line-height:1; color:#C8F135; opacity:.16; pointer-events:none;
}

/* ---------- flash (after the submit redirect) ---------- */
.lw-scaler .lrt-flash{
	display:flex; align-items:center; gap:10px; border-radius:10px; padding:12px 16px; margin-bottom:18px;
	font-size:14px; line-height:1.5; background:rgba(200,241,53,.16); border:1px solid #C8F135; color:#0a0a0a;
}
.lw-scaler .lrt-flash i{ color:#4a6b00; }

/* ---------- cards ---------- */
.lw-scaler .lrt-card{
	background:#ffffff; border:1px solid #e3e6ea; border-radius:16px;
	box-shadow:0 1px 2px rgba(15,18,22,.04); padding:22px 24px; margin-bottom:18px; color:#0a0a0a;
}

/* job summary */
.lw-scaler .lrt-job{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lw-scaler .lrt-route{ font-family:'Anta',sans-serif; font-size:17px; line-height:1.35; color:#0a0a0a; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.lw-scaler .lrt-route span{ color:#0a0a0a; }
.lw-scaler .lrt-route i{ color:#b0b6be; font-size:12px; }
.lw-scaler .lrt-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; line-height:1.5; color:#6a6f78; margin-top:4px; }
.lw-scaler .lrt-meta span,
.lw-scaler .lrt-meta i{ color:#6a6f78; }
.lw-scaler .lrt-meta strong{ color:#4a6b00; font-family:'Anta',sans-serif; font-weight:700; }
.lw-scaler .lrt-cp{ margin-left:auto; text-align:right; }
.lw-scaler .lrt-who{ font-family:'Anta',sans-serif; font-size:14px; line-height:1.4; color:#0a0a0a; }
.lw-scaler .lrt-role{ font-size:11px; line-height:1.5; color:#8a909a; text-transform:uppercase; letter-spacing:.05em; }

/* reputation pills. Sentence case here (the board's .fl-rep is uppercase: don't unify).
   margin-top:6px is the product's, so inside the thanks sentence the pill sits a
   few px low — as it does for real. */
.lw-scaler .lrt-badge{
	display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:3px 9px; border-radius:99px;
	font-family:'Anta',sans-serif; font-size:11px; line-height:1.5; letter-spacing:.03em; white-space:nowrap;
}
.lw-scaler .lrt-badge.is-top{ background:#C8F135; color:#0a0a0a; }
.lw-scaler .lrt-badge.is-top i{ color:#0a0a0a; }
.lw-scaler .lrt-badge.is-trusted{ background:rgba(200,241,53,.16); color:#4a6b00; border:1px solid rgba(200,241,53,.5); }
.lw-scaler .lrt-badge.is-trusted i{ color:#4a6b00; }

/* heading + lead (both cards) */
.lw-scaler .lrt-h2{ font-family:'Anta',sans-serif; font-weight:400; font-size:18px; line-height:1.05; letter-spacing:-.01em; color:#0a0a0a; margin:0 0 4px; }
.lw-scaler .lrt-lead{ font-size:13.5px; line-height:1.5; color:#5a6068; margin:0 0 18px; }
.lw-scaler .lrt-lead strong{ color:#5a6068; font-weight:700; }

/* ---------- stars: DOM 5 → 1, painted 1 → 5 ---------- */
.lw-scaler .lrt-stars{ display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:8px; }
.lw-scaler .lrt-star{ display:inline-flex; font-size:38px; line-height:1; cursor:pointer; border-radius:4px; }
.lw-scaler .lrt-star i{ line-height:1; }
.lw-scaler .lrt-star i.is-off{ color:#d6dae0; }
.lw-scaler .lrt-star i.is-on{ color:#C8F135; }

/* ---------- quick-tags ---------- */
.lw-scaler .lrt-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.lw-scaler .lrt-tag{ position:relative; display:inline-flex; border-radius:99px; overflow:hidden; }
.lw-scaler .lrt-pill{
	display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:99px;
	background:#ffffff; border:1px solid #d6dae0; color:#5a6068;
	font-family:'Anta',sans-serif; font-size:12.5px; line-height:1.5; white-space:nowrap; cursor:pointer;
}
.lw-scaler .lrt-tag.lw-hover .lrt-pill{ color:#0a0a0a; border-color:#b8bdc4; }
.lw-scaler .lrt-pill.is-on,
.lw-scaler .lrt-tag.lw-hover .lrt-pill.is-on{ background:rgba(200,241,53,.14); border-color:#C8F135; color:#0a0a0a; }

/* ---------- submit + confidentiality line ---------- */
.lw-scaler .lrt-foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; }
.lw-scaler .lrt-submit{
	position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px;
	background:#C8F135; color:#0a0a0a; border:0; border-radius:9px; padding:12px 24px;
	font-family:'Anta',sans-serif; font-weight:600; font-size:14px; line-height:normal; cursor:pointer;
	box-shadow:0 6px 14px rgba(200,241,53,.22);
}
.lw-scaler .lrt-submit i{ color:#0a0a0a; }
.lw-scaler .lrt-submit.lw-hover{ background:#d6ff52; }
.lw-scaler .lrt-blind{ font-size:12px; line-height:1.5; color:#8a909a; border-radius:8px; }
.lw-scaler .lrt-blind strong{ color:#8a909a; font-weight:700; }
.lw-scaler .lrt-blind i{ color:#4a6b00; border-radius:99px; }

/* ---------- thanks card ---------- */
.lw-scaler .lrt-given{ display:flex; align-items:center; gap:10px; }
.lw-scaler .lrt-shown{ display:inline-flex; }
.lw-scaler .lrt-shown i{ color:#C8F135; font-size:18px; line-height:1; }
.lw-scaler .lrt-shown i.is-empty{ color:#d6dae0; }
.lw-scaler .lrt-given-k{ font-family:'Anta',sans-serif; font-size:13px; line-height:1.5; color:#5a6068; }
.lw-scaler .lrt-readtags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.lw-scaler .lrt-readtags span{ padding:4px 10px; border-radius:99px; background:#f3f4f6; color:#5a6068; font-family:'Anta',sans-serif; font-size:12px; line-height:1.5; }
.lw-scaler .lrt-rep{ margin-top:16px; }
/* The product's 1px #eef0f3 border-top, as an SVG path so a film can draw it
   (O.draw('[data-lw-rep]', {effect:'rail'})). At rest it is a solid line. */
.lw-scaler .lrt-rule{ display:block; width:100%; height:1px; margin:0 0 14px; overflow:visible; }
.lw-scaler .lrt-rule path{ fill:none; stroke:#eef0f3; stroke-width:1; }
.lw-scaler .lrt-rep-now{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; line-height:1.7; color:#5a6068; }

/* =====================================================================
 * TOUR-ONLY EXPLAINERS — not app screens. Dark, over a scrim, so nobody
 * mistakes them for the light app underneath.
 * ===================================================================== */
.lw-scaler .lrt-note{ position:absolute; inset:0; z-index:40; display:grid; place-items:center; padding:24px; }
.lw-scaler .lrt-note-bg{ position:absolute; inset:0; background:rgba(0,0,0,.66); }
.lw-scaler .lrt-note-panel{
	position:relative; width:860px; max-width:100%; background:#0e0e0e; color:#F2F2F2;
	border:1px solid rgba(200,241,53,.35); border-radius:16px; padding:22px 24px 18px;
	box-shadow:0 0 0 4px rgba(200,241,53,.06), 0 24px 60px rgba(0,0,0,.6); text-align:left;
}
.lw-scaler .lrt-note-k{ display:flex; align-items:center; gap:7px; font-family:'Anta',sans-serif; font-size:10.5px; line-height:1.5; letter-spacing:.14em; text-transform:uppercase; color:#C8F135; }
.lw-scaler .lrt-note-k i{ color:#C8F135; }
.lw-scaler .lrt-note-h{ font-family:'Anta',sans-serif; font-weight:400; font-size:22px; line-height:1.15; letter-spacing:-.01em; color:#F2F2F2; margin:8px 0 16px; }
.lw-scaler .lrt-note-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.lw-scaler .lrt-note-sub{ font-family:'Anta',sans-serif; font-size:10.5px; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; color:rgba(242,242,242,.45); margin:0 0 10px; }
.lw-scaler .lrt-note-row{ display:grid; grid-template-columns:20px 1fr; gap:9px; margin-bottom:11px; font-size:12.5px; line-height:1.5; color:rgba(242,242,242,.72); }
.lw-scaler .lrt-note-row > i{ color:#C8F135; font-size:12px; margin-top:3px; }
.lw-scaler .lrt-note-row div{ color:rgba(242,242,242,.72); }
.lw-scaler .lrt-note-row strong{ color:#F2F2F2; font-weight:600; }
/* the two rungs are white, so the pills render exactly as they do in the app */
.lw-scaler .lrt-ladder{ display:flex; flex-direction:column; gap:8px; margin:0 0 12px 29px; }
.lw-scaler .lrt-rung{
	display:grid; grid-template-columns:112px 1fr; gap:10px; align-items:center;
	background:#ffffff; border:1px solid #e3e6ea; border-radius:10px; padding:8px 10px;
}
.lw-scaler .lrt-rung .lrt-badge{ margin-top:0; justify-self:start; }
.lw-scaler .lrt-rung-t{ font-size:12px; line-height:1.45; color:#0a0a0a; }
.lw-scaler .lrt-note-foot{ margin-top:4px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); font-size:11.5px; line-height:1.5; font-style:italic; color:rgba(242,242,242,.58); }

.lw-scaler .lrt-note-panel.is-pay{ width:540px; }
.lw-scaler .lrt-pay-line{ font-size:16px; line-height:1.5; color:#F2F2F2; }
.lw-scaler .lrt-pay-small{ margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; line-height:1.5; color:rgba(242,242,242,.6); }

/* ---------------- phone (narrow design space) ----------------
 * As the product at <=640px: the star glyph goes, the card padding drops to
 * 18px 16px, the counterparty wraps UNDER the route but stays right-aligned,
 * and the confidentiality line wraps under the button (all by the flex rules
 * above). The page is taller than the stage, so the film scrolls. */
.lw-scaler.is-hand .lrt-light{ padding:4px 2px 0; }
.lw-scaler.is-hand .lrt-h1{ font-size:26px; }
.lw-scaler.is-hand .lrt-head-glyph{ display:none; }
.lw-scaler.is-hand .lrt-card{ padding:18px 16px; }
/* Top-anchored on a phone: the film's caption band covers the bottom of the
   stage, and the footnote (Terms 3.5) must not sit under it. */
.lw-scaler.is-hand .lrt-note{ padding:12px; place-items:start center; }
.lw-scaler.is-hand .lrt-note-panel{ padding:16px 16px 14px; border-radius:14px; }
.lw-scaler.is-hand .lrt-note-h{ font-size:18px; margin:6px 0 12px; }
.lw-scaler.is-hand .lrt-note-cols{ grid-template-columns:1fr; gap:4px; }
/* ⚠️ The tallest thing on the phone: ~620px of the 736px the stage leaves it.
   Check it at QA before adding a single line of copy. */
.lw-scaler.is-hand .lrt-note-row{ grid-template-columns:18px 1fr; gap:8px; margin-bottom:7px; font-size:11px; line-height:1.45; }
.lw-scaler.is-hand .lrt-note-row > i{ font-size:11px; margin-top:2px; }
.lw-scaler.is-hand .lrt-note-sub{ margin-bottom:8px; }
.lw-scaler.is-hand .lrt-ladder{ margin:0 0 9px; gap:6px; }
.lw-scaler.is-hand .lrt-rung{ grid-template-columns:108px 1fr; padding:6px 9px; }
.lw-scaler.is-hand .lrt-rung-t{ font-size:11px; line-height:1.4; }
.lw-scaler.is-hand .lrt-note-foot{ font-size:10.5px; padding-top:10px; }
.lw-scaler.is-hand .lrt-pay-line{ font-size:14.5px; }
.lw-scaler.is-hand .lrt-pay-small{ font-size:11.5px; }
/* The pay card is 540px on a desk; on a phone it must fit the 420px frame. */
.lw-scaler.is-hand .lrt-note-panel,
.lw-scaler.is-hand .lrt-note-panel.is-pay{ width:auto; max-width:100%; }
.lw-scaler.is-hand .lrt-note{ place-items:center; }