/* Character sheet page. Reuses the market's palette tokens from market.css (--panel, --gold,
   --hairline and friends) so the sheet reads as part of the same site. */

.sheet-header .site-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Server address for players who land here without the client set up, straight after the Play
   link. On narrow screens the label and the brand text drop and the row may wrap (see below). */
.sheet-server {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}

/* The sheet's own outbound links. Deliberately not .site-nav: that class is the market app's
   in-site navigation, which the sheet host must never render (SheetPageTests pins its absence). */
.sheet-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
}

.sheet-nav a {
    text-decoration: none;
    color: var(--text-2);
    padding: 6px 0;
}

.sheet-nav a:hover {
    color: var(--gold);
}

.sheet-server-label {
    color: var(--faint);
}

/* market.css gives every main 36px of top padding for the market's filter rows; the sheet opens
   straight into the character name, so it keeps only a small gap under the sticky header. */
.sheet-body main {
    padding-top: 12px;
}

.sheet-page {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.sheet-head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--hairline);
}

.sheet-name {
    margin: 0;
    font-size: 2.2rem;
    color: var(--gold);
}

.sheet-subline {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--muted);
}

.sheet-level {
    color: var(--text);
}

.sheet-error-state {
    max-width: 640px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.sheet-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sheet-section h2 {
    margin: 0;
    font-size: 1.4rem;
}

.sheet-section h3 {
    margin: 0;
    font-size: 0.8rem;
    font-family: var(--body);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---- ranks ---- */

.rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    background: var(--panel);
}

.rank-row {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.9rem 0.5rem 0.5rem;
    min-height: 2.75rem;
}

.rank-row + .rank-row {
    border-top: 1px solid var(--rule);
}

.badge-cell {
    display: flex;
    justify-content: center;
}

.rank-title {
    color: var(--text);
}

.rank-number {
    font-family: var(--head);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gold);
    font-variant-numeric: lining-nums tabular-nums;
}

.rank-score {
    min-width: 7rem;
    text-align: right;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.badge svg {
    width: 1.9rem;
    height: 1.9rem;
    display: block;
}

.badge-crown svg {
    fill: var(--gold);
    filter: drop-shadow(0 0 4px rgba(225, 173, 102, 0.45));
}

.badge-medal svg {
    width: 2.1rem;
    height: 2.1rem;
    fill: #c9ccd2;
}

.badge-medal .badge-strap {
    fill: #7f6a8c;
}

.badge-medal .badge-inner {
    fill: none;
    stroke: rgba(0, 0, 0, 0.25);
    stroke-width: 1.2;
}

.badge-medal.badge-rank-3 svg {
    fill: #c58a52;
}

.badge-medal.badge-rank-3 .badge-strap {
    fill: #5f7a8c;
}

.badge-ribbon svg {
    width: 1.85rem;
    height: 1.85rem;
    fill: var(--gold-border);
    opacity: 0.85;
}

.badge-top20 {
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--muted);
}

/* ---- two columns: stats left, gear right ---- */

.sheet-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 2.5rem;
}

.sheet-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 0;
}

/* Right column: paperdoll, attributes and vitals stacked together so the whole column moves and
   wraps as one unit. */
.sheet-side {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 25rem;
    max-width: 100%;
}

/* ---- 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; }

.gear-none {
    margin: 0;
    color: var(--muted);
}

/* ---- skills ---- */

.sheet-skills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem 2rem;
}

.sheet-skills h2 {
    grid-column: 1 / -1;
}

.skill-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skill-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.skill-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--rule);
}

.skill-values {
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* The "(current)" half of a skill/attribute/vitals row's base/current value: green when the
   buffed number meets or beats base, red when a debuff or vitae has pulled it under. Reuses the
   market's own --ok/--err tokens (the success/error message colors) rather than new literals. */
.stat-buffed {
    color: var(--ok);
}

.stat-debuffed {
    color: var(--err);
}

/* ---- class abilities ---- */

.ability-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ability-group + .ability-group {
    margin-top: 0.5rem;
}

.ability-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ability-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--gold-border);
    border-radius: 999px;
    background: var(--gold-tint);
}

.ability-name {
    color: var(--text);
}

.ability-rank {
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.ability-tier {
    font-size: 0.7rem;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    background: var(--gold-tint-3);
    color: var(--text-2);
}

@media (max-width: 880px) {
    .sheet-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .sheet-side {
        width: auto;
    }
}

/* 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);
    }
}

/* Brand, two links and the address need about 636px on one 60px row (measured in a headless
   browser), so below 680px keep the icon (it still links to the wiki), drop the brand text and
   the label, tighten the gaps, and let the row wrap rather than scroll sideways. A landscape
   phone (568px) falls inside this range. */
@media (max-width: 680px) {
    .sheet-header .site-header-inner {
        height: auto;
        min-height: 60px;
        flex-wrap: wrap;
        row-gap: 6px;
        gap: 14px;
        padding: 8px 16px;
    }

    .sheet-nav {
        flex-wrap: wrap;
        gap: 14px;
    }

    .sheet-brand-text,
    .sheet-server-label {
        display: none;
    }
}

@media (max-width: 480px) {
    .sheet-page {
        padding: 0 0.75rem 2rem;
    }

    .sheet-name {
        font-size: 1.8rem;
    }

    .rank-row {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
        row-gap: 0.1rem;
    }

    .rank-score {
        grid-column: 2 / -1;
        min-width: 0;
        text-align: left;
    }

    .paperdoll {
        gap: 0.2rem;
        padding: 0.4rem;
    }
}