/* Evaluation results dashboard, shown inside the athlete page of index.html.
   Originally its own page (results.html); every rule is now scoped under
   .results-root so its generic class names (.card, .kpi-*, .empty-state,
   .link-btn, .page, .legend…) can't collide with the dashboard's styles.css.
   Its colour tokens are redefined on .results-root rather than :root for the
   same reason — they're the same light family as Finance's, with a few
   report-specific extras (--blue-soft, --gray-region, --r). */
/* Blueprint Athlete Evaluation Results — combine-report aesthetic.
   Light, dense, and built to be read at a glance: white cards on a cool-gray
   page, hairline borders, navy type, Blueprint blue reserved for data.
   Shares the light system established in evaluation.css rather than starting
   a second palette. */

.results-root {
    --navy: #13294C;
    --navy-2: #1D3A66;
    --blue: #2F6FB0;
    --blue-soft: #6FA8DC;
    --blue-wash: #EDF3FA;

    --green: #157F4F;
    --green-wash: #E9F5EF;
    --amber: #B4820E;
    --amber-wash: #FDF4E4;
    --red: #C0392B;
    --red-wash: #FBEDEB;

    --canvas: #F5F7F9;
    --surface: #FFFFFF;
    --sunk: #F9FAFC;

    --ink: #0F1620;
    --ink-2: #3C4754;
    --ink-3: #68727F;
    --ink-4: #98A1AC;

    --line: #E5E7EB;
    --line-strong: #CDD5DE;

    --gray-region: #9AA3AD;

    --r: 12px;
    --shadow: 0 1px 2px rgba(15,22,32,.05);

    --font-display: "Garp Sans Wide", "Roboto", sans-serif;
    --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.results-root { color: var(--ink); font-family: var(--font-body); font-size: 13px; line-height: 1.5; }
.results-root ul { margin: 0; padding: 0; }
.results-root li { list-style: none; }

/* ---------- Page chrome ---------- */

/* The dashboard's .app-views already pads and scrolls; the report just fills it. */
.results-root .page { padding: 14px 0 0; }

/* ---------- Cards ---------- */

.results-root .card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow);
    display: flex; flex-direction: column; min-width: 0;
}
.results-root .card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.results-root .card-title {
    font-family: var(--font-display); font-size: 10.5px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--navy);
    display: flex; align-items: center; gap: 6px;
}
.results-root .card-body { padding: 14px; flex: 1; }
.results-root .card-body.tight { padding: 10px 14px 14px; display: flex; align-items: center; justify-content: center; }

.results-root .info-dot {
    width: 13px; height: 13px; border-radius: 50%;
    border: 1px solid var(--line-strong); color: var(--ink-4);
    font-size: 9px; line-height: 11px; text-align: center; font-weight: 700;
    cursor: help; flex-shrink: 0;
}

.results-root .link-btn {
    background: none; border: none; color: var(--blue);
    font-size: 12px; font-weight: 700; padding: 0;
}
.results-root .link-btn:hover { text-decoration: underline; }

/* ---------- Layout ---------- */

.results-root .dash-grid {
    display: grid;
    /* Equal halves: the chart and the figure carry the same weight, so neither
       should look like the other's sidebar. */
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}
.results-root .cell-breakdown { grid-column: 1; grid-row: 1; }
.results-root .cell-bodymap { grid-column: 2; grid-row: 1; }
/* Full width: squeezed into one column the metric names truncate. */
.results-root .cell-metrics { grid-column: 1 / span 2; grid-row: 2; }
.results-root .cell-bottom { grid-column: 1 / span 2; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ---------- Category KPI strip ---------- */

.results-root .kpi-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.results-root .kpi {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow);
    padding: 16px 18px 14px;
    display: flex; flex-direction: column;
}
.results-root .kpi-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.results-root .kpi-label {
    font-size: 11px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-2);
}
/* Ordinal marker, deliberately faint — it aids scanning without competing. */
.results-root .kpi-index { font-size: 11px; font-weight: 700; color: var(--ink-4); font-variant-numeric: tabular-nums; }

.results-root .kpi-value {
    font-family: var(--font-display);
    font-size: 52px; font-weight: 400; line-height: 1; letter-spacing: 0;
    font-variant-numeric: tabular-nums; color: var(--navy);
    margin: 12px 0 8px;
}
.results-root .kpi-sub { font-size: 14px; font-weight: 700; color: var(--ink-2); }

.results-root .kpi-foot {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.results-root .kpi-delta {
    font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; gap: 5px;
}
.results-root .kpi-delta.is-up { color: var(--green); }
.results-root .kpi-delta.is-down { color: var(--red); }
.results-root .kpi-foot-note {
    font-size: 12px; color: var(--ink-3);
    padding-left: 10px; border-left: 1px solid var(--line);
}
.results-root .kpi-delta + .kpi-foot-note { margin-left: 0; }
.results-root .kpi-foot > .kpi-foot-note:only-child { padding-left: 0; border-left: none; }
.results-root .kpi.is-incomplete .kpi-value { color: var(--ink-4); }
.results-root .kpi.is-incomplete .kpi-sub { color: var(--ink-4); font-weight: 400; }

@media (max-width: 1100px) { .results-root .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .results-root .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Layout ---------- */

.results-root .dash-grid {
    display: grid;
    /* Equal halves: the chart and the figure carry the same weight, so neither
       should look like the other's sidebar. */
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}
.results-root .cell-breakdown { grid-column: 1; grid-row: 1; }
.results-root .cell-bodymap { grid-column: 2; grid-row: 1; }
/* Full width: squeezed into one column the metric names truncate. */
.results-root .cell-metrics { grid-column: 1 / span 2; grid-row: 2; }
.results-root .cell-bottom { grid-column: 1 / span 2; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ---------- Category KPI strip ---------- */

.results-root .kpi-strip {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
    margin-bottom: 14px;
}
.results-root .kpi {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow);
    padding: 16px 18px 18px;
    /* Squarer than a strip: label sits at the top, the figure anchors the
       bottom, and the tile keeps the same corner radius as every other card. */
    min-height: 150px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
}
.results-root .kpi-label {
    font-size: 10px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-4);
}
/* Garp on the number: at this size its digits are unambiguous, and these five
   are the headline figures on the page. Smaller readouts stay on Roboto. */
.results-root .kpi-value {
    font-family: var(--font-display);
    font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: 0;
    font-variant-numeric: tabular-nums; color: var(--navy);
}
.results-root .kpi.is-incomplete .kpi-value { color: var(--ink-4); }

@media (max-width: 1080px) { .results-root .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
    .results-root .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Radar ---------- */

.results-root .radar-wrap { display: block; margin: 0 auto; max-width: 520px; }
.results-root .radar-grid { fill: none; stroke: #E3E7ED; stroke-width: 1; }
.results-root .radar-spoke { stroke: #E3E7ED; stroke-width: 1; }
.results-root .radar-area { fill: rgba(47, 111, 176, .17); stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; }
.results-root .radar-point { fill: var(--blue); stroke: #fff; stroke-width: 1.6; }
/* Value first, category beneath it — the number is what gets scanned. */
.results-root .radar-axis-value { font-family: var(--font-body); font-size: 17px; font-weight: 700; fill: var(--navy); }
.results-root .radar-axis-value.is-incomplete { font-size: 10.5px; font-weight: 400; fill: var(--ink-4); }
.results-root .radar-axis-label { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; fill: var(--ink-3); }

/* ---------- Body map ---------- */

.results-root .bodymap-body {
    display: grid; grid-template-columns: minmax(210px, 1.15fr) minmax(190px, 1fr);
    gap: 14px; padding: 12px 14px 4px; align-items: start;
}
.results-root .seg-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.results-root .seg-toggle button {
    background: var(--surface); border: none; padding: 4px 12px;
    font-size: 11px; font-weight: 700; color: var(--ink-3);
}
.results-root .seg-toggle button.is-active { background: var(--blue); color: #fff; }

.results-root .body-stage { display: flex; justify-content: center; align-items: flex-start; min-width: 0; }
/* Sections are drawn, not imaged: each carries an opaque fill and its own
   stroke so the figure sits in the same line-art language as the cards. A flag
   never replaces a section — a solid coloured outline over a low-opacity wash
   keeps the gray anatomy readable. No gradients, glow, blur or heat-map. */
.results-root .body-model { width: 100%; height: auto; display: block; }
.results-root .bm-inert { fill: #C7CED7; stroke: #7C8794; stroke-width: 1.1; stroke-linejoin: round; }
.results-root .bm-base {
    fill: #C7CED7;
    stroke: #7C8794; stroke-width: 1.1; stroke-linejoin: round;
    pointer-events: none;
}
.results-root .bm-region {
    fill: transparent;
    stroke: transparent;
    stroke-width: 2.2;
    stroke-linejoin: round;
    cursor: default;
    transition: fill .18s ease, stroke .18s ease, stroke-width .12s ease;
}
.results-root .bm-region[data-status="surgery"] { fill: rgba(192, 57, 43, .28);  stroke: #C0392B; cursor: pointer; }
.results-root .bm-region[data-status="injury"] { fill: rgba(230, 126, 34, .28); stroke: #E67E22; cursor: pointer; }
.results-root .bm-region[data-status="weakness"] { fill: rgba(214, 167, 9, .30);  stroke: #D6A709; cursor: pointer; }
.results-root .bm-region[data-status="tightness"] { fill: rgba(47, 111, 176, .26); stroke: #2F6FB0; cursor: pointer; }
.results-root .bm-region.is-clickable:hover, .results-root .bm-region.is-clickable:focus { stroke-width: 3.2; outline: none; }
.results-root .bm-region.is-selected { stroke-width: 3.6; }

.results-root .bodymap-key { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.results-root .bodymap-detail { padding: 0 14px 14px; }
.results-root .legend { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.results-root .legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ink-3); }
.results-root .legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.results-root .region-detail {
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--sunk); padding: 10px 12px;
}
.results-root .region-detail h3 { font-family: var(--font-display); font-size: 11.5px; text-transform: uppercase; color: var(--ink); }
.results-root .region-detail .status-line { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-top: 2px; }
.results-root .region-detail .status-line.needs-attention { color: var(--amber); }
.results-root .region-detail .status-line.injury { color: var(--red); }
.results-root .region-detail .status-line.previous-injury { color: var(--blue); }
.results-root .detail-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.results-root .detail-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.results-root .detail-row span { color: var(--ink-3); }
.results-root .detail-row strong { font-variant-numeric: tabular-nums; }
.results-root .detail-note { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.results-root .region-detail.is-empty { color: var(--ink-4); font-size: 11.5px; text-align: center; }

/* ---------- Body-map flag key ---------- */

.results-root .flag-key { display: flex; flex-direction: column; gap: 6px; }
.results-root .flag-row {
    display: flex; align-items: flex-start;
    padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
    /* Status reads off a stripe down the left edge rather than a dot — it
       carries further and lines the rows up on a single vertical edge. */
    border-left-width: 4px; border-left-style: solid;
    background: var(--sunk); cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}
.results-root .flag-row[data-flag="surgery"] { border-left-color: #C0392B; }
.results-root .flag-row[data-flag="injury"] { border-left-color: #E67E22; }
.results-root .flag-row[data-flag="weakness"] { border-left-color: #D6A709; }
.results-root .flag-row[data-flag="tightness"] { border-left-color: #2F6FB0; }
.results-root .flag-row:hover, .results-root .flag-row:focus { border-color: var(--line-strong); outline: none; }
.results-root .flag-row.is-selected { border-color: var(--navy); background: var(--blue-wash); }
/* A marker on the view you are not looking at still has to be findable. */
.results-root .flag-row.is-other-view { opacity: .62; }
.results-root .flag-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.results-root .flag-text strong { font-size: 12px; color: var(--ink); }
.results-root .flag-status { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.results-root .flag-detail { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.results-root .key-empty { font-size: 11.5px; color: var(--ink-4); text-align: center; padding: 20px 8px; }

/* ---------- Raw metrics ---------- */

.results-root .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.results-root .metric-card { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.results-root .metric-card-head {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 10px; background: var(--sunk); border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-size: 10px; text-transform: uppercase; color: var(--navy);
}
.results-root .metric-rows { padding: 2px 0; }
.results-root .metric-row {
    display: grid; grid-template-columns: 1fr auto 34px;
    gap: 8px; align-items: center;
    padding: 4px 10px; font-size: 11.5px;
}
.results-root .metric-row + .metric-row { border-top: 1px solid #F1F3F5; }
.results-root .cell-metrics:not(.show-all) .metric-row.is-extra { display: none; }
.results-root .metric-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results-root .metric-value { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; white-space: nowrap; }
.results-root .metric-score {
    display: flex; align-items: center; justify-content: flex-end; gap: 4px;
    font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink);
}
.results-root .metric-score.is-empty { color: var(--ink-4); font-weight: 400; }
.results-root .metric-flag { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.results-root .metric-flag.strong { background: var(--green); }
.results-root .metric-flag.normal { background: #C7CDD4; }
.results-root .metric-flag.attention { background: #E8A33D; }

/* ---------- Findings / recommendations ---------- */

.results-root .bullets { display: flex; flex-direction: column; gap: 7px; }
.results-root .bullets li { display: flex; gap: 8px; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.results-root .bullets li::before { content: "•"; color: var(--blue); flex-shrink: 0; }

/* ---------- Comparison ---------- */

.results-root .cmp-rows { display: flex; flex-direction: column; gap: 9px; }
.results-root .cmp-row { display: grid; grid-template-columns: 96px 1fr 34px 48px; gap: 8px; align-items: center; font-size: 11.5px; }
.results-root .cmp-label { color: var(--ink-2); }
.results-root .cmp-bar { height: 7px; border-radius: 4px; background: #EDF0F3; overflow: hidden; }
.results-root .cmp-bar span { display: block; height: 100%; background: var(--blue); border-radius: 4px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.results-root .cmp-score { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.results-root .cmp-score.is-empty { color: var(--ink-4); font-weight: 400; }
.results-root .cmp-pct { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.results-root .notice {
    border: 1px solid var(--line); background: var(--sunk);
    border-radius: 8px; padding: 9px 11px; font-size: 11.5px; color: var(--ink-2);
}
.results-root .notice-warn { border-color: #E8D2A4; background: var(--amber-wash); color: #7A5406; }

.results-root .empty-state { max-width: 460px; margin: 40px auto; text-align: center; }
.results-root .empty-state h1 { font-family: var(--font-display); font-size: 17px; text-transform: uppercase; color: var(--navy); margin-bottom: 8px; }
.results-root .empty-state p { color: var(--ink-3); }

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

@media (max-width: 1080px) {
    .results-root .dash-grid { grid-template-columns: 1fr; }
    .results-root .cell-breakdown, .results-root .cell-bodymap, .results-root .cell-metrics, .results-root .cell-bottom { grid-column: 1; grid-row: auto; }
    .results-root .cell-bottom { grid-template-columns: 1fr; }
    .results-root .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
    .results-root .dash-grid, .results-root .cell-bottom { grid-template-columns: 1fr; }
    .results-root .cell-breakdown, .results-root .cell-bodymap, .results-root .cell-metrics, .results-root .cell-bottom { grid-column: 1; grid-row: auto; }
    .results-root .metric-grid { grid-template-columns: 1fr; }
}

/* ---------- Navy athlete banner ---------- */

/* An inset card rather than a full-bleed bar: it reads as the report's
   masthead sitting on the page, not as browser chrome. */
.results-root .page-header { margin: 0; }
.results-root .ph-inner {
    background: var(--navy); color: #fff;
    border-radius: 14px;
    padding: 26px 30px;
    display: flex; align-items: center; gap: 30px;
}
.results-root .ph-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }

.results-root .ph-identity { display: flex; align-items: center; gap: 20px; min-width: 0; }
.results-root .ph-avatar {
    width: 98px; height: 98px; border-radius: var(--r);
    object-fit: cover; flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .18);
    background: #1D3A66;
}
.results-root .ph-avatar-initials {
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: 30px; color: #fff;
}
.results-root .ph-text { min-width: 0; }
.results-root .ph-text h1 {
    font-family: var(--font-display); font-size: 34px;
    text-transform: uppercase; color: #fff; line-height: 1.05;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.results-root .ph-text p {
    margin: 7px 0 0; font-size: 15px; color: rgba(255, 255, 255, .76);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.results-root .ph-text p.ph-dim { margin-top: 3px; font-size: 14px; color: rgba(255, 255, 255, .5); }

/* Stat strip, divided rather than boxed — quieter than the KPI tiles below. */
.results-root .ph-statrow { display: flex; align-items: stretch; }
.results-root .ph-stat { padding: 0 26px; border-left: 1px solid rgba(255, 255, 255, .14); }
.results-root .ph-stat:first-child { padding-left: 0; border-left: none; }
.results-root .ph-stat em {
    display: block; font-style: normal;
    font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255, 255, 255, .5); margin-bottom: 5px;
}
.results-root .ph-stat span { font-size: 16px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

.results-root .ph-score {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    flex-shrink: 0; padding-left: 30px; align-self: stretch; justify-content: center;
    border-left: 1px solid rgba(255, 255, 255, .14);
}
.results-root .ph-score-label {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--font-display);
    font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
}
.results-root .ph-info {
    width: 15px; height: 15px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .7);
    font-family: var(--font-body); font-style: normal; font-size: 9.5px; font-weight: 700;
    line-height: 13px; text-align: center; letter-spacing: 0; cursor: help;
}

.results-root .ph-gauge-wrap { position: relative; width: 196px; height: 196px; }
.results-root .ph-gauge { width: 100%; height: 100%; display: block; }
.results-root .ph-gauge-track { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 13; stroke-linecap: round; }
.results-root .ph-gauge-fill {
    fill: none; stroke: #3B9BF5; stroke-width: 13; stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(59, 155, 245, .5));
    transition: stroke-dasharray .7s cubic-bezier(.4, 0, .2, 1);
}
.results-root .ph-gauge-inner { position: absolute; inset: 0; display: grid; place-items: center; }
.results-root .ph-score-value {
    font-family: var(--font-display);
    font-size: 56px; font-weight: 400; line-height: .95; letter-spacing: 0;
    color: #fff; font-variant-numeric: tabular-nums;
}
.results-root .ph-score-max {
    position: absolute; left: 0; right: 0; top: calc(50% + 30px);
    text-align: center; font-size: 15px; color: rgba(255, 255, 255, .5);
}
.results-root .ph-score-incomplete { font-family: var(--font-display); font-size: 17px; color: rgba(255, 255, 255, .78); }
.results-root .ph-score-reason { font-size: 11.5px; color: rgba(255, 255, 255, .6); max-width: 230px; text-align: center; }

.results-root .ph-chips { display: flex; gap: 8px; }
.results-root .ph-chip {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
}
.results-root .ph-chip-icon { width: 12px; height: 12px; fill: rgba(255, 255, 255, .72); flex-shrink: 0; }
.results-root .ph-chip-arrow { font-size: 10px; color: #2FD08A; line-height: 1; }
.results-root .ph-chip.is-down .ph-chip-arrow { color: #E86A5A; }
.results-root .ph-chip-text { display: flex; flex-direction: column; line-height: 1.25; }
.results-root .ph-chip-text strong { font-size: 13px; color: #fff; font-variant-numeric: tabular-nums; }
.results-root .ph-chip-text em { font-style: normal; font-size: 10px; color: rgba(255, 255, 255, .58); white-space: nowrap; }
.results-root .ph-chip.is-up { background: rgba(47, 208, 138, .10); border-color: rgba(47, 208, 138, .26); }
.results-root .ph-chip.is-up .ph-chip-text strong { color: #2FD08A; }
.results-root .ph-chip.is-down { background: rgba(232, 106, 90, .10); border-color: rgba(232, 106, 90, .26); }

@media (max-width: 900px) {
    .results-root .ph-inner { flex-direction: column; align-items: stretch; gap: 22px; padding: 22px; }
    .results-root .ph-score { padding-left: 0; padding-top: 22px; border-left: none; border-top: 1px solid rgba(255, 255, 255, .14); }
    .results-root .ph-statrow { flex-wrap: wrap; gap: 14px 0; }
    .results-root .ph-chips { flex-wrap: wrap; justify-content: center; }
}