/* /graduates-v2 (Phase 4 preview). Chart shell, tooltip and legend come from
   movers-v2.css (.mk-*); this file adds the dumbbell chart and KPI colours. */
.gr { --gr-bow: var(--foreground); --gr-rc: #9a9aa0; --mk-dot: #b9b9bf; --mk-sleeper: var(--chart-sold, #16a34a); }
.pcr-ksplit i.gr-out { background: var(--foreground); }
.pcr-ksplit i.gr-soon { background: var(--border-strong, #d4d4d8); }
.gr .pcr-khist__c em { font-size: 9px; }

/* Dumbbell: one row per graduate with both cards */
.gr-dumb { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.gr-dumb__key { display: flex; gap: var(--space-4); margin-bottom: var(--space-2); font-size: var(--text-xs); color: var(--muted-fg); }
.gr-dumb__key span { display: inline-flex; align-items: center; gap: 6px; }
.gr-dumb__key i, .gr-k-bow, .gr-k-rc { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.gr-k-bow { background: var(--gr-bow); }
.gr-k-rc { background: #fff; border: 2px solid var(--gr-rc); }
.gr-dumb__axis { position: relative; height: 18px; margin: 0 180px 0 200px; font: 500 10px var(--font-mono); color: var(--muted-fg); }
.gr-dumb__axis span { position: absolute; transform: translateX(-50%); }
.gr-dumb__row { display: grid; grid-template-columns: 200px 1fr 180px; align-items: center; min-height: 44px; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.gr-dumb__row:hover { background: var(--surface); }
.gr-dumb__name { display: flex; flex-direction: column; min-width: 0; padding-right: var(--space-3); }
.gr-dumb__name b { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-dumb__name small { font-size: 11px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-dumb__track { position: relative; height: 20px; }
.gr-dumb__tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.gr-dumb__line { position: absolute; top: 9px; height: 2px; background: var(--border-strong, #c9c9ce); }
.gr-dumb__dot { position: absolute; top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; }
.gr-dumb__dot.is-bow { background: var(--gr-bow); }
.gr-dumb__dot.is-rc { background: #fff; border: 2px solid var(--gr-rc); }
.gr-dumb__vals { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; font-family: var(--font-mono); white-space: nowrap; }
.gr-dumb__vals b { font-size: var(--text-sm); }
.gr-dumb__vals small { font-size: 11px; color: var(--muted-fg); }
.gr-dumb__vals em { font-style: normal; font-size: 11px; font-weight: 600; }
.gr-dumb__vals em.is-up { color: var(--up); }
.gr-dumb__vals em.is-down { color: var(--down); }

/* Timeline dots: sold = filled ink, asking = grey */
.gr-pt circle { fill: #b9b9bf; }
.gr-pt.is-sold circle { fill: var(--foreground); fill-opacity: .85; }
.mk-key i.gr-k-sold { background: var(--foreground); }

.gr-table td small { margin-top: 2px; }
@media (max-width: 767px) {
  .gr-dumb { padding: var(--space-3); }
  .gr-dumb__axis { margin: 0 0 0 0; display: none; }
  .gr-dumb__row { grid-template-columns: 1fr auto; grid-template-areas: 'n v' 't t'; padding: var(--space-2) 0; row-gap: 4px; }
  .gr-dumb__name { grid-area: n; }
  .gr-dumb__vals { grid-area: v; }
  .gr-dumb__track { grid-area: t; }
  .gr-table .hide-sm { display: none; }
}