/* 2.96.1: the contact block at the top of the case's details panel (sc-contact.js), in the old ticket page's look:
   avatar, name and #id, small tabs, then the sections. Logical sides (Hebrew mirrors), the app's tokens. */
.scc { display: grid; gap: 4px; min-width: 0; }
.scc-head { display: flex; align-items: center; gap: 10px; min-width: 0; padding-top: 2px; }
.scc-head .htl-av.lg { width: 40px; height: 40px; font-size: .9rem; }
.scc-who { display: grid; min-width: 0; flex: 1 1 auto; }
.scc-who > b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scc-kind { flex: none; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--sunk); color: var(--muted); }
.scc-kind.k-sup { background: color-mix(in srgb, var(--wait, #b45309) 16%, transparent); color: var(--wait, #b45309); }
.scc-kind.k-cust { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.scc-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-top: 6px; }
.scc-tab { flex: 1; display: inline-flex; justify-content: center; align-items: center; border: 0; background: none; box-shadow: none; min-height: 0; padding: 7px 4px; border-radius: var(--r-sm) var(--r-sm) 0 0; color: var(--muted); }
.scc-tab:hover { background: var(--sunk); color: var(--ink); }
.scc-tab:first-child { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.scc-tab:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: -2px; }
.scc-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 2px; }
.scc-act { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.scc-sec { padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.scc-sec:last-child { border-bottom: 0; }
.scc-sec-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.scc-sec-h h3 { font-size: .76rem; font-weight: 600; letter-spacing: .03em; color: var(--muted); margin: 0; }
.scc-sec p { margin: 0; }
.scc-plus { border: 0; background: none; box-shadow: none; min-height: 0; padding: 3px; border-radius: 50%; color: var(--muted); display: inline-flex; }
.scc-plus:hover { background: var(--sunk); color: var(--ink); }
.scc-list { display: grid; gap: 4px; margin: 0; }
.scc-row { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.scc-row > svg, .scc-row > .ico { flex: none; color: var(--muted); }
.scc-num { font-weight: 600; font-size: .95rem; letter-spacing: .01em; }
.scc-icons { display: inline-flex; gap: 2px; margin-inline-start: auto; }
.scc-people { display: grid; gap: 4px; margin-top: 6px; }
.scc-person { padding: 4px 0; border-top: 1px dashed var(--line); }
.scc-person:first-child { border-top: 0; }
.scc .ws-dl { margin: 0; }
.scc-found { max-height: 220px; overflow-y: auto; }
/* "Supplier" on the case's properties line */
.htn.scx .scx-props .scc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-weight: 600; background: color-mix(in srgb, var(--wait, #b45309) 16%, transparent); color: var(--wait, #b45309); }
.scx-side .scr-sec-customer > .scr-sec-b > .scc { padding-top: 0; }