/* gold-price.html — extends price-reference (pages.css) */
.gold-price-reference {
  margin-top: 0;
}

.gold-price-source {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.95;
  max-width: 520px;
  margin: 16px auto 0;
}

.gold-price-source a {
  color: var(--mint-deep);
}

.gold-price-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px auto 8px;
  max-width: 520px;
}

.gold-unit-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid var(--mint-line);
  border-radius: 8px;
  background: #fff;
}

.gold-unit-switch-label {
  font-size: 12px;
  color: var(--ink-soft);
  margin-right: 2px;
}

.gold-unit-btn {
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}

.gold-unit-btn.active {
  background: var(--mint);
  color: var(--ink);
  font-weight: 600;
}

.gold-live-hint {
  max-width: 560px;
  margin: 0 auto 16px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.7;
  color: #8a6d3b;
  background: #fff8eb;
  border: 1px solid #f0e0b8;
  border-radius: 8px;
  text-align: center;
}

.gold-live-hint.hidden { display: none; }

.gold-live-hint code {
  font-size: 12px;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: var(--radius-ui);
}

.gold-refresh-msg {
  text-align: center;
  font-size: 14px;
  margin: 0 auto 12px;
  max-width: 520px;
}

.gold-refresh-msg.hidden { display: none; }
.gold-refresh-msg--ok { color: var(--mint-deep); }
.gold-refresh-msg--err { color: #b45309; }

.gold-price-state {
  max-width: 720px;
  margin: 0 auto;
}

.gold-price-state.hidden { display: none; }

.gold-price-state--loading,
.gold-price-state--empty {
  text-align: center;
  padding: 32px 20px;
  font-size: 14px;
  color: var(--ink-soft);
}

.gold-price-badge-wrap {
  text-align: center;
  margin-bottom: 12px;
}

.source-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.source-pill--bot { background: #e8f8f8; color: #0d6b6e; }
.source-pill--cached { background: #f5f0e8; color: #8a6d3b; }
.source-pill--manual { background: #eee; color: #555; }
.source-pill--fallback { background: #fde8e8; color: #9b2c2c; }

.gold-price-snapshot {
  max-width: 520px;
}

.gold-price-sell-amt {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  font-weight: 600;
}

.gold-price-meta {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 8px auto 0;
  max-width: 520px;
}

.gold-price-meta.hidden { display: none; }

.gold-price-stale {
  font-size: 13px;
  color: #b45309;
  background: #fff8eb;
  padding: 10px 14px;
  border-radius: 8px;
  max-width: 520px;
  margin: 12px auto 0;
  line-height: 1.6;
}

.gold-price-stale.hidden { display: none; }

.gold-price-note {
  text-align: center;
  max-width: 520px;
  margin: 12px auto 20px;
}

.gold-price-approx {
  margin: 0 0 10px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.7;
  text-align: left;
}

.gold-price-approx__mark {
  color: #c53030;
  font-weight: 700;
  margin-right: 2px;
}

.gold-price-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.gold-alloy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.gold-alloy-table th,
.gold-alloy-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0ebe4;
  text-align: left;
}

.gold-alloy-table th:last-child,
.gold-alloy-table td:last-child {
  text-align: center;
  font-weight: 600;
}

.gold-alloy-table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 640px) {
  .gold-price-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .gold-unit-switch {
    justify-content: center;
  }

  .gold-price-toolbar .btn {
    width: 100%;
    text-align: center;
  }
}