/* chart_card — period-selector buttons + canvas wrap + hover tooltip.
   The .pm-chart-tip/#pm-chart-tip .pm-tip-* rows stay bespoke: chart-core.js
   owns the tooltip's DOM (via createElement + textContent, never innerHTML),
   so they have no markup to carry utility classes. Everything else is
   Bootstrap-expressible and lives on chart_card.html.

   Every rule below is declared twice: the public tooltip keeps its
   singleton id `#pm-chart-tip` (chart_card.html's markup, byte-pinned by a
   golden test); admin tooltips use `.pm-chart-tip` (ISSUE #550 tükk 4 —
   chart_frame.html's DOM contract gives every chart its own `{id}-tip`).
   Class form is listed first so this file also stays the single etalon a
   contrast test reads. */

.pm-pb-group { gap: var(--sp-4xs); }

.pm-pb {
    font-size: var(--fs-2xs);
    color: var(--text2); /* A11Y: was --text3 (#9CA3AF fails AA); --text2 = #5A6478, 5.95:1 */
    background: var(--pm-surface);
    border: 1px solid var(--div);
    border-radius: var(--radius-sm);
    transition: all var(--dur-fast);
}

.pm-pb:hover { border-color: var(--text2); color: var(--navy); } /* A11Y: 1.4.11 — was --text3 (2.54:1 on the button's own --pm-surface fill, 2.35:1 over --pm-bg, both under 3:1); --text2 = #5A6478, 5.95:1 / 5.50:1. See .pm-dp-cancel:hover in article_feed.css for the hover-weight decision. */
.pm-pb.on { background: var(--navy); border-color: var(--navy); color: var(--pm-surface); }

.pm-pb:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.pm-chart-wrap { height: 130px; margin-top: var(--sp-lg); }

.pm-chart-tip,
#pm-chart-tip {
    position: absolute;
    background: var(--navy-900);
    color: var(--pm-surface);
    font-size: var(--fs-2xs);
    pointer-events: none;
    min-width: 190px;
    display: none;
    z-index: 20;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    box-shadow: var(--pm-shadow-lg);
}

.pm-chart-tip .pm-tip-date,
#pm-chart-tip .pm-tip-date {
    font-weight: 700;
    margin-bottom: var(--sp-2xs);
    padding-bottom: var(--sp-2xs);
    border-bottom: 1px solid var(--navy-50);
}

.pm-chart-tip .pm-tip-row,
#pm-chart-tip .pm-tip-row { display: flex; justify-content: space-between; gap: var(--sp-lg); margin-bottom: var(--sp-4xs); }
.pm-chart-tip .pm-tip-row.sep,
#pm-chart-tip .pm-tip-row.sep { margin-top: var(--sp-3xs); padding-top: var(--sp-3xs); border-top: 1px solid var(--navy-50); }
/* Active-series highlight (D-2's colour swatch already carries the series
   identity; this just weights its row's text over the rest). */
.pm-chart-tip .pm-tip-row.on,
#pm-chart-tip .pm-tip-row.on { font-weight: 700; }
/* Light-on-dark: this rule's ground is the tooltip's --navy-900 fill, so the
   light-palette --text2 would measure 2.62:1 here and is forbidden. 6.14:1
   against #0F2440, versus the tooltip's own --pm-surface primary text at
   15.59:1 — dim by design. Same pixels this shipped as --text3; only the name
   changed, because --text3 was 2.54:1 on white and could not survive as a
   light-palette token. */
.pm-chart-tip .pm-tip-pct,
#pm-chart-tip .pm-tip-pct { color: var(--text-on-navy-dim); }
/* Series colours were picked for light cards; on the dark tip several fall
   under 3:1 (the darkest source colour is 1.60:1, --pm-series-2 is 1.34:1).
   A surface-coloured ring gives every swatch 15.6:1 against --navy-900
   without changing the palette the lines use (WCAG 1.4.11). */
.pm-chart-tip .pm-tip-swatch,
#pm-chart-tip .pm-tip-swatch { box-shadow: 0 0 0 1px var(--pm-surface); }