/* ===== Player Card — public page =====
   Design tokens from app.css; layout inspired by the design prototype (styles.css).
   Fonts: Space Grotesk (UI) + Manrope (headings) already loaded via app.css.
   Monospace numbers use system ui-monospace stack.
*/

/* ---------- PAGE ---------- */
.pc-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 64px;
}

/* ---------- HERO ---------- */
.pc-hero {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(480px 320px at 18% 30%, oklch(82% 0.13 85 / 0.08), transparent 70%),
        linear-gradient(180deg, var(--fc-surface) 0%, var(--fc-surface-low) 100%);
    border: 1px solid var(--fc-outline);
    border-radius: 20px;
    overflow: hidden;
}

.pc-hero-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 28px;
    padding: 28px 28px 20px;
    align-items: start;
}

/* ---------- CARD ART — mirrors admin/ea/player_inspect.html.twig structure ---------- */
.pc-card-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

.pc-card-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pc-card-price-date {
    font-size: 11px;
    color: var(--fc-muted);
    opacity: 0.6;
    letter-spacing: 0.02em;
    min-height: 14px;
}

.pc-card-price {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--fc-surface-high);
    border: 1px solid var(--fc-outline);
    border-radius: 999px;
    padding: 5px 14px 5px 10px;
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--fc-secondary);
    letter-spacing: 0.02em;
}

.pc-card-price-coin {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.pc-sbc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #f59e0b;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 0 2px;
    transition: color 160ms ease;
}
.pc-sbc-badge::before {
    content: '⬡';
    font-size: 10px;
    opacity: 0.7;
}
.pc-sbc-badge:hover {
    color: #fbbf24;
}
/* display:inline-flex above overrides the native [hidden] attribute — restore it explicitly. */
.pc-sbc-badge[hidden] { display: none; }

/* Container: exact same dimensions as admin (matches EA's 516×716 native art). */
.fut-card {
    --card-fg: #1a0f04;
    --chip-bg: #e1b866;
    --chip-fg: #3e281c;
    --card-divider: rgba(0, 0, 0, 0.22);
    --ps-filter: none;
    width: 280px;
    height: 388px;
    flex-shrink: 0;
    background: transparent;
    color: var(--card-fg);
    position: relative;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Background — rarity card art image, fills entire card */
.fut-card-art {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    object-fit: fill;
    z-index: 0;
    display: block;
}

/* Player photo */
.fut-card-shot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: bottom center;
    z-index: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
    pointer-events: none;
}
.fut-card-shot--action {
    top: 0;
    height: 100%;
    width: auto;
    max-width: 100%;
}
.fut-card-shot--portrait {
    top: 16%;
    height: 47%;
    width: auto;
    max-width: 60%;
}

/* Rating + position */
.fut-card-rating-block {
    position: absolute;
    top: 22%; left: 17%;
    z-index: 3;
    line-height: 0.95;
    text-align: center;
    pointer-events: none;
}
.fut-card-rating { font-size: 32px; font-weight: 900; letter-spacing: -1px; }
.fut-card-pos    { font-size: 16px; font-weight: 500; margin-top: 1px; opacity: 0.95; }

/* PlayStyle+ left sidebar — diamond medallions */
.fut-card-ps-sidebar {
    position: absolute;
    top: 24%; left: 4%;
    z-index: 3;
    display: flex; flex-direction: column;
    gap: 6px; pointer-events: none;
}
.fut-card-ps-sidebar[hidden] { display: none; }
.fut-card-ps {
    width: 32px; height: 32px;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.fut-card-ps-svg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
}
.fut-card-ps-svg .diamond-bg    { fill: var(--chip-bg, #e1b866); }
.fut-card-ps-svg .diamond-frame { fill: var(--chip-fg, #3e281c); }
.fut-card-ps-img {
    width: 92%; height: 92%;
    object-fit: contain;
    position: relative; z-index: 1;
    margin-top: -6%;
    filter: var(--ps-filter, none);
}

/* Right-side chips: SM/WF + alt-positions */
.fut-card-info-sidebar {
    position: absolute;
    top: 24%; right: 2%;
    z-index: 3;
    display: flex; flex-direction: column;
    gap: 5px; align-items: flex-end;
    pointer-events: none;
}
.fut-card-chip {
    background: var(--chip-bg, #f3e2b8);
    color: var(--chip-fg, #2d1e0a);
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 2px 3px;
    font-size: 11px; font-weight: 500;
    text-align: center;
    min-width: 44px;
    letter-spacing: 0.5px;
    line-height: 1.15;
    white-space: nowrap;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.fut-card-chip-multi { padding: 2px 3px; }
.fut-card-chip-multi .fut-card-chip-row { padding: 1px 0; }
.fut-card-chip-multi .fut-card-chip-row + .fut-card-chip-row {
    border-top: 1px solid currentColor;
    margin-top: 1px;
}

/* Player name — sits on the shelf */
.fut-card-name {
    position: absolute;
    top: 64%;
    left: 12%; right: 12%;
    z-index: 2;
    text-align: center;
    font-size: 20px; font-weight: 700;
    line-height: 1.05;
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}

/* 6-stat row */
.fut-card-stats-row {
    position: absolute;
    top: 72%;
    left: 12%; right: 12%;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
}
.fut-card-stats-row > div { text-align: center; line-height: 1; }
.fut-card-stats-row .lbl { font-size: 10px; font-weight: 500; letter-spacing: 0.4px; opacity: 0.9; display: block; }
.fut-card-stats-row .num { font-size: 16px; font-weight: 700; display: block; line-height: 1.15; }
.fut-card-stats-row .card-chem-diff { font-size: 11px; font-weight: 700; display: block; line-height: 1.2; color: var(--card-fg); min-height: 13px; }

/* Badges strip */
.fut-card-badges {
    position: absolute;
    top: 82%;
    left: 0; right: 0;
    z-index: 2;
    display: flex;
    justify-content: center; align-items: center;
    gap: 6px;
    pointer-events: none;
}
.fut-card-badges img      { height: 24px; object-fit: contain; }
.fut-card-badges img.flag { height: 14px; }

/* ---------- HERO CENTER ---------- */
.pc-hero-center {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.pc-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pc-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--fc-surface-high);
    color: var(--fc-muted);
    border: 1px solid var(--fc-outline);
}

.pc-tag--gold {
    color: var(--fc-secondary);
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(255, 215, 0, 0.08);
}

.pc-tag--icon {
    color: var(--fc-tertiary);
    border-color: rgba(0, 220, 254, 0.3);
    background: rgba(0, 220, 254, 0.08);
}

.pc-hero-name {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -0.035em;
    margin: 0;
    line-height: 1.1;
    padding-bottom: 0.05em;
    background: linear-gradient(180deg, #fff 0%, #b3bbd0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Info badges row (nation · league · club · rarity) */
.pc-hero-badges {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 4px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
}
.pc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pc-badge:last-child { grid-column: span 2; }
.pc-badge-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.pc-badge-icon--flag {
    border-radius: 2px;
}
.pc-badge-icon--rarity {
    width: 18px;
    height: auto;
}
.pc-badge-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--fc-text);
}

/* Bio grid */
.pc-bio-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px 4px;
    padding: 4px;
    border: 1px solid var(--fc-outline);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.15);
}

.pc-bio-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pc-bio-k {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fc-muted);
}

.pc-bio-v {
    font-size: 13px;
    font-weight: 600;
    color: var(--fc-text);
}

.pc-stars { color: var(--fc-secondary); letter-spacing: 1px; }
.pc-stars-dim { color: var(--fc-surface-bright); }


/* Per-card panel (PlayStyles + Roles) */
.pc-card-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--fc-outline);
}
/* display:flex above would override the native [hidden] attribute — restore it explicitly. */
.pc-card-panel[hidden] { display: none; }

.pc-ps-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* PlayStyle+ tile: gold diamond (same SVG as card sidebar) */
.pc-ps-tile--plus {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pc-ps-diamond {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.pc-ps-tile--plus .ps-bg    { fill: var(--fc-secondary); }
.pc-ps-tile--plus .ps-frame { fill: #1a0f04; }

.pc-ps-tile--plus img {
    position: relative;
    z-index: 1;
    width: 90%;
    height: 90%;
    object-fit: contain;
    margin-top: -6%;
}

/* PlayStyle (base / silver): rotated square (rhombus), no SVG */
.pc-ps-tile {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pc-ps-rhombus {
    width: 28px;
    height: 28px;
    background: #ffffff;
    /*background: #ddd5bf;*/
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pc-ps-rhombus img {
    width: 95%;
    height: 95%;
    object-fit: contain;
    transform: rotate(-45deg);
    filter: brightness(0);
}


/* Role groups (grouped by position) */
.pc-role-groups {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pc-role-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.pc-role-pos {
    font-size: 11px;
    font-weight: 700;
    color: var(--fc-muted);
    min-width: 32px;
}

.pc-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--fc-outline);
    background: var(--fc-surface-high);
    color: var(--fc-muted);
}

.pc-role-pill--best {
    border-color: rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.08);
    color: var(--fc-secondary);
}

.pc-role-tier {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
}

/* ---------- VERSION RAIL ---------- */
.pc-versions {
    border-top: 1px solid var(--fc-outline);
    padding: 16px 28px 20px;
}

.pc-versions-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.pc-versions-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fc-muted);
}

.pc-versions-count {
    font-size: 11px;
    color: var(--fc-muted);
}

.pc-versions-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* EA card art ratio ≈ 280:388 ≈ 5:7 */
.pc-version-chip {
    width: 56px;
    height: 78px;
    border-radius: 6px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: var(--fc-surface-high);
    border: 0.05px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    position: relative;
    overflow: hidden;
}

.pc-version-chip:hover {
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.pc-version-chip.is-on {
    display: none;
}

.pc-version-chip-ovr {
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* Tag visible only on hover via title tooltip — hide the inline span */
.pc-version-chip-tag {
    display: none;
}

/* ---------- CONTENT — attrs (left) + chemistry panel (right) ---------- */
.pc-content {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}

/* ── Left panel: AcceleRATE & Chemistry ── */
.pc-left-panel {
    background: var(--fc-surface);
    border: 1px solid var(--fc-outline);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pc-panel-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fc-muted);
}

.pc-accelrate-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    align-self: flex-start;
}

.pc-accel--explosive { background: rgba(249, 115, 22, 0.18); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.35); }
.pc-accel--lengthy   { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); }
.pc-accel--controlled { background: rgba(255,255,255,0.07);  color: var(--fc-text); border: 1px solid var(--fc-outline); }

.pc-chem-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Two-column grid: label col auto, value col auto — values align vertically */
.pc-chem-controls {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 8px;
    justify-content: start;
}

.pc-chem-applied-label,
.pc-chem-level-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fc-muted);
    white-space: nowrap;
}

.pc-chem-applied-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--fc-secondary);
    padding-left: 3px;
}

/* Each row is no longer its own flex container — .pc-chem-controls grid handles layout */
.pc-chem-applied,
.pc-chem-level {
    display: contents;
}

.pc-chem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.pc-chem-level-btns {
    display: flex;
    gap: 3px;
}

.pc-chem-level-btn {
    width: 30px;
    height: 30px;
    border-radius: 20px;
    border: 1px solid var(--fc-outline);
    background: var(--fc-surface-high);
    cursor: pointer;
    transition: background 80ms ease, border-color 80ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.pc-chem-level-btn:hover {
    border-color: var(--fc-outline-hover, rgba(255,255,255,0.25));
    background: rgba(255,255,255,0.06);
}

.pc-chem-level-btn.is-active {
    background: rgba(56, 189, 248, 0.10);
    border-color: rgba(56, 189, 248, 0.45);
}

/* Chemistry triangle SVG pips */
.pc-chem-pip {
    width: 20px;
    height: 20px;
    display: block;
    overflow: visible;
}

/* Empty pip — dim fill, no stroke (same visual size as filled) */
.pc-chem-pip .cp-off {
    fill: rgba(255, 255, 255, 0.18);
}

/* Filled pip — our blue, half-opacity on inactive buttons */
.pc-chem-pip .cp-on {
    fill: #38bdf8;
    opacity: 0.45;
}

/* Full opacity only on the selected (active) button */
.pc-chem-level-btn.is-active .pc-chem-pip .cp-on {
    opacity: 1;
}

/* AcceleRATE type section headers inside the chemistry grid */
.pc-chem-type-label {
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 6px 2px 2px;
    border-top: 1px solid var(--fc-outline);
}
.pc-chem-type-label:first-child {
    padding-top: 2px;
    border-top: none;
}
.pc-chem-type--explosive { color: #f97316; }
.pc-chem-type--lengthy   { color: #38bdf8; }
.pc-chem-type--controlled { color: var(--fc-muted); }

/* Chemistry style grid items */
.pc-chem-style-item {
    padding: 5px 6px;
    border-radius: 6px;
    border: 1px solid var(--fc-outline);
    background: var(--fc-surface-high);
    cursor: pointer;
    transition: background 80ms ease, border-color 80ms ease;
    text-align: center;
    width: 100%;
}

.pc-chem-style-item:hover {
    border-color: var(--fc-outline-hover, rgba(255,255,255,0.25));
    background: rgba(255,255,255,0.06);
}

.pc-chem-style-item.is-active {
    border-color: rgba(255, 215, 0, 0.4);
    background: rgba(255, 215, 0, 0.08);
}

.pc-chem-style-name {
    font-size: 10px;
    font-weight: 500;
    color: var(--fc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.pc-chem-style-item:hover .pc-chem-style-name {
    color: var(--fc-text);
}

.pc-chem-style-item.is-active .pc-chem-style-name {
    color: var(--fc-secondary);
    font-weight: 700;
}

/* ── Attributes panel ── */
.pc-attrs {
    padding: 0;
}

/* ── Stats summary bar (below attributes grid) ── */
.pc-stats-summary {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: center;
    gap: 0 28px;
    margin-top: 20px;
}

.pc-summary-chem {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.pc-summary-chem-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fc-muted);
    line-height: 1.3;
}

.pc-summary-chem-value {
    font-size: 28px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    color: #4ade80;
    line-height: 1;
}

.pc-summary-bar-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pc-summary-bar-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pc-summary-bar-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--fc-muted);
}

.pc-summary-bar-value {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    color: #4ade80;
}

.pc-summary-bar-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    overflow: hidden;
}

.pc-summary-bar-fill {
    height: 100%;
    background: #4ade80;
    border-radius: 999px;
    transition: width 150ms ease;
}

.pc-summary-bar-range {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--fc-muted);
    font-variant-numeric: tabular-nums;
}

.pc-attrs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 32px;
}

@media (max-width: 900px) {
    .pc-attrs-grid { grid-template-columns: repeat(2, 1fr); }
}

.pc-attr-cat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin: 0 0 6px;
}

.pc-attr-head-right {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

/* Hover diff indicator */
.pc-attr-diff {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    min-width: 24px;
    text-align: right;
}

.pc-attr-diff.is-positive { color: #4ade80; }
.pc-attr-diff.is-negative { color: #f87171; }

.pc-attr-cat-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--fc-text);
}

.pc-attr-agg {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    letter-spacing: 0;
}

/* Group-level progress bar */
.pc-attr-bar {
    height: 4px;
    background: var(--fc-surface-highest);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
}

.pc-attr-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 200ms ease;
}

.pc-attr-bar-fill.is-elite { background: #16a34a; }
.pc-attr-bar-fill.is-high  { background: #86efac; }
.pc-attr-bar-fill.is-mid   { background: #facc15; }
.pc-attr-bar-fill.is-low   { background: crimson; }

.pc-stat-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.pc-stat-label {
    font-size: 12px;
    color: var(--fc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right cell: diff indicator + value, side by side */
.pc-stat-right {
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0;
}

/* Per-stat diff indicator (+3 / -2) shown on chip hover */
.pc-stat-diff {
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    min-width: 20px;
    text-align: right;
    color: transparent; /* hidden when empty */
}
.pc-stat-diff.is-positive { color: #4ade80; }
.pc-stat-diff.is-negative { color: #f87171; }

.pc-stat-value {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    flex-shrink: 0;
    text-align: right;
}

.pc-stat-value.is-elite { color: #16a34a; }   /* 81+  dark green   */
.pc-stat-value.is-high  { color: #86efac; }   /* 71–80 light green */
.pc-stat-value.is-mid   { color: #facc15; }   /* 51–70 yellow      */
.pc-stat-value.is-low   { color: crimson; }   /* ≤50   dark red    */

/* Aggregate values in group headers — same tiers */
.pc-attr-agg.is-elite { color: #16a34a; }
.pc-attr-agg.is-high  { color: #86efac; }
.pc-attr-agg.is-mid   { color: #facc15; }
.pc-attr-agg.is-low   { color: crimson; }


/* ---------- SEO SUMMARY PANEL ---------- */
/* SEO summary panel — visible but styled subtly */
.pc-seo-panel {
    padding: 24px 0;
    border-top: 1px solid var(--fc-outline);
    max-width: 760px;
}

.pc-seo-panel h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--fc-text);
    margin: 0 0 12px;
}

.pc-seo-panel p {
    font-size: 14px;
    color: var(--fc-muted);
    line-height: 1.6;
    margin: 0 0 8px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .pc-content { grid-template-columns: 1fr; }
    .pc-left-panel { order: -1; }
}

@media (max-width: 720px) {
    .pc-hero-grid { grid-template-columns: 1fr; padding: 16px 16px 12px; }
    .pc-card-shell { padding-bottom: 8px; }
    .pc-hero-name { font-size: 36px; }
    .pc-bio-grid { grid-template-columns: repeat(2, 1fr); }
    .pc-attrs-grid { grid-template-columns: 1fr; }
    .pc-versions { padding: 12px 16px 16px; }
}