/* Dashboard composition. It deliberately overrides legacy selectors while using
   only foundation tokens, so the current product gains a single visual grammar. */
.dashboard-container {
  width: min(100% - (var(--page-gutter) * 2), var(--container-wide));
  max-width: none;
  padding: var(--space-6) 0 var(--space-12);
  min-width: 0;
  overflow-x: clip;
}

html, body { max-width: 100%; overflow-x: hidden; }
#dashboard-main, .ticker-cards-grid, .ticker-col, .ticker-group, .market-hero-card { min-width: 0; max-width: 100%; }
canvas { display: block; }

.board-header {
  /* Header is a navigation component, not a card or surface. */
  min-height: 0;
  margin-bottom: var(--space-5);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: var(--space-4);
}
.header-brand-wrap { gap: var(--space-1); }
.brand-badge { color: var(--color-positive); font-size: var(--text-md); }
.board-time { color: var(--color-text-muted); font-size: var(--text-sm); }
.header-actions { gap: var(--space-2); }
.nav-link, .btn-terminal {
  min-height: 2.5rem;
  padding: 0 var(--space-4);
  border-color: var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: 700 var(--text-md)/var(--leading-tight) var(--font-mono);
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.nav-link:hover { border-color: var(--color-info); background: var(--color-surface-hover); color: var(--color-info); }
.btn-terminal { border-color: color-mix(in srgb, var(--color-positive) 35%, var(--color-border)); color: var(--color-positive); background: color-mix(in srgb, var(--color-positive) 8%, var(--color-surface)); }
.btn-terminal:hover { background: var(--color-positive); color: var(--color-canvas); }

.ticker-cards-grid { gap: var(--space-6); margin-bottom: 0; }
.ticker-col { gap: var(--space-6); }
.ticker-col > .ticker-group + .ticker-group, .ticker-group + .ticker-group { margin-top: 0; }
.ticker-group { display: grid; gap: var(--space-3); }
.ticker-group-header { margin: 0; padding: 0; border: 0; }
.ticker-group-title { color: var(--group-color, var(--color-text)); font-size: var(--text-md); letter-spacing: .12em; }
.ticker-group-grid { gap: var(--space-3); }

.ticker-card, .usd-hero-card, .chart-panel {
  border-color: var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-raised);
}
.ticker-card { min-height: 9.5rem; padding: var(--space-4); }
.ticker-card:hover, .usd-hero-card:hover, .chart-panel:hover { border-color: var(--color-text-muted); background: var(--color-surface-hover); }
.ticker-top { gap: var(--space-2); margin-bottom: var(--space-3); }
.ticker-name, .chart-title { color: var(--color-text); }
.ticker-source { color: var(--color-text-muted); }
.ticker-val { gap: var(--space-1); }
.ticker-unit, .prev-val { color: var(--color-text-muted); }
.ticker-delta { margin-top: var(--space-2); }

.usd-hero-card { margin: 0; padding: var(--space-5); }
.usd-hero-header { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-color: var(--color-divider); }
.usd-hero-header, .market-hero-header { display: none; }
.market-identity { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); font: 900 var(--text-lg)/var(--leading-tight) var(--font-mono); letter-spacing: .08em; }
.usd-hero-title { font-size: var(--text-lg); color: var(--color-text); gap: var(--space-2); }
.usd-hero-quotes { gap: var(--space-3); }
.usd-hero-overview { display: grid; grid-template-columns: minmax(8.5rem, .75fr) minmax(0, 1.25fr); gap: var(--space-3); align-items: stretch; }
.usd-hero-secondary-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-3); }
.usd-quote-panel { padding: var(--space-3); border: 0; border-radius: 0; background: transparent; }
.usd-quote-panel-central { background: transparent; }
.usd-hero-chart-section { margin-top: var(--space-4); padding-top: var(--space-4); border-color: var(--color-divider); }
.usd-sparkline-section { margin-top: var(--space-3); padding-top: var(--space-3); }
.usd-hero-overview .usd-sparkline-section { display: flex; flex-direction: column; margin: 0; padding: var(--space-3); border: 0; background: transparent; }
.usd-hero-overview .usd-sparkline-trigger { flex: 1; }
.usd-sparkline-trigger { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.usd-sparkline-box { display: block; height: 3.75rem; margin-top: var(--space-2); min-width: 0; }
.chart-trend-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.chart-range-tabs { align-self: auto; margin: 0; padding: 1px; border: 0; background: transparent; }
.chart-range-tabs .time-tab, .chart-detail-trigger { min-height: 1.25rem; padding: 1px 5px; border: 0; border-radius: 0; font: 600 var(--text-xs)/1.15 var(--font-mono); letter-spacing: 0; }
.chart-range-tabs .time-tab { background: transparent; color: #777; }
.chart-range-tabs .time-tab.active { background: #303030; color: #ffffff; }
.chart-detail-trigger { flex: 0 0 auto; background: transparent; color: #777; cursor: pointer; white-space: nowrap; }
.chart-detail-trigger:hover { background: #242424; color: #d0d0d0; }

.market-hero-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-raised);
}
@media (hover: hover) {
  .market-hero-card { transition: border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard); }
  .market-hero-card:hover { border-color: var(--color-text-muted); background: var(--color-surface-hover); }
}
.market-hero-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.market-hero-card > .market-hero-header { display: none; }
.market-hero-card--fuel > .market-hero-header { display: flex; }
.market-hero-title { margin: 0; color: var(--color-text); font: 900 var(--text-lg)/var(--leading-tight) var(--font-mono); letter-spacing: .1em; }
.market-hero-emoji { font: 1em/1 system-ui, sans-serif; letter-spacing: 0; }
.market-quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.market-hero-overview { display: grid; grid-template-columns: minmax(8.5rem, .75fr) minmax(0, 1.25fr); gap: var(--space-3); align-items: stretch; }
.market-sparkline-section { display: flex; flex-direction: column; min-width: 0; padding: var(--space-3); border: 0; background: transparent; }
.market-sparkline-section .usd-sparkline-trigger { flex: 1; }
.market-hero-secondary-quotes { margin-top: var(--space-3); }
.ticker-col-full { grid-column: 1 / -1; min-width: 0; }
.market-quote-grid--other-market { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.market-quote-grid--fuel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.market-hero-card--lottery > .market-hero-header { display: flex; }
.lottery-result-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.lottery-result { min-width: 0; padding: var(--space-2) var(--space-3); border-left: 1px solid var(--color-divider); }
.lottery-result:first-child { border-left: 0; }
.lottery-result-title { color: var(--color-text-muted); font: 700 var(--text-xs)/var(--leading-tight) var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.lottery-numbers { margin-top: var(--space-2); color: #f3ba2f; font: 900 var(--text-md)/var(--leading-tight) var(--font-mono); letter-spacing: .06em; white-space: nowrap; }
.lottery-detail { min-height: 1em; margin-top: var(--space-1); color: var(--color-text-subtle); font: 600 var(--text-xs)/var(--leading-tight) var(--font-mono); }
.lottery-result.is-stale .lottery-numbers { color: var(--color-neutral); }
.market-quote-panel--currency { grid-column: span 2; }
/* With fuel moved beside Gold, the two remaining single-value markets share a
   full row instead of occupying two distant quarter-width slots. */
.market-quote-grid--other-market .market-quote-panel--single { grid-column: span 2; }
.currency-flag { display: inline-block; margin-right: var(--space-2); font: 1.15em/1 system-ui, sans-serif; vertical-align: -0.08em; }
.market-quote-panel { min-width: 0; padding: var(--space-3); border: 0; border-radius: 0; background: transparent; }
.market-quote-panel:hover { background: transparent; }
.market-quote-source { display: flex; align-items: center; min-height: 0; }
.market-quote-identity { display: flex; align-items: center; min-height: 1rem; gap: var(--space-2); min-width: 0; }
.market-quote-identity .market-quote-source { flex: 0 0 auto; }
.market-quote-identity .ticker-source { line-height: 1; }
.market-quote-product { display: flex; align-items: center; min-width: 0; min-height: 1rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); font: 800 var(--text-sm)/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.market-quote-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.market-quote-prices--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.market-quote-price-cell { min-width: 0; }
.market-quote-panel--single .usd-hero-col-label { margin-top: var(--space-3); }
.market-quote-state { margin-top: var(--space-4); color: var(--color-neutral); font: 700 var(--text-xs)/var(--leading-tight) var(--font-mono); text-transform: uppercase; }
.market-hero-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
.market-hero-chart-grid--single { grid-template-columns: minmax(0, 1fr); }
.market-hero-chart-card { min-width: 0; padding: var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface); }
.market-hero-chart-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: 2rem; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.market-hero-chart-header .chart-title { font-size: var(--text-xs); }
.market-hero-chart-header .info-btn { flex: 0 0 auto; }
.market-hero-chart-box { position: relative; height: 15rem; min-width: 0; }
.market-hero-chart-box canvas { min-width: 0; max-width: 100%; }

.charts-section-heading { margin: var(--space-10) 0 var(--space-5); padding-top: var(--space-5); border-color: var(--color-border-strong); }
.charts-section-heading h2 { color: var(--color-text); font-size: var(--text-md); }
.charts-grid { gap: var(--space-4); }
.chart-panel { padding: var(--space-5); }
.chart-header { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-color: var(--color-divider); }
.chart-badge { border-color: var(--color-border-strong); background: var(--color-surface); }
.time-filter-group { padding: var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.time-tab { min-height: 1.75rem; padding: 0 var(--space-2); border-radius: var(--radius-sm); }
.time-tab.active { background: var(--color-info); color: var(--color-canvas); }
.info-btn, .chart-zoom-btn { border-color: var(--color-border-strong); background: var(--color-surface); }
.info-btn:hover, .chart-zoom-btn:hover { border-color: var(--color-info); color: var(--color-info); }

.board-footer { margin-top: var(--space-2); padding-top: var(--space-4); border-top: 0; color: var(--color-text-muted); }

@media (max-width: 1100px) {
  .dashboard-container { padding-top: var(--space-4); }
  .ticker-cards-grid, .ticker-col { gap: var(--space-5); }
  .market-quote-grid--other-market { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-quote-panel--currency { grid-column: span 1; }
  .market-quote-grid--other-market .market-quote-panel--single { grid-column: span 1; }
}

@media (min-width: 601px) {
  /* The shorter stack absorbs remaining space, keeping both desktop columns
     aligned as individual card content changes over time. */
  .ticker-cards-grid, .ticker-col { align-items: stretch; }
  .ticker-col > .market-hero-card:last-child { flex: 1 1 auto; }
  /* Balance the two desktop columns: Gold + Fuel ends flush with Silver. */
  .market-hero-card--fuel { padding-top: calc(var(--space-5) + 10px); }
  /* Legacy dashboard text still uses px; align it with the token scale above. */
  .usd-hero-card .ticker-source { font-size: 12px; }
  .usd-hero-card .usd-hero-header .ticker-source,
  .usd-hero-col-label,
  .usd-hero-delta,
  .ticker-source,
  .time-tab,
  .chart-badge { font-size: 10px; }
  .usd-quote-unit { font-size: 9px; }
  .usd-hero-price-val { font-size: 17px; }
  .ticker-name, .chart-title { font-size: 13px; }
  .ticker-val { font-size: 21px; }
  .ticker-unit, .ticker-delta, .board-footer { font-size: 11px; }
  .charts-section-heading h2 { font-size: 14px; }
}
@media (max-width: 600px) {
  .dashboard-container { padding-bottom: var(--space-8); }
  /* Keep the terminal header compact; actions must not create a second full row. */
  .board-header { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: var(--space-2); padding: 0; }
  .header-brand-wrap { min-width: 0; flex: 1 1 auto; }
  .header-brand-wrap .board-time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-actions { width: auto; flex: 0 0 auto; flex-wrap: nowrap; gap: var(--space-2); }
  .header-actions > * { flex: 0 0 auto; justify-content: center; }
  .header-actions .btn-text { display: none; }
  .nav-link, .btn-terminal { min-height: 2.25rem; padding: 0 var(--space-3); }
  .ticker-cards-grid, .ticker-col { gap: var(--space-4); }
  .ticker-group-grid { gap: var(--space-2); }
  .ticker-card { min-height: 8.5rem; }
  /* USD is one compact information block on mobile, not cards inside a card. */
  .usd-hero-overview { grid-template-columns: minmax(7.5rem, .75fr) minmax(0, 1.25fr); gap: 0; }
  .usd-hero-overview > .usd-quote-panel { grid-column: 1; grid-row: 1; min-width: 0; }
  .usd-hero-overview > .usd-sparkline-section { grid-column: 2; grid-row: 1; min-width: 0; }
  .usd-hero-overview .usd-sparkline-section { border-left: 0; }
  .usd-hero-secondary-quotes { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
  .usd-hero-secondary-quotes .usd-quote-panel { border-top: 1px solid var(--color-divider); }
  .market-hero-overview { grid-template-columns: minmax(7.5rem, .75fr) minmax(0, 1.25fr); gap: 0; }
  .market-hero-overview > .market-spot-panel { grid-column: 1; grid-row: 1; min-width: 0; }
  .market-hero-overview > .market-sparkline-section { grid-column: 2; grid-row: 1; min-width: 0; }
  .market-hero-overview .market-sparkline-section { border-left: 0; }
  .market-hero-secondary-quotes { gap: 0; margin-top: 0; }
  .market-hero-secondary-quotes .market-quote-panel { border-top: 1px solid var(--color-divider); }
  .usd-hero-card, .chart-panel { padding: var(--space-3); }
  .market-hero-card { padding: var(--space-3); }
  .market-quote-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .lottery-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .lottery-result { padding: var(--space-3); border-left: 0; border-top: 1px solid var(--color-divider); }
  .lottery-result:nth-child(-n + 2) { border-top: 0; }
  .market-quote-prices { gap: var(--space-2); }
  .market-quote-prices--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .market-hero-chart-grid { grid-template-columns: 1fr; gap: var(--space-2); padding-top: var(--space-3); }
  .market-hero-chart-card { padding: var(--space-2); }
  .market-hero-chart-box { height: 12rem; }
  .usd-sparkline-box { height: 3.25rem; }
  .usd-sparkline-hint { display: none; }
  .charts-section-heading { margin-top: var(--space-8); }
}