/* <app-icon> - see wwwroot/js/app-icon.js and TagHelpers/AppIconTagHelper.cs.

   Every colour is a Bootstrap CSS variable, never a literal - same rule as
   app-chips.css and app-editor.css. This app defaults to dark and the toggle
   flips data-bs-theme at runtime with no reload, so a hard-coded #fff survives
   the flip and becomes an invisible icon. */

.app-icon {
    /* line-height 1 stops the glyph's own leading from pushing the line it sits
       on taller than its neighbours - visible as a row of award checkboxes
       where only the ones with an info icon are a pixel further apart. */
    line-height: 1;
    vertical-align: -0.125em;
}

/* Sized in em, not rem or px: an icon next to body text and the same icon in an
   <h2> should both look like they belong to the text beside them, and only em
   tracks the font-size it inherits. */
.app-icon-sm {
    font-size: 0.875em;
}

.app-icon-lg {
    font-size: 1.25em;
}

/* ── The tooltip trigger ──────────────────────────────────────────────
   A <span tabindex="0" role="button">, for the reasons AppIconTagHelper
   records: a <button> would be disabled by the <fieldset disabled> that every
   locked event-form section is wrapped in, and would then fire no mouse events
   at all. None of that styling comes for free on a span, so it is here. */
.app-icon-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* `help`, not `pointer`. Pointer promises navigation or a state change;
       this element does neither, it only explains. */
    cursor: help;
    /* Focus ring room without shifting the icon's optical position - the
       negative margin gives the padding back to the layout. */
    padding: 0.125rem;
    margin: -0.125rem;
    border-radius: var(--bs-border-radius-sm);
    /* Touch targets. A 14px glyph is under every minimum-target guideline, and
       these are most often read on a phone at an event. */
    min-width: 1.5rem;
    min-height: 1.5rem;
}

/* KEYBOARD FOCUS MUST BE VISIBLE HERE OR THE TAB STOP IS A TRAP IN REVERSE:
   the tooltip opens on focus, so a user who cannot see where focus is gets a
   tooltip with no idea which icon it belongs to. Bootstrap's own ring
   variables, so it matches every other focusable thing on the page. */
.app-icon-tip:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
}

.app-icon-tip:hover,
.app-icon-tip:focus-visible {
    color: var(--bs-primary) !important;
}

/* ── Inside a locked (disabled) section ───────────────────────────────
   The icon deliberately stays live in there - see AppIconTagHelper. An Event
   Partner looking at an approved event they can no longer edit is exactly the
   person who still needs to know what an award means. This rule only stops it
   inheriting the muted look of the controls around it and reading as dead. */
fieldset:disabled .app-icon-tip,
.event-form-locked .app-icon-tip {
    opacity: 1;
    pointer-events: auto;
}

/* ── The tooltip itself ───────────────────────────────────────────────
   Bootstrap's default max-width is 200px, which wraps an award description into
   a tall thin column. 22rem is roughly the 45-70 character measure the rest of
   the app aims at (`style="max-width: 65ch"` on prose blocks). */
.tooltip .tooltip-inner {
    max-width: 22rem;
    text-align: left;
    padding: 0.5rem 0.75rem;
    line-height: 1.4;
}

/* Bootstrap's tooltip background is a flat black at 0.9 alpha in BOTH themes,
   which on this app's dark theme is a black box on a nearly-black page with no
   edge to it. Painting it from the theme's own variables gives it a boundary
   in dark and keeps it readable in light. */
.tooltip {
    --bs-tooltip-bg: var(--bs-emphasis-color);
    --bs-tooltip-color: var(--bs-body-bg);
    --bs-tooltip-opacity: 1;
}