.commodities-view { padding: var(--menu-divider-title-gap) 0 80px; }

.commodities-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 48px;
  align-items: end;
  padding-bottom: var(--hero-title-bottom-gap);
  border-bottom: 1px solid var(--ink);
}
.commodities-hero h1 { margin: 0; font-size: clamp(40px, 5vw, 68px); line-height: .94; letter-spacing: -.07em; }
.commodities-hero .description { max-width: 760px; }
.commodities-status { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding-bottom: 4px; text-align: right; }
.commodities-status .status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px var(--green-light); }
.commodities-status strong, .commodities-status time { display: block; }
.commodities-status strong { font-size: 12px; }
.commodities-status time { margin-top: 4px; color: var(--muted); font: 10px "DM Mono"; }

.commodities-summary { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--ink); }
.commodities-summary article { min-width: 0; padding: 20px; border-right: 1px solid var(--line); background: var(--card); }
.commodities-summary article:last-child { border-right: 0; }
.commodities-summary span, .commodities-summary strong, .commodities-summary small { display: block; }
.commodities-summary span { color: var(--orange); font: 10px "DM Mono"; letter-spacing: .08em; text-transform: uppercase; }
.commodities-summary strong { margin-top: 16px; overflow: hidden; font: 500 clamp(17px, 1.7vw, 24px) "DM Mono"; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.commodities-summary small { margin-top: 7px; color: var(--muted); font: 10px "DM Mono"; }
.commodities-summary .warm { background: color-mix(in srgb, var(--orange) 14%, var(--card)); }
.commodities-summary .dark { background: var(--ink); color: var(--card); }
.commodities-summary .dark small { color: var(--muted); }

.commodities-workspace { padding-top: 48px; }
.commodities-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 16px; }
.commodities-section-heading h2 { margin: 5px 0 0; font-size: 30px; letter-spacing: -.045em; }
.commodities-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.commodities-filters button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 600 11px "DM Mono"; cursor: pointer; }
.commodities-filters button.active { border-color: var(--ink); background: var(--ink); color: var(--card); }
.commodities-filters button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.commodities-table { overflow: hidden; border: 1px solid var(--ink); border-radius: 14px; background: var(--card); }
.commodities-row { display: grid; grid-template-columns: minmax(160px, 1.05fr) minmax(108px, .68fr) minmax(140px, .82fr) minmax(180px, 1.1fr) minmax(120px, .75fr) minmax(170px, 1fr); align-items: center; min-height: 104px; border-bottom: 1px solid var(--line); }
.commodities-row:last-child { border-bottom: 0; }
.commodities-row > * { min-width: 0; padding: 16px; }
.commodities-table-header { min-height: 42px; background: var(--ink); color: var(--card); }
.commodities-table-header span { padding-block: 12px; color: var(--card); font: 10px "DM Mono"; letter-spacing: .05em; text-transform: uppercase; }
.commodities-name span, .commodities-name strong, .commodities-name small,
.commodities-contract strong, .commodities-contract span, .commodities-contract small,
.commodities-price strong, .commodities-price span,
.commodities-change strong, .commodities-change span,
.commodities-market-state strong, .commodities-market-state span, .commodities-market-state small { display: block; }
.commodities-name span { margin-bottom: 6px; color: var(--orange); font: 10px "DM Mono"; text-transform: uppercase; }
.commodities-name strong { font-size: 17px; letter-spacing: -.025em; }
.commodities-name small { margin-top: 5px; color: var(--muted); font: 10px "DM Mono"; }
.commodities-contract strong { font: 600 17px "DM Mono"; }
.commodities-contract span, .commodities-contract small { margin-top: 4px; color: var(--muted); font: 10px "DM Mono"; }
.commodities-price strong { font: 500 18px "DM Mono"; }
.commodities-price span { margin-top: 6px; color: var(--muted); font: 10px "DM Mono"; }
.commodities-chart { padding-block: 12px; }
.commodities-sparkline { display: block; width: 100%; height: 48px; }
.commodities-sparkline line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.commodities-sparkline path { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.commodities-sparkline.negative path { stroke: var(--red); }
.commodities-sparkline-empty { color: var(--muted); font: 10px "DM Mono"; }
.commodities-change strong { color: var(--green); font: 600 15px "DM Mono"; }
.commodities-change.negative strong { color: var(--red); }
.commodities-change.unavailable strong { color: var(--muted); }
.commodities-change span { margin-top: 5px; color: var(--muted); font: 10px "DM Mono"; }
.commodities-market-state { border-left: 1px solid var(--line); }
.commodities-market-state strong { font-size: 12px; }
.commodities-market-state.current strong { color: var(--green); }
.commodities-market-state.stale strong { color: var(--gold); }
.commodities-market-state.unavailable strong { color: var(--red); }
.commodities-market-state span, .commodities-market-state small { margin-top: 5px; color: var(--muted); font: 10px "DM Mono"; line-height: 1.4; }
.commodities-message { margin: 0; padding: 36px 20px; color: var(--muted); font: 12px "DM Mono"; }
.commodities-message.error { color: var(--red-dark); }

.commodities-methodology { display: flex; justify-content: space-between; gap: 32px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
.commodities-methodology p { max-width: 830px; margin: 0; font-size: 12px; line-height: 1.65; }
.commodities-methodology span { font: 10px/1.5 "DM Mono"; text-align: right; }

@media (max-width: 1100px) {
  .commodities-row { grid-template-columns: minmax(150px, 1fr) minmax(105px, .6fr) minmax(130px, .75fr) minmax(160px, 1fr) minmax(120px, .65fr); }
  .commodities-table-header span:last-child, .commodities-market-state { display: none; }
}

@media (max-width: 800px) {
  .commodities-hero { grid-template-columns: 1fr; gap: 22px; }
  .commodities-status { justify-content: flex-start; text-align: left; }
  .commodities-summary { grid-template-columns: repeat(2, 1fr); }
  .commodities-summary article:nth-child(2) { border-right: 0; }
  .commodities-summary article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .commodities-section-heading { align-items: flex-start; flex-direction: column; }
  .commodities-filters { justify-content: flex-start; }
  .commodities-table { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .commodities-table-header { display: none; }
  #commodities-rows { display: grid; gap: 12px; }
  .commodities-row { grid-template-columns: 1fr 1fr; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
  .commodities-row > * { padding: 14px 16px; }
  .commodities-name { grid-column: 1; }
  .commodities-contract { grid-column: 2; text-align: right; }
  .commodities-price { grid-column: 1; border-top: 1px solid var(--line); }
  .commodities-change { grid-column: 2; border-top: 1px solid var(--line); text-align: right; }
  .commodities-chart { grid-column: 1 / -1; padding-top: 0; }
  .commodities-market-state { display: block; grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; }
  .commodities-methodology { flex-direction: column; }
  .commodities-methodology span { text-align: left; }
}

@media (max-width: 520px) {
  .commodities-summary { grid-template-columns: 1fr; }
  .commodities-summary article { border-right: 0; border-bottom: 1px solid var(--line); }
  .commodities-summary article:last-child { border-bottom: 0; }
  .commodities-summary strong { white-space: normal; }
}