/* Daily Life Doc, round 13 (zone F1): the place Clients (js/clients/clients-page.js) and the Add client sheet
   (js/clients/client-add.js), drawn as the page "Expert Plans" draws "Clients and To review", "Adding a client" and
   "On a phone": rows on the card colour, the columns Client · Needs you · Next call, a dark "2 to review", a
   yellow "quiet 3 days"; at phone width one column with a dark round count. */

/* ---------- The head row's tools ---------- */
.top .cl-srchb, .top .cl-addr { display: none; }
.cl-srch2 { margin: 0 0 10px; }
.cl-srch2 .wsrch { display: flex; max-width: none; }

/* ---------- The list ---------- */
.cl-page { max-width: 1100px; }
.cl-cols, .cl-row { display: grid; grid-template-columns: 32px minmax(0, 1.6fr) minmax(0, 1fr) minmax(120px, .55fr); align-items: center; column-gap: 14px; }
.cl-cols { padding: 0 16px 8px; font-size: var(--t-xs); font-weight: 500; color: var(--ink3); }
.cl-cols span:first-child { grid-column: 2; }
.cl-list { display: flex; flex-direction: column; gap: 8px; }
.cl-row { width: 100%; min-height: 58px; padding: 10px 16px; border-radius: 14px; background: var(--card); text-align: left; color: var(--ink);
  transition: transform var(--m-press) var(--ease-out), box-shadow var(--m-step) ease; }
.cl-row:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.cl-row:active { transform: scale(.99); }
.cl-row .av2 { width: 32px; height: 32px; font-size: var(--t-sm); }
.cl-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cl-who b { font-size: var(--t-s); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-sub { font-size: var(--t-xs); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-sub.narrow { display: none; }
.cl-needc { min-width: 0; }
.cl-need { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.cl-need.rv { background: var(--ink); color: var(--surface); }
.cl-need.quiet { background: var(--try-bg); color: var(--try-d); }
.cl-need.noplan { background: var(--soft); color: var(--ink2); }
.cl-num { display: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: var(--t-2xs);
  font-weight: 600; line-height: 22px; text-align: center; }
.cl-call { display: flex; flex-direction: column; font-size: var(--t-sm); line-height: 1.3; }
.cl-call small { font-size: var(--t-2xs); color: var(--ink3); }
.cl-none { color: var(--ink3); }
.cl-nomatch { padding: 24px 16px; color: var(--ink3); font-size: var(--t-sm); }

/* ---------- One column at phone width ---------- */
@media (max-width: 880px) {
  .top .cl-add { display: none; }
  .top .cl-srchb, .top .cl-addr { display: grid; }
  .cl-cols { display: none; }
  .cl-row { grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 64px; padding: 10px 12px; }
  .cl-row .av2 { width: 36px; height: 36px; }
  .cl-call { display: none; }
  .cl-sub.wide { display: none; }
  .cl-sub.narrow { display: block; }
  .cl-who b { font-size: var(--t-m); }
  .cl-sub { font-size: var(--t-sm); }
  .cl-need.rv { display: none; }
  .cl-num { display: inline-block; }
  .cl-sub.cl-nc { color: var(--ink2); font-size: var(--t-xs); }
}

/* ---------- Add client (a sheet) ---------- */
.ac-f { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ac-f > label, .ac-f > .ac-l { font-size: var(--t-xs); font-weight: 600; color: var(--ink2); }
.ac-f input, .ac-f select { width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--field); color: var(--ink); font: inherit;
  font-size: var(--t-s); outline: none; }
.ac-f input:focus, .ac-f select:focus { box-shadow: inset 0 0 0 1.5px var(--sage); }
.ac-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--soft); align-self: flex-start; }
.ac-seg button { min-height: 32px; padding: 0 14px; border-radius: 999px; font-size: var(--t-sm); font-weight: 600; color: var(--ink2);
  transition: background-color var(--m-step) ease, color var(--m-step) ease; }
.ac-seg button[aria-pressed="true"] { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.ac-from { font-size: var(--t-xs); color: var(--ink3); }
.ac-err { font-size: var(--t-xs); color: var(--bad-d); }
.ac-f .ac-err { margin: 0 2px; }
.ac-link { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--field); }
.ac-link a:not(.pill) { color: var(--note-d); font-weight: 600; font-size: var(--t-s); word-break: break-all; text-decoration: none; }
.ac-link .row2 { display: flex; gap: 6px; flex-wrap: wrap; }
.ac-qr { align-self: flex-start; padding: 10px; border-radius: 10px; background: #fff; }
.ac-qr svg { display: block; width: 168px; height: 168px; }
.ac-done { font-size: var(--t-s); color: var(--ink2); margin-bottom: 12px; }
.wsrch input::-webkit-search-cancel-button { -webkit-appearance: none; }