/* Leads and one lead. Layout only: tokens and components come from ic.css. Class prefix ld-. */

/* ---------- shared lead pieces (also used by other pages) ---------- */
.ld-co{display:flex;gap:12px;align-items:center;min-width:0}
.ld-co-tile{position:relative;width:36px;height:36px;border-radius:10px;background:var(--ic-surface-3);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--ic-ink);flex-shrink:0;overflow:hidden}
.ld-co-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:5px;box-sizing:border-box}
.ld-co-tile img[hidden]{display:none}
.ld-co-tile.xl{width:56px;height:56px;border-radius:14px;font-family:var(--ic-display);font-size:24px}
.ld-co-tile.xl img{padding:8px}
.ld-co-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.ld-co-name{font-size:15px;font-weight:600;color:var(--ic-ink)!important;text-decoration:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.ld-co-name:hover{color:var(--ic-blue)!important;text-decoration:underline!important}
.ld-co-contact{display:flex;align-items:center;gap:4px 8px;flex-wrap:wrap;min-width:0;font-size:13px;color:var(--ic-ink-4);line-height:1.35}
.ld-co-value{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-co-flag{font-size:12px;font-weight:600;color:var(--ic-amber-ink)}
a.ld-co-flag{color:var(--ic-blue)}
.ld-co-missing{font-style:italic}
.ld-sample{align-self:flex-start;margin-top:2px}

.ld-market{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:13px;color:var(--ic-ink-4);line-height:1.35}
.ld-market-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-market .ld-flag{width:18px;height:13px;margin:0;border:1px solid var(--ic-line);border-radius:2px;object-fit:cover;flex-shrink:0}

.ld-score{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:13px}
.ld-score-text{font-weight:700;color:var(--ic-ink);white-space:nowrap}
.ld-score-text b{font-weight:700}
.ld-score-of{font-weight:500;color:var(--ic-ink-4)}
.ld-score-bar{display:block;height:6px;border-radius:99px;background:var(--ic-line-4);overflow:hidden;max-width:150px}
.ld-score-bar>i{display:block;height:100%;border-radius:99px;background:var(--ic-blue)}
.ld-score-bar.strong>i{background:var(--ic-green)}
.ld-score-bar.weak>i{background:#B7791F}

.ld-stage{justify-self:start}
.ld-muted-pill{background:var(--ic-line-4);color:var(--ic-ink-2)}
.ld-pill-wa{background:#E7F6EF;color:#0E6B45}

.ld-website{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600}
.ld-website.none{color:var(--ic-ink-4);font-weight:500;min-height:32px}

.ld-reason{display:flex;flex-direction:column;gap:4px}
.ld-reason-title{font-size:14px;font-weight:700}
.ld-reason p{margin:0;font-size:15px;line-height:1.6;color:var(--ic-ink-2)}

.ld-criteria{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border:1px solid var(--ic-line-2);border-radius:12px;background:#fff}
.ld-criteria-title{font-size:14px;font-weight:700}
.ld-criterion{display:flex;flex-direction:column;gap:6px}
.ld-criterion+.ld-criterion{padding-top:12px;border-top:1px solid var(--ic-line-3)}
.ld-criterion p{margin:0}
.ld-criterion-quote{margin:0;font-style:italic}

.ld-langswitch{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ld-lang{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:var(--ic-line-4)}
.ld-lang button{height:30px;padding:0 10px;border:none;border-radius:6px;background:transparent;color:var(--ic-ink-2);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;line-height:1}
.ld-lang button[aria-pressed=true]{background:#fff;color:var(--ic-ink);box-shadow:0 1px 2px rgba(23,25,30,.08)}

.ld-wa.wa-preview{margin:0;background:#fff;border:1px solid var(--ic-line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px}
.ld-wa p{margin:0}
.ld-wa .ic-input{margin:0;max-width:none}
.ld-wa-bubble.wa-message-preview{max-width:560px;margin:0;padding:14px 16px;border-radius:14px 14px 14px 4px;background:#E7F6EF;border:1px solid #C6E3D4;color:#123D2A;display:flex;flex-direction:column;gap:6px}
.ld-wa-bubble small{font-size:12px;color:#3F6651}
.ld-wa-bubble p{white-space:pre-wrap;font-size:15px;line-height:1.55}
.ld-disclosure{margin:0;border:1px solid var(--ic-line-2);border-radius:12px;padding:10px 14px;background:var(--ic-surface-2)}
.ld-disclosure>summary{cursor:pointer;font-size:14px;font-weight:600;min-height:28px;display:flex;align-items:center}
.ld-disclosure[open]>summary{margin-bottom:8px}

/* ---------- lead list ---------- */
.ld-filters{display:flex;flex-direction:column;gap:14px;min-width:0}
.ld-filterform{display:flex;flex-direction:column;gap:10px;margin:0;min-width:0}
.ld-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ld-search{display:flex;align-items:center;gap:8px;flex:1 1 280px;min-width:0;height:44px;box-sizing:border-box;padding:0 12px;border-radius:10px;border:1px solid var(--ic-field);background:#fff;color:var(--ic-ink-4);margin:0;cursor:text}
.ld-search:focus-within{border-color:var(--ic-blue);box-shadow:0 0 0 3px var(--ic-blue-line)}
.ld-search input{flex:1 1 auto;min-width:0;width:auto;height:auto;border:none;outline:none;background:transparent;padding:0;margin:0;font-size:15px;color:var(--ic-ink);box-shadow:none}
.ld-search input:focus,.ld-search input:focus-visible{outline:none;box-shadow:none}
.ld-toggle{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;box-sizing:border-box;padding:0 14px;border-radius:10px;border:1px solid var(--ic-field);background:#fff;color:var(--ic-ink);font-size:14px;font-weight:600;cursor:pointer;margin:0;white-space:nowrap}
.ld-toggle input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ld-toggle:has(input:checked){border-color:var(--ic-dark);background:var(--ic-dark);color:#fff}
.ld-toggle:has(input:focus-visible){outline:3px solid #86A8FF;outline-offset:2px}
.ld-sort{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:var(--ic-ink-3);margin:0;white-space:nowrap}
.ld-sort .ic-select{width:auto;min-width:0;font-size:14px}
.ld-more{border:1px solid var(--ic-line);border-radius:12px;background:#fff}
.ld-more>summary{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;cursor:pointer;font-size:14px;font-weight:600;color:var(--ic-ink);list-style:none}
.ld-more>summary::-webkit-details-marker{display:none}
.ld-more>summary .ic-subtle{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ld-more[open]>summary{border-bottom:1px solid var(--ic-line-2)}
.ld-more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px;padding:14px}
.ld-more-grid .ic-field{font-size:13px}
.ld-more-foot{padding:0 14px 14px}
.ld-applied{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ld-chip-remove{display:inline-flex;align-items:center;gap:6px;min-height:32px;box-sizing:border-box;padding:0 10px;border-radius:99px;background:var(--ic-blue-bg);color:var(--ic-blue-ink)!important;font-size:13px;font-weight:600;text-decoration:none!important;max-width:100%;overflow-wrap:anywhere}
.ld-chip-remove:hover{background:var(--ic-blue-line)}

.ld-listbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ld-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--ic-ink-2)}
.ld-pages{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ld-pagebtn{min-width:36px;padding:0 10px}
.ld-gap{color:var(--ic-ink-5);padding:0 2px}

.ld-table{min-width:0}
.ld-grid{grid-template-columns:minmax(0,2.3fr) 150px minmax(0,1.1fr) 150px 180px 36px}
.ld-right{text-align:right}
.ld-item{border-bottom:1px solid var(--ic-line-2)}
.ld-item:last-child{border-bottom:none}
.ld-item>.ic-tr{border-bottom:none}
.ld-item.kept>.ic-tr{box-shadow:inset 3px 0 var(--ic-green)}
.ld-item.excluded .ld-co-name{color:var(--ic-ink-3)!important}
.ld-item.open>.ic-tr{background:var(--ic-surface-2)}
.ld-cell-stage{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.ld-note{font-size:12px;color:var(--ic-ink-4);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-note.amber{color:var(--ic-amber-ink);font-weight:600}
.ld-cell-reach{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ld-cell-next{display:flex;justify-content:flex-end;align-items:center;gap:6px;flex-wrap:wrap}
.ld-next{font-size:14px;font-weight:600;min-height:36px;display:inline-flex;align-items:center}
.ld-cell-more{display:flex;justify-content:flex-end}
.ld-chevron .ic-icon{transition:transform .15s}
.ld-chevron[aria-expanded=true] .ic-icon{transform:rotate(180deg)}
.ld-drop{display:flex;flex-direction:column;gap:10px;padding:14px 18px;background:var(--ic-surface-2);border-top:1px solid var(--ic-line-2)}
.ld-drop .ic-field{max-width:560px}
.ld-expand{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px 28px;padding:16px 18px 18px 66px;background:var(--ic-surface-2);border-top:1px solid var(--ic-line-2)}
.ld-expand-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.ld-expand-main p{margin:0}
.ld-expand-foot{grid-column:1/-1}
.ld-facts{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.ld-facts>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ld-facts dt{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ic-ink-4)}
.ld-facts dd{margin:0;font-size:14px;color:var(--ic-ink);display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.ld-facts dd .ld-note{white-space:normal}
.ld-webquote{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:10px;background:var(--ic-surface-2);border:1px solid var(--ic-line-2)}
.ld-expand .ld-webquote{background:#fff}
.ld-webquote>span:last-child{font-size:14px;line-height:1.5;font-style:italic;color:var(--ic-ink)}

/* ---------- one lead ---------- */
.ld-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;background:#fff;border:1px solid var(--ic-line);border-radius:16px;padding:22px 24px}
.ld-hero-main{display:flex;gap:16px;align-items:flex-start;min-width:0}
.ld-hero-text{min-width:0}
.ld-hero-name{margin:0;font-family:var(--ic-display);font-size:28px;line-height:1.15;font-weight:700;color:var(--ic-ink);overflow-wrap:anywhere}
.ld-subline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px;color:var(--ic-ink-3)}
.ld-subline .ld-market{font-size:14px;color:var(--ic-ink-3)}
.ld-hero-actions{flex-shrink:0;justify-content:flex-end}
.ld-stop{color:var(--ic-red-ink)!important}
.ld-resume{border-color:var(--ic-green)!important;color:var(--ic-green-ink)!important}
.ld-detail-grid{gap:24px}
.ld-main{gap:16px}
.ld-rail{gap:14px}
.ld-why p,.ld-history p{margin:0}
.ld-evchip{font-size:13px;padding:4px 10px;border-radius:99px;background:var(--ic-surface-3);color:var(--ic-ink)}
.ld-break{overflow-wrap:anywhere}
.ld-self-start{align-self:flex-start}
/* A rail button whose label is longer in Malay than the 360px rail: let it wrap instead of pushing the page sideways. */
.ic-btn.ld-self-start{max-width:100%;height:auto;min-height:40px;padding-top:9px;padding-bottom:9px;white-space:normal;line-height:1.3;text-align:center}

.ld-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ld-step{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px}
.ld-track{display:flex;flex-direction:column;align-items:center}
.ld-dot{width:12px;height:12px;border-radius:50%;margin-top:4px;box-sizing:border-box;flex-shrink:0}
.ld-dot.done{background:var(--ic-green)}
.ld-dot.planned{border:2px solid #B7791F}
.ld-dot.waiting{border:2px solid var(--ic-field)}
.ld-dot.problem{background:var(--ic-red)}
.ld-dot.stopped{background:var(--ic-ink-5)}
.ld-line{width:2px;flex-grow:1;background:var(--ic-line);margin-top:2px}
.ld-step-body{display:flex;flex-direction:column;gap:4px;padding-bottom:18px;min-width:0}
.ld-step:last-child .ld-step-body{padding-bottom:0}
.ld-step-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ld-step-title{font-size:15px;font-weight:600}
.ld-chip.email{background:var(--ic-blue-bg);color:var(--ic-blue-ink)}
.ld-chip.wa{background:#E7F6EF;color:#0E6B45}
.ld-chip.reply{background:var(--ic-green-bg);color:var(--ic-green-ink)}
.ld-step-note{font-size:13px;line-height:1.45;color:var(--ic-ink-3)}
.ld-step-note.red{color:var(--ic-red-ink)}
.ld-step-note.amber{color:var(--ic-amber-ink)}
.ld-step-note.green{color:var(--ic-green-ink)}
.ld-show{margin:0}
.ld-show>summary{cursor:pointer;display:inline-flex;align-items:center;min-height:32px;font-size:14px;font-weight:600;color:var(--ic-blue)}
.ld-mail{margin-top:6px;padding:14px 16px;border-radius:12px;background:var(--ic-surface-2);border:1px solid var(--ic-line-2);display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.6;color:var(--ic-ink)}
.ld-mail p{white-space:pre-wrap;overflow-wrap:anywhere}

.ld-rail-card{gap:12px}
.ld-chans{display:flex;gap:8px;flex-wrap:wrap}
.ld-chan{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:99px;border:1px dashed #B9B7B0;background:#fff;color:var(--ic-ink-3);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.ld-chan.email[aria-pressed=true]{border:1px solid var(--ic-blue-ink);background:var(--ic-blue-ink);color:#fff}
.ld-chan.wa[aria-pressed=true]{border:1px solid #0E6B45;background:#0E6B45;color:#fff}
.ld-chan:disabled{opacity:.5;cursor:not-allowed}
.ld-inline-field{display:flex;align-items:center;gap:8px;font-size:14px;margin:0}
.ld-inline-field .ic-select{flex:1 1 auto;min-width:0;height:38px}
.ld-reach{display:flex;flex-direction:column;gap:4px;min-width:0}
.ld-reach.sep{padding-top:12px;border-top:1px solid var(--ic-line-2)}
.ld-reach .ic-btn{margin-top:4px}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .ld-grid{grid-template-columns:minmax(0,2fr) 136px minmax(0,1fr) 128px 170px 36px;gap:12px}
}
@media (max-width:1100px){
  .ld-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* ic.css stacks .ic-railgrid here, but its .w360 width rule is more specific and would win. */
  .ic-railgrid.ld-detail-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  /* The table becomes stacked rows: company, then match and stage, then reach and next step. */
  .ld-table>.ic-tr.th{display:none}
  .ld-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;grid-template-areas:"co co more" "match stage stage" "reach next next";gap:10px 12px;padding:14px}
  .ld-cell-co{grid-area:co;min-width:0}
  .ld-cell-match{grid-area:match}
  .ld-cell-stage{grid-area:stage}
  .ld-cell-reach{grid-area:reach}
  .ld-cell-next{grid-area:next}
  .ld-cell-more{grid-area:more;align-self:start}
  .ld-expand{grid-template-columns:minmax(0,1fr);padding:14px}
  .ld-drop{padding:14px}
}
@media (max-width:720px){
  .ld-hero{flex-direction:column;padding:18px}
  .ld-hero-actions{justify-content:flex-start}
  .ld-hero-name{font-size:24px}
  .ld-co-tile.xl{width:48px;height:48px;font-size:20px}
  .ld-more-grid{grid-template-columns:minmax(0,1fr)}
  .ld-more>summary .ic-subtle{display:none}
  .ld-search{flex-basis:100%}
  .ld-listbar{align-items:flex-start}
}