/* =====================================================================
   Matendo — inline help ("?" markers)

   A separate file on purpose. The three portals do not share a stylesheet:
   admin and facility load admin.css, and the public/worker pages carry their
   styles inline in includes/header.php. assets/css/base.css, components.css
   and pages.css are not loaded by any template at all. So the only way one
   copy of this can serve every portal is its own file, linked from each of
   the three headers.

   No JavaScript: the CSP restricts scripts to a nonce, and a tooltip that
   depends on JS breaks the first time a nonce is missed.

   Markup comes from hint() in includes/help.php. Do not hand-write it, or the
   copy escapes the registry and stops being auditable.
   ===================================================================== */

.hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; border-radius: 50%;
  border: 1px solid currentColor; background: transparent;
  font-size: 11px; font-weight: 700; line-height: 1;
  cursor: help; position: relative; vertical-align: middle;
  opacity: .55; user-select: none; flex: none; font-family: inherit;
}
.hint:hover, .hint:focus { opacity: 1; }
.hint:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.hint::after {
  content: attr(data-hint);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 260px; padding: 8px 10px;
  background: #10312f; color: #fff; border-radius: 8px;
  font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left;
  letter-spacing: normal; text-transform: none; white-space: normal;
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
  pointer-events: none; z-index: 2000;
}
.hint::before {
  content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%); border: 5px solid transparent; border-top-color: #10312f;
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
  pointer-events: none; z-index: 2001;
}
.hint:hover::after, .hint:hover::before,
.hint:focus::after,  .hint:focus::before { opacity: 1; visibility: visible; }

/* Near the right edge a centred bubble would run off screen. */
.hint.hint-left::after  { left: auto; right: -4px; transform: none; }
.hint.hint-left::before { left: auto; right: 4px;  transform: none; }

@media (prefers-reduced-motion: reduce) { .hint::after, .hint::before { transition: none; } }

/* =====================================================================
   Clinician photo

   Lives here with the hint styles because these are the two components
   every portal loads: admin and facility use admin.css, the public and
   worker pages carry their styles inline, and assets/css/base.css and
   components.css are loaded by nothing. A shared component needs a file
   all three headers link, and this is it.

   The initials placeholder is not decoration. A facility expecting
   someone at 7pm wants to know who to expect, and a grey circle with no
   letters tells them less than "AN" does.
   ===================================================================== */
.pphoto {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex: none; vertical-align: middle;
  background: #E4EDEA; color: #0F4C49; font-weight: 700;
  font-family: inherit; letter-spacing: .02em; user-select: none;
}
.pphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pphoto-sm { width: 32px; height: 32px; font-size: 12px; }
.pphoto-md { width: 48px; height: 48px; font-size: 15px; }
.pphoto-lg { width: 96px; height: 96px; font-size: 30px; }

/* A photo still awaiting a decision, shown only to staff who may review it. */
.pphoto-pending { box-shadow: 0 0 0 2px #E9A93D; }