/* mlb-hr-results.css — the /mlb/home-run-results view.
   Was an inline <style> in a standalone template. The page now renders inside
   the SPA shell, so the shell owns the navbar, bottom nav and footer and those
   rules are gone from here.

   EVERY selector is prefixed with #hr-results-root. This sheet ships on every
   MLB page, and the original was written for a document it had entirely to
   itself — it styles bare `table`, `th`, `td`, `.num`, `.player`. Unscoped,
   those would repaint the workbench. */

/* ── Route takeover ─────────────────────────────────────────────────────────
   Duplicates the document.write'd #hr-results-init block in index.html, which
   only ever runs on a DIRECT load of /mlb/home-run-results (it exists to beat
   the first paint so the page never flashes the workbench). An SPA entry from
   the schedule has no second document, so nothing injects it — these rules are
   what make the takeover work in that path. Keep the two in sync.

   The hook is a class on <html>, not an unconditional rule: the bottom nav is
   a pushState swap, so an unconditional `#hr-results-root{display:block}`
   would be un-hideable by the view switcher and would leave the home-run table
   on screen at /mlb/schedule. hrResultsMLB.js toggles the class.

   NOTE the `body` qualifier on #main-app-wrapper. It is load-bearing
   SPECIFICITY, not styling: the generic app-route block in index.html writes
   `#main-app-wrapper{display:block!important}` and this route matches its
   alternation, so (0,1,1) is required to out-rank it. Do not "simplify" it. */
html.is-hr-results #cover-page,
html.is-hr-results .workbench-layout,
html.is-hr-results .sidebar,
html.is-hr-results #loading-animation,
html.is-hr-results body #main-app-wrapper {
  display: none !important;
}
html.is-hr-results #hr-results-root {
  display: block !important;
}
html.is-hr-results .landing-nav {
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
html.is-hr-results .landing-nav .sport-selector {
  display: flex !important;
}

/* Bottom padding clears the fixed bottom nav; the footer's own padding
       stacks on top of it. */
/* The standalone document set these on <body>; the view root carries them now
   so the view looks the same without touching the rest of the SPA. */
#hr-results-root {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #e8eaed;
  line-height: 1.55;
}
#hr-results-root a { color: #8ab4ff; text-decoration: none; }
#hr-results-root a:hover { text-decoration: underline; }
/* Same --theme-accent-rgb token as the schedule's "View … Home Runs" button and
   the card Preview affordance, so every "go somewhere" link in the MLB surfaces
   is one colour. Full opacity rather than a dimmed default — at .75 the teal
   read as a muted grey-green. */
#hr-results-root .hrx-back {
  display: inline-block;
  margin-bottom: 1.1em;
  font-size: .85rem;
  font-weight: 700;
  color: rgba(var(--theme-accent-rgb, 0, 211, 189), .9);
}
#hr-results-root .hrx-back:hover {
  color: rgb(var(--theme-accent-rgb, 0, 211, 189));
  text-decoration: none;
}
/* Clear the fixed .landing-nav (60px) at the top and the fixed bottom nav at
   the foot; both sit outside this root, so neither reserves space for it. */
#hr-results-root { padding-top: 60px; }
/* 60px is the DESKTOP nav height. Below 1000px .landing-nav wraps its logo,
   sport picker and Log In onto more rows — measured 99px at 600–1000px and
   109px at =<430px — so the flat reserve left "= Schedule" sitting half under
   it, cut off along the nav's bottom edge. Reserve the tallest measured case
   plus a small gap; it is fixed-position, so nothing else reserves this space. */
@media (max-width: 1000px) {
  #hr-results-root { padding-top: 118px; }
}
/* Fill the viewport so the site footer stays BELOW the fold on a short slate.
   The shell renders the footer as a sibling of this root, so with three home
   runs the socials and link list landed halfway up the first screen and read
   as the end of the page.

   A full 100vh, NOT calc(100vh - 60px): box-sizing is border-box here, so
   min-height already INCLUDES the 60px padding that clears the fixed nav —
   subtracting it again left the footer 60px above the fold. */
#hr-results-root { min-height: 100vh; }
/* Wide enough for nine columns to breathe; the table is the page. */
#hr-results-root .hrx-wrap {max-width:min(1600px,100%);margin:0 auto;padding:26px 20px 40px}
#hr-results-root h1 {font-size:1.5rem;margin:.1em 0 .25em}
#hr-results-root .sub {color:#8b91a0;font-size:.85rem;margin:0 0 1.2em;font-variant-numeric:tabular-nums}
#hr-results-root .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
      clip:rect(0 0 0 0);white-space:nowrap;border:0}
#hr-results-root .hrx-datepick {margin:0}
#hr-results-root .hrx-datepick select {
      font:inherit;font-size:.85rem;font-weight:600;color:#e8eaed;cursor:pointer;
      background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
      border-radius:10px;padding:.45em 1.9em .45em .8em;appearance:none;
      /* Chevron drawn inline so the control needs no image request. */
      background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238b91a0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:right .7em center;background-size:10px;
      transition:border-color .15s ease}
#hr-results-root .hrx-datepick select:hover {border-color:rgba(255,255,255,.3)}
#hr-results-root .hrx-datepick select:focus-visible {outline:2px solid rgba(0,211,189,.6);outline-offset:2px}
/* The native menu is OS-drawn; force a dark palette so it isn't white. */
#hr-results-root .hrx-datepick option {background:#14161b;color:#e8eaed}
#hr-results-root table {width:100%;border-collapse:collapse;font-size:.88rem}
#hr-results-root th {text-align:left;color:#8b91a0;font-weight:600;font-size:.72rem;letter-spacing:.04em;
       text-transform:uppercase;padding:.5em .6em;border-bottom:1px solid rgba(255,255,255,.1)}
#hr-results-root td {padding:.55em .6em;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
#hr-results-root .num {text-align:right;font-variant-numeric:tabular-nums}
#hr-results-root .player {font-weight:600;color:#e8eaed}
#hr-results-root .side {color:#6b7280;font-size:.72rem;margin-left:.35em}
#hr-results-root .muted {color:#8b91a0;font-size:.78rem}
#hr-results-root .price {font-weight:700;color:#f8fafc}
#hr-results-root .open {color:#7c8494;font-size:.72rem}
/* Every "no price" state routes here — never an empty cell, which next to a
       hitter reads as even money. */
#hr-results-root .nomkt {color:#6b7280;font-size:.72rem}
#hr-results-root .grade {display:inline-block;padding:1px 7px;border-radius:999px;font-size:.7rem;font-weight:700}
/* Lifted from prop-cards.css so a grade word is the same color everywhere. */
#hr-results-root .t-elite {color:#22c55e;background:rgba(34,197,94,.11)}
#hr-results-root .t-good {color:#86efac;background:rgba(134,239,172,.10)}
#hr-results-root .t-neutral {color:#fbbf24;background:rgba(251,191,36,.10)}
#hr-results-root .t-poor {color:#f87171;background:rgba(248,113,113,.10)}
#hr-results-root .t-bad {color:#ef4444;background:rgba(239,68,68,.11)}
#hr-results-root .empty {color:#8b91a0;padding:2em 0}
/* The page is ~1600px; a 70ch column left this as a narrow ribbon in the
       bottom-left corner. Columns keep the measure readable while using the
       width. */
#hr-results-root .note {color:#6b7280;font-size:.78rem;margin-top:2.2em;padding-top:1.4em;
      border-top:1px solid rgba(255,255,255,.06);line-height:1.65;
      columns:2;column-gap:48px}
@media (max-width:900px){
#hr-results-root .note {columns:1}
}
@media (max-width:720px){
#hr-results-root .hide-sm {display:none}
}
/* ── summary + facets ────────────────────────────────────────────
       Reference layout was a light card strip; this is the same structure in
       the app's dark palette, reusing the tier greens/ambers already used for
       grades below so the page reads as one surface. */
#hr-results-root .hrx-summary {display:grid;gap:12px;margin:0 0 22px;
      grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
#hr-results-root .hrx-stat {display:flex;flex-direction:column;gap:3px;padding:15px 16px;
      border:1px solid rgba(255,255,255,.07);border-radius:14px;
      background:rgba(255,255,255,.025)}
#hr-results-root .hrx-stat-l {font-size:.63rem;letter-spacing:.07em;text-transform:uppercase;color:#8b91a0}
#hr-results-root .hrx-stat-v {font-size:1.6rem;font-weight:800;color:#f1f3f5;line-height:1.15;
      font-variant-numeric:tabular-nums;letter-spacing:-.02em}
#hr-results-root .hrx-stat-s {font-size:.72rem;color:#7c8494;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ONE ROW, scrolled — never wrapped. With five-plus facets the wrap put a
   single orphan pill on a second line and pushed the table down; a scroller
   keeps the block a fixed height however many pitch types a night produces.
   `flex: none` on the pills is what stops flex squeezing them to fit instead
   of overflowing, which is what makes the row scrollable at all. */
#hr-results-root .hrx-facets {display:flex;flex-wrap:nowrap;gap:8px;margin:0 0 30px;
      overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
      overscroll-behavior-x:contain;scrollbar-width:none}
#hr-results-root .hrx-facets::-webkit-scrollbar {display:none}
#hr-results-root .hrx-pill {flex:none}
#hr-results-root .hrx-pill {font:inherit;font-size:.76rem;font-weight:600;cursor:pointer;
      padding:5px 13px;border-radius:999px;color:#a8b0bf;
      border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
      transition:border-color .15s ease,color .15s ease,background .15s ease}
#hr-results-root .hrx-pill:hover {color:#e8eaed;border-color:rgba(255,255,255,.22)}
#hr-results-root .hrx-pill.is-on {background:#e8eaed;border-color:#e8eaed;color:#0b0c10}
#hr-results-root .hrx-pill-n {opacity:.55;font-weight:700;margin-left:.25em}
#hr-results-root .hrx-pill.is-on .hrx-pill-n {opacity:.5}
/* ── avatars ─────────────────────────────────────────────────────
       MLBPlayers.headshot, served with the row. Initial-letter fallback for a
       same-day callup whose headshot hasn't landed yet. */
#hr-results-root .hrx-who {display:flex;align-items:center;gap:9px;min-width:0}
/* align-items:flex-start is load-bearing: the pill is a flex item here, and a
       column flex container stretches its children, so without it every pill
       inherits the width of the player name above it. */
#hr-results-root .hrx-who-t {display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.3}
#hr-results-root .hrx-ava {width:34px;height:34px;flex:0 0 34px;border-radius:50%;object-fit:cover;
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
#hr-results-root .hrx-ava--sm {width:26px;height:26px;flex:0 0 26px}
#hr-results-root .hrx-ava--none {display:inline-flex;align-items:center;justify-content:center;
      font-size:.8rem;font-weight:700;color:#6b7280}
/* The boundary between hitters who had a market and hitters who never did. */
#hr-results-root .hrx-split td {padding:1.3em .6em .5em;font-size:.68rem;font-weight:700;
      letter-spacing:.07em;text-transform:uppercase;color:#6b7280;
      border-bottom:1px solid rgba(255,255,255,.1)}
#hr-results-root tr[hidden] {display:none}
#hr-results-root .hrx-none {color:#8b91a0;padding:1.5em 0;font-size:.85rem}
/* The 2+ line a multi-HR hitter actually cleared. Green because, unlike the
       opening price it replaced in this slot, it is a bet that WON. */
#hr-results-root .hrx-alt {font-size:.68rem;color:#6b7280;margin-top:2px;white-space:nowrap}
/* A price the home run actually cleared — green because it is a result,
       not an offer. The main-line price on row one stays white. */
#hr-results-root .price.hrx-cleared {color:#22c55e}
/* Title row: date nav sits opposite the h1 rather than stacked under it. */
#hr-results-root .hrx-head {display:flex;align-items:center;justify-content:space-between;
      gap:16px;flex-wrap:wrap;margin:0 0 26px}
#hr-results-root .hrx-head h1 {margin:0}
#hr-results-root .hrx-head .datenav {margin:0}
/* nowrap: it is one phrase. Inline beside the h1 it was breaking as
   "SLATE IN" / "PROGRESS" across two lines; as an unbreakable unit it either
   sits beside the title or drops to its own line whole. */
#hr-results-root .hrx-live {font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
      color:#ef4444;margin-left:.6em;vertical-align:middle;white-space:nowrap}
/* The pitcher is a subject of the row, not an annotation on it — same
       avatar size and same white as the hitter. */
#hr-results-root .hrx-logo {width:26px;height:26px;object-fit:contain;display:block}
#hr-results-root .hrx-team-code {font-weight:700;color:#8b91a0;font-size:.72rem;letter-spacing:.03em}
/* Handedness is ONE colour language across both columns: red = right,
       blue = left, so a RHB-vs-LHP row reads as a contrast at a glance without
       parsing two different notations. Switch hitters get their own token
       rather than being folded into either side. */
#hr-results-root .hrx-hand-pill {display:inline-block;margin-top:2px;padding:1px 6px;border-radius:5px;
      font-size:.6rem;font-weight:800;letter-spacing:.05em;line-height:1.5}
#hr-results-root .hrx-hand-pill[data-h="R"] {color:#f87171;background:rgba(239,68,68,.14)}
#hr-results-root .hrx-hand-pill[data-h="L"] {color:#60a5fa;background:rgba(96,165,250,.14)}
#hr-results-root .hrx-hand-pill[data-h="S"] {color:#c4b5fd;background:rgba(167,139,250,.14)}
#hr-results-root .hrx-hand-txt {font-weight:800;font-size:.82rem}
#hr-results-root .hrx-hand-txt[data-h="R"] {color:#f87171}
#hr-results-root .hrx-hand-txt[data-h="L"] {color:#60a5fa}
#hr-results-root .hrx-hand-txt[data-h="S"] {color:#c4b5fd}
#hr-results-root .hrx-hand {color:#6b7280;font-size:.82rem}
/* Deliberately colourless — the pitch is a label, not a verdict, and
       tinting it would compete with the grade and handedness that are. */
/* Pitch colours are LIFTED from PITCH_COLORS in
       gameDetailMLBMatchup.js:82 (the arsenal table) so a slider is the same
       yellow here as it is there. That map is keyed by Statcast code and the HR
       feed carries full names, so the mapping is by name — the eight that
       actually appear, plus the rarer ones, with a grey fallback. */
#hr-results-root .hrx-pitch {display:inline-block;padding:2px 8px;border-radius:6px;
      font-size:.7rem;font-weight:600;color:#a8b0bf;white-space:nowrap;
      background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06)}
#hr-results-root .hrx-pitch[data-p="4-Seam Fastball"] {color:#ef4444;background:rgba(239,68,68,.11);border-color:rgba(239,68,68,.22)}
#hr-results-root .hrx-pitch[data-p="Sinker"] {color:#f87171;background:rgba(185,28,28,.18);border-color:rgba(185,28,28,.35)}
#hr-results-root .hrx-pitch[data-p="Cutter"] {color:#f97316;background:rgba(249,115,22,.11);border-color:rgba(249,115,22,.22)}
#hr-results-root .hrx-pitch[data-p="Slider"] {color:#eab308;background:rgba(234,179,8,.11);border-color:rgba(234,179,8,.22)}
#hr-results-root .hrx-pitch[data-p="Sweeper"] {color:#ec4899;background:rgba(236,72,153,.11);border-color:rgba(236,72,153,.22)}
#hr-results-root .hrx-pitch[data-p="Slurve"] {color:#14b8a6;background:rgba(20,184,166,.11);border-color:rgba(20,184,166,.22)}
#hr-results-root .hrx-pitch[data-p="Curveball"] {color:#3b82f6;background:rgba(59,130,246,.11);border-color:rgba(59,130,246,.22)}
#hr-results-root .hrx-pitch[data-p="Knuckle Curve"] {color:#06b6d4;background:rgba(6,182,212,.11);border-color:rgba(6,182,212,.22)}
#hr-results-root .hrx-pitch[data-p="Slow Curve"] {color:#06b6d4;background:rgba(6,182,212,.11);border-color:rgba(6,182,212,.22)}
#hr-results-root .hrx-pitch[data-p="Changeup"] {color:#22c55e;background:rgba(34,197,94,.11);border-color:rgba(34,197,94,.22)}
#hr-results-root .hrx-pitch[data-p="Splitter"] {color:#a855f7;background:rgba(168,85,247,.11);border-color:rgba(168,85,247,.22)}
#hr-results-root .hrx-pitch[data-p="Eephus"] {color:#8b5cf6;background:rgba(139,92,246,.11);border-color:rgba(139,92,246,.22)}
#hr-results-root .hrx-pitch[data-p="Screwball"] {color:#f97316;background:rgba(249,115,22,.11);border-color:rgba(249,115,22,.22)}
/* Sortable headers. */
/* More room now that the page is wider. */
#hr-results-root td {padding:.7em .8em}
#hr-results-root th {padding:.6em .8em}
#hr-results-root th[data-t] {cursor:pointer;user-select:none;white-space:nowrap}
#hr-results-root th[data-t]:hover {color:#e8eaed}
/* ALWAYS rendered, never conditional on :hover. As a hover-only glyph it had no
   width at rest, so pointing at a header grew that cell and shoved every column
   to its right — the table twitched as the cursor crossed the head row. A fixed
   1em inline-block box also means swapping the up/down arrow for the neutral
   one cannot shift anything either. */
/* DRAWN, not typed. These were the Unicode arrows U+2195/2191/2193, whose shape
   is whatever the loaded font decides — at header size they rendered as thin,
   over-tall hairlines that read as a glitch rather than a control, and the
   mismatch got worse once the mobile type scale grew around them.

   Masked SVG + `background-color: currentColor` (the same tintable-icon pattern
   used elsewhere in the app) so the triangles inherit the header's colour for
   free: dim at rest, brighter on hover, full white when sorted — no per-state
   colour rules. Sizing stays in `em` so it tracks the clamped header text.

   The box is still a FIXED width, for the reason the old comment gave: swapping
   the neutral pair for a single arrow must not change the cell's width, or the
   columns to its right jump when you sort. */
#hr-results-root th[data-t] {
  --hrx-sort: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M5 0.8 8.8 5.6H1.2z'/%3E%3Cpath d='M5 15.2 1.2 10.4h7.6z'/%3E%3C/svg%3E");
}
#hr-results-root th.is-sorted[data-dir="asc"] {
  --hrx-sort: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M5 3.6 9 9.2H1z'/%3E%3C/svg%3E");
}
#hr-results-root th.is-sorted[data-dir="desc"] {
  --hrx-sort: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M5 12.4 1 6.8h8z'/%3E%3C/svg%3E");
}
#hr-results-root th[data-t]::after {
  content: '';
  display: inline-block;
  width: .62em;
  height: .95em;
  margin-left: .45em;
  vertical-align: -.1em;
  background-color: currentColor;
  -webkit-mask: var(--hrx-sort) center / contain no-repeat;
          mask: var(--hrx-sort) center / contain no-repeat;
  opacity: .3;
  transition: opacity .15s ease;
}
#hr-results-root th[data-t]:hover::after {opacity:.65}
#hr-results-root th.is-sorted::after {opacity:1}
#hr-results-root th.is-sorted {color:#e8eaed}

/* ═══════════════════════════════════════════════════════════════════════
   Table scroll container. The route sets `.is-mlb-route { overflow-x: hidden }`,
   which CLIPPED the last three columns on a phone rather than letting them
   scroll — P-Hand, Pregame and Model were simply unreachable. This scrolls the
   table alone, so the page never scrolls sideways.
   ═══════════════════════════════════════════════════════════════════════ */
#hr-results-root .hrx-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
#hr-results-root .hrx-scroll:focus-visible {
  outline: 2px solid rgba(0, 211, 189, .6);
  outline-offset: 2px;
}
/* The table sizes to its content inside the scroller instead of being squeezed
   into the container — `width: 100%` would just re-create the crush. */
#hr-results-root .hrx-scroll > table { width: 100%; min-width: 34rem; }

/* ═══════════════════════════════════════════════════════════════════════
   ≤1000px type scale. Same approach as the schedule dashboard: every size is a
   clamp whose floor is comfortably above the old desktop-derived value, so a
   phone reads at phone sizes and a tablet uses the width it has. The table's
   own text ramps more gently than the page chrome — it is the thing paying for
   the horizontal scroll above.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  #hr-results-root .hrx-back            { font-size: clamp(1rem, 2.3vw, 1.25rem); }
  #hr-results-root h1                   { font-size: clamp(1.8rem, 5vw, 2.6rem); }
  #hr-results-root .sub                 { font-size: clamp(1rem, 2.3vw, 1.22rem); }
  #hr-results-root .hrx-datepick select { font-size: clamp(1rem, 2.3vw, 1.2rem); }
  #hr-results-root .hrx-live            { font-size: clamp(0.82rem, 2vw, 1rem); }

  /* Summary cards — the largest headroom on the page; the labels were 10px. */
  #hr-results-root .hrx-stat-l { font-size: clamp(0.78rem, 1.95vw, 0.98rem); }
  #hr-results-root .hrx-stat-v { font-size: clamp(1.95rem, 5vw, 2.7rem); }
  #hr-results-root .hrx-stat-s { font-size: clamp(0.88rem, 2.05vw, 1.08rem); }

  #hr-results-root .hrx-pill   { font-size: clamp(1.1rem, 2.6vw, 1.34rem); padding: .58em 1.15em; }

  /* Table interior. Sized ABOVE the page chrome on purpose: .hrx-scroll already
     scrolls this table horizontally, so extra width costs a little more swipe
     rather than clipping anything, and the row content is what the page is for.
     Column headers get the steepest bump of the group — they were the smallest
     text on the page and they label columns that arrive off-screen. */
  #hr-results-root table          { font-size: clamp(1.2rem, 2.7vw, 1.45rem); }
  #hr-results-root th             { font-size: clamp(0.98rem, 2.3vw, 1.2rem); }
  #hr-results-root .side,
  #hr-results-root .open,
  #hr-results-root .nomkt,
  #hr-results-root .hrx-team-code { font-size: clamp(1rem, 2.3vw, 1.2rem); }
  #hr-results-root .muted         { font-size: clamp(1.06rem, 2.4vw, 1.28rem); }
  #hr-results-root .grade         { font-size: clamp(0.97rem, 2.25vw, 1.18rem); }
  #hr-results-root .hrx-hand-txt,
  #hr-results-root .hrx-hand      { font-size: clamp(1.12rem, 2.5vw, 1.36rem); }
  #hr-results-root .hrx-hand-pill { font-size: clamp(0.85rem, 2vw, 1.04rem); }
  #hr-results-root .hrx-pitch     { font-size: clamp(0.97rem, 2.25vw, 1.18rem); }
  #hr-results-root .hrx-alt       { font-size: clamp(0.94rem, 2.15vw, 1.14rem); }
  #hr-results-root .hrx-split td  { font-size: clamp(0.97rem, 2.25vw, 1.18rem); }
  #hr-results-root .hrx-ava       { width: 46px; height: 46px; flex: 0 0 46px; }
  #hr-results-root .hrx-ava--sm   { width: 38px; height: 38px; flex: 0 0 38px; }
  #hr-results-root .hrx-logo      { width: 38px; height: 38px; }

  #hr-results-root .hrx-none { font-size: clamp(1rem, 2.2vw, 1.2rem); }
  #hr-results-root .note     { font-size: clamp(0.9rem, 2vw, 1.06rem); }
}
