/* /nomination/<id>/: one Senate nomination, its facts, the Senate's roll
   calls on it and its actions in order. Tokens only (theme.css), so the ink
   scale and paper follow dark mode on their own. */
.nomination-container { max-width: 820px; }
.nomination-eyebrow { margin: var(--sp-1) 0 0; }
.nomination-title { margin: var(--sp-1) 0 var(--sp-3); text-wrap: balance; }
.nomination-title-post {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink-700);
}
.nomination-description { max-width: 72ch; margin: 0 0 var(--sp-5); color: var(--ink-700); line-height: 1.55; }

.nomination-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-6);
}
.nomination-facts dt {
  padding-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.nomination-facts dd { margin: 0; overflow-wrap: anywhere; }

.nomination-section {
  margin: 0 0 var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ink-200);
}
.nomination-section h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.nomination-votes .pill { white-space: nowrap; }

/* The actions, oldest first, on a rail; a floor action (cloture, the vote
   on confirmation) gets a filled marker. */
.nomination-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--sp-1); }
.nomination-step {
  position: relative;
  padding: 0 0 var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--ink-200);
}
.nomination-step:last-child { padding-bottom: 0; }
.nomination-step::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 0.3em;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink-400);
  border-radius: var(--r-full);
  background: var(--paper);
}
.nomination-step-floor::before { border-color: var(--civic-blue); background: var(--civic-blue); }
.nomination-step-date {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-600);
  font-variant-numeric: tabular-nums;
}
.nomination-step-text { display: block; line-height: 1.5; overflow-wrap: anywhere; }

.nomination-source { margin-top: var(--sp-6); }

@media (max-width: 576px) {
  .nomination-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nomination-facts dd { margin-bottom: var(--sp-3); }
}