/* =====================================================================================================================
   dgm_section_events: the people who lead and teach a course (Akademie task "people", 2026-11-13; partial
   templates/partials/CoursePeople.html, data Classes/Section/Events/CoursePeople.php). Loaded only where a card shows
   people, so no other card changes.
   .dkp   the finder's course card (round k3): one person with name and institution, or a row of portraits with tooltips
          and the count.
   .dkp-s the shelf's card: up to three overlapping portraits (24 px) and the first person's name, one line.
   No portrait: the initials on a pale cyan disc. Pinned: text navy #003e52, nothing below 12 px.
   ===================================================================================================================== */
#crm__widgets .dkp, #crm__widgets .dkp-s { --dkp-ink: #003e52; --dkp-mute: var(--kc-muted, #4a6475); --dkp-disc: #e3f5fc; --dkp-disc-ink: #00658a; }
/* round k3 (2026-11-14): the finder's card, compact. .dkp--one: one person, portrait 28 px, the name 14 px semibold, the
   institution 13 px muted below it, both in full (two lines each at most where needed, never an ellipsis in a name).
   .dkp--faces: up to five overlapping portraits (28 px, a white ring) with a tooltip each (tip.js), then the count. The
   label stays for screen readers only. The block sits above the date block at the card's foot (course.css). */
#crm__widgets .dkp { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--kc-line, #e1e8ed); }
#crm__widgets .dkp__h { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#crm__widgets .dkp__img, #crm__widgets .dkp__ini { flex: none; box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%; }
#crm__widgets .dkp__img { display: block; object-fit: cover; background: var(--dkp-disc); box-shadow: inset 0 0 0 1px rgb(0 62 82 / .06); }
#crm__widgets .dkp__ini { display: inline-flex; align-items: center; justify-content: center; background: var(--dkp-disc); color: var(--dkp-disc-ink);
  font: 600 12px/1 var(--ex-body, inherit); letter-spacing: 0; }
#crm__widgets .dkp--one { align-items: flex-start; }
#crm__widgets .dkp--one > :is(.dkp__img, .dkp__ini) { margin-top: 1px; }
#crm__widgets .dkp__t { display: flex; flex-direction: column; min-width: 0; margin: 0; }
#crm__widgets .dkp__n { color: var(--dkp-ink); font: 600 14px/1.3 var(--ex-body, inherit); overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }
#crm__widgets .dkp__i { color: var(--dkp-mute); font: 400 13px/1.3 var(--ex-body, inherit); overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }
#crm__widgets .dkp__row { display: flex; flex: none; }
#crm__widgets .dkp-f { position: relative; z-index: 2; display: block; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px #fff; cursor: pointer; }
#crm__widgets .dkp-f + .dkp-f { margin-left: -7px; }
#crm__widgets .dkp-f:hover { z-index: 3; }
#crm__widgets .dkp__c { min-width: 0; color: var(--dkp-mute); font: 400 13px/1.3 var(--ex-body, inherit); white-space: nowrap; }

/* the tooltip of a portrait (tip.js), the look of the hero deck's (section-hero-people/assets/tip.css): white popover,
   navy text 12.5 px, the institution muted, radius 6 px, a small arrow, a fine shadow; fades and scales in from .96 within
   120 ms, leaves at once; on <body>, above everything */
.dkp-tip { position: fixed; z-index: 2147483000; display: grid; gap: 1px; max-width: min(280px, calc(100vw - 16px)); padding: 6px 10px; box-sizing: border-box;
  border-radius: 6px; background: #fff; color: #003e52; pointer-events: none; text-align: left; outline: 1px solid rgb(0 62 82 / .1);
  box-shadow: 0 10px 28px -8px rgb(0 33 44 / .5), 0 2px 6px rgb(0 33 44 / .22);
  font: 400 12.5px/1.4 "Theme-Font", Inter, system-ui, sans-serif; opacity: 0; transform: scale(.96); transform-origin: var(--ax, 50%) 100%; }
.dkp-tip.is-below { transform-origin: var(--ax, 50%) 0; }
.dkp-tip.is-in { opacity: 1; transform: none; transition: opacity .12s ease-out, transform .12s ease-out; }
.dkp-tip[hidden] { display: none; }
.dkp-tip__n { font-weight: 600; }
.dkp-tip__i { color: #4f6b78; }
.dkp-tip__arrow { position: absolute; left: var(--ax, 50%); bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: #fff; transform: rotate(45deg); border-radius: 1px; }
.dkp-tip.is-below .dkp-tip__arrow { top: -4px; bottom: auto; }
@media (prefers-reduced-motion: reduce) { .dkp-tip, .dkp-tip.is-in { transform: none; transition: none; } }

/* the shelf's card: the stack below date and place, after a hairline */
#crm__widgets .dkp-s { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--sh-hair, #e1e8ed);
  color: #003e52; font: 600 14px/1.35 var(--sh-body, inherit); }
#crm__widgets .dkp-s__faces { display: flex; flex: none; }
#crm__widgets .dkp-s .dkp__img, #crm__widgets .dkp-s .dkp__ini { width: 24px; height: 24px; box-shadow: 0 0 0 2px #fff; }
#crm__widgets .dkp-s .dkp__ini { font-size: 12px; letter-spacing: 0; }
#crm__widgets .dkp-s__faces > * { position: relative; }
#crm__widgets .dkp-s__faces > * + * { margin-left: -6px; }
/* the first face on top */
#crm__widgets .dkp-s__faces > :nth-child(1) { z-index: 3; }
#crm__widgets .dkp-s__faces > :nth-child(2) { z-index: 2; }
/* r3 (2026-11-14): a name may take two lines, never an ellipsis in a name */
#crm__widgets .dkp-s__n { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; overflow: hidden; overflow-wrap: break-word; hyphens: manual; }