/* JinglePig price history chart. Brand tokens match the coin catalog; dark
   mode follows html[data-jp-theme="dark"] from the JinglePig theme. */
.jpph {
	--jpph-surface: #FFFFFF;
	--jpph-ink: #20343C;
	--jpph-strong: #173D3A;
	--jpph-muted: #4f6963;
	--jpph-line-c: #DCE7E1;
	--jpph-grid: #E8EFEA;
	--jpph-btn-on: #173D3A;
	--jpph-btn-on-ink: #FFFFFF;
	--jpph-series: #A4700A;
	margin: 24px 0;
	padding: 18px 20px 14px;
	background: var(--jpph-surface);
	border: 1px solid var(--jpph-line-c);
	border-radius: 14px;
	color: var(--jpph-ink);
}
.jpph[data-metal="XAG"] { --jpph-series: #68757C; }
.jpph[data-metal="XPT"] { --jpph-series: #4F5F86; }
.jpph[data-metal="XPD"] { --jpph-series: #1F6B5E; }
.jpph[data-metal="XCU"], .jpph[data-metal="HG"] { --jpph-series: #A8532A; }

.jpph-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 14px; }
.jpph-controls[hidden] { display: none; }
.jpph-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.jpph-btn {
	font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.2;
	padding: 7px 12px; border-radius: 999px; cursor: pointer;
	background: transparent; color: var(--jpph-strong); border: 1px solid var(--jpph-line-c);
}
.jpph-btn:hover { border-color: var(--jpph-strong); }
.jpph-btn[aria-pressed="true"] { background: var(--jpph-btn-on); color: var(--jpph-btn-on-ink); border-color: var(--jpph-btn-on); }
.jpph-btn:focus-visible, .jpph-svg:focus-visible { outline: 2px solid var(--jpph-strong); outline-offset: 2px; }

.jpph-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.jpph-name { font-weight: 700; color: var(--jpph-strong); }
.jpph-price { font-size: 1.6rem; font-weight: 800; color: var(--jpph-strong); }
.jpph-unit, .jpph-change { color: var(--jpph-muted); font-size: .92rem; }

.jpph-figure { position: relative; margin: 0; }
.jpph-plot { min-height: 220px; transition: opacity .15s; }
.jpph--loading .jpph-plot { opacity: .45; }
.jpph-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.jpph-grid { stroke: var(--jpph-grid); stroke-width: 1; }
.jpph-base { stroke: var(--jpph-line-c); stroke-width: 1; }
.jpph-axis { fill: var(--jpph-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.jpph-line { fill: none; stroke: var(--jpph-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.jpph-area { fill: var(--jpph-series); opacity: .1; stroke: none; }
.jpph-dot { fill: var(--jpph-series); stroke: var(--jpph-surface); stroke-width: 2; }
.jpph-cross { stroke: var(--jpph-muted); stroke-width: 1; }
.jpph-hit { fill: transparent; cursor: crosshair; }
.jpph-empty { display: flex; align-items: center; justify-content: center; margin: 0; color: var(--jpph-muted); text-align: center; border: 1px solid var(--jpph-grid); border-radius: 10px; padding: 0 16px; }
.jpph-tip {
	position: absolute; pointer-events: none; z-index: 2;
	display: flex; flex-direction: column; gap: 2px;
	padding: 7px 10px; border-radius: 8px; white-space: nowrap;
	background: var(--jpph-surface); border: 1px solid var(--jpph-line-c);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12); font-size: .85rem; color: var(--jpph-muted);
}
.jpph-tip strong { font-size: 1rem; color: var(--jpph-strong); }
.jpph-tip[hidden] { display: none; }

.jpph-note { margin: 10px 0 6px !important; font-size: .85rem; color: var(--jpph-muted); }
.jpph-table summary { cursor: pointer; font-weight: 600; color: var(--jpph-strong); font-size: .92rem; }
.jpph-table-scroll { max-height: 320px; overflow: auto; margin-top: 8px; }
.jpph-table table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0; }
.jpph-table th, .jpph-table td { padding: 6px 8px; border-bottom: 1px solid var(--jpph-grid); text-align: left; }
.jpph-table .jpph-num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
	.jpph { padding: 14px 12px 10px; }
	.jpph-btn { padding: 6px 10px; font-size: .85rem; }
	.jpph-price { font-size: 1.35rem; }
	.jpph-axis { font-size: 11px; }
}

@media screen {
	html[data-jp-theme="dark"] .jpph {
		--jpph-surface: #152826;
		--jpph-ink: #DCE7E2;
		--jpph-strong: #F1F6F3;
		--jpph-muted: #A3BAB3;
		--jpph-line-c: #2B4541;
		--jpph-grid: #223A36;
		--jpph-btn-on: #9ED9C7;
		--jpph-btn-on-ink: #0F1C1B;
		--jpph-series: #E8B352;
	}
	html[data-jp-theme="dark"] .jpph[data-metal="XAG"] { --jpph-series: #B9C4CA; }
	html[data-jp-theme="dark"] .jpph[data-metal="XPT"] { --jpph-series: #A9B8E0; }
	html[data-jp-theme="dark"] .jpph[data-metal="XPD"] { --jpph-series: #7FD1BC; }
	html[data-jp-theme="dark"] .jpph[data-metal="XCU"], html[data-jp-theme="dark"] .jpph[data-metal="HG"] { --jpph-series: #E89A6E; }
}
@media (forced-colors: active) {
	.jpph-line { stroke: CanvasText; }
	.jpph-btn[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}