/* =====================================================================
   public/app/customers.css: Customers in the Home design (14 October 2026)

   The list itself is the shared list system (lists.css, the owner's version 3). Here: the search and the bar's
   buttons; the urgent row tinted red and its button the one lit (colour directs attention, as on Home); on a phone
   the avatar, the name and the status on one line, what they asked under it, then what they need and when. The
   customer's own page: soft panels, quiet buttons with the main one lit, round-cornered status buttons. Scoped to #crm.
   Every colour and size is a token from shell.css and the sheets before it. Hover only where a pointer hovers.
   ===================================================================== */

/* ---------- the bar: the search and the buttons (the filters are lists.css's chips) ---------- */
#crm .cust-bar{gap:10px}
#crm .cust-bar .search{height:var(--h-field);padding:0 14px;border:0;border-radius:var(--r-btn);background:var(--tint-1);box-shadow:inset 0 0 0 1px var(--tile-ring)}
#crm .cust-bar .search:focus-within{box-shadow:inset 0 0 0 1px var(--tile-ring),0 0 0 2px var(--focus)}
#crm .cust-bar>.btn{gap:8px;height:var(--h-field);padding:0 14px;border:0;border-radius:var(--r-btn);background:var(--btn-2);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--btn-2-ring);font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
#crm .cust-bar>.btn svg.i{width:16px;height:16px}
@media (hover:hover){#crm .cust-bar>.btn:hover{background:var(--btn-2-hover);color:var(--ink)}}
#crm .cust-bar>.btn:active{scale:.96}

/* ---------- soft panels: the customer's page ---------- */
#crm .cu-card,#crm .cu-stat{border:1px solid var(--card-edge);border-radius:var(--r-panel);background:var(--card-sheen);box-shadow:var(--card-lift)}

/* urgent (the coral pill in "Needs you"): the row tinted red, and its button the one lit on the page */
#crm .tbl.cust tr.row:has(td.nd .sdot.err) td{background:var(--urgent-row)}
#crm .tbl.cust tr.row:has(td.nd .sdot.err) .lt-act{background:var(--lime);box-shadow:var(--edge-primary),var(--glow-btn);color:var(--night)}
@media (hover:hover){#crm .tbl.cust tr.row:has(td.nd .sdot.err) .lt-act:hover{background:var(--lime-hover);color:var(--night)}}

/* ---------- the buttons in the summary and on the customer's page: Home's (grey, the main one lit, the quiet one bare) ---------- */
#crm :is(.cu-peek,.cu-page) .btn{gap:8px;border:0;border-radius:var(--r-btn);background:var(--btn-2);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--btn-2-ring);font-weight:500;color:var(--ink)}
#crm :is(.cu-peek,.cu-page) .btn:not(.btn-sm){height:var(--h-field);padding:0 14px}
@media (hover:hover){#crm :is(.cu-peek,.cu-page) .btn:not(.btn-primary):not(.btn-strong):not(.btn-ghost):hover{background:var(--btn-2-hover);color:var(--ink)}}
#crm :is(.cu-peek,.cu-page) :is(.btn-primary,.btn-strong){background:var(--lime);box-shadow:var(--edge-primary),var(--glow-btn);color:var(--night)}
@media (hover:hover){#crm :is(.cu-peek,.cu-page) :is(.btn-primary,.btn-strong):hover{background:var(--lime-hover);color:var(--night)}}
#crm :is(.cu-peek,.cu-page) .btn-ghost{background:none;box-shadow:none;color:var(--ink-2)}
#crm :is(.cu-peek,.cu-page) .btn:active{scale:.96}
#crm .cu-peek-h .lt-av{width:40px;height:40px}
/* the customer's page: the neutral avatar; urgent is red, as on Home; the status buttons with the buttons' corners */
#crm .cu-av,#crm .cu-av.info,#crm .cu-av.ok{background:var(--avatar-row);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--tile-ring);color:var(--avatar-ink)}
/* the catch-up sits right on top of the timeline: the side column's extra height goes under the timeline, not between them */
#crm .cu-grid:has(>.cu-catch){grid-template-rows:auto 1fr}
#crm .cu-flag{border-radius:var(--r-btn);padding:10px 12px 10px 16px}
#crm .cu-flag.is-urgent{background:var(--urgent-row);box-shadow:inset 0 0 0 1px var(--urgent-edge);color:var(--err-ink)}
#crm .cu-flag.is-urgent svg.i{color:var(--err-ink)}
#crm .cu-peek-b,#crm .cu-peek-f{border-top-color:var(--hair)}

/* ---------- a phone: tidy stacked rows (as Home's) ---------- */
@media (max-width:760px){
  #crm .tbl tr.row{grid-template-columns:var(--av-list) minmax(0,1fr) auto;column-gap:12px;row-gap:4px;align-items:center;padding:14px 12px}
  #crm .lt-av{display:grid}
  #crm .tbl td.c2td{grid-column:1 / 3;grid-row:1;min-width:0}
  #crm .tbl td.st{grid-column:3;grid-row:1;justify-self:end;margin:0}
  #crm .tbl td.asked{grid-column:2 / 4;grid-row:2;color:var(--ink-body)}
  /* the date sits on the second line, beside what they asked, for every row; a third line only where there is a next action or Urgent (batch 3, 15 Oct) */
  #crm .tbl.cust td.asked{grid-column:2;min-width:0}
  #crm .tbl.cust td.nd{grid-column:2;grid-row:3;align-self:center}
  #crm .tbl td.t{grid-column:3;grid-row:3;justify-self:end;align-self:center;font-size:var(--fs-meta)}
  #crm .tbl.cust td.t{grid-row:2}
  #crm .tbl.cust tr.row:has(td.nd .sdot.err){background:var(--urgent-row)}
  @media (hover:hover){#crm .tbl tr.row:not(:has(td.nd .sdot.err)):hover{background:var(--row-hover)}}
  #crm .cust-bar>.btn{width:var(--h-touch);padding:0}
}
@media (pointer:coarse){
  #crm .cust-bar .search,#crm .cust-bar>.btn{height:var(--h-touch)}
}
@media (max-width:720px){#crm .cust-bar>.btn::after{inset:0 0 calc(100% - 44px)}} /* Filter and Add customer: the 44 to press grows down, away from the tabs just above */
/* a phone (21 Oct 2026, the owner: "buttons have too much upper and below padding"): the profile's buttons are Solid Glass's 32,
   not 36 or 44; the 44 to press is each button's invisible edge (app.css). */
@media (max-width:720px){
  #crm :is(.cu-peek,.cu-page) .btn:not(.btn-sm){height:var(--h-ctl)}
}
@media (prefers-reduced-motion:reduce){
  #crm .cust-bar>.btn:active,#crm :is(.cu-peek,.cu-page) .btn:active{scale:1}
}

/* ---------- the job card (the owner, 16 Oct: "doesn't look premium or organized") ----------
   The facts sit in one quiet well, a hairline between rows, labels small and muted, values starting on one edge.
   The six steps are two even rows; Lost is a quiet action beside the "Status" label, not a stray seventh button.
   Steps already passed read a little softer than those still ahead. */
#crm .cu-job .cu-job-t{margin-bottom:14px}
#crm .cu-job .cu-lines{gap:0;margin:0 0 18px;padding:2px 14px;border-radius:var(--r-tile);background:var(--seg-well);box-shadow:inset 0 0 0 1px var(--hair)}
#crm .cu-job .cu-lines>div{grid-template-columns:112px minmax(0,1fr);gap:12px;padding:11px 0;align-items:start}
#crm .cu-job .cu-lines>div+div{border-top:1px solid var(--hair)}
#crm .cu-job .cu-lines dt{font-size:var(--fs-sm);line-height:1.5;color:var(--ink-3)}
#crm .cu-job .cu-lines dt svg.i{width:14px;height:14px}
#crm .cu-job .cu-lines dd{line-height:1.45;text-align:start}
#crm .cu-job .cu-lines dd :is(.link,.kv-add){text-align:start}
#crm .cu-lost-l{position:relative;display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:2px 0;font:inherit;font-size:var(--fs-sm);color:var(--ink-3);cursor:pointer}
#crm .cu-lost-l::after{content:"";position:absolute;inset:-10px -8px}
#crm .cu-lost-l svg.i{width:13px;height:13px;stroke-width:2}
#crm .cu-lost-l[aria-pressed="true"]{color:var(--err-ink);font-weight:500}
@media (hover:hover){#crm .cu-lost-l:hover{color:var(--err-ink)}}
@media (max-width:420px){#crm .cu-job .cu-lines>div{grid-template-columns:96px minmax(0,1fr)}}
/* a phone: the job's steps are two rows of 32 (Solid Glass), 8 apart both ways */
@media (max-width:720px){
  #crm .cu-lost-l::after{inset:-10px -8px -4px} /* 8 above the steps: reaches 4 down to meet their edge, not past it */
}

/* =====================================================================
   The calmer customer page (the owner, 22 October 2026: "customer page do what you think is right; every tab uses the same theme")
   One quiet line or one summary strip instead of five tiles; every section a card with a grey icon tile and a heading; the job's
   steps one slim segmented row in the status-dot style; counts only where there is something to count. Only tokens that exist.
   ===================================================================== */
#crm .cu-page{padding-bottom:96px} /* room under the last button: nothing rests under the floating Ask UNLOOK */
#crm .cu-card-h h3{display:flex;align-items:center;gap:10px}
#crm .cu-hic{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-btn);background:var(--raise);color:var(--ink-2)}
#crm .cu-hic svg.i{width:16px;height:16px}
#crm .cu-ev-ic.info,#crm .cu-ev-ic.ok{background:var(--raise);color:var(--ink-2)} /* no blue or green icon tiles: grey; colour is for a state's dot */
#crm .cu-next{border-color:color-mix(in srgb,var(--st-you) 30%,transparent)}
#crm .cu-next .cu-hic{background:var(--st-you-wash);color:var(--you-ink)}
#crm .cu-lead{grid-column:1;display:flex;flex-direction:column;gap:16px;min-width:0}
#crm .cu-lead>.cu-card{grid-column:auto}

/* the tabs' counts: a plain figure, only above zero */
#crm .cu-tab .cu-tab-n{padding:0;border-radius:0;background:none;color:var(--ink-3);font-weight:400;font-variant-numeric:normal;font-feature-settings:normal}
#crm .cu-page .tnum{font-variant-numeric:normal;font-feature-settings:normal}

/* the summary: one line under the name, or one strip once there is money or a visit */
#crm .cu-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 16px;border-radius:var(--r-panel);background:var(--seg-well);box-shadow:inset 0 0 0 1px var(--hair)}
#crm .cu-page:not([data-view="overview"]) .cu-sum{display:none}
#crm .cu-sum-c{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 18px}
#crm .cu-sum-c+.cu-sum-c{border-inline-start:1px solid var(--hair)}
#crm .cu-sum-l,#crm .cu-sum-s{font-size:var(--fs-sm);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#crm .cu-sum-s{min-height:1.3em}
#crm .cu-sum-v{font-size:var(--fs-amount);font-weight:500;letter-spacing:-.01em;line-height:1.3;font-variant-numeric:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:720px){
  #crm .cu-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  #crm .cu-sum-c{padding:12px 14px}
  #crm .cu-sum-c:nth-child(n+3){border-top:1px solid var(--hair)}
  #crm .cu-sum-c:nth-child(odd){border-inline-start:0}
}

/* "The job, in their words" */
#crm .cu-kv{display:grid;gap:10px;margin:0 0 12px}
#crm .cu-kv>div{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:12px;font-size:var(--fs-body)}
#crm .cu-kv dt{color:var(--ink-2)}
#crm .cu-kv dd{margin:0;overflow-wrap:anywhere}
@media (max-width:480px){#crm .cu-kv>div{grid-template-columns:1fr;gap:2px}}
#crm .cu-page:is([data-view="timeline"],[data-view="jobs"],[data-view="details"]) .cu-about{display:none}

/* the last lines of the newest chat or call, right on the timeline */
#crm .cu-last{gap:8px;padding:12px 14px;border-radius:var(--r-item);background:var(--seg-well);box-shadow:inset 0 0 0 1px var(--hair)}
#crm .cu-last-m{display:flex;flex-direction:column;gap:1px;font-size:var(--fs-body);line-height:1.45}
#crm .cu-last-w{font-size:var(--fs-sm);color:var(--ink-2)}
#crm .cu-last-m .us{color:var(--ink-2)}
#crm .cu-day{font-weight:500}

/* the job: its steps as one slim segmented row (status-dot style), Mark as lost a quiet text button under the card's facts */
#crm .cu-job .cu-job-t strong{font-weight:500}
#crm .cu-job .cu-status{margin:0 0 14px}
#crm .cu-job .cu-steps{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:var(--r-btn);background:var(--seg-well);box-shadow:inset 0 0 0 1px var(--hair)}
#crm .cu-step{position:relative;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;height:32px;padding:0 12px;border:0;border-radius:var(--r-ctl);background:none;box-shadow:none;font-size:var(--fs-sm);font-weight:400;color:var(--ink-2);white-space:nowrap}
#crm .cu-step>i{display:none;flex:none;width:7px;height:7px;border-radius:50%;background:var(--st-off)}
#crm .cu-step[aria-pressed="true"]{background:var(--seg-on);box-shadow:var(--seg-on-lift);color:var(--ink);font-weight:500}
#crm .cu-step[aria-pressed="true"]>i{display:block}
#crm .cu-step[aria-pressed="true"][data-tone="ok"]>i{background:var(--st-ok)}
#crm .cu-step[aria-pressed="true"][data-tone="you"]>i{background:var(--st-you)}
@media (hover:hover){#crm .cu-step[aria-pressed="false"]:hover{color:var(--ink)}}
#crm .cu-step::after{content:"";position:absolute;inset:-7px 0}
#crm .cu-job .cu-lines{margin-bottom:12px}
#crm .cu-lost-l{margin-top:4px;padding:4px 0}
#crm .cu-lost-l::after{inset:-10px -8px}
@media (max-width:360px){#crm .cu-step{padding:0 3px;gap:4px;font-size:var(--fs-meta)}}
@media (max-width:1000px){#crm .cu-lead{display:contents}#crm .cu-about{order:3}}
#crm .cu-inv .cu-card-h{flex-wrap:wrap;row-gap:0;padding-block:8px}
#crm .cu-last-m>div{font-weight:400}