/* Platform-wide icon-button component. `.global-icon-btn` is the canonical
   content-area icon button: a bordered, circular tap target that holds a
   single icon and nothing else. Use it anywhere a bare icon needs to be a
   button — row actions, tile actions, close buttons, reveal toggles.

   Always give it an `aria-label` (the icon carries no text):
       <button class="global-icon-btn global-icon-btn--sm" aria-label="Remove role">…</button>

   NOT for the top main header: those icons keep the existing liquid-glass
   header styling (`.global-header-btn` / `.global-header-btn-circle` / `--header-control-*`).
   This component covers the content area and other colored surfaces (the
   sidebar, a filled modal header) — use the `--ondark` variant there. */

/* ── Canonical component ── a bordered circle holding one icon; the hairline
   ring is always present so the target reads as a control at rest, and a light
   grey wash fills on hover. Sizing comes from the size modifiers below; the
   base defaults to the medium (36px) target so a bare `.global-icon-btn` is usable.

   The icon carries the same ink as the header's Filter button
   (.global-header-btn, main.css). It was --color-text-muted, which is #9ca3af on
   a white card — about 2.4:1, under the 3:1 a control's glyph needs to be seen:
   "many fo those buttons are jsut too light to even really be abelt os ee the
   icon inside the button" (Nick, 09-02). */
.global-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--color-border);
    background: none;
    color: var(--color-text-light);
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast),
        border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.global-icon-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.global-icon-btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* A disabled button is dimmed and shows no hand. */
.global-icon-btn:disabled,
.global-icon-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
}

/* A truly disabled button is inert — pointer-events: none means it never
   picks up the hover wash or its tooltip, so this stays correct for every
   variant (including --ondark on a dark surface, where a grey hover would
   misread, and --danger, where a red wash would read as armed). */
.global-icon-btn:disabled {
    pointer-events: none;
}

/* An aria-disabled control raises a toast that says why, so its tap must land:
   pointer-events: none would swallow the click that fires it. */
.global-icon-btn[aria-disabled="true"] {
    pointer-events: auto;
}

/* The icon fills the target; SVGs inherit the button's color via currentColor. */
.global-icon-btn svg {
    width: 1.15em;
    height: 1.15em;
}

/* The glyph inside the circle is centred with every other icon button's, in
   main.css under "Icon glyph centring". It used to be done here with
   `line-height: 1` + `vertical-align: 0` on the ::before, which measured as a
   no-op: this family sat 2px high for as long as that rule existed. */

/* ── Sizes ── the three targets seen across the app: 28 (dense row/tile
   actions), 36 (default), 44 (touch-comfortable / header-scale). */
.global-icon-btn--sm {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-sm);
}

.global-icon-btn--md {
    width: 36px;
    height: 36px;
}

.global-icon-btn--lg {
    width: 44px;
    height: 44px;
    font-size: var(--font-size-lg);
}

/* ── Shape ── the target is a circle by default; --square is the rounded-square
   escape hatch for the rare icon button in a boxy toolbar/segmented context. */
.global-icon-btn--square {
    border-radius: var(--radius-sm);
}

/* ── Skins ──
   --ghost: a tool that paints nothing until you point at it — the pencils and
   copy buttons that hide inside a row and must not read as controls at rest.
   The ring stays but turns transparent, so a ghost button measures the same
   box as every other icon button of its size, and the glyph keeps the quieter
   ink the base gave up: a pencil that has to be found only when you go looking
   is the one place the lighter grey is the point. */
.global-icon-btn--ghost {
    border-color: transparent;
    color: var(--color-text-muted);
}

.global-icon-btn--ghost:hover,
.global-icon-btn--ghost:focus-visible {
    background: var(--color-card-bg);
    color: var(--color-action);
    box-shadow: var(--shadow-sm);
}

/* --danger: destructive action. Stays ghost until hover, then red. Matches the
   hand-rolled `.icon-btn-danger` it replaces. */
.global-icon-btn--danger:hover {
    background: var(--color-error-subtle);
    color: var(--color-error);
    border-color: var(--color-error-subtle);
}

/* --primary: the emphasized / affirmative icon action — hover picks up the warm
   action tint. (Named --brand before the interaction layer moved every quiet
   control onto the fixed action ink; it no longer touches the tenant's brand.) */
.global-icon-btn--primary:hover {
    background: var(--color-action-tint);
    color: var(--color-action);
    border-color: var(--color-action-tint);
}

/* --ondark: for icon buttons on a colored surface (sidebar, a filled modal
   header). The icon and ring are explicitly light so they stay visible on any
   dark/brand fill — do NOT rely on the surface setting a light currentColor,
   which fails silently when it doesn't. Hover is a translucent white veil. */
.global-icon-btn--ondark {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.28);
}

.global-icon-btn--ondark:hover {
    background: var(--neutral-ink-border);
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.45);
}

/* ── Toggle state ── an icon button that is also an on/off switch fills with
   the action ink while it is on; hover lightens a step (a dark ink control
   reads "released", not "pressed harder"). Pair it with `aria-pressed` so the
   state is read out, not just seen. Last in the sheet on purpose: it has to
   outrank every skin's own hover, or a pressed button goes pale under the
   pointer. */
.global-icon-btn.is-active {
    background: var(--color-action);
    color: var(--color-neutral-ink-fg);
    border-color: var(--color-action);
}

.global-icon-btn.is-active:hover {
    background: var(--color-action-hover);
    color: var(--color-neutral-ink-fg);
    border-color: var(--color-action-hover);
}

/* ── Phone (<768px) ─────────────────────────────────────────────────────────
   The small variant grows to the touch square; the glyph stays its size. LAST. */
@media (max-width: 767.98px) {
    .global-icon-btn--sm {
        width: var(--control-h-touch);
        height: var(--control-h-touch);
    }
}