/* The `?` beside a field label, and the panel it opens.
 *
 * Written to sit inside an existing `<label>` without changing its line height:
 * the icon is an inline circle that takes the label's own font metrics, so a
 * form gains the icons without any of its rows moving.
 *
 * Paired with static/js/field-help.js. */

.field-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05em;
    height: 1.05em;
    min-width: 14px;
    min-height: 14px;
    margin-left: 0.15em;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.75em;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    vertical-align: middle;
    position: relative;             /* the tap target below hangs off this */
    cursor: help;
    opacity: 0.45;
    user-select: none;
    touch-action: manipulation;     /* no double-tap-to-zoom delay on the icon */
    transition: opacity .12s ease, background-color .12s ease, color .12s ease;
}

.field-help-icon:hover,
.field-help-icon:focus,
.field-help-icon[aria-describedby] {
    opacity: 1;
    color: var(--on-secondary-color, #fff);
    background: var(--secondary-solid, var(--secondary-color, #2a7aaf));
    border-color: var(--secondary-solid, var(--secondary-color, #2a7aaf));
    outline: none;
}

.field-help-icon:focus-visible {
    box-shadow: 0 0 0 2px rgba(52, 152, 219, .35);
}

/* Above Bootstrap's modal (1055) and its backdrop: most of these forms are in
 * modals, and a tooltip that opens behind one is a tooltip nobody can read. */
.field-help-tooltip {
    position: fixed;
    z-index: 20000;
    max-width: min(22rem, calc(100vw - 1.5rem));
    padding: .5rem .625rem;
    border-radius: .375rem;
    background: #1f2937;
    color: #f8fafc;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .22), 0 .125rem .375rem rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease;
}

.field-help-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

/* The arrow follows the icon, which is what --arrow-left carries. */
.field-help-tooltip::after {
    content: "";
    position: absolute;
    left: var(--arrow-left, 50%);
    margin-left: -5px;
    border: 5px solid transparent;
    top: -10px;
    border-bottom-color: #1f2937;
}

.field-help-tooltip.is-above::after {
    top: auto;
    bottom: -10px;
    border-bottom-color: transparent;
    border-top-color: #1f2937;
}

@media (prefers-reduced-motion: reduce) {
    .field-help-icon,
    .field-help-tooltip {
        transition: none;
    }
}

@media print {
    .field-help-icon,
    .field-help-tooltip {
        display: none !important;
    }
}

/* Fields nobody wrote a label for -- a filter box with only a placeholder, the
 * hex box beside a colour picker. The icon goes inside the field when the field
 * has the row to itself, so nothing moves; beside it when it is sharing. */

.field-help-anchor {
    position: relative;
}

.field-help-icon--inside {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;                 /* above the control's own background */
    background: var(--input-bg, #fff);
}

.field-help-anchor > .form-control {
    padding-right: 2rem;        /* keep the text clear of the icon */
}

/* A select already draws an arrow at its right edge: the icon sits inside of
 * it, and the text makes room for both. */
.field-help-icon--select {
    right: 2.1rem;
}

.field-help-anchor > .form-select {
    padding-right: 3.5rem;
}

/* A textarea is tall; the middle of it is no place for the icon. */
.field-help-icon--textarea {
    top: .5rem;
    transform: none;
}

.field-help-icon--beside {
    margin-left: .35rem;
    align-self: center;
}


/* On a phone the icon is tapped, not hovered, and a 14-pixel target is a
 * target nobody hits. It grows, and takes a little invisible margin with it --
 * kept small on purpose, so an icon sitting inside a field's right edge does
 * not swallow the taps meant for the field itself. */

@media (pointer: coarse) {
    .field-help-icon {
        width: 1.25em;
        height: 1.25em;
        min-width: 20px;
        min-height: 20px;
        opacity: 0.6;
    }

    .field-help-icon::after {
        content: "";
        position: absolute;
        top: -6px;
        right: -6px;
        bottom: -6px;
        left: -6px;
    }

    .field-help-tooltip {
        font-size: .875rem;         /* read at arm's length, not on a desk */
        padding: .625rem .75rem;
        line-height: 1.5;
    }
}

/* The same sentence, for a screen reader. It is in the page but not on it:
 * clipped rather than hidden, because display:none is not read out. */

.field-help-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The skip link: out of the way until someone tabs to it, then the first thing
 * on the page. Hiding it with display:none would take it off the tab order,
 * which is the one thing it must be on. */

.a11y-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 30000;
    padding: .625rem 1rem;
    background: var(--primary-solid, var(--primary-color, #2c3e50));
    color: var(--on-primary-color, #fff);
    text-decoration: none;
    border-radius: 0 0 .375rem 0;
}

.a11y-skip-link:focus {
    left: 0;
    outline: 3px solid var(--focus-ring-color, var(--secondary-color, #0b5ed7));
    outline-offset: 2px;
}

/* Said out loud, shown to nobody. */
.a11y-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* A visible focus ring, everywhere. Removing it is the most common way a GUI
 * becomes unusable by keyboard, and Bootstrap's default is easy to lose
 * against a coloured background. */
:focus-visible {
    outline: 3px solid var(--focus-ring-color, var(--secondary-color, #0b5ed7));
    outline-offset: 2px;
}