/* PhD routes: the pay and its buying power in two aligned columns, so the amounts, tags and bars line up from row to row
   (Jacob, 10 Oct 2026). Rows keep the compact height set in app.css: at most two short lines.
   Loaded by viewPhd only, so the printable plan's stylesheets (and the example PDFs) never change. */
.phd-rows .phd-amt { display: inline; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.phd-rows .phd-pay em { font-size: .74rem; }
.phd-rows .phd-power { display: flex; align-items: center; gap: 10px; max-width: none; margin: 0; }
.phd-rows .phd-power-bar { flex: none; width: 96px; height: 6px; }
.phd-rows .phd-power b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.phd-rows .phd-power small { font-size: .74rem; color: var(--ink-3); }
@media (min-width: 721px) {
  .phd-rows .phd-cols, .phd-rows .phd-sum { grid-template-columns: minmax(110px, 1fr) minmax(104px, .7fr) minmax(170px, 1.2fr) minmax(150px, .9fr) minmax(140px, 1.4fr); }
  /* the amount on top, its tax note under it in small type */
  .phd-rows .phd-pay { display: grid; justify-items: start; line-height: 1.2; }
  .phd-rows .phd-net { line-height: 1.2; }
  .phd-rows .phd-power b { min-width: 3.4em; }
}
@media (max-width: 720px) {
  .phd-rows .phd-power { grid-column: 1 / -1; font-size: .88rem; }
  .phd-rows .phd-power-bar { width: 80px; }
  .phd-rows .phd-pay em, .phd-rows .phd-net { margin-left: 6px; }
}