/* CLEAR Contacts. Loaded after chrome.css and hub.css (CLEAR colours, fonts, header, footer, buttons). */
.ct{background:linear-gradient(180deg,var(--ck-lav) 0,#fff 360px);min-height:60vh;padding-bottom:56px}
.ct-wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.ct-narrow .ct-wrap{max-width:860px}
.ct h1{font-size:clamp(1.7rem,2.4vw + .9rem,2.4rem);color:var(--ck-purple);margin:0;line-height:1.15}
.ct-dim{color:var(--ck-slate);font-size:.92em}
.ct-link{background:none;border:0;padding:4px 2px;font:500 .98rem var(--font);color:var(--ck-purple);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.ct-loading{text-align:center;font-size:1.15rem;padding:60px 20px}
.ck-btn.danger{background:#fff;color:#a8305f;border-color:#a8305f}
.ck-btn.danger:hover{background:#fdf1f5}
.ct-err{color:#a8305f;font-weight:500;margin:8px 0}
.ct-eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ck-pink);margin:0 0 6px}
.ct-note{background:#fff;border-left:5px solid var(--ck-teal);border-radius:12px;padding:12px 16px;margin:14px 0}
.ct-note.bad{border-color:var(--ck-pink);background:#fdf1f5}

/* ---------------------------------------------------------------- sign in */
.ct-signin{max-width:520px;margin:48px auto 0;background:#fff;border-radius:32px;padding:36px 36px 30px;box-shadow:0 10px 36px #3d2b9622}
.ct-signin .lead{font-size:1.15rem;line-height:1.6;margin:10px 0 18px}
.ct-form .ct-fld{margin-bottom:16px}
.ct-fine{font-size:.92rem;color:var(--ck-slate);line-height:1.6;margin:22px 0 0}
.ct-fld{display:flex;flex-direction:column;gap:6px}
.ct-fld label,.ct-fs legend{font-weight:600;font-size:.98rem;color:var(--ck-ink)}
.ct-fld .help{font-size:.88rem;color:var(--ck-slate)}
.ct-fld input,.ct-fld select,.ct-fld textarea,.ct input[type=search]{font:400 1.05rem var(--font);color:var(--ck-ink);background:#fff;border:2px solid #3d2b9640;border-radius:12px;padding:11px 14px;min-height:48px;box-sizing:border-box;width:100%}
.ct-fld textarea{resize:vertical;min-height:100px}
.ct-fld input:focus,.ct-fld select:focus,.ct-fld textarea:focus,.ct input[type=search]:focus{outline:3px solid #3d2b9640;border-color:var(--ck-purple)}
.ct-fld.small{max-width:160px}

/* ---------------------------------------------------------------- directory: top bar */
.ct-top{padding:22px 0 14px}
.ct-titlerow{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ct-count{margin:4px 0 0;color:var(--ck-slate)}
.ct-acts{display:flex;gap:10px;flex-wrap:wrap}
.ct-acts .ck-btn{min-height:46px;padding:9px 20px;font-size:1rem;width:auto}
.ct-searchrow{display:flex;gap:12px;margin-top:16px}
.ct-search{position:relative;flex:1}
.ct-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;stroke:var(--ck-purple);fill:none;stroke-width:2.2;stroke-linecap:round;pointer-events:none}
.ct-search input{padding:14px 56px 14px 50px;min-height:56px;border-radius:99px;font-size:1.1rem;box-shadow:0 4px 18px #3d2b9618;border-color:#3d2b9633}
.ct-help{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:var(--ck-lav);color:var(--ck-purple);font:700 1rem var(--font);cursor:pointer}
.ct-filtersbtn{display:none;min-height:56px;width:auto;border-radius:99px}
.ct-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:99px;background:var(--ck-pink);color:#fff;font-size:.8rem;font-weight:700;padding:0 6px}
.ct-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.ct-chip{display:inline-flex;align-items:center;gap:6px;background:var(--ck-purple);color:#fff;border-radius:99px;padding:5px 8px 5px 14px;font-size:.92rem;max-width:100%}
.ct-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-chip button{border:0;background:#ffffff33;color:#fff;border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:1rem;line-height:1;flex:none}
.ct-chip button:hover{background:#ffffff66}

/* ---------------------------------------------------------------- directory: layout */
.ct-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}
.ct-filters{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto;background:#fff;border-radius:24px;padding:16px 14px 18px;box-shadow:0 2px 10px #3d2b960f}
.ct-fhead{display:flex;align-items:center;gap:12px;margin:0 6px 8px}
.ct-fhead h2{font-size:1.2rem;margin:0;flex:1}
.ct-fclose,.ct-fdone{display:none}
.ct-facet{border-top:1px solid #eceaf3;padding:2px 0}
.ct-facet summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 6px;font-weight:600;list-style:none;color:var(--ck-ink)}
.ct-facet summary::-webkit-details-marker{display:none}
.ct-facet summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--ck-purple);border-bottom:2px solid var(--ck-purple);transform:rotate(-45deg);transition:transform .15s;flex:none;margin-right:4px}
.ct-facet[open] summary::before{transform:rotate(45deg)}
.ct-facet summary .t{flex:1}
.ct-facet summary .sel{background:var(--ck-pink);color:#fff;border-radius:99px;font-size:.78rem;font-weight:700;padding:1px 8px}
.ct-facet.on summary .t{color:var(--ck-purple)}
.ct-fbody{padding:0 4px 10px}
.ct-seg{display:flex;background:var(--ck-lav);border-radius:99px;padding:3px;margin:2px 0 8px}
.ct-seg input{position:absolute;opacity:0;pointer-events:none}
.ct-seg label{flex:1;text-align:center;font-size:.85rem;font-weight:600;padding:5px 4px;border-radius:99px;cursor:pointer;color:var(--ck-slate)}
.ct-seg input:checked+label{background:#fff;color:var(--ck-purple);box-shadow:0 1px 4px #3d2b9626}
.ct-seg input:focus-visible+label{outline:3px solid var(--ck-purple)}
.ct-exclude{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ck-slate);margin:0 0 6px}
.ct-ffind{min-height:38px!important;padding:6px 12px!important;font-size:.95rem!important;border-radius:10px!important;margin-bottom:6px}
.ct-opts{list-style:none;margin:0;padding:0;max-height:230px;overflow-y:auto}
.ct-opts li[hidden]{display:none}
.ct-opts label{display:flex;align-items:center;gap:9px;padding:5px 4px;border-radius:8px;cursor:pointer;font-size:.97rem;line-height:1.3}
.ct-opts label:hover{background:var(--ck-lav)}
.ct-opts input{width:18px;height:18px;accent-color:var(--ck-purple);flex:none;margin:0}
.ct-opts .t{flex:1;overflow-wrap:anywhere}
.ct-opts .n{font-size:.82rem;color:var(--ck-slate);font-variant-numeric:tabular-nums;background:var(--ck-lav);border-radius:99px;padding:0 8px}
.ct-fnone{font-size:.9rem;color:var(--ck-slate);margin:4px}

/* ---------------------------------------------------------------- directory: results */
.ct-resbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ct-resn{margin:0;font-size:1.15rem;font-weight:600;color:var(--ck-ink)}
.ct-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ct-sort select{font:500 .95rem var(--font);border:2px solid #3d2b9640;border-radius:99px;padding:7px 14px;background:#fff;color:var(--ck-ink);min-height:40px}
.ct-toggle{display:inline-flex;background:#fff;border:2px solid #3d2b9640;border-radius:99px;overflow:hidden}
.ct-toggle button{font:500 .95rem var(--font);border:0;background:none;padding:7px 14px;cursor:pointer;color:var(--ck-slate);min-height:36px}
.ct-toggle button[aria-pressed=true]{background:var(--ck-purple);color:#fff}
.ct-tool{font:500 .95rem var(--font);background:#fff;color:var(--ck-purple);border:2px solid #3d2b9640;border-radius:99px;padding:7px 14px;cursor:pointer;min-height:40px}
.ct-tool:hover{border-color:var(--ck-purple);background:var(--ck-lav)}
.ct-bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--ck-purple);color:#fff;border-radius:16px;padding:8px 14px;margin-bottom:12px}
.ct-bulk .ct-link{color:#fff}
.ct-bulk .sp{flex:1}
.ct-bulk .ct-tool{background:#ffffff22;color:#fff;border-color:#ffffff55}
.ct-bulk .ct-tool:hover{background:#ffffff44}

.ct-tablewrap{background:#fff;border-radius:20px;box-shadow:0 2px 10px #3d2b960f;overflow-x:auto}
.ct-table{width:100%;border-collapse:collapse;font-size:.97rem}
.ct-table th{position:sticky;top:0;background:#fff;text-align:left;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ck-slate);padding:12px 12px;border-bottom:2px solid var(--ck-lav);white-space:nowrap}
.ct-table td{padding:11px 12px;border-bottom:1px solid #eceaf3;vertical-align:top}
.ct-table tbody tr{cursor:pointer}
.ct-table tbody tr:hover{background:#faf9ff}
.ct-table tbody tr:focus-visible{outline:3px solid var(--ck-purple);outline-offset:-3px}
.ct-table tr.sel{background:#f1eefc}
.ct-table .chk{width:36px;padding-right:0}
.ct-table input[type=checkbox],.ct-card input[type=checkbox]{width:18px;height:18px;accent-color:var(--ck-purple)}
.ct-who{display:flex;align-items:center;gap:10px}
.ct-who strong{color:var(--ck-purple)}
.ct-av{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;font-weight:700;font-size:.85rem;flex:none}
.ct-av.big{width:60px;height:60px;font-size:1.2rem}
.ct-pills{display:flex;flex-wrap:wrap;gap:4px}
.ct-pill{display:inline-block;border-radius:99px;padding:2px 10px;font-size:.8rem;font-weight:600;background:var(--ck-lav);color:var(--ck-purple);white-space:nowrap}
.ct-pill.proj{background:#dff3f7;color:#1f5a6e}
.ct-pill.warn{background:#fff1d6;color:#7a4a00}
.ct-pill.bad{background:#fdd9e6;color:#8f1f4b}
.ct-pill.info{background:#e3f6ee;color:#1a6a4e}
.ct-pill.more{background:#eceaf3;color:var(--ck-slate)}
.ct-contact{display:flex;flex-direction:column;gap:2px;font-size:.93rem}
.ct-contact a{color:var(--ck-purple);text-underline-offset:3px;overflow-wrap:anywhere}

.ct-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.ct-card{background:#fff;border-radius:22px;padding:16px 18px;box-shadow:0 2px 10px #3d2b960f;display:flex;flex-direction:column;gap:10px;cursor:pointer;border:2px solid transparent}
.ct-card:hover{border-color:#3d2b9640}
.ct-card:focus-visible{outline:3px solid var(--ck-purple)}
.ct-card.sel{border-color:var(--ck-purple);background:#f7f5fe}
.ct-card .top{display:flex;align-items:center;gap:10px}
.ct-card .who{display:flex;flex-direction:column;min-width:0}
.ct-card .who strong{color:var(--ck-purple);font-size:1.08rem}
.ct-card .sub{font-size:.9rem;color:var(--ck-slate)}
.ct-card .tags{display:flex;flex-direction:column;gap:5px}
.ct-card .loc{font-size:.9rem;color:var(--ck-slate)}
.ct-empty{text-align:center;background:#fff;border-radius:24px;padding:40px 24px}
.ct-empty h2{margin:0 0 8px}
.ct-morewrap{text-align:center;margin:18px 0 0}

/* ---------------------------------------------------------------- dialogs */
dialog.ct-dlg{border:0;border-radius:26px;padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);color:var(--ck-body);box-shadow:0 24px 70px #0006;overflow:hidden;flex-direction:column}
dialog.ct-dlg[open]{display:flex}
dialog.ct-dlg::backdrop{background:#1f243399}
dialog.ct-wide{width:min(880px,calc(100vw - 24px))}
dialog.ct-small{width:min(460px,calc(100vw - 24px))}
dialog.ct-side{margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:26px 0 0 26px;width:min(520px,100vw)}
.ct-dbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px 12px;border-bottom:1px solid #eceaf3;flex:none}
.ct-dbar h2{margin:0;font-size:1.35rem;color:var(--ck-purple)}
.ct-dbar form{margin:0}
.ct-dbody{padding:18px 22px;overflow-y:auto;flex:1;min-height:0}
.ct-dfoot{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:12px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid #eceaf3;flex:none;background:#fff}
.ct-dfoot.flat{border:0;padding:12px 0 0}
.ct-dfoot .ck-btn{width:auto;min-height:46px;padding:9px 22px;font-size:1rem}
.ct-dfoot .ct-err{flex:1 1 100%;margin:0;text-align:left}
.ct-dhead{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.ct-dhead h2{margin:0;font-size:1.5rem;color:var(--ck-purple)}
.ct-dhead p{margin:2px 0 0}
.ct-alert{background:#fff1d6;border-left:5px solid var(--ck-orange);border-radius:12px;padding:10px 14px;margin:10px 0}
.ct-alert.bad{background:#fdd9e6;border-color:var(--ck-pink)}
.ct-dacts{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 6px}
.ct-dacts .ck-btn{width:auto;min-height:42px;padding:7px 18px;font-size:.98rem}
.ct-dgroup h3{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ck-slate);margin:20px 0 6px}
.ct-dgroup dl{margin:0}
.ct-row{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:7px 0;border-bottom:1px solid #f1eff8}
.ct-row dt{color:var(--ck-slate);font-size:.93rem}
.ct-row dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
.ct-row a{color:var(--ck-purple)}
.ct-meta{font-size:.88rem;color:var(--ck-slate);margin:22px 0 0}

/* the add / edit form */
.ct-fs{border:0;margin:0 0 20px;padding:0}
.ct-fs legend{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ck-purple);font-weight:700;padding:0;margin-bottom:10px}
.ct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ct-fld.wide{grid-column:1/-1}
.ct-dupe{margin:0;font-size:.92rem;background:#fff1d6;border-radius:8px;padding:6px 10px}
.ct-chipin{position:relative;display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:2px solid #3d2b9640;border-radius:12px;padding:6px 8px;background:#fff;min-height:48px;box-sizing:border-box}
.ct-chipin:focus-within{outline:3px solid #3d2b9640;border-color:var(--ck-purple)}
.ct-chipin input{border:0!important;outline:0!important;flex:1;min-width:130px;min-height:34px!important;padding:4px!important;width:auto!important;background:none}
.ct-chipitem{display:inline-flex;align-items:center;gap:6px;background:var(--ck-lav);color:var(--ck-purple);border-radius:99px;padding:3px 4px 3px 12px;font-size:.92rem;font-weight:600}
.ct-chipitem button{border:0;background:#3d2b9626;color:var(--ck-purple);border-radius:50%;width:22px;height:22px;cursor:pointer;line-height:1}
.ct-menu{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:#fff;border:2px solid var(--ck-purple);border-radius:12px;z-index:10;max-height:220px;overflow-y:auto;box-shadow:0 10px 30px #3d2b9633}
.ct-menu li{padding:8px 12px;border-radius:8px;cursor:pointer}
.ct-menu li:hover,.ct-menu li.hi{background:var(--ck-lav)}

.ct-tips table{border-collapse:collapse;width:100%;margin:10px 0}
.ct-tips th,.ct-tips td{text-align:left;padding:8px 10px;border-bottom:1px solid #eceaf3;vertical-align:top}
.ct-tips th{white-space:nowrap}
.ct-tips code,.ct code{background:var(--ck-lav);color:var(--ck-purple);border-radius:6px;padding:1px 6px;font-size:.92em}
.ct-tips kbd{background:#fff;border:1px solid #3d2b9655;border-bottom-width:2px;border-radius:6px;padding:0 7px;font-size:.9em}
.ct-views{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px}
.ct-views li{display:flex;gap:6px}
.ct-views .use{flex:1;text-align:left;font:500 1rem var(--font);background:var(--ck-lav);color:var(--ck-purple);border:0;border-radius:12px;padding:10px 14px;cursor:pointer}
.ct-views .del{border:0;background:none;color:#a8305f;font-size:1.3rem;cursor:pointer;padding:0 8px}
.ct-savev label{display:block;font-weight:600;margin-bottom:6px}
.ct-savev .row{display:flex;gap:8px}
.ct-savev input{flex:1;font:400 1rem var(--font);border:2px solid #3d2b9640;border-radius:12px;padding:10px 12px;min-width:0}
.ct-savev .ck-btn{width:auto;min-height:46px;padding:8px 20px}
.ct-cols{list-style:none;margin:0;padding:0}
.ct-cols label{display:flex;gap:10px;align-items:center;padding:8px 0;font-size:1.02rem}
.ct-cols input{width:20px;height:20px;accent-color:var(--ck-purple)}
.ct-act{list-style:none;margin:0;padding:0}
.ct-act li{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid #f1eff8;font-size:.95rem}
.ct-act .when{color:var(--ck-slate)}
.ct-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:var(--ck-purple);color:#fff;border-radius:99px;padding:12px 22px;font-weight:500;box-shadow:0 10px 30px #0004;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:200;max-width:calc(100vw - 32px)}
.ct-toast.show{opacity:1;transform:translate(-50%,0)}
.ct-toast.bad{background:#a8305f}

/* ---------------------------------------------------------------- import */
.ct-crumb{margin:22px 0 10px;display:flex;justify-content:space-between;gap:10px}
.ct-crumb a{color:var(--ck-purple);text-underline-offset:4px;font-weight:500}
.ct-step{background:#fff;border-radius:28px;padding:26px 28px 28px;margin:18px 0;box-shadow:0 2px 10px #3d2b960f}
.ct-step h2{display:flex;align-items:center;gap:12px;font-size:1.4rem;margin:0 0 16px}
.ct-step h2 .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ck-purple);color:#fff;font-size:1rem}
.ct-step h2 .n.ok{background:#2f9e78}
.ct-step h3{font-size:1.1rem;margin:22px 0 8px}
.ct-drop{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:3px dashed #3d2b9655;border-radius:24px;padding:38px 20px;cursor:pointer;background:var(--ck-lav);color:var(--ck-ink);font-size:1.15rem}
.ct-drop strong{color:var(--ck-purple)}
.ct-drop span{font-size:.95rem;color:var(--ck-slate)}
.ct-drop.over,.ct-drop:hover,.ct-drop:focus-within{border-color:var(--ck-purple);background:#e3def8}
.ct-drop input{position:absolute;opacity:0;width:1px;height:1px}
.ct-points{padding-left:20px;line-height:1.65;margin:16px 0 8px}
.ct-fname{margin:0 0 12px}
.ct-sum{font-weight:600;color:var(--ck-purple);margin:14px 0 8px}
.ct-tscroll{overflow-x:auto;border:1px solid #eceaf3;border-radius:16px}
.ct-map,.ct-prev{border-collapse:collapse;width:100%;font-size:.95rem}
.ct-map th,.ct-prev th{background:var(--ck-lav);text-align:left;padding:10px 12px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ck-slate)}
.ct-map td,.ct-prev td{padding:9px 12px;border-top:1px solid #eceaf3;vertical-align:middle}
.ct-map tr.skip td{opacity:.6}
.ct-samples{color:var(--ck-slate);max-width:300px;overflow-wrap:anywhere}
.ct-map select{font:400 .98rem var(--font);border:2px solid #3d2b9640;border-radius:10px;padding:8px 10px;min-height:42px;width:100%;min-width:190px;background:#fff}
.ct-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.ct-btns .ck-btn{width:auto;min-width:150px}
.ct-facts{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:1.05rem}
.ct-facts strong{display:inline-block;min-width:2.2em;color:var(--ck-purple);font-size:1.15rem}
.ct-mode{border:2px solid #3d2b9640;border-radius:16px;padding:12px 16px;margin:14px 0}
.ct-mode legend{font-weight:600;padding:0 6px}
.ct-mode label{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.ct-mode input{margin-top:5px;accent-color:var(--ck-purple)}
.ct-progress{margin:18px 0 0}
.ct-progress .track{height:12px;background:var(--ck-lav);border-radius:99px;overflow:hidden}
.ct-progress .bar{height:100%;width:0;background:var(--ck-pink);transition:width .3s}
.ct-rejects{margin:10px 0 0;padding-left:20px;color:#8f1f4b}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width:1000px){
  .ct-wrap{padding:0 16px}
  .ct-layout{grid-template-columns:1fr}
  .ct-filtersbtn{display:inline-flex;align-items:center;gap:8px}
  .ct-filters{position:fixed;inset:0;z-index:90;max-height:none;border-radius:0;transform:translateX(-102%);transition:transform .25s;padding:14px 16px 90px;overflow-y:auto}
  body.ct-filters-open .ct-filters{transform:none}
  body.ct-filters-open{overflow:hidden}
  .ct-fclose{display:block;border:0;background:var(--ck-lav);border-radius:50%;width:40px;height:40px;font-size:1.5rem;cursor:pointer;color:var(--ck-purple)}
  .ct-fdone{display:block;position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #eceaf3}
  .ct-fdone .ck-btn{width:100%}
}
@media (max-width:640px){
  .ct-signin{padding:26px 20px 22px;border-radius:26px;margin-top:20px}
  .ct-top{padding-top:14px}
  .ct-titlerow{align-items:flex-start;gap:8px}
  .ct-acts{width:100%;flex-wrap:nowrap;gap:6px}
  .ct-acts .ck-btn{padding:8px 10px;min-height:42px;font-size:.88rem;flex:1 1 auto;white-space:nowrap}
  .ct-searchrow{margin-top:12px}
  .ct-toggle,#colsBtn{display:none}
  .ct-tools{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin:0 -16px;padding-left:16px;padding-right:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ct-tools>*{flex:none}
  .ct-filtersbtn{padding:0 18px}
  .ct-search input{min-height:52px;font-size:1rem}
  .ct-tools{gap:6px}
  .ct-cards{grid-template-columns:1fr}
  .ct-grid{grid-template-columns:1fr}
  .ct-row{grid-template-columns:1fr;gap:2px}
  .ct-act li{grid-template-columns:1fr;gap:0}
  .ct-step{padding:20px 16px;border-radius:22px}
  dialog.ct-dlg{border-radius:22px;width:calc(100vw - 16px)}
  dialog.ct-side{width:100vw;border-radius:0}
  .ct-dbody{padding:14px 16px}.ct-dbar{padding:14px 16px 10px}.ct-dfoot{padding-left:16px;padding-right:16px}
  .ct-dfoot .ck-btn{flex:1 1 auto}
  .ct-btns .ck-btn{flex:1 1 140px}
}
@media (prefers-reduced-motion:reduce){.ct-filters,.ct-toast,.ct-progress .bar{transition:none}}
@media print{.ct-filters,.ct-top .ct-acts,.ct-searchrow,.ct-bulk,.ct-tools{display:none!important}}

/* ---------------------------------------------------------------- fixes after the first look */
.ct .ct-search input{padding:14px 56px 14px 54px}
.ct-table{min-width:1040px}
.ct-table td.nm{min-width:200px}
.ct-contact{min-width:215px}
.ct-contact a{overflow-wrap:break-word;word-break:normal}
.ct-fld.small{max-width:240px}
.ct-fld.small label{white-space:nowrap}
.ct-samples{overflow-wrap:break-word}
.ct-layout{grid-template-columns:300px minmax(0,1fr)}
.ct-results{min-width:0}
@media (max-width:1000px){.ct-layout{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- "do you mean this person?" and notes */
.ct-maybe{grid-column:1/-1;background:#fff8e6;border:2px solid var(--ck-yellow);border-radius:16px;padding:12px 14px}
.ct-maybe .q{margin:0 0 8px}
.ct-maybe ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:8px}
.ct-maybe li{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:8px 10px}
.ct-maybe .t{flex:1;display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.ct-maybe .ck-btn{width:auto;min-height:40px;padding:6px 14px;font-size:.92rem;flex:none}
.ct-grid .wide{grid-column:1/-1}
.ct-notes h3{margin-top:24px}
.ct-newnote{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-bottom:12px}
.ct-newnote textarea{width:100%;box-sizing:border-box;font:400 1rem var(--font);border:2px solid #3d2b9640;border-radius:12px;padding:10px 12px;resize:vertical;min-height:80px}
.ct-newnote textarea:focus{outline:3px solid #3d2b9640;border-color:var(--ck-purple)}
.ct-newnote .ck-btn{width:auto;min-height:42px;padding:7px 20px;font-size:.98rem}
.ct-newnote .ct-err{margin:0}
.ct-notelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ct-notelist li{background:#f7f5fe;border-left:5px solid var(--ck-purple);border-radius:12px;padding:10px 14px}
.ct-notelist .nh{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;font-size:.92rem}
.ct-notelist .nh .del{margin-left:auto;font-size:.88rem;color:#a8305f}
.ct-notelist p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.ct-pill:not(.warn):not(.bad):not(.info):not(.proj):not(.who):not(.more){background:#fff1f6;color:#8f1f4b}

/* ---------------------------------------------------------------- phones: windows fill the visible area, above the keyboard
   --vvh and --vvt are the height and top of the part of the screen you can see (set in app.js), so the form keeps its room when the keyboard opens. */
@media (max-width:640px){
  dialog.ct-dlg:not(.ct-small),dialog.ct-side{position:fixed;top:var(--vvt,0px);left:0;right:0;bottom:auto;margin:0;width:100vw;max-width:none;height:var(--vvh,100dvh);max-height:none;border-radius:0}
  dialog.ct-dlg .ct-dbar{padding:10px 16px 8px}
  dialog.ct-dlg .ct-dbar h2{font-size:1.15rem}
  dialog.ct-dlg .ct-dfoot{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));gap:8px}
  dialog.ct-dlg .ct-dfoot .ck-btn{min-height:44px;padding:6px 12px;font-size:.95rem}
  dialog.ct-dlg .ct-dbody{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  dialog.ct-small{width:calc(100vw - 24px)}
}

/* ---------------------------------------------------------------- the filter bar (replaces the side panel) */
.ct-layout.one{display:block}
.ct-fbarwrap{position:sticky;top:var(--head-h,0px);z-index:25;background:linear-gradient(#f3f1fc,#f3f1fcf2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:10px 0 8px;margin-bottom:14px;border-bottom:1px solid #3d2b9614}
.ct-fbar{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0}
.ct-fbar::-webkit-scrollbar{display:none}
.ct-fpill{flex:none;display:inline-flex;align-items:center;gap:6px;font:500 .98rem var(--font);color:var(--ck-purple);background:#fff;border:2px solid #3d2b9640;border-radius:99px;padding:8px 14px;min-height:44px;cursor:pointer;white-space:nowrap;max-width:260px;touch-action:manipulation}
.ct-fpill .tx{overflow:hidden;text-overflow:ellipsis}
.ct-fpill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ct-fpill:hover{border-color:var(--ck-purple)}
.ct-fpill:focus-visible{outline:3px solid var(--ck-purple);outline-offset:2px}
.ct-fpill.on{background:var(--ck-purple);border-color:var(--ck-purple);color:#fff}
.ct-fpill.main{font-weight:700;border-color:var(--ck-purple)}
.ct-fpill.main .ct-badge{background:var(--ck-pink)}
.ct-fpill.main.on .ct-badge{background:#fff;color:var(--ck-purple)}
.ct-fpill.ghost{border-style:dashed}
.ct-chips{margin-top:8px}
.ct-chiplbl{font-weight:600;color:var(--ck-slate);font-size:.92rem}

/* filter windows */
.ct-x{border:0;background:var(--ck-lav);color:var(--ck-purple);width:40px;height:40px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;flex:none}
dialog.ct-pop{position:fixed;margin:0;width:min(380px,calc(100vw - 24px));max-height:min(560px,calc(100dvh - 120px))}
dialog.ct-pop::backdrop{background:#1f243333}
dialog.ct-pop .ct-dfoot .ck-btn,dialog.ct-allf .ct-dfoot .ck-btn{flex:1 1 auto}
dialog.ct-allf{width:min(460px,100vw)}
.ct-facetbox .ct-ffind{width:100%;box-sizing:border-box;font:400 1rem var(--font);border:2px solid #3d2b9640;border-radius:12px;padding:9px 12px;margin:0 0 8px}
.ct-facetbox .ct-ffind:focus{outline:3px solid #3d2b9640;border-color:var(--ck-purple)}
.ct-facetbox .ct-opts{max-height:none;overflow:visible}
.ct-facetbox .ct-opts label{padding:9px 6px;font-size:1rem;min-height:28px}
.ct-facetbox .ct-opts input{width:20px;height:20px}
.ct-opts li.zero .t,.ct-opts li.zero .n{opacity:.5}
.ct-match{border:0;margin:12px 0 0;padding:12px 12px 6px;background:var(--ck-lav);border-radius:14px}
.ct-match legend{float:left;width:100%;font-weight:700;font-size:.92rem;color:var(--ck-ink);padding:0;margin-bottom:6px}
.ct-match label{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:.98rem;clear:both}
.ct-match input{width:18px;height:18px;accent-color:var(--ck-purple);margin:0}
.ct-fgroup h3{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ck-pink);margin:18px 0 6px}
.ct-fgroup:first-child h3{margin-top:4px}
.ct-allf .ct-facet{border:0;border-bottom:1px solid #eceaf3}
.ct-allf .ct-facet summary{padding:12px 4px;align-items:center}
.ct-allf .ct-facet summary .lbl{flex:1;display:flex;flex-direction:column;min-width:0}
.ct-allf .ct-facet summary .sum{font-weight:500;font-size:.88rem;color:var(--ck-purple);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-allf .ct-facet summary .sum[hidden]{display:none}
.ct-allf .ct-facet .ct-facetbox{padding:0 4px 14px}
@media (max-width:640px){
  .ct-fbarwrap{padding:8px 0 6px;margin-bottom:10px}
  .ct-fbar{margin:0 -16px;padding:2px 16px}
  .ct-fpill{font-size:.95rem;padding:7px 12px;min-height:42px}
}
@media (max-width:640px){
  /* a fade on the right shows the filter buttons carry on sideways */
  .ct-fbar{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);padding-right:40px}
}

/* ---------------------------------------------------------------- contact cards: one layout for everyone */
.ct-cards{gap:12px}
.ct-card{position:relative;gap:0;padding:0;border:1px solid #3d2b9626;border-radius:20px;box-shadow:0 1px 3px #3d2b9612;overflow:hidden;background:#fff}
.ct-card:hover{border-color:#3d2b9666;box-shadow:0 6px 18px #3d2b961f}
.ct-card:focus{outline:none}
.ct-card:focus-visible{outline:2px solid var(--ck-purple);outline-offset:2px}
.ct-card.sel{border-color:var(--ck-purple);background:#fff;box-shadow:inset 4px 0 0 var(--ck-purple)}
.ct-card .top{display:flex;align-items:center;gap:12px;padding:14px 14px 12px 16px;border-bottom:1px solid #eceaf3;background:#fbfaff}
.ct-card .who{flex:1;min-width:0}
.ct-card .who strong{display:block;font-size:1.08rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-card .who .sub{display:block;font-size:.9rem;color:var(--ck-slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.ct-card .who .sub.none,.ct-card .none{color:#9a9fb0;font-style:italic}
.ct-card .top input[type=checkbox]{flex:none;width:22px;height:22px;margin:0}
.ct-card .info{display:flex;flex-direction:column;gap:7px;padding:12px 16px 10px}
.ct-card .ln{display:flex;align-items:center;gap:10px;min-height:24px;font-size:.95rem;min-width:0}
.ct-card .ln>:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-card .ln a{color:var(--ck-purple);text-decoration:none;font-weight:500}
.ct-card .ln a:hover{text-decoration:underline}
.ct-card .ic{flex:none;width:28px;height:28px;border-radius:8px;background:var(--ck-lav);display:grid;place-items:center}
.ct-card .ic svg{width:16px;height:16px;fill:none;stroke:var(--ck-purple);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-card .ct-pills.one{display:flex;flex-wrap:nowrap;gap:4px;overflow:hidden}
.ct-card .ct-pills.one .ct-pills{flex-wrap:nowrap}
.ct-card .flags{padding:0 16px 10px}
.ct-card .go{display:block;padding:9px 16px;border-top:1px solid #eceaf3;font-size:.88rem;font-weight:600;color:var(--ck-purple);text-align:right}
.ct-gap{color:#b5b8c5}
.ct-card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px;border-top:1px solid #eceaf3;min-height:26px}
.ct-card .foot .ct-pills{flex-wrap:nowrap;overflow:hidden;min-width:0}
.ct-card .foot .go{border:0;padding:0;flex:none}
.ct-card .who .sub.none,.ct-card .none{font-style:normal;color:#a3a7b6}
.ct-card .foot{height:44px;min-height:0;box-sizing:border-box;padding-top:0;padding-bottom:0}
.ct-card .foot .ct-pill{line-height:1.5}

/* ---------------------------------------------------------------- Safari: windows must not collapse
   "flex: 1" on the middle of a window with no set height makes Safari shrink it to nothing. Size the middle from its content
   instead (it still scrolls when the window reaches its maximum height), and give the add / edit window a real height. */
.ct-dbody{flex:1 1 auto}
.ct-dbar,.ct-dfoot{flex:0 0 auto}
@media (min-width:641px){
  dialog.ct-wide{height:min(880px,calc(100vh - 48px));height:min(880px,calc(100dvh - 48px))}
  dialog.ct-pop{height:auto}
}
