﻿/* Comparator: one visual identity, continuous scales, readable side-by-side values. */
.comparator-page { --cx-ink:#163e5b; --cx-muted:#6d8191; --cx-line:#dce6ed; color:var(--cx-ink); background:#f4f7fa; padding:0 18px 22px; border-radius:0 0 8px 8px; font-family:var(--font-body,Arial,sans-serif); }
.comparator-page * { box-sizing:border-box; }
.comparator-page h2,.comparator-page h3,.comparator-page h4,.comparator-page p { margin:0; }
.comparator-page h2,.comparator-page h3 { font-family:var(--font-display,Arial,sans-serif); font-weight:600; }
.cx-search-panel { background:white; border:1px solid var(--cx-line); border-radius:9px; padding:20px 24px; margin-bottom:18px; }
.cx-search-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:15px; }
.cx-search-heading small,.cx-stage-title small { font-size:10px; font-weight:700; letter-spacing:1.4px; color:#78909f; }
.cx-search-heading h2 { font-size:28px; line-height:1.3; margin-top:3px; }
.cx-limit { font-size:12px; color:var(--cx-muted); border:1px solid var(--cx-line); padding:6px 12px; border-radius:20px; }
.cx-search-bar { display:flex; gap:10px; }
.comparator-page .cx-search-bar input { flex:1; width:100%; min-width:0; height:46px; padding:10px 16px; border:1px solid #cbd9e3; border-radius:6px; background:#f8fafc; font:inherit; font-size:15px; color:var(--cx-ink); }
.cx-search-bar button { background:#164c75; border:0; border-radius:6px; color:white; font:inherit; font-weight:600; padding:10px 22px; cursor:pointer; }
.cx-search-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; }
.cx-search-results:not(:empty) { margin-top:12px; padding-top:12px; border-top:1px solid #e8eef3; }
.cx-search-result { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid #e3ebf1; border-radius:5px; background:white; color:var(--cx-ink); text-align:left; font:inherit; cursor:pointer; }
.cx-search-result div { display:flex; flex-direction:column; gap:2px; }
.cx-search-result strong { font-size:14px; }
.cx-search-result small { color:var(--cx-muted); font-size:12px; }
.cx-search-result>span { color:#1769aa; font-size:12px; white-space:nowrap; }
.cx-search-result:hover:not(:disabled) { background:#eef5fb; border-color:#a2c5e0; }
.cx-search-result:disabled { opacity:.5; cursor:default; }
.cx-feedback:not(:empty) { padding-top:12px; color:#8a552f; font-size:13px; }
.cx-player-grid { display:grid; grid-template-columns:repeat(var(--players),minmax(0,1fr)); gap:14px; }
.cx-player { min-width:0; border:1px solid var(--cx-line); border-top:3px solid var(--player-color); border-radius:8px; background:white; padding:20px 18px 12px; position:relative; display:flex; flex-direction:column; }
.cx-remove { position:absolute; right:8px; top:7px; border:0; background:transparent; color:#8697a5; font:24px/1 Arial; padding:3px 7px; border-radius:4px; cursor:pointer; }
.cx-remove:hover { color:#bb4c4c; background:#fcf0ef; }
.cx-identity { display:flex; gap:14px; min-height:101px; align-items:center; padding-right:8px; }
.cx-identity img { width:74px; height:95px; object-fit:contain; object-position:center bottom; background:#f4f7fa; border-radius:6px; flex-shrink:0; }
.cx-identity>div { min-width:0; display:flex; flex-direction:column; gap:5px; }
.cx-player-name { font:600 23px/1.12 var(--font-display,Arial,sans-serif); color:var(--cx-ink); text-decoration:none; overflow-wrap:anywhere; }
.cx-player-name:hover { color:var(--player-color); }
.cx-identity span { font-size:13px; line-height:1.35; }
.cx-identity small { color:var(--cx-muted); font-size:11px; line-height:1.3; }
.cx-facts { display:grid; grid-template-columns:1fr 1fr; gap:12px 10px; padding:16px 0; margin-top:12px; border-top:1px solid #e6edf3; }
.cx-facts>div { display:flex; flex-direction:column; gap:4px; }
.cx-facts small,.cx-verdict small { font-size:10px; color:var(--cx-muted); }
.cx-facts strong { font-size:13px; line-height:1.2; font-weight:600; }
.cx-verdict { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px; border-radius:6px; background:#f3f7fa; margin-top:auto; }
.cx-verdict>div { display:flex; flex-direction:column; gap:7px; min-width:0; }
.comparator-page .scout-rating { display:inline-flex; align-items:center; justify-content:center; padding:7px 10px; font-size:12px; line-height:1.2; border-radius:4px; font-weight:600; text-align:center; }
.cx-score { text-align:center; flex-shrink:0; }
.cx-score strong { font:600 29px/1 var(--font-display,Arial,sans-serif); color:var(--cx-ink); }
.cx-card-foot { display:flex; justify-content:space-between; gap:8px; font-size:10px; color:var(--cx-muted); padding-top:12px; }
.cx-card-foot a { color:#54748c; text-decoration:none; }
.cx-add-slot { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:1px dashed #c3d3df; border-radius:8px; min-height:200px; background:#edf3f7; color:#718a9c; }
.cx-add-slot>span { border:1px solid #ccdae4; width:42px; height:42px; border-radius:50%; text-align:center; font:28px/38px Arial; }
.cx-add-slot strong { font-size:15px; font-weight:500; }
.cx-add-slot small { font-size:12px; }
.cx-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px; padding:18px 10px; }
.cx-legend span { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.cx-legend i { width:22px; height:4px; border-radius:3px; }
.comparator-page .cx-tabs { border-bottom:1px solid #ccdce8; background:#eaf1f6; border-radius:8px 8px 0 0; }
.comparator-page .cx-tab { border:0!important; background:transparent!important; padding:16px 20px!important; font:600 16px var(--font-body,Arial,sans-serif); color:#637c90; }
.comparator-page .cx-tab-selected { color:#164b75!important; background:white!important; border-bottom:3px solid #1769aa!important; }
.cx-filters { display:flex; gap:14px; flex-wrap:wrap; background:white; padding:18px 20px; border:1px solid var(--cx-line); border-top:0; margin-bottom:20px; border-radius:0 0 7px 7px; align-items:end; }
.comparator-page .cx-control { flex:1 1 190px; min-width:180px; max-width:390px; display:flex; flex-direction:column; gap:7px; }
.cx-control>label { font-size:12px; font-weight:600; color:#4a667c; }
.comparator-page .cx-control>div:not(.cx-segment),.comparator-page .cx-control .Select { width:100%!important; min-width:0; }
.comparator-page .cx-control .Select-control { height:40px; background:#f8fafc; border-color:#cedce7; border-radius:5px; }
.comparator-page .cx-control .Select-value,.comparator-page .cx-control .Select-placeholder { line-height:38px!important; font-size:13px; }
.comparator-page .cx-control .Select-menu-outer { z-index:30; font-size:13px; }
.cx-segment { display:flex; background:#edf3f8; border:1px solid #cedce7; border-radius:5px; padding:3px; height:40px; }
.cx-segment label { display:flex; align-items:center; justify-content:center; flex:1; padding:5px 12px; color:#58748a; cursor:pointer; font-size:13px; border-radius:3px; }
.cx-segment input { position:absolute; opacity:0; }
.cx-segment label:has(input:checked) { background:#164b75; color:white; }
.cx-segment label:has(input:focus-visible) { outline:2px solid #6ca9d7; }
.cx-stage-title { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:2px 3px 17px; }
.cx-stage-title h2 { font-size:25px; }
.cx-stage-title>span { color:var(--cx-muted); font-size:12px; }
.cx-decisions { display:grid; grid-template-columns:repeat(var(--players),minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.cx-decisions article { padding:16px 18px; border:1px solid var(--cx-line); border-left:3px solid var(--player-color); border-radius:6px; background:white; }
.cx-decisions small { font-size:12px; font-weight:600; color:var(--player-color); }
.cx-decision-line { display:flex; align-items:center; gap:14px; padding:10px 0; justify-content:space-between; }
.cx-decision-line>strong { font:600 34px/1 var(--font-display,Arial,sans-serif); }
.cx-decisions article>span { font-size:11px; color:var(--cx-muted); }
.cx-block { background:white; border:1px solid #d7e3ed; border-radius:8px; overflow:hidden; margin-bottom:18px; }
.cx-block-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; background:#173f5d; color:white; padding:14px 21px; }
.cx-block-heading h3 { font-size:22px; line-height:1.1; }
.cx-block-heading span { font-size:12px; color:#c8d9e7; }
.cx-block-body { display:grid; grid-template-columns:minmax(0,45%) minmax(0,55%); align-items:center; }
.cx-chart { min-width:0; padding:8px 0; }
.cx-table-wrap { overflow-x:auto; padding:18px 24px 18px 10px; min-width:0; }
.cx-table-wrap table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; table-layout:fixed; }
.cx-table-wrap thead th { padding:12px 8px; border-bottom:2px solid #dce6ee; font-size:12px; font-weight:600; vertical-align:bottom; }
.cx-table-wrap th:first-child { width:36%; }
.cx-table-wrap tbody th,.cx-table-wrap tbody td { border-bottom:1px solid #e8eef3; padding:13px 8px; }
.cx-table-wrap tbody th { font-weight:500; color:#355570; line-height:1.35; }
.cx-table-wrap th small { display:block; font-weight:400; font-size:10px; color:#8b9da9; margin-top:3px; }
.cx-table-wrap tr:last-child th,.cx-table-wrap tr:last-child td { border-bottom:0; }
.cx-table-wrap tbody tr:hover { background:#f6f9fc; }
.cx-value strong { font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.cx-cell-track { height:3px; background:#eef2f6; margin-top:7px; border-radius:2px; overflow:hidden; }
.cx-cell-track i { display:block; height:100%; border-radius:2px; opacity:.75; }
.comparator-page .cx-method { font-size:11px; line-height:1.5; color:#758d9f; padding:12px 20px; }
.cx-block>.cx-method { background:#f8fafc; border-top:1px solid #edf2f6; }
.cx-table-only { grid-template-columns:1fr; }
.cx-table-only .cx-table-wrap { padding:16px 24px; }
.cx-coverage { display:grid; grid-template-columns:repeat(var(--players),minmax(0,1fr)); margin-bottom:16px; background:white; border:1px solid var(--cx-line); border-radius:6px; padding:15px 6px; }
.cx-coverage>div { padding:0 16px; display:flex; flex-direction:column; gap:5px; border-right:1px solid #e6edf3; }
.cx-coverage>div:last-child { border:0; }
.cx-coverage strong { font-size:13px; }
.cx-coverage span { font-size:12px; }
.cx-coverage small { font-size:11px; color:var(--cx-muted); }
.cx-comment-details { background:white; border:1px solid var(--cx-line); border-radius:7px; }
.cx-comment-details summary { padding:17px 20px; font-size:15px; font-weight:600; cursor:pointer; }
.cx-comments { display:grid; grid-template-columns:repeat(var(--players),minmax(0,1fr)); gap:20px; padding:0 20px 20px; }
.cx-comments article { border-top:3px solid var(--player-color); padding-top:12px; }
.cx-comments h4 { font-size:16px; }
.cx-comments small { display:block; font-size:11px; color:var(--cx-muted); margin:8px 0 16px; }
.cx-comments h5 { font-size:12px; margin:14px 0 7px; color:#58778e; }
.cx-comments p { font-size:14px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.cx-empty { text-align:center; background:white; border:1px solid var(--cx-line); border-radius:8px; padding:50px 20px; color:#7c91a0; }
.cx-empty h3 { font-size:25px; color:#375b75; margin:12px 0 8px; }
.cx-empty p { font-size:14px; }
.cx-empty-symbol { font-size:28px; color:#9bb5c7; }
.comparator-page button:focus-visible,.comparator-page input:focus-visible,.comparator-page a:focus-visible { outline:2px solid #408cc3; outline-offset:3px; }
@media(min-width:1550px) { .cx-identity img { width:90px; height:108px; } .cx-player-name { font-size:27px; } .cx-block-body { grid-template-columns:minmax(0,42%) minmax(0,58%); } }
@media(max-width:1200px) { .cx-player-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .cx-block-body { grid-template-columns:1fr; } .cx-table-wrap { padding:8px 20px 20px; } .cx-chart { max-width:660px; width:100%; margin:auto; } .cx-comments { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .comparator-page { padding:0 8px 15px; } .cx-search-panel { padding:16px; } .cx-search-heading { align-items:start; } .cx-limit { display:none; } .cx-search-bar { flex-direction:column; } .cx-search-results,.cx-player-grid,.cx-decisions,.cx-comments,.cx-coverage { grid-template-columns:1fr; } .cx-add-slot { min-height:90px; } .cx-coverage>div { border:0; padding:8px 12px; } .cx-block-heading h3 { font-size:20px; } .cx-block-heading span { max-width:40%; } .cx-table-wrap table { min-width:500px; } .cx-stage-title { flex-wrap:wrap; } .comparator-page .cx-tab { padding:13px 9px!important; font-size:14px; } }
/* Compact identity cards leave the analysis as the main focus. */
.cx-facts { grid-template-columns:repeat(4,minmax(0,1fr)); }
.cx-player-grid:has(>.cx-player:nth-child(3)) .cx-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cx-card-foot { margin-top:auto; border-top:1px solid #edf2f6; }
.cx-decision-score { display:flex; flex-direction:column; gap:5px; }
.cx-decision-score>strong { font:600 38px/1 var(--font-display,Arial,sans-serif); }
.cx-decision-score>small,.cx-decision-rating>small { font-size:10px; color:var(--cx-muted); font-weight:400; }
.cx-decision-rating { display:flex; flex-direction:column; align-items:end; gap:6px; }
.comparator-page .cx-decision-rating .scout-rating { font-size:15px; min-width:135px; padding:10px 16px; }
.cx-detail-heading { display:flex; align-items:center; gap:16px; padding:8px 3px 14px; }
.cx-detail-heading h3 { font-size:23px; }
.cx-detail-heading span { color:var(--cx-muted); font-size:12px; }
.cx-area-details { border:1px solid #d7e3ed; border-radius:7px; background:white; margin-bottom:10px; overflow:hidden; }
.cx-area-details>summary { padding:15px 20px; cursor:pointer; font-size:15px; font-weight:600; color:#274e6a; }
.cx-area-details>summary small { float:right; font-size:11px; font-weight:400; color:#7d94a5; }
.cx-area-details[open]>summary { background:#edf4f9; border-bottom:1px solid #d7e3ed; }
.cx-area-details>.cx-block { margin:0; border:0; border-radius:0; }
.cx-area-details .cx-block-heading { display:none; }
.cx-comment-details { margin-top:22px; }
@media(max-width:1200px) { .cx-facts { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .cx-detail-heading { flex-direction:column; align-items:start; gap:5px; } }
.comparator-page .cx-tabs { flex-direction:row!important; }
.comparator-page .cx-tab { flex:1; }
/* Scouting: full-width controls and compact decisions. */
.comparator-page .cx-control { max-width:none; }
.cx-scouting-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 2px 10px; }
.cx-scouting-heading h2 { font-size:21px; line-height:1.2; }
.cx-scouting-heading>span { font-size:11px; color:var(--cx-muted); }
.cx-decisions { gap:12px; margin-bottom:16px; }
.cx-decisions article { padding:10px 14px; }
.cx-decision-player { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.cx-decision-player strong { min-width:0; color:var(--player-color); font-size:13px; line-height:1.25; }
.cx-decision-player small { flex-shrink:0; font-size:10px; font-weight:400; color:var(--cx-muted); }
.cx-decision-line { padding:8px 0 0; gap:10px; }
.cx-decision-score { flex-direction:row; align-items:baseline; gap:7px; }
.cx-decision-score>strong { font-size:30px; }
.cx-decision-score>small { font-size:10px; }
.cx-decision-rating { gap:3px; }
.comparator-page .cx-decision-rating .scout-rating { min-width:0; font-size:13px; padding:6px 12px; }
/* Plotly responsive mode discards figure.height. Reserve actual DOM space,
   including when a details panel starts closed, so the SVG cannot overflow. */
.comparator-page .cx-chart { height:436px; min-height:436px; position:relative; align-self:center; }
.comparator-page .cx-radar-graph { display:block; position:relative; width:100%; height:420px; min-width:0; }
.comparator-page .cx-block-body { min-width:0; }
@media(max-width:850px) { .cx-decision-line { flex-wrap:wrap; } }
/* Scouting areas: title band, radar, then the comparison table. */
.cx-scout-area-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
.cx-scout-area-grid:empty { display:none; }
.cx-scout-area-grid .cx-block { min-width:0; margin-bottom:16px; }
.cx-block--stacked .cx-block-heading { justify-content:center; text-align:center; padding:13px 16px; }
.cx-block--stacked .cx-block-heading h3 { font-size:22px; }
.comparator-page .cx-block--stacked .cx-block-body { display:flex; flex-direction:column; align-items:stretch; }
.comparator-page .cx-block--stacked .cx-chart { width:100%; max-width:none; height:376px; min-height:376px; margin:0; padding:8px 0; }
.comparator-page .cx-block--stacked .cx-radar-graph { height:360px; }
.cx-block--stacked .cx-table-wrap { padding:0 12px 12px; border-top:1px solid #e6edf3; }
.cx-block--stacked .cx-table-wrap table { font-size:12px; }
.cx-block--stacked .cx-table-wrap th:first-child { width:32%; }
.cx-block--stacked .cx-table-wrap thead th { font-size:11px; overflow-wrap:anywhere; padding:12px 5px; }
.cx-block--stacked .cx-table-wrap tbody th,.cx-block--stacked .cx-table-wrap tbody td { padding:10px 5px; }
.cx-block--stacked .cx-value strong { font-size:14px; }
.comparator-page .cx-block--stacked .cx-method { padding:10px 14px; font-size:10px; }
.cx-area-empty { padding:30px 16px; color:#7d91a1; font-size:13px; text-align:center; }
@media(max-width:1200px) { .cx-scout-area-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:850px) { .cx-scout-area-grid { grid-template-columns:1fr; } }
@media(max-width:700px) { .cx-block--stacked .cx-table-wrap table { min-width:0; } }
/* Equal area cards without stretching Plotly; ABP spans the full grid. */
.cx-scout-area-grid { align-items:stretch; }
.cx-scout-area-grid>.cx-block { display:flex; flex-direction:column; }
.comparator-page .cx-scout-area-grid>.cx-block>.cx-method { margin-top:auto; }
.cx-scout-area-grid>.cx-block--full { grid-column:1 / -1; }
.cx-block--full .cx-block-heading { justify-content:center; }
.cx-value-box { padding:6px 7px; border:1px solid transparent; border-radius:5px; }
.cx-value-box--best { background:#e8f5ee; border-color:#afd9bf; color:#17693d; }
.cx-value-box--worst { background:#fceeee; border-color:#e8b9b9; color:#a52f36; }
.comparator-page .cx-league-percentile { display:inline-block; margin-left:8px; color:#7e919e; font-size:11px; font-weight:400; }
.comparator-page .cx-reference-range { color:#8a9aa7; font-size:10px; margin-top:3px; }
.comparator-page .cx-outside-range { display:block; color:#788898; font-size:10px; font-weight:400; margin-top:3px; }
.cx-value-box--best .cx-cell-track,.cx-value-box--worst .cx-cell-track { background:rgba(255,255,255,.65); }
.cx-comparison-key { display:flex; align-items:center; gap:7px; }
.cx-value-key { display:inline-block; border:1px solid; padding:4px 9px; border-radius:4px; font-size:11px; }
.comparator-page .cx-block-body.cx-table-only { grid-template-columns:minmax(0,1fr); }
.cx-comparison-key .cx-value-box--best { color:#17693d; border-color:#afd9bf; }
.cx-comparison-key .cx-value-box--worst { color:#a52f36; border-color:#e8b9b9; }
/* Keep the reading key within its own card, not between independent panels. */
.cx-comparison-key--inside { justify-content:flex-end; flex-wrap:wrap; padding:10px 16px 0; }
.cx-player-minutes:empty { display:none; }
.cx-player-minutes { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; padding:8px 0; border-top:1px solid #edf2f6; }
.cx-player-minutes strong { font-size:14px; color:#204b69; }
.cx-player-minutes small { font-size:11px; color:#70889c; }
.cx-stats-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 22px; color:white; background:#163f5d; border-radius:7px 7px 0 0; }
.cx-stats-heading small { font-size:10px; letter-spacing:.09em; color:#c3d6e5; }
.cx-stats-heading h2 { color:white; font-size:27px; margin:3px 0 0; }
.cx-stats-heading>span { font-size:12px; color:#dae5ee; text-align:right; }
.cx-stats-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:14px; }
.cx-statistics>.cx-stats-pair { padding:14px; border:1px solid #d7e3ed; border-top:0; border-radius:0 0 7px 7px; background:#eef3f7; margin-bottom:18px; }
.cx-stats-pair>.cx-block { min-width:0; margin:0; display:flex; flex-direction:column; }
.cx-stats-pair>.cx-block>.cx-method { margin-top:auto; }
.cx-stats-pair .cx-block-heading { background:#edf3f8; color:#163f5d; border-bottom:1px solid #d7e3ed; }
.cx-stats-pair .cx-block-heading h3 { color:#163f5d; font-size:24px; }
.cx-stats-pair .cx-table-wrap table { font-size:13px; }
.cx-stats-pair .cx-table-wrap tbody th,.cx-stats-pair .cx-table-wrap tbody td { padding:7px 5px; }
.cx-stats-pair .cx-value strong { font-size:16px; }
.cx-stats-pair .cx-cell-track { height:3px; margin-top:6px; }
.cx-stats-areas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:start; }
.cx-stats-area { margin:0; min-width:0; }
.cx-stats-area[open] { grid-column:1/-1; }
.comparator-page .cx-stats-area>summary { background:#1b4562; color:white; padding:15px 18px; font-size:16px; }
.comparator-page .cx-stats-area>summary small { color:#d0e0ec; font-size:11px; }
.cx-stats-area>.cx-stats-pair { padding:14px; background:#f4f7fa; }
.comparator-page .cx-stats-area .cx-block-heading { display:flex; }
.cx-statistics .cx-detail-heading { justify-content:space-between; }
@media(max-width:950px) { .cx-stats-pair,.cx-stats-areas { grid-template-columns:1fr; } }
@media(max-width:700px) { .cx-stats-heading { align-items:flex-start; flex-direction:column; } .cx-statistics>.cx-stats-pair,.cx-stats-area>.cx-stats-pair { padding:7px; } }

/* Compact scouting marks: colour wraps the number, without a duplicate bar. */
.cx-block--scouting .cx-value-box { display:inline-flex; align-items:center; justify-content:center; padding:3px 6px; border-radius:4px; line-height:1.2; }
.cx-block--scouting .cx-table-wrap tbody th,.cx-block--scouting .cx-table-wrap tbody td { padding:6px 5px; vertical-align:middle; }
.cx-block--scouting .cx-value strong { font-size:14px; }

/* Align each player's heading and values on the same column centre. */
.comparator-page .cx-table-wrap thead th:not(:first-child),
.comparator-page .cx-table-wrap tbody td { text-align:center; }
.comparator-page .cx-table-wrap thead th:first-child,
.comparator-page .cx-table-wrap tbody th { text-align:left; }
.comparator-page .cx-block--scouting .cx-table-wrap tbody th,
.comparator-page .cx-block--scouting .cx-table-wrap tbody td { padding:4px 6px; }
.comparator-page .cx-block--scouting .cx-table-wrap thead th { padding:9px 6px; }
.comparator-page .cx-block--scouting .cx-value-box { padding:3px 6px; }
.comparator-page .cx-block--scouting .cx-table-wrap tbody tr:hover { background:#f4f8fb; }
.comparator-page .cx-block--scouting .cx-table-wrap { padding-bottom:10px; }
.comparator-page .cx-chart { background:linear-gradient(180deg,#ffffff,#f9fbfd); border-radius:8px; }

/* Keep the complete radar and its player key visible at every card size. */
.comparator-page .cx-chart { height:476px; min-height:476px; }
.comparator-page .cx-radar-graph { height:460px; }
.comparator-page .cx-block--stacked .cx-chart { height:416px; min-height:416px; }
.comparator-page .cx-block--stacked .cx-radar-graph { height:400px; }

/* Face-to-face readings. Values stay legible over a shared, proportional fill. */
.comparator-page .cx-physical>.cx-block>.cx-block-body{align-items:start}
.comparator-page .cx-capacity-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:6px 8px;border:0;border-radius:4px;background:transparent;color:#234f6f;font:inherit;font-weight:600;cursor:pointer}
.comparator-page .cx-capacity-toggle:hover,.comparator-page .cx-capacity-toggle[aria-expanded="true"]{background:#eaf1f6;color:#123e60}
.comparator-page .cx-capacity-toggle:focus-visible{outline:2px solid #357cac;outline-offset:2px}
.comparator-page .cx-capacity-toggle-icon{font-size:16px;font-weight:400;color:#728c9f;line-height:1}
.comparator-page .cx-capacity-detail-row[hidden]{display:none!important}
.comparator-page .cx-physical .cx-capacity-detail-row>td{padding:0!important;background:#f6f9fb;border-bottom:1px solid #cedee9}
.comparator-page .cx-capacity-inline{padding:5px 0 9px;box-shadow:inset 3px 0 #bfd1df}
.comparator-page .cx-capacity-inline .cx-bars-wrap{padding:0}
.comparator-page .cx-capacity-inline .cx-metric-label{font-size:11px;font-weight:400}
.comparator-page .cx-capacity-inline .cx-bar-meter{min-height:27px}
.comparator-page .cx-capacity-inline .cx-bar-meter strong{font-size:13px}
.comparator-page .cx-physical .cx-global-row{background:#eef3f7}
.comparator-page .cx-physical .cx-global-row .cx-metric-label{font-weight:700;color:#163f5d;font-size:14px}
.comparator-page .cx-bars-wrap{padding:12px 16px 16px;align-self:stretch}
.comparator-page .cx-bar-table{table-layout:fixed;min-width:0;font-size:13px}
.comparator-page .cx-bar-table--mirrored th:first-child{width:auto}
.comparator-page .cx-bar-table thead th{padding:10px 5px 13px;text-align:center!important;vertical-align:middle;border-bottom:1px solid #dce6ed}
.comparator-page .cx-table-player{display:flex;align-items:center;justify-content:center;gap:7px;min-height:35px;color:var(--player-color);font-size:12px;line-height:1.3;font-weight:600}
.comparator-page .cx-table-player img{width:27px;height:32px;object-fit:contain;object-position:center bottom;border-radius:4px;background:#f3f6f8;flex-shrink:0}
.comparator-page .cx-table-player span{overflow-wrap:anywhere}
.comparator-page .cx-bar-table .cx-metric-heading{color:#8a9aa8;font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.comparator-page .cx-bar-table tbody td,.comparator-page .cx-bar-table tbody th{padding:6px 5px!important;vertical-align:middle;border-bottom:1px solid #edf1f4}
.comparator-page .cx-bar-table .cx-metric-label{text-align:center;color:#35516b;font-size:12px;font-weight:500;line-height:1.3}
.comparator-page .cx-bar-table .cx-metric-label>small{margin-top:2px;font-size:9px;color:#8899a7;line-height:1.2}
.comparator-page .cx-bar-table tbody tr:hover{background:#f8fafb}
.comparator-page .cx-bar-cell{border:0;border-radius:0;background:transparent;color:#526579;min-width:0}
.comparator-page .cx-bar-meter{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;min-height:30px;padding:4px 9px;background:#f0f4f2;border-radius:5px;line-height:1.2}
.comparator-page .cx-bar-fill{position:absolute;left:0;top:0;bottom:0;z-index:-1;display:block;background:linear-gradient(90deg,#c5cfd7,#e3e8ec);border-radius:4px;max-width:100%}
.comparator-page .cx-bar-meter strong{font-family:var(--font-body,Arial,sans-serif);font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.comparator-page .cx-bar-cell--left .cx-bar-meter{justify-content:flex-end}
.comparator-page .cx-bar-cell--left .cx-bar-fill{left:auto;right:0;background:linear-gradient(90deg,#e3e8ec,#c5cfd7)}
.comparator-page .cx-bar-cell.cx-value-box--best .cx-bar-meter{color:#115b3d}
.comparator-page .cx-bar-cell.cx-value-box--best .cx-bar-fill{background:linear-gradient(90deg,#64ba90,#bce1ca)}
.comparator-page .cx-bar-cell--left.cx-value-box--best .cx-bar-fill{background:linear-gradient(90deg,#bce1ca,#64ba90)}
.comparator-page .cx-bar-cell.cx-value-box--worst .cx-bar-meter{color:#8f343a;background:#f8f1f1}
.comparator-page .cx-bar-cell.cx-value-box--worst .cx-bar-fill{background:linear-gradient(90deg,#dc8e95,#f0ced1)}
.comparator-page .cx-bar-cell--left.cx-value-box--worst .cx-bar-fill{background:linear-gradient(90deg,#f0ced1,#dc8e95)}
.comparator-page .cx-bar-meter.is-missing{background:#f6f8f9;color:#a4afb7}
.comparator-page .cx-bar-context{display:flex;align-items:center;gap:6px;min-height:15px;padding:3px 4px 0;color:#879b90;font-size:9px;line-height:1.2}
.comparator-page .cx-bar-cell--left .cx-bar-context{justify-content:flex-end}
.comparator-page .cx-bar-context .cx-league-percentile{font-size:9px;color:#7c9488;font-weight:400}
.comparator-page .cx-bar-context .cx-outside-range{font-size:9px;color:#8b7b58}
.comparator-page .cx-bar-table--multi .cx-metric-label{text-align:left}
.comparator-page .cx-bar-table--multi th:first-child{width:28%}
.comparator-page .cx-bar-table--multi .cx-bar-meter{justify-content:center}
.comparator-page .cx-bar-table--multi .cx-bar-context{justify-content:center}
.comparator-page .cx-block--stacked .cx-bars-wrap{padding:0 9px 12px}
.comparator-page .cx-block--stacked .cx-bar-table .cx-metric-label{font-size:11px}
.comparator-page .cx-block--stacked .cx-bar-meter{min-height:29px;padding:4px 7px}
.comparator-page .cx-block--stacked .cx-bar-meter strong{font-size:14px}
@media(max-width:700px){.comparator-page .cx-bars-wrap{padding:8px}.comparator-page .cx-bar-table--multi{min-width:460px}.comparator-page .cx-table-player{font-size:11px}.comparator-page .cx-table-player img{display:none}.comparator-page .cx-bar-meter{padding:4px 6px}.comparator-page .cx-bar-table .cx-metric-label{font-size:11px}}
