/* styles/grad-v2.css: graduate page parts not in pdp-v2.css (Phase 4, Oct 2026). */
.grad2-hero { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-2); }
.grad2-lede { margin-top: var(--space-2); max-width: 60ch; font-size: var(--text-sm); color: var(--muted-fg); }
.grad2-actions { display: flex; gap: var(--space-2); }
.grad2-kpis { margin-top: var(--space-8); }
.grad2-kpis .pcr-kpi__l { display: flex; align-items: center; gap: 6px; }
.grad2-v.is-sold { color: var(--sold); }
.grad2-v.is-ask { color: var(--asking); }
/* Guide link: grey note box, full hairline border (never a coloured left border) */
.grad2-guide { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--foreground); text-decoration: none; transition: background 150ms, border-color 150ms; }
.grad2-guide:hover { background: var(--muted); border-color: var(--border-strong); }
.grad2-guide:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.grad2-guide span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.grad2-guide b { font-weight: 600; }
.grad2-guide em { font-style: normal; font-size: var(--text-sm); color: var(--muted-fg); }
.grad2-guide svg { width: 18px; height: 18px; flex: none; color: var(--muted-fg); }
.grad2-chartcard { padding: var(--space-4) var(--space-5); }
.grad2-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-3); font-size: var(--text-xs); color: var(--muted-fg); }
.grad2-legend span { display: inline-flex; align-items: center; gap: 6px; }
.grad2-legend b { font-weight: 500; color: var(--foreground); }
.grad2-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.grad2-legend i.k-bow { background: var(--foreground); }
.grad2-legend i.k-rc { background: #2563eb; }
.grad2-legend__n { margin-left: auto; }
.grad2-chart { min-height: 280px; }
.grad2-chart svg { display: block; }
.grad2-chart__empty { display: grid; place-items: center; min-height: 120px; padding: var(--space-6); font-size: var(--text-sm); color: var(--muted-fg); background: var(--surface); border-radius: var(--radius); text-align: center; }
.grad2-chart .g2-grid { stroke: var(--border); stroke-width: 1; }
.grad2-chart .g2-tick { font: 500 11px var(--font-mono); fill: var(--muted-fg); }
.grad2-chart .g2-rel { stroke: var(--muted-fg); stroke-width: 1; stroke-dasharray: 3 3; }
.grad2-chart .g2-sold { stroke: var(--chart-sold); stroke-width: 1.5; stroke-dasharray: 5 4; }
.grad2-chart .g2-soldt { font: 600 11px var(--font-mono); fill: var(--sold); paint-order: stroke; stroke: var(--background); stroke-width: 3px; }
.grad2-chart .g2-bow { fill: none; stroke: var(--foreground); stroke-width: 2.25; stroke-linejoin: round; }
.grad2-chart .g2-rc { fill: none; stroke: #2563eb; stroke-width: 2.25; stroke-linejoin: round; }
.grad2-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-2); }
.grad2-stats > div:not(.grad2-chart__empty) { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--surface); border-radius: var(--radius); }
.grad2-stats em { font-style: normal; font-size: var(--text-xs); color: var(--muted-fg); }
.grad2-stats b { font: 600 var(--text-xl) var(--font-mono); letter-spacing: -0.02em; }
.grad2-stats .grad2-chart__empty { grid-column: 1 / -1; }
.grad2-bio { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3) var(--space-6); margin-top: var(--space-5); }
.grad2-bio dt { font-size: var(--text-xs); color: var(--muted-fg); }
.grad2-bio dd { margin: 2px 0 0; font-weight: 500; }
.grad2-foot { margin-top: var(--space-10); font-size: var(--text-xs); color: var(--muted-fg); }
@media (max-width: 640px) {
  .grad2-legend__n { margin-left: 0; width: 100%; }
  .grad2-chartcard { padding: var(--space-3); }
}