/* A record type in its own colour: the icon tile, and the tag or chip that names it. */
.rtc-contact { --rtc: var(--rt-contact); }
.rtc-opportunity { --rtc: var(--rt-opportunity); }
.rtc-deal { --rtc: var(--rt-deal); }
.rtc-estimate { --rtc: var(--rt-estimate); }
.rtc-job { --rtc: var(--rt-job); }
.rtc-appointment { --rtc: var(--rt-appointment); }
.rtc-invoice { --rtc: var(--rt-invoice); }
.rtc-ticket { --rtc: var(--rt-ticket); }

.rtc.rtc:is(.ic, .chip, .tag) {
  color: var(--rtc);
  background: color-mix(in srgb, var(--rtc) 12%, transparent);
}
.rtc.rtc:is(.chip, .tag) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rtc) 26%, transparent); }

/* Several record types in one cell: the first three as overlapping icons and +2 for the rest; hover or focus shows
   each type and what the agent may do with it. */
.rtcount { position: relative; z-index: 2; display: inline-flex; }
.rtcount:is(:hover, :focus-within) { z-index: 40; }
.rtcount-btn {
  display: inline-flex; align-items: center; height: 34px; padding: 0 5px 0 3px;
  border: 0; border-radius: var(--r-full); background: transparent; cursor: pointer;
  transition: background .15s ease;
}
.rtcount:is(:hover, :focus-within) .rtcount-btn { background: var(--brand-soft); }
.rtcount-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rtcount-ic {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--rtc) 12%, var(--panel)); color: var(--rtc); box-shadow: 0 0 0 2px var(--panel);
}
.rtcount-ic + .rtcount-ic { margin-left: -7px; }
.rtcount-ic svg { width: 14px; height: 14px; }
.rtcount-more { background: var(--panel-3); color: var(--ink-2); font: inherit; font-size: var(--fs-2xs); font-weight: 700; }

.rtcount-pop {
  position: absolute; top: calc(100% + 8px); left: -6px; display: grid; width: 272px; padding: 6px;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel); box-shadow: var(--sh-pop);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
/* Bridges the gap under the button, so moving the mouse into the list keeps it open. */
.rtcount-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.rtcount:is(:hover, :focus-within) .rtcount-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.rtcount-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 10px 6px;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4);
}
.rtcount-h span + span { font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0; text-transform: none; }
.rtcount-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
.rtcount-name { flex: 1; min-width: 0; font-size: var(--fs-s); font-weight: 500; color: var(--ink); }
.rtcount-change {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 9px 10px 5px; border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs); font-weight: 600; color: var(--brand-text); text-decoration: none;
}
.rtcount-change:hover { color: var(--brand-text-hover); }
.rtcount-change svg { width: 13px; height: 13px; }