/* /premiums/by-series/ — By series: view styles. Owner: wave H3 (owner #69: fractional ladder + series cards). Loaded only on
   this page, after hub.css, premium-charts.css and premiums.css. Every rule is scoped under .bpt--series and reuses the
   shared tokens (--ink, --muted, --line, --paper, --primary, --gold; chart --bpc-*). The XY chart block (.h3xy) is the
   same as in view-size.css (scoped .bpt--size there). Teal stays reserved for "we lowered our premium"; no red. */

/* ---------------------------------------------------------------- H3 XY chart (same block in view-size.css) */
.bpt--series .h3xy { margin: 6px 0 0; padding: 18px 18px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.bpt--series .h3xy .bpc-tone--gold { --bpc-c: var(--bpc-gold-deep); }
.bpt--series .h3xy__plot { position: relative; height: 270px; margin: 6px 26px 0 40px; }
.bpt--series .h3xy__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bpt--series .h3xy__line { fill: none; stroke: var(--bpc-c, var(--bpc-ink)); stroke-width: 2.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.bpt--series .h3xy__line--ref { stroke-width: 1.5; stroke-opacity: .4; }
.bpt--series .h3xy__y { position: absolute; left: -40px; width: 32px; transform: translateY(-50%); font-size: 11.5px; line-height: 1; text-align: right; color: var(--bpc-muted); font-variant-numeric: tabular-nums; }
.bpt--series .h3xy__med { position: absolute; z-index: 1; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border: 1.5px solid var(--bpc-c, var(--bpc-ink)); border-radius: 50%; opacity: .45; pointer-events: none; }
.bpt--series .h3xy__pt { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; text-decoration: none; cursor: pointer; }
.bpt--series .h3xy__pt i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--bpc-c, var(--bpc-ink)); box-shadow: 0 0 0 2px #fff; transition: box-shadow .12s; }
.bpt--series .h3xy__pt--bar i { width: 11px; height: 11px; border-radius: 2px; }
.bpt--series .h3xy__pt--mix i { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); }
.bpt--series .h3xy__pt--ref i { width: 8px; height: 8px; opacity: .55; }
.bpt--series .h3xy__pt[data-tip]:hover, .bpt--series .h3xy__pt.is-hot { outline: none; filter: none; }
.bpt--series .h3xy__pt:hover i, .bpt--series .h3xy__pt.is-hot i, .bpt--series .h3xy__pt:focus-visible i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bpc-c, var(--bpc-ink)); }
.bpt--series .h3xy__pt:focus-visible { outline: 2px solid var(--gold, #A87B30); outline-offset: 0; }
.bpt--series .h3xy__lab { position: absolute; z-index: 1; transform: translate(12px, -50%); font-size: 12px; font-weight: 650; line-height: 1; white-space: nowrap; color: var(--bpc-c, var(--bpc-ink)); pointer-events: none; }
.bpt--series .h3xy__x { position: relative; height: 18px; margin: 8px 26px 0 40px; font-size: 12px; color: var(--bpc-muted); }
.bpt--series .h3xy__xt { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.bpt--series .h3xy__cap { margin: 4px 0 0 40px; font-size: 11.5px; color: var(--bpc-muted); }
.bpt--series .h3xy__legend { margin-top: 12px; }
.bpt--series .h3xy__key { display: inline-block; flex: 0 0 auto; background: var(--bpc-c, var(--bpc-ink)); }
.bpt--series .h3xy__key--line { width: 18px; height: 3px; border-radius: 2px; }
.bpt--series .h3xy__key--ref { width: 18px; height: 2px; opacity: .45; }
.bpt--series .h3xy__key--coin { width: 10px; height: 10px; border-radius: 50%; }
.bpt--series .h3xy__key--bar { width: 10px; height: 10px; border-radius: 2px; }
.bpt--series .h3xy__key--mix { width: 9px; height: 9px; margin: 0 1px; border-radius: 1px; transform: rotate(45deg); }
.bpt--series .h3xy__key--med { width: 11px; height: 11px; border: 1.5px solid var(--bpc-c, var(--bpc-ink)); border-radius: 50%; background: none; opacity: .6; }
@media (max-width: 599px) {
	.bpt--series .h3xy { padding: 14px 12px 12px; }
	.bpt--series .h3xy__plot { height: 230px; margin: 6px 22px 0 34px; }
	.bpt--series .h3xy__y { left: -34px; width: 28px; font-size: 12px; } /* K1: phone axis labels >= 12 px */
	.bpt--series .h3xy__x { margin: 8px 22px 0 34px; font-size: 12px; }
	.bpt--series .h3xy__xt.is-minor, .bpt--series .h3xy__lab { display: none; }
	.bpt--series .h3xy__cap { margin-left: 34px; }
	.bpt--series .h3xy__legend { gap: 6px 12px; font-size: 12.5px; }
}

/* ---------------------------------------------------------------- the fractional ladder */
.bpt--series .h3-ladder { min-width: 0; }
.bpt--series [data-bpc-chips="ladder"] { margin: 4px 0 12px; }
.bpt--series [data-bpc-chips="ladder"] .bpc-chip { min-height: 40px; }
.bpt--series [data-bpc-chips="ladder"] .bpc-chip[data-tone]::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--bpc-c); box-shadow: 0 0 0 2px #fff; }
.bpt--series .h3xy--ladder .h3xy__pt.is-sel i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bpc-c, var(--bpc-ink)); }
.bpt--series .h3-ladder__detail { min-height: 46px; margin: 10px 0 0; padding: 11px 14px; border-radius: 10px; background: var(--paper); font-size: 14px; line-height: 1.5; color: var(--ink); }
.bpt--series .h3-ladder__detail b { font-weight: 700; }
.bpt--series .h3-ladder__coin { display: inline; }
.bpt--series .h3-ladder__coin a { font-weight: 650; }

.bpt--series .h3-ladder__ref { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 10px 0 0; font-size: 13.5px; color: var(--ink); }
.bpt--series .h3-ladder__reft { margin: 0; color: var(--muted); }
.bpt--series .h3-ladder__ref ul { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.bpt--series .h3-ladder__ref li { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bpt--series .h3-ladder__size { font-weight: 700; }
.bpt--series .h3-ladder__m { color: var(--muted); }

/* ---------------------------------------------------------------- series cards: the lowest premium per ounce today */
.bpt--series .h3-scard__low { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--paper); font-size: 14px; line-height: 1.45; color: var(--ink); }
.bpt--series .h3-scard__coin { display: block; margin-top: 3px; }
.bpt--series .h3-scard__coin a { font-weight: 650; }
.bpt--series .h3-scard__v { font-weight: 650; font-variant-numeric: tabular-nums; }
.bpt--series .h3-scard__low .bpt-lowered { margin-top: 4px; }