/* Platform-wide "add another" tile. `.global-add-tile` is the canonical
   full-width affordance that appends a row to a repeating list or reveals a
   collapsed optional band — the "Add an event" / "Add Role" / "Add competency"
   button that reads as a bordered empty slot rather than a normal button.

       <button type="button" class="global-add-tile">
         <i class="bi bi-plus-lg"></i><span>Add competency</span>
       </button>

   Scope: this is the LIST-GROWING tile. It deliberately does NOT cover ordinary
   primary/secondary actions (those stay Bootstrap `.btn`), nor the small inline
   remove X that pairs with it — that rides the canonical
   `.global-icon-btn --sm --danger` (components/icon-button.css).

   Every value resolves to a token, so the tile inherits per-tenant brand and the
   platform focus ring instead of the Bootstrap blue it was hand-typed against. */

/* ── Canonical component ── neutral card fill, a slightly heavy 1.5px hairline
   so the slot reads as an empty container, and the large-panel corner.

   The hairline binds to --color-border, NOT --color-border-subtle. The tile's
   whole affordance IS its border — there is no fill or label weight carrying it
   — so the edge has to stay visible. --color-border-subtle resolves to
   --color-surface-hover (#e9ecef, 1.19:1 on the white card), lighter than the
   #e5e7eb (1.24:1) this component was hand-typed against, and the
   prefers-contrast: more block in tokens.css only remaps --color-border. Binding
   subtle would have dimmed the resting edge AND left high-contrast users with no
   affordance at all. --color-border is #d0d4db (1.49:1) and darkens to
   --color-border-dark (#232323, 15.72:1) under prefers-contrast. */
.global-add-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md) var(--spacing-mdlg);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-card-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition:
        border-color 0.12s ease,
        background-color 0.12s ease;
}

/* The leading glyph sits optically level with the label. */
.global-add-tile i {
    font-size: 1.05rem;
    line-height: 1;
}

/* Hover firms the hairline to the action ink and washes the slot with the warm
   action tint every other hover-tinted control already uses. */
.global-add-tile:hover {
    border-color: var(--color-action);
    background: var(--color-action-tint);
}

/* Platform focus treatment (matches .global-icon-btn / .global-segmented): an
   offset outline, not a ring shadow. */
.global-add-tile:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}