/* ============================================================
   FuelTrust — markets page styles (loads AFTER ft.css).
   Page-specific: dark instrument page-header with ticker
   totalizers, light widget frame re-skinning carbon-widget.js.
   ============================================================ *//* market movement colors — functional finance semantics, page-scoped */
.ft {
  --mkt-up: #1a5a63;      /* brand teal-dark reads "positive" in this world */
  --mkt-down: #b3261e;    /* accessible red, only place red appears on the site */
}/* ---------- page header (dark photo band under the fixed nav) ---------- */
.ft .mkt-header {
  position: relative; color: var(--snow);
  padding: 150px 0 56px;
}.ft .mkt-header .scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(4,24,56,.9), rgba(5,30,74,.78) 60%, rgba(4,24,56,.92));
}.ft .mkt-header .wrap {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end;
}.ft .mkt-crumb {
  font-family: var(--font-meter); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--snow-2); margin-bottom: 16px;
}.ft .mkt-crumb a { color: var(--snow-2); }.ft .mkt-crumb a:hover { color: #fff; }.ft .mkt-header h1 {
  font-weight: 300; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: .1em;
  line-height: 1.15; margin-bottom: 14px;
}.ft .mkt-header h1 strong { font-weight: 700; }.ft .mkt-header .lede { color: var(--snow-2); font-size: 1.02rem; max-width: 54ch; }/* ticker totalizers */
.ft .ticker-row { display: flex; gap: 14px; flex-wrap: wrap; }.ft .ticker-card {
  background: rgba(4,24,56,.72); border: 1px solid rgba(91,171,181,.4);
  border-radius: var(--radius); padding: 14px 18px; min-width: 138px; text-align: right;
}.ft .ticker-label {
  font-family: var(--font-display); font-weight: 600; font-size: .64rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--snow-2); margin-bottom: 6px;
}.ft .ticker-price {
  font-family: var(--font-meter); font-size: 1.3rem; font-weight: 500;
  color: var(--teal-light); font-variant-numeric: tabular-nums;
}.ft .ticker-change { font-family: var(--font-meter); font-size: .7rem; margin-top: 4px; }.ft .ticker-change.up { color: var(--teal-light); }.ft .ticker-change.down { color: #ff9d92; }/* down, readable on navy */
.ft .ticker-change.flat { color: var(--snow-2); }/* ---------- main column ---------- */
.ft .mkt-main { padding: 64px 0 96px; }.ft .widget-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }.ft .widget-intro h2 { margin-bottom: 6px; }.ft .widget-intro p { font-size: .95rem; color: var(--ink-2); max-width: 56ch; }.ft .source-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }.ft .src-chip {
  font-family: var(--font-meter); font-size: .68rem; letter-spacing: .08em;
  color: var(--teal-dark); border: 1px solid var(--line); border-radius: 2px;
  padding: 5px 10px; background: var(--deck);
}/* ---------- widget frame: carbon-widget.js re-skinned to the brand ----------
   The widget ships light by default; these hooks map its classes onto ft.css
   tokens. Class list mirrors the widget's own markup (see assets/js/carbon-widget.js). */
.ft .widget-frame {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  --ft-bg: var(--paper);
  --ft-surface: var(--deck);
  --ft-border: var(--line);
  --ft-text: var(--ink);
  --ft-muted: var(--ink-2);
  --ft-primary: var(--navy);
  --ft-accent: var(--teal);
  --ft-up: var(--mkt-up);
  --ft-down: var(--mkt-down);
  --ft-flat: var(--ink-2);
}.ft .widget-frame .ft-widget { background: transparent; border: none; color: var(--ink); font-family: var(--font-body); }.ft .widget-frame .ft-widget-header { background: var(--deck); border-bottom: 1px solid var(--line); }.ft .widget-frame .ft-tabs { background: var(--paper); border-bottom: 1px solid var(--line); }.ft .widget-frame .ft-tab { color: var(--ink-2); font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; }.ft .widget-frame .ft-tab.active { color: var(--teal-dark); border-bottom-color: var(--teal-dark); }.ft .widget-frame .ft-tab:hover { color: var(--navy); }.ft .widget-frame .ft-tab-content { background: var(--paper); }.ft .widget-frame .ft-table th { color: var(--ink-2); border-bottom-color: var(--line); font-family: var(--font-display); letter-spacing: .06em; }.ft .widget-frame .ft-table td { border-bottom-color: var(--line); color: var(--ink); font-family: var(--font-meter); font-variant-numeric: tabular-nums; }.ft .widget-frame .ft-widget-footer { background: var(--deck); border-top-color: var(--line) !important; }.ft .widget-frame .ft-spinner { color: var(--ink-2); }.ft .widget-frame .ft-select, .ft .widget-frame .ft-date-range input[type=date] {
  background: var(--paper); border-color: var(--line); color: var(--ink);
}.ft .widget-frame .ft-upgrade-overlay { background: rgba(242,245,248,.94); }.ft .widget-frame .ft-upgrade-box p { color: var(--ink); }/* ---------- context cards ---------- */
.ft .mkt-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }.ft .mkt-info-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px 24px; transition: box-shadow .2s ease-out;
}.ft .mkt-info-card:hover { box-shadow: 0 8px 24px rgba(10,56,124,.12); }.ft .mkt-info-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--navy); margin-bottom: 10px;
}.ft .mkt-info-card p { font-size: .9rem; color: var(--ink-2); }.ft .mkt-info-card strong { color: var(--ink); }/* ---------- responsive ---------- */
@media (max-width: 980px) {.ft .mkt-header .wrap { grid-template-columns: 1fr; align-items: start; }.ft .mkt-info-grid { grid-template-columns: 1fr; }
}