/* Leads Analytics (2026-10-02) — assets/leads-analytics.js. Reads the v2 tokens
   from assets/lv2.css; controls use the shared --ctl-* classes. */
:is(#leads-analytics-view,#lap-section) .la-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:4px 0 16px}
:is(#leads-analytics-view,#lap-section) .la-head__l{min-width:0}
:is(#leads-analytics-view,#lap-section) .la-sp{flex:1}
:is(#leads-analytics-view,#lap-section) .la-kpis{margin-bottom:var(--lv-gap)}
:is(#leads-analytics-view,#lap-section) .la-legend{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:11px;color:var(--lv-faint)}
:is(#leads-analytics-view,#lap-section) .la-mini{padding:12px 14px 6px;border:1px solid var(--lv-border-soft);border-radius:12px;background:#FBFCFE}
:is(#leads-analytics-view,#lap-section) .lv2-panel .lv2-chsum{margin-bottom:10px}
/* .la-eyebrow reads the TYPE SCALE in lv2.css (2026-10-03) */
:is(#leads-analytics-view,#lap-section) .la-bar-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0 0 14px}
:is(#leads-analytics-view,#lap-section) .la-bar-row .ui-inp{width:150px}
:is(#leads-analytics-view,#lap-section) .la-bar-row .ui-sel{max-width:260px}
:is(#leads-analytics-view,#lap-section) .la-warn{font-size:11.5px;font-weight:600;color:var(--lv-warning-ink);background:var(--lv-warning-soft);border-radius:8px;padding:5px 9px}
:is(#leads-analytics-view,#lap-section) .la-msg .tbtn{margin-left:8px}
:is(#leads-analytics-view,#lap-section) .la-msg{padding:22px 24px;font-size:12.5px;color:var(--lv-muted)}
:is(#leads-analytics-view,#lap-section) .la-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--lv-gap);align-items:stretch}
:is(#leads-analytics-view,#lap-section) .la-svd b{font-variant-numeric:tabular-nums;font-weight:700;min-width:52px;text-align:right}
:is(#leads-analytics-view,#lap-section) .la-bar{flex:1;height:6px;border-radius:3px;background:#EEF2F7;overflow:hidden}
:is(#leads-analytics-view,#lap-section) .la-bar i{display:block;height:100%;border-radius:3px;background:var(--lv-primary)}
:is(#leads-analytics-view,#lap-section) .la-note{margin-top:10px;font-size:12px;color:var(--lv-body)}
:is(#leads-analytics-view,#lap-section) .la-note b{font-weight:700;color:var(--lv-text)}
:is(#leads-analytics-view,#lap-section) .la-empty{padding:14px 2px;font-size:12px;color:var(--lv-muted)}
/* block-flow (2026-10-03): one list is readable from 320px (118px label, bar,
   two figures). The count is 1 · 2 · 3 · 6 — divisors of six, so no row is
   left half empty — chosen by the panel's width, and the lists share the rest
   so the last one ends flush right. */
:is(#leads-analytics-view,#lap-section) .la-flow{container-type:inline-size}
:is(#leads-analytics-view,#lap-section) .la-grid3{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 18px}
@container (min-width:658px){:is(#leads-analytics-view,#lap-section) .la-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:996px){:is(#leads-analytics-view,#lap-section) .la-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:2010px){:is(#leads-analytics-view,#lap-section) .la-grid3{grid-template-columns:repeat(6,minmax(0,1fr))}}
:is(#leads-analytics-view,#lap-section) .la-mini{min-width:0}
:is(#leads-analytics-view,#lap-section) .la-mini__t{font-size:12.5px;font-weight:700;color:var(--lv-text)}
:is(#leads-analytics-view,#lap-section) .la-mini__s{font-size:var(--t-item-sub);color:var(--lv-faint);margin:var(--g-item) 0 4px}
:is(#leads-analytics-view,#lap-section) .la-foot{margin:14px 2px 24px;font-size:var(--t-foot);color:var(--lv-faint);line-height:1.5}
@media (max-width:1100px){
  :is(#leads-analytics-view,#lap-section) .la-bento > *{grid-column:span 12 !important}
}

/* Compact horizontal bars — label · bar · rate · leads */
:is(#leads-analytics-view,#lap-section) .la-hb{display:grid;gap:7px;margin-top:4px}
:is(#leads-analytics-view,#lap-section) .la-hb__r{display:grid;grid-template-columns:minmax(0,118px) minmax(30px,1fr) 52px 54px;align-items:center;gap:10px;padding:5px 8px;margin:0 -8px;border-radius:8px;cursor:default;transition:background var(--lv-fast) var(--lv-ease)}
:is(#leads-analytics-view,#lap-section) .la-hb__r:hover{background:#F5F8FF}
:is(#leads-analytics-view,#lap-section) .la-hb__l{font-size:12px;font-weight:600;color:var(--lv-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#leads-analytics-view,#lap-section) .la-hb__t{height:8px;border-radius:4px;background:#EEF2F7;overflow:hidden}
:is(#leads-analytics-view,#lap-section) .la-hb__t i{display:block;height:100%;border-radius:4px;background:#93C5FD;animation:laGrow .6s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}
:is(#leads-analytics-view,#lap-section) .la-hb__r.is-top .la-hb__t i{background:var(--lv-primary)}
:is(#leads-analytics-view,#lap-section) .la-hb__r.is-thin .la-hb__t i{background:#E2E8F0}
:is(#leads-analytics-view,#lap-section) .la-hb__r.is-thin .la-hb__l,:is(#leads-analytics-view,#lap-section) .la-hb__r.is-thin .la-hb__v{color:var(--lv-faint)}
:is(#leads-analytics-view,#lap-section) .la-hb__v{font-size:12.5px;font-weight:800;color:var(--lv-text);text-align:right;font-variant-numeric:tabular-nums}
:is(#leads-analytics-view,#lap-section) .la-hb__r.is-top .la-hb__v{color:var(--lv-primary)}
:is(#leads-analytics-view,#lap-section) .la-hb__n{font-size:11px;color:var(--lv-faint);text-align:right;font-variant-numeric:tabular-nums}
@keyframes laGrow{from{transform:scaleX(0)}to{transform:none}}
:is(#leads-analytics-view,#lap-section) .la-mini .la-hb__r{grid-template-columns:minmax(0,70px) minmax(30px,1fr) 46px 46px}

/* SOP attempts · by project (2026-10-08) */
:is(#leads-analytics-view,#lap-section) .la-sop-scroll{max-height:520px}
/* The SOP and hygiene tables follow the lv2-tbl standard (2026-10-08, his
   check: "udah ngikutin standard system belum? yang same width and rata
   tengah"): fixed layout, the name column 220px and left, every measured column
   the same width and centred. Headers are short and single-line; the full
   wording is the column's hover. min-width comes from the column count (set
   inline), so a narrow screen scrolls sideways instead of squeezing a column. */
:is(#leads-analytics-view,#lap-section) .la-sop-tbl{table-layout:fixed}
:is(#leads-analytics-view,#lap-section) .la-sop-tbl th,:is(#leads-analytics-view,#lap-section) .la-sop-tbl td{white-space:nowrap}
:is(#leads-analytics-view,#lap-section) .la-sop-tbl th:first-child,:is(#leads-analytics-view,#lap-section) .la-sop-tbl td:first-child{width:220px;text-align:left;overflow:hidden;text-overflow:ellipsis}
:is(#leads-analytics-view,#lap-section) .la-sop-tbl th[data-tip]{cursor:help}
:is(#leads-analytics-view,#lap-section) .la-sop-p{cursor:pointer;font-weight:600;color:var(--lv-ink,#0F172A)}
:is(#leads-analytics-view,#lap-section) .la-sop-p:hover{color:#2563EB}
:is(#leads-analytics-view,#lap-section) .la-hyg-o{font-weight:600;color:var(--lv-ink,#0F172A)}
:is(#leads-analytics-view,#lap-section) .la-sop-tbl td.la-sop-bad{color:#DC2626;font-weight:700}
:is(#leads-analytics-view,#lap-section) .la-sop-tbl td.la-sop-warn{color:#B45309;font-weight:600}
:is(#leads-analytics-view,#lap-section) .la-sop-tot td{font-weight:800;border-top:2px solid var(--lv-border-soft,#E2E8F0)}
:is(#leads-analytics-view,#lap-section) .lv2-panel__head[data-tip],:is(#leads-analytics-view,#lap-section) .ui-ctl-lbl[data-tip],:is(#leads-analytics-view,#lap-section) .lv2-chsum [data-tip]{cursor:help}

/* Project Detail → Leads Analytics (2026-10-08): the body of the card, as Lead Review's .lrv-q */
#lap-section .lap-body{padding:16px 18px 18px;background:#FCFDFF;border-top:1px solid var(--lv-border-soft)}
#lap-section .la-bar-row{margin-top:2px}

/* New SOP · Old vs New (2026-10-17) */
:is(#leads-analytics-view,#lap-section) .la-sopx-tbl{width:100%;table-layout:fixed}
:is(#leads-analytics-view,#lap-section) .la-sopx-tbl th:first-child,:is(#leads-analytics-view,#lap-section) .la-sopx-tbl td:first-child{width:34%;text-align:left}
:is(#leads-analytics-view,#lap-section) .la-sopx-tbl td:first-child{font-weight:600;color:var(--lv-ink,#0F172A);cursor:help}
:is(#leads-analytics-view,#lap-section) .la-sopx-tbl th small,:is(#leads-analytics-view,#lap-section) .la-sopx-tbl td small{display:block;font-size:10.5px;font-weight:500;color:var(--lv-faint,#94A3B8);text-transform:none;letter-spacing:0}
:is(#leads-analytics-view,#lap-section) .la-sopx-tbl td b{font-weight:700;font-variant-numeric:tabular-nums}
:is(#leads-analytics-view,#lap-section) .la-sop-d{font-weight:700;font-variant-numeric:tabular-nums;color:var(--lv-faint,#94A3B8)}
:is(#leads-analytics-view,#lap-section) .la-sop-d--up{color:#16A34A}
:is(#leads-analytics-view,#lap-section) .la-sop-d--dn{color:#DC2626}
:is(#leads-analytics-view,#lap-section) .la-sopx-note{margin-top:12px;padding:10px 12px;border-radius:10px;background:#FFF7ED;border:1px solid #FED7AA;color:#7C2D12;font-size:11.5px;line-height:1.55}
:is(#leads-analytics-view,#lap-section) .la-sopx-go{all:unset;cursor:pointer;color:#2563EB;font-weight:800;border-bottom:1px dashed currentColor}
:is(#leads-analytics-view,#lap-section) .la-sopx-go:hover{color:#1D4ED8}
:is(#leads-analytics-view,#lap-section) .la-sopx-tbl td.la-sopx-thin b{color:var(--lv-faint,#94A3B8);font-weight:600}