/* components-term-hint.css — "(i)" hint button + popover that explains a term in one sentence (js/term-glossary.js).
   Token-only colours (Light + Dark). Touch devices get a >= 44px hit area without changing the 24px visual size. */

.term-hint { position: relative; display: inline-block; vertical-align: middle; margin-inline-start: var(--space-1); font-weight: var(--fw-regular); }

.term-hint-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    background: var(--surface-1);
    color: var(--text-2);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1;
    cursor: pointer;
}

.term-hint-btn:hover { color: var(--text-brand); border-color: var(--text-brand); }
.term-hint-btn[aria-expanded="true"] { background: var(--brand-soft); color: var(--text-brand); border-color: var(--text-brand); }

.term-hint-pop {
    position: absolute;
    z-index: var(--z-dropdown);
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-start: 0;
    width: max-content;
    max-width: min(280px, 80vw);
    padding: var(--space-3);
    background: var(--surface-1);
    color: var(--text-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    text-align: left;
    white-space: normal;
}

.term-hint-pop.is-end { inset-inline-start: auto; inset-inline-end: 0; }

/* Label + (i) on one row (the hint stays OUTSIDE <label> so it never steals the label's click) */
.field-label-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
.field-label-row .term-hint { margin-inline-start: 0; }

@media (pointer: coarse) {
    /* Same look, bigger target: the pseudo-element extends the clickable area to 44x44. */
    .term-hint-btn::after { content: ''; position: absolute; inset: -10px; min-width: 44px; min-height: 44px; }
    .term-hint { margin-inline-start: var(--space-2); }
}