/* ==========================================================================
   BATTLE MVP — profile v7 (rev.2)
   File: assets/profile-v7.css
   Namespace: .pv7-*   (no overlap with .cc-* / .hx-*)

   rev.2 fixes
     - hex + progress track were invisible on dark (border was 16% white)
     - online dot sat half outside the avatar circle (needs r*(1-1/V2) inset)
     - hero had ~700px of dead space (middle column was a bare 1fr)
     - empty state ate 350px for four lines of text
     - pending slots: dimmed, dashed, em dash + caption. Never a zero.
   ========================================================================== */

.pv7 {
  --pv7-card:   #0c1218;
  --pv7-line:   color-mix(in srgb, #eaf1ff 10%, transparent);
  --pv7-line-2: color-mix(in srgb, #eaf1ff 22%, transparent);
  --pv7-acc:    #00ffa6;
  --pv7-text:   #eaf1ff;
  --pv7-dim:    color-mix(in srgb, #eaf1ff 58%, transparent);
  --pv7-faint:  color-mix(in srgb, #eaf1ff 38%, transparent);
  --pv7-ghost:  color-mix(in srgb, #eaf1ff 26%, transparent);
  --pv7-r:      12px;

  color: var(--pv7-text);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2px 0 32px;
}
.pv7 *, .pv7 *::before, .pv7 *::after { box-sizing: border-box; }

.pv7-card {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--pv7-card) 94%, #ffffff 6%),
              var(--pv7-card));
  border: 1px solid var(--pv7-line);
  border-radius: var(--pv7-r);
  position: relative;
}

/* ==========================================================================
   HERO — compact. Identity is capped so the rating block stays adjacent
   instead of being flung to the far edge by a bare 1fr.
   ========================================================================== */
.pv7-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  overflow: hidden;
  flex-wrap: wrap;
}
.pv7-hero::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 180px at 8% 0%,
    color-mix(in srgb, var(--rank-color, var(--pv7-acc)) 12%, transparent), transparent 72%);
}
.pv7-hero > * { position: relative; z-index: 1; }

/* ---------- avatar ---------- */
.pv7-ava {
  --s: 92px;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  position: relative; flex: none;
  background: #060d14;
  border: 2px solid color-mix(in srgb, var(--rank-color, var(--pv7-acc)) 65%, transparent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--rank-color, var(--pv7-acc)) 7%, transparent),
              0 0 22px color-mix(in srgb, var(--rank-color, var(--pv7-acc)) 22%, transparent);
}
.pv7-ava img,
.pv7-ava .pv7-ava-fallback {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: block; object-fit: cover;
}
.pv7-ava-fallback {
  display: grid; place-items: center;
  font: 700 28px/1 system-ui, sans-serif;
  color: color-mix(in srgb, var(--pv7-text) 38%, transparent);
}
/* 45-degree point of a circle: inset = r * (1 - 1/sqrt2) ~= 0.146 * diameter */
.pv7-dot {
  position: absolute;
  right: calc(var(--s) * 0.09);
  bottom: calc(var(--s) * 0.09);
  width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--pv7-card);
  background: #46545f;
}
.pv7-dot.is-on { background: var(--pv7-acc); box-shadow: 0 0 10px var(--pv7-acc); }

/* ---------- identity ---------- */
.pv7-id { min-width: 220px; flex: 0 1 auto; }
.pv7-name-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 7px;
}
.pv7-name {
  margin: 0;
  font: 700 25px/1.15 system-ui, sans-serif;
  letter-spacing: .3px; overflow-wrap: anywhere;
}
.pv7-status {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 10px/1 system-ui, sans-serif;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--pv7-faint);
}
.pv7-status.is-on { color: var(--pv7-acc); }
.pv7-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.pv7-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pv7-meta span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--pv7-line);
  background: color-mix(in srgb, #ffffff 3%, transparent);
  font: 500 11px/1 system-ui, sans-serif;
  color: var(--pv7-dim);
}
.pv7-meta b { color: var(--pv7-text); font-weight: 600; }

.pv7-spacer { flex: 1 1 24px; min-width: 0; }

/* ---------- rating ---------- */
.pv7-rating {
  flex: 0 0 auto;
  min-width: 280px;
  padding: 13px 16px;
  border: 1px solid var(--pv7-line);
  border-radius: 10px;
  background: color-mix(in srgb, #ffffff 3%, transparent);
}
.pv7-rating-top { display: flex; align-items: center; gap: 12px; }
.pv7-rating-top + .pv7-bar { margin-top: 11px; }

.pv7-hex {
  width: 46px; height: 52px; flex: none;
  display: grid; place-items: center;
  font: 700 17px/1 system-ui, sans-serif;
  color: var(--rank-color, var(--pv7-acc));
  background: color-mix(in srgb, var(--rank-color, var(--pv7-acc)) 14%, transparent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
/* clip-path kills borders, so the outline is a wrapper ring instead */
.pv7-hex-wrap {
  flex: none; padding: 2px;
  background: color-mix(in srgb, var(--rank-color, var(--pv7-acc)) 42%, transparent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.pv7-hex-wrap.is-empty { background: var(--pv7-line-2); }
.pv7-hex-wrap.is-empty .pv7-hex {
  color: var(--pv7-ghost);
  background: #0a1017;
  font-size: 15px;
}

.pv7-rating-label { font: 700 14px/1.3 system-ui, sans-serif; margin-bottom: 2px; }
.pv7-rating-sub   { font: 500 11px/1.4 system-ui, sans-serif; color: var(--pv7-dim); }

/* track must read as an empty bar, not as absence of a bar */
.pv7-bar {
  height: 6px; border-radius: 999px;
  background: color-mix(in srgb, #eaf1ff 14%, transparent);
  border: 1px solid color-mix(in srgb, #eaf1ff 8%, transparent);
  overflow: hidden;
}
.pv7-bar > i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--rank-color, var(--pv7-acc)) 50%, transparent),
    var(--rank-color, var(--pv7-acc)));
  box-shadow: 0 0 10px color-mix(in srgb, var(--rank-color, var(--pv7-acc)) 45%, transparent);
}
.pv7-bar-legend {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 6px;
  font: 500 10px/1.3 system-ui, sans-serif;
  color: var(--pv7-faint);
}
.pv7-bar-legend b { color: var(--pv7-text); font-weight: 600; }

/* ==========================================================================
   SECTION HEAD
   ========================================================================== */
.pv7-sec {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin: 4px 2px -2px;
}
.pv7-sec h2 {
  margin: 0;
  font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
}
.pv7-sec small { font: 500 11px/1 system-ui, sans-serif; color: var(--pv7-faint); }
.pv7-sample {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px dashed var(--pv7-line-2);
  font: 500 10px/1 system-ui, sans-serif; color: var(--pv7-faint);
}

/* ==========================================================================
   KPI GRID
   ========================================================================== */
.pv7-kpis {
  display: grid;
  /* auto-fill + a hard ceiling: tiles keep their size instead of stretching
     into wide empty rectangles when only a few of them exist */
  grid-template-columns: repeat(auto-fill, minmax(140px, 186px));
  justify-content: start;
  gap: 10px;
}
.pv7-kpi {
  padding: 12px 13px;
  display: flex; flex-direction: column; gap: 3px;
  min-height: 84px;
  transition: border-color .16s ease, transform .16s ease;
}
.pv7-kpi:hover {
  border-color: color-mix(in srgb, var(--pv7-acc) 30%, transparent);
  transform: translateY(-2px);
}
.pv7-kpi-k {
  font: 600 9.5px/1 system-ui, sans-serif;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--pv7-faint);
}
.pv7-kpi-v {
  font: 700 23px/1.1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--pv7-text);
}
.pv7-kpi-s { font: 500 10.5px/1.35 system-ui, sans-serif; color: var(--pv7-dim); }
.pv7-kpi.is-accent .pv7-kpi-v { color: var(--pv7-acc); }

/* ---------- pending slot: structure without a claim ---------- */
.pv7-kpi.is-pending {
  border-style: dashed;
  border-color: color-mix(in srgb, #eaf1ff 13%, transparent);
  background: color-mix(in srgb, #ffffff 1.5%, transparent);
}
.pv7-kpi.is-pending:hover { transform: none; border-color: color-mix(in srgb, #eaf1ff 18%, transparent); }
.pv7-kpi.is-pending .pv7-kpi-k { color: var(--pv7-ghost); }
.pv7-kpi.is-pending .pv7-kpi-v { color: var(--pv7-ghost); font-weight: 600; }
.pv7-kpi.is-pending .pv7-kpi-s { color: var(--pv7-ghost); font-style: italic; }

/* ---------- note above a pending grid ---------- */
.pv7-note {
  max-width: 760px;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px dashed var(--pv7-line-2);
  background: color-mix(in srgb, #ffffff 2%, transparent);
}
.pv7-note-mark {
  flex: none; width: 26px; height: 30px;
  display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: color-mix(in srgb, #eaf1ff 10%, transparent);
  color: var(--pv7-faint);
  font: 700 13px/1 system-ui, sans-serif;
}
.pv7-note-b { min-width: 0; }
.pv7-note-t {
  font: 700 12.5px/1.4 system-ui, sans-serif;
  margin-bottom: 3px;
}
.pv7-note-p {
  margin: 0; font: 400 11.5px/1.55 system-ui, sans-serif;
  color: var(--pv7-dim); max-width: 78ch;
}
.pv7-cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 9px; padding: 9px 18px; border-radius: 9px;
  background: var(--pv7-acc); color: #04140d;
  font: 700 12px/1 system-ui, sans-serif; text-decoration: none;
  transition: filter .16s ease;
}
.pv7-cta:hover { filter: brightness(1.1); }

/* ==========================================================================
   WEAPON TABLE
   Columns with no source (accuracy when shots=0) are not rendered at all.
   ========================================================================== */
.pv7-wt-wrap { padding: 4px 4px 6px; overflow-x: auto; }
.pv7-wt {
  width: 100%; border-collapse: collapse;
  font: 500 12px/1 system-ui, sans-serif;
}
.pv7-wt th {
  text-align: left; padding: 9px 12px;
  font: 600 9.5px/1 system-ui, sans-serif;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--pv7-faint);
  border-bottom: 1px solid var(--pv7-line);
  white-space: nowrap;
}
.pv7-wt td {
  padding: 11px 12px;
  border-bottom: 1px solid color-mix(in srgb, #eaf1ff 5%, transparent);
  font-variant-numeric: tabular-nums;
  color: var(--pv7-text);
  white-space: nowrap;
}
.pv7-wt tr:last-child td { border-bottom: 0; }
.pv7-wt tbody tr:hover td { background: color-mix(in srgb, #ffffff 2.5%, transparent); }
.pv7-wt .pv7-wt-name { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pv7-wt .pv7-wt-k { color: var(--pv7-acc); font-weight: 700; }
.pv7-wt .num { text-align: right; }

/* inline bar inside a table cell */
.pv7-mini {
  display: inline-block; vertical-align: middle;
  width: 74px; height: 5px; border-radius: 999px;
  background: color-mix(in srgb, #eaf1ff 12%, transparent);
  margin-left: 10px; overflow: hidden;
}
.pv7-mini > i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--pv7-acc);
}

/* provenance chip - says WHERE a block's numbers come from */
.pv7-src {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--pv7-line);
  background: color-mix(in srgb, #ffffff 3%, transparent);
  font: 500 10px/1 system-ui, sans-serif;
  color: var(--pv7-dim);
}

/* ==========================================================================
   MOVEMENT
   ========================================================================== */
.pv7-mv-top {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 13px 14px 3px;
}
.pv7-chip {
  display: inline-flex; flex-direction: column; gap: 3px;
  padding: 9px 14px; border-radius: 9px;
  border: 1px solid var(--pv7-line);
  background: color-mix(in srgb, #ffffff 3%, transparent);
  min-width: 106px;
}
.pv7-chip-k {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--pv7-faint);
}
.pv7-chip-v {
  font: 700 17px/1.1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.pv7-mode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 6px;
  font: 700 9.5px/1 system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--pv7-line-2);
  color: var(--pv7-dim);
}
.pv7-mode[data-m="bhop"] { color: #6ee7ff; border-color: color-mix(in srgb,#6ee7ff 40%,transparent); }
.pv7-mode[data-m="surf"] { color: #a78bfa; border-color: color-mix(in srgb,#a78bfa 40%,transparent); }
.pv7-mode[data-m="kz"]   { color: var(--pv7-acc); border-color: color-mix(in srgb,#00ffa6 40%,transparent); }
.pv7-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--pv7-acc);
}

/* ==========================================================================
   TABS
   ========================================================================== */
.pv7-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 4px; border-radius: 10px;
  border: 1px solid var(--pv7-line);
  background: color-mix(in srgb, #ffffff 2%, transparent);
}
.pv7-tab {
  display: inline-flex; align-items: center;
  text-decoration: none;
  padding: 9px 15px; border-radius: 7px;
  background: transparent; color: var(--pv7-dim);
  font: 600 11.5px/1 system-ui, sans-serif;
  letter-spacing: .04em;
  transition: background .16s ease, color .16s ease;
}
.pv7-tab:hover { color: var(--pv7-text); background: color-mix(in srgb, #ffffff 4%, transparent); }
.pv7-tab[aria-current="page"] {
  color: #04140d; background: var(--pv7-acc);
}
.pv7-tab[aria-current="page"]:hover { color: #04140d; background: var(--pv7-acc); }
.pv7-tab-n {
  display: inline-block; margin-left: 7px;
  font-weight: 700; opacity: .65;
}
.pv7-panel[hidden] { display: none; }
.pv7-panel { display: flex; flex-direction: column; gap: 14px; }

/* ==========================================================================
   RATING SPARKLINE (SVG, no Chart.js)
   ========================================================================== */
.pv7-spark { padding: 14px 16px; }
.pv7-spark svg { width: 100%; height: 132px; display: block; overflow: visible; }
.pv7-spark .ln { fill: none; stroke: var(--pv7-acc); stroke-width: 2; stroke-linejoin: round; }
.pv7-spark .ar { fill: url(#pv7g); }
.pv7-spark .pt { fill: var(--pv7-acc); }
.pv7-spark .gr { stroke: color-mix(in srgb, #eaf1ff 7%, transparent); stroke-width: 1; }
.pv7-spark .lb {
  fill: var(--pv7-faint);
  font: 500 9px/1 system-ui, sans-serif;
}

/* ==========================================================================
   MATCH ROWS
   ========================================================================== */
.pv7-mrow {
  display: grid;
  grid-template-columns: 4px 1.4fr .8fr .9fr .7fr .7fr auto;
  align-items: center; gap: 12px;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid color-mix(in srgb, #eaf1ff 5%, transparent);
}
.pv7-mrow:last-child { border-bottom: 0; }
.pv7-mrow:hover { background: color-mix(in srgb, #ffffff 2.5%, transparent); }
.pv7-mbar { height: 100%; min-height: 34px; border-radius: 0 3px 3px 0; }
.pv7-mbar.w { background: var(--pv7-acc); }
.pv7-mbar.l { background: #e04d4c; }
.pv7-mmap { font: 600 12.5px/1.3 system-ui, sans-serif; }
.pv7-mmeta { font: 500 10px/1.3 system-ui, sans-serif; color: var(--pv7-faint); margin-top: 2px; }
.pv7-mscore { font: 700 14px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.pv7-mscore.w { color: var(--pv7-acc); }
.pv7-mscore.l { color: #e04d4c; }
.pv7-mkda, .pv7-mnum {
  font: 600 12px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums; color: var(--pv7-dim);
}
.pv7-mdelta {
  font: 700 12px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  padding: 5px 9px; border-radius: 6px; white-space: nowrap;
}
.pv7-mdelta.up { color: var(--pv7-acc); background: color-mix(in srgb,#00ffa6 12%,transparent); }
.pv7-mdelta.dn { color: #e04d4c; background: color-mix(in srgb,#e04d4c 12%,transparent); }
.pv7-mdelta.na { color: var(--pv7-ghost); border: 1px dashed var(--pv7-line-2); }

/* ==========================================================================
   ACTIVITY GRID
   ========================================================================== */
.pv7-act { padding: 14px 16px; }
.pv7-act-grid {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(7, 11px);
  gap: 3px; overflow-x: auto; padding-bottom: 4px;
}
.pv7-act-c {
  width: 11px; height: 11px; border-radius: 2px;
  background: color-mix(in srgb, #eaf1ff 6%, transparent);
}
.pv7-act-c[data-l="1"] { background: color-mix(in srgb, #00ffa6 28%, transparent); }
.pv7-act-c[data-l="2"] { background: color-mix(in srgb, #00ffa6 52%, transparent); }
.pv7-act-c[data-l="3"] { background: color-mix(in srgb, #00ffa6 76%, transparent); }
.pv7-act-c[data-l="4"] { background: var(--pv7-acc); }
.pv7-act-lg {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
  font: 500 10px/1 system-ui, sans-serif; color: var(--pv7-faint);
}

/* ==========================================================================
   GRID HELPERS
   ========================================================================== */
.pv7-2col { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .pv7-2col { grid-template-columns: 1fr; } }

.pv7-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pv7-line);
}
.pv7-hd h3 {
  margin: 0; font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: .13em; text-transform: uppercase;
}
.pv7-hd small { margin-left: auto; font: 500 10px/1 system-ui, sans-serif; color: var(--pv7-faint); }

.pv7-blank {
  padding: 30px 20px; text-align: center;
  font: 500 12px/1.5 system-ui, sans-serif; color: var(--pv7-ghost);
}

/* ==========================================================================
   STAT ROWS (statistics tab)
   ========================================================================== */
.pv7-rows { padding: 6px 4px 10px; }
.pv7-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, #eaf1ff 5%, transparent);
}
.pv7-row:last-child { border-bottom: 0; }
.pv7-row:hover { background: color-mix(in srgb, #ffffff 2.5%, transparent); }
.pv7-row-k { font: 500 12px/1.3 system-ui, sans-serif; color: var(--pv7-dim); }
.pv7-row-v {
  font: 700 13.5px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--pv7-text); white-space: nowrap;
}
.pv7-row-v.is-na { color: var(--pv7-ghost); font-weight: 600; }
.pv7-row-track {
  grid-column: 1 / -1; height: 4px; border-radius: 999px; margin-top: 2px;
  background: color-mix(in srgb, #eaf1ff 8%, transparent); overflow: hidden;
}
.pv7-row-track > i { display: block; height: 100%; background: var(--pv7-acc); border-radius: inherit; }

/* ==========================================================================
   MULTIKILLS — uses the sliced shield art
   ========================================================================== */
.pv7-mks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; padding: 14px;
}
.pv7-mk {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px; border-radius: 10px;
  border: 1px solid var(--pv7-line);
  background: color-mix(in srgb, #ffffff 2.5%, transparent);
}
.pv7-mk img { width: 46px; height: 52px; object-fit: contain; }
/* zero state: dimmed but still legible. grayscale+opacity .28 on a near-black
   card rendered the shields effectively invisible. */
.pv7-mk.is-zero img { filter: grayscale(.85) brightness(1.35); opacity: .5; }
.pv7-mk-v {
  font: 700 20px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.pv7-mk.is-zero .pv7-mk-v { color: var(--pv7-ghost); }
.pv7-mk-k {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: .13em; text-transform: uppercase; color: var(--pv7-faint);
}

/* ==========================================================================
   ACHIEVEMENTS
   ========================================================================== */
.pv7-ach-sum {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px 16px;
}
.pv7-ach-bar {
  flex: 1 1 200px; height: 8px; border-radius: 999px;
  background: color-mix(in srgb, #eaf1ff 10%, transparent); overflow: hidden;
}
.pv7-ach-bar > i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb,#00ffa6 50%,transparent), var(--pv7-acc));
}
.pv7-ach-grp { margin-top: 4px; }
.pv7-ach-grp-t {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 2px 8px;
  font: 700 10px/1 system-ui, sans-serif;
  letter-spacing: .13em; text-transform: uppercase; color: var(--pv7-faint);
}
.pv7-ach-grp-t::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb,#eaf1ff 10%,transparent), transparent);
}
.pv7-ach-list { display: flex; flex-direction: column; gap: 5px; }
.pv7-ach {
  display: grid; grid-template-columns: 34px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.04);
  transition: transform .12s ease-out;
}
.pv7-ach.is-on { border-color: currentColor; }
.pv7-ach.is-off { opacity: .42; }
.pv7-ach:hover { transform: translateX(2px); }
.pv7-ach-ic { font-size: 20px; text-align: center; line-height: 1; }
.pv7-ach-n { font: 700 12.5px/1.3 system-ui, sans-serif; }
.pv7-ach-d { font: 500 10.5px/1.3 system-ui, sans-serif; color: var(--pv7-faint); margin-top: 2px; }
.pv7-ach-r {
  font: 700 8px/1 system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; white-space: nowrap;
}
.pv7-ach-s {
  font: 700 9px/1 system-ui, sans-serif; margin-top: 4px;
  text-align: right; color: var(--pv7-ghost);
}

/* ==========================================================================
   MODE CHIPS
   ========================================================================== */
.pv7-chips { display: inline-flex; gap: 5px; }
.pv7-chip-l {
  display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: 7px; text-decoration: none;
  border: 1px solid var(--pv7-line);
  color: var(--pv7-dim);
  font: 600 11px/1 system-ui, sans-serif;
  transition: color .12s linear, background-color .12s linear;
}
.pv7-chip-l:hover { color: var(--pv7-text); background: color-mix(in srgb,#ffffff 4%,transparent); }
.pv7-chip-l.is-on { color: #04140d; background: var(--pv7-acc); border-color: var(--pv7-acc); }

/* ==========================================================================
   DONUT
   ========================================================================== */
.pv7-donut-wrap {
  display: grid; grid-template-columns: 150px 1fr;
  gap: 18px; align-items: center; padding: 16px;
}
.pv7-donut { width: 150px; height: 150px; display: block; }
.pv7-donut-bg { fill: none; stroke: color-mix(in srgb,#eaf1ff 8%,transparent); stroke-width: 11; }
.pv7-donut-v {
  fill: var(--pv7-text); text-anchor: middle;
  font: 700 15px/1 system-ui, sans-serif;
}
.pv7-donut-k {
  fill: var(--pv7-faint); text-anchor: middle;
  font: 600 6px/1 system-ui, sans-serif; letter-spacing: .18em;
}
.pv7-legend { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pv7-legend-i { display: flex; align-items: center; gap: 9px; }
.pv7-legend-d { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pv7-legend-n { font: 500 12px/1 system-ui, sans-serif; color: var(--pv7-dim); }
.pv7-legend-v {
  margin-left: auto; font: 700 12.5px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pv7-legend-v.is-na { color: var(--pv7-ghost); }
.pv7-legend-v i {
  font-style: normal; font-weight: 500; margin-left: 6px;
  color: var(--pv7-faint); font-size: 11px;
}
@media (max-width: 520px) {
  .pv7-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
}

/* ==========================================================================
   OVERVIEW — 8 KPI cards with icons, 3-column rows, mini cards
   ========================================================================== */
/* KPI GRID 8: auto-fit resolved to 6 columns, leaving 6+2 and four
   empty cells. Eight cards need a divisor of eight. */
.pv7-kpis-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .pv7-kpis-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv7-kpi-ic {
  flex-direction: row; align-items: center; gap: 12px; min-height: 78px;
}
.pv7-kpi-ico {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--pv7-acc) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pv7-acc) 22%, transparent);
  color: var(--pv7-acc); font-size: 19px;
}
.pv7-kpi.is-pending .pv7-kpi-ico {
  background: none; border-color: var(--pv7-line); color: var(--pv7-ghost);
}
.pv7-kpi-b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv7-kpi-ic .pv7-kpi-v { font-size: 21px; }

.pv7-3col {
  display: grid; grid-template-columns: 1.15fr 1fr 1.25fr;
  gap: 14px; align-items: start;
}
@media (max-width: 1250px) { .pv7-3col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px)  { .pv7-3col { grid-template-columns: 1fr; } }

/* compact match row for the overview list */
.pv7-cmp {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid color-mix(in srgb, #eaf1ff 5%, transparent);
}
.pv7-cmp:last-child { border-bottom: 0; }
.pv7-cmp:hover { background: color-mix(in srgb, #ffffff 2.5%, transparent); }
.pv7-cmp-l { min-width: 0; }
.pv7-cmp-r { font: 600 11px/1 system-ui, sans-serif; white-space: nowrap; }
.pv7-cmp-r.w { color: var(--pv7-acc); }
.pv7-cmp-r.l { color: #e04d4c; }
.pv7-cmp-br { text-align: right; }
.pv7-cmp-t { font: 500 9.5px/1 system-ui, sans-serif; color: var(--pv7-faint); margin-top: 4px; }
.pv7-more { color: var(--pv7-acc); text-decoration: none; font-weight: 600; }
.pv7-more:hover { text-decoration: underline; }

/* donut stacked vertically inside a narrow column */
.pv7-donut-col { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
.pv7-donut-col .pv7-legend { width: 100%; }

/* activity with weekday rail */
.pv7-act-row { display: flex; gap: 8px; align-items: flex-start; }
.pv7-act-dows {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 95px; padding: 2px 0;
  font: 500 9px/1 system-ui, sans-serif; color: var(--pv7-faint);
}

/* performance rows put the bar on its own line */
.pv7-row-perf { grid-template-columns: 1fr auto; row-gap: 6px; }

/* mini cards column */
.pv7-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv7-mini-c {
  padding: 16px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.pv7-mini-c i { font-size: 20px; color: var(--pv7-acc); }
.pv7-mini-c.is-pending i { color: var(--pv7-ghost); }
.pv7-mini-v {
  font: 700 20px/1.1 system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.pv7-mini-c.is-pending .pv7-mini-v { color: var(--pv7-ghost); }
.pv7-mini-k {
  font: 600 9px/1.2 system-ui, sans-serif;
  letter-spacing: .11em; text-transform: uppercase; color: var(--pv7-faint);
}

/* ==========================================================================
   STATISTICS — 4-column top row, icon rows, dense KPI
   ========================================================================== */
.pv7-4col {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; align-items: stretch;
}
.pv7-4col > .pv7-card { display: flex; flex-direction: column; }
.pv7-4col > .pv7-card > .pv7-blank { flex: 1; display: grid; place-items: center; }
.pv7-4col .pv7-donut-wrap { flex: 1; align-content: center; }
@media (max-width: 1400px) { .pv7-4col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px)  { .pv7-4col { grid-template-columns: 1fr; } }

.pv7-kpis-st { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pv7-kpis-st .pv7-kpi-ic { min-height: 68px; padding: 10px 12px; }
.pv7-kpis-st .pv7-kpi-ico { width: 34px; height: 34px; font-size: 16px; border-radius: 9px; }
.pv7-kpis-st .pv7-kpi-v { font-size: 18px; }

/* row with a leading icon */
.pv7-row-ic .pv7-row-k { display: flex; align-items: center; gap: 9px; }
.pv7-row-ic .pv7-row-k i { font-size: 14px; color: var(--pv7-faint); flex: none; }

/* inline percentage in front of a value */
.pv7-row-v em {
  font-style: normal; font-weight: 500; font-size: 11px;
  color: var(--pv7-faint); margin-right: 8px;
}

/* provenance chip inside a card header */
.pv7-hd .pv7-src { padding: 3px 8px; font-size: 9px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .pv7-spacer { display: none; }
  .pv7-rating { flex: 1 1 100%; min-width: 0; }
}
@media (max-width: 560px) {
  .pv7-hero { padding: 14px; gap: 14px; }
  .pv7-ava { --s: 72px; }
  .pv7-name { font-size: 21px; }
  .pv7-id { min-width: 0; flex: 1 1 100%; }
  .pv7-kpi-v { font-size: 20px; }
  .pv7-sample { margin-left: 0; }
}

/* ==========================================================================
   rev10.1 — equal card heights across every multi-column row
   Re-applied: a full-file replacement in rev10 dropped the rev9.1 append.
   ========================================================================== */
.pv7-3col, .pv7-2col { align-items: stretch; }
.pv7-3col > .pv7-card, .pv7-2col > .pv7-card { display: flex; flex-direction: column; }
.pv7-3col > .pv7-card > .pv7-blank,
.pv7-2col > .pv7-card > .pv7-blank { flex: 1; display: grid; place-items: center; }
.pv7-3col .pv7-donut-wrap, .pv7-2col .pv7-donut-wrap { flex: 1; align-content: center; }
.pv7-3col .pv7-rows, .pv7-2col .pv7-rows, .pv7-4col .pv7-rows { flex: 1; }
.pv7-minis { align-content: start; }

/* rev10.2 — zero-state shields were dimmed past the point of being readable */
.pv7-mk.is-zero img { filter: grayscale(.55) brightness(1.5); opacity: .72; }

/* ==========================================================================
   rev11 — statistics: two KPI rows, coloured tiles, results split,
   compact multikills. APPEND-ONLY layer.
   ========================================================================== */
.pv7-st-row { display: grid; gap: 10px; }
.pv7-st-5 { grid-template-columns: repeat(5, 1fr); }
.pv7-st-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1250px) { .pv7-st-5, .pv7-st-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .pv7-st-5, .pv7-st-6 { grid-template-columns: repeat(2, 1fr); } }

.pv7-st-t {
  padding: 14px 14px 13px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .12s linear, transform .12s ease-out;
}
.pv7-st-t:hover { transform: translateY(-2px); }
.pv7-st-ico {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; font-size: 15px;
}
.pv7-st-v {
  font: 700 22px/1.05 system-ui, sans-serif;
  font-variant-numeric: tabular-nums; color: var(--pv7-text);
}
.pv7-st-k {
  font: 600 9.5px/1 system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pv7-faint);
}
.pv7-st-t[data-c="g"] .pv7-st-ico { color:#00ffa6; background:color-mix(in srgb,#00ffa6 12%,transparent); border:1px solid color-mix(in srgb,#00ffa6 24%,transparent); }
.pv7-st-t[data-c="r"] .pv7-st-ico { color:#e04d4c; background:color-mix(in srgb,#e04d4c 12%,transparent); border:1px solid color-mix(in srgb,#e04d4c 24%,transparent); }
.pv7-st-t[data-c="b"] .pv7-st-ico { color:#3b82f6; background:color-mix(in srgb,#3b82f6 12%,transparent); border:1px solid color-mix(in srgb,#3b82f6 24%,transparent); }
.pv7-st-t[data-c="y"] .pv7-st-ico { color:#facc15; background:color-mix(in srgb,#facc15 12%,transparent); border:1px solid color-mix(in srgb,#facc15 24%,transparent); }
.pv7-st-t[data-c="o"] .pv7-st-ico { color:#f59e0b; background:color-mix(in srgb,#f59e0b 12%,transparent); border:1px solid color-mix(in srgb,#f59e0b 24%,transparent); }
.pv7-st-t.is-pending { border-style: dashed; border-color: color-mix(in srgb,#eaf1ff 13%,transparent); }
.pv7-st-t.is-pending:hover { transform: none; }
.pv7-st-t.is-pending .pv7-st-v { color: var(--pv7-ghost); font-weight: 600; }
.pv7-st-t.is-pending .pv7-st-ico { color: var(--pv7-ghost) !important; background: none !important; border-color: var(--pv7-line) !important; }

/* match results: chart + counters */
.pv7-res { display: grid; grid-template-columns: 1fr 92px; gap: 12px; padding: 14px 16px; flex: 1; align-items: center; }
.pv7-res-svg { width: 100%; height: 132px; display: block; overflow: visible; }
.pv7-res-svg .gr { stroke: color-mix(in srgb,#eaf1ff 7%,transparent); stroke-width: 1; }
.pv7-res-svg .ln { fill: none; stroke: var(--pv7-acc); stroke-width: 2; stroke-linejoin: round; }
.pv7-res-side { text-align: right; }
.pv7-res-n { font: 700 26px/1.1 system-ui, sans-serif; color: var(--pv7-ghost); font-variant-numeric: tabular-nums; }
.pv7-res-n.w { color: var(--pv7-acc); }
.pv7-res-n.l { color: #e04d4c; }
.pv7-res-l { font: 600 9px/1 system-ui, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: var(--pv7-faint); margin: 2px 0 14px; }

/* compact multikills */
.pv7-mk2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; }
.pv7-mk2-i {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 8px; border-radius: 10px;
  border: 1px solid var(--pv7-line);
  background: color-mix(in srgb,#ffffff 2.5%,transparent);
}
.pv7-mk2-i img { width: 34px; height: 40px; object-fit: contain; }
.pv7-mk2-i.is-zero img { filter: grayscale(.55) brightness(1.5); opacity: .72; }
.pv7-mk2-v { font: 700 19px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.pv7-mk2-i.is-zero .pv7-mk2-v { color: var(--pv7-ghost); }
.pv7-mk2-k { font: 600 8.5px/1.2 system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--pv7-faint); text-align: center; }
@media (max-width: 560px) { .pv7-mk2 { grid-template-columns: repeat(2, 1fr); } }

/* legend: percentage in front of the count, as in the mock */
/* LEGEND GAP: order-independent separator. margin-right only
   worked for percent-first legends and glued value+percent
   together on the overview tab ("770%"). */
.pv7-legend-v { display: inline-flex; align-items: baseline; gap: 8px; }
.pv7-legend-v i { margin: 0; }

/* ==========================================================================
   rev12 — statistics tiles were sized by their content, so an em dash left a
   tall empty box. Fixed height, icon and value on one line. APPEND-ONLY.
   ========================================================================== */
.pv7-st-t {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ico val" "lbl lbl";
  align-items: center;
  gap: 4px 11px;
  padding: 13px 14px;
  min-height: 0;
}
.pv7-st-ico { grid-area: ico; width: 30px; height: 30px; font-size: 14px; }
.pv7-st-v   { grid-area: val; font-size: 21px; text-align: left; }
.pv7-st-k   { grid-area: lbl; margin-top: 2px; }

/* the note inside a card should not keep the 760px cap meant for page width */
.pv7-card > .pv7-note { max-width: none; }

/* ==========================================================================
   rev13 — matches tab: filter bar, 7-tile KPI row, history table, side column
   APPEND-ONLY layer.
   ========================================================================== */
.pv7-filters {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--pv7-line);
  background: color-mix(in srgb, #ffffff 2%, transparent);
}
.pv7-chips-end { margin-left: auto; }
.pv7-chip-l i {
  font-style: normal; margin-left: 6px; opacity: .55; font-size: 10px;
}
.pv7-chip-l.is-on i { opacity: .75; }

.pv7-st-7 { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 1400px) { .pv7-st-7 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 780px)  { .pv7-st-7 { grid-template-columns: repeat(2, 1fr); } }
.pv7-st-s {
  grid-column: 1 / -1;
  font: 500 10px/1.3 system-ui, sans-serif; color: var(--pv7-dim); margin-top: 1px;
}

.pv7-mt-grid {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr);
  gap: 14px; align-items: start;
}
@media (max-width: 1150px) { .pv7-mt-grid { grid-template-columns: 1fr; } }
.pv7-mt-side { display: flex; flex-direction: column; gap: 14px; }

.pv7-mt-t th, .pv7-mt-t td { padding: 9px 11px; vertical-align: middle; }
.pv7-mt-t .pv7-mmap { font-size: 12px; }
.pv7-mt-t .pv7-mmeta { margin-top: 1px; }
.pv7-mvp { color: #f59e0b; font-size: 14px; }
.pv7-dash { color: var(--pv7-ghost); }
.pv7-det {
  display: inline-block; padding: 5px 11px; border-radius: 7px;
  border: 1px solid var(--pv7-line-2); text-decoration: none;
  color: var(--pv7-dim); font: 600 10.5px/1 system-ui, sans-serif;
  transition: color .12s linear, border-color .12s linear;
}
.pv7-det:hover { color: var(--pv7-acc); border-color: color-mix(in srgb,#00ffa6 45%,transparent); }

/* second line on the results chart */
.pv7-spark .ln-l { fill: none; stroke: #e04d4c; stroke-width: 2; stroke-linejoin: round; }
.pv7-bar-legend .pv7-legend-d { display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* best match card */
.pv7-best { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.pv7-best-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pv7-best-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pv7-best-row > div { text-align: center; }
.pv7-best-row b {
  display: block; font: 700 13px/1.2 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.pv7-best-row span {
  display: block; margin-top: 3px;
  font: 600 8.5px/1 system-ui, sans-serif;
  letter-spacing: .11em; text-transform: uppercase; color: var(--pv7-faint);
}
.pv7-row-k .pv7-mmeta { display: inline; margin-left: 8px; }

/* rev13.1 — history card should fill the row height next to the side column */
.pv7-mt-grid { align-items: stretch; }
.pv7-mt-grid > .pv7-card { display: flex; flex-direction: column; }
.pv7-mt-grid > .pv7-card > .pv7-blank { flex: 1; display: grid; place-items: center; }
.pv7-mt-grid > .pv7-card > .pv7-wt-wrap { flex: 1; }

/* ==========================================================================
   rev14 — playstyle tab: radar, role card, strengths/growth. APPEND-ONLY.
   ========================================================================== */
.pv7-radar { display: grid; grid-template-columns: 1fr 150px; gap: 16px; padding: 16px; align-items: center; }
.pv7-radar svg { width: 100%; max-width: 260px; margin: 0 auto; display: block; }
.pv7-radar .rg { fill: none; stroke: color-mix(in srgb,#eaf1ff 9%,transparent); stroke-width: .6; }
.pv7-radar .rp {
  fill: color-mix(in srgb,#00ffa6 18%,transparent);
  stroke: #00ffa6; stroke-width: 1.4; stroke-linejoin: round;
}
.pv7-radar .rd { fill: #00ffa6; }
.pv7-radar-lg { display: flex; flex-direction: column; gap: 7px; }
.pv7-radar-lg > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pv7-radar-lg span { font: 500 11.5px/1 system-ui, sans-serif; color: var(--pv7-dim); }
.pv7-radar-lg b { font: 700 12.5px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--pv7-acc); }
@media (max-width: 620px) { .pv7-radar { grid-template-columns: 1fr; } }

.pv7-role { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pv7-role-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pv7-role-n { font: 700 22px/1.15 system-ui, sans-serif; color: var(--pv7-acc); }
.pv7-role-s {
  font: 700 20px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums;
  padding: 8px 13px; border-radius: 9px;
  border: 1px solid color-mix(in srgb,#00ffa6 30%,transparent);
  background: color-mix(in srgb,#00ffa6 9%,transparent);
}
.pv7-role-s i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--pv7-faint); }
.pv7-role-t { margin: 0; font: 400 12.5px/1.6 system-ui, sans-serif; color: var(--pv7-dim); }

.pv7-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; }
.pv7-sw-t {
  font: 700 9.5px/1 system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px;
}
.pv7-sw-t.is-good { color: var(--pv7-acc); }
.pv7-sw-t.is-bad  { color: #f59e0b; }
.pv7-sw-i {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; margin-bottom: 5px; border-radius: 8px;
  font: 500 12px/1.3 system-ui, sans-serif;
  border: 1px solid var(--pv7-line);
}
.pv7-sw-i.is-good { color: var(--pv7-acc); background: color-mix(in srgb,#00ffa6 7%,transparent); border-color: color-mix(in srgb,#00ffa6 20%,transparent); }
.pv7-sw-i.is-bad  { color: #f59e0b; background: color-mix(in srgb,#f59e0b 7%,transparent); border-color: color-mix(in srgb,#f59e0b 20%,transparent); }
.pv7-sw-i.is-none { color: var(--pv7-ghost); font-style: italic; }
@media (max-width: 560px) { .pv7-sw { grid-template-columns: 1fr; } }

/* ===== DECISION B: empty chip rows collapse instead of leaving a gap ===== */
.pv7-chips:empty { display: none; }
.pv7-filters:empty { display: none; }

/* ===== DECISION B: collapse chip rows that no longer hold any chips ===== */
.pv7-chips:not(:has(a)) { display: none; }
.pv7-filters:not(:has(a)) { display: none; }