/* ============================================================================
   RF-MARKETS-REBUILD (24 September 2026) — /markets, and only /markets.
   Mockup A (one column, a report) with mockup B's spread block, approved by
   the owner. RF-NOT-GENERATED look: rules and lists, not cards; one table;
   numbers in Plex Mono; yellow only on the primary button and the chart fill.
   Price going up is --rf-out and down is --rf-ok: that is DATA colour (the
   driver's point of view), never the brand.
   No container width is set here: the page sits on .wrap like every other
   page (tests/one-column.test.js paid markets.html off its debt list).
   ============================================================================ */
.mkx-k{font:500 11px/1.3 var(--rf-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--rf-ink-3);margin:0;display:flex;flex-wrap:wrap;gap:0 10px}
.mkx-k #mkx-asof:not(:empty)::before{content:"·";margin-right:10px}
.mkx-h1{font-size:clamp(30px,4.6vw,44px);line-height:1.1;letter-spacing:-.02em;margin:10px 0 0}
.mkx-lede{max-width:66ch}
/* RF-MARKETS-CLS (25 September 2026). PageSpeed on a phone: CLS 0.323. The lede
   is a short placeholder in the HTML and markets.js swaps in the week's sentence
   (Brent, four weeks, the high, what the pump usually does next, US pumps), two to three times longer, which
   pushed the whole board down 53 px. The box now holds the room the sentence
   needs before it arrives. */
.mkx-lede{min-height:calc(1.6em * 4); min-height:4lh}
@media (max-width:760px){ .mkx-lede{min-height:calc(1.6em * 6); min-height:6lh} }
/* ...and the two crude blocks keep the height of the figure, the chart and the
   source line they are about to receive (the second half of the same shift). */
.mkx-oil-v{min-height:36px}
.mkx-chart{min-height:195px}
.mkx-oil .mkx-src{min-height:3em}
@media (max-width:760px){ .mkx-chart{min-height:165px} }
@media (max-width:420px){ .mkx-lede{min-height:calc(1.6em * 7); min-height:7lh} }
.mkx-lede b{color:var(--rf-ink);font-weight:600;font-variant-numeric:tabular-nums}
.mkx-lede a{color:var(--rf-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
section.mkx{padding-top:8px}

/* ---- crude ---------------------------------------------------------------- */
.mkx-crude{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.mkx-oil-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:6px 0 0}
.mkx-num{font:600 32px/1.1 var(--rf-mono);font-variant-numeric:tabular-nums;color:var(--rf-ink)}
.mkx-num small{font:400 13px var(--rf-text);color:var(--rf-ink-3);margin-left:4px}
.mkx-chg{font:500 14px var(--rf-mono);font-variant-numeric:tabular-nums;color:var(--rf-ink-2)}
.mkx-chg.up{color:var(--rf-out)}
.mkx-chg.dn{color:var(--rf-ok); color:color-mix(in srgb, var(--rf-ok) 82%, #000)}   /* RF-TEXT-GREEN */
.mkx-chart{margin-top:10px;position:relative}
.mkx-chart svg{display:block;width:100%;height:150px;overflow:visible}
.mkx-chart .ax{font:400 11px var(--rf-mono);fill:var(--rf-ink-3)}
.mkx-src{font-size:13px;line-height:1.5;color:var(--rf-ink-3);margin:6px 0 0}

/* ---- sections ------------------------------------------------------------- */
.mkx-sec{border-top:1px solid var(--rf-line);margin-top:36px;padding-top:30px}
.mkx-sec h2{font-size:clamp(22px,2.4vw,26px);margin:0}
.mkx-lead{color:var(--rf-ink-2);font-size:16px;line-height:1.6;max-width:66ch;margin:10px 0 0}
.mkx-note{color:var(--rf-ink-3);font-size:13.5px;line-height:1.55;max-width:78ch;margin:12px 0 0}
.mkx-note a,.mkx-srcs a,.mkx-so a{color:var(--rf-ink);text-decoration:underline;text-decoration-color:var(--rf-line-strong);text-underline-offset:3px}
.mkx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px}
.mkx-go{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.mkx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the one toggle: two plain segments, the chosen one is the site's chip */
.mkx-unit{display:inline-flex;border:1px solid var(--rf-line-strong);border-radius:8px;overflow:hidden}
.mkx-seg{font:600 13.5px var(--rf-text);color:var(--rf-ink-2);background:var(--rf-bg);border:0;padding:8px 14px;cursor:pointer;min-height:38px}
.mkx-seg+.mkx-seg{border-left:1px solid var(--rf-line-strong)}
.mkx-seg[aria-pressed="true"]{background:var(--rf-brand-dim);color:var(--rf-ink)}
.mkx-seg:focus-visible{outline:2px solid var(--rf-ink);outline-offset:-2px}

/* ---- the table ------------------------------------------------------------ */
.mkx-tw{margin-top:14px}
.mkx-t{width:100%;border-collapse:collapse;font-size:15px}
.mkx-t th,.mkx-t td{padding:12px 10px;border-bottom:1px solid var(--rf-line);text-align:left;vertical-align:top}
.mkx-t thead th{font:500 11px/1.2 var(--rf-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--rf-ink-3);border-bottom:1px solid var(--rf-line-strong)}
.mkx-t tbody tr:hover td,.mkx-t tbody tr:hover th{background:transparent}
.mkx-t tbody tr:last-child td,.mkx-t tbody tr:last-child th{border-bottom:1px solid var(--rf-line)}
.mkx-t tbody th{font-weight:600;color:var(--rf-ink);white-space:nowrap}
.mkx-t td[data-f]{font:600 16px var(--rf-mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--rf-ink)}
.mkx-t td[data-f] small{display:block;font:400 12px/1.4 var(--rf-text);color:var(--rf-ink-3);white-space:normal;margin-top:2px}
.mkx-t td[data-f] i{font:400 12px var(--rf-text);font-style:normal;color:var(--rf-ink-3);margin-left:2px}
.mkx-t td.na{color:var(--rf-ink-3);font-weight:400}
.mkx-t td[data-f]:empty::before,.mkx-num:empty::before{content:"\2014";color:var(--rf-ink-3);font-weight:400}
.mkx-so{font-size:13.5px;color:var(--rf-ink-2);min-width:180px}
.mkx-so span{display:block;color:var(--rf-ink-3);font-size:12.5px;margin-top:2px}

/* ---- spread --------------------------------------------------------------- */
.mkx-spread{margin-top:14px}
.mkx-sp{display:grid;grid-template-columns:minmax(150px,200px) 1fr 84px;gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rf-line)}
.mkx-sp-l{font-size:14.5px;color:var(--rf-ink)}
.mkx-sp-l span{display:block;font-size:12px;color:var(--rf-ink-3)}
.mkx-sp-bar{position:relative;height:12px;background:var(--rf-bg-2);border-radius:6px}
.mkx-sp-bar b{position:absolute;top:0;bottom:0;background:rgba(255,201,40,.55);border-radius:6px}
.mkx-sp-bar i{position:absolute;top:-4px;width:3px;height:20px;margin-left:-1px;background:var(--rf-ink);border-radius:1px}
.mkx-sp-bar em{position:absolute;top:16px;font:400 11px var(--rf-mono);font-style:normal;color:var(--rf-ink-3);white-space:nowrap;transform:translateX(-50%)}
.mkx-sp-v{font:600 14.5px var(--rf-mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--rf-ink)}
.mkx-sp-ax{display:grid;grid-template-columns:minmax(150px,200px) 1fr 84px;gap:16px;padding:6px 0 0;font:400 11px var(--rf-mono);color:var(--rf-ink-3)}
.mkx-sp-ax>span:nth-child(2){display:flex;justify-content:space-between}
.mkx-sp{padding-bottom:22px}

/* ---- exchange rates ------------------------------------------------------- */
.mkx-rates{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px;font:500 15px var(--rf-mono);font-variant-numeric:tabular-nums;color:var(--rf-ink)}
.mkx-conv{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin-top:20px}
.mkx-conv label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--rf-ink-3)}
.mkx-conv input,.mkx-conv select{font:500 15px var(--rf-mono);color:var(--rf-ink);background:var(--rf-bg);border:1px solid var(--rf-line-strong);border-radius:8px;padding:9px 12px;min-height:42px}
.mkx-conv input{width:130px}
.mkx-conv output{font:600 20px var(--rf-mono);font-variant-numeric:tabular-nums;color:var(--rf-ink);padding-bottom:8px}

/* ---- cross-border calculator (RF-BORDER-CALC) -------------------------------
   Same form as the exchange converter above; only the result block is new. */
.mkx-bc input{width:110px}
.mkx-bc select{min-width:150px}
.mkx-bc-res{margin-top:18px;max-width:68ch}
.mkx-bc-res p{margin:0 0 8px;font-size:16px;line-height:1.55;color:var(--rf-ink-2)}
.mkx-bc-res .mkx-bc-main{font-size:19px;font-weight:600;color:var(--rf-ink)}
/* the verdict is in the words, not in a colour: green here would read as the "fresh" colour used for stations */
.mkx-bc-res .mkx-bc-px{font:500 13.5px var(--rf-mono);font-variant-numeric:tabular-nums;color:var(--rf-ink-3)}

/* ---- why ------------------------------------------------------------------ */
.mkx-why{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:14px 0 0}
.mkx-why div{padding:14px 0;border-bottom:1px solid var(--rf-line)}
.mkx-why dt{font-weight:600;color:var(--rf-ink);font-size:16px}
.mkx-why dd{margin:6px 0 0;color:var(--rf-ink-2);font-size:15px;line-height:1.6}

/* ---- sources -------------------------------------------------------------- */
.mkx-srcs{list-style:none;margin:14px 0 0;padding:0}
.mkx-srcs li{padding:10px 0;border-bottom:1px solid var(--rf-line);font-size:14.5px;line-height:1.55;color:var(--rf-ink-2)}
.mkx-srcs b{color:var(--rf-ink);margin-right:6px}

/* ---- phone ---------------------------------------------------------------- */
@media (max-width:760px){
  .mkx-crude{grid-template-columns:1fr;gap:26px}
  .mkx-chart svg{height:120px}
  .mkx-why{grid-template-columns:1fr}
  /* the table becomes one block per country: name, three prices, source */
  .mkx-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mkx-t,.mkx-t tbody,.mkx-t tr{display:block}
  .mkx-t tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px;padding:14px 0;border-bottom:1px solid var(--rf-line)}
  .mkx-t tbody th,.mkx-t td{border:0;padding:0}
  .mkx-t tbody tr:last-child td,.mkx-t tbody tr:last-child th{border:0}
  .mkx-t tbody th{grid-column:1/-1;font-size:16px;margin-bottom:4px}
  .mkx-t td[data-f]{font-size:15px}
  .mkx-t td[data-f]::before{content:attr(data-label);display:block;font:500 10.5px var(--rf-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--rf-ink-3);margin-bottom:3px}
  .mkx-so{grid-column:1/-1;min-width:0;margin-top:6px}
  .mkx-sp,.mkx-sp-ax{grid-template-columns:1fr 70px;gap:6px 12px}
  .mkx-sp-l{grid-column:1/-1}
  .mkx-sp-ax>span:first-child{display:none}
  .mkx-conv input{width:110px}
}