/*
 * hax-achievements.css — Achievements page chip-filter, collapsible panels, pin toggle.
 *
 * Owns the chrome that wraps the per-discipline + cross-discipline panels on /achievements.
 * Panel inner content (stat sub-cards, achievement cards) is styled by the existing
 * discipline-specific stylesheets and the page-local hax-achievement-card rules.
 *
 * Loaded site-level via App.razor's <link> block.
 */

/* ── Discipline chip row ───────────────────────────────────────────────────────────────── */

.hax-discipline-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.5rem 0;
}

.hax-discipline-chip-row-label {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    margin-right: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* MudChipSet renders its own .mud-chipset wrapper; we don't need to style the chips
   themselves — they reuse the existing pill convention from the Earned/Unearned row. */

/* ── Per-discipline panel chrome ───────────────────────────────────────────────────────── */

.hax-discipline-panel {
    /* The lighter #064E3B wrapper. Same chrome the page's MudPaper used before, plus
       per-state expand/collapse animation. */
    background-color: var(--mud-palette-surface);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.hax-discipline-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    user-select: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    color: var(--mud-palette-text-primary);
}

.hax-discipline-panel-header:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.hax-discipline-panel-header:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.hax-discipline-panel-title {
    font-size: 1.125rem;
    font-weight: 600;
    flex-grow: 1;
}

/* Chevron — SVG silhouette via mask-image so currentColor flows through. Default state is
   collapsed (chevron points right); expanded state rotates 90° to point down. */
.hax-panel-chevron {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    mask-image: url('/icons/ui/chevron.svg');
    -webkit-mask-image: url('/icons/ui/chevron.svg');
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: var(--mud-palette-text-secondary);
    transform: rotate(0deg);
    transition: transform 150ms ease-out;
}

.hax-panel-chevron--expanded {
    transform: rotate(90deg);
}

/* Pin button — outline (slate, unpinned) ↔ filled (lime, pinned). Hover on unpinned bumps
   the outline to lime to preview the toggle outcome. */
.hax-panel-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    border-radius: 999px;
    color: #94A3B8;
    transition: color 120ms ease-out, background-color 120ms ease-out;
}

.hax-panel-pin:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #A3E635;
}

.hax-panel-pin:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.hax-panel-pin--pinned {
    color: #A3E635;
}

.hax-panel-pin-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: currentColor;
}

.hax-panel-pin-icon--outline {
    mask-image: url('/icons/ui/pin.svg');
    -webkit-mask-image: url('/icons/ui/pin.svg');
}

.hax-panel-pin-icon--filled {
    mask-image: url('/icons/ui/pin-filled.svg');
    -webkit-mask-image: url('/icons/ui/pin-filled.svg');
}

/* ── Panel content expand/collapse ─────────────────────────────────────────────────────── */

.hax-discipline-panel-content {
    overflow: hidden;
    transition: max-height 150ms ease-out, opacity 150ms ease-out;
    max-height: 8000px; /* Bound for the transition to interpolate against; generous enough
                           for the largest realistic panel content (full achievement grid). */
    opacity: 1;
}

.hax-discipline-panel-content--collapsed {
    max-height: 0;
    opacity: 0;
}

.hax-discipline-panel-content-inner {
    padding: 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Mobile reshape — chip row keeps wrapping; panel header padding stays the same. */
@media (max-width: 600px) {
    .hax-discipline-panel-header {
        padding: 0.75rem;
    }

    .hax-discipline-panel-content-inner {
        padding: 0 0.75rem 0.75rem;
    }
}