/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   VCM PRICE ASSESSMENT — the report skin, shared by every edition in the series.

   The assessments arrive as standalone HTML documents with their own light-on-white house style; this
   sheet is what re-skins them onto emsurge.com. Everything is scoped under `.vcm` so it can never leak
   into the rest of the site, and it deliberately reuses the site's own gold-on-navy palette rather
   than inventing a second one — numbers keep IBM Plex Mono, prose stays Barlow.

   It lives here rather than inline in each edition because a new edition ships roughly every month:
   one copy means a styling fix reaches the whole archive, and the deploy content-addresses this file
   (Set-TcAssetFingerprints) so a change ships without a cache-buster.

   Two table shapes are supported on purpose, because the source documents use both:
     table          — left-aligned by default, `.r` on the cells that should be right-aligned.
     table.grid     — right-aligned by default with a left-aligned first column, cells classed by role
                      (.sec .n .em .vol .fwd .note .sigcol). This is the newer generator's shape.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

.vcm {
  --gold:     #c8922e;
  --gold-mid: #e0b257;
  --gold-lt:  rgba(200,146,46,.12);
  --gold-dk:  #e0b257;
  --eom:      #e0b257;
  --ink:      #ffffff;
  --ink2:     #c2c7cc;
  --ink3:     #93a0ad;
  --rule:     #2f3746;
  --white:    #1e2d3a;
  --up:       #3dd7a3;
  --up-lt:    rgba(11,186,131,.15);
  --dn:       #ff7085;
  --dn-lt:    rgba(248,76,100,.16);
  --neu:      #93a0ad;
  --neu-lt:   rgba(147,160,173,.14);
  --blue:     #6bc4d7;
  --blue-lt:  rgba(107,196,215,.16);
  --mono:     'IBM Plex Mono', ui-monospace, monospace;
}
.vcm-sec { padding: 44px 0 84px; }
.vcm-sec .wrap { color: var(--ink2); font-size: 13.5px; line-height: 1.55; }

/* ── TICKER ── */
.vcm .ticker { background: var(--gold); }
.vcm .ticker-inner { width: min(100% - 48px, var(--maxw)); margin-inline: auto; padding: 9px 0; display: flex; gap: 22px; font-family: var(--mono); font-size: 11px; color: #141210; align-items: center; flex-wrap: wrap; }
.vcm .t-item { display: flex; gap: 5px; white-space: nowrap; }
.vcm .t-item .lbl { font-weight: 600; text-transform: uppercase; letter-spacing: .4px; opacity: .7; }
.vcm .t-item .val { font-weight: 700; }
.vcm .t-sep { color: rgba(0,0,0,.3); }

/* ── INTRO ── */
.vcm .intro { font-size: 12px; color: var(--ink3); font-family: var(--mono); padding: 4px 0 24px; border-bottom: 1px solid var(--rule); margin-bottom: 28px; display: flex; gap: 22px; flex-wrap: wrap; }
.vcm .intro .k { color: var(--gold-mid); font-weight: 600; }

/* ── EDITION NAV ── the strip that makes the series navigable from inside any single edition. ── */
.vcm .editions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; padding-bottom: 22px; margin-bottom: 6px; }
.vcm .editions a { color: var(--gold-mid); text-decoration: none; border-bottom: 1px solid rgba(224,178,87,.35); padding-bottom: 1px; }
.vcm .editions a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.vcm .editions .ed-none { color: var(--ink3); }
.vcm .editions .ed-all { margin-left: auto; }

/* ── SECTION ── */
.vcm .sec { margin-bottom: 44px; }
.vcm .sec-hdr { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--gold); margin-bottom: 18px; }
.vcm .sec-num { font-family: var(--mono); font-size: 10px; font-weight: 600; background: var(--gold); color: #141210; padding: 3px 8px; flex-shrink: 0; }
.vcm .sec-title { font-size: 1.25rem; font-weight: 500; color: var(--ink); letter-spacing: -.2px; }
.vcm .sec-tag { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--ink3); border: 1px solid var(--rule); padding: 2px 8px; background: var(--white); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
/* The meta chip is a single nowrap line of source attributions — on a phone that is wider than the
   viewport, so it drops onto its own line and wraps rather than pushing the page sideways. */
@media (max-width: 720px) {
  .vcm .sec-hdr { flex-wrap: wrap; }
  .vcm .sec-tag { margin-left: 0; flex-basis: 100%; white-space: normal; }
}

/* ── SUB HEADER ── */
.vcm .sub { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--gold-mid); margin: 20px 0 10px; padding-left: 10px; border-left: 3px solid var(--gold); }

/* ── KPI GRID ── */
.vcm .kpi-grid { display: grid; gap: 12px; margin-bottom: 6px; }
.vcm .g4 { grid-template-columns: repeat(4,1fr); }
.vcm .g3 { grid-template-columns: repeat(3,1fr); }
.vcm .g5 { grid-template-columns: repeat(5,1fr); }
.vcm .kpi { background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: 8px; padding: 15px 16px 13px; }
.vcm .kpi.blue { border-top-color: var(--blue); }
.vcm .kpi.up { border-top-color: var(--up); }
.vcm .kpi.dk { border-top-color: var(--gold-dk); }
.vcm .kpi.red { border-top-color: var(--dn); }
.vcm .kpi-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--ink3); margin-bottom: 5px; }
.vcm .kpi-val { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1; margin-bottom: 3px; }
.vcm .kpi-sub { font-family: var(--mono); font-size: 10px; color: var(--ink3); margin-bottom: 2px; }
.vcm .kpi-note { font-size: 10px; color: var(--ink3); }
/* "SPOT" / "FWD" qualifier riding alongside a KPI label. */
.vcm .kpi-lbl .qual { font-family: var(--mono); font-size: 8px; background: rgba(224,178,87,.15); color: var(--gold-mid); padding: 1px 5px; border-radius: 3px; margin-left: 5px; letter-spacing: .4px; }

/* ── TABLES ──
   max-width pins the scroller to its container: a price matrix is far wider than a phone, and without
   it the table pushes the whole page sideways instead of scrolling inside its own box. ── */
.vcm .tbl-wrap { overflow-x: auto; max-width: 100%; margin-bottom: 6px; background: var(--white); border: 1px solid var(--rule); border-radius: 8px; }
.vcm table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vcm thead tr { background: var(--surface-2); }
.vcm thead th { padding: 9px 11px; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--gold-mid); text-align: left; white-space: nowrap; border-bottom: 2px solid var(--gold); }
.vcm th.r, .vcm td.r { text-align: right; }
.vcm tbody tr { border-bottom: 1px solid var(--rule); }
.vcm tbody tr:last-child { border-bottom: none; }
.vcm tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
.vcm tbody tr:hover { background: var(--gold-lt); }
.vcm tbody td { padding: 8px 11px; color: var(--ink2); vertical-align: middle; }
.vcm td.mono { font-family: var(--mono); font-size: 12px; }
.vcm td.bold { font-weight: 600; color: var(--ink); }
.vcm td.price { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: right; }
.vcm td.muted { color: var(--ink3); font-size: 11.5px; }
.vcm td.up { color: var(--up); font-family: var(--mono); font-size: 11.5px; font-weight: 600; }
.vcm td.dn { color: var(--dn); font-family: var(--mono); font-size: 11.5px; font-weight: 600; }

/* Numeric grid: figures right-aligned by default, labels left. Cells carry a role rather than an alignment. */
.vcm table.grid { font-family: var(--mono); font-size: 11.5px; }
.vcm table.grid th { text-align: right; }
.vcm table.grid th:first-child { text-align: left; }
.vcm table.grid td { text-align: right; white-space: nowrap; }
.vcm table.grid td:first-child,
.vcm table.grid td.sec,
.vcm table.grid td.note,
.vcm table.grid td.fwd,
.vcm table.grid td.sigcol { text-align: left; }
.vcm table.grid td.sec { color: var(--ink); font-weight: 500; }
.vcm table.grid td.em { color: var(--ink); font-weight: 600; }
.vcm table.grid td.n,
.vcm table.grid td.vol { color: var(--ink3); }
.vcm table.grid td.fwd,
.vcm table.grid td.note { color: var(--ink3); font-size: 10.5px; white-space: normal; }

/* ── BADGES ── */
.vcm .b { display: inline-block; font-family: var(--mono); font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.vcm .b-up { background: var(--up-lt); color: var(--up); }
.vcm .b-dn { background: var(--dn-lt); color: var(--dn); }
.vcm .b-fl { background: var(--neu-lt); color: var(--neu); }
.vcm .b-cp1 { background: rgba(107,196,215,.16); color: #8fd4e3; border: 1px solid rgba(107,196,215,.35); }
.vcm .b-ccp { background: rgba(167,139,250,.16); color: #c4b5fd; border: 1px solid rgba(167,139,250,.4); }
.vcm .b-a62 { background: rgba(216,180,254,.14); color: #d8b4fe; border: 1px solid rgba(216,180,254,.35); }
.vcm .b-firm { background: var(--gold-lt); color: var(--gold-mid); border: 1px solid rgba(200,146,46,.4); }
.vcm .b-ind { background: var(--neu-lt); color: var(--neu); }
.vcm .b-bid { background: rgba(224,178,87,.16); color: #e0b257; border: 1px solid rgba(224,178,87,.4); }
.vcm .b-hl { background: rgba(251,146,60,.16); color: #fdba74; border: 1px solid rgba(251,146,60,.4); }

/* ── NEWS GRID ── */
.vcm .news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 720px) { .vcm .news-grid { grid-template-columns: 1fr; } }
.vcm .news-card { background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--gold-mid); border-radius: 8px; padding: 14px 15px 12px; display: flex; flex-direction: column; gap: 6px; }
.vcm .news-card.red { border-top-color: var(--dn); }
.vcm .news-card.blue { border-top-color: var(--blue); }
.vcm .news-card.green { border-top-color: var(--up); }
.vcm .news-card.dk { border-top-color: var(--gold-dk); }
.vcm .news-hl { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.vcm .news-body { font-size: 12px; color: var(--ink2); line-height: 1.6; }
.vcm .news-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 4px; }
.vcm .news-src { font-family: var(--mono); font-size: 9.5px; color: var(--ink3); text-transform: uppercase; letter-spacing: .4px; }
.vcm .news-src a { color: var(--ink3); text-decoration: none; border-bottom: 1px solid var(--rule); }
.vcm .news-src a:hover { color: var(--gold-mid); border-bottom-color: var(--gold-mid); }
.vcm .news-date { font-family: var(--mono); font-size: 9.5px; color: var(--ink3); white-space: nowrap; }
/* The tie-back: what this headline means in EOM's own order book. Distinct from the reported news above it. */
.vcm .news-tie { font-size: 11.5px; color: var(--ink2); line-height: 1.5; background: rgba(200,146,46,.09); border: 1px solid rgba(200,146,46,.28); border-radius: 5px; padding: 8px 10px; margin-top: auto; }
.vcm .tag-eom { font-family: var(--mono); font-size: 8.5px; font-weight: 700; background: var(--gold); color: #141210; padding: 2px 5px; border-radius: 3px; letter-spacing: .5px; margin-right: 6px; }

/* ── EVENTS TABLE ── */
.vcm .ev-grid { display: grid; grid-template-columns: 110px 1fr 90px 70px; gap: 0; background: var(--white); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; font-size: 12px; }
.vcm .ev-head { display: contents; }
.vcm .ev-head > * { background: var(--surface-2); color: var(--gold-mid); font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; padding: 9px 11px; border-bottom: 2px solid var(--gold); }
.vcm .ev-row { display: contents; }
.vcm .ev-row > * { padding: 9px 11px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.vcm .ev-row:last-child > * { border-bottom: none; }
.vcm .ev-row:nth-child(even) > * { background: rgba(255,255,255,.025); }
.vcm .ev-row:hover > * { background: var(--gold-lt); }
.vcm .ev-date { font-family: var(--mono); font-size: 11px; color: var(--ink3); font-weight: 500; }
.vcm .ev-desc { color: var(--ink2); line-height: 1.55; }
/* The event title is a sentence fragment with no terminating punctuation of its own, so it has to be
   separated from the description by layout rather than by a full stop the source never wrote. */
.vcm .ev-desc strong { display: block; color: var(--ink); margin-bottom: 3px; }
.vcm .ev-srcs { display: block; margin-top: 5px; font-family: var(--mono); font-size: 9.5px; color: var(--ink3); }
.vcm .ev-srcs a { color: var(--ink3); text-decoration: none; border-bottom: 1px solid var(--rule); }
.vcm .ev-srcs a:hover { color: var(--gold-mid); border-bottom-color: var(--gold-mid); }
.vcm .ev-cat { font-family: var(--mono); font-size: 10px; }
.vcm .ev-sig { font-family: var(--mono); font-size: 10px; font-weight: 700; text-align: center; }
.vcm .sig-h { color: var(--dn); }
.vcm .sig-m { color: var(--gold-mid); }
.vcm .sig-l { color: var(--neu); }
@media (max-width: 720px) { .vcm .ev-grid { grid-template-columns: 74px 1fr 60px 52px; font-size: 11px; } .vcm .ev-head > *, .vcm .ev-row > * { padding: 7px 7px; } }

/* ── CALLOUT ── */
.vcm .box { border-left: 4px solid var(--gold); background: var(--gold-lt); padding: 14px 16px; margin: 14px 0; font-size: 12.5px; border-radius: 0 6px 6px 0; }
.vcm .box.red { border-color: var(--dn); background: var(--dn-lt); }
.vcm .box.blue { border-color: var(--blue); background: var(--blue-lt); }
.vcm .box.green { border-color: var(--up); background: var(--up-lt); }
/* Editorial: inference rather than order-book fact, and dashed so it never reads as data. */
.vcm .box.editorial { background: rgba(200,146,46,.05); border-left-style: dashed; }
.vcm .box-ttl { font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; color: var(--gold-mid); }
.vcm .box.red .box-ttl { color: var(--dn); }
.vcm .box.blue .box-ttl { color: var(--blue); }
.vcm .box.green .box-ttl { color: var(--up); }
.vcm .box p { margin: 0; color: var(--ink2); line-height: 1.65; }
.vcm .box ul { padding-left: 16px; margin: 0; }
.vcm .box li { margin-bottom: 4px; color: var(--ink2); line-height: 1.55; }
.vcm .box li:last-child { margin-bottom: 0; }
.vcm .box li strong { color: var(--ink); }
.vcm .box a { color: var(--gold-mid); }

/* ── BARS ── */
.vcm .bars { margin: 8px 0 16px; }
.vcm .br { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.vcm .bl { width: 175px; flex-shrink: 0; font-size: 11px; color: var(--ink2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcm .bt { flex: 1; background: rgba(255,255,255,.09); height: 11px; border-radius: 2px; overflow: hidden; }
.vcm .bf { height: 100%; background: var(--gold-mid); }
.vcm .bf.dk { background: var(--gold); }
.vcm .bf.lt { background: rgba(224,178,87,.5); }
.vcm .bf.up { background: var(--up); }
.vcm .bv { width: 90px; font-family: var(--mono); font-size: 10.5px; color: var(--ink2); white-space: nowrap; }

/* ── TWO COL ──
   A grid item defaults to min-width:auto, so a column holding a wide table refuses to shrink and drags
   the page out with it — the overflow:auto on .tbl-wrap never gets a chance. min-width:0 restores it. */
.vcm .two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vcm .two > * { min-width: 0; }
@media (max-width: 720px) { .vcm .two { grid-template-columns: 1fr; } .vcm .g4, .vcm .g5 { grid-template-columns: 1fr 1fr; } }

/* ── SOURCE / DISCLAIMER ── */
.vcm .src { font-family: var(--mono); font-size: 9.5px; color: var(--ink3); padding-top: 6px; border-top: 1px solid var(--rule); margin-top: 8px; line-height: 1.6; }
.vcm .src a { color: var(--ink3); }
.vcm .disc { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 10px; color: var(--ink3); line-height: 1.8; font-family: var(--mono); }
.vcm .disc strong { color: var(--ink2); }
.vcm p.body { font-size: 12.5px; color: var(--ink2); margin-bottom: 14px; line-height: 1.65; }
.vcm p.body a { color: var(--gold-mid); }
.vcm p.body code { font-family: var(--mono); font-size: 11.5px; color: var(--gold-mid); }