/* Local forecast preview. D02/C02 compact inputs, C04 sliders, D08 focus.
   Colour variables are generated from iru_intel.brand_tokens in zz_forecast_tokens.css.
   Scoped after the vendored Datalab assets; no shared stylesheet is changed. */
html, body { margin: 0; background: transparent !important; }
#freight-forecast {
  --Dash-Fill-Interactive-Strong: var(--forecast-blue);
  --Dash-Fill-Interactive-Weak: color-mix(in srgb, var(--forecast-blue) 10%, transparent);
  --Dash-Stroke-Strong: var(--forecast-blue);
  box-sizing: border-box;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 18px;
  background: transparent;
  color: var(--forecast-body);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  accent-color: var(--forecast-blue);
}
#freight-forecast *, #freight-forecast *::before, #freight-forecast *::after {
  box-sizing: border-box;
}
#freight-forecast ::selection {
  color: white;
  background: var(--forecast-blue);
}
#freight-forecast .input-row {
  gap: 40px;
  padding: 0;
  margin: 0 0 16px;
  background: transparent;
}
#freight-forecast .input-row > div { width: 100%; min-width: 0; }
#freight-forecast .input-group-label {
  margin: 0;
  color: var(--forecast-body);
  font: 700 15px/1.4 Arial, Helvetica, sans-serif;
}
#freight-forecast .forecast-control-subtitle {
  margin: 2px 0 14px;
  color: var(--forecast-muted);
  font-size: 13px;
}
#freight-forecast .forecast-year-control + .forecast-year-control { margin-top: 18px; }
#freight-forecast .forecast-control-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
#freight-forecast .forecast-control-heading label {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--forecast-body);
}
#freight-forecast div.forecast-input.dash-input-container {
  width: 104px;
  min-width: 104px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  display: block;
  border: 1px solid var(--forecast-grid) !important;
  border-radius: 0 !important;
  background: white !important;
  overflow: visible !important;
  box-shadow: none !important;
  outline: none !important;
}
#freight-forecast .forecast-input input.dash-input-element {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 39px !important;
  min-height: 39px;
  margin: 0;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 0;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent;
  color: var(--forecast-body);
  font: 700 15px/39px Arial, Helvetica, sans-serif;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#freight-forecast div.forecast-input.dash-input-container:focus-within {
  border-bottom: 2px solid var(--forecast-blue) !important;
}
#freight-forecast .forecast-input .dash-input-stepper { display: none !important; }
#freight-forecast .forecast-input input::-webkit-inner-spin-button,
#freight-forecast .forecast-input input::-webkit-outer-spin-button { appearance: none; margin: 0; }
#freight-forecast .forecast-slider { width: 100%; min-width: 0; }
#freight-forecast .dash-slider-container { margin-top: 0; }
#freight-forecast .dash-slider-mark { font: 12px/1.3 Arial, Helvetica, sans-serif; }
#freight-forecast .forecast-chart-heading { margin: 0 0 16px; }
#freight-forecast .forecast-chart-heading h1 {
  margin: 0;
  color: var(--forecast-body);
  font: 700 24px/1.25 Arial, Helvetica, sans-serif;
}
#freight-forecast .forecast-chart-heading p {
  margin: 5px 0 0;
  color: var(--forecast-muted);
  font-size: 13px;
}
#freight-forecast .forecast-chart {
  min-width: 0;
  max-width: 100%;
  background: transparent;
}
#freight-forecast .forecast-scenario-note {
  margin: 10px 0 20px;
  color: var(--forecast-muted);
  font-size: 13px;
}
#freight-forecast .footer-row {
  gap: 18px;
  align-items: flex-start;
  padding: 0;
}
#freight-forecast .footer-row > div:first-child { flex: 1 1 400px !important; min-width: 0; }
#freight-forecast #text_source p {
  margin: 0;
  padding: 0;
  font: 400 13px/1.45 Arial, Helvetica, sans-serif !important;
  color: var(--forecast-body);
}
#freight-forecast .source-footer { margin-top: 6px; color: var(--forecast-muted); font-size: 13px; }
#freight-forecast .dl-button-group { gap: 10px; flex: 0 0 auto; }
#freight-forecast .dl-btn { padding-right: 14px; font-family: Arial, Helvetica, sans-serif; }
#freight-forecast .dl-btn::before { margin-right: 12px; }
#freight-forecast .dl-btn:focus-visible {
  outline: 2px solid var(--forecast-blue);
  outline-offset: 3px;
}
@media (max-width: 991px) {
  #freight-forecast .input-row { flex-direction: row; }
}
@media (max-width: 700px) {
  #freight-forecast { padding: 16px; }
  #freight-forecast .input-row { flex-direction: column; gap: 24px; padding: 18px; }
  #freight-forecast .forecast-chart-heading h1 { font-size: 22px; }
  #freight-forecast .forecast-chart { height: 420px !important; }
  #freight-forecast .footer-row > div:first-child { flex-basis: 100% !important; }
}
@media (max-width: 360px) {
  #freight-forecast { padding: 12px; }
  #freight-forecast .input-row { padding: 14px; }
  #freight-forecast .dl-button-group { gap: 8px; }
}
/* story-iframe.css forces Univers on every <p> with !important; keep Arial
   (same size as rendered) so Drupal's Univers cannot change this page. */
#freight-forecast p {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
}