/* Public player-profile page (SSR, server/player_page.ts). Loads AFTER
   site-pages.css, which supplies the shared palette (--bg, --panel-bg,
   --panel-border, --text, --text-dim, --text-dim-panel, --text-bright,
   --accent, --accent-fg, --accent-hover), the Inter/mono font stacks, the base
   resets, and the shared .public-topbar. Every panel on this page sits on
   --panel-bg, so dim text uses --text-dim-panel (5.13:1 on that composite);
   plain --text-dim is only 4.29:1 there and fails WCAG 1.4.3 AA.

   This file only adds the profile layout, on the same frosted steel-navy panels
   the leaderboard and blog use — same eyebrows, same table treatment, same CTA
   recipe.

   The one profile-specific move: the page is tinted by the PROFILED PLAYER's own
   empire colour (injected inline as --empire / --empire-rgb by the renderer, the
   same hue their territory carries on the live galaxy map). It is used sparingly
   — the crest, the territory chart, the hex marks — so the page still reads as
   Old Light, not a themed skin. It is NOT used for text: the raw banner colour is
   tuned for territory-map legibility, not type, and several palette entries fail
   the 4.5:1 body-text contrast floor against the panel background, so text that
   needs emphasis uses --text-bright instead. Brand amber stays on the topbar,
   the section eyebrows, and the play CTA. */

.pf {
    /* Fallbacks so the page still renders if the inline vars are ever absent. */
    --empire: var(--accent);
    --empire-rgb: 255, 180, 87;
    max-width: 860px;
    margin: 0 auto;
    padding: 26px 18px 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Visually-hidden but screen-reader-exposed (the copy-link aria-live status). */
.pf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Header panel: crest + identity + spec (mirrors the leaderboard's
   crest-name-rank lockup, framed like every other public panel) ---------- */

/* Breadcrumb: Old Light / Leaderboard / this player. */
.pf-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--text-dim);
}

.pf-crumbs a {
    color: var(--text-dim);
    cursor: pointer;
}

.pf-crumb-sep {
    opacity: 0.5;
}

.pf-head {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px 22px;
    align-items: center;
    padding: 24px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    backdrop-filter: blur(6px);
}

/* Share row, pinned to the header's top-right on desktop (out of the grid
   flow), so it sits beside the name without disturbing the crest/identity
   lockup. On mobile it re-enters the flow as its own row under the name.

   The 4px each button carries (below) is taken back out of these offsets and
   out of the gap, so the icons render in exactly the position and spacing they
   always did: rightmost icon edge 20px in, top edge 18px down, 10px of clear
   space between neighbours. Only the hit areas grew. */
.pf-share {
    position: absolute;
    top: 14px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Icon-only brand buttons: the inline SVG inherits currentColor. The icon art
   is 17x17, which is a thin thing to hit on a phone in a row of six; the
   padding takes each button to 25x25 so it clears the WCAG 2.5.8 target
   minimum outright instead of leaning on the Spacing exception. Row total is
   6 x 25 + 5 x 2 = 160px, inside the reserve .pf-id holds open for it.
   --text-dim reads 4.29:1 on --panel-bg: under the 4.5:1 floor for text, but
   these are icons, and well over the 3:1 WCAG 1.4.11 floor that governs them. */
.pf-share-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border: none;
    background: none;
    line-height: 0;
    color: var(--text-dim);
    cursor: pointer;
}

/* Holds the rest colour so the sitewide amber a:hover cannot repaint these,
   per the project rule that clickable elements signal with the cursor and
   nothing else. (.pf-share-copy is a <button> with no a:hover to cancel; it
   shares the rule so the six buttons stay uniform.) */
.pf-share-btn:hover {
    color: var(--text-dim);
    text-decoration: none;
}

.pf-share-btn svg {
    display: block;
}

/* Copy confirmation: a small tooltip above the button, no icon swap. The offset
   nets out to 7px above the icon art: 3px here plus the button's 4px of
   target padding. */
.pf-share-copy.is-copied::after {
    content: "Copied";
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--text-bright);
    color: var(--bg);
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    pointer-events: none;
}

.pf-crest {
    line-height: 0;
}

.pf-crest svg {
    display: block;
    width: 104px;
    height: 104px;
}

.pf-id {
    min-width: 0;
    /* Reserve room for the absolutely-positioned share row (top-right) so a long
       empire name wraps before it instead of running under the icons. The row
       is exactly 160px wide (see .pf-share-btn) — keep these in step. Released
       on mobile, where the share row returns to the normal flow. */
    padding-right: 160px;
}

.pf-name {
    margin: 0 0 8px;
    font-weight: 300;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text-bright);
    overflow-wrap: break-word;
}

.pf-standing {
    margin: 0;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: var(--text-dim-panel);
}

/* The standing figure is emphasised type, so it uses --text-bright (the same
   emphasis colour as the name and the spec values) rather than the raw empire
   colour, which fails the 4.5:1 text-contrast floor for several palette entries
   against the panel background. */
.pf-rank {
    color: var(--text-bright);
    font-weight: 600;
    cursor: pointer;
}

/* Hold --text-bright on hover (the sitewide a:hover would repaint it amber); the
   underline from that rule stays as the link affordance. */
.pf-rank:hover {
    color: var(--text-bright);
}

.pf-spec {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--panel-border);
    display: flex;
    flex-wrap: wrap;
    gap: 20px 34px;
}

.pf-spec div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pf-spec dt {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim-panel);
}

.pf-spec dd {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-bright);
    font-variant-numeric: tabular-nums;
}

/* Summary line: crawlable prose inside the header box, spanning its full width
   between the identity row and the stat row. Quiet, readable body text. */
.pf-summary {
    grid-column: 1 / -1;
    max-width: 62ch;
    margin: 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
}

/* ---- Generic panel + eyebrow ----------------------------------------- */

.pf-panel {
    padding: 22px 24px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    backdrop-filter: blur(6px);
}

.pf-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--accent);
}

/* Hexagon mark — the galaxy motif carried from the blog headings, tinted to
   this empire's colour. */
.pf-eyebrow::before {
    content: "";
    flex: none;
    width: 11px;
    height: 12px;
    background: var(--empire);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ---- Territory map (label row + full-map link) ------------------------ */

.pf-map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}

/* The eyebrow keeps its own bottom margin elsewhere; inside the flex row the
   row supplies the spacing. */
.pf-map-head .pf-eyebrow {
    margin: 0;
}

/* Small secondary link, top-right of the map box. Cursor only; it inherits the
   sitewide link hover from site-pages.css. */
.pf-map-link {
    flex: none;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-dim-panel);
    white-space: nowrap;
    cursor: pointer;
}

/* ---- Territory chart -------------------------------------------------- */

/* A fixed SQUARE box, so the map is the same size for every player instead of
   jumping with each empire's territory aspect. The renderer emits a SQUARE
   viewBox (it grows the shorter side, filling the extra span with surrounding
   galaxy), so the SVG fills this box edge to edge with no letterbox — even for
   long empires. The box background matches the renderer's SVG background
   (#0a0e14) as a fallback while the SVG paints. */
.pf-chart {
    margin: 0;
    padding: 0;
    aspect-ratio: 1 / 1;
    background: #0a0e14;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    overflow: hidden;
}

.pf-chart svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---- Systems table (echoes the leaderboard table) -------------------- */

.pf-table {
    width: 100%;
    border-collapse: collapse;
}

.pf-table th {
    text-align: left;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--panel-border);
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim-panel);
}

/* The numeric column header must right-align over its values; the base
   `.pf-table th` rule out-specifies the shared `.pf-num` otherwise. */
.pf-table th.pf-num {
    text-align: right;
}

.pf-table td {
    padding: 11px 0;
    border-bottom: 1px solid var(--panel-border);
    font-size: 14px;
    color: var(--text);
    vertical-align: middle;
}

.pf-table tbody tr:last-child td {
    border-bottom: none;
}

.pf-num {
    text-align: right;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    color: var(--text-bright);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pf-more {
    margin: 14px 0 0;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--text-dim-panel);
}

/* Neighboring-empire cross-links, as chips. Cursor-only per the project rule
   (the global a:hover underline is neutralized). */
.pf-neighbors {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-neighbors a {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}

.pf-neighbors a:hover {
    color: var(--text);
    text-decoration: none;
}

/* ---- Sectors held ----------------------------------------------------- */

.pf-sectors {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-sectors li {
    display: flex;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--panel-border);
}

.pf-sectors li:last-child {
    border-bottom: none;
}

.pf-sector-name {
    min-width: 0;
    font-size: 14px;
    color: var(--text-bright);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-sector-bonus {
    margin-left: auto;
    padding-left: 16px;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--text-dim-panel);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Play CTA (frosted panel + faint amber glow, under the header) ----- */

/* Signed-out content is visible by DEFAULT and hidden only once the head script
   confirms a token, so a crawler, a no-JS visitor or a failed localStorage read
   all still get the join panel. The class lands before first paint, so a signed-in
   viewer never sees the panel flash. Uses display, not the hidden attribute: an
   author rule setting display would tie [hidden] on specificity and win on source
   order, which is a trap this codebase has hit before. */
.is-authed [data-logged-out] {
    display: none;
}

.pf-cta {
    margin: 0;
    padding: 34px 28px;
    text-align: center;
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(255, 180, 87, 0.08), transparent 60%),
        var(--panel-bg);
    border: 1px solid rgba(255, 180, 87, 0.3);
    border-radius: 10px;
    backdrop-filter: blur(6px);
}

.pf-cta-head {
    margin: 0 0 20px;
    font-weight: 300;
    font-size: clamp(18px, 2.2vw, 23px);
    line-height: 1.3;
    color: var(--text-bright);
    overflow-wrap: break-word;
}

/* Primary action: mirrors the site's landing/topbar CTA, so it keeps the brand
   amber and the established amber->amber-hover, not the generic no-hover rule. */
.pf-cta-btn {
    display: inline-block;
    cursor: pointer;
    background: var(--accent);
    color: var(--accent-fg);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 600;
    padding: 13px 28px;
    border-radius: 4px;
}

.pf-cta-btn:hover {
    background: var(--accent-hover);
    color: var(--accent-fg);
    text-decoration: none;
}

.pf-cta-btn:focus-visible {
    outline: 2px solid var(--accent-hover);
    outline-offset: 3px;
}

/* ---- Responsive ------------------------------------------------------- */

@media (max-width: 620px) {
    .pf-head {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px;
    }

    /* Back into the flow: a share row under the name block instead of pinned. */
    .pf-share {
        position: static;
        margin-top: 2px;
    }

    /* No pinned share row to clear at this width. */
    .pf-id {
        padding-right: 0;
    }

    .pf-crest svg {
        width: 88px;
        height: 88px;
    }

    .pf-panel {
        padding: 20px 18px;
    }
}