.hp { position: relative; font-family: var(--font-anthropic-sans); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: var(--cds-gap-lg); }
.hp { --hp-muted: var(--cds-chart-muted); }
.hp-head { display: flex; flex-direction: column; gap: var(--cds-gap-xs); }
.hp-title { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); margin: 0; text-wrap: balance; }
.hp-lede { margin: 0; color: var(--color-fg-muted); font-size: var(--cds-font-size-body); }
.hp-tabs { display: flex; flex-wrap: wrap; gap: var(--cds-gap-xs); border-bottom: 1px solid var(--color-border-line); }
.hp-tabs button, .hp-seg button { font: inherit; font-size: var(--cds-font-size-body); background: none; border: 0; color: var(--color-fg-muted); padding: var(--cds-pad-sm) var(--cds-pad-md); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.hp-tabs button:hover, .hp-seg button:hover { color: var(--color-fg); }
.hp-tabs button[aria-selected="true"] { color: var(--color-fg); border-bottom-color: var(--color-fg); font-weight: var(--cds-font-weight-medium); }
.hp-tabs button:focus-visible, .hp-seg button:focus-visible, .hp-table th button:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
.hp-page { display: flex; flex-direction: column; gap: var(--cds-gap-md); }
.hp-period { display: flex; flex-wrap: wrap; gap: var(--cds-gap-xs); align-items: baseline; font-size: var(--cds-font-size-body); font-weight: var(--cds-font-weight-medium); }
.hp-vs { color: var(--color-fg-muted); font-weight: 400; }
.hp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--cds-gap-md); }
.hp-tile { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-md) var(--cds-pad-lg); display: flex; flex-direction: column; gap: var(--cds-gap-xs); min-width: 0; }
.hp-tl { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.hp-tv { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); line-height: 1.15; }
.hp-tc, .hp-sub { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.hp-tc.up { color: var(--color-ok); } .hp-tc.down { color: var(--color-bad); }
.hp-meter { height: 6px; border-radius: 3px; background: var(--cds-chart-grid); overflow: hidden; }
.hp-meter i { display: block; height: 100%; width: 0; background: var(--hp-c0); border-radius: 3px; }
.hp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--cds-gap-md); }
.hp-stack { display: flex; flex-direction: column; gap: var(--cds-gap-md); }
.hp-card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); min-width: 0; display: flex; flex-direction: column; gap: var(--cds-gap-xs); }
.hp-h { margin: 0; font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); }
.hp-note { margin: 0; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.hp-legend { display: flex; flex-wrap: wrap; gap: var(--cds-gap-md); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); min-height: 1em; }
.hp-lg { display: inline-flex; align-items: center; gap: 6px; }
.hp-lg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.hp-chart { position: relative; min-height: 220px; }
.hp-chart svg { display: block; overflow: visible; }
.hp-chart text { font-size: var(--cds-font-size-caption); fill: var(--color-fg-muted); }
.hp-fail { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: inherit; height: 100%; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
.hp-fail::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--color-bad); }
.hp-gender { display: flex; flex-direction: column; gap: var(--cds-gap-sm); min-height: 120px; padding-top: var(--cds-pad-xs); }
.hp-grow { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--cds-gap-sm); align-items: center; font-size: var(--cds-font-size-caption); }
.hp-gbar { display: flex; height: 28px; border-radius: 4px; overflow: hidden; }
.hp-gbar span { display: flex; align-items: center; padding: 0 8px; color: var(--color-bg); white-space: nowrap; overflow: hidden; font-size: var(--cds-font-size-caption); }
.hp-scroll { overflow: auto; max-height: 32rem; }
.hp-table { border-collapse: collapse; width: 100%; font-size: var(--cds-font-size-caption); white-space: nowrap; }
.hp-table th, .hp-table td { padding: var(--cds-pad-xs) var(--cds-pad-sm); text-align: right; border-bottom: 1px solid var(--color-border-line); }
.hp-table th:first-child, .hp-table td:first-child { text-align: left; position: sticky; left: 0; background: var(--color-panel); }
.hp-table th { position: sticky; top: 0; background: var(--color-panel); color: var(--color-fg-muted); font-weight: var(--cds-font-weight-medium); z-index: 1; }
.hp-table th:first-child { z-index: 2; }
.hp-table tr.hp-hl td { font-weight: var(--cds-font-weight-medium); }
.hp-table td.hp-txt { text-align: left; }
.hp-seg { display: inline-flex; gap: var(--cds-gap-xs); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: 2px; align-self: flex-start; }
.hp-seg button { border-bottom: 0; margin: 0; border-radius: calc(var(--cds-radius) - 2px); padding: var(--cds-pad-xs) var(--cds-pad-md); }
.hp-seg button[aria-pressed="true"] { background: var(--color-fg); color: var(--color-bg); }
.hp-tip { position: absolute; z-index: 5; background: var(--cds-surface-popover); border: 1px solid var(--cds-border); border-radius: var(--cds-radius); box-shadow: var(--cds-shadow-popover); padding: var(--cds-pad-xs) var(--cds-pad-sm); font-size: var(--cds-font-size-caption); pointer-events: none; white-space: nowrap; }
.hp-tip .hp-tt { color: var(--cds-text-secondary); margin-bottom: 2px; }
.hp-tip .hp-tr { display: flex; align-items: center; gap: 6px; }
.hp-tip .hp-tr i { width: 8px; height: 8px; border-radius: 2px; }
[data-dash-source-state=empty] { color: transparent; }
[data-dash-source-state=refreshing] { opacity: .5; transition: opacity var(--cds-dur-slow); }

.hp-ic { display: inline-flex; width: 18px; height: 18px; flex: none; vertical-align: -4px; margin-right: 6px; }
.hp-ic svg { width: 100%; height: 100%; display: block; }
.hp-ic-md { width: 22px; height: 22px; margin-right: 8px; }
.hp-ic-lg { width: 44px; height: 44px; margin: 0; }
.hp-tli { display: flex; align-items: center; font-size: var(--cds-font-size-body); color: var(--color-fg); font-weight: var(--cds-font-weight-medium); }
.hp-ph { display: flex; align-items: center; gap: var(--cds-gap-md); }
.hp-phx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-pt { margin: 0; font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); line-height: 1.1; }
.hp-tabs button, .hp-seg button { display: inline-flex; align-items: center; }
.hp-tabs button[data-tab="overview"] .hp-ic, .hp-tabs button[data-tab="competitors"] .hp-ic { display: none; }
.hp-tabs button:not([aria-selected="true"]) .hp-ic { filter: grayscale(1); opacity: .6; }
.hp-tabs button:hover .hp-ic { filter: none; opacity: 1; }
.hp-seg button:not([aria-pressed="true"]) .hp-ic { filter: grayscale(1); opacity: .6; }
.hp-cell-ic { display: inline-flex; align-items: center; }

.hp-toph { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--cds-gap-md); }
.hp-segl { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); padding: 0 var(--cds-pad-xs) 0 var(--cds-pad-sm); align-self: center; }
.hp-rank button[aria-pressed="true"] { background: var(--color-fg); color: var(--color-bg); }
.hp-top { display: flex; flex-direction: column; gap: var(--cds-gap-lg); margin-top: var(--cds-gap-sm); min-height: 200px; }
.hp-fg { display: flex; flex-direction: column; gap: var(--cds-gap-sm); }
.hp-fgt { font-size: var(--cds-font-size-body); font-weight: var(--cds-font-weight-medium); display: flex; align-items: baseline; gap: var(--cds-gap-sm); }
.hp-fgt span { font-weight: 400; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.hp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--cds-gap-md); }
.hp-post { border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); overflow: hidden; display: flex; flex-direction: column; background: var(--color-bg); min-width: 0; }
.hp-thumb { position: relative; aspect-ratio: 4 / 5; background: var(--cds-chart-grid); max-width: 100%; }
.hp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-badge { position: absolute; top: 8px; left: 8px; background: var(--color-fg); color: var(--color-bg); border-radius: 999px; font-size: var(--cds-font-size-caption); font-weight: var(--cds-font-weight-medium); padding: 2px 8px; }
.hp-stats { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--cds-gap-sm); padding: var(--cds-pad-sm) var(--cds-pad-md) var(--cds-pad-md); font-size: var(--cds-font-size-caption); margin: 0; }
.hp-stats dt { color: var(--color-fg-muted); }
.hp-stats dd { margin: 0; text-align: right; }
.hp-stats .hp-key { color: var(--color-fg); font-weight: var(--cds-font-weight-medium); }
.hp-stats .hp-key + dd { font-weight: var(--cds-font-weight-medium); }
.hp-stats .hp-key, .hp-stats .hp-key + dd { background: var(--cds-chart-grid); }

/* Site additions: loading placeholder and "not in this report" state. */
.dash-skeleton { color: transparent !important; position: relative; }
.dash-skeleton::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: min(6rem, 80%); height: .8em; border-radius: 6px; background: var(--cds-chart-grid); }
.hp-chart.dash-skeleton::after, .hp-top.dash-skeleton::after, .hp-gender.dash-skeleton::after { top: 0; transform: none; width: 100%; height: 100%; }
.hp-fail.hp-none::before { background: var(--cds-chart-muted); }
.hp-tile .hp-tv { min-height: 1.15em; }