/* NTROPYX — Energy market board (news pages)
   Broadcast quotation board: live ticker, headline instruments and marine fuels
   that each open a detail chart in place.
   Two layout mechanisms only: CSS grid for the instrument list, a real table for
   the fuel × port matrix. No layout algorithm is overridden by another.
   Colours derive only from existing site tokens: --paper, --gold, --gold-hi,
   #1f8a5b and #b73a36 (styles.css .sector-economic-impact). */

.ntx-market-board .ntx-mb {
  --mb-rule: rgba(216, 192, 113, .16);
  --mb-rule-soft: rgba(248, 243, 228, .09);
  --mb-dim: rgba(248, 243, 228, .58);
  --mb-label: rgba(248, 243, 228, .54);
  --mb-up: #b73a36;
  --mb-down: #1f8a5b;
  position: relative;
  margin-top: clamp(30px, 3.4vw, 46px);
  padding: clamp(18px, 2vw, 26px) clamp(16px, 2.2vw, 30px) clamp(16px, 1.8vw, 24px);
  border: 1px solid var(--mb-rule);
  border-radius: clamp(16px, 1.6vw, 22px);
  background:
    radial-gradient(ellipse 60% 100% at 8% 0%, rgba(216, 192, 113, .055), transparent 62%),
    linear-gradient(180deg, rgba(248, 243, 228, .035), rgba(248, 243, 228, .012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  isolation: isolate;
}

@supports (color: color-mix(in oklab, #000 50%, #fff)) {
  .ntx-market-board .ntx-mb {
    --mb-up: color-mix(in oklab, #b73a36 58%, #f8f3e4);
    --mb-down: color-mix(in oklab, #1f8a5b 74%, #f8f3e4);
  }
}

/* ---------- status bar ---------- */

.ntx-mb__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: clamp(12px, 1.4vw, 16px);
}

.ntx-mb__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  color: var(--mb-up);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.6;
  text-transform: uppercase;
}

.ntx-mb__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: ntx-mb-pulse 2.4s ease-in-out infinite;
}

@keyframes ntx-mb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .28; }
}

.ntx-mb__stamp {
  color: var(--mb-label);
  font-size: .72rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* ---------- broadcast ticker ---------- */

.ntx-mb__ticker {
  position: relative;
  display: none;
  overflow: hidden;
  padding: 10px 0;
  border-top: 1px solid var(--mb-rule);
  border-bottom: 1px solid var(--mb-rule);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ntx-mb__ticker.is-live { display: block; }

.ntx-mb__ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: ntx-mb-marquee 46s linear infinite;
}

@keyframes ntx-mb-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.ntx-mb__ticker:hover .ntx-mb__ticker-track,
.ntx-mb__ticker:focus-within .ntx-mb__ticker-track { animation-play-state: paused; }

.ntx-mb-tick {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 20px;
  border-right: 1px solid var(--mb-rule-soft);
  font-size: .78rem;
  line-height: 1.4;
}

.ntx-mb-tick__name {
  color: var(--mb-label);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ntx-mb-tick__value {
  color: var(--paper, #f8f3e4);
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.ntx-mb-tick__delta {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ntx-mb-tick__delta--up { color: var(--mb-up); }
.ntx-mb-tick__delta--down { color: var(--mb-down); }

/* ---------- instrument list ---------- */

.ntx-mb-lead {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ntx-mb-lead__row { border-bottom: 1px solid var(--mb-rule-soft); }
.ntx-mb-lead__row:last-child { border-bottom: 0; }

.ntx-mb-lead__trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 0 clamp(12px, 2vw, 28px);
  width: 100%;
  margin: 0;
  padding: clamp(16px, 2vw, 24px) 10px;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .22s ease;
}

/* Feedback lands on press, then fades on release. */
.ntx-mb-lead__trigger:hover { background-color: rgba(248, 243, 228, .035); }

.ntx-mb-lead__trigger:active {
  background-color: rgba(248, 243, 228, .07);
  transition: none;
}

.ntx-mb-lead__trigger:focus-visible {
  outline: 2px solid var(--gold-hi, #f1dda0);
  outline-offset: -2px;
}

.ntx-mb-lead__trigger[disabled] { cursor: default; }
.ntx-mb-lead__trigger[disabled]:hover { background-color: transparent; }
.ntx-mb-lead__trigger[disabled] .ntx-mb-lead__chev { display: none; }

.ntx-mb-lead__id { min-width: 0; }

.ntx-mb-lead__name {
  display: block;
  color: var(--paper, #f8f3e4);
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  font-weight: 650;
  letter-spacing: -.015em;
  line-height: 1.2;
}

.ntx-mb-lead__sub {
  display: block;
  margin-top: 5px;
  color: var(--mb-dim);
  font-size: .74rem;
  letter-spacing: .02em;
  line-height: 1.45;
}

/* La date de la derniere publication. Elle vit dans la ligne qui dit deja ce
   qu'est la serie : aucun element visuel nouveau, une ligne existante gagne le
   fait qui lui manquait. Chiffres tabulaires pour que les dates s'alignent d'une
   ligne a l'autre, et pas de coupure : une date ne se casse pas en deux. */
.ntx-mb-asof {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Quand la source se tait au-dela de sa patience, le fait cesse d'etre du fond
   et passe au premier plan. La hierarchie fait le travail, pas un feu tricolore :
   les couleurs de hausse et de baisse gardent leur sens, et le mot du balisage
   porte l'information — elle ne repose donc jamais sur la seule couleur. */
.ntx-mb-asof--tard {
  color: #f8f3e4;
  font-weight: 500;
}

.ntx-mb-lead__spark {
  width: clamp(84px, 11vw, 132px);
  height: 30px;
  display: block;
  overflow: visible;
}

.ntx-mb-lead__spark path {
  fill: none;
  stroke: var(--gold, #d8c071);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .8;
}

.ntx-mb-lead__spark path.ntx-mb-area {
  stroke: none;
  fill: rgba(216, 192, 113, .1);
  opacity: 1;
}

.ntx-mb-lead__value {
  justify-self: end;
  color: var(--paper, #f8f3e4);
  font-size: clamp(1.8rem, 3.1vw, 2.8rem);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ntx-mb-lead__unit {
  margin-left: .28em;
  color: var(--mb-dim);
  font-size: .34em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .06em;
}

.ntx-mb-lead__chev,
.ntx-mb-marine__chev {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--mb-label);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), stroke .22s ease;
}

.ntx-mb-lead__chev { justify-self: end; }

.ntx-mb-lead__trigger:hover .ntx-mb-lead__chev,
.ntx-mb-marine__trigger:hover .ntx-mb-marine__chev { stroke: var(--gold-hi, #f1dda0); }

.ntx-mb-lead__row.is-open .ntx-mb-lead__chev,
.ntx-mb-marine__row.is-open .ntx-mb-marine__chev { transform: rotate(180deg); }

/* ---------- change chip ---------- */

.ntx-mb-delta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  color: var(--mb-label);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ntx-mb-delta svg {
  width: 8px;
  height: 8px;
  flex: none;
  fill: currentColor;
}

.ntx-mb-delta--up { color: var(--mb-up); }
.ntx-mb-delta--down { color: var(--mb-down); }
.ntx-mb-delta--flat svg { display: none; }

/* ---------- detail panel ---------- */

.ntx-mb-panel {
  overflow: hidden;
  height: 0;
}

.ntx-mb-panel__inner {
  padding: 4px 10px clamp(18px, 2vw, 26px);
  will-change: transform, opacity;
}

.ntx-mb-panel__ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.ntx-mb-range {
  min-height: 30px;
  padding: 0 13px;
  border: 1px solid var(--mb-rule);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--mb-label);
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.ntx-mb-range:hover:not([disabled]) {
  color: var(--paper, #f8f3e4);
  border-color: rgba(216, 192, 113, .42);
}

.ntx-mb-range:active:not([disabled]) { transition: none; }

.ntx-mb-range:focus-visible {
  outline: 2px solid var(--gold-hi, #f1dda0);
  outline-offset: 2px;
}

.ntx-mb-range[aria-pressed="true"] {
  color: var(--ink, #060807);
  border-color: var(--gold, #d8c071);
  background: var(--gold, #d8c071);
}

.ntx-mb-range[disabled] {
  opacity: .38;
  cursor: default;
}

/* ---------- legend (marine: one entry per port) ---------- */

.ntx-mb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 12px;
}

.ntx-mb-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--mb-rule);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--paper, #f8f3e4);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, opacity .2s ease;
}

.ntx-mb-legend__item:hover { border-color: rgba(216, 192, 113, .42); }

.ntx-mb-legend__item:focus-visible {
  outline: 2px solid var(--gold-hi, #f1dda0);
  outline-offset: 2px;
}

.ntx-mb-legend__item[aria-pressed="false"] { opacity: .42; }

.ntx-mb-legend__swatch {
  width: 18px;
  height: 2px;
  flex: none;
  border-radius: 1px;
}

.ntx-mb-legend__swatch--rotterdam { background: var(--paper, #f8f3e4); }

.ntx-mb-legend__swatch--fujairah {
  background: repeating-linear-gradient(90deg,
    var(--gold-hi, #f1dda0) 0 5px, transparent 5px 9px);
}

.ntx-mb-legend__swatch--singapore {
  background: repeating-linear-gradient(90deg,
    var(--gold, #d8c071) 0 1.5px, transparent 1.5px 5.5px);
}

.ntx-mb-legend__label { color: var(--mb-dim); font-weight: 600; }

.ntx-mb-legend__value {
  color: var(--paper, #f8f3e4);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ---------- chart ---------- */

.ntx-mb-chart {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ntx-mb-chart__svg {
  display: block;
  width: 100%;
  height: clamp(170px, 24vw, 260px);
  overflow: visible;
  touch-action: pan-y;
  cursor: crosshair;
}

.ntx-mb-chart__svg:focus-visible {
  outline: 2px solid var(--gold-hi, #f1dda0);
  outline-offset: 4px;
  border-radius: 6px;
}

.ntx-mb-chart__line {
  fill: none;
  stroke: var(--gold, #d8c071);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ntx-mb-chart__area { stroke: none; }

.ntx-mb-chart__rule {
  stroke: var(--mb-rule-soft);
  stroke-width: 1;
}

.ntx-mb-chart__axis {
  fill: var(--mb-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
}

.ntx-mb-chart__cursor line {
  stroke: rgba(248, 243, 228, .34);
  stroke-width: 1;
}

.ntx-mb-chart__cursor circle {
  fill: var(--gold-hi, #f1dda0);
  stroke: var(--ink, #060807);
  stroke-width: 1.5;
}

.ntx-mb-chart__readout {
  color: var(--paper, #f8f3e4);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
}

/* ---------- marine fuel matrix ---------- */

.ntx-mb__group {
  margin-top: clamp(20px, 2.4vw, 30px);
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--mb-rule);
}

.ntx-mb__group-title {
  margin: 0;
  color: var(--gold-hi, #f1dda0);
  font-size: clamp(.92rem, 1.15vw, 1.06rem);
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.ntx-mb__group-title span {
  display: block;
  max-width: 62ch;
  margin-top: 7px;
  color: var(--mb-dim);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.6;
}

/* One grid template drives the headings and every row, so the columns line up
   without a table — which lets the trigger span the full width like the
   instruments above. */
.ntx-mb-marine {
  --mb-marine-cols: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)) auto;
  margin-top: 6px;
}

.ntx-mb-marine__head {
  display: grid;
  grid-template-columns: var(--mb-marine-cols);
  align-items: end;
  gap: 0 clamp(12px, 2vw, 28px);
  padding: clamp(14px, 1.5vw, 18px) 10px 10px;
  border-bottom: 1px solid var(--mb-rule-soft);
  color: var(--mb-label);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.ntx-mb-marine__head span:not(:first-child) { text-align: right; }

.ntx-mb-marine__head b {
  display: block;
  margin-top: 4px;
  color: var(--mb-dim);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
}

.ntx-mb-marine__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ntx-mb-marine__row { border-bottom: 1px solid var(--mb-rule-soft); }
.ntx-mb-marine__row:last-child { border-bottom: 0; }

.ntx-mb-marine__trigger {
  display: grid;
  grid-template-columns: var(--mb-marine-cols);
  align-items: center;
  gap: 0 clamp(12px, 2vw, 28px);
  width: 100%;
  margin: 0;
  padding: clamp(14px, 1.8vw, 20px) 10px;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .22s ease;
}

.ntx-mb-marine__trigger:hover { background-color: rgba(248, 243, 228, .035); }

.ntx-mb-marine__trigger:active {
  background-color: rgba(248, 243, 228, .07);
  transition: none;
}

.ntx-mb-marine__trigger:focus-visible {
  outline: 2px solid var(--gold-hi, #f1dda0);
  outline-offset: -2px;
}

.ntx-mb-marine__trigger[disabled] { cursor: default; }
.ntx-mb-marine__trigger[disabled]:hover { background-color: transparent; }
.ntx-mb-marine__trigger[disabled] .ntx-mb-marine__chev { display: none; }

.ntx-mb-marine__id { min-width: 0; }

.ntx-mb-marine__fuel {
  display: block;
  color: var(--paper, #f8f3e4);
  font-size: .98rem;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.ntx-mb-marine__code {
  display: block;
  margin-top: 4px;
  color: var(--mb-dim);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.45;
}

.ntx-mb-marine__port {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 0;
}

/* The heading row names the ports on wide screens; the block repeats the name
   once the columns stack. */
.ntx-mb-marine__label {
  display: none;
  color: var(--mb-label);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ntx-mb-marine__price {
  color: var(--paper, #f8f3e4);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ntx-mb-marine__spark {
  width: clamp(56px, 7vw, 92px);
  height: 22px;
  display: block;
  overflow: visible;
}

.ntx-mb-marine__spark path {
  fill: none;
  stroke: var(--gold, #d8c071);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .8;
}

.ntx-mb-marine__spark path.ntx-mb-area {
  stroke: none;
  fill: rgba(216, 192, 113, .1);
  opacity: 1;
}

.ntx-mb-marine__chev { justify-self: end; }

/* ---------- source note ---------- */

.ntx-mb__note {
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding-top: clamp(14px, 1.6vw, 18px);
  border-top: 1px solid var(--mb-rule);
  color: var(--mb-label);
  font-size: .76rem;
  line-height: 1.7;
}

.ntx-mb__note b {
  color: var(--mb-dim);
  font-weight: 600;
}

.ntx-mb__note a {
  color: var(--gold, #d8c071);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-radius: 3px;
  transition: color .2s ease;
}

.ntx-mb__note a:hover { color: var(--gold-hi, #f1dda0); }

.ntx-mb__note a:focus-visible {
  outline: 2px solid var(--gold-hi, #f1dda0);
  outline-offset: 3px;
  text-decoration: none;
}

/* ---------- narrow layout ---------- */

@media (max-width: 860px) {
  .ntx-mb-lead__spark { width: clamp(64px, 14vw, 96px); }
}

@media (max-width: 640px) {
  .ntx-market-board .ntx-mb { padding-inline: 14px; }

  .ntx-mb-lead__trigger {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 10px 12px;
    padding-inline: 6px;
  }

  .ntx-mb-lead__id { grid-column: 1; grid-row: 1; }
  .ntx-mb-lead__spark { grid-column: 2 / span 2; grid-row: 1; align-self: center; }
  .ntx-mb-lead__value { grid-column: 1; grid-row: 2; justify-self: start; font-size: clamp(1.6rem, 8.5vw, 2.1rem); }
  .ntx-mb-delta { grid-column: 2; grid-row: 2; }
  .ntx-mb-lead__chev { grid-column: 3; grid-row: 2; align-self: center; }

  .ntx-mb-panel__inner { padding-inline: 6px; }

  /* the three ports stack, each labelled in place; the heading row steps aside */
  .ntx-mb-marine__head { display: none; }

  .ntx-mb-marine__trigger {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding-inline: 6px;
  }

  .ntx-mb-marine__id { grid-column: 1; grid-row: 1; }
  .ntx-mb-marine__chev { grid-column: 2; grid-row: 1; align-self: start; }

  .ntx-mb-marine__port {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--mb-rule-soft);
  }

  .ntx-mb-marine__label { display: block; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ntx-mb__live i { animation: none; opacity: 1; }
  .ntx-mb__ticker { overflow-x: auto; }
  .ntx-mb__ticker-track { animation: none; }
  .ntx-mb-lead__trigger,
  .ntx-mb-marine__trigger,
  .ntx-mb-lead__chev,
  .ntx-mb-marine__chev,
  .ntx-mb-range,
  .ntx-mb-legend__item,
  .ntx-mb__note a { transition: none; }
  .ntx-mb-panel__inner { will-change: auto; }
}

@media (prefers-contrast: more) {
  .ntx-market-board .ntx-mb {
    --mb-rule: rgba(216, 192, 113, .5);
    --mb-rule-soft: rgba(248, 243, 228, .32);
    --mb-dim: rgba(248, 243, 228, .86);
    --mb-label: rgba(248, 243, 228, .78);
  }
}