/* Hover/focus guidance for profile photo uploads.

   Literal colours rather than the registration form's custom properties: the
   same rules are served to the student and lecturer portal pages, which do not
   define them. The bubble is deliberately dark in both colour schemes - it has
   to read the same sitting on the bright registration form and on a portal
   page rendered in dark mode, so it carries its own ground instead of
   borrowing the page's. */

.wpu-tip {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

/* Sized in em so it tracks whatever label it is attached to - the portal
   labels and the registration captions are not the same size. */
.wpu-tip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45em;
    height: 1.45em;
    padding: 0;
    border: 1px solid #C3C9DE;
    border-radius: 50%;
    background: #FFFFFF;
    color: #4A5578;
    font: inherit;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.wpu-tip-btn:hover,
.wpu-tip-btn:focus-visible {
    background: #18264F;
    border-color: #18264F;
    color: #FFFFFF;
}

.wpu-tip-btn:focus-visible {
    outline: 2px solid #18264F;
    outline-offset: 2px;
}

.wpu-tip-bubble {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 270px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #18264F;
    color: #E8ECF7;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 12px 28px rgba(12, 20, 46, .28);
    /* visibility, not display, so the fade has something to animate and the
       bubble stays out of the accessibility tree while hidden. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, visibility .16s ease;
}

/* The little pointer back to the icon. */
.wpu-tip-bubble::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translateY(-50%) rotate(45deg);
    background: #18264F;
}

.wpu-tip:hover .wpu-tip-bubble,
.wpu-tip:focus-within .wpu-tip-bubble {
    opacity: 1;
    visibility: visible;
}

.wpu-tip-title {
    display: block;
    margin-bottom: 6px;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wpu-tip-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpu-tip-list li {
    position: relative;
    padding-left: 15px;
    margin: 0 0 4px;
}

.wpu-tip-list li:last-child {
    margin-bottom: 0;
}

.wpu-tip-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .52em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7E8CC4;
}

/* Stands out from the guidance because it is the one rule the upload check
   will actually reject you for. */
.wpu-tip-list li.wpu-tip-limit::before {
    background: #F2B23E;
}

/* No room beside the icon on a phone, so the bubble drops underneath and
   anchors to the left edge of the field instead. */
@media (max-width: 700px) {
    .wpu-tip-bubble {
        left: auto;
        right: 0;
        top: calc(100% + 10px);
        transform: none;
        width: min(270px, calc(100vw - 48px));
    }

    .wpu-tip-bubble::before {
        left: auto;
        right: 12px;
        top: -5px;
        transform: rotate(45deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wpu-tip-btn,
    .wpu-tip-bubble {
        transition: none;
    }
}