/* Contacts (contacts.js): round pictures, who a contact is to whom, important dates, the filters; and the whole
   family's sections on Family (family.js). Colours come from the tokens of look.css, so the themes and dark mode apply. */

.ini.ct-pic{font-size:.85rem;letter-spacing:.02em}
html:root .ini.ct-pic,html:root[data-skin] .ini.ct-pic{border-radius:50%}  /* round in every skin */
.ini.ct-pic.xl{width:84px;height:84px;font-size:1.6rem}
.av.xs{width:22px;height:22px;font-size:.6rem;border-radius:50%}
.list .av.xs{width:22px;height:22px;border-radius:50%}

/* the filters above the list */
.ct-filters{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:12px 0 10px;border-bottom:1px solid var(--line)}
.ct-sel{display:flex;align-items:center;gap:8px;min-width:0}
.ct-sel>.label{flex:none;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.ct-sel select.input{width:auto;min-width:170px;max-width:260px;padding:6px 30px 6px 10px}
.ct-past{font-size:.85rem;color:var(--muted);white-space:normal}
.ct-clear[hidden]{display:none}
@media (max-width:600px){.ct-sel{width:100%;flex-direction:column;align-items:stretch;gap:4px}.ct-sel select.input{max-width:none;width:100%}}
.ct-rels{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ct-rel{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;padding:2px 9px 2px 7px;border-radius:999px;background:var(--t-people-b);color:var(--t-people-i);border:1px solid var(--t-people-a);max-width:100%}
.ct-rel>span,.ct-rel>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-rel b{font-weight:700}
.ct-rel b::before{content:"·";margin-right:5px;font-weight:400;opacity:.7}
.ct-rel svg.i{width:12px;height:12px;flex:none}
.ct-rel.past{background:transparent;color:var(--faint);border-color:var(--line);border-style:dashed}
.ct-rel small{font-size:.7rem;opacity:.85}
.ct-soon{flex:none}
.ct-soon svg.i{width:12px;height:12px}
.row.contact.past{opacity:.72}
@media (max-width:600px){.row.contact .ct-soon{display:none}}

/* the contact's panel */
.ct-top{display:flex;gap:16px;align-items:center}
.ct-top .actions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.ct-block{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface-2);display:grid;gap:8px}
.ct-bh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ct-bh .label{flex:1;margin:0}
.ct-adds{display:flex;flex-wrap:wrap;gap:4px}
.ct-line{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line);min-width:0}
.ct-bh+.ct-line{border-top:0}
.ct-line .grow{min-width:0;overflow-wrap:anywhere}
.ct-line .ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--s3);color:var(--muted)}
.ct-line .ico[class*=" k"]{background:var(--kc);color:var(--k-fg)}
.ct-line .ico svg.i{width:15px;height:15px}
.ct-line.past{opacity:.7}
.ct-was{margin:6px 0 0;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.7rem}
.ct-nd .chips{margin-top:6px}
.grid.ct-dmy{grid-template-columns:80px 1fr 110px}
@media (max-width:600px){.grid.ct-dmy{grid-template-columns:70px 1fr 96px}}

/* Family: the whole family's sections under the people */
.wf{display:grid;gap:14px}
.wf-head{display:flex;align-items:flex-end;gap:10px 16px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--line)}
.wf-head>div:first-child{flex:1 1 280px;min-width:0;padding-top:16px}
.wf-head h2{font-family:var(--f-display);font-size:1.3rem;font-weight:750}
.wf-head .sub{color:var(--muted);font-size:.9rem;margin-top:4px}
.wf-head .t{display:flex;gap:6px;flex-wrap:wrap}

/* 1.17: Contacts as cards, one per person */
.ct-page{display:grid;gap:14px}
.ct-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.ct-bar .search{flex:1;min-width:220px}
.ct-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ct-chips .chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;font-size:.86rem;cursor:pointer}
.ct-chips .chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ct-chips .chip svg.i{width:13px;height:13px}
.ct-count{margin-left:auto}
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.cc{position:relative;display:flex;flex-direction:column;gap:9px;padding:16px 18px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 22px rgba(30,35,45,.05);cursor:pointer;min-width:0}
.cc:hover,.cc:focus-visible{box-shadow:0 10px 26px rgba(30,35,45,.10)}
.cc.inactive{opacity:.75}
.cc>.bsel{position:absolute;top:14px;left:14px;z-index:1}
.cc-fav{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:12px;border:0;background:var(--surface-2);color:var(--faint);display:flex;align-items:center;justify-content:center;cursor:pointer}
.cc-fav svg.i{width:17px;height:17px}
.cc-fav.on{background:#FFF4D6;color:#C98A22}
.cc-fav.on svg.i{fill:#E5A23E}
.cc-ph{position:relative;width:max-content}
.ini.ct-pic.lg{width:52px;height:52px;font-size:1.15rem}
.cc-dot{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;border:3px solid var(--surface);background:#2F8F5B}
.cc.nodetails .cc-dot{background:#E59A2F}
.cc.inactive .cc-dot{background:#8A8E95}
.cc-who h3{margin:0;font-size:1.05rem;font-weight:600;overflow-wrap:anywhere}
.cc-role{font-size:.9rem}
.cc-org{font-size:.82rem;color:var(--muted)}
.cc hr{border:0;border-top:1px solid var(--line);margin:0}
.cc-ln{display:flex;align-items:center;gap:9px;font-size:.88rem;min-width:0;overflow-wrap:anywhere}
.cc-ln svg.i{width:15px;height:15px;color:var(--muted);flex:none}
.cc-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cc-chips .chip{font-size:.74rem;padding:2px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.cc-src{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:2px 9px;border-radius:999px;font-size:.74rem;font-weight:550;background:var(--t-people-b);color:var(--t-people-i);text-decoration:none}
.cc-src>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-src svg.i{width:12px;height:12px;flex:none}
.cc-src.past{background:transparent;color:var(--faint);border:1px dashed var(--line)}
@media (max-width:600px){.cg{grid-template-columns:minmax(0,1fr)}.ct-count{margin-left:0;width:100%}}