.shell:has(> .home-discovery) { grid-template-areas: "search" "discovery" "results"; }
.shell:has(> .home-discovery) > .results-panel:not(.is-search-active) { display: none; }
.home-discovery { grid-area: discovery; display: grid; gap: 1rem; min-width: 0; }
.home-discovery[hidden], .home-discovery [hidden] { display: none !important; }
.shell:has(> .results-panel.is-search-active) > .home-discovery { display: none; }
.discovery-pros, .discovery-ranks { padding: clamp(1.2rem, 2.2vw, 2rem); }
.home-discovery .panel::after { opacity: .55; }
.discovery-heading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.discovery-heading h2 { color: var(--secondary); font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -.025em; }
.discovery-subtitle { margin: .5rem 0 0; color: #fff; font-size: .84rem; line-height: 1.55; }
.discovery-text-button { flex-shrink: 0; padding: .5rem 0; border: 0; border-radius: 3px; background: transparent; color: var(--secondary); font: inherit; font-size: .8rem; cursor: pointer; }
.discovery-text-button:hover { color: var(--text); }
.discovery-text-button span { margin-left: .35rem; }
.discovery-status { margin: 0; color: var(--muted); font-size: .88rem; }
.discovery-pro-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .85rem; }
.discovery-pro-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid rgba(255,151,162,.48); border-radius: 12px; background: #121115; color: var(--text); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.discovery-pro-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.discovery-pro-portrait { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #34202b, #121115 80%); }
.discovery-pro-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 65%, #121115); }
.discovery-pro-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 200ms ease; }
.discovery-pro-card:hover img { transform: scale(1.035); }
.discovery-pro-copy { position: relative; padding: .7rem .85rem .95rem; }
.discovery-pro-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .94rem; font-weight: 700; line-height: 1.25; }
.discovery-pro-archetype { display: block; margin-top: .35rem; padding-right: .8rem; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.discovery-pro-arrow { position: absolute; bottom: .82rem; right: .65rem; color: var(--secondary); font-size: .88rem; }
.discovery-playlist { flex-shrink: 0; padding: .35rem .7rem; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: var(--muted); font-size: .73rem; }
.discovery-metrics { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.discovery-metric-button { padding: .55rem .95rem; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.025); color: var(--muted); font: inherit; font-size: .78rem; cursor: pointer; transition: background 140ms ease, border-color 140ms ease; }
.discovery-metric-button:hover { border-color: #ff95a2; color: var(--text); }
.discovery-metric-button[aria-pressed="true"] { border-color: rgba(255,74,99,.7); background: var(--accent-soft); color: #ffd8df; }
.discovery-text-button:focus-visible, .discovery-pro-card:focus-visible, .discovery-metric-button:focus-visible { outline: 2px solid var(--secondary); outline-offset: 4px; }
.discovery-chart-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 22%); gap: clamp(1rem, 3vw, 3rem); align-items: center; background: #0e131b; }
.discovery-chart-main { min-width: 0; }
.discovery-chart-unit { margin: 0 0 .15rem; color: var(--muted); font-size: .71rem; }
.discovery-chart { width: 100%; min-height: 240px; }
.discovery-chart svg { display: block; width: 100%; height: 260px; overflow: visible; }
.discovery-chart-grid { stroke: rgba(255,255,255,.08); stroke-dasharray: 3 5; }
.discovery-chart-label { fill: var(--muted); font-family: inherit; font-size: 11px; }
.discovery-chart-line { fill: none; stroke: #ff647d; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.discovery-chart-point { fill: #171116; stroke: #ff8296; stroke-width: 2.5; cursor: pointer; }
.discovery-chart-point[aria-pressed="true"] { fill: #ff8296; stroke: #fff0f3; }
.discovery-chart-point:focus-visible { outline: none; stroke: white; stroke-width: 4; }
.discovery-chart-hit { fill: transparent; cursor: pointer; }
.discovery-rank-detail { padding: 1.1rem 0 1.1rem 1.5rem; }
.discovery-rank-heading { display: flex; align-items: center; gap: .6rem; }
.discovery-rank-heading img { width: 42px; height: 42px; object-fit: contain; }
.discovery-rank-heading p { margin: 0; font-size: .85rem; font-weight: 650; }
.discovery-rank-value { margin: .65rem 0 .15rem; line-height: 1.15; }
.discovery-rank-value strong { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.discovery-rank-value span { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.discovery-metric-description { margin: 1.1rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.65; }
@media (min-width: 1700px) { .discovery-pro-portrait { max-height: 230px; } }
@media (max-width: 1300px) { .discovery-pro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  /* Leave room for discovery instead of reserving a full screen for search. */
  .shell:has(> .home-discovery:not([hidden])):not(:has(> .results-panel.is-search-active)) > .search-panel { min-height: 0; }
  .discovery-heading { align-items: flex-start; flex-wrap: wrap; }
  .discovery-pro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
  .discovery-pro-copy { padding: .5rem .5rem .75rem; }
  .discovery-pro-name { font-size: .82rem; }
  .discovery-pro-archetype { font-size: .65rem; }
  .discovery-pro-arrow { right: .4rem; bottom: .65rem; }
  .discovery-chart-layout { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  .discovery-rank-detail { padding: 1rem; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; }
  .discovery-rank-value { margin-top: .5rem; }
  .discovery-metric-description { margin-top: .75rem; }
}
@media (max-width: 480px) {
  .discovery-pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discovery-pro-name { font-size: .94rem; }
  .discovery-pro-copy { padding: .65rem .7rem .85rem; }
  .discovery-pro-arrow { right: .65rem; bottom: .75rem; }
  .discovery-metrics { gap: .4rem; }
  .discovery-metric-button { padding: .5rem .6rem; font-size: .71rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-discovery .panel { animation: none; }
  .discovery-pro-card, .discovery-pro-portrait img { transition: none; }
  .discovery-pro-card:hover, .discovery-pro-card:hover img { transform: none; }
}