/* ---- the CRM — the client's own book, and the jobs hanging off it ---------
   Deliberately plainer than the dashboard. This is the page a person opens with
   a phone in their hand and somebody's name to write down, so the two forms are
   permanent furniture rather than something you reveal with a button, and the
   board is six columns of small cards you can read at a glance.

   `.cx-` throughout, and none of it borrows the projects board's `.tk` / `.col`.
   That board has drag handlers bound by class; sharing the classes would make a
   customer job draggable into a project column the first time somebody opened
   both pages. Same tokens, separate namespace. */
.cx-lane{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;align-items:start;margin-bottom:26px}
.cx-col{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;padding:10px;min-height:96px}
.cx-col.term{background:transparent;border-style:dashed}
.cx-col h4{font:600 10px var(--mono);letter-spacing:.13em;color:var(--faint);text-transform:uppercase;margin:2px 0 2px}
.cx-col .cx-cnt{font:500 11px var(--mono);color:var(--faint);margin-bottom:9px;display:block}
.cx-col .cx-cnt b{color:var(--text);font-weight:600}
.cx-none{font-size:11.5px;color:var(--faint);opacity:.7;padding:4px 2px;line-height:1.5}
.cx-job{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin-bottom:7px}
.cx-job.sample{border-style:dashed;opacity:.72}
.cx-job .cx-t{font-size:13px;line-height:1.4;color:var(--text)}
/* When the person may edit, the job's own title IS the control that opens it —
   a real button, not a span with a click handler, so it is reachable by keyboard
   and announced as something you can press. A viewer gets the same words with
   nothing to press. */
.cx-job button.cx-t{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  cursor:pointer;font:400 13px/1.4 var(--sans);color:var(--text)}
.cx-job button.cx-t:hover{color:var(--accent)}
.cx-job button.cx-t:focus-visible{outline:2px solid var(--h4);outline-offset:2px;border-radius:4px}
.cx-job .cx-who{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.cx-job .cx-v{font:500 11.5px var(--mono);color:var(--gold);margin-top:6px;display:block}
.cx-job .cx-next{font-size:11.5px;color:var(--faint);margin-top:5px;line-height:1.5}
.cx-job select{width:100%;margin-top:8px;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:6px 8px;font:400 12px var(--sans);color:var(--muted);outline:none;cursor:pointer}
.cx-job select:focus{border-color:var(--accent-dim)}
.cx-row{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.cx-row:last-child{border-bottom:0}
.cx-row.sample{opacity:.74}
.cx-row .nm{flex:1;min-width:0}
.cx-row .nm b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px;font-weight:500}
.cx-row .nm span{display:block;font-size:12.5px;color:var(--faint);margin-top:3px;line-height:1.55}
.cx-row .cx-jobs{font:500 11.5px var(--mono);color:var(--faint);white-space:nowrap;padding-top:3px}
.cx-row .cx-jobs b{color:var(--text)}
.cx-row button.cx-edit{background:none;border:1px solid var(--line);border-radius:99px;cursor:pointer;
  color:var(--faint);font:500 11px var(--mono);letter-spacing:.06em;padding:5px 11px;white-space:nowrap}
.cx-row button.cx-edit:hover{border-color:var(--accent-dim);color:var(--accent)}
.cx-sample-tag{font:600 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(253,230,138,.34);border-radius:99px;padding:2px 8px}
.cx-forms{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px}
.cx-f{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}
.cx-f .wide{grid-column:1 / -1}
.cx-f label{display:block;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
.cx-f input,.cx-f select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;color:var(--text);font:400 13.5px var(--sans);outline:none}
.cx-f input:focus,.cx-f select:focus{border-color:var(--accent-dim)}
.cx-go{display:flex;gap:10px;align-items:center;margin-top:11px;flex-wrap:wrap}
.cx-go .btn{width:auto;padding:10px 20px}
.cx-say{font-size:12.5px;color:var(--faint);line-height:1.55}
.cx-say.bad{color:var(--stop)}
.cx-h{font:600 11px var(--mono);letter-spacing:.16em;color:var(--faint);text-transform:uppercase;
  margin:26px 0 10px}
.cx-first{text-align:center;padding:14px 4px 6px}
.cx-first h3{font:600 21px var(--sans);letter-spacing:-.02em;margin:0 0 8px}
.cx-first p{color:var(--muted);font-size:14px;line-height:1.7;margin:0 auto 4px;max-width:46ch}
.cx-log{list-style:none;margin:0;padding:0}
.cx-log li{padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--muted)}
.cx-log li:last-child{border-bottom:0}
.cx-log b{color:var(--text);font-weight:500}
.cx-log .cx-when{font:500 11px var(--mono);color:var(--faint);margin-left:6px;white-space:nowrap}
.cx-log .cx-note{display:block;font-size:12px;color:var(--faint);margin-top:3px;line-height:1.55}


/* ---- foldable sections -----------------------------------------------------
   Built by scripts/fold.js at runtime; see that file for why it wraps the DOM
   instead of editing thirteen templates.

   Same 0fr -> 1fr grid animation as the calendar's day panel, so the two feel
   like one idea rather than two. 180ms rather than the calendar's 280ms because
   Solomon asked specifically that these "quickly close" — a section header is
   tapped far more often than a calendar day, and at that frequency the animation
   stops being a nicety and starts being a wait. */
.fold{margin:0 0 4px}
.fold-h{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;padding:9px 2px;color:inherit;border-radius:8px;
  transition:background .12s}
.fold-h:hover{background:var(--surface)}
.fold-h:focus-visible{outline:2px solid var(--h4);outline-offset:2px}
/* The heading keeps .cx-h / .ar-h, so it keeps its own type. Only the margin
   goes, because the button now owns the spacing. */
.fold-h .fold-t{margin:0}
.fold-chev{margin-left:auto;flex:none;color:var(--faint);font-size:11px;line-height:1;
  transition:transform .18s cubic-bezier(.4,0,.2,1)}
.fold[data-open="0"] .fold-chev{transform:rotate(-90deg)}

.fold-w{display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .18s cubic-bezier(.4,0,.2,1),opacity .14s ease}
.fold[data-open="0"] .fold-w{grid-template-rows:0fr;opacity:0}
/* min-height:0 is what lets a 0fr row actually collapse; without it the child's
   intrinsic height wins and the section never closes. overflow:hidden keeps the
   contents clipped while it does. */
.fold-b{min-height:0;overflow:hidden;visibility:visible;transition:visibility 0s}
/* A closed section must not leave its contents reachable by Tab. A control the
   keyboard can land on inside a box nobody can see is a focus trap that looks
   like the page has stopped responding.
   The hide is DELAYED by exactly the collapse duration, and the show is
   immediate — flipping visibility at the start of a close makes the contents
   vanish before the box has finished closing, which reads as a glitch rather
   than as a fold. */
.fold[data-open="0"] .fold-b{visibility:hidden;transition:visibility 0s linear .18s}

@media (prefers-reduced-motion:reduce){
  .fold-w,.fold-chev{transition:none}
}