/*  identity-card.css — the signed-in name in the site header, and the card it reveals.
    Instruction of 21 Sep 2026: "have profile page to view the registered informtion, name display
    hover to see license type and license # with expiry if well drillers".

    THE NAME IS A LINK, NOT JUST A HOVER TARGET. The profile page already existed and already showed
    the registered information; what it did not have was any way in — no menu item, no link, nothing.
    A hover card alone would not have fixed that, because a hover is not a route.

    SECTION 508 / WCAG 1.4.13 (Content on Hover or Focus). Three things this file has to get right:
      · FOCUS PARITY — :focus-within, not only :hover, so the card opens for a keyboard.
      · HOVERABLE — the card is a child of the trigger and flush against it (top:100%, no gap), so
        moving the pointer onto the card keeps the parent hovered and the card open.
      · DISMISSIBLE — identity-card.js sets [hidden] on Escape, and the rule below lets that win
        over the hover rule. Without the !important the hover selector would keep re-showing it.
    And nothing here is hover-ONLY: every figure in the card is also plain text on the profile page
    the name links to, and on the _UserIdentityChip above each form. */

.wands-idcard {
    position: relative;
    display: inline-block;
}

/*  The name keeps the header's own type; only the affordance is added. Underline on hover/focus
    rather than always, so the header does not read as a row of links. */
.wands-idcard__name {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.wands-idcard__name:hover,
.wands-idcard__name:focus {
    text-decoration: underline;
}

.wands-idcard__panel {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 900;
    min-width: 17rem;
    max-width: 22rem;
    padding: .6rem .75rem;
    text-align: left;
    white-space: normal;
    background: #ffffff;
    color: #1b1b1b;
    border: 1px solid #adadad;
    border-radius: .25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    font-size: var(--fs-2xs, .8125rem);
    font-weight: 400;
    line-height: 1.4;
}

.wands-idcard:hover .wands-idcard__panel,
.wands-idcard:focus-within .wands-idcard__panel {
    display: block;
}

/*  ESCAPE WINS. See the dismissible note above. */
.wands-idcard__panel[hidden] {
    display: none !important;
}

.wands-idcard__row {
    margin: 0 0 .15rem 0;
}

.wands-idcard__lbl {
    color: #565c65;
}

/*  Licence numbers and person ids are read off a certificate or a letter and typed back in, so
    0/O and 1/l have to be distinguishable — the same reason _UserIdentityChip monospaces them. */
.wands-idcard__mono {
    font-family: var(--font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
}

/*  Expiry warnings carry the state IN WORDS as well ("Expired", "Expires in 12 days"), so this
    colour is emphasis, never the message (WCAG 1.4.1). */
.wands-idcard__warn {
    color: #b50909;
    font-weight: 600;
}

/*  NARROW SCREENS. The header stacks, and a card pinned to the right edge of a narrow name would
    hang off the viewport. Pinned left instead, and allowed to use the width it has. */
@media (max-width: 40em) {
    .wands-idcard__panel {
        right: auto;
        left: 0;
        min-width: 0;
        width: min(22rem, calc(100vw - 2rem));
    }
}