/* 2026-09-23 legal audit: the brand green was used as TEXT (and as a fill under white
   text) below WCAG AA. --green-aa (#15803D) and --green-aa-deep (#11692F) exist for
   exactly this and are used here; the green FILLS that carry no text are untouched. */
/* ============================================================
   TaskLogix360 — Lifecycle of a Task section
   De-iframed from embeds/wix-embed-lifecycle.html · 2026-07-09
   Judgment calls:
   - :root token block removed (tokens.css defines them all EXCEPT
     --shadow-lg, which is defined locally on .tlx-lifecycle below).
   - html/body rules removed; body font/color and the embed's own
     .section rules (position:relative, overflow:hidden — needed to
     clip the decorative blobs — background:transparent) moved onto
     .tlx-lifecycle. body color was #111827 (not --navy-deep); kept
     verbatim for fidelity.
   - Universal reset removed (base.css). Bare-element resets
     (button, ul, :focus-visible) scoped under .tlx-lifecycle.
   - EVERY selector scoped under .tlx-lifecycle: this embed uses
     generic class names (.wrap, .frame, .chip, .grid, .counter,
     .progress…) that collide with the dashboards section (and any
     future section) when several section stylesheets load on one
     page. Scoping guarantees the embed's exact visuals win here.
   - container-type:inline-size set per the de-iframing pattern
     (embed has no cqw units today; harmless, future-proof).
   - Media queries unchanged: they measured the iframe's width, now
     the viewport — equivalent since the section is full-bleed.
   - @keyframes ping kept globally named (keyframes can't be scoped);
     currently unique across the site's CSS.
   - Non-token literal colors from the embed (#111827 ink, mac dots
     #FF5F57/#FEBC2E/#28C840, review pill #FEF3C7/#92400E) transferred
   verbatim — fidelity over the token rule for migrated CSS.
   ------------------------------------------------------------
   ROUND 2 · 2026-07-11 (per Sam: "enhance + make it flow better"):
   - Section re-grounded to the page's light-topology family (same
     white → light-blue ramp as the Questions Wall): decorative
     .blob rules removed, new lf-* layer (low-alpha navy routes +
     green SMIL pulses + fine dot texture + soft glows) at the end
     of this file. SMIL pulses hidden under prefers-reduced-motion.
   - Browser frame: glass/depth pass (hairline navy ring, crisper
     lifted shadow with a green cast, gradient top hairline, soft
     ambient glow behind the frame) + BorderBeam green comet tracer
     (.lf-beam, @supports offset-path gated, static green ring
     fallback outside it and under reduced motion).
   - Step-change choreography: one-shot green ping on the active
     step number; controls row refined (bordered arrows, gradient
     play button).
   - Mobile copy h3 bumped to the site card-H3 scale
     clamp(20px,2vw,26px) per the round-2 type spec.
   - PAGE-BOUNCE FIX (with lifecycle.js): rail + mobile copy slot
     get a JS-computed min-height (tallest step state) so the
     section height never changes during tab switches.
   ============================================================ */

.tlx-lifecycle{
  --shadow-lg:0 28px 72px -36px rgba(8,54,93,.32);
  position:relative;overflow:hidden;
  /* ROUND 2b 2026-07-11 (per Sam): reverted to plain white — the light-topology
     ground was dropped; the browser frame keeps its glow container instead. */
  background:#fff;
  font-family:var(--font);color:#111827;
  container-type:inline-size;
}
.tlx-lifecycle button{background:transparent;border:0;cursor:pointer;font:inherit;color:inherit;padding:0}
.tlx-lifecycle ul{list-style:none;padding:0;margin:0}
.tlx-lifecycle :focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}

/* ========== Section decoration ==========
   ROUND 2 2026-07-11: the two blur blobs were replaced by the lf-* light
   topology layer (rules at the end of this file). */

/* ========== Wrapper ========== */
.tlx-lifecycle .wrap{position:relative;max-width:1180px;margin:0 auto;padding:40px 20px 56px}
@media (min-width:640.02px){.tlx-lifecycle .wrap{padding:48px 32px 64px}}
@media (min-width:1024px){.tlx-lifecycle .wrap{padding:56px 40px 72px}}

/* ========== Step counter ========== */
.tlx-lifecycle .counter{display:flex;justify-content:flex-end}
/* pill (Sam 2026-07-15): step counter as a bordered pill; extra space after "Step" */
.tlx-lifecycle .counter-pill{display:inline-flex;align-items:center;
  padding:8px 16px;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--border),0 1px 2px rgba(8,54,93,.05);
  font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--slate)}
.tlx-lifecycle .counter-pill b{margin-left:.5em;color:var(--navy);font-weight:700}
.tlx-lifecycle .counter-pill .sep{margin:0 4px;opacity:.55}

/* ========== Progress bar ========== */
.tlx-lifecycle .progress{position:relative;height:4px;margin-top:12px;border-radius:999px;overflow:hidden;background:var(--navy-100)}
.tlx-lifecycle .progress-fill{position:absolute;top:0;bottom:0;left:0;width:0;background:linear-gradient(90deg,var(--navy),var(--green))}
/* mobile: tighten STEP counter + progress bar + tabs into one cohesive cluster */
@media (max-width:1023px){
  .tlx-lifecycle .counter{font-size:13.5px}
  .tlx-lifecycle .progress{height:8px;margin-top:8px}
  .tlx-lifecycle .grid{margin-top:16px}
}

/* ========== Main grid ========== */
.tlx-lifecycle .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px}
@media (min-width:1024px){
  .tlx-lifecycle .grid{grid-template-columns:minmax(280px,38%) minmax(0,1fr);gap:40px;margin-top:40px}
}

/* ========== Desktop step rail ========== */
.tlx-lifecycle .rail{display:none}
@media (min-width:1024px){.tlx-lifecycle .rail{display:block}}
.tlx-lifecycle .rail li + li{margin-top:8px}
.tlx-lifecycle .step{
  display:flex;align-items:flex-start;gap:16px;width:100%;
  padding:12px 16px;border-radius:12px;text-align:left;
  border-left:3px solid transparent;
  transition:background-color 250ms ease,border-color 250ms ease,box-shadow 250ms ease;
}
.tlx-lifecycle .step:hover{background:rgba(255,255,255,.7)}
.tlx-lifecycle .step.active{background:#fff;border-left-color:var(--green);
  box-shadow:inset 0 0 0 1px var(--border),0 14px 30px -22px rgba(8,54,93,.4)}
.tlx-lifecycle .step .num{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  height:28px;width:28px;border-radius:50%;margin-top:2px;
  font-size:13.5px;font-weight:800;
  background:#fff;color:var(--slate);box-shadow:inset 0 0 0 1px var(--navy-100);
  transition:all 250ms ease;
}
.tlx-lifecycle .step:hover .num{box-shadow:inset 0 0 0 1px rgba(11,70,120,.4)}
.tlx-lifecycle .step.active .num{background:var(--green);color:#fff;box-shadow:none}
.tlx-lifecycle .step .step-content{min-width:0;flex:1}
.tlx-lifecycle .step h3{margin:0;font-size:15px;font-weight:700;line-height:1.25;color:#374151;transition:color 250ms ease}
.tlx-lifecycle .step:hover h3,.tlx-lifecycle .step.active h3{color:var(--navy)}
/* POLISH 2026-07-10: max-height accordion (snap-open / laggy-close, shoved the
   rail on every auto-advance) replaced with the grid-rows 0fr->1fr technique —
   animates to exact content height, no jump. */
.tlx-lifecycle .step .body-wrap{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows 420ms cubic-bezier(.22,1,.36,1),opacity 300ms ease}
.tlx-lifecycle .step.active .body-wrap{grid-template-rows:1fr;opacity:1}
.tlx-lifecycle .step .body-wrap > p{overflow:hidden;min-height:0}
.tlx-lifecycle .step p{margin:0;padding-top:8px;font-size:13.5px;line-height:1.6;color:var(--slate)}

/* ========== Mobile chip strip ========== */
.tlx-lifecycle .mobile-only{display:block}
@media (min-width:1024px){.tlx-lifecycle .mobile-only{display:none}}
.tlx-lifecycle .chips{
  display:flex;gap:8px;padding:0 20px 4px;margin:0 -20px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scrollbar-width:none;scroll-behavior:smooth;
}
.tlx-lifecycle .chips::-webkit-scrollbar{display:none}
.tlx-lifecycle .chip{
  flex-shrink:0;scroll-snap-align:center;white-space:nowrap;
  padding:8px 16px;border-radius:999px;
  font-size:13.5px;font-weight:600;
  background:var(--surface);color:var(--slate);
  transition:background-color 150ms,color 150ms;
}
.tlx-lifecycle .chip:hover{background:var(--navy-50)}
.tlx-lifecycle .chip.active{background:var(--navy);color:#fff}

/* ========== Mobile copy ========== */
.tlx-lifecycle .mobile-copy{margin-top:16px}
.tlx-lifecycle .mobile-copy h3{margin:0;font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.25;color:var(--navy)}
.tlx-lifecycle .mobile-copy p{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--slate)}

/* ========== Browser frame ========== */
.tlx-lifecycle .frame-wrap{position:relative}
.tlx-lifecycle .frame{
  overflow:hidden;border-radius:16px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--border),var(--shadow-lg);
}
.tlx-lifecycle .chrome{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:12px 16px;
}
.tlx-lifecycle .dot{display:block;height:12px;width:12px;border-radius:50%;flex-shrink:0}
.tlx-lifecycle .dot-r{background:#FF5F57}.tlx-lifecycle .dot-y{background:#FEBC2E}.tlx-lifecycle .dot-g{background:#28C840}
.tlx-lifecycle .urlbar{
  margin-left:12px;flex:1;max-width:320px;display:flex;align-items:center;gap:8px;
  padding:4px 12px;border-radius:6px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--border);overflow:hidden;
}
.tlx-lifecycle .urldot{height:8px;width:8px;border-radius:50%;background:var(--green);flex-shrink:0}
.tlx-lifecycle .url-text{font-family:var(--mono);font-size:13.5px;color:var(--slate-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ⚠️ KNOWN, PRE-EXISTING, NOT FIXED (measured 2026-08-07).
   16/10 gives this screen 209px of height at a 390px viewport. Measured natural
   heights of the eight slides at that width: 445 / 643 / 618 / 631 / 883 / 469 /
   455 / 536. Every one overflows, and .ms is position:absolute so the frame
   cannot grow to fit. Several slides are also wider than the frame (up to 466).
   Not fixed here because the honest options are all design calls:
     - one tall ratio for all eight wastes ~670px on the shortest,
     - per-slide ratios make the carousel jump on every advance,
     - transform:scale() would put the mock type under the 10pt floor.
   These are desktop UI mocks that were never given a mobile layout. Flagged to
   Sam 2026-08-07; same class of issue as the .m8-line-d invoice truncation. */
.tlx-lifecycle .screen{position:relative;width:100%;aspect-ratio:16/10;background:#fff;overflow:hidden}

/* ========== Mockups (one shared shell + per-mockup body) ========== */
.tlx-lifecycle .mockup{position:absolute;inset:0;opacity:0;pointer-events:none;
  transform:translateY(10px) scale(.995);
  transition:opacity 320ms ease,transform 460ms cubic-bezier(.22,1,.36,1)}
.tlx-lifecycle .mockup.active{opacity:1;pointer-events:auto;transform:none}
@media (prefers-reduced-motion: reduce){
  .tlx-lifecycle .mockup{transition:none;transform:none}
  .tlx-lifecycle .step .body-wrap{transition:none}
  .tlx-lifecycle .progress-fill{transition:none !important}
}
/* 🔴 grid-template-columns:minmax(0,1fr) is load-bearing. Only ROWS were
   declared, so the single implicit COLUMN was auto-sized to the max-content of
   its widest row — the mock body — and measured 419px inside a 332px screen.
   Every child then filled that 419px column and got clipped by .screen's
   overflow:hidden, including the header bar's "Live" indicator.
   Diagnosed by reading the computed gridTemplateColumns; min-width:0 on the
   BAR (which it already had) could never have fixed it, because the bar was
   not what was too wide. */
.tlx-lifecycle .ms{position:absolute;inset:0;display:grid;
  grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);background:#fff}
/* min-width:0 is correct practice for a grid item, but it was NOT what fixed
   the clipped header bar — the bar could already shrink. The real cause was the
   grid's auto-sized implicit column; see the note on .ms above. */
.tlx-lifecycle .ms-bar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:8px 12px;min-width:0;
}
@media (min-width:1024px){.tlx-lifecycle .ms-bar{padding:12px 20px}}
.tlx-lifecycle .ms-bar-left{display:flex;align-items:center;gap:12px;min-width:0}
.tlx-lifecycle .ms-logo{display:inline-flex;align-items:center;justify-content:center;height:28px;width:28px;
  border-radius:6px;background:var(--navy);color:#fff;font-size:13.5px;font-weight:800;flex-shrink:0}
.tlx-lifecycle .ms-titles{min-width:0}
/* Truncates like .ms-title does. Uppercase at .14em tracking makes strings like
   "QUALITY CONTROL" and "SUBCONTRACTORS" very wide, and with no ellipsis this
   was the element setting the bar's min-content width (446px and 473px inside
   a 334px screen). */
.tlx-lifecycle .ms-eyebrow{font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--slate-light);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlx-lifecycle .ms-title{font-size:14px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlx-lifecycle .ms-live{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tlx-lifecycle .ms-live-dot{height:8px;width:8px;border-radius:50%;background:var(--green)}
.tlx-lifecycle .ms-live-text{font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--slate-light)}
.tlx-lifecycle .ms-body{position:relative;min-height:0;padding:16px}
@media (min-width:1024px){.tlx-lifecycle .ms-body{padding:24px}}

/* shared mockup tokens */
.tlx-lifecycle .card{background:#fff;border-radius:10px;box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:13.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.tlx-lifecycle .tag-navy{background:var(--navy-50);color:var(--navy)}
.tlx-lifecycle .tag-green{background:var(--green-50);color:var(--green-aa-deep)}
.tlx-lifecycle .mono{font-family:var(--mono)}

/* ========== m1 — Engineering Import ========== */
.tlx-lifecycle .m1{display:grid;grid-template-columns:1.05fr 1fr;gap:16px;height:100%}
.tlx-lifecycle .m1-drop{display:flex;flex-direction:column;padding:20px;border-radius:12px;
  border:1px dashed rgba(11,70,120,.3);background:rgba(234,242,250,.5)}
.tlx-lifecycle .m1-drop-head{display:flex;align-items:center;gap:12px}
.tlx-lifecycle .m1-file-ico{display:inline-flex;align-items:center;justify-content:center;height:40px;width:40px;
  border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m1-file-ico svg{width:20px;height:20px}
.tlx-lifecycle .m1-fname{font-size:14px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlx-lifecycle .m1-fmeta{font-size:13.5px;color:var(--slate-light);margin-top:2px}
.tlx-lifecycle .m1-bar-wrap{margin-top:16px;height:8px;border-radius:999px;background:#fff;overflow:hidden}
.tlx-lifecycle .m1-bar{height:100%;width:100%;background:linear-gradient(90deg,var(--navy),var(--green));border-radius:999px}
.tlx-lifecycle .m1-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.tlx-lifecycle .m1-stat{padding:16px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m1-stat-v{font-size:24px;font-weight:800;color:var(--navy);line-height:1}
.tlx-lifecycle .m1-stat-l{margin-top:8px;font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--slate-light)}
.tlx-lifecycle .m1-checks{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.tlx-lifecycle .m1-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--slate)}
.tlx-lifecycle .m1-check b{color:var(--navy);font-weight:600}
.tlx-lifecycle .m1-check-ico{display:inline-flex;align-items:center;justify-content:center;height:20px;width:20px;border-radius:50%;background:var(--green);flex-shrink:0}
.tlx-lifecycle .m1-check-ico svg{width:12px;height:12px;color:#fff}
.tlx-lifecycle .m1-drop-foot{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.tlx-lifecycle .m1-foot-l{font-size:13.5px;color:var(--slate-light)}
.tlx-lifecycle .m1-cta{padding:8px 16px;border-radius:8px;background:var(--navy);color:#fff;font-size:13.5px;font-weight:700}
.tlx-lifecycle .m1-preview{display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m1-pv-head{display:flex;align-items:center;justify-content:space-between;background:var(--surface);
  border-bottom:1px solid var(--border);padding:12px 16px}
.tlx-lifecycle .m1-pv-title{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--navy)}
.tlx-lifecycle .m1-pv-meta{font-size:13.5px;color:var(--slate-light)}
.tlx-lifecycle .m1-pv-cols{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;padding:8px 16px;
  border-bottom:1px solid var(--border);
  font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--slate-light)}
.tlx-lifecycle .m1-pv-list{flex:1;display:flex;flex-direction:column}
.tlx-lifecycle .m1-pv-row{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:0 16px;border-bottom:1px solid rgba(229,231,235,.7)}
.tlx-lifecycle .m1-pv-row:last-child{border-bottom:0}
.tlx-lifecycle .m1-pv-id{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--navy)}
.tlx-lifecycle .m1-pv-name{font-size:13.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlx-lifecycle .tag-green-pill{background:var(--green-aa);color:#fff;border-radius:999px}

/* ========== m2 — Task Assignment ========== */
.tlx-lifecycle .m2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;height:100%}
.tlx-lifecycle .m2-col{display:flex;flex-direction:column;min-height:0;padding:12px;border-radius:12px;background:var(--surface)}
.tlx-lifecycle .m2-col-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px;margin-bottom:12px}
.tlx-lifecycle .m2-col-label{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--slate)}
.tlx-lifecycle .m2-col-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;
  padding:0 8px;border-radius:999px;font-size:13.5px;font-weight:800;background:#fff;color:var(--slate);
  box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m2-col-count.navy{background:var(--navy);color:#fff;box-shadow:none}
.tlx-lifecycle .m2-col-count.green{background:var(--green);color:#fff;box-shadow:none}
.tlx-lifecycle .m2-cards{display:flex;flex-direction:column;gap:12px}
.tlx-lifecycle .m2-card{padding:12px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m2-card.active{box-shadow:inset 0 0 0 1px var(--green),0 4px 12px -4px rgba(30,154,68,.25)}
.tlx-lifecycle .m2-card-head{display:flex;align-items:center;justify-content:space-between}
.tlx-lifecycle .m2-id{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--slate-light)}
.tlx-lifecycle .m2-card-title{margin-top:8px;font-size:13.5px;font-weight:700;line-height:1.2;color:var(--navy)}
.tlx-lifecycle .m2-card-foot{margin-top:12px;display:flex;align-items:center;gap:8px}
.tlx-lifecycle .m2-avatars{display:flex}
.tlx-lifecycle .m2-avatars span{height:20px;width:20px;border-radius:50%;border:1.5px solid #fff;margin-left:-4px}
.tlx-lifecycle .m2-avatars span:first-child{margin-left:0}
.tlx-lifecycle .av-navy{background:var(--navy)} .tlx-lifecycle .av-green{background:var(--green-aa)} .tlx-lifecycle .av-dark{background:var(--navy-deep)}
.tlx-lifecycle .m2-crew{font-size:13.5px;color:var(--slate)}
.tlx-lifecycle .m2-empty{height:20px;width:20px;border-radius:50%;border:1.5px dashed var(--slate-light)}
.tlx-lifecycle .m2-empty-text{font-size:13.5px;color:var(--slate-light);font-style:italic}

/* ========== m3 — Field Execution ========== */
.tlx-lifecycle .m3{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:stretch;height:100%}
.tlx-lifecycle .m3-side{display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.tlx-lifecycle .m3-side-card{padding:12px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m3-side-card.navy{background:var(--navy-50);box-shadow:none}
.tlx-lifecycle .m3-side-card.green{background:var(--green-50);box-shadow:none}
.tlx-lifecycle .m3-card-eb{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--slate-light)}
.tlx-lifecycle .m3-card-eb.navy{color:var(--navy)} .tlx-lifecycle .m3-card-eb.green{color:var(--green-aa-deep)}
.tlx-lifecycle .m3-card-title{margin-top:4px;font-size:14px;font-weight:700;color:var(--navy);line-height:1.2}
.tlx-lifecycle .m3-card-sub{font-size:13.5px;color:var(--slate);margin-top:4px}
.tlx-lifecycle .m3-geo{display:flex;align-items:center;gap:8px;margin-top:8px}
.tlx-lifecycle .m3-pulse{position:relative;display:inline-flex;width:12px;height:12px}
.tlx-lifecycle .m3-pulse::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);opacity:.6;animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite}
.tlx-lifecycle .m3-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green)}
@keyframes ping{0%{transform:scale(1);opacity:.6}75%,100%{transform:scale(2);opacity:0}}
.tlx-lifecycle .m3-coord{font-family:var(--mono);font-size:13.5px;color:var(--slate)}
.tlx-lifecycle .m3-thumbs{display:flex;align-items:center;gap:8px;margin-top:8px}
.tlx-lifecycle .m3-thumb{height:32px;width:32px;border-radius:6px;
  background:linear-gradient(135deg,var(--navy-100),var(--navy-50));
  box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m3-thumb-meta{margin-left:8px;font-size:13.5px;color:var(--slate)}
.tlx-lifecycle .m3-stat-num{margin-top:4px;font-size:28px;font-weight:800;color:var(--navy);line-height:1}
.tlx-lifecycle .m3-stat-frac{font-size:14px;font-weight:700;color:var(--slate)}
.tlx-lifecycle .m3-stat-l{margin-top:4px;font-size:13.5px;color:var(--slate)}
.tlx-lifecycle .m3-phone{position:relative;align-self:center;margin:0 auto;width:184px;max-height:100%;
  padding:8px;border-radius:26px;background:var(--navy-deep);
  box-shadow:0 24px 50px -20px rgba(8,54,93,.4)}
.tlx-lifecycle .m3-screen{position:relative;border-radius:17px;background:#fff;overflow:hidden}
.tlx-lifecycle .m3-statusbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px}
.tlx-lifecycle .m3-time{font-size:13.5px;font-weight:700;color:var(--navy)}
.tlx-lifecycle .m3-sig{display:flex;gap:4px}
.tlx-lifecycle .m3-sig span{height:8px;width:8px;border-radius:2px;background:var(--navy)}
.tlx-lifecycle .m3-sig span:last-child{opacity:.5}
.tlx-lifecycle .m3-app{padding:4px 12px 12px}
.tlx-lifecycle .m3-app-eb{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--green-aa)}
.tlx-lifecycle .m3-app-t{font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.2}
.tlx-lifecycle .m3-app-s{font-size:13.5px;color:var(--slate)}
.tlx-lifecycle .m3-cl{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.tlx-lifecycle .m3-cl-row{display:flex;align-items:center;gap:8px}
.tlx-lifecycle .m3-cl-box{display:inline-flex;align-items:center;justify-content:center;height:16px;width:16px;border-radius:50%;flex-shrink:0}
.tlx-lifecycle .m3-cl-box.done{background:var(--green)}
.tlx-lifecycle .m3-cl-box.open{border:1.5px solid var(--slate-light);background:#fff}
.tlx-lifecycle .m3-cl-check{width:8px;height:8px;color:#fff}
.tlx-lifecycle .m3-cl-label{font-size:13.5px;color:var(--slate)}
.tlx-lifecycle .m3-cl-label.done{text-decoration:line-through}
.tlx-lifecycle .m3-cl-label.open{font-weight:700;color:var(--navy);text-decoration:none}
.tlx-lifecycle .m3-photos{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tlx-lifecycle .m3-photo{aspect-ratio:1;border-radius:5px;background:linear-gradient(135deg,var(--navy-100),var(--navy-50))}
.tlx-lifecycle .m3-photo.alt{background:linear-gradient(135deg,var(--green-50),#fff);box-shadow:inset 0 0 0 1px rgba(30,154,68,.4)}
.tlx-lifecycle .m3-photo.add{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--slate-light)}
.tlx-lifecycle .m3-submit{margin-top:12px;text-align:center;padding:8px;border-radius:8px;background:var(--green-aa);
  font-size:13.5px;font-weight:700;color:#fff}
.tlx-lifecycle .m3-avatars{display:flex;margin-top:8px}
.tlx-lifecycle .m3-avatars span{display:inline-flex;align-items:center;justify-content:center;height:28px;width:28px;
  border-radius:50%;border:2px solid #fff;margin-left:-8px;font-size:13.5px;font-weight:800;color:#fff}
.tlx-lifecycle .m3-avatars span:first-child{margin-left:0}

/* ========== m4 — QC Inspection ========== */
.tlx-lifecycle .m4{display:grid;grid-template-columns:1.05fr 1fr;gap:16px;height:100%}
.tlx-lifecycle .m4-task{display:flex;flex-direction:column;min-height:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m4-task-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.tlx-lifecycle .m4-id{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--slate-light)}
.tlx-lifecycle .m4-t{font-size:14px;font-weight:700;color:var(--navy);margin-top:4px}
.tlx-lifecycle .m4-pill{padding:4px 12px;border-radius:999px;font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--navy-50);color:var(--navy)}
.tlx-lifecycle .m4-photos{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:8px;padding:16px}
.tlx-lifecycle .m4-photo{position:relative;border-radius:8px;box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m4-photo.a{background:linear-gradient(135deg,var(--navy-100),var(--navy-50))}
.tlx-lifecycle .m4-photo.b{background:linear-gradient(135deg,var(--green-50),#fff)}
.tlx-lifecycle .m4-photo.c{background:linear-gradient(135deg,var(--navy-50),#fff)}
.tlx-lifecycle .m4-photo-label{position:absolute;bottom:8px;left:8px;padding:4px 8px;border-radius:4px;
  background:rgba(0,0,0,.55);color:#fff;font-size:13.5px;font-weight:700}
.tlx-lifecycle .m4-cl-wrap{padding:12px 16px;border-top:1px solid var(--border)}
.tlx-lifecycle .m4-cl-eb{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--slate-light)}
.tlx-lifecycle .m4-cl{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:8px}
.tlx-lifecycle .m4-cl-row{display:flex;align-items:center;gap:8px}
.tlx-lifecycle .m4-cl-box{display:inline-flex;align-items:center;justify-content:center;height:16px;width:16px;border-radius:50%;background:var(--green)}
.tlx-lifecycle .m4-cl-check{width:8px;height:8px;color:#fff}
.tlx-lifecycle .m4-cl-label{font-size:13.5px;color:var(--slate)}
.tlx-lifecycle .m4-decision{display:flex;flex-direction:column;min-height:0;padding:16px;border-radius:12px;background:var(--surface)}
.tlx-lifecycle .m4-dec-eb{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--slate)}
.tlx-lifecycle .m4-opts{margin-top:12px;flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:12px}
.tlx-lifecycle .m4-opt{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:10px;background:rgba(255,255,255,.6);border:1px solid transparent}
.tlx-lifecycle .m4-opt.active{background:#fff;border-color:var(--amber);box-shadow:0 4px 12px -6px rgba(245,158,11,.35)}
.tlx-lifecycle .m4-radio{display:inline-flex;align-items:center;justify-content:center;height:20px;width:20px;border-radius:50%;flex-shrink:0;margin-top:1px;background:#fff;border:1.5px solid var(--slate-light)}
.tlx-lifecycle .m4-opt.active .m4-radio{background:var(--amber);border-color:var(--amber)}
.tlx-lifecycle .m4-radio-dot{height:8px;width:8px;border-radius:50%;background:#fff;display:none}
.tlx-lifecycle .m4-opt.active .m4-radio-dot{display:block}
.tlx-lifecycle .m4-opt-l{font-size:13.5px;font-weight:700;color:var(--slate)}
.tlx-lifecycle .m4-opt.active .m4-opt-l{color:var(--navy)}
.tlx-lifecycle .m4-opt-d{font-size:13.5px;color:var(--slate-light);margin-top:2px}
.tlx-lifecycle .m4-note{margin-top:12px;flex:1;min-height:0;overflow:hidden;padding:12px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m4-note-eb{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--slate-light)}
.tlx-lifecycle .m4-note-t{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--slate)}
.tlx-lifecycle .m4-foot{margin-top:16px}
.tlx-lifecycle .m4-insp{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m4-insp-l{display:flex;align-items:center;gap:8px}
.tlx-lifecycle .m4-insp-av{display:inline-flex;align-items:center;justify-content:center;height:28px;width:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:13.5px;font-weight:800}
.tlx-lifecycle .m4-insp-n{font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.1}
.tlx-lifecycle .m4-insp-r{font-size:13.5px;color:var(--slate-light)}
.tlx-lifecycle .m4-insp-time{font-family:var(--mono);font-size:13.5px;color:var(--slate-light)}
.tlx-lifecycle .m4-log{margin-top:12px;width:100%;padding:12px;border-radius:8px;background:var(--navy);color:#fff;font-size:13.5px;font-weight:700}

/* ========== m5 — Reject and Rework Tracking ========== */
.tlx-lifecycle .m5{display:grid;grid-template-columns:1fr .9fr;gap:12px;height:100%}
.tlx-lifecycle .m5-audit{display:flex;flex-direction:column;min-height:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m5-audit-h{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--navy)}
.tlx-lifecycle .m5-feed{position:relative;flex:1;display:flex;flex-direction:column;padding:16px 16px}
.tlx-lifecycle .m5-feed::before{content:"";position:absolute;left:24px;top:16px;bottom:16px;width:1px;background:var(--border)}
.tlx-lifecycle .m5-feed li{position:relative;flex:1;display:flex;gap:12px;padding-bottom:12px}
.tlx-lifecycle .m5-feed li:last-child{padding-bottom:0}
.tlx-lifecycle .m5-dot{position:relative;z-index:2;flex-shrink:0;margin-top:2px;height:16px;width:16px;border-radius:50%;border:2px solid #fff}
.tlx-lifecycle .m5-dot.red{background:var(--red)} .tlx-lifecycle .m5-dot.green{background:var(--green)} .tlx-lifecycle .m5-dot.navy{background:var(--navy)} .tlx-lifecycle .m5-dot.slate{background:var(--slate-light)}
.tlx-lifecycle .m5-feed-t{font-size:13.5px;line-height:1.4;color:var(--slate);min-width:0}
.tlx-lifecycle .m5-feed-t b{font-weight:700;color:var(--navy)}
.tlx-lifecycle .m5-feed-time{margin-top:4px;font-family:var(--mono);font-size:13.5px;color:var(--slate-light)}
.tlx-lifecycle .m5-chart{display:flex;flex-direction:column;min-height:0;padding:12px;border-radius:12px;background:var(--surface)}
.tlx-lifecycle .m5-c-head{display:flex;align-items:baseline;justify-content:space-between}
.tlx-lifecycle .m5-c-eb{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--slate)}
.tlx-lifecycle .m5-c-v{margin-top:4px;font-size:30px;font-weight:800;color:var(--navy);line-height:1}
.tlx-lifecycle .m5-c-v span{font-size:17px}
.tlx-lifecycle .m5-c-delta{padding:4px 8px;border-radius:5px;background:var(--green-50);color:var(--green-aa-deep);font-size:13.5px;font-weight:700}
.tlx-lifecycle .m5-bars{margin-top:16px;display:flex;flex:1;align-items:stretch;gap:8px}
.tlx-lifecycle .m5-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.tlx-lifecycle .m5-bar-b{width:100%;min-height:4px;border-radius:4px 4px 0 0;background:linear-gradient(to top,var(--navy),rgba(11,70,120,.6))}
.tlx-lifecycle .m5-bar.last .m5-bar-b{background:var(--green)}
.tlx-lifecycle .m5-bar-l{font-size:13.5px;color:var(--slate-light)}
.tlx-lifecycle .m5-reasons{margin-top:16px}
.tlx-lifecycle .m5-reasons-h{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--slate-light)}
.tlx-lifecycle .m5-reason{display:flex;align-items:center;gap:8px;margin-top:8px}
.tlx-lifecycle .m5-reason-l{width:96px;font-size:13.5px;color:var(--slate)}
.tlx-lifecycle .m5-reason-bar{flex:1;height:8px;background:#fff;border-radius:999px;overflow:hidden}
.tlx-lifecycle .m5-reason-bar > div{height:100%;background:var(--navy)}
.tlx-lifecycle .m5-reason-v{width:36px;text-align:right;font-family:var(--mono);font-size:13.5px;color:var(--slate-light)}

/* ========== m6 — Subcontractor Administration ========== */
.tlx-lifecycle .m6{display:flex;flex-direction:column;gap:16px;height:100%}
.tlx-lifecycle .m6-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tlx-lifecycle .m6-stat{padding:16px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m6-stat-v{font-size:23px;font-weight:800;color:var(--navy);line-height:1}
.tlx-lifecycle .m6-stat-l{margin-top:8px;font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--slate-light)}
.tlx-lifecycle .m6-table{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--border);overflow:hidden}
.tlx-lifecycle .m6-th{display:grid;grid-template-columns:1.5fr .7fr 1.1fr .5fr;gap:12px;padding:12px 16px;
  background:var(--surface);border-bottom:1px solid var(--border);
  font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--slate-light)}
.tlx-lifecycle .m6-th span:last-child{text-align:right}
.tlx-lifecycle .m6-row{flex:1;display:grid;grid-template-columns:1.5fr .7fr 1.1fr .5fr;gap:12px;align-items:center;padding:0 16px;
  border-bottom:1px solid rgba(229,231,235,.7)}
.tlx-lifecycle .m6-row:last-child{border-bottom:0}
.tlx-lifecycle .m6-name{font-size:13.5px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlx-lifecycle .m6-region{font-size:13.5px;color:var(--slate-light);margin-top:2px}
.tlx-lifecycle .m6-tasks{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--slate)}
.tlx-lifecycle .m6-approval{display:flex;align-items:center;gap:8px}
.tlx-lifecycle .m6-approval-bar{flex:1;height:8px;background:var(--surface);border-radius:999px;overflow:hidden}
.tlx-lifecycle .m6-approval-bar > div{height:100%;background:var(--green)}
.tlx-lifecycle .m6-approval-bar.warn > div{background:var(--amber)}
.tlx-lifecycle .m6-approval-v{width:36px;text-align:right;font-family:var(--mono);font-size:13.5px;color:var(--slate)}
.tlx-lifecycle .m6-status{display:flex;justify-content:flex-end}
.tlx-lifecycle .m6-status span{padding:4px 8px;border-radius:999px;font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.tlx-lifecycle .m6-status .active{background:var(--green-50);color:var(--green-aa-deep)}
.tlx-lifecycle .m6-status .review{background:#FEF3C7;color:#92400E}

/* ========== m7 — Geolocation and Mapping ========== */
.tlx-lifecycle .m7{display:grid;grid-template-columns:minmax(0,1fr) 214px;gap:16px;height:100%}
.tlx-lifecycle .m7-map{position:relative;overflow:hidden;border-radius:12px;background:linear-gradient(150deg,#EFF2F7 0%,#E7EDF4 60%,#E1E8F1 100%);box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m7-map svg.grid-bg{position:absolute;inset:0;width:100%;height:100%}
.tlx-lifecycle .m7-pin{position:absolute;transform:translate(-50%,-50%);width:16px;height:20px}
.tlx-lifecycle .m7-pin svg{width:100%;height:100%}
.tlx-lifecycle .m7-pin.g{color:var(--green)} .tlx-lifecycle .m7-pin.n{color:var(--navy)} .tlx-lifecycle .m7-pin.a{color:var(--amber)}
.tlx-lifecycle .m7-active{position:absolute;left:55%;top:44%;transform:translate(-50%,-100%);text-align:center}
.tlx-lifecycle .m7-pop{margin-bottom:4px;padding:8px 8px;border-radius:6px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--border),0 8px 24px -12px rgba(8,54,93,.4);
  white-space:nowrap}
.tlx-lifecycle .m7-pop-id{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--slate-light)}
.tlx-lifecycle .m7-pop-t{font-size:13.5px;font-weight:700;color:var(--navy)}
.tlx-lifecycle .m7-active-pin{position:relative;display:inline-flex;width:20px;height:24px;color:var(--green)}
.tlx-lifecycle .m7-active-pin::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:rgba(30,154,68,.25);animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite}
.tlx-lifecycle .m7-compass{position:absolute;bottom:8px;right:8px;height:28px;width:28px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--border);display:flex;align-items:center;justify-content:center}
.tlx-lifecycle .m7-side{display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:0}
.tlx-lifecycle .m7-side .card{padding:16px}
.tlx-lifecycle .m7-side-eb{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--slate)}
.tlx-lifecycle .m7-side-v{margin-top:4px;font-size:26px;font-weight:800;color:var(--navy);line-height:1}
.tlx-lifecycle .m7-side-s{font-size:13.5px;color:var(--slate-light);margin-top:2px}
.tlx-lifecycle .m7-legend{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.tlx-lifecycle .m7-legend-row{display:flex;align-items:center;gap:8px}
.tlx-lifecycle .m7-legend-dot{height:12px;width:12px;border-radius:50%}
.tlx-lifecycle .m7-legend-l{font-size:13.5px;color:var(--slate)}
.tlx-lifecycle .m7-sel{padding:16px;border-radius:10px;background:var(--navy);color:#fff}
.tlx-lifecycle .m7-sel-eb{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;opacity:.8}
.tlx-lifecycle .m7-sel-t{margin-top:4px;font-size:13.5px;font-weight:700}
.tlx-lifecycle .m7-sel-s{font-size:13.5px;opacity:.8;margin-top:2px}
/* m7 basemap — realistic light street map (matches the home Live Map) */
.tlx-lifecycle .m7-park{fill:rgba(56,168,92,.15);stroke:rgba(56,168,92,.30);stroke-width:1}
.tlx-lifecycle .m7-blocks rect{fill:rgba(110,134,172,.12);stroke:rgba(110,134,172,.20);stroke-width:1}
.tlx-lifecycle .m7-st-minor{fill:none;stroke:rgba(88,112,152,.16);stroke-width:1}
.tlx-lifecycle .m7-st-major{fill:none;stroke:rgba(70,96,140,.28);stroke-width:2;stroke-linecap:round}
.tlx-lifecycle .m7-water{fill:none;stroke:#AAD2ED;stroke-width:23;stroke-linecap:round;stroke-linejoin:round}
.tlx-lifecycle .m7-hwy-case{fill:none;stroke:rgba(244,192,106,.55);stroke-width:4.5;stroke-linecap:round}
.tlx-lifecycle .m7-hwy{fill:none;stroke:rgba(230,158,58,.9);stroke-width:1.8;stroke-linecap:round}
.tlx-lifecycle .m7-route{fill:none;stroke:rgba(21,128,61,.9);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 6}

/* ========== m8 — Project Invoicing ========== */
.tlx-lifecycle .m8{display:grid;grid-template-columns:1.15fr .85fr;gap:12px;height:100%}
.tlx-lifecycle .m8-doc{position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m8-doc-h{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border)}
.tlx-lifecycle .m8-doc-eb{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--slate-light)}
.tlx-lifecycle .m8-doc-id{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--navy);margin-top:4px}
.tlx-lifecycle .m8-doc-date{font-family:var(--mono);font-size:13.5px;color:var(--navy)}
.tlx-lifecycle .m8-th{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--border);
  font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--slate-light)}
.tlx-lifecycle .m8-lines{flex:1;display:flex;flex-direction:column;overflow:hidden}
.tlx-lifecycle .m8-line{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:12px;align-items:center;
  padding:0 16px;border-bottom:1px solid rgba(229,231,235,.7)}
.tlx-lifecycle .m8-line:last-child{border-bottom:0}
.tlx-lifecycle .m8-line-d{font-size:13.5px;font-weight:500;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlx-lifecycle .m8-line-c{font-family:var(--mono);font-size:13.5px;color:var(--slate-light)}
.tlx-lifecycle .m8-line-v{font-family:var(--mono);font-size:13.5px;color:var(--slate)}
.tlx-lifecycle .m8-line-v.bold{font-weight:700;color:var(--navy)}
/* KNOWN LIMIT, not a regression: at 390 the whole .m8-doc is 206px wide and the
   description column ~70px, so "Manhole rework · 14 LF" (149px at 13.5px) ellipses.
   It ellipsed BEFORE this retrofit too - 144px into 55px at the old 11px - so the
   mobile truncation predates the type floor; raising the type widened the gap.
   Tightening the gutters here recovers 43px -> 70px, which is as far as CSS goes.
   Two lines was tried and reverted: .m8-lines is a fixed-height flex box, so the
   second line clipped VERTICALLY instead, which is worse than an ellipsis.
   Fixing it properly means giving the invoice mock a real mobile layout (or
   letting it scroll) - a design call, flagged rather than improvised. */
@media (max-width:560px){
  .tlx-lifecycle .m8-line{gap:8px;padding:0 12px}
}
.tlx-lifecycle .m8-totals{padding:12px 16px;border-top:1px solid var(--border)}
.tlx-lifecycle .m8-totals-inner{margin-left:auto;width:58%}
.tlx-lifecycle .m8-tot-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--slate)}
.tlx-lifecycle .m8-tot-row + .m8-tot-row{margin-top:4px}
.tlx-lifecycle .m8-tot-row.final{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-size:14px;font-weight:700}
.tlx-lifecycle .m8-tot-row.final span:first-child{color:var(--navy)}
.tlx-lifecycle .m8-tot-row.final span:last-child{color:var(--green-aa);font-family:var(--mono)}
.tlx-lifecycle .m8-stamp{position:absolute;right:24px;top:132px;transform:rotate(-12deg);
  padding:4px 12px;border:2px solid var(--green);border-radius:5px;
  color:var(--green-aa-deep);font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;opacity:1}
.tlx-lifecycle .m8-side{display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:0}
.tlx-lifecycle .m8-side-card{padding:16px;border-radius:12px}
.tlx-lifecycle .m8-side-card.green{background:var(--green-50)}
.tlx-lifecycle .m8-side-card.white{background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.tlx-lifecycle .m8-side-card.navy{background:var(--navy);color:#fff}
.tlx-lifecycle .m8-side-head{display:flex;align-items:center;justify-content:space-between}
.tlx-lifecycle .m8-side-eb{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em}
.tlx-lifecycle .m8-side-card.green .m8-side-eb{color:var(--green-aa-deep)}
.tlx-lifecycle .m8-side-card.white .m8-side-eb{color:var(--slate)}
.tlx-lifecycle .m8-side-card.navy .m8-side-eb{opacity:.9}
.tlx-lifecycle .m8-side-delta{font-size:13.5px;font-weight:700;color:var(--green-aa-deep)}
.tlx-lifecycle .m8-side-v{margin-top:8px;font-size:30px;font-weight:800;line-height:1;color:var(--navy)}
.tlx-lifecycle .m8-side-card.white .m8-side-v{font-size:20px}
.tlx-lifecycle .m8-side-s{font-size:13.5px;color:var(--slate);margin-top:4px}
.tlx-lifecycle .m8-side-card.navy .m8-side-s{color:#B6C8DA;opacity:1}
.tlx-lifecycle .m8-progress-bars{margin-top:8px;display:flex;gap:4px}
.tlx-lifecycle .m8-progress-bars span{flex:1;height:8px;border-radius:999px;background:var(--green)}
.tlx-lifecycle .m8-sync-head{display:flex;align-items:center;gap:8px}
.tlx-lifecycle .m8-sync-ico{display:inline-flex;align-items:center;justify-content:center;height:24px;width:24px;border-radius:6px;background:rgba(255,255,255,.15)}
.tlx-lifecycle .m8-sync-ico svg{width:12px;height:12px}
.tlx-lifecycle .m8-sync-t{margin-top:8px;font-size:14px;font-weight:700}

/* ========== Controls ========== */
.tlx-lifecycle .controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.tlx-lifecycle .ctrl-left,.tlx-lifecycle .ctrl-right{display:flex;align-items:center;gap:8px}
.tlx-lifecycle .ctrl-right{gap:12px}
.tlx-lifecycle .arrow{display:inline-flex;align-items:center;justify-content:center;height:32px;width:32px;
  border-radius:50%;background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1px var(--border);transition:background-color 150ms}
.tlx-lifecycle .arrow:hover{background:var(--navy-50)}
.tlx-lifecycle .arrow svg{height:16px;width:16px}
.tlx-lifecycle .status-text{display:none;font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--slate-light)}
@media (min-width:640.02px){.tlx-lifecycle .status-text{display:inline}}
.tlx-lifecycle .play-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;width:36px;
  border-radius:50%;background:var(--navy);color:#fff;transition:background-color 150ms}
.tlx-lifecycle .play-btn:hover{background:var(--navy-deep)}
.tlx-lifecycle .play-btn svg{height:16px;width:16px}

/* ============================================================
   ROUND 2 ENHANCEMENTS · 2026-07-11 — all new rules lf-* (or
   overrides of existing scoped selectors, declared last so they
   win at equal specificity).
   ============================================================ */

/* ---- lf-bg: light network topology — DROPPED round 2b (Sam: back to white).
   Kept in markup/CSS but hidden so the section is clean white; the frame's
   ambient glow + border-beam below now carry the section on their own. ---- */
.tlx-lifecycle .lf-bg{display:none}
.tlx-lifecycle .lf-bg-disabled{position:absolute;inset:0;pointer-events:none}
.tlx-lifecycle .lf-net{position:absolute;inset:0;width:100%;height:100%}
.tlx-lifecycle .lf-link{fill:none;stroke:rgba(11,70,120,.12);stroke-width:1.4}
.tlx-lifecycle .lf-link.faint{stroke:rgba(11,70,120,.065)}
.tlx-lifecycle .lf-node{fill:rgba(11,70,120,.26)}
.tlx-lifecycle .lf-node.g{fill:rgba(30,154,68,.5)}
.tlx-lifecycle .lf-halo{fill:rgba(30,154,68,.15)}
.tlx-lifecycle .lf-pdot{fill:#1E9A44;opacity:.6}
.tlx-lifecycle .lf-glow{position:absolute;border-radius:50%;filter:blur(90px)}
.tlx-lifecycle .lf-glow-n{width:min(720px,92vw);height:720px;right:-260px;top:-320px;
  background:radial-gradient(circle,rgba(11,70,120,.10),transparent 66%)}
.tlx-lifecycle .lf-glow-g{width:min(640px,88vw);height:640px;left:-220px;bottom:-280px;
  background:radial-gradient(circle,rgba(30,154,68,.12),transparent 66%)}
.tlx-lifecycle .lf-dots{position:absolute;inset:0;
  background-image:radial-gradient(rgba(11,70,120,.13) 1px,transparent 1.4px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 90% 72% at 50% 26%,#000 0%,transparent 78%);
          mask-image:radial-gradient(ellipse 90% 72% at 50% 26%,#000 0%,transparent 78%);
  opacity:.45}
@media (prefers-reduced-motion: reduce){
  .tlx-lifecycle .lf-pulses{display:none} /* SMIL ignores the media query — hide the moving dots */
}

/* ---- browser frame: glass/depth pass ---- */
.tlx-lifecycle .frame-wrap::before{ /* soft ambient glow behind the frame */
  content:"";position:absolute;inset:-5% -7% -9%;pointer-events:none;z-index:0;border-radius:50%;
  background:
    radial-gradient(52% 46% at 70% 22%, rgba(11,70,120,.12) 0%, transparent 70%),
    radial-gradient(58% 52% at 24% 82%, rgba(30,154,68,.13) 0%, transparent 72%);
  filter:blur(14px);
}
.tlx-lifecycle .frame{
  position:relative;z-index:1;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(11,70,120,.12),
    0 1px 2px rgba(8,54,93,.06),
    0 44px 96px -44px rgba(8,54,93,.42),
    0 26px 64px -38px rgba(30,154,68,.24);
}
.tlx-lifecycle .frame::before{ /* gradient hairline across the top edge */
  content:"";position:absolute;top:0;left:10%;right:10%;height:1px;z-index:6;
  background:linear-gradient(90deg,transparent,rgba(30,154,68,.65),rgba(11,70,120,.35),transparent);
}
.tlx-lifecycle .controls{position:relative;z-index:1}

/* ---- BorderBeam tracer on the frame (green comet + fading tail) ----
   Fallback (older engines + reduced motion): static subtle green ring. */
.tlx-lifecycle .lf-beam{pointer-events:none;position:absolute;inset:0;border-radius:inherit;z-index:7;
  box-shadow:inset 0 0 0 1px rgba(30,154,68,.25)}
@supports (offset-path: rect(0 0 auto auto round 8px)){
  .tlx-lifecycle .lf-beam{
    --size:220;--duration:12;--anchor:90;--border-width:2;
    --color-from:#35C168;--color-to:#1E9A44;
    box-shadow:none;
    border:calc(var(--border-width)*1px) solid transparent;
    mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);
    mask-clip:padding-box,border-box;mask-composite:intersect;
    -webkit-mask:linear-gradient(transparent,transparent) padding-box,linear-gradient(#fff,#fff) border-box;
    -webkit-mask-composite:source-in;
  }
  .tlx-lifecycle .lf-beam::after{content:"";position:absolute;aspect-ratio:1;width:calc(var(--size)*1px);
    background:linear-gradient(to left,var(--color-from),var(--color-to),transparent);
    offset-path:rect(0 auto auto 0 round calc(var(--size)*1px));
    offset-anchor:calc(var(--anchor)*1%) 50%;
    animation:lfBeam calc(var(--duration)*1s) infinite linear var(--delay,0s)}
  @keyframes lfBeam{100%{offset-distance:100%}}
}
@media (prefers-reduced-motion: reduce){
  .tlx-lifecycle .lf-beam{border:0;mask:none;-webkit-mask:none;
    box-shadow:inset 0 0 0 1px rgba(30,154,68,.25)}
  .tlx-lifecycle .lf-beam::after{content:none;animation:none}
}
/* ---- mobile perf: a static filter:blur(90px)/blur(14px) still composites every
   frame and made the product page lag ("barely loads"). Hide the decorative glows;
   stop the box-shadow ping repaints. KEEP the route beam (.lf-beam, offset-path =
   GPU-cheap) and the orbital — per Sam. ---- */
@media (max-width:860px){
  .tlx-lifecycle .lf-glow,
  .tlx-lifecycle .frame-wrap::before{display:none}
  .tlx-lifecycle .m3-pulse::before,
  .tlx-lifecycle .m7-active-pin::before{animation:none}
}

/* ---- step-change choreography: one-shot green ping on the active number ---- */
.tlx-lifecycle .step.active .num{animation:lfNumPing .9s cubic-bezier(.22,1,.36,1) 1}
@keyframes lfNumPing{0%{box-shadow:0 0 0 0 rgba(30,154,68,.45)}100%{box-shadow:0 0 0 12px rgba(30,154,68,0)}}
/* active step card sits on the tinted ground with a touch more presence */
.tlx-lifecycle .step.active{box-shadow:inset 0 0 0 1px var(--border),0 14px 30px -22px rgba(8,54,93,.4),0 1px 2px rgba(8,54,93,.05)}
.tlx-lifecycle .progress{background:rgba(11,70,120,.12)}

/* ---- controls row refinement ---- */
.tlx-lifecycle .arrow{
  box-shadow:inset 0 0 0 1px var(--border),0 1px 2px rgba(8,54,93,.08);
  transition:background-color 150ms,box-shadow 150ms;
}
.tlx-lifecycle .arrow:hover{background:var(--navy-50);box-shadow:inset 0 0 0 1px rgba(11,70,120,.35),0 1px 2px rgba(8,54,93,.08)}
.tlx-lifecycle .play-btn{
  background:linear-gradient(180deg,var(--navy),var(--navy-deep));
  box-shadow:0 1px 2px rgba(8,54,93,.2),0 12px 26px -14px rgba(8,54,93,.65);
}
.tlx-lifecycle .play-btn:hover{background:linear-gradient(180deg,#0D5490,var(--navy))}

/* ---- reduced-motion additions for this round ---- */
@media (prefers-reduced-motion: reduce){
  .tlx-lifecycle .step.active .num{animation:none}
}

/* ============================================================ TIMELINE LAYOUT + DARK-BEZEL WIDGET (2026-07-15)
   Approved redesign (was "Direction A"). Desktop (>=1024px): the vertical
   rail becomes a horizontal numbered timeline; the active step's copy shows
   as a centered lead (reusing #mobile-copy, kept live by lifecycle.js); the
   per-step inline copy + step counter are hidden. Mobile keeps the base
   chips + copy layout untouched. The widget loses its browser chrome and
   sits as the original light interior inside a dark navy bezel.
   Scoped to .lf-va so the base layout is preserved below 1024px.
   ============================================================ */
.lf-va-head .tlx-section-copy{text-align:center;max-width:760px;margin:0 auto}
.tlx-lifecycle.lf-va{background:#fff}
.tlx-lifecycle.lf-va .lf-bg{display:none}
.tlx-lifecycle.lf-va .wrap{max-width:1080px}
.tlx-lifecycle.lf-va .counter{display:none}
@media (min-width:1024px){
  .tlx-lifecycle.lf-va .progress{display:none}
  .tlx-lifecycle.lf-va .grid{grid-template-columns:1fr;gap:36px;margin-top:8px}
  /* horizontal numbered timeline */
  .tlx-lifecycle.lf-va .rail{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
    position:relative;min-height:0 !important;padding:0 4px}
  .tlx-lifecycle.lf-va .rail::before{content:"";position:absolute;top:20px;left:5%;right:5%;height:2px;background:var(--navy-100)}
  .tlx-lifecycle.lf-va .rail li{flex:1;min-width:0}
  .tlx-lifecycle.lf-va .rail li + li{margin-top:0}
  .tlx-lifecycle.lf-va .step{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0;border:0;
    text-align:center;background:transparent;box-shadow:none;position:relative;z-index:1}
  .tlx-lifecycle.lf-va .step .num{height:40px;width:40px;margin:0;font-size:14px;background:#fff;color:var(--slate);
    box-shadow:inset 0 0 0 2px var(--navy-100);transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .3s,color .3s,box-shadow .3s}
  .tlx-lifecycle.lf-va .step:hover .num{box-shadow:inset 0 0 0 2px var(--navy);color:var(--navy)}
  .tlx-lifecycle.lf-va .step.active .num{background:var(--green-aa);color:#fff;box-shadow:0 0 0 6px var(--green-50);transform:scale(1.08)}
  .tlx-lifecycle.lf-va .step-content{flex:none;width:100%}
  .tlx-lifecycle.lf-va .step h3{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--slate-light)}
  .tlx-lifecycle.lf-va .step.active h3{color:var(--navy);font-weight:800}
  .tlx-lifecycle.lf-va .step .body-wrap{display:none}
  /* active step copy as centered lead (mobile-copy, kept live by JS) */
  .tlx-lifecycle.lf-va .mobile-only{display:block}
  .tlx-lifecycle.lf-va .chips{display:none}
  .tlx-lifecycle.lf-va .mobile-copy{margin:4px auto 0;max-width:660px;text-align:center}
  .tlx-lifecycle.lf-va .mobile-copy h3{font-size:clamp(22px,2.3vw,30px);color:var(--navy);letter-spacing:-.02em}
  .tlx-lifecycle.lf-va .mobile-copy p{font-size:15px;line-height:1.65;color:var(--slate);max-width:60ch;margin:12px auto 0}
  /* frame centered + capped */
  .tlx-lifecycle.lf-va .frame-wrap{max-width:880px;margin:0 auto;width:100%}
  .tlx-lifecycle.lf-va .controls{max-width:880px;margin-left:auto;margin-right:auto}
}
/* Widget: no browser chrome, original light interior in a dark bezel */
.tlx-lifecycle.lf-va .chrome{display:none}
.tlx-lifecycle.lf-va .frame{background:linear-gradient(180deg,#123049 0%,#0b2135 100%);
  padding:clamp(8px,.8vw,11px);border-radius:20px;
  box-shadow:0 1px 2px rgba(8,54,93,.12),0 44px 96px -44px rgba(8,54,93,.5),0 26px 64px -40px rgba(30,154,68,.16)}
.tlx-lifecycle.lf-va .screen{border-radius:12px;overflow:hidden}