/* =====================================================================
   Live price chart — card UI (Gold/Silver/Platinum spot).
   White rounded card: "Live Chart" badge + subtitle + metal tabs, current
   price block, "Historical … Spot Prices" + range tabs, gradient area chart
   (SVG injected by prices.js, with in-SVG axis labels).
   ===================================================================== */

.price-chart {
  background: var(--color-bg);
  padding-block: 32px;
  /* Per-metal accent — chart line/area, current-price pill, active metal tab,
     Live Chart badge and the active range tab all key off these. */
  --pc-accent: var(--og-blue);
  --pc-accent-soft: #e9f2fe;
  --pc-accent-ink: #1f3954;
}
.price-chart[data-metal="gold"]     { --pc-accent: #c49a26; --pc-accent-soft: #fcefcb; --pc-accent-ink: #6b521b; }
.price-chart[data-metal="silver"]   { --pc-accent: #7c8696; --pc-accent-soft: #e9edf2; --pc-accent-ink: #3f4654; }
.price-chart[data-metal="platinum"] { --pc-accent: #7a5af5; --pc-accent-soft: #ece8fe; --pc-accent-ink: #4a36a0; }

/* Page H1 — primary keyword heading above the live-chart card. */
.price-chart__title {
  margin: 0 0 20px;
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-36);
  line-height: var(--lh-40);
  letter-spacing: 0;
}
@media (max-width: 767.98px) {
  .price-chart__title { font-size: var(--fs-28); line-height: 1.2; margin-bottom: 16px; }
}

.price-chart__card {
  background: var(--gray-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-20);
  box-shadow: 0 1px 2px rgba(31, 57, 84, 0.04), 0 12px 32px rgba(31, 57, 84, 0.06);
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---- Header: badge + subtitle | metal tabs ---- */
.price-chart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.price-chart__head-lead { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.price-chart__badge {
  align-self: flex-start;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-accent);
  background: var(--pc-accent-soft);
  padding: 4px 12px;
  border-radius: var(--radius-20);
}
.price-chart__subtitle {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  color: var(--dusty-blue);
}

/* Segmented metal tabs (Gold / Silver / Platinum) */
.price-chart__metals {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-8);
  overflow: hidden;
  flex: none;
}
.price-chart__metal {
  padding: 16px 30px;
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  color: var(--dusty-blue);
  text-align: center;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, background 0.15s ease;
}
.price-chart__metal:hover { background: var(--color-bg); }
.price-chart__metal--active {
  color: var(--pc-accent);
  font-weight: var(--fw-medium);
  border-bottom-color: var(--pc-accent);
}

/* ---- Current price block ---- */
.price-chart__priceblock { display: flex; flex-direction: column; gap: 8px; }
.price-chart__current-pill {
  align-self: flex-start;
  font-size: var(--fs-13, 13px);
  font-weight: var(--fw-medium);
  color: var(--pc-accent-ink);
  background: var(--pc-accent-soft);
  padding: 4px 12px;
  border-radius: var(--radius-5);
}
.price-chart__current-value {
  margin: 0;
  font-size: var(--fs-44);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  color: var(--gray-8);
}
.price-chart__meta {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  font-size: var(--fs-14);
  color: var(--dusty-blue);
}
.price-chart__change-amount--up, .price-chart__change-percent--up { color: var(--green); }
.price-chart__change-amount--down, .price-chart__change-percent--down { color: var(--red); }
/* Shown by prices.js only when a selling premium is configured for the metal. */
.price-chart__premium-note { margin: 6px 0 0; font-size: var(--fs-12); color: var(--gray-6, #888); }
.price-chart__premium-note[hidden] { display: none; }

/* Unit + currency switchers (injected by prices.js into the meta row, right-aligned) */
.price-chart__controls { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.price-chart__currency select,
.price-chart__unit select {
  font-family: var(--font-sans); font-size: var(--fs-14); font-weight: var(--fw-medium);
  color: var(--gray-8); padding: 6px 28px 6px 10px;
  border: 1px solid var(--color-border); border-radius: var(--radius-8);
  background-color: var(--gray-0); cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("../../img/chevron-down.svg"); background-repeat: no-repeat;
  background-position: right 9px center; background-size: 10px 6px;
}
.price-chart__currency select:focus-visible,
.price-chart__unit select:focus-visible { outline: 2px solid var(--og-blue); outline-offset: 2px; }

/* ---- Chart header: historical title + range tabs ---- */
.price-chart__chart-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
}
.price-chart__chart-title {
  margin: 0;
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--gray-8);
}
.price-chart__spans { display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 22px); }
.price-chart__span {
  padding-bottom: 4px;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--gray-6);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.price-chart__span:hover { color: var(--charcoal); }
.price-chart__span--active { color: var(--pc-accent); border-bottom-color: var(--pc-accent); }

/* ---- Chart view toggles (% change / compare metals) + legend ---- */
.price-chart__chart-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.price-chart__toggle {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--gray-7);
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--gray-0);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.price-chart__toggle:hover { color: var(--gray-8); }
.price-chart__toggle--on {
  background: var(--pc-accent-soft);
  color: var(--pc-accent-ink);
  border-color: var(--pc-accent);
}
.price-chart__toggle--disabled { opacity: 0.4; cursor: default; }
.price-chart__legend {
  display: inline-flex;
  gap: 14px;
  margin-left: 4px;
  font-size: 13px;
  color: var(--gray-7);
}
.price-chart__legend[hidden] { display: none; }
.price-chart__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.price-chart__legend-item i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---- Plot area (grey) + SVG mount ---- */
.price-chart__plot {
  background: var(--gray-1, #f2f4f7);
  border-radius: var(--radius-8);
  overflow: hidden;
}
.price-chart__graphic {
  position: relative;
  width: 100%;
  height: 320px;
  cursor: crosshair;
}
.price-chart__graphic svg { display: block; width: 100%; height: 100%; }

/* Hover tooltip (snaps to nearest data point) */
.price-chart__tip {
  display: none;
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--gray-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-8);
  box-shadow: 0 6px 20px rgba(31, 57, 84, 0.16);
  padding: 8px 12px;
  white-space: nowrap;
}
.price-chart__tip-date { display: block; font-size: var(--fs-12); color: var(--gray-6); }
.price-chart__tip-val { display: block; font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--gray-8); }
/* Static fallback layers (shown only until prices.js renders the live SVG) */
.price-chart__area, .price-chart__line { position: absolute; inset: 0; }
.price-chart__area img, .price-chart__line img { width: 100%; height: 100%; object-fit: fill; }

/* ---- Tablet (600–1023) ---- */
@media (max-width: 1023.98px) {
  .price-chart__card { padding: 20px 24px 24px; gap: 20px; }
  .price-chart__metals { flex-wrap: wrap; }
  .price-chart__metal { padding: 12px 18px; font-size: var(--fs-14); }
  .price-chart__current-value { font-size: 36px; }
  .price-chart__chart-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .price-chart__chart-title { font-size: var(--fs-20); }
  .price-chart__spans { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 2px; }
  .price-chart__chart-controls { flex-wrap: wrap; }
}

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
  .price-chart { padding-block: 20px; }
  .price-chart__card { padding: 20px; gap: 20px; border-radius: var(--radius-10); }
  .price-chart__head { flex-direction: column; gap: 16px; }
  .price-chart__metals { width: 100%; }
  .price-chart__metal { flex: 1 1 0; padding: 12px 8px; font-size: var(--fs-14); }
  .price-chart__subtitle { font-size: var(--fs-16); }
  .price-chart__current-value { font-size: 34px; }
  .price-chart__meta { gap: 20px; }
  .price-chart__chart-head { align-items: flex-start; gap: 12px; }
  .price-chart__chart-title { font-size: var(--fs-18); }
  .price-chart__spans { flex-wrap: wrap; gap: 14px; }
  .price-chart__graphic { height: 240px; }
}

/* ---- Phone (≤599): revert tablet-only changes not overridden by ≤767 block — matches main ≤599 ---- */
@media (max-width: 599.98px) {
  .price-chart__chart-head { flex-direction: row; }
  .price-chart__metals { flex-wrap: nowrap; }
  .price-chart__spans { overflow-x: visible; padding-bottom: 0; }
}