/**
 * Tier Overview modal — "Add a section to this tier" + "Remove from this
 * tier" (v2: DELETE /api/coach/content-tiers/{tier}/sections/{slug} now
 * exists — see coach-profile-edit-course-detail-tier-overview.js's file
 * header for the shape decision).
 *
 * Deliberately a SEPARATE file, not appended to `coach-profile-edit.css`
 * (which already carries the read-only `.cp-tier-overview__*` rules and
 * the sibling `.cp-tier-chip*` per-section control) — a concurrent session
 * is editing that file for an unrelated feature. Reuses its design-token
 * discipline exactly: real tokens only (`--bg-elevated`/`--border-subtle`/
 * `--accent`/`--accent-danger`/`--accent-danger-light`/`--text-on-accent`/
 * `--bg-base`/`--text-tertiary`), never the invented `--surface`/`--border`/
 * `--accent-error` names that silently fall back to their dark-mode default
 * in BOTH themes elsewhere in this codebase (see gotchas-frontend.md) —
 * `--accent-danger`/`--accent-danger-light` are the REAL destructive-action
 * tokens (grep `web/styles/base/variables.css`), theme-aware in both
 * dark and light.
 *
 * Hover state on the ADD button uses a box-shadow ring rather than
 * swapping the button's fill to `--accent-hover` — `--accent-hover` is
 * documented as a lighter blue meant for accent-COLORED TEXT hover states,
 * not a fill under white text (white-on-`--accent-hover` measures ~2.5:1 in
 * dark theme, a WCAG fail). A ring changes neither foreground nor
 * background, so it can never introduce a new contrast failure.
 *
 * The REMOVE control (`.cp-tier-overview__remove-btn`) is icon-only —
 * default state uses `--text-tertiary` (already AA-verified against both
 * theme surfaces elsewhere in this file's sibling module), escalating to
 * `--accent-danger` on hover/focus so the destructive intent reads clearly
 * without making every row look alarming at rest. Its "×"/busy glyph is
 * rendered via `::before` (CSS content), NOT button text — this is
 * deliberate: it keeps the button's OWN textContent empty so appending it
 * to `.cp-tier-overview__added-item` (a pre-existing <li> whose full text
 * content is asserted verbatim elsewhere — see the .js file's own comment
 * on this) doesn't change what that li's text resolves to. The visible
 * icon is exactly as visible to sighted users as an inline text glyph
 * would be; only the DOM's text-node accounting differs.
 */

.cp-tier-overview__add {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cp-tier-overview__add-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cp-tier-overview__add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cp-tier-overview__add-select {
    flex: 1 1 200px;
    min-height: 44px;              /* WCAG 2.5.8 target-size floor */
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.8125rem;
    box-sizing: border-box;
}

.cp-tier-overview__add-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cp-tier-overview__add-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cp-tier-overview__add-btn {
    flex: 0 0 auto;
    min-width: 88px;
    min-height: 44px;              /* WCAG 2.5.8 target-size floor */
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: var(--text-on-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
    .cp-tier-overview__add-btn:hover:not(:disabled) {
        box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
    }
}

.cp-tier-overview__add-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cp-tier-overview__add-btn:disabled {
    background: var(--bg-elevated);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

.cp-tier-overview__add-btn[aria-busy="true"] {
    cursor: progress;
}

.cp-tier-overview__add-empty {
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.75rem;
    font-style: italic;
    color: var(--text-tertiary);
}

/*
 * "Remove from this tier" — additive rules on top of the pre-existing
 * `.cp-tier-overview__added-list`/`.cp-tier-overview__added-item` (defined
 * in coach-profile-edit.css, loaded BEFORE this file — see that file's own
 * "adds nothing" delta list). The label span + the layout flip here are
 * new-in-v2; the base list/li rules from that file (spacing, font-size,
 * color) still apply underneath.
 */
.cp-tier-overview__added-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cp-tier-overview__added-item-label {
    flex: 1 1 auto;
    min-width: 0;
}

.cp-tier-overview__remove-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;                   /* WCAG 2.5.8 target-size floor */
    height: 24px;                  /* WCAG 2.5.8 target-size floor */
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    box-sizing: border-box;
}

/* The visible glyph — NOT button text; see the file-header note on why. */
.cp-tier-overview__remove-btn::before {
    content: '\00D7';
    font-size: 1rem;
    line-height: 1;
}

.cp-tier-overview__remove-btn[aria-busy="true"]::before {
    content: '\2026';   /* ellipsis while the DELETE is in flight */
}

.cp-tier-overview__remove-btn[aria-busy="true"] {
    cursor: progress;
}

@media (hover: hover) and (pointer: fine) {
    .cp-tier-overview__remove-btn:hover:not(:disabled) {
        color: var(--accent-danger);
        background: var(--accent-danger-light);
    }
}

.cp-tier-overview__remove-btn:focus-visible {
    outline: 2px solid var(--accent-danger);
    outline-offset: 2px;
}

.cp-tier-overview__remove-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}