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

/* ---------------------------------------------------------------- H3 XY chart (same block in view-series.css) */
.bpt--size .h3xy { margin: 6px 0 0; padding: 18px 18px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.bpt--size .h3xy .bpc-tone--gold { --bpc-c: var(--bpc-gold-deep); }
.bpt--size .h3xy__plot { position: relative; height: 270px; margin: 6px 26px 0 40px; }
.bpt--size .h3xy__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bpt--size .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--size .h3xy__line--ref { stroke-width: 1.5; stroke-opacity: .4; }
.bpt--size .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--size .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--size .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--size .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--size .h3xy__pt--bar i { width: 11px; height: 11px; border-radius: 2px; }
.bpt--size .h3xy__pt--mix i { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); }
.bpt--size .h3xy__pt--ref i { width: 8px; height: 8px; opacity: .55; }
.bpt--size .h3xy__pt[data-tip]:hover, .bpt--size .h3xy__pt.is-hot { outline: none; filter: none; }
.bpt--size .h3xy__pt:hover i, .bpt--size .h3xy__pt.is-hot i, .bpt--size .h3xy__pt:focus-visible i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bpc-c, var(--bpc-ink)); }
.bpt--size .h3xy__pt:focus-visible { outline: 2px solid var(--gold, #A87B30); outline-offset: 0; }
.bpt--size .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--size .h3xy__x { position: relative; height: 18px; margin: 8px 26px 0 40px; font-size: 12px; color: var(--bpc-muted); }
.bpt--size .h3xy__xt { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.bpt--size .h3xy__cap { margin: 4px 0 0 40px; font-size: 11.5px; color: var(--bpc-muted); }
.bpt--size .h3xy__legend { margin-top: 12px; }
.bpt--size .h3xy__key { display: inline-block; flex: 0 0 auto; background: var(--bpc-c, var(--bpc-ink)); }
.bpt--size .h3xy__key--line { width: 18px; height: 3px; border-radius: 2px; }
.bpt--size .h3xy__key--ref { width: 18px; height: 2px; opacity: .45; }
.bpt--size .h3xy__key--coin { width: 10px; height: 10px; border-radius: 50%; }
.bpt--size .h3xy__key--bar { width: 10px; height: 10px; border-radius: 2px; }
.bpt--size .h3xy__key--mix { width: 9px; height: 9px; margin: 0 1px; border-radius: 1px; transform: rotate(45deg); }
.bpt--size .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--size .h3xy { padding: 14px 12px 12px; }
	.bpt--size .h3xy__plot { height: 230px; margin: 6px 22px 0 34px; }
	.bpt--size .h3xy__y { left: -34px; width: 28px; font-size: 12px; } /* K1: phone axis labels >= 12 px */
	.bpt--size .h3xy__x { margin: 8px 22px 0 34px; font-size: 12px; }
	.bpt--size .h3xy__xt.is-minor, .bpt--size .h3xy__lab { display: none; }
	.bpt--size .h3xy__cap { margin-left: 34px; }
	.bpt--size .h3xy__legend { gap: 6px 12px; font-size: 12.5px; }
}

/* Format cards: the size curve links each point to its card; show where you landed. */
.bpt--size .bpt-card:target { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(201, 162, 63, .45); }

/* ---------------------------------------------------------------- what a budget buys */
.bpt--size .h3-budget { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.bpt--size .h3-budget__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 26px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.bpt--size .h3-budget__form[hidden] { display: none; }
.bpt--size .h3-budget__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bpt--size .h3-budget__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bpt--size .h3-budget__input { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 18px; font-weight: 700; color: var(--ink); }
.bpt--size .h3-budget__input:focus-within { border-color: var(--ink); outline: 2px solid var(--gold, #A87B30); outline-offset: 1px; }
.bpt--size .h3-budget__input input { width: 10ch; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; font: inherit; color: inherit; font-variant-numeric: tabular-nums; }
.bpt--size .h3-budget__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bpt--size .h3-budget__chips .bpc-chip { min-height: 44px; }
.bpt--size .h3-budget__basis { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.bpt--size .h3-budget__out { min-width: 0; }
.bpt--size .h3-budget__head { margin: 4px 0 10px; font-size: 16px; color: var(--ink); }
.bpt--size .h3-budget__head b { font-size: 18px; font-variant-numeric: tabular-nums; }
.bpt--size .h3-budget__note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.bpt--size .h3-budget__rows { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bpt--size .h3-brow { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 96px; grid-template-areas: "fmt bar oz" "tag what what" ". nums nums"; align-items: center; gap: 4px 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; line-height: 1.45; }
.bpt--size .h3-brow.is-top { border-color: rgba(168, 123, 48, .55); box-shadow: inset 3px 0 0 var(--gold, #A87B30); }
.bpt--size .h3-brow__fmt { grid-area: fmt; min-width: 0; font-weight: 700; }
.bpt--size .h3-brow__fmt a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.bpt--size .h3-brow__fmt a:hover { color: var(--primary); text-decoration-color: currentColor; }
.bpt--size .h3-brow__bar { grid-area: bar; position: relative; display: block; height: 12px; border-radius: 0 4px 4px 0; background: var(--paper); }
.bpt--size .h3-brow__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--bpc-ink); opacity: .7; }
.bpt--size .h3-budget__rows[data-metal="gold"] .h3-brow__bar i { background: var(--bpc-gold); opacity: .9; }
.bpt--size .h3-brow__oz { grid-area: oz; font-size: 16px; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.bpt--size .h3-brow__tag { grid-area: tag; justify-self: start; padding: 2px 9px; border-radius: 999px; background: #F7EFDA; color: #6E4C12; font-size: 12px; font-weight: 700; line-height: 1.5; }
.bpt--size .h3-brow__what { grid-area: what; min-width: 0; }
.bpt--size .h3-brow__what a { font-weight: 650; }
.bpt--size .h3-brow__nums { grid-area: nums; min-width: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bpt--size .h3-brow.is-none { grid-template-areas: "fmt bar oz" ". nums nums"; background: #FAFBFA; }
.bpt--size .h3-brow.is-none .h3-brow__oz { color: var(--muted); font-weight: 600; }
@media (max-width: 767px) {
	.bpt--size .h3-budget__form { padding: 14px; gap: 14px 18px; }
	.bpt--size .h3-budget__field { flex: 1 1 100%; }
	.bpt--size .h3-brow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "fmt oz" "bar bar" "tag tag" "what what" "nums nums"; padding: 12px 14px; }
	.bpt--size .h3-brow.is-none { grid-template-areas: "fmt oz" "bar bar" "nums nums"; }
	.bpt--size .h3-brow__bar { height: 10px; margin: 2px 0; }
}
@media (prefers-reduced-motion: reduce) {
	.bpt--size .h3xy__pt i { transition: none; }
}
@media (forced-colors: active) {
	.bpt--size .h3xy__pt i, .bpt--size .h3xy__key, .bpt--size .h3-brow__bar i { forced-color-adjust: none; }
}