/* ==========================================================================
   04 THE PROOF, version C (drag slider): readout panels (markup in proof.js → slider)
   Each side's figures sit on a solid panel at its outer edge, headed white for
   before and yellow for after like the tags: measure and note left, figure right.
   ========================================================================== */
.pf-cfig .pf-ba__info { justify-content: flex-end; gap: var(--s-4); }
.pf-c1 { background: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.pf-c1--after { box-shadow: inset 0 0 0 1.5px var(--cg-yellow); }
.pf-c1__tag { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s-5); font-family: var(--font-ui); font-stretch: var(--ui-stretch); font-weight: 700; font-size: 0.8125rem; letter-spacing: var(--ui-tracking); text-transform: uppercase; color: var(--cg-black); background: var(--cg-white); }
.pf-c1--after .pf-c1__tag { background: var(--cg-yellow); }
.pf-c1 ul { padding: var(--s-1) var(--s-5) var(--s-2); }
.pf-c1 li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; }
.pf-c1 li + li { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.pf-c1 li > span b { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--cg-white); }
.pf-c1 li > span small { display: block; margin-top: 3px; font-size: 0.8125rem; line-height: 1.35; color: var(--n-300); }
.pf-c1 strong { font-family: var(--font-data); font-weight: 700; font-size: calc(clamp(2.25rem, 1.3rem + 1.6vw, 3.5rem) * var(--data-scale)); line-height: 0.9; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--cg-white); }
.pf-c1 strong small { font-size: 0.42em; margin-left: 3px; color: var(--n-300); }
.pf-c1--before strong { color: var(--n-200); }

@media (max-width: 767px) {
  .pf-cfig .pf-ba__handle span { top: var(--s-8); margin-top: 0; }   /* clear of the panels, which fill each half on phones */
  .pf-c1__tag { min-height: 34px; padding: 0 var(--s-2); font-size: 0.625rem; }
  .pf-c1 ul { padding: 0 var(--s-2); }
  .pf-c1 li { grid-template-columns: 1fr; gap: 4px; padding: var(--s-2) 0; }
  .pf-c1 li > span b { font-size: 0.6875rem; }
  .pf-c1 li > span small { display: none; }
  .pf-c1 strong { font-size: calc(1.75rem * var(--data-scale)); }
}