/*
 * V3 "Ivory & Navy" - /live-price page rules
 * Loaded only on /live-price and its /gold-silver-price-today alias, on top
 * of core.css.
 *
 * .v3-section, .v3-section.on-panel, .v3-section-header, .v3-segmented,
 * .v3-table*, .v3-alert*, .v3-card-tag*, .v3-disclosure*, .v3-tnum/
 * .v3-cents/.v3-num are already in core.css - not redefined here.
 *
 * .v3-metal/.v3-figure/.v3-unit/.v3-dir exist on the home page too
 * (home.css:40-46) but scoped under .v3-price-rail-item, which this page
 * doesn't load - scoped fresh here under .v3-lp-metal-card instead of
 * pulling home.css in for four rules, same call cart.css/order.css already
 * make for their own copied-verbatim patterns (see this file's own
 * components, e.g. .v3-lp-gauge, which have no shared-page equivalent at all).
 */

/* ============================================================
   TOKENS - --metal-ag is chart-series-only (the silver line needs a colour
   distinct from --gold so the two series read apart), not a "silver = this
   colour" rule for prices - --gold stays the one colour for money anywhere
   on the site, silver prices included (see header.php's --strip-gold and
   home.css's .v3-figure, both applied to AU *and* AG the same way). Picked
   as a cool grey-blue in both modes so it never gets mistaken for --accent.
   ============================================================ */
:root { --metal-ag: #6B7A99; }
html.dark { --metal-ag: #9AA8C4; }

/* ============================================================
   HERO
   ============================================================ */
.v3-lp-hero { padding-top: 24px; }
/* .v3-banner-slot's own 48px top margin (core.css) assumes it follows real
   content above it; as the hero's first element that just doubles up with
   this section's own padding-top - same fix product.css already applies
   for its own top banner slot (product.css:15). */
.v3-lp-hero > .v3-inner > .v3-banner-slot:first-child { margin-top: 0; }
.v3-lp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.v3-lp-title { font-size: 38px; line-height: 1.15; color: var(--ink); margin-bottom: 10px; }
.v3-lp-title em { font-style: italic; }
.v3-lp-sub { font-size: 15px; color: var(--ink-soft); margin: 0 0 32px; max-width: 52ch; }

/* Ratio sits between the two metal cards, not buried in the caption line
   below - it's the one figure that relates them, not a third independent
   stat, so a slim center card reads better than a fourth equal-weight box. */
.v3-lp-metal-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 20px; margin-bottom: 20px; }
.v3-lp-metal-card { background: var(--plate); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.v3-lp-metal-card .v3-metal { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.v3-lp-metal-row { display: flex; align-items: baseline; gap: 8px; }
.v3-lp-metal-row--sub { margin-top: 6px; opacity: .72; }
.v3-lp-metal-row--sub .v3-figure { font-size: 17px; }
.v3-lp-metal-card .v3-figure { font-family: Manrope, sans-serif; font-weight: 800; font-variant-numeric: lining-nums tabular-nums; font-size: 26px; color: var(--gold); }
.v3-lp-metal-card .v3-unit { font-size: 13px; color: var(--ink-soft); }
.v3-lp-dir { font-size: 14px; }

.v3-lp-ratio-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; min-width: 120px; }
.v3-lp-ratio-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.v3-lp-ratio-value { font-family: Manrope, sans-serif; font-weight: 800; font-size: 22px; color: var(--ink); }
.v3-lp-ratio-sub { font-size: 11px; color: var(--ink-soft); }

.v3-lp-meta { font-size: 13px; color: var(--ink-soft); margin: 0; }

@media (max-width: 640px) {
    .v3-lp-title { font-size: 28px; }
    .v3-lp-metal-grid { grid-template-columns: 1fr; }
    .v3-lp-ratio-card { flex-direction: row; justify-content: space-between; padding: 12px 20px; }
}

/* ============================================================
   SECTION SUBTITLES - the descriptive line under a .v3-section-header h2,
   shared by the chart / buy sections.
   ============================================================ */
.v3-lp-h2-sub { font-size: 13.5px; color: var(--ink-soft); margin: -20px 0 24px; }

/* ============================================================
   CHART
   ============================================================ */
.v3-lp-chart-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.v3-lp-chart-controls .v3-segmented { margin-bottom: 0; }
.v3-lp-chart-controls .v3-segmented:first-child { flex: 0 1 300px; }
#v3-lp-unit-group { flex: 0 1 200px; transition: opacity .2s ease; }
#v3-lp-unit-group.is-disabled { opacity: .4; pointer-events: none; }

.v3-lp-chart-box { background: var(--plate); border: 1px solid var(--line); border-radius: 14px; padding: 12px; min-height: 300px; }
.v3-lp-chart-credit { font-size: 12px; color: var(--ink-soft); text-align: right; margin: 8px 4px 0; }
.v3-lp-chart-credit a { color: inherit; text-decoration: underline; }

/* ============================================================
   GAUGE - the page's one signature device: gold-shop vs our 999. Two
   labelled anchors, a hairline run between them, the actual distance called
   out once in the middle - the number that matters here was never either
   price alone.
   ============================================================ */
.v3-lp-gauge { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin-bottom: 28px; }
.v3-lp-gauge-track { display: flex; align-items: center; gap: 14px; }
.v3-lp-gauge-anchor { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.v3-lp-gauge-anchor--start { text-align: left; }
.v3-lp-gauge-anchor--end { text-align: right; }
.v3-lp-gauge-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.v3-lp-gauge-value { font-family: Manrope, sans-serif; font-weight: 800; font-size: 19px; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.v3-lp-gauge-line { flex: 1 1 auto; height: 1px; background: var(--line); min-width: 24px; }
.v3-lp-gauge-gap { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--plate); }
.v3-lp-gauge-gap-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.v3-lp-gauge-gap-value { font-family: Manrope, sans-serif; font-weight: 800; font-size: 15px; font-variant-numeric: lining-nums tabular-nums; }

@media (max-width: 640px) {
    .v3-lp-gauge-track { flex-wrap: wrap; justify-content: center; row-gap: 14px; }
    .v3-lp-gauge-line { display: none; }
    .v3-lp-gauge-anchor--start, .v3-lp-gauge-anchor--end { flex: 1 1 40%; text-align: center; }
    .v3-lp-gauge-gap { order: 3; flex: 1 1 100%; }
}

/* ============================================================
   COPY BLOCKS - legacy marketing copy, placed next to what it explains:
   two under the gauge (buy section), two in the closing section, then
   the pricing policy as fine print.
   ============================================================ */
.v3-lp-copy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; }
.v3-lp-copy-section .v3-lp-copy-grid { margin-top: 0; }
.v3-lp-copy h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.v3-lp-copy p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 10px; }
.v3-lp-copy p:last-child { margin-bottom: 0; }
.v3-lp-copy .v3-card-tag { vertical-align: 1px; margin: 0 2px; }

/* Policy is terms, not marketing - set apart as fine print below a rule. */
.v3-lp-policy { max-width: 760px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.v3-lp-policy h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.v3-lp-policy p { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 8px; }
.v3-lp-policy p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .v3-lp-copy-grid { grid-template-columns: 1fr; gap: 24px; }
}