/* Jewel Gold Rate Bar — matches Jewel Clouds theme */
.jgrb {
	--jgrb-ink: #1d1714;
	--jgrb-muted: #8b817a;
	--jgrb-line: #ece4d8;
	--jgrb-soft: #faf7f2;
	--jgrb-gold: #bd8b30;
	--jgrb-badge: #dcc39a;
	--jgrb-up: #2f7d4f;
	--jgrb-down: #c0392b;
	position: relative;
	z-index: 1000;
	display: flex;
	justify-content: center;
	padding: 8px 16px;
	background: #fff;
	border-bottom: 1px solid var(--jgrb-line);
	font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--jgrb-ink);
	line-height: 1;
}
.jgrb *,
.jgrb *::before,
.jgrb *::after { box-sizing: border-box; }

/* ---------- Pill ---------- */
.jgrb__pill {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 40px;
	padding: 0 6px 0 16px;
	background: var(--jgrb-soft);
	border: 1px solid var(--jgrb-line);
	border-radius: 999px;
	cursor: pointer;
	max-width: 100%;
	transition: border-color .2s ease;
}
.jgrb__pill:hover,
.jgrb.is-open .jgrb__pill { border-color: #dccfb9; }

.jgrb__icon {
	width: 20px;
	height: 14px;
	flex-shrink: 0;
	fill: var(--jgrb-gold);
}
.jgrb__icon path:first-child { fill: #d3a24a; }

.jgrb__label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--jgrb-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ---------- Slider ---------- */
.jgrb__viewport {
	position: relative;
	height: 28px;
	overflow: hidden;
	flex-shrink: 0;
	transition: width .3s ease;
}
.jgrb__slide {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 100%);
	transition: transform .55s cubic-bezier(.4, 0, .2, 1), opacity .55s ease;
}
.jgrb__slide.is-active { opacity: 1; transform: translate(-50%, 0); }
.jgrb__slide.is-leaving { opacity: 0; transform: translate(-50%, -100%); }

/* before JS measures width, let the first slide size the viewport */
.jgrb:not(.is-ready) .jgrb__slide.is-active { position: relative; left: auto; transform: none; }

.jgrb__badge {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--jgrb-badge);
	color: var(--jgrb-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}
.jgrb__price {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}
.jgrb__unit {
	font-size: 12px;
	font-weight: 500;
	color: var(--jgrb-muted);
}

/* ---------- Trend graph + % ---------- */
.jgrb__trend {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.jgrb__arrow {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.jgrb__trend--up   { color: var(--jgrb-up); }
.jgrb__trend--down { color: var(--jgrb-down); }
.jgrb__trend--flat { color: var(--jgrb-muted); }

/* ---------- Toggle ---------- */
.jgrb__toggle {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--jgrb-muted);
	cursor: pointer;
	flex-shrink: 0;
	transition: background .2s ease, color .2s ease;
}
.jgrb__toggle svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .25s ease;
}
.jgrb__toggle:hover { background: #f0e8db; color: var(--jgrb-ink); }
.jgrb__toggle:focus-visible { outline: 2px solid var(--jgrb-gold); outline-offset: 2px; }
.jgrb.is-open .jgrb__toggle svg { transform: rotate(180deg); }

/* ---------- Dropdown panel ---------- */
.jgrb__panel {
	position: absolute;
	top: calc(100% - 2px);
	left: 50%;
	transform: translateX(-50%);
	width: min(440px, calc(100vw - 24px));
	padding: 18px 18px 14px;
	background: #fff;
	border: 1px solid var(--jgrb-line);
	border-radius: 16px;
	box-shadow: 0 18px 40px -18px rgba(29, 23, 20, .28);
	cursor: default;
}
.jgrb__panel[hidden] { display: none; }

.jgrb__panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.jgrb__panel-title { font-size: 15px; font-weight: 600; }
.jgrb__panel-date  { font-size: 12px; color: var(--jgrb-muted); }

.jgrb__list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.jgrb__row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--jgrb-line);
	margin: 0;
}
.jgrb__row:last-child { border-bottom: 0; }
.jgrb__row-price strong {
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.jgrb__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}
.jgrb__tab {
	height: 28px;
	padding: 0 12px;
	margin: 0;
	border: 1px solid var(--jgrb-line);
	border-radius: 999px;
	background: #fff;
	color: var(--jgrb-muted);
	font: 600 12px/1 Manrope, system-ui, sans-serif;
	cursor: pointer;
	transition: .2s ease;
}
.jgrb__tab:hover { color: var(--jgrb-ink); border-color: #dccfb9; }
.jgrb__tab.is-active { background: var(--jgrb-ink); border-color: var(--jgrb-ink); color: #fff; }
.jgrb__tab:focus-visible { outline: 2px solid var(--jgrb-gold); outline-offset: 2px; }

.jgrb__chart { position: relative; width: 100%; height: 190px; }
.jgrb__chart canvas { display: block; max-width: none; }
.jgrb__chart-empty {
	margin: 0;
	padding: 60px 0;
	text-align: center;
	font-size: 13px;
	color: var(--jgrb-muted);
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
	.jgrb { padding: 6px 10px; }
	.jgrb__pill { gap: 9px; height: 36px; padding-left: 12px; }
	.jgrb__label { display: none; }
	.jgrb__price { font-size: 15px; }
	.jgrb__badge { height: 20px; padding: 0 8px; font-size: 11px; }
	.jgrb__arrow { width: 14px; height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.jgrb__slide,
	.jgrb__toggle svg,
	.jgrb__viewport { transition: none; }
}