/* Position-history page: standalone reading layout on the readout.css tokens. */
html, body { height: auto; overflow: auto; }
body { background: var(--bg-read); color: var(--ink); }
.ph { max-width: 820px; margin: 0 auto; padding: 32px 24px 80px; font-family: var(--font-ui); }
.ph h1 { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin: 6px 0 12px; }
.ph h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; }
.ph-back a, .ph a { color: var(--accent); }
.ph a:hover { color: var(--accent-hover); }
.ph-back { font-size: 13px; margin: 0; }
.ph-lede { font-family: var(--font-read); font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 66ch; margin: 0 0 20px; }
.ph-section { margin-top: 40px; }
.ph-muted { color: var(--ink-muted); font-size: 13px; line-height: 1.5; }
.ph-banner { border: 1px solid var(--border); background: var(--bg-soft); border-radius: var(--radius-md); padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.ph-banner-draft { border-color: var(--famous-border); background: var(--famous-bg); color: var(--famous-ink); }
.ph-date { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.ph-chip { display: inline-block; font-size: var(--chip-sm-size); padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.ph-chip-label { background: var(--bg-soft); color: var(--ink-soft); }

.ph-obs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; line-height: 1.55; }

.ph-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 0 0 16px; font-size: 12px; color: var(--ink-soft); }
.ph-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ph-legend svg { width: 14px; height: 14px; }
.ph-chart { margin: 0 0 22px; }
.ph-chart figcaption { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.ph-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.ph-grid { stroke: var(--border-soft); stroke-width: 1; }
.ph-tick { font-size: 10px; fill: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ph-lane { font-size: 11.5px; fill: var(--ink-soft); }
.ph-lane-rule { stroke: var(--border-soft); stroke-dasharray: 2 3; }
.ph-band { stroke: var(--accent); stroke-opacity: 0.28; stroke-width: 6; stroke-linecap: round; }
.mk { stroke: var(--accent); stroke-width: 1.6; fill: var(--accent); }
.mk-first { fill: var(--bg-read); }
.mk-wording { fill: var(--famous-badge); stroke: var(--famous-badge); }
.mk-condition { fill: var(--spk-zakharova); stroke: var(--spk-zakharova); }
.mk-changed { fill: var(--spk-putin); stroke: var(--spk-putin); }
.mk-unclear { fill: none; stroke: var(--ink-muted); stroke-dasharray: 2 2; }
.ph-chart a:focus { outline: none; }
.ph-chart a:focus .mk, .ph-chart a:hover .mk { stroke: var(--ink); stroke-width: 3; }

.ph-dim { font-size: 16px; font-weight: 600; margin: 28px 0 10px; }
.ph-rec { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 12px; background: var(--bg-read); scroll-margin-top: 16px; }
.ph-rec.is-draft { border-style: dashed; }
.ph-rec:target { border-color: var(--accent); box-shadow: var(--shadow-md); }
.ph-rec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ph-who { font-size: 13px; color: var(--ink-soft); margin: 8px 0 4px; }
.ph-prop { font-size: 14.5px; line-height: 1.5; margin: 0 0 8px; }
.ph-ru { margin: 0; padding: 10px 12px; background: var(--quote-bg); color: var(--quote-ink); border-radius: var(--radius-sm); font-family: var(--font-read); font-size: 15px; line-height: 1.6; }
.ph-note { font-size: 13px; color: var(--ink-muted); margin: 8px 0 0; }
.ph-src { font-size: 12.5px; color: var(--ink-muted); margin: 8px 0 0; }

.ph-cov { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ph-cov th, .ph-cov td { padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--border-soft); }
.ph-cov th:first-child { text-align: left; }
.ph-cov td.ph-bar { width: 55%; text-align: left; position: relative; }
.ph-bar span { display: block; height: 8px; border-radius: 4px; }
.ph-bar-total { background: var(--border-soft); }
.ph-bar-hit { background: var(--accent); margin-top: -8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
  .ph { padding: 20px 14px 60px; }
  .ph h1 { font-size: 24px; }
}