/* ============================================================
   APP HEADER
   ============================================================ */

.app-header {
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-4);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    flex-shrink: 0;
    z-index: 10;
}

.app-title {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.logo-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.app-header-left {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    justify-self: start;
}

.app-header-center {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-self: center;
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-self: end;
}

.theme-toggle {
    --btn-fg: var(--color-text-muted);

    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--btn-fg);
    background: transparent;
    border: none;
    cursor: pointer;
}
.theme-toggle:hover {
    color: --lighter(var(--btn-fg), 0.24);
    background: --tint(var(--btn-fg), 0.12);
}

/* ============================================================
   HEADER TRANSFORM BUTTONS — pill animation on hover
   Expands horizontally, shows gradient + glow, swaps icon → label
   ============================================================ */

.header-btn {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    transition:
        width 0.45s var(--ease-out),
        box-shadow 0.45s var(--ease-out);
    overflow: hidden;
    white-space: nowrap;
}

.header-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: var(--color-surface-2);
    opacity: 0;
    transition: opacity 0.45s var(--ease-out);
    z-index: 0;
}

.header-btn::after {
    content: "";
    position: absolute;
    top: 6px;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: var(--color-primary);
    filter: blur(16px);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.45s var(--ease-out);
}

.header-btn-icon {
    position: relative;
    z-index: 1;
    color: var(--color-text-muted);
    transition:
        transform 0.45s var(--ease-out),
        color 0.45s var(--ease-out);
    transition-delay: 0.15s;
}

.header-btn-label {
    position: absolute;
    z-index: 1;
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: scale(0);
    transition: transform 0.45s var(--ease-out);
    transition-delay: 0s;
}

/* --- Hover: expand pill, reveal gradient + label --- */

.header-btn:hover {
    width: 108px;
}

.header-btn:hover::before {
    opacity: 1;
}

.header-btn:hover::after {
    opacity: 0.4;
}

.header-btn:hover .header-btn-icon {
    transform: scale(0);
    transition-delay: 0s;
}

.header-btn:hover .header-btn-label {
    transform: scale(1);
    transition-delay: 0.18s;
}

.header-btn:active {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* --- Active toggle (flip-x / flip-y / crop) — stay expanded --- */

.header-btn[aria-pressed="true"] {
    width: 108px;
}

.header-btn[aria-pressed="true"]::before {
    content: "";
    position: absolute;
    top: 6px;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: var(--color-primary);
    filter: blur(16px);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.45s var(--ease-out);
}

.header-btn[aria-pressed="true"]::after {
    opacity: 0.4;
}

.header-btn[aria-pressed="true"] .header-btn-icon {
    transform: scale(0);
    transition-delay: 0s;
}

.header-btn[aria-pressed="true"] .header-btn-label {
    transform: scale(1);
    transition-delay: 0.18s;
}

.header-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}