/* The Leads page (portal/leads.js): the header with the finding, the People / Activity switch, the four counts that
   are also the filter, the list of people beside the open person, and the Activity stream. The Activity table and the
   visit steps borrow tracking.css and website.css. Colour only on what it means: hot and warm, and each person's own
   pale tint, which is identity, not data. Dark is the portal's default; light overrides follow it. */
#page-leads{
  --leads-active:#2e3440; --leads-rule:#2c313b; --leads-well:#1f232b; --leads-track:#59606e; --leads-rule-strong:#3c4350;
  --hot-bg:#4a1f1a; --hot-ink:#ffb3a3; --hot-dot:#f0705a;
  --warm-bg:#4d2f1c; --warm-ink:#ffb88a; --warm-dot:#e59a4f;
  --funnel-all:#4a5160; --funnel-engaged:#727b8c;
  --ease-out:cubic-bezier(.16,1,.3,1);
  container:leads-page / inline-size;
}
:root[data-theme="light"] #page-leads{
  --leads-active:#ececea; --leads-rule:#efefed; --leads-well:#f6f6f4; --leads-track:#c4c4c0; --leads-rule-strong:#dededb;
  --hot-bg:#fde3dd; --hot-ink:#8f1d0f; --hot-dot:#d4401f;
  --warm-bg:#ffeadb; --warm-ink:#8c3d0a; --warm-dot:#e08a2c;
  --funnel-all:#d3d3cf; --funnel-engaged:#a3a39e;
}

/* ── The page: the header over everything; on a wide screen the funnel has a column of its own on the right, so the
   page may grow past the portal's usual 1180 px. Narrower, there is no funnel. ── */
main:has(> #page-leads.on){max-width:1600px}
.leads-funnel-pane{display:none}
@container leads-page (min-width:1260px){
  .leads-page:has(> .leads-funnel-pane:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) 296px;column-gap:24px;align-items:start}
  .leads-page:has(> .leads-funnel-pane:not([hidden])) > .leads-head{grid-column:1 / -1}
  .leads-page > .leads-body{grid-column:1;min-width:0}
  .leads-funnel-pane:not([hidden]){display:block;position:sticky;top:16px;grid-column:2;grid-row:2}
}

/* ── Header: the title and the finding; the period, refresh and CSV on the right ── */
.leads-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;margin-bottom:20px}
.leads-head-copy{flex:1 1 360px;min-width:0}
#page-leads .leads-head h2{font-size:28px;line-height:1.15;letter-spacing:-.03em}
.leads-finding{min-height:22px;margin-top:8px;color:var(--text);font-size:14px;line-height:1.5;max-width:90ch}
.leads-name-link{padding:0;border:0;background:none;color:var(--text);font:inherit;font-weight:600;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;cursor:pointer}
@media(hover:hover){.leads-name-link:hover{text-decoration-color:currentColor}}
.leads-head-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.leads-period{width:180px}
.leads-period .v-control,.leads-source .v-control{display:flex;width:100%;min-height:40px;border-radius:10px}
.leads-icon-button,.leads-text-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;flex:none;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;cursor:pointer;transition:background-color .15s,border-color .15s,scale .15s ease-out;-webkit-tap-highlight-color:transparent}
.leads-icon-button{width:40px;padding:0}
.leads-text-button{gap:8px;padding:8px 14px 8px 12px;font-size:13px;font-weight:600;line-height:1.2}
.leads-icon-button svg,.leads-text-button svg{width:16px;height:16px;flex:none}
.leads-text-button svg{color:var(--muted)}
.leads-text-button[hidden]{display:none}
.leads-icon-button.is-busy svg{opacity:.4}
.leads-text-button:disabled{opacity:.45;cursor:default}
@media(hover:hover){:is(.leads-icon-button,.leads-text-button):hover:not(:disabled){background:var(--panel-2);border-color:var(--dim)}}
:is(.leads-icon-button,.leads-text-button):focus-visible{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}

/* ── The switch between People and Activity, the source and the search ── */
.leads-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin-bottom:14px}
.leads-views{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:#2a2f39}
:root[data-theme="light"] .leads-views{background:#ededeb}
.leads-views button{min-height:32px;padding:6px 14px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s,scale .15s ease-out}
.leads-views button[aria-pressed="true"]{background:#3a4250;color:var(--text)}
:root[data-theme="light"] .leads-views button[aria-pressed="true"]{background:#fff;color:#181818}
@media(hover:hover){.leads-views button[aria-pressed="false"]:hover{color:var(--text)}}
.leads-views button:focus-visible{outline:2px solid var(--focus);outline-offset:1px;box-shadow:none}
.leads-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.leads-source{width:170px}
.leads-search{position:relative;width:260px}
.leads-search[hidden]{display:none}
.leads-search svg{position:absolute;left:12px;top:50%;width:16px;height:16px;color:var(--muted);transform:translateY(-50%);pointer-events:none}
.leads-search input{width:100%;min-height:40px;padding:8px 12px 8px 36px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:14px}
@media(hover:hover){.leads-search input:hover{border-color:var(--dim)}}
.leads-search input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}
.leads-notice{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0 0 14px;padding:10px 14px;border-radius:10px;background:var(--leads-well);color:var(--muted);font-size:13px;line-height:1.5}

/* ── The four counts, one container split by hairlines; each one is a filter of the list ── */
/* A track like the People / Activity switch: the chosen count sits on a raised tile that slides to it (--i, set by
   leads.js); the others are flat on the track. */
.leads-strip{--strip-pad:4px;--strip-gap:4px;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--strip-gap);margin-bottom:16px;padding:var(--strip-pad);border-radius:14px;background:#2a2f39}
:root[data-theme="light"] .leads-strip{background:#ededeb}
.leads-strip[hidden]{display:none}
.leads-strip::before{content:'';position:absolute;top:var(--strip-pad);bottom:var(--strip-pad);left:var(--strip-pad);width:calc((100% - 2 * var(--strip-pad) - 3 * var(--strip-gap)) / 4);border-radius:10px;background:#3a4250;transform:translateX(calc(var(--i, 0) * (100% + var(--strip-gap))));transition:transform .32s var(--ease-out)}
:root[data-theme="light"] .leads-strip::before{background:#fff;outline:1px solid rgba(24,24,24,.06)}
.leads-strip button{position:relative;display:grid;align-content:start;gap:4px;min-width:0;padding:11px 14px 12px;border:0;border-radius:10px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color .15s}
@media(hover:hover){.leads-strip button[aria-pressed="false"]:hover{background:rgba(255,255,255,.04)}:root[data-theme="light"] .leads-strip button[aria-pressed="false"]:hover{background:rgba(24,24,24,.035)}}
.leads-strip button:focus-visible{z-index:1;outline:2px solid var(--focus);outline-offset:-2px;box-shadow:none}
.leads-strip-label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:600;line-height:1.4;transition:color .15s}
.leads-strip button[aria-pressed="true"] .leads-strip-label{color:var(--text)}
.leads-strip-value{min-height:28px;font-size:24px;line-height:1.15;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.leads-strip-note{color:var(--muted);font-size:12px;line-height:1.4}
.leads-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--dim)}
.leads-dot[data-interest="hot"]{background:var(--hot-dot)}
.leads-dot[data-interest="warm"]{background:var(--warm-dot)}

/* ── Who to check first (leadPriority): the top suggestion with the signs behind it; the next few beside it. Narrow,
   the next few go under it. ── */
.leads-next-wrap{container:leads-next / inline-size;margin-bottom:12px}
.leads-next-wrap[hidden]{display:none}
.leads-next{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.leads-next.is-loading{grid-template-columns:minmax(0,1fr)}
.leads-next-main{display:grid;grid-template-rows:auto 1fr;gap:12px;min-width:0;padding:16px 20px 18px}
.leads-next-then{display:grid;align-content:start;gap:6px;min-width:0;padding:16px 12px 12px;border-left:1px solid var(--leads-rule)}
#page-leads .leads-next-label{color:var(--muted);font-size:12px;font-weight:600;line-height:1.4}
.leads-next-then .leads-next-label{padding-left:8px}
.leads-next-who{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;align-self:center;gap:16px}
.leads-next-copy{display:grid;gap:4px;min-width:0}
.leads-next-name{display:flex;align-items:center;gap:10px;min-width:0;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.leads-next-name span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leads-next-why{color:var(--muted);font-size:14px;line-height:1.45}
.leads-next-why strong{color:var(--text);font-weight:600}
.leads-next-why time{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Each sign starts with its dot; the list sits one dot to the left and is clipped, so a line never starts with one. */
.leads-next-copy{overflow:hidden}
.leads-next-signals{display:flex;flex-wrap:wrap;margin:0 0 0 -18px;padding:0;list-style:none;color:var(--muted);font-size:13px;line-height:1.5}
.leads-next-signals li{position:relative;padding-left:18px}
.leads-next-signals li::before{content:'·';position:absolute;left:0;width:18px;text-align:center}
#page-leads .leads-next-open{padding:8px 12px 8px 14px}
.leads-next-open-done{display:none}
.leads-next-open[aria-current="true"]{color:var(--muted);cursor:default}
.leads-next-open[aria-current="true"] .leads-next-open-idle,.leads-next-open[aria-current="true"] svg{display:none}
.leads-next-open[aria-current="true"] .leads-next-open-done{display:inline}
.leads-next-then ol{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.leads-next-row{display:grid;grid-template-columns:14px 28px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 8px;border:0;border-radius:8px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color .15s}
@media(hover:hover){.leads-next-row:hover{background:var(--panel-2)}}
.leads-next-row[aria-current="true"]{background:var(--leads-active)}
.leads-next-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;box-shadow:none}
.leads-next-rank{color:var(--muted);font-size:12px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.leads-next-row .leads-avatar{width:28px;height:28px;font-size:11px}
.leads-next-row .leads-avatar svg{width:15px;height:15px}
.leads-next-row-main{display:flex;align-items:baseline;gap:8px;min-width:0}
.leads-next-row-name{flex:none;max-width:60%;overflow:hidden;font-size:13px;font-weight:600;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.leads-next-row-why{min-width:0;overflow:hidden;color:var(--muted);font-size:13px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.leads-next-row time{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
@container leads-next (max-width:999px){
  .leads-next-row-main{display:grid;gap:1px}
  .leads-next-row-name{max-width:none}
}
@container leads-next (max-width:759px){
  .leads-next{grid-template-columns:minmax(0,1fr)}
  .leads-next-then{border-left:0;border-top:1px solid var(--leads-rule)}
}
@container leads-next (max-width:479px){
  .leads-next-main{padding:14px 16px 16px}
  .leads-next-who{grid-template-columns:auto minmax(0,1fr);gap:12px 14px}
  #page-leads .leads-next-open{grid-column:1 / -1;width:100%}
}

/* ── The funnel: everyone → looked further → warm and hot → hot, drawn top down (leads.js funnelSvg). Grey while it is
   only looking, the warm and hot colours where it means interest. Each step's row beside its band. ── */
.leads-funnel{display:grid;padding:16px 16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
:root[data-theme="light"] .leads-funnel{box-shadow:0 2px 5px rgba(24,24,24,.025)}
.leads-funnel.is-refreshing{opacity:.55;transition:opacity .15s}
.leads-funnel.is-loading{gap:4px}
.leads-sk-funnel{width:100%;height:280px;margin-top:16px;border-radius:10px}
#page-leads .leads-funnel-label{color:var(--muted);font-size:12px;font-weight:600;line-height:1.4}
.leads-funnel-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:4px 0 18px;color:var(--muted);font-size:13px;line-height:1.4}
.leads-funnel-total strong{color:var(--text);font-size:28px;line-height:1.1;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.leads-funnel-body{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px}
.leads-funnel-graphic{position:relative;align-self:start}
.leads-funnel-shape{display:block;overflow:visible}
.leads-funnel-shape g[data-stage="all"]{fill:var(--funnel-all)}
.leads-funnel-shape g[data-stage="engaged"]{fill:var(--funnel-engaged)}
.leads-funnel-shape g[data-stage="interested"]{fill:var(--warm-dot)}
.leads-funnel-shape g[data-stage="hot"]{fill:var(--hot-dot)}
.leads-funnel-halo[data-layer="0"]{opacity:.16}
.leads-funnel-halo[data-layer="1"]{opacity:.32}
/* The share of everyone, on the flat part of each band. */
.leads-funnel-share{position:absolute;left:50%;top:calc(var(--at) * var(--row) + var(--row) * .27);padding:2px 7px;border-radius:999px;background:var(--panel);color:var(--text);font-size:11px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap;transform:translate(-50%,-50%);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.leads-funnel-steps{margin:0;padding:0;list-style:none}
.leads-funnel-steps li{display:grid;align-content:start;gap:2px;height:var(--row);min-width:0;padding-top:2px}
.leads-funnel-name{display:flex;align-items:center;gap:7px;min-width:0;color:var(--muted);font-size:12px;font-weight:600;line-height:1.4}
.leads-funnel-name i{width:8px;height:8px;flex:none;border-radius:2px;background:var(--funnel-all)}
.leads-funnel-steps li[data-stage="engaged"] i{background:var(--funnel-engaged)}
.leads-funnel-steps li[data-stage="interested"] i{background:var(--warm-dot)}
.leads-funnel-steps li[data-stage="hot"] i{background:var(--hot-dot)}
.leads-funnel-value{font-size:18px;line-height:1.25;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.leads-funnel-note{display:-webkit-box;overflow:hidden;color:var(--muted);font-size:12px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}

/* ── The list beside the open person. Narrow, they take turns (the back button returns to the list). ── */
.leads-split-wrap{container:leads-split / inline-size}
.leads-split{display:grid;grid-template-columns:minmax(300px,384px) minmax(0,1fr);align-items:start;gap:16px}
.leads-panel{min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
:root[data-theme="light"] .leads-panel{box-shadow:0 2px 5px rgba(24,24,24,.025)}
/* One scroll each: the list stays in view and scrolls by itself (a sidebar); the open person is the page and scrolls
   with it. 56px: 16 above the list, 40 of the page's own space below. */
.leads-list-pane{position:sticky;top:16px;display:flex;flex-direction:column;min-width:0;max-height:calc(100dvh - 56px);overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.leads-list-head{flex:none}
#leads-list{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
.leads-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 8px 16px;border-bottom:1px solid var(--leads-rule)}
#page-leads .leads-list-head h3{font-size:13px;line-height:1.4;font-weight:600}
.leads-sort{display:flex;align-items:center;gap:8px;min-width:0}
.leads-sort label{color:var(--muted);font-size:12px;white-space:nowrap}
.leads-sort .v-control{min-height:32px;border-radius:8px;font-size:13px}
.leads-people{margin:0;padding:4px;list-style:none}
.leads-people li + li{margin-top:2px}
.leads-person{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 12px;border:0;border-radius:8px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color .15s}
@media(hover:hover){.leads-person:hover{background:var(--panel-2)}}
.leads-person[aria-current="true"]{background:var(--leads-active)}
.leads-person:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;box-shadow:none}
.leads-person.is-skeleton{cursor:default}
.leads-person-main{display:grid;gap:5px;min-width:0}
.leads-person-top,.leads-person-sub{display:flex;align-items:center;gap:8px;min-width:0}
.leads-person-name{flex:1;min-width:0;overflow:hidden;font-size:14px;line-height:1.3;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.leads-person-top time{flex:none;color:var(--muted);font-size:12px;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}
.leads-person-reason{flex:1;min-width:0;overflow:hidden;color:var(--muted);font-size:13px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.leads-path-mini{display:inline-flex;align-items:center;gap:4px;flex:none;color:var(--muted)}
.leads-path-mini svg,.leads-path-mini img{width:14px;height:14px}
.leads-list-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding:12px 16px 14px;border-top:1px solid var(--leads-rule)}
.leads-list-foot p{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.leads-list-foot .tracking-mini-button{min-height:36px}
.leads-list-empty{padding:20px}
.leads-list-pane .leads-list-empty{border:0;box-shadow:none}
.leads-list-empty p{color:var(--muted);font-size:14px;line-height:1.5}
.leads-list-empty .tracking-mini-button{margin-top:12px}
#leads-list.is-refreshing,#leads-activity.is-refreshing{opacity:.55;transition:opacity .15s}

/* A person's mark: initials on their own pale tint, or a grey figure for someone not known yet. */
.leads-avatar{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:hsl(var(--hue,210) 30% 27%);color:hsl(var(--hue,210) 70% 86%);font-size:13px;font-weight:600;letter-spacing:.01em}
:root[data-theme="light"] .leads-avatar{background:hsl(var(--hue,210) 58% 91%);color:hsl(var(--hue,210) 42% 28%)}
.leads-avatar.is-anonymous{background:var(--panel-2);color:var(--muted)}
.leads-avatar.is-anonymous svg{width:18px;height:18px}
.leads-avatar.is-large{width:48px;height:48px;font-size:16px}
.leads-avatar.is-large svg{width:22px;height:22px}
.leads-pill{display:inline-flex;align-items:center;flex:none;height:20px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.leads-pill[data-interest="hot"]{background:var(--hot-bg);color:var(--hot-ink)}
.leads-pill[data-interest="warm"]{background:var(--warm-bg);color:var(--warm-ink)}
.leads-brand{display:block;width:16px;height:16px;flex:none;filter:none}
.leads-glyph{display:inline-grid;place-items:center;flex:none;color:var(--muted)}
.leads-glyph svg{width:16px;height:16px}

/* ── The open person: who they are and how to reach them; then sections split by one rule each: the route they took,
   what they looked at, the period, and everything they did on one rail. The hot or warm colour marks only what made
   them a lead (the last stop of the route, the visit and the step where it happened). ── */
/* At least as tall as the list, so the list can stay whole in view to the end of a short card. */
.leads-detail-pane{min-width:0;min-height:calc(100dvh - 56px);scroll-margin-top:16px}
.leads-detail{container:leads-card / inline-size;display:grid;padding:24px 24px 4px}
.leads-detail[aria-busy]{gap:20px;padding-bottom:24px}
.leads-detail-empty{padding:28px;color:var(--muted);font-size:14px}
.leads-back{display:none;align-items:center;gap:4px;min-height:36px;margin:0 0 8px -4px;padding:4px 10px 4px 4px;border:0;border-radius:8px;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.leads-back svg{width:16px;height:16px;rotate:90deg}
@media(hover:hover){.leads-back:hover{background:var(--panel-2);color:var(--text)}}
.leads-detail-top{display:grid;gap:16px;padding-bottom:24px}
.leads-detail-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px}
.leads-detail-id{display:grid;gap:6px;min-width:0}
#page-leads .leads-detail-id h3{font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere}
#leads-detail-title:focus{outline:none}
.leads-detail-state{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;color:var(--muted);font-size:13px;line-height:1.4}
.leads-detail-reason{color:var(--text);font-weight:600}
.leads-detail-state time{font-variant-numeric:tabular-nums;white-space:nowrap}
.leads-muted{color:var(--muted)}
.leads-flag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--panel-2);color:var(--text);font-size:12px;font-weight:600}
.leads-flag[data-flag="complained"]{background:var(--error-bg);color:var(--error-text)}
.leads-detail-actions{display:flex;align-items:center;gap:8px}
.leads-write{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:8px 14px;border-radius:8px;background:var(--text);color:var(--bg);font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;transition:opacity .15s,scale .15s ease-out}
.leads-write svg{width:16px;height:16px}
@media(hover:hover){.leads-write:hover{opacity:.88}}
.leads-write:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* The address and the phone: the value writes or calls, the joined button copies. */
.leads-contact{display:flex;flex-wrap:wrap;gap:8px}
.leads-contact-field{display:flex;align-items:stretch;min-width:0;max-width:100%;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.leads-contact-field a{display:flex;align-items:center;gap:8px;min-width:0;min-height:36px;padding:6px 12px 6px 10px;border-radius:7px 0 0 7px;color:var(--text);font-size:13px;line-height:1.3;text-decoration:none;transition:background-color .15s}
.leads-contact-field a svg{width:16px;height:16px;flex:none;color:var(--muted)}
.leads-contact-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
#page-leads .leads-contact-copy{display:grid;place-items:center;width:36px;min-height:36px;flex:none;padding:0;border:0;border-left:1px solid var(--line);border-radius:0 7px 7px 0;background:none;color:var(--muted);cursor:pointer;transition:background-color .15s,color .15s}
.leads-contact-copy .tracking-copy-icon svg{width:15px;height:15px}
@media(hover:hover){.leads-contact-field a:hover,#page-leads .leads-contact-copy:hover{background:var(--panel-2);color:var(--text)}}
:is(.leads-contact-field a,#page-leads .leads-contact-copy):focus-visible{z-index:1;outline:2px solid var(--focus);outline-offset:-2px;box-shadow:none}
.leads-anon-hint{max-width:62ch;color:var(--muted);font-size:13px;line-height:1.5}

/* Sections: one rule above each, the heading and (right) its total. */
.leads-section{display:grid;gap:14px;min-width:0;padding:20px 0 24px;border-top:1px solid var(--leads-rule)}
.leads-section-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px}
.leads-section-head p{color:var(--muted);font-size:12px;line-height:1.4;font-variant-numeric:tabular-nums}
#page-leads h4{font-size:13px;line-height:1.4;font-weight:600}
.leads-tag{display:inline-flex;align-items:center;flex:none;height:18px;padding:0 6px;border-radius:4px;background:var(--panel-2);color:var(--muted);font-size:11px;font-weight:600;line-height:1;white-space:nowrap}
.leads-note{color:var(--muted);font-size:12px;line-height:1.5}

/* How they found you: stops on one line, each place in the order they first came, ending at what it came to. */
.leads-route{display:grid;grid-template-columns:repeat(var(--n,1),minmax(136px,1fr));margin:0;padding:0 0 4px;list-style:none;overflow-x:auto;scrollbar-width:thin}
.leads-stop{position:relative;display:grid;align-content:start;gap:10px;min-width:0;padding-right:20px}
.leads-stop-mark{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--muted)}
.leads-stop-mark svg,.leads-stop-mark img,.leads-stop-mark .leads-glyph svg{width:16px;height:16px}
.leads-stop:not(:last-child)::after{content:'';position:absolute;top:15px;left:40px;right:14px;height:2px;border-radius:999px;background:var(--leads-track)}
.leads-stop:not(:last-child)::before{content:'';position:absolute;top:10px;right:9px;width:10px;height:12px;background:var(--leads-track);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 2L8.5 6L2 10Z' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.leads-stop-text{display:grid;gap:2px;min-width:0}
.leads-stop-text strong{font-size:13px;line-height:1.35;font-weight:600;overflow-wrap:anywhere}
.leads-stop-text small{color:var(--muted);font-size:12px;line-height:1.35}
.leads-stop[data-goal]{--goal:var(--hot-dot)}
.leads-stop[data-goal="warm"]{--goal:var(--warm-dot)}
.leads-stop[data-goal] .leads-stop-mark{border:1.5px solid var(--goal);color:var(--goal)}
.leads-stop:has(+ [data-goal="hot"]){--into:var(--hot-dot)}
.leads-stop:has(+ [data-goal="warm"]){--into:var(--warm-dot)}
.leads-stop:has(+ [data-goal])::after{background:var(--into)}
.leads-stop:has(+ [data-goal])::before{background:var(--into)}

/* What they looked at: the longest read first; a thin bar for the time, the first one in ink. */
.leads-pages{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.leads-pages li{display:grid;min-width:0}
.leads-page-top{display:flex;align-items:center;gap:8px;min-width:0}
.leads-page-title{min-width:0;overflow:hidden;font-size:13px;line-height:1.4;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.leads-page-time{flex:none;margin-left:auto;padding-left:12px;font-size:13px;line-height:1.4;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.leads-page-bar{position:relative;display:block;height:4px;margin:7px 0 6px;border-radius:2px;background:var(--leads-rule)}
.leads-page-bar::after{content:'';position:absolute;inset:0 auto 0 0;width:calc(var(--share,0) * 100%);border-radius:inherit;background:var(--leads-track)}
.leads-pages li:first-child .leads-page-bar::after{background:var(--text)}
.leads-page-sub{color:var(--muted);font-size:12px;line-height:1.4;overflow-wrap:anywhere}

/* The period: a bare strip of figures split by short rules, then what is known of them. */
.leads-figures{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,max-content));row-gap:14px;margin:0}
.leads-figures div{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:0 24px;border-left:1px solid var(--line)}
.leads-figures div:first-child{padding-left:0;border-left:0}
.leads-figures dt{color:var(--muted);font-size:12px;line-height:1.35}
.leads-figures dd{margin:4px 0 0;font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.leads-about{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;margin:4px 0 0}
.leads-about dt{color:var(--muted);font-size:12px;line-height:1.35}
.leads-about dd{margin:3px 0 0;font-size:13px;line-height:1.45;overflow-wrap:anywhere}

/* Everything they did, by day, on one rail: the time, the place's mark, what happened; a visit opens to its steps. */
.leads-day + .leads-day{margin-top:8px}
#page-leads .leads-day h5{margin-bottom:12px;color:var(--muted);font-size:12px;line-height:1.4;font-weight:600}
.leads-events{margin:0;padding:0;list-style:none}
.leads-event{position:relative;display:grid;grid-template-columns:40px 28px minmax(0,1fr) auto;align-items:start;column-gap:12px;padding-bottom:18px}
.leads-event:not(:last-child)::before{content:'';position:absolute;top:32px;bottom:4px;left:calc(40px + 12px + 13.25px);width:1.5px;background:var(--leads-rule-strong)}
.leads-event time{padding-top:5px;color:var(--muted);font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums}
.leads-event-mark{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--muted)}
.leads-event-mark svg,.leads-event-mark img{width:14px;height:14px}
.leads-event[data-goal]{--goal:var(--hot-dot)}
.leads-event[data-goal="warm"]{--goal:var(--warm-dot)}
.leads-event[data-goal] .leads-event-mark{border:1.5px solid var(--goal);color:var(--goal)}
.leads-event-body{display:grid;gap:2px;min-width:0;padding-top:4px;font-size:13px;line-height:1.45}
.leads-event-body > strong{font-weight:600}
.leads-event-body > span{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.leads-event > .website-badge{margin-top:4px}
.leads-event[data-type="unsubscribe"] strong,.leads-event[data-type="complaint"] strong,.leads-event[data-type="bounce"] strong{color:var(--error-text)}
.leads-visit-steps{margin-top:6px}
.leads-visit-steps summary{display:inline-flex;align-items:center;min-height:28px;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;list-style:none;border-radius:6px}
.leads-visit-steps summary::-webkit-details-marker{display:none}
.leads-visit-steps summary::after{content:'';width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.leads-visit-steps[open] summary::after{transform:translateY(1px) rotate(225deg)}
@media(hover:hover){.leads-visit-steps summary:hover{color:var(--text)}}
.leads-visit-steps summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* A visit's steps: a thinner rail of their own; a ring for a page, a dot for a click, the lead colour for a sent form. */
.leads-trail{display:grid;margin:8px 0 2px;padding:0;list-style:none}
.leads-trail li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;padding:0 0 12px 20px}
.leads-trail li:not(:last-child)::before{content:'';position:absolute;left:4.25px;top:16px;bottom:0;width:1.5px;background:var(--leads-rule-strong)}
.leads-trail li::after{content:'';position:absolute;left:0;top:5px;width:10px;height:10px;box-sizing:border-box;border-radius:50%;background:var(--dim)}
.leads-trail li[data-kind="page"]::after{border:1.5px solid var(--dim);background:var(--panel)}
.leads-trail li[data-kind="click"]::after{left:2px;top:7px;width:6px;height:6px}
.leads-trail li[data-kind="goal"]::after{background:var(--hot-dot)}
.leads-trail li[data-goal="warm"]::after{background:var(--warm-dot)}
.leads-trail time{color:var(--muted);font-size:12px;line-height:1.6;font-variant-numeric:tabular-nums}
.leads-trail li > div{display:grid;gap:1px;min-width:0;font-size:13px;line-height:1.45}
.leads-trail-title{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}
.leads-trail-title strong{min-width:0;font-weight:600;overflow-wrap:anywhere}
.leads-trail li > div > span:not(.leads-trail-title),.leads-trail small{color:var(--muted);font-size:12px;overflow-wrap:anywhere}

/* ── Activity: the click table of Custom domains, with who it was and what happened ── */
.leads-activity-table .leads-activity-row td{vertical-align:middle}
#page-leads .leads-activity-table thead th{background:var(--panel)}
.leads-what{display:flex;align-items:center;gap:10px;min-width:0}
.leads-what > span:not(.leads-glyph):not(.website-badge){min-width:0}
.leads-what .leads-brand,.leads-what .leads-glyph svg{width:18px;height:18px}
.leads-what .tracking-cell-main{white-space:normal}
.leads-what small{white-space:normal;overflow-wrap:anywhere}
.leads-person-chip{position:relative;max-width:220px;padding:0 6px;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:none;color:var(--muted);font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.leads-person-chip.is-known{padding:0;border:0;color:var(--text);font:600 13px/1.4 var(--font-body);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.leads-person-chip::before{content:'';position:absolute;inset:-8px -4px}
@media(hover:hover){.leads-person-chip:not(.is-known):hover{border-color:var(--dim);background:var(--panel-2);color:var(--text)}.leads-person-chip.is-known:hover{text-decoration-color:currentColor}}
.leads-person-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:none}

/* ── Nothing connected yet ── */
.leads-setup{padding:24px}
.leads-list-pane .leads-setup{border:0;box-shadow:none}
.leads-setup > p{max-width:60ch;margin-top:6px;color:var(--muted);font-size:14px;line-height:1.5}
.leads-setup ul{display:grid;gap:2px;margin:18px 0 0;padding:0;list-style:none}
.leads-setup li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--leads-rule)}
.leads-setup li > span:nth-child(2){display:grid;gap:2px;font-size:13px;line-height:1.4}
.leads-setup small{color:var(--muted);font-size:12px}
.leads-error{padding:20px}
.leads-error h4{margin-bottom:4px}
.leads-error p{color:var(--muted);font-size:13px;margin-bottom:12px}

/* ── Skeletons in the shape of what replaces them ── */
.leads-sk{position:relative;display:block;height:12px;overflow:hidden;border-radius:6px;background:var(--panel-2)}
.leads-sk-finding{width:min(420px,80%);height:14px;margin-top:4px}
.leads-sk-value{width:56px;height:24px}
.leads-sk-block{display:grid;gap:12px}

/* ── Narrow: the list, or the open person with the way back ── */
@container leads-split (max-width:759px){
  .leads-split{grid-template-columns:minmax(0,1fr)}
  .leads-split:not(.is-detail) .leads-detail-pane{display:none}
  .leads-split.is-detail .leads-list-pane{display:none}
  .leads-list-pane{position:static;max-height:none}
  #leads-list{overflow:visible}
  .leads-detail-pane{min-height:0}
  .leads-back{display:inline-flex}
  .leads-detail{padding:20px 18px 4px}
}
@container leads-split (max-width:520px){
  .leads-person{min-height:68px}
}
/* A narrow card: the action under the name, the contact full width, the route down the side, figures two by two. */
@container leads-card (max-width:559px){
  .leads-detail-head{grid-template-columns:auto minmax(0,1fr)}
  .leads-detail-actions{grid-column:1/-1}
  .leads-write{flex:1;justify-content:center;min-height:44px}
  .leads-contact-field{flex:1 1 100%}
  .leads-contact-field a{flex:1;min-height:44px}
  #page-leads .leads-contact-copy{width:44px;min-height:44px}
  .leads-route{grid-template-columns:minmax(0,1fr);gap:16px;overflow:visible}
  .leads-stop{grid-template-columns:32px minmax(0,1fr);align-items:center;gap:12px;padding-right:0}
  .leads-stop:not(:last-child)::after{top:36px;bottom:-12px;left:15px;right:auto;width:2px;height:auto}
  .leads-stop:not(:last-child)::before{display:none}
  .leads-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .leads-figures div{padding:0 0 0 16px}
  .leads-figures div:nth-child(odd){padding-left:0;border-left:0}
  .leads-figures div:last-child:nth-child(odd){grid-column:1/-1}
  .leads-about{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container leads-card (max-width:279px){
  .leads-about{grid-template-columns:minmax(0,1fr)}
}

/* ── Motion: rows that "Load more" added drop in, a changed person fades in; nothing for reduced motion ── */
@media(prefers-reduced-motion:no-preference){
  #page-leads .is-fresh{animation:leads-drop .32s var(--ease-out) both;animation-delay:calc(min(var(--r,0), 10) * 22ms)}
  .leads-detail:not([aria-busy]){animation:leads-fade .22s ease-out both}
  #page-leads :is(.leads-icon-button:not(#leads-refresh),.leads-text-button,.leads-views button,.leads-write,.leads-strip button[aria-pressed="false"]):active:not(:disabled){scale:.97}
}
@keyframes leads-drop{from{opacity:0;transform:translateY(-4px)}}
@keyframes leads-fade{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .leads-strip::before,.leads-visit-steps summary::after{transition:none}
}

@media(max-width:700px){
  .leads-head{align-items:stretch}
  .leads-head-actions{width:100%}
  .leads-period{flex:1 1 140px;width:auto}
  .leads-toolbar{align-items:stretch}
  .leads-views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .leads-views button{min-height:40px}
  .leads-tools{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);width:100%}
  .leads-source,.leads-search{width:auto}
  .leads-strip{--strip-pad:3px;--strip-gap:3px;border-radius:13px}
  .leads-strip button{gap:2px;padding:8px 8px 9px}
  .leads-strip-label{gap:5px;font-size:11px;white-space:nowrap}
  .leads-strip-value{min-height:22px;font-size:18px}
  .leads-strip-note{display:none}
  .leads-person-chip{max-width:100%}
}
/* Phones: the CSV button keeps its name for screen readers but shows only its icon. */
@media(max-width:480px){
  #leads-csv{width:40px;padding:0}
  #leads-csv span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}