/* InfoTip: a small "i" button and its popover. Used by the staff app and the patient hub page (which inlines this file), so colours fall back from --ck-* to the hub's own tokens. */
button.ck-infotip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
    margin: 0 0 0 0.35rem;
    padding: 0;
    border: 1px solid var(--ck-primary, var(--accent, #087f80));
    border-radius: 50%;
    background: var(--ck-surface, var(--surface, #fff));
    color: var(--ck-primary, var(--accent, #087f80));
    font: italic 700 0.8rem/1 Georgia, "Times New Roman", serif;
    vertical-align: middle;
    cursor: pointer;
}
/* A 44 px area to tap, around the 24 px circle. */
button.ck-infotip::after { content: ""; position: absolute; inset: -0.5rem; }
button.ck-infotip:hover { background: var(--ck-primary-soft, var(--accent-soft, #e6f4f4)); }
button.ck-infotip[aria-expanded="true"] { background: var(--ck-primary, var(--accent, #087f80)); color: var(--ck-surface, var(--accent-ink, #fff)); }
button.ck-infotip:focus-visible { outline: 3px solid var(--ck-primary, var(--accent, #087f80)); outline-offset: 2px; }
.ck-tip-pop {
    position: absolute;
    z-index: var(--ck-z-tooltip);
    box-sizing: border-box;
    max-width: min(20rem, calc(100vw - 1rem));
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--ck-border-strong, var(--line, #cfd6dc));
    border-radius: 0.5rem;
    background: var(--ck-surface, var(--surface, #fff));
    color: var(--ck-ink, var(--ink, #15232b));
    box-shadow: 0 8px 28px rgb(21 35 43 / 18%);
    font-size: 0.9rem;
    line-height: 1.4;
}
.ck-tip-pop .ck-tip-title { display: block; margin: 0 0 0.2rem; font-weight: 600; }
.ck-tip-pop .ck-tip-text { margin: 0; }
.ck-tip-pop .ck-tip-more { display: inline-block; margin-top: 0.4rem; color: var(--ck-primary, var(--accent, #087f80)); }
.ck-infotip-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media print { button.ck-infotip, .ck-tip-pop { display: none !important; } }
