/* The paperdoll: the 6 x 11 half-row socket grid shared by the character sheet and the Suit Builder.
   The socket table lives in CharSheet/Paperdoll.cs and ClientApp/src/suit/ui/paperdoll.ts; a test keeps
   the two in step. Both pages link this file. */

/* ---- equipped: a paperdoll shaped like the client's inventory panel ---- */

.paperdoll {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 3.6rem));
    gap: 0.45rem;
    justify-content: center;
    padding: 1rem;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    background: var(--panel);
}

.socket {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--appraisal-fill);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.socket-filled {
    border-color: var(--frame-dark);
    text-decoration: none;
}

/* The link carries the accessible name; the icon inside is hidden so it is not announced twice. */
.socket-icon {
    display: flex;
}

.socket-filled:hover,
.socket-filled:focus-visible {
    border-color: var(--gold-border);
    background: var(--gold-tint-3);
}

/* Aetheria sit in round sockets tinted like the client's three orbs. */
.socket-sigil-blue,
.socket-sigil-yellow,
.socket-sigil-red {
    border-radius: 50%;
}

.socket-sigil-blue { border-color: rgba(96, 140, 220, 0.55); }
.socket-sigil-yellow { border-color: rgba(222, 190, 80, 0.55); }
.socket-sigil-red { border-color: rgba(210, 90, 80, 0.55); }

/* Rows are half a socket tall (the client staggers the body half a socket below the jewelry),
   so every socket starts on a half-row and spans two. */
.pd-r1 { grid-row: 1 / span 2; }
.pd-r2 { grid-row: 2 / span 2; }
.pd-r3 { grid-row: 3 / span 2; }
.pd-r4 { grid-row: 4 / span 2; }
.pd-r5 { grid-row: 5 / span 2; }
.pd-r6 { grid-row: 6 / span 2; }
.pd-r7 { grid-row: 7 / span 2; }
.pd-r8 { grid-row: 8 / span 2; }
.pd-r10 { grid-row: 10 / span 2; }

.pd-c1 { grid-column: 1; }
.pd-c2 { grid-column: 2; }
.pd-c3 { grid-column: 3; }
.pd-c4 { grid-column: 4; }
.pd-c5 { grid-column: 5; }
.pd-c6 { grid-column: 6; }

/* Below ~380px the sockets drop under the icon's fixed 40px, so draw the icon smaller. */
@media (max-width: 379px) {
    .paperdoll .icon {
        transform: scale(0.75);
    }
}

@media (max-width: 480px) {
    .paperdoll {
        gap: 0.2rem;
        padding: 0.4rem;
    }
}