/* Avilo — Useful numbers (r34). Phone first (360 px), 48 px tap targets, Chrome 109 safe (no nesting, no color-mix).
   Every class is .ctc- prefixed. */

/* ---------- Header, search, job chips ---------- */
.ctc-head .btn{min-height:44px}
.ctc-search{position:relative;margin:0 0 10px}
.ctc-search>.i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.ctc-search .input{padding-left:42px;border-radius:var(--r-pill)}
.ctc-search .input::-webkit-search-cancel-button{-webkit-appearance:none}
.ctc-jobs .chip{min-height:44px}
.ctc-jobs .chip.ctc-none{opacity:.55}
.ctc-loading{display:flex;align-items:center;gap:10px;justify-content:center;padding:40px 16px;color:var(--muted);font-weight:600}
.ctc-spin{display:inline-block;width:18px;height:18px;flex:none;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px}
.ctc-empty{padding:48px 16px}
.ctc-empty>.i{width:36px;height:36px;color:var(--brand)}
.ctc-empty p{max-width:420px;margin:0 auto 16px;line-height:1.5}

/* ---------- One row per number: name block (tel: link) + round buttons ---------- */
.ctc-list{display:flex;flex-direction:column;gap:10px}
@media (min-width:760px){.ctc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}}
.ctc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:10px 10px 10px 14px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-1);cursor:pointer}
.ctc-main{display:flex;flex-direction:column;gap:1px;min-width:0;min-height:48px;justify-content:center;color:var(--ink);text-decoration:none}
.ctc-name{font:800 18px/1.25 var(--font-head);overflow-wrap:anywhere}
.ctc-job{font-size:13px;line-height:1.35;color:var(--ink-2);overflow-wrap:anywhere}
.ctc-num{font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.ctc-acts{display:flex;align-items:center;gap:8px}
.ctc-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;border-radius:50%;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);text-decoration:none;padding:0}
.ctc-btn .i{width:22px;height:22px}
.ctc-call{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ctc-wa{background:var(--ok-soft);border-color:var(--ok-soft);color:var(--ok)}
.ctc-edit{color:var(--muted)}
.ctc-btn:active{transform:scale(.95)}
.ctc-p2{grid-column:1 / -1;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:2px;font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none}
@media (hover:hover){.ctc-row:hover{box-shadow:var(--shadow-2)}.ctc-call:hover{background:var(--accent-ink)}}

/* ---------- Add / change sheet ---------- */
.ctc-jobpick{display:flex;flex-wrap:wrap;gap:8px}
.ctc-jobpick .chip{min-height:44px}
.ctc-other{margin-top:10px}
.ctc-stamp{margin:4px 0 12px;font-size:12px;color:var(--muted)}
.ctc-del{display:flex;justify-content:flex-start}

/* ---------- The link on the Delivery header (dispatch.js): a word on wide screens, the round phone icon on phones ---------- */
.ctc-hook{min-height:44px}
@media (max-width:480px){
  .ctc-hook{width:48px;min-width:48px;height:48px;padding:0}
  .ctc-hook span{display:none}
}