/* ==========================================================================
   cb-home.css — homepage market block + article slider
   --------------------------------------------------------------------------
   Loaded AFTER mystyle.css so it wins on equal specificity.

   Everything here is scoped under .cbm / .cbs. The old wrapper class names
   (.market-overview-section, .masi-index-card, .mini-table …) were dropped
   from the markup on purpose: their legacy rules — several of them
   !important — simply stop matching, so this file never has to fight them.
   The class names that survive (.gainers-table, .losers-table, .green, .red,
   .last-update) do so because asi.js / gainlos.js select or emit them.
   ========================================================================== */

.cbm {
  --cbm-ink:      #16161a;
  --cbm-soft:     #55555e;
  --cbm-mute:     #8a8a93;
  --cbm-line:     #e9e9ec;
  --cbm-line-2:   #f2f2f4;
  --cbm-up:       #12805c;
  --cbm-up-bg:    #eaf5f0;
  --cbm-down:     #b3261e;
  --cbm-down-bg:  #fbeceb;
  --cbm-flat:     #9a9aa2;
  --cbm-surface:  #ffffff;
  /* The site's existing nav and ticker bar are #0d2b45. Reusing that navy
     keeps this block looking like part of the house, instead of introducing
     a third accent colour nothing else on the page uses. */
  --cbm-brand:    #0d2b45;

  /* Figures use a mono face so digits are the same width: a price that ticks
     from 9,99 to 10,00 must not shove the column sideways. */
  --cbm-mono: "SFMono-Regular", ui-monospace, "IBM Plex Mono", Menlo, Consolas, monospace;

  /* The rest of the homepage — header, nav, ranking bar, the big table — is
     full-bleed. A 1200px centred island floated in the middle of it and read
     as a detached widget. Match the page instead: the 30px inset lines this
     block's left edge up with the nav links above it. */
  max-width: 1700px;
  margin: 26px auto 34px;
  padding: 0 30px;
  color: var(--cbm-ink);
  font-family: inherit;
}

.cbm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}

/* Small caps label used for every block heading in here. */
.cbm-label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cbm-mute);
}

/* ---------- breadth bar ------------------------------------------------- */

.cbm-breadth { margin-bottom: 26px; }

.cbm-breadth__bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--cbm-line);
}
.cbm-breadth__seg { height: 100%; }
.cbm-breadth__seg--up   { background: var(--cbm-up); }
.cbm-breadth__seg--flat { background: #cfcfd4; }
.cbm-breadth__seg--down { background: var(--cbm-down); }

.cbm-breadth__key {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 11px;
  font-size: 13px;
  color: var(--cbm-soft);
}
.cbm-breadth__k { display: inline-flex; align-items: center; gap: 7px; }
.cbm-breadth__k b {
  font-family: var(--cbm-mono);
  font-weight: 600;
  color: var(--cbm-ink);
}
.cbm-breadth__dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 auto;
}
.cbm-breadth__dot--up   { background: var(--cbm-up); }
.cbm-breadth__dot--flat { background: #cfcfd4; }
.cbm-breadth__dot--down { background: var(--cbm-down); }

/* ---------- gainers / losers ------------------------------------------- */

.cbm-movers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 3.4vw, 56px);
}
.cbm-col__title--up   { color: var(--cbm-up); }
.cbm-col__title--down { color: var(--cbm-down); }

.cbm table {
  width: 100%;
  /* On a wide monitor an uncapped table drags the figures far away from the
     company name and the row stops reading as a single line. Cap it and let
     the leftover width fall into the gutter between the two lists instead. */
  max-width: 30rem;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}
/* The header row carries no information a reader needs on a 5-row list —
   the colour and the section title already say gainers or losers. Kept in
   the DOM for screen readers and removed visually. */
.cbm table thead {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.cbm table td {
  padding: 13px 0;
  border-bottom: 1px solid var(--cbm-line-2);
  vertical-align: middle;
  background: none;
  text-align: left;
}
.cbm table tr:last-child td { border-bottom: 0; }

/* Column 1 holds the company name; gainlos.js wraps it in a.stock-link. */
.cbm table td:nth-child(1) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 12px;
}
.cbm table td:nth-child(1) a,
.cbm table td:nth-child(1) .stock-link {
  color: var(--cbm-soft);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.cbm table td:nth-child(1) a:hover {
  color: var(--cbm-ink);
  border-bottom-color: currentColor;
}
/* Ticker first in mono at a fixed width, then the company name. The reader
   scanning for a symbol gets a straight vertical edge to run their eye down. */
.cbm .cbm-sym {
  display: inline-block;
  width: 3.1rem;
  font-family: var(--cbm-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cbm-ink);
}
.cbm .cbm-name { font-size: 13.5px; }

/* Column widths must be declared on the HEADER cells: with table-layout:fixed
   the browser takes every column width from the first row, and that row is the
   visually-hidden <thead>. Putting them only on the <td> leaves three equal
   thirds and the company names get truncated. */
.cbm col.c-var { width: 5.1rem; }
.cbm col.c-px  { width: 6.3rem; }

/* Column 2 is the variation. gainlos.js puts .green / .red on it. */
.cbm table td:nth-child(2) {
  text-align: right;
  font-family: var(--cbm-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cbm table td:nth-child(2).green,
.cbm table td:nth-child(2).red {
  font-weight: 600;
}
.cbm table td:nth-child(2).green { color: var(--cbm-up); }
.cbm table td:nth-child(2).red   { color: var(--cbm-down); }

/* Column 3 is the price. Neutral ink — colouring it too competes with the
   variation and makes the row shout. */
.cbm table td:nth-child(3) {
  text-align: right;
  font-family: var(--cbm-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--cbm-ink) !important;   /* beats .green/.red from mystyle.css */
  font-weight: 500;
}

.cbm .last-update {
  margin: 22px 0 0;
  font-size: 12px;
  font-style: normal;
  color: var(--cbm-mute);
}

/* ---------- MASI card --------------------------------------------------- */

.cbm-masi {
  position: relative;
  background: var(--cbm-surface);
  border: 1px solid var(--cbm-line);
  border-radius: 4px;
  padding: 24px 24px 20px;
}
/* A single rule along the top edge, in the navy the nav bar already uses.
   The one decorative gesture in the block. */
.cbm-masi::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: var(--cbm-brand);
  border-radius: 4px 4px 0 0;
}

.cbm-masi__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.cbm-masi__title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cbm-ink);
}

/* Live badge: asi.js toggles .show on it. */
.cbm-masi__live {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cbm-up);
}
.cbm-masi__live.show { display: inline-flex; }
.cbm-masi__live .live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cbm-up);
  animation: cbm-pulse 2.4s ease-in-out infinite;
}
@keyframes cbm-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.cbm-masi__price {
  font-family: var(--cbm-mono);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.cbm-masi__var {
  margin-top: 8px;
  font-size: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cbm-masi__var .variation-label {
  font-size: 12px;
  color: var(--cbm-mute);
}
/* mystyle.css styles .variation-value as a glowing translucent pill in pale
   mint/pink — built for the old dark gradient card. Reset it outright rather
   than leaving a lozenge floating on a white surface. */
.cbm-masi__var .variation-value {
  font-family: var(--cbm-mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cbm-soft);
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
.cbm-masi__var .variation-value.positive { color: var(--cbm-up); }
.cbm-masi__var .variation-value.negative { color: var(--cbm-down); }

.cbm-masi__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--cbm-line-2);
}
.cbm-masi__stat { display: flex; flex-direction: column; gap: 5px; }
.cbm-masi__stat .stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cbm-mute);
}
.cbm-masi__stat .stat-value {
  font-family: var(--cbm-mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cbm-ink);
}
.cbm-masi__stat .stat-value.positive { color: var(--cbm-up); }
.cbm-masi__stat .stat-value.negative { color: var(--cbm-down); }
.cbm-masi__foot {
  margin-top: 18px;
  font-size: 11px;
  color: var(--cbm-mute);
  line-height: 1.4;
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 960px) {
  .cbm__grid { grid-template-columns: 1fr; gap: 30px; }
  /* The index is the headline figure — on a narrow screen it reads first. */
  .cbm__masi-cell { order: -1; }
  .cbm-movers { gap: 26px; }
}

@media (max-width: 620px) {
  .cbm { margin-top: 20px; }
  .cbm-movers { grid-template-columns: 1fr; gap: 28px; }
  .cbm table td { padding: 11px 0; }
  .cbm col.c-var { width: 4.8rem; }
  .cbm col.c-px  { width: 5.9rem; }
  .cbm-masi__price { font-size: 28px; }
}

/* ==========================================================================
   Article slider
   ========================================================================== */

.cbs {
  max-width: 1700px;
  margin: 34px auto;
  padding: 0 30px;
}
.cbs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e9e9ec;
}
.cbs__head h2 {
  margin: 0;
  font-size: 1.25em;
  font-weight: 700;
  color: #16161a;
}
.cbs__all {
  color: #55555e;
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.cbs__all:hover { color: #16161a; border-bottom-color: currentColor; }

/* The viewport clips; the rail is what moves. Only transform is animated,
   so the browser can keep the whole thing on the compositor. */
.cbs__viewport {
  overflow: hidden;
  /* Room for the cards' focus ring and hover lift, which would otherwise
     be clipped by overflow:hidden. */
  margin: -6px;
  padding: 6px;
}
.cbs__rail {
  display: flex;
  gap: 22px;
  will-change: transform;
  transition: transform .62s cubic-bezier(0.22, 1, 0.36, 1);
}
.cbs__rail.is-instant { transition: none; }

.cbs__slide {
  flex: 0 0 auto;
  /* Width is set inline by the script from the measured viewport, so the
     card count per view can change on resize without a media-query ladder. */
  box-sizing: border-box;
}

.cbs-card {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e9e9ec;
  border-radius: 4px;
  padding: 22px 22px 20px;
  transition: border-color .2s ease, transform .2s ease;
}
.cbs-card:hover {
  border-color: #c9c9cf;
  transform: translateY(-2px);
}
.cbs-card__date {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a93;
  margin-bottom: 10px;
}
.cbs-card h3 {
  margin: 0 0 10px;
  font-size: 1.02em;
  line-height: 1.38;
  font-weight: 600;
}
.cbs-card h3 a {
  color: #16161a;
  text-decoration: none;
}
.cbs-card h3 a:hover { text-decoration: underline; }
.cbs-card p {
  margin: 0;
  color: #55555e;
  font-size: 0.9em;
  line-height: 1.6;
  /* Uneven excerpt lengths would give every card a different height and the
     row would look ragged; clamp them to a common depth. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cbs__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}
.cbs__dots { display: flex; gap: 8px; }
.cbs__dot {
  width: 22px; height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #dcdce1;
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.cbs__dot[aria-current="true"] { background: #16161a; width: 34px; }
.cbs__arrows { display: flex; gap: 8px; }
.cbs__arrow {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e9e9ec;
  border-radius: 50%;
  background: #fff;
  color: #55555e;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.cbs__arrow:hover { border-color: #16161a; color: #16161a; }

.cbs__dot:focus-visible,
.cbs__arrow:focus-visible,
.cbs-card a:focus-visible {
  outline: 2px solid #0d2b45;
  outline-offset: 2px;
}

/* If the script never runs, the rail is still a readable horizontal list. */
.no-js .cbs__viewport { overflow-x: auto; }
.cbs__nav[hidden] { display: none; }

/* ==========================================================================
   Dark mode — the site toggles .dark-mode on <html>
   ========================================================================== */

.dark-mode .cbm {
  --cbm-ink:     #e6edf3;
  --cbm-soft:    #b3c0cc;
  --cbm-mute:    #8aa0b4;
  --cbm-line:    #2a3946;
  --cbm-line-2:  #223140;
  --cbm-up:      #3fbf8f;
  --cbm-down:    #ff6b6b;
  --cbm-surface: #16202b;
}
.dark-mode .cbm-breadth__bar { background: #2a3946; }
.dark-mode .cbm-breadth__seg--flat,
.dark-mode .cbm-breadth__dot--flat { background: #4a5b6b; }
/* Navy on a dark card would vanish; use the same lighter blue the site's
   own dark-mode nav border uses. */
.dark-mode .cbm { --cbm-brand: #2f6690; }

.dark-mode .cbs__head { border-bottom-color: #2a3946; }
.dark-mode .cbs__head h2 { color: #e6edf3; }
.dark-mode .cbs__all { color: #b3c0cc; }
.dark-mode .cbs__all:hover { color: #e6edf3; }
.dark-mode .cbs-card { background: #16202b; border-color: #2a3946; }
.dark-mode .cbs-card:hover { border-color: #3d5163; }
.dark-mode .cbs-card h3 a { color: #e6edf3; }
.dark-mode .cbs-card p { color: #c2cfdb; }
.dark-mode .cbs-card__date { color: #8aa0b4; }
.dark-mode .cbs__dot { background: #2a3946; }
.dark-mode .cbs__dot[aria-current="true"] { background: #e6edf3; }
.dark-mode .cbs__arrow {
  background: #16202b;
  border-color: #2a3946;
  color: #b3c0cc;
}
.dark-mode .cbs__arrow:hover { border-color: #6cb2ff; color: #6cb2ff; }

/* ==========================================================================
   Reduced motion — no autoplay, no sliding, no pulsing dot.
   The script reads the same query and stops advancing on its own.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cbs__rail { transition: none; }
  .cbs-card:hover { transform: none; }
  .cbm-masi__live .live-dot { animation: none; }
}