/* Click-to-reveal help icon appended after any Form->control(..., ['help' => ...])
   field across the app — see src/View/Helper/FormHelper.php. */

/* Checkbox fields: the checkbox's own <label> is a block-level element
   (see .input label in app.css), so without this it takes the full row
   width and pushes the help icon onto its own line below. Turning the
   container into a flex row keeps the label sized to its content and
   lets the icon sit right beside it — the label's own look (uppercase,
   size, color) is untouched. */
.input.checkbox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.field-help {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
}

.field-help__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--calendio-surface-muted, #F6F1EA);
    color: var(--calendio-text-muted, #766E66);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.field-help__trigger:hover,
.field-help__trigger:focus-visible {
    background: var(--calendio-primary-soft, #F0EEFF);
    color: var(--calendio-primary, #6D5DF6);
    outline: none;
}

.field-help__trigger[aria-expanded="true"] {
    background: var(--calendio-primary, #6D5DF6);
    color: #FFFFFF;
}

.field-help__text {
    position: absolute;
    z-index: 20;
    bottom: calc(100% + 8px);
    left: 0;
    width: max-content;
    max-width: min(260px, 80vw);
    padding: 10px 12px;
    border-radius: var(--calendio-radius-md, 12px);
    border: 1px solid var(--calendio-border, #E8DED2);
    background: var(--calendio-surface, #FFFFFF);
    box-shadow: var(--calendio-shadow-md, 0 12px 28px rgba(31, 35, 48, .14));
    color: var(--calendio-text, #423C34);
    font-size: 12px;
    line-height: 1.5;
    font-weight: 600;
    /*
     * Reset typography explicitly instead of inheriting it: this badge can
     * sit inside headings with aggressive letter-spacing/line-height (e.g.
     * .page-hero h1's -.055em), which at 12px nearly runs words together.
     */
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
}

.field-help__text[hidden] {
    display: none;
}