.metal-prices { background: #e7ece6; color: var(--ink); border-bottom: 1px solid var(--line); padding: 14px 4.5% 11px; }
.metal-inner { max-width: 1456px; margin: auto; display: grid; grid-template-columns: 145px minmax(0,1fr) auto; align-items: center; column-gap: 28px; }
.metal-heading h2 { font-family: var(--sans); font-size: 13px; line-height: 1.4; letter-spacing: .2px; margin: 0 0 4px; }
.metal-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.metal-quotes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 0; }
.metal-quotes > div { min-width: 0; border-left: 1px solid #b9c7b8; padding-left: 20px; }
.metal-quotes dt { font-size: 11px; line-height: 1.4; color: var(--muted); margin-bottom: 2px; }
.metal-quotes dd { margin: 0; line-height: 1.35; }
.metal-quotes strong { font-size: 20px; font-weight: 500; letter-spacing: -.25px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.metal-suffix { font-size: 10px; color: var(--muted); white-space: nowrap; }
.metal-quotes time { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.metal-quotes [data-state=stale] time { color: #71592c; }
.metal-controls { display: flex; align-items: center; gap: 8px; }
.metal-unit { position: relative; }
.metal-unit > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.metal-unit select { font-size: 11px; min-height: 44px; max-width: 135px; padding: 7px 22px 7px 10px; color: var(--ink); border: 1px solid #b9c7b8; background-color: #f0f2ee; border-radius: 2px; }
.metal-refresh { display: grid; place-items: center; padding: 0; width: 44px; height: 44px; background: transparent; color: var(--ink); border: 1px solid #b9c7b8; border-radius: 2px; cursor: pointer; }
.metal-refresh svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.metal-foot { grid-column: 1/-1; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding-top: 9px; font-size: 10px; line-height: 1.5; color: var(--muted); }
.metal-foot p { margin: 0; }
.metal-status::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--slate-green); vertical-align: 1px; margin-right: 5px; }
.metal-prices:not([data-state=live]) .metal-status::before { background: #826b41; }
.metal-foot a { text-decoration: underline; text-underline-offset: 2px; }
.metal-about { margin-left: auto; position: relative; }
.metal-about summary { cursor: pointer; min-height: 22px; text-decoration: underline; text-underline-offset: 2px; }
.metal-about[open] { flex-basis: 100%; margin-left: 0; }
.metal-about p { max-width: 780px; margin: 8px 0 3px; font-size: 12px; line-height: 1.7; }
.metal-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
@media(max-width:1000px) {
  .metal-inner { grid-template-columns: 118px minmax(0,1fr) auto; column-gap: 15px; }
  .metal-quotes { gap: 12px; }
  .metal-quotes > div { padding-left: 12px; }
  .metal-quotes strong { font-size: 17px; }
  .metal-suffix { display: none; }
}
@media(max-width:760px) {
  .metal-prices { padding: 7px 5% 8px; }
  .metal-inner { grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; }
  .metal-heading { display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: baseline; }
  .metal-heading h2 { margin: 0; font-size: 12px; }
  .metal-heading p { font-size: 10px; }
  .metal-controls { grid-column: 2; grid-row: 1; gap: 5px; }
  .metal-unit select { max-width: 113px; min-height: 44px; padding-left: 7px; font-size: 10px; }
  .metal-refresh { width: 36px; border: 0; }
  .metal-quotes { grid-column: 1/-1; grid-row: 2; gap: 9px; }
  .metal-quotes > div { padding-left: 10px; }
  .metal-quotes > div:first-child { padding-left: 0; border-left: 0; }
  .metal-quotes strong { font-size: 17px; }
  .metal-quotes time { font-size: 9px; }
  .metal-foot { gap: 3px 10px; padding-top: 3px; font-size: 9px; }
  .metal-about summary { min-height: 30px; display: flex; align-items: center; }
}
@media(max-width:360px) {
  .metal-quotes strong { font-size: 15px; }
  .metal-heading p { display: none; }
}