/* Contacts (T4b, round 2 B4). Scoped under .gch-m-contacts (dialogs and popovers live in #gch-layer and use .ct-*).
   Job contacts with role + priority, Grid / List layouts and Hub access; the company directory with Internal / External
   (Companies / Individuals) / Job contacts tabs, folding groups, trade tags, reviews and performance (DEV-346). Tokens
   from base.css. */

.gch-m-contacts .mid{color:var(--mid)}
.gch-m-contacts .ct-note{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);margin:0 var(--gut) var(--s3);padding:9px var(--s3);background:var(--bg2);border:1px solid var(--line);border-left:2px solid var(--o);font-size:13.5px;color:var(--ink2)}
.gch-m-contacts .ct-note > .i{width:16px;height:16px;color:var(--mid)}
.gch-m-contacts .ct-note b{color:var(--ink);font-weight:600}
.gch-m-contacts .ct-note-n{margin-left:auto;font-size:13px;color:var(--mid);white-space:nowrap;font-variant-numeric:tabular-nums}
.gch-m-contacts .ct-note-n b{color:var(--ink)}
.gch-m-contacts .ct-status{flex:none;display:flex;align-items:center;gap:var(--s3);margin:0 var(--gut) var(--s3);padding:8px var(--s3);background:var(--bg2);border:1px solid var(--line);border-left:2px solid var(--ok);font-size:13.5px;color:var(--ink)}
.gch-m-contacts .ct-status .btn{margin-left:auto}
.gch-m-contacts .ct-hint{flex:none;padding:var(--s2) var(--gut);font-size:13px;color:var(--mid);border-top:1px solid var(--line)}
.gch-m-contacts .ct-hint a{color:var(--ink2)}
.gch-m-contacts .ct-jobmain{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}

.gch-m-contacts .ct-name{display:inline-flex;align-items:center;gap:var(--s2);max-width:100%;vertical-align:middle}
.gch-m-contacts .ct-name b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.gch-m-contacts .ct-name .gch-av{width:26px;height:26px;font-size:11px}
.gch-m-contacts .ct-mail{color:var(--ink2);text-decoration:none}
.gch-m-contacts .ct-mail:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.gch-m-contacts .ct-acc{display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap}
.gch-m-contacts .ct-acc b{font-weight:500;color:var(--ink)}
.gch-m-contacts .ct-acc.is-staff{color:var(--mid)}
.gch-m-contacts .ct-acc.is-invited b{color:var(--ink2)}
.gch-m-contacts .ct-inv{border-color:var(--line2);color:var(--ink)}
.gch-m-contacts .ct-inv:hover{border-color:var(--o)}
.gch-m-contacts .ct-inv .i{color:var(--o-txt)}
.gch-m-contacts td.c-access{width:1%}
.gch-m-contacts .ct-co{font-weight:600}
.gch-m-contacts .ct-pn{display:inline-block;min-width:20px;margin-left:4px;padding:0 5px;border:1px solid var(--line2);font-size:11.5px;font-weight:600;color:var(--ink2);text-align:center;font-variant-numeric:tabular-nums}
.gch-m-contacts .ct-dept{color:var(--ink2)}
.gch-m-contacts .ct-rate{display:inline-flex;align-items:baseline;gap:6px;justify-content:flex-end;white-space:nowrap}
.gch-m-contacts .ct-rate b{font-weight:600;font-variant-numeric:tabular-nums}
.gch-m-contacts .ct-rate small{font-size:12px;color:var(--mid)}
.gch-m-contacts .ct-tg{display:inline-flex;align-items:center;margin:1px 4px 1px 0;padding:1px 7px;font-size:12px;color:var(--ink2);background:var(--tag-bg);white-space:nowrap}
.gch-m-contacts .ct-tg.is-geo{background:none;border:1px solid var(--line2)}
.gch-m-contacts td.c-scopes,.gch-m-contacts td.c-region{white-space:normal;max-width:280px}
.ct-pri{display:inline-flex;align-items:center;margin-left:4px;padding:0 6px;border:1px solid var(--line2);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);line-height:17px;vertical-align:1px;white-space:nowrap}
.ct-pri.is-main{border-color:var(--edge);color:var(--ink)}
.gch-m-contacts .ct-rolec{display:inline-flex;align-items:center;gap:2px;max-width:100%;white-space:nowrap}
.gch-m-contacts .ct-ed,.ct-ed{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;margin-left:4px;padding:0;background:none;border:1px solid transparent;color:var(--mid);cursor:pointer;vertical-align:middle}
.gch-m-contacts .ct-ed:hover,.ct-ed:hover{border-color:var(--edge);color:var(--ink)}
.gch-m-contacts .ct-ed .i,.ct-ed .i{width:15px;height:15px}

/* list toolbar extras: sort + layout switch, folding groups, add rows */
.gch-m-contacts .ct-ctls{display:inline-flex;align-items:center;gap:var(--s2)}
.gch-m-contacts .ct-sortl{display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--mid);white-space:nowrap}
.gch-m-contacts .ct-sortl select{width:auto;font-size:13px}
.gch-m-contacts .ct-viewsw{display:inline-flex}
.gch-m-contacts .ct-viewsw button{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;background:none;border:1px solid var(--line2);color:var(--ink2);cursor:pointer}
.gch-m-contacts .ct-viewsw button + button{border-left:0}
.gch-m-contacts .ct-viewsw button[aria-pressed="true"]{border:1px solid var(--o);color:var(--ink);background:var(--bg2)}
.gch-m-contacts .ct-viewsw .i{width:17px;height:17px}
.gch-m-contacts .ct-foldall .i{width:16px;height:16px}
.gch-m-contacts tr.ct-fold{cursor:pointer}
.gch-m-contacts tr.ct-fold th{user-select:none}
.gch-m-contacts tr.ct-fold:hover th{color:var(--ink);background:var(--bg3)}
.gch-m-contacts tr.ct-fold:focus-visible{outline:1px solid var(--o);outline-offset:-1px}
.gch-m-contacts .ct-car{display:inline-flex;margin-right:6px;vertical-align:-3px;color:var(--mid);transition:transform var(--t-hover) var(--ease)}
.gch-m-contacts .ct-car .i{width:14px;height:14px}
.gch-m-contacts tr.ct-fold[aria-expanded="false"] .ct-car{transform:rotate(-90deg)}
.gch-m-contacts tr.ct-addrow td{height:auto !important;padding-top:2px !important;padding-bottom:6px !important;background:var(--bg2)}
.gch-m-contacts .ct-addp{border-color:transparent;color:var(--ink)}
.gch-m-contacts .ct-addp .i{color:var(--o-txt)}

/* grid layout (today's cards) */
.gch-m-contacts .ct-grid-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.gch-m-contacts .ct-grid{flex:1;min-height:0;overflow-y:auto;padding:0 var(--gut) var(--s6);border-top:1px solid var(--line)}
.gch-m-contacts .ct-grp h3{margin:var(--s4) 0 var(--s2);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.gch-m-contacts .ct-grp h3 .mid{margin-left:4px;font-variant-numeric:tabular-nums}
.gch-m-contacts .ct-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s2)}
.gch-m-contacts .ct-card{position:relative;display:flex;flex-direction:column;gap:3px;padding:var(--s3);background:var(--bg2);border:1px solid var(--line);cursor:pointer;min-width:0}
.gch-m-contacts .ct-card:hover{border-color:var(--edge)}
.gch-m-contacts .ct-card.is-sel{box-shadow:inset 2px 0 0 var(--o);background:var(--bg3)}
.gch-m-contacts .ct-card:focus-visible{outline:1px solid var(--o);outline-offset:-1px}
.gch-m-contacts .ct-card p{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gch-m-contacts .ct-card .ct-role{display:flex;align-items:center;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mid);white-space:nowrap}
.gch-m-contacts .ct-card .ct-role .ct-ed{margin-left:auto}
.gch-m-contacts .ct-card .ct-co{font-size:13px;font-weight:500;color:var(--ink2)}
.gch-m-contacts .ct-card .ct-nm{font-size:15px;font-weight:600}
.gch-m-contacts .ct-card .ct-nm small{display:block;font-size:12.5px;font-weight:400;color:var(--mid)}
.gch-m-contacts .ct-card .ct-em,.gch-m-contacts .ct-card .ct-tel{font-size:13px;white-space:nowrap}
.gch-m-contacts .ct-card .ct-web{display:block;font-size:12px;color:var(--mid)}
.gch-m-contacts .ct-card .ct-hub{margin-top:var(--s1);padding-top:var(--s2);border-top:1px solid var(--line);font-size:13px}
.gch-m-contacts .ct-empty{padding:var(--s2) 0;font-size:13px}

/* tabs — today's Internal / External (+ Job contacts), and Companies / Individuals */
.gch-m-contacts .ct-tabs{flex:none;display:flex;align-items:center;gap:var(--s2);margin:0 var(--gut) var(--s3);border-bottom:1px solid var(--line2);overflow-x:auto;scrollbar-width:none}
.gch-m-contacts .ct-tabs a{flex:none;display:inline-flex;align-items:baseline;gap:6px;height:44px;padding:13px 12px 0;font-size:14px;font-weight:500;color:var(--ink2);text-decoration:none;box-shadow:inset 0 -2px 0 transparent;white-space:nowrap}
.gch-m-contacts .ct-tabs a:hover{color:var(--ink);background:var(--bg3)}
.gch-m-contacts .ct-tabs a.is-on{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--o)}
.gch-m-contacts .ct-tabs .n,.gch-m-contacts .ct-subtabs .n{font-size:12.5px;font-weight:500;color:var(--mid);font-variant-numeric:tabular-nums}
.gch-m-contacts .ct-tabnote{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mid);white-space:nowrap}
.gch-m-contacts .ct-tabnote .i{width:14px;height:14px}
.gch-m-contacts .ct-subtabs{flex:none;display:inline-flex;margin:0 var(--gut) var(--s3);align-self:flex-start}
.gch-m-contacts .ct-subtabs a{display:inline-flex;align-items:baseline;gap:6px;height:34px;padding:7px 14px 0;border:1px solid var(--line2);font-size:13.5px;color:var(--ink2);text-decoration:none}
.gch-m-contacts .ct-subtabs a + a{border-left:0}
.gch-m-contacts .ct-subtabs a.is-on{border:1px solid var(--o);color:var(--ink);font-weight:600;background:var(--bg2)}

/* job contacts tab (company layer) */
.gch-m-contacts .ct-jobs{flex:1;min-height:0;overflow-y:auto;padding:0 var(--gut) var(--s8)}
.gch-m-contacts .ct-lead{max-width:80ch;margin-bottom:var(--s3);font-size:13.5px}
.gch-m-contacts .ct-jobrow{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:6px var(--s2);border-bottom:1px solid var(--line);text-decoration:none;max-width:1000px}
.gch-m-contacts .ct-jobrow:hover{background:var(--bg2)}
.gch-m-contacts .ct-jobrow > span:first-child{flex:1;min-width:0}
.gch-m-contacts .ct-jobrow small{display:block;font-size:12.5px;color:var(--mid)}
.gch-m-contacts .ct-jobrow > .i{width:16px;height:16px;color:var(--mid)}

/* side panels (person, company) */
.gch-m-contacts .ct-ph{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s1)}
.gch-m-contacts .ct-ph .gch-av{width:40px;height:40px;font-size:14px}
.gch-m-contacts .ct-ph .gp-title{margin-top:0}
.gch-m-contacts .ct-sub{font-size:13px;color:var(--ink2);margin-top:2px}
.gch-m-contacts .ct-state{margin-top:var(--s3);font-size:13.5px}
.gch-m-contacts .ct-panel .gp-facts dd a{color:var(--ink);text-decoration:none}
.gch-m-contacts .ct-panel .gp-facts dd a:hover{text-decoration:underline;text-underline-offset:2px}
.gch-m-contacts .ct-panel .gp-actions a.btn:not(.btn-p){border-color:var(--line2)}
.gch-m-contacts .ct-sees{color:var(--ink);line-height:1.5}
.gch-m-contacts .ct-free{margin-top:var(--s2);font-size:12.5px}
.gch-m-contacts .ct-jl{grid-template-columns:108px 52px minmax(0,1fr)}
.gch-m-contacts .ct-people{display:flex;flex-direction:column}
.gch-m-contacts .ct-pp{display:flex;align-items:center;gap:var(--s2);padding:7px 0;border-bottom:1px solid var(--line)}
.gch-m-contacts .ct-pp:last-child{border-bottom:0}
.gch-m-contacts .ct-pp > span:not(.gch-av){flex:1;min-width:0}
.gch-m-contacts .ct-pp b{display:block;font-weight:500}
.gch-m-contacts .ct-pp small{display:block;font-size:12px;color:var(--mid);overflow:hidden;text-overflow:ellipsis}
.gch-m-contacts .ct-panel .ct-addp{margin-top:var(--s2)}
/* A company's History and Follow-ups (DEV-342): counts of what happened, hairlines, no fills, no scores. */
.gch-m-contacts .ct-hc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 var(--s3);border:1px solid var(--line)}
.gch-m-contacts .ct-hc div{padding:8px 10px;border-left:1px solid var(--line)}
.gch-m-contacts .ct-hc div:first-child{border-left:0}
.gch-m-contacts .ct-hc dt{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mid)}
.gch-m-contacts .ct-hc dd{margin:2px 0 0;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.gch-m-contacts .ct-hh{margin:var(--s3) 0 2px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.gch-m-contacts .ct-rule{margin-top:var(--s3);font-size:12.5px}
.gch-m-contacts .ct-fus{display:flex;flex-direction:column}
.gch-m-contacts .ct-fu{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:baseline;gap:var(--s2);padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.gch-m-contacts .ct-fu:last-child{border-bottom:0}
.gch-m-contacts .ct-fu-d{font-size:12.5px;color:var(--mid);font-variant-numeric:tabular-nums;white-space:nowrap}
.gch-m-contacts .ct-fu.is-late .ct-fu-d{color:var(--danger);font-weight:600}
.gch-m-contacts .ct-fu-n small{display:block;font-size:12px;color:var(--mid)}
.gch-m-contacts .ct-fu-a{display:inline-flex;align-items:center;gap:2px}
.gch-m-contacts .ct-fu-old{margin:var(--s2) 0 0}
.gch-m-contacts .ct-fu-old summary{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12.5px;color:var(--mid);list-style:none}
.gch-m-contacts .ct-fu-old summary::-webkit-details-marker{display:none}
.gch-m-contacts .ct-fu-old[open] summary .car{transform:rotate(180deg)}
.gch-m-contacts .ct-fu-old .car{width:14px;height:14px}

/* dialogs (in #gch-layer) */
.ct-inv-to{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.ct-inv-to .ff-l{white-space:nowrap}
.ct-chip{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:13.5px}
.ct-chip small{font-size:12px;color:var(--mid)}
.ct-inv-to .ct-chip + .ct-chip{grid-column:2}
.ct-astatus{font-size:13px;font-weight:600;color:var(--danger)}
.ct-astatus:empty{display:none}
.ct-aextra{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:space-between}
.ct-aextra .ct-rm{color:var(--danger)}
.ct-imp-pick{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.ct-imp-st{font-size:13.5px;margin-bottom:var(--s2);color:var(--ink)}
.ct-imp-st:empty{display:none}
.ct-imp-tw{max-height:320px;overflow:auto;border:1px solid var(--line)}
.ct-imp-t{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg)}
.ct-imp-t th,.ct-imp-t td{padding:6px 10px;border-bottom:1px solid var(--line);font-size:13px;text-align:left;white-space:nowrap}
.ct-imp-t thead th{position:sticky;top:0;background:var(--bg2);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mid)}
.ct-imp-t td.num,.ct-imp-t th.num{text-align:right;font-variant-numeric:tabular-nums}
.ct-imp-t tr.is-skip td{color:var(--mid)}
.ct-imp-job{margin-top:var(--s3)}
.ct-xmenu .ct-xopt{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:52px;padding:0 var(--s4);background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);text-align:left;cursor:pointer;font-size:14px}
.ct-xmenu .ct-xopt:last-child{border-bottom:0}
.ct-xmenu .ct-xopt:hover{background:var(--bg3)}
.ct-xmenu .ct-xopt .i{width:18px;height:18px;color:var(--mid)}
.ct-xmenu .ct-xopt small{display:block;font-size:12px;color:var(--mid)}

@media (max-width:759px){
  .gch-m-contacts .ct-fu{grid-template-columns:76px minmax(0,1fr)}
  .gch-m-contacts .ct-fu-a{grid-column:2}
  .gch-m-contacts .ct-hc div{padding:6px}
  .gch-m-contacts .ct-hc dt{font-size:10.5px;letter-spacing:.02em}
  .gch-m-contacts .ct-note-n{margin-left:0}
  .gch-m-contacts .ct-tabnote{display:none}
  /* DEV-356 WS6-E: the tabs fade at the right edge, as Settings' tabs do, so the third one reads as off screen. */
  .gch-m-contacts .ct-tabs{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .gch-m-contacts .ct-tabs > :last-child{margin-right:48px}
  .gch-m-contacts .ct-inv span{display:none}
  .gch-m-contacts .ct-acc .mid{display:none}
  .gch-m-contacts .ct-state .ct-acc .mid{display:inline}
  .gch-m-contacts .ct-sortl label{display:none}
  .gch-m-contacts .ct-cards{grid-template-columns:1fr}
  .gch-m-contacts .ct-rolec .ct-pri{display:none}
  .ct-inv-to{grid-template-columns:1fr}
  .ct-inv-to .ct-chip + .ct-chip{grid-column:auto}
}

/* R2 (round 3): a detail the permissions matrix does not share with this viewer */
.gch-m-contacts .ct-nd{font-size:12.5px}

/* P2 (round 3): a staff person's access on their card (Level, Sign-in, Jobs, Exceptions), its two dialogs, and the
   line under a job's contacts that says who else can open the job. Hairlines; Remove is a quiet text button. */
.gch-m-contacts .ct-ax{padding:var(--s3) var(--s6) var(--s3);border-bottom:1px solid var(--line)}
.gch-m-contacts .ct-axh{margin:0 0 2px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.gch-m-contacts .ct-axr{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:var(--s3);padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.4}
.gch-m-contacts .ct-axh + .ct-axr{border-top:0}
.gch-m-contacts .ct-axr .k{padding-top:6px;font-size:13px;color:var(--mid)}
.gch-m-contacts .ct-axr .v{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s2)}
.gch-m-contacts .ct-axr .t{flex:1;min-width:0;padding:6px 0}
.gch-m-contacts .ct-axr .t small{display:block;font-size:12.5px;color:var(--mid)}
.gch-m-contacts .ct-axr select{width:auto;min-width:0;max-width:172px;min-height:32px;font-size:13.5px}
.gch-m-contacts .ct-axl{display:inline-flex;align-items:center;gap:2px;margin-left:auto;font-size:13px;color:var(--ink2);white-space:nowrap;text-underline-offset:2px}
.gch-m-contacts .ct-axl:hover{color:var(--ink)}
.gch-m-contacts .ct-axl .i{width:14px;height:14px}
.gch-m-contacts .ct-ax .btn{border-color:var(--line2)}
.gch-m-contacts .ct-rad{flex-basis:100%;display:flex;align-items:center;gap:var(--s2);min-height:30px;cursor:pointer}
.gch-m-contacts .ct-rad input{flex:none;width:16px;height:16px;min-height:0;margin:0;accent-color:var(--o)}
.gch-m-contacts .ct-axlist{flex-basis:100%;margin:0;padding:0;list-style:none}
.gch-m-contacts .ct-axlist li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding:6px 0;border-bottom:1px solid var(--line)}
.gch-m-contacts .ct-axlist li:last-child{border-bottom:0}
.gch-m-contacts .ct-axlist b{font-weight:600}
.gch-m-contacts .ct-axrm{flex:none;padding:0;background:none;border:0;font:inherit;font-size:12.5px;color:var(--mid);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.gch-m-contacts .ct-axrm:hover{color:var(--ink)}
.gch-m-contacts .ct-ax .ct-addp{margin-left:-10px}
.gch-m-contacts .ct-axmsg{margin:var(--s2) 0 0;padding:8px 10px;border-left:2px solid var(--danger);background:var(--danger-tint);font-size:13px;color:var(--ink)}
.gch-m-contacts .ct-axmsg[hidden]{display:none}
.gch-m-contacts .ct-panel .gp-actions .ct-more{margin-left:auto;padding:0 6px;border-color:transparent}
.gch-m-contacts .ct-panel .gp-actions .ct-more:hover,.gch-m-contacts .ct-panel .gp-actions .ct-more[aria-expanded="true"]{border-color:var(--edge);background:var(--bg3)}
.gch-m-contacts .ct-also{flex:none;padding:0 var(--gut);border-top:1px solid var(--line);font-size:13px;color:var(--mid)}
.gch-m-contacts .ct-also > summary{display:inline-flex;align-items:center;gap:4px;min-height:36px;cursor:pointer;list-style:none}
.gch-m-contacts .ct-also > summary::-webkit-details-marker{display:none}
.gch-m-contacts .ct-also > summary:hover{color:var(--ink)}
.gch-m-contacts .ct-also .car{width:14px;height:14px}
.gch-m-contacts .ct-also:not([open]) .car{transform:rotate(-90deg)}
.gch-m-contacts .ct-also p{display:flex;flex-direction:column;gap:2px;margin:0 0 var(--s2);color:var(--ink2)}
/* dialogs (in #gch-layer) */
.ct-jd .mid,.ct-xd .mid{color:var(--mid)}
.ct-jd fieldset{margin:0 0 var(--s4);padding:0;border:0}
.ct-jd legend{margin-bottom:4px;padding:0;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.ct-jd-n{margin:0 0 4px;font-size:12.5px}
.ct-jd .ff-check{display:flex;min-height:32px}
.ct-jd-find input{width:100%;margin-bottom:var(--s2)}
.ct-jd-jobs{max-height:280px;overflow-y:auto;border-top:1px solid var(--line)}
.ct-jd-none{margin:var(--s2) 0 0;font-size:13px}
.ct-xd{display:grid;gap:6px}
.ct-xd .ff-l{margin-top:var(--s2)}
.ct-xd .ff-l:first-child{margin-top:0}
.ct-seg{display:inline-flex}
.ct-seg button{height:36px;padding:0 16px;background:none;border:1px solid var(--line2);color:var(--ink2);font:inherit;font-size:13.5px;cursor:pointer}
.ct-seg button + button{border-left:0}
.ct-seg button:hover:not(:disabled){color:var(--ink);background:var(--bg3)}
.ct-seg button[aria-pressed="true"]{border:1px solid var(--o);color:var(--ink);font-weight:600;background:var(--bg3)}
.ct-seg button:disabled{color:var(--mid);cursor:not-allowed}
.ct-hist{margin:0;padding:0 0 0 18px;font-size:13.5px;line-height:1.6}
@media (max-width:759px){
  .gch-m-contacts .ct-njobs::after{content:' ' attr(data-unit)}
  .gch-m-contacts .ct-ax{padding-left:var(--s4);padding-right:var(--s4)}
  .gch-m-contacts .ct-axr{grid-template-columns:1fr}
  .gch-m-contacts .ct-axr .k{padding-top:0}
  .gch-m-contacts .ct-axr select{flex:1;min-width:0}
}
/* On a phone a contact's row keeps the name on the first line, beside the row's last column (sign-in, Hub access). */
@container gchlist (max-width:560px){
  .gch-m-contacts .gch-pane tbody tr[data-key] > td.c-name.is-primary{grid-column:1;grid-row:1}
}
/* I3: beside an open card on a laptop the Internal list is about 650px wide. A long jobs sentence ("Public Works,
   Healthcare +2 jobs") wraps under itself there instead of pushing Sign-in out of the pane; a short one keeps its line. */
@container gchlist (min-width:621px) and (max-width:760px){
  .gch-m-contacts .gch-list td.c-jobs:not(.num){white-space:normal;min-width:164px}
}

/* DEV-346: trades (tags), regions, reviews and performance. Stars are ink, not orange: orange means only "act here". */
.gch-m-contacts .ct-chips{display:inline-flex;align-items:center;flex-wrap:nowrap;max-width:100%;overflow:hidden}
.gch-m-contacts .ct-chips .ct-tg{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gch-m-contacts .ct-more{flex:none;margin-left:2px;font-size:12px;color:var(--mid);font-variant-numeric:tabular-nums;white-space:nowrap}
.gch-m-contacts .ct-tg .i{width:12px;height:12px;margin-right:3px;color:var(--mid)}
.gch-m-contacts td.c-trades,.gch-m-contacts td.c-region{white-space:nowrap}
.gch-m-contacts td.c-region .ct-tg{max-width:150px;overflow:hidden;text-overflow:ellipsis}
/* A laptop with the card open (the list about 570px wide): Company, Trades, Region, Rating and Jobs all stay; the
   chips stack, the rating takes two lines, and the subline (which repeats them) is left out. Narrower still, the list
   becomes cards and the subline carries the trades, region and rating. DEV-347: up to 760px, so the list beside a
   560px peek (1440 wide) keeps its columns without scrolling sideways. */
@container gchlist (max-width:760px){
  .gch-m-contacts .gch-list:has(th.c-trades) .gch-pane .cell-sub{display:none}
  .gch-m-contacts .gch-pane:has(th.c-trades) th,.gch-m-contacts .gch-pane:has(th.c-trades) td{padding-left:8px;padding-right:8px}
  .gch-m-contacts .gch-pane:has(th.c-trades) th:first-child,.gch-m-contacts .gch-pane:has(th.c-trades) td:first-child{padding-left:var(--gut)}
  .gch-m-contacts .gch-pane:has(th.c-trades) th:last-child,.gch-m-contacts .gch-pane:has(th.c-trades) td:last-child{padding-right:var(--gut)}
  .gch-m-contacts td.c-trades .ct-chips{flex-direction:column;align-items:flex-start}
  .gch-m-contacts td.c-trades .ct-chips .ct-more{margin:1px 0 0}
  .gch-m-contacts td.c-trades .ct-chips .ct-tg{max-width:118px}
  .gch-m-contacts td.c-rating .ct-rate small{font-size:11.5px}
  .gch-m-contacts td.c-rating{white-space:nowrap}
  .gch-m-contacts td.c-region{white-space:normal}
  .gch-m-contacts td.c-region .ct-tg{max-width:104px}
  .gch-m-contacts td.c-rating .ct-rate{flex-direction:column;align-items:flex-end;gap:0}
  .gch-m-contacts .gch-pane:has(th.c-trades) td.c-company{white-space:normal}
  .gch-m-contacts .gch-pane:has(th.c-trades) tbody td{height:auto;padding-top:8px;padding-bottom:8px}
}
@container gchlist (max-width:560px){
  .gch-m-contacts .gch-pane tbody tr[data-key] > td:is(.c-trades,.c-region,.c-rating){display:none}
  .gch-m-contacts .gch-list:has(th.c-trades) .gch-pane .cell-sub{display:block}
}
.gch-m-contacts .ct-rate b{font-weight:600}
.gch-m-contacts .ct-tgrps{display:flex;flex-direction:column;gap:6px}
.gch-m-contacts .ct-tgrp{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}
.gch-m-contacts .ct-tg.is-div{color:var(--ink);font-weight:600}
.ct-tg-x{display:inline-grid;place-items:center;width:16px;height:16px;margin:0 -3px 0 4px;padding:0;background:none;border:0;color:var(--mid);cursor:pointer}
.ct-tg-x:hover{color:var(--ink)}
.ct-tg-x .i{width:11px;height:11px}
.gch-m-contacts .ct-regs{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0;margin:var(--s3) 0 0;font-size:13px}
.gch-m-contacts .ct-regs-l{min-width:100%;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:1px}
.ct-linkbtn{padding:0;background:none;border:0;color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font:inherit}
.ct-linkbtn:hover{color:var(--o-txt)}

/* The tag picker: in a popover on the card, inline in the company dialog. */
.ct-tagpick{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3)}
.ct-tagpick .gch-search{flex:none;min-width:0;display:flex;align-items:center;gap:6px;padding:0 8px;height:34px}
.ct-tagpick .gch-search input{flex:1;min-width:0;border:0;background:none;color:var(--ink);height:32px;outline:none}
.ct-tagpick .gch-search .i{width:15px;height:15px;color:var(--mid)}
.ct-tp-list{display:flex;flex-direction:column;flex:0 1 auto;min-height:72px;max-height:min(248px,40vh);overflow-y:auto;border:1px solid var(--line)}
.ct-tp-o{display:block;width:100%;padding:6px 10px;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font-size:13px;cursor:pointer}
.ct-tp-row{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.ct-tp-row:last-child{border-bottom:0}
.ct-tp-row .ct-tp-o{flex:1;min-width:0;border-bottom:0}
.ct-tp-row .ct-tp-del{flex:none;width:28px;height:28px;margin:0 4px}
.ct-tp-o b{display:inline-block;min-width:22px;font-weight:600;font-variant-numeric:tabular-nums}
.ct-tp-o.is-spec{padding-left:34px;color:var(--ink2)}
.ct-tp-o small{color:var(--mid);font-size:11.5px}
.ct-tp-o:hover,.ct-tp-o:focus-visible{background:var(--tag-bg)}
.ct-tp-none{margin:0;padding:8px 10px;font-size:13px;color:var(--mid)}
.ct-tp-new{display:flex;flex-direction:column;gap:4px;padding-top:var(--s2);border-top:1px solid var(--line)}
.ct-tp-newrow{display:flex;gap:6px}
.ct-tp-newrow select{flex:0 0 42%;min-width:0}
.ct-tp-newrow input{flex:1;min-width:0}
.ct-tp-err{margin:0;min-height:0;font-size:12px;color:var(--danger)}
.ct-tp-err:empty{display:none}
.ct-ff-tags .ct-chosen{display:flex;flex-wrap:wrap;gap:4px 0}
.ct-ff-tags .ct-chosen .ct-tg,.ct-chosen .ct-tg{display:inline-flex;align-items:center;margin:1px 4px 1px 0;padding:1px 7px;font-size:12px;color:var(--ink2);background:var(--tag-bg);white-space:nowrap}
.ct-ff-tags .ct-addtag{align-self:flex-start}
.ct-ff-tags .ct-tp-slot .ct-tagpick{padding:var(--s2) 0 0}
.gch-pop.ct-pop-tags{padding:0;display:flex;flex-direction:column;overflow:hidden}
.gch-pop.ct-pop-tags .ct-tagpick{flex:1 1 auto;min-height:0}
.ct-tagpick .ct-tp-new{flex:none}
/* The Trade filter nests each specialty under its division. */

/* Reviews */
.ct-stars{display:flex;align-items:center;gap:2px}
.ct-stars button{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;background:none;border:1px solid transparent;color:var(--line2);font-size:22px;line-height:1;cursor:pointer}
.ct-stars button.is-on{color:var(--ink)}
.ct-stars button:focus-visible{border-color:var(--edge)}
.ct-stars-w{margin-left:8px;font-size:13px;color:var(--mid)}
.ct-rv-who{margin:0;font-size:12.5px;color:var(--mid)}
.ct-stars-ro{letter-spacing:1px;color:var(--ink);white-space:nowrap}
.ct-stars-ro .off{color:var(--line2)}
.gch-m-contacts .ct-rv-sum{margin:0 0 var(--s2)}
.gch-m-contacts .ct-rvs{display:flex;flex-direction:column}
.gch-m-contacts .ct-rv{padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.gch-m-contacts .ct-rv-h{display:flex;align-items:center;gap:var(--s2);min-width:0}
.gch-m-contacts .ct-rv-j{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.gch-m-contacts .ct-rv-j a{color:var(--ink)}
.gch-m-contacts .ct-rv-a{display:inline-flex;flex:none}
.gch-m-contacts .ct-rv-a .ct-ed{width:24px;height:24px}
.gch-m-contacts .ct-rv-t{margin:3px 0 2px;color:var(--ink);line-height:1.45}
.gch-m-contacts .ct-rv-by{font-size:12px;color:var(--mid)}

/* Performance from daily logs */
.gch-m-contacts .ct-pf-lead{margin:0 0 var(--s2);font-size:12.5px}
.gch-m-contacts .ct-pf{display:flex;flex-direction:column}
.gch-m-contacts .ct-pf-r{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.gch-m-contacts .ct-pf-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
.gch-m-contacts .ct-pf-j{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.gch-m-contacts .ct-pf-for{color:var(--ink2)}
.gch-m-contacts .ct-pf-p{margin-left:auto;font-weight:600;color:var(--ink);white-space:nowrap}
.gch-m-contacts .ct-pf-h .ct-ed{width:22px;height:22px;margin-left:0;align-self:center}
.gch-m-contacts .ct-pf-kv{display:grid;grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;gap:2px 18px;margin:5px 0 0}
.gch-m-contacts .ct-pf-kv dt{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mid)}
.gch-m-contacts .ct-pf-kv dd{margin:1px 0 0;color:var(--ink);font-size:12.5px}
.gch-m-contacts .ct-pf-kv a{color:var(--ink)}
.gch-m-contacts .ct-pf-n{margin:5px 0 0;font-size:12px;line-height:1.45;color:var(--mid)}
.gch-m-contacts .ct-pf .ct-linkbtn{font-size:12px}

/* ------------------------------------------------------------------ DEV-347: the rating front and center */
/* Stars filled to the tenth: the filled copy is clipped over the outline row. Ink, never orange. */
.ct-sf{position:relative;display:inline-block;flex:none;font-size:12px;line-height:1;letter-spacing:1px;white-space:nowrap;vertical-align:-1px}
.ct-sf .o{color:var(--line2)}
.ct-sf .f{position:absolute;left:0;top:0;overflow:hidden;color:var(--ink)}
.ct-sf.is-lg{font-size:17px;letter-spacing:1px}
.gch-m-contacts td.c-rating .ct-rate{display:inline-flex;align-items:baseline;justify-content:flex-start;gap:6px}
.gch-m-contacts td.c-rating .ct-rate b{font-size:14px}
.gch-m-contacts td.c-rating .ct-rate small{font-size:12.5px}
.gch-m-contacts th.c-rating,.gch-m-contacts td.c-rating{text-align:left}
/* The card header: rating block, daily-logs line, trades line, actions, contact line */
.gch-m-contacts .ct-lead-b{margin-top:var(--s2)}
.gch-m-contacts .ct-rb{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:0;padding:8px 10px;border:1px solid var(--line2);background:var(--bg)}
.gch-m-contacts .ct-rb-n{font-family:var(--disp);font-size:24px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.gch-m-contacts .ct-rb-c{font-size:13px;color:var(--mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gch-m-contacts .ct-rb-add{grid-column:4;grid-row:1;border-color:var(--line2)}
.gch-m-contacts .ct-rb-l{grid-column:1 / -1;margin:2px 0 0;font-size:12.5px;color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gch-m-contacts .ct-rb-l a{color:var(--ink2)}
.gch-m-contacts .ct-rb.is-none{grid-template-columns:auto minmax(0,1fr) auto}
.gch-m-contacts .ct-rb.is-none .ct-sf .o{color:var(--edge)}
.gch-m-contacts .ct-rb.is-none .ct-rb-add{grid-column:3}
.gch-m-contacts .ct-rb-t{display:flex;flex-direction:column;min-width:0;font-size:13.5px}
.gch-m-contacts .ct-rb-t small{font-size:12.5px;color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gch-m-contacts .ct-ll{margin:6px 0 0;font-size:13px;line-height:1.35;color:var(--ink)}
.gch-m-contacts .ct-tl{margin:6px 0 0;font-size:13px;color:var(--ink2)}
.gch-m-contacts .ct-cl{margin:var(--s2) 0 0;font-size:13px;color:var(--ink2)}
.gch-m-contacts .ct-cl a{color:var(--ink2)}
.gch-m-contacts .ct-panel .gp-actions{margin-top:var(--s2)}
.gch-m-contacts .ct-panel .ct-lead-b ~ .gp-actions{margin-top:10px}
/* One row of actions in a 480 px card: the secondary ones drop their icons. */
.gch-m-contacts .ct-panel .ct-lead-b ~ .gp-actions .btn:not(.btn-p) .i{display:none}
@container gchmain (max-width:440px){.gch-m-contacts .ct-rb{grid-template-columns:auto auto minmax(0,1fr)}.gch-m-contacts .ct-rb-add{grid-column:1 / -1;grid-row:3;justify-self:start;margin-top:6px}}
/* The company page */
.gch-m-contacts .ct-page .ip-title{margin-top:2px}
.gch-m-contacts .ct-page-lead{max-width:720px}
.gch-m-contacts .ct-page-acts{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s6);margin-top:var(--s3)}
.gch-m-contacts .ct-page-acts .gp-actions{margin:0}
.gch-m-contacts .ct-page-acts .gp-actions .btn:not(.btn-p){border-color:var(--line2)}
.gch-m-contacts .ct-page-acts .ct-cl{margin:0}
.gch-m-contacts .ct-page .ip-body{grid-template-columns:minmax(640px,1fr) 360px}
@media (min-width:1440px){.gch-m-contacts .ct-page .ip-body{grid-template-columns:minmax(640px,1fr) 400px}}
@media (max-width:1100px){.gch-m-contacts .ct-page .ip-body{grid-template-columns:1fr}.gch-m-contacts .ct-page .ip-side{border-left:0;padding-left:var(--gut)}}
.gch-m-contacts .ct-page .ip-sec-b .ct-addp{margin-top:var(--s2)}
.gch-m-contacts .ct-page .ct-rv{padding:10px 0}
.gch-m-contacts .ct-pft-w{overflow-x:auto}
.gch-m-contacts .ct-pft{width:100%;border-collapse:collapse;font-size:13px}
.gch-m-contacts .ct-pft th{padding:6px 10px 6px 0;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mid);text-align:left;border-bottom:1px solid var(--line2);white-space:nowrap}
.gch-m-contacts .ct-pft td{padding:8px 10px 8px 0;vertical-align:top;border-bottom:1px solid var(--line)}
.gch-m-contacts .ct-pft tr:has(+ .ct-pft-n) td{border-bottom:0;padding-bottom:2px}
.gch-m-contacts .ct-pft-n td{padding-top:0;font-size:12px;line-height:1.45;color:var(--mid)}
.gch-m-contacts .ct-pft-j{white-space:nowrap}
.gch-m-contacts .ct-pft-j .ct-pf-for{display:block;max-width:220px;white-space:normal;font-size:12.5px}
.gch-m-contacts .ct-pft .ct-pf-p{margin-left:0;white-space:normal}
.gch-m-contacts .ct-pft a{color:var(--ink)}
.gch-m-contacts .ct-pft .ct-ed{width:22px;height:22px;vertical-align:middle}
/* DEV-356 WS6-E: every edit and delete button is a thumb's size on a touch screen (the smaller ones above included). */
@media (pointer:coarse){.ct-ed,.gch-m-contacts .ct-ed,.gch-m-contacts :is(.ct-rv-a,.ct-pf-h,.ct-pft) .ct-ed{width:36px;height:36px}}
@container gchlist (max-width:900px){
  .gch-m-contacts td.c-rating .ct-rate{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:6px;row-gap:1px}
  .gch-m-contacts td.c-rating .ct-rate small{grid-column:1 / -1}
}
/* A list beside a wide peek (560–900 px): the Company column gives way first, the rating stacks to 110 px. */
@container gchlist (max-width:900px){
  .gch-m-contacts .gch-pane:has(th.c-rating) .is-primary{min-width:130px}
  .gch-m-contacts .gch-pane th.c-rating{width:110px !important}
}
@container gchlist (max-width:600px){
  .gch-m-contacts .gch-pane:has(th.c-rating) .is-primary{min-width:118px}
  .gch-m-contacts .gch-pane th.c-rating{width:100px !important}
  .gch-m-contacts td.c-rating .ct-sf{font-size:11px;letter-spacing:0}
  .gch-m-contacts td.c-region .ct-tg{max-width:94px}
}
/* DEV-347 review: one trade chip and "+N" where the Trades column is narrow (the list beside a peek). */
.gch-m-contacts .ct-m1{display:none}
@container gchlist (max-width:760px){
  .gch-m-contacts td.c-trades .ct-tg2,.gch-m-contacts td.c-trades .ct-m2{display:none}
  .gch-m-contacts td.c-trades .ct-m1{display:inline}
  .gch-m-contacts td.c-trades .ct-chips{flex-direction:row;align-items:center}
  .gch-m-contacts td.c-trades .ct-chips .ct-more{margin:0 0 0 4px}
}
.gch-m-contacts .ct-guests{margin:6px 0 0;font-size:12.5px}
.gch-m-contacts .ct-ll .ct-linkbtn{color:var(--ink2)}

/* People on a review (DEV-353): two columns of the company's people in the review dialog; "Named: …" on a review row;
   the person's "Named in 2 of your team's reviews" line. */
.ct-dlg-rv .ff[data-field="people"] .ff-multi{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}
.ct-dlg-rv .ff[data-field="people"]{gap:2px}
.ct-dlg-rv .ff[data-field="people"] legend{grid-column:1/-1;margin-bottom:0}
.ct-dlg-rv .ff[data-field="people"] .ff-check{min-height:28px;min-width:0;font-size:13.5px}
.ct-dlg-rv .ff[data-field="people"] .ff-check span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-dlg-rv .ct-rv-opt{font-weight:400;color:var(--mid)}
.ct-dlg-rv .ct-rv-none{grid-column:1/-1;margin:2px 0;font-size:13px}
.ct-dlg-rv .ct-rv-pline .ct-rv-addp{font-size:inherit}
.ct-dlg-rv .ct-rv-pline{line-height:1.35}
.ct-dlg-rv .ff[data-field="people"] .ff-err:empty{display:none}
.ct-dlg-rv .dlg-f .ct-rv-who{margin-right:auto;align-self:center}
.gch-m-contacts .ct-rv-nm{margin:0 0 2px;font-size:12.5px;color:var(--mid)}
.gch-m-contacts .ct-rv-nm a{color:var(--ink2)}
.gch-m-contacts .ct-named{margin:2px 0 0;font-size:13px;color:var(--ink2)}
.gch-m-contacts .ct-named-n{display:block;font-size:12px;color:var(--mid)}
/* The Region cell: the first chip gives way with an ellipsis (the cell's title lists every area). */
.gch-m-contacts .ct-geo1{display:inline-flex;align-items:center;max-width:100%;vertical-align:middle}
.gch-m-contacts .ct-geo1 .ct-tg{flex:0 1 auto;min-width:0;max-width:none;margin-right:0}
.gch-m-contacts .ct-geo1 .ct-tg .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Service areas in the company dialog: the area picker inline, framed like the trade picker's list. */
.ct-ff-areas .ct-tp-slot .gch-pk{margin-top:var(--s2);border:1px solid var(--line)}
.ct-ff-areas .ct-tp-slot .gch-pk-l{max-height:min(248px,36vh)}