/* Pace notes: page-local additions to the shared notes components. */

/* the popover is a tall 340 × 794 screenshot: show it whole instead of the 3:4 crop */
.pc-cover .lede-media { max-width: 260px; margin-left: auto; background: var(--bg-3); }
.pc-cover .lede-media img { aspect-ratio: 340 / 794; object-fit: contain; height: auto; }
@media (max-width: 900px) { .pc-cover .lede-media { max-width: 220px; } }
@media (max-width: 560px) {
  .pc-cover { grid-column: 1 / span 6; }
  .pc-cover .lede-media { max-width: 150px; margin-left: 0; }
}

.nt-page .pc-code { white-space: pre; }
.nt-page .pc-table { max-width: 100%; }
.pc-table th, .pc-table td { overflow-wrap: anywhere; }
.pc-table td code { white-space: nowrap; }
.pc-table td:first-child, .pc-table th { overflow-wrap: normal; }
.pc-table.lbl td:first-child { white-space: nowrap; }
.pc-table td.pc-pend { color: var(--prog); font: 500 var(--t-2xs)/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

/* factor bands: 0 → 2 on a linear axis; ease off < 1, on pace 1–1.25, speed up ≥ 1.25 */
.pc-factor { margin: 6px 0 22px; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); max-width: 68ch; }
.pc-factor figcaption { color: var(--fg-3); font-size: var(--t-2xs); letter-spacing: .07em; margin-bottom: 12px; }
.pc-scale { display: flex; height: 12px; border-radius: 3px; overflow: hidden; gap: 2px; }
.pc-scale i { display: block; flex: 0 0 calc(var(--w) - 2px); }
.pc-scale .ease, .pc-key b.ease { background: var(--prog); }
.pc-scale .on, .pc-key b.on { background: color-mix(in srgb, var(--fg-3) 60%, transparent); }
.pc-scale .up, .pc-key b.up { background: var(--accent); }
.pc-ax { position: relative; height: 16px; margin: 6px 0 10px; color: var(--fg-3); font-size: 9px; }
.pc-ax span { position: absolute; left: var(--x); top: 0; white-space: nowrap; transform: translateX(-50%); }
.pc-ax span:first-child { transform: none; }
.pc-ax span.end { left: auto; right: 0; transform: none; }
.pc-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--fg-2); font-size: .86rem; }
.pc-key li { display: flex; align-items: center; gap: 10px; }
.pc-key b { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; }

.pc-limit { padding: 12px 16px; border: 1px dashed var(--line-2); border-radius: 8px; }

.nt-page .nt-end .textlink { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .pc-table th, .pc-table td { padding: 9px 8px; font-size: .8rem; }
  .pc-table td code { white-space: normal; }
  .pc-table.wide table { min-width: 560px; }
  .nt-page .pc-code { font-size: .72rem; }
  .pc-ax span:nth-child(3) { transform: translateX(-10%); }
}