/* Clients and New client (plans/client-onboarding-plan.md §3a, §3i;
   CON-CLI-001…010). Linked from inside both views; every rule is scoped to
   #view-clients, #view-newclient or #ceilingdlg. Tokens only (UI.md §2); no
   inline styles are set by clients.js or newclient.js.

   "?" IS DRAWN QUIETER THAN "NOT YET", ON PURPOSE. A step nobody can see is
   not a step the client has left to do (CON-GST-008), so it is muted and
   dashed, and only a computed "not yet" or "blocked" carries the warning
   colour. Six loud question marks per row would hide the one client who is
   really stuck, which is the thing this screen is for. */

#view-clients .clhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s-3)}
#view-clients .clhead p{max-width:80ch;margin:var(--s-1) 0 0}
#view-clients .clactions{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s-3);font-size:var(--text-sm)}
#view-clients .clactions label{display:flex;flex-direction:column;gap:var(--s-1)}
#view-clients select,#view-clients button,#view-newclient button:not(.linkish),#ceilingdlg button{font:inherit;
  font-size:var(--text-sm);padding:var(--s-1) var(--s-3);background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-border);border-radius:var(--radius)}
#view-clients select{background:var(--bg);color:var(--fg);border-color:var(--line)}
#view-clients .clnew{font-size:var(--text-sm);font-weight:var(--weight-bold)}
#view-clients :focus-visible,#view-newclient :focus-visible,#ceilingdlg :focus-visible{
  outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}

#view-clients .clsummary{margin:var(--s-4) 0 var(--s-2);font-size:var(--text-sm)}
#view-clients .clsourcesbox{margin:var(--s-2) 0;font-size:var(--text-sm);max-width:100ch}
#view-clients .clsourcesbox summary{cursor:pointer}
#view-clients .cllist{list-style:none;margin:var(--s-2) 0;padding:0}
#view-clients .cllist li{margin:var(--s-1) 0}
#view-clients .clunsettled{margin:var(--s-4) 0;padding:var(--s-3);border:1px solid var(--warn);
  border-left:3px solid var(--warn);border-radius:var(--radius);background:var(--warnbg);max-width:100ch}
#view-clients .clunsettled h3{margin:0}
#view-clients .clattempts button{margin-left:var(--s-2)}

#view-clients .clscroll{overflow-x:auto;max-width:100%}
#view-clients table{min-width:64rem}
#view-clients th,#view-clients td{vertical-align:top;text-align:left}
#view-clients .clsub{display:block;font-size:var(--text-xs);color:var(--muted);
  font-weight:var(--weight-normal);text-transform:none;letter-spacing:normal}
#view-clients .clmono{font-family:var(--mono)}
#view-clients .clclient{min-width:13rem;text-transform:none;letter-spacing:normal;color:var(--fg);
  font-size:var(--text-sm)}
#view-clients .clname{background:none;border:0;padding:0;color:var(--link);text-align:left;
  font-weight:var(--weight-bold);text-decoration:underline;cursor:pointer}
#view-clients .clpill{display:inline-block;font-size:var(--text-xs);padding:0 var(--s-2);
  border:1px solid var(--line);border-radius:999px}
#view-clients .clwarn{border-color:var(--warn);color:var(--warn);background:var(--warnbg)}
#view-clients .clunknown{color:var(--muted);font-style:italic}
#view-clients .clbadtext{color:var(--bad)}
#view-clients .clwarntext{color:var(--warn)}
#view-clients .clamount{font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}
#view-clients .clceiling{min-width:14rem}
#view-clients .clceiling .clraise{margin-top:var(--s-2)}
#view-clients .clstuck{min-width:16rem;font-size:var(--text-sm)}
#view-clients .clwayout{min-width:13rem;font-size:var(--text-sm)}
#view-clients .clwayout .clraise{margin-top:var(--s-2);margin-right:var(--s-2)}
#view-clients tr.clneeds>th{border-left:3px solid var(--warn)}
#view-clients .cl-within{color:var(--ok)}
#view-clients .cl-nearing{color:var(--warn)}
#view-clients .cl-reached{color:var(--bad)}

/* The seven steps. */
#view-clients .clsteps{display:flex;gap:var(--s-1);list-style:none;margin:0 0 var(--s-1);padding:0}
#view-clients .clstep{display:flex;flex-direction:column;align-items:center;min-width:1.9rem;
  padding:var(--s-1) 0;border:1px solid var(--line);border-radius:var(--radius);font-size:var(--text-xs)}
#view-clients .clmark{font-weight:var(--weight-bold);font-size:var(--text-sm)}
#view-clients .clstepid{color:var(--muted)}
#view-clients .cl-done{border-color:var(--ok);color:var(--ok)}
#view-clients .cl-not_yet,#view-clients .cl-blocked{border-color:var(--warn);color:var(--warn);background:var(--warnbg)}
#view-clients .cl-unknown{border-style:dashed;color:var(--muted)}

#view-clients .cllegend{display:grid;grid-template-columns:max-content 1fr;gap:var(--s-1) var(--s-4);
  margin:var(--s-4) 0;max-width:90ch;font-size:var(--text-sm)}
#view-clients .cllegend dt{font-weight:var(--weight-bold)}
#view-clients .cllegend dd{margin:0;color:var(--muted)}
#view-clients .cllegend dd b{color:var(--fg)}

#ceilingdlg{max-width:36rem}
#ceilingdlg textarea{width:100%}
#ceilingdlg .ceilingresult{border-left:3px solid var(--ok);padding:var(--s-1) var(--s-3);margin:var(--s-2) 0}

/* New client. */
#view-newclient .ncintro{max-width:80ch}
#view-newclient .ncform{max-width:56rem}
#view-newclient fieldset{border:1px solid var(--line);border-radius:var(--radius);margin:var(--s-4) 0;
  padding:var(--s-3) var(--s-4)}
#view-newclient legend{font-weight:var(--weight-bold);padding:0 var(--s-1)}
#view-newclient label{display:block;margin:var(--s-3) 0;font-size:var(--text-sm)}
#view-newclient input:not([type=radio]):not([type=checkbox]){display:block;width:100%;max-width:28rem;
  font:inherit;padding:var(--s-1) var(--s-2);margin-top:var(--s-1);border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg);color:var(--fg)}
#view-newclient .ncpair{display:flex;flex-wrap:wrap;gap:var(--s-4)}
#view-newclient .ncpair label{flex:1 1 12rem}
#view-newclient .nccheck{display:flex;gap:var(--s-2);align-items:center}
#view-newclient .ncaddr{display:flex;align-items:baseline;gap:var(--s-1);flex-wrap:wrap}
#view-newclient .ncaddr input{max-width:16rem}
#view-newclient .nctypes{border:0;padding:0;margin:var(--s-3) 0}
#view-newclient .nctypes legend{font-weight:var(--weight-normal);font-size:var(--text-sm);padding:0}
#view-newclient #nctypes{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s-3)}
#view-newclient .nctype{display:flex;gap:var(--s-2);margin:0;padding:var(--s-3);border:1px solid var(--line);
  border-radius:var(--radius);cursor:pointer}
#view-newclient .nctype:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
#view-newclient .nctypebody{display:flex;flex-direction:column;gap:var(--s-1)}
#view-newclient .ncpackname{font-size:var(--text-xs);color:var(--muted);font-family:var(--mono)}
#view-newclient .ncsummary{margin:0;font-size:var(--text-sm)}
#view-newclient .ncsub{font-size:var(--text-xs);color:var(--muted)}
#view-newclient .ncsamples{margin:0;padding-left:var(--s-4);font-size:var(--text-xs)}
#view-newclient .ncbad{color:var(--bad);font-size:var(--text-sm)}
#view-newclient .ncceiling{font-size:var(--text-lg);margin:var(--s-1) 0}
#view-newclient .ncidline code{font-family:var(--mono)}
#view-newclient .ncprimary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);
  font-weight:var(--weight-bold)}
#view-newclient .ncresult{max-width:56rem;margin:var(--s-4) 0;padding:var(--s-3) var(--s-4);
  border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:var(--radius)}
#view-newclient .ncresult h4{margin:0 0 var(--s-2)}
#view-newclient .ncgood{border-left-color:var(--ok)}
#view-newclient .ncwarn{border-left-color:var(--warn);background:var(--warnbg)}
#view-newclient .ncbadbox{border-left-color:var(--bad)}

/* The one-time password: the loudest thing on the screen, because it is
   shown once and the person must act on it now. */
#view-newclient .ncpassword{max-width:56rem;margin:var(--s-4) 0;padding:var(--s-4);
  border:2px solid var(--warn);border-radius:var(--radius-lg);background:var(--warnbg)}
#view-newclient .ncpassword h4{margin:0 0 var(--s-2)}
#view-newclient .ncpw{font-family:var(--mono);font-size:var(--text-lg);padding:var(--s-1) var(--s-2);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);user-select:all}
#view-newclient .ncpwnote{font-size:var(--text-sm)}