/* Peer comparison (widgets/peers/peers.js). Marks: full = project colour, partly = half-filled, no = empty ring. */
.pr { container-type: size; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 12px 22px; font-size: 12.5px; line-height: 1.35; color: var(--ink); text-align: left; }
.pr button { font: inherit; color: inherit; }
.pr__top { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.pr__head { display: flex; align-items: baseline; gap: 8px; }
.pr__eyebrow { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pr__head strong { font-size: 15px; font-weight: 600; }
.pr__muted { color: var(--muted); font-size: 11.5px; }
.pr__key { display: flex; gap: 14px; color: var(--ink-2); font-size: 11.5px; }
.pr__key span { display: inline-flex; align-items: center; gap: 6px; }

/* Marks */
.pr__g { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--mark); }
.pr__g[data-v="2"] { background: var(--mark); }
.pr__g[data-v="1"] { background: linear-gradient(90deg, var(--mark) 50%, transparent 50%); }
.pr__g[data-v="0"] { box-shadow: inset 0 0 0 1.5px var(--muted); opacity: .7; }

.pr__body { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.pr__wrap { min-height: 0; overflow-x: hidden; overflow-y: auto; }
.pr__table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; }
.pr__table th, .pr__table td { padding: 0; border-bottom: 1px solid var(--line); }
.pr__table thead th { position: sticky; top: 0; z-index: 2; background: var(--tile-bg); vertical-align: bottom; border-bottom-color: var(--ink-2); }
.pr__table thead th:first-child { width: 96px; }
.pr__table thead th:last-child { width: 64px; }
.pr__short { display: none; }
.pr__sort { display: block; width: 100%; padding: 0 4px 6px; border: 0; background: none; text-align: center; font-size: 11px !important; line-height: 1.15; color: var(--ink-2) !important; }
th:first-child .pr__sort { text-align: left; padding-left: 0; }
th[aria-sort] .pr__sort { color: var(--ink) !important; font-weight: 600; }
th[aria-sort] .pr__sort::after { content: ' ↓'; color: var(--mark); }
th[aria-sort=ascending] .pr__sort::after { content: ' ↑'; }
tbody tr { transition: transform .45s cubic-bezier(.2,.7,.2,1), background-color .2s ease; }
tbody tr.is-on { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.pr__school { display: block; padding: 7px 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr__cell { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 30px; padding: 0 4px; border: 0; background: none; }
.pr__label { display: none; font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr__cell:focus-visible { outline: 2px solid var(--mark); outline-offset: -2px; }
.pr__table[data-hot=tags] [data-col=tags], .pr__table[data-hot=events] [data-col=events], .pr__table[data-hot=video] [data-col=video],
.pr__table[data-hot=college] [data-col=college], .pr__table[data-hot=ux] [data-col=ux], .pr__table[data-hot=email] [data-col=email],
.pr__table[data-hot=mag] [data-col=mag], .pr__table[data-hot=yt] [data-col=yt] { background: color-mix(in srgb, var(--mark) 9%, transparent); }
.pr__total { padding: 0 0 0 8px !important; }
.pr__total { position: relative; }
.pr__bar { display: inline-block; vertical-align: middle; width: calc(100% - 22px); height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ink-2) calc(var(--f) * 100%), var(--line) 0); }
.pr__n { display: inline-block; width: 18px; text-align: right; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* The note under the table: one line in a rounded box */
.pr__note { display: flex; align-items: center; gap: 8px; min-width: 0; height: 36px; padding: 0 14px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); white-space: nowrap; overflow: hidden; }
.pr__kicker { flex: none; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pr__note strong { flex: none; font-size: 13px; }
.pr__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }

/* Wide frames have room for the short labels. */
@container (min-width: 1180px) {
  .pr__label { display: inline; }
  .pr__cell { justify-content: flex-start; }
}
@container (max-width: 640px) {
  .pr { padding: 12px 12px 10px 16px; }
  .pr__key { display: none; }
  .pr__body { gap: 8px; }
  .pr__note { height: 30px; padding: 0 10px; }
  .pr__table thead th:first-child { width: 68px; }
  .pr__table thead th:last-child { width: 30px; }
  .pr__bar { display: none; }
  .pr__sort { font-size: 10px !important; padding: 0 1px 4px; }
  .pr__full { display: none; }
  .pr__short { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  th:first-child .pr__short, th:last-child .pr__short { writing-mode: horizontal-tb; transform: none; }
  .pr__muted { display: none; }
}
@media (prefers-reduced-motion: reduce) { tbody tr { transition: none; } }