/*
 * Supplementary styles for the rendered site.
 *
 * Four classes here do not exist in index-CteEdnbi.css because they render
 * things the original bundle had no equivalent for: a drawn plate in place of a
 * stock photograph, the reasons behind a trend score, a "why it matters" block
 * and a source list.
 *
 * They live in their own file on purpose. Your stylesheet is served exactly as
 * compiled and is never edited; everything added is here, where it can be seen
 * and removed. Values are taken from the original's own scale so the two do not
 * disagree.
 */

/* A generated plate where the original used a stock photograph. Same footprint
   as the <img> it replaces, so the grid is unchanged. */
.side-story .side-plate {
  width: 112px;
  height: 82px;
  border-radius: 8px;
  flex: none;
  background-size: cover;
  background-position: center;
}

@media (max-width: 720px) {
  .side-story .side-plate { width: 88px; height: 66px; }
}

/* Why a story is trending, in the same list the desk sees. */
.trend-reasons {
  margin: 10px 0 12px;
  display: grid;
  gap: 6px;
}

.trend-reasons .story-meta {
  gap: 8px;
  align-items: baseline;
}

.trend-reasons .story-meta span:first-child {
  font-weight: 700;
  color: #12694f;
  min-width: 30px;
}

/* The standfirst's companion: what the piece changes, in two or three points. */
.why-it-matters {
  border-left: 3px solid #1e4b8f;
  background: #f8fafc;
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 22px 0;
}

.why-it-matters h4 {
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1e4b8f;
}

.why-it-matters ul { margin: 0; padding-left: 18px; }
.why-it-matters li { margin-bottom: 5px; line-height: 1.55; }

/* Every source that informed a piece travels with it, and is clickable. */
.article-sources {
  margin: 26px 0;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}

.article-sources h4 {
  margin: 0 0 10px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
}

.article-sources ul { margin: 0; padding-left: 18px; }
.article-sources li { margin-bottom: 6px; line-height: 1.5; }
.article-sources a { color: #1e4b8f; text-decoration: none; }
.article-sources a:hover { text-decoration: underline; }

/* Headlines are links here; the original rendered them as plain text because
   its content never went anywhere. Inherit rather than take link blue. */
.lead-overlay h1 a,
.side-story h3 a,
.category-lead h3 a,
.category-item h3 a { color: inherit; text-decoration: none; }

.lead-overlay h1 a:hover,
.side-story h3 a:hover,
.category-lead h3 a:hover,
.category-item h3 a:hover { text-decoration: underline; }

/* The feed badge when a provider is down: the original had no state for it. */
.feed-state.down { background: #7a2222; color: #fff; }
.feed-state.delayed { background: #8a5a1f; color: #fff; }

/* The article column. `.article-layout` is a 760/320 grid, so the piece needs a
   single wrapper or each block lands in its own cell. */
.article-main { min-width: 0; }
.article-main .article-hero-image { border-radius: 10px; }
.article-rail .table-wrap { margin-bottom: 22px; }
.article-rail h4 {
  margin: 0 0 10px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
}

/* Advertising. The label is always present and always legible; the reserved
   height stops the page reflowing when a unit fills. */
.ad-slot {
  display: block;
  margin: 26px 0;
  padding: 10px;
  border: 1px solid #eef1f4;
  border-radius: 6px;
  background: #f8fafc;
}
.ad-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9aa3af;
  margin-bottom: 8px;
}
.house-ad {
  display: grid;
  gap: 5px;
  text-decoration: none;
  color: #111827;
  padding: 14px 16px;
  background: #fff;
  border-radius: 4px;
}
.house-ad strong { font-size: 1.02rem; }
.house-ad span { font-size: 0.86rem; color: #5b6472; }
.house-ad em { font-style: normal; font-size: 0.82rem; font-weight: 600; color: #0066cc; }
.house-ad:hover em { text-decoration: underline; }

/* --------------------------------------------------------------------------
 * The newsletter form.
 *
 * `.newsletter-panel` is the original's own class and its dark plate is reused
 * unchanged — only the layout inside it is new, because the original panel was
 * a narrow sidebar card and this one runs the width of the column. Nothing
 * here overrides a value in index-CteEdnbi.css; it adds the pieces that file
 * has no equivalent for.
 * ----------------------------------------------------------------------- */

.newsletter-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: center;
  border-radius: 10px;
  margin: 26px 0;
}

.newsletter-copy p { margin: 0; }

.newsletter-form { display: grid; gap: 0; align-content: start; }

/* The original styles inputs and buttons inside the panel; this only stops the
   two stacking to full width on a wide screen. */
.newsletter-form input[type="email"] { max-width: 100%; }

.newsletter-note {
  color: #b8c2cf;
  font-size: 0.72rem;
  line-height: 1.5;
  margin: 12px 0 0;
}

.newsletter-note strong { color: #fff; }
.newsletter-note a { color: #7dd3fc; }

/* The honeypot. Hidden from people and from screen readers, present in the
   markup — a bot fills it because it is there; a human never sees it. Not
   `display:none`, which some bots check for. */
.newsletter-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 860px) {
  .newsletter-panel { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
}

/* The unsubscribe form stands on a white page, so it needs the light treatment
   the panel's own rules give the dark one. */
.article-main .newsletter-form input[type="email"] {
  height: 43px;
  padding: 0 12px;
  border: 1px solid #e1e6ec;
  background: #fff;
  color: #111827;
  margin-top: 10px;
  width: 100%;
  max-width: 420px;
  border-radius: 4px;
}

.article-main .newsletter-form button {
  height: 43px;
  border: 0;
  background: #0066cc;
  color: #fff;
  font-weight: 800;
  margin-top: 8px;
  padding: 0 24px;
  cursor: pointer;
  border-radius: 4px;
  justify-self: start;
}

.article-main .newsletter-note { color: #5b6472; }

/* Listen. Rendered only where the platform reports a speech-capable provider,
   so this styles a control that is either present and working or absent. */
.listen { margin: 14px 0 4px; }

.listen-button {
  border: 1px solid #e1e6ec;
  background: #fff;
  color: #0066cc;
  border-radius: 100px;
  padding: 7px 16px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.listen-button:disabled { color: #9aa3af; cursor: progress; }
.listen-audio { width: 100%; max-width: 420px; margin-top: 10px; }

/* --------------------------------------------------------------------------
 * TradingView widgets.
 *
 * Each loader replaces its container with an iframe, and an iframe is only as
 * tall as it is told to be, so every kind gets a height here. The tape sizes
 * itself. The `<noscript>` fallback inside each container is the table or
 * figure the page used to show, and takes the container's place when it shows.
 * ----------------------------------------------------------------------- */
.tv-widget { margin: 0; }
.tv-widget .tradingview-widget-container { width: 100%; }
.tv-widget .tradingview-widget-copyright {
  font-size: 0.72rem;
  line-height: 2;
  text-align: right;
  color: #6b7280;
  padding: 0 4px;
}
.tv-widget .tradingview-widget-copyright a { color: inherit; text-decoration: none; }
.tv-widget .tradingview-widget-copyright a:hover { text-decoration: underline; }
.tv-widget .tradingview-widget-copyright .blue-text { color: #0066cc; }

.tv-ticker-tape { border-bottom: 1px solid #e1e6ec; background: #fbfcfd; }
.tv-ticker-tape .tradingview-widget-copyright { display: none; }
.tv-ticker-tape .tradingview-widget-container__widget { min-height: 46px; }

/* The loader replaces the __widget div with the iframe, so a height scoped to
   that div lands on nothing and the iframe falls back to the 150px an unsized
   iframe gets. Every kind therefore sizes the iframe itself, wherever in the
   container it ends up. The workbench chart sizes itself further down; the
   :not() keeps the two from arguing over the same iframe. */
.tv-screener .tradingview-widget-container { height: 780px !important; display: block; }
.tv-screener .tradingview-widget-container__widget,
.tv-screener iframe { height: 780px !important; min-height: 780px !important; width: 100% !important; display: block; }

.tv-symbol-info .tradingview-widget-container__widget,
.tv-symbol-info iframe { min-height: 140px; width: 100% !important; }

.tv-advanced-chart:not(.tv-workbench) .tradingview-widget-container { height: 520px !important; margin-top: 12px; display: block; }
.tv-advanced-chart:not(.tv-workbench) .tradingview-widget-container__widget,
.tv-advanced-chart:not(.tv-workbench) iframe { height: 520px !important; min-height: 520px !important; width: 100% !important; display: block; }

@media (max-width: 720px) {
  .tv-screener .tradingview-widget-container { height: 640px !important; }
  .tv-screener .tradingview-widget-container__widget,
  .tv-screener iframe { height: 640px !important; min-height: 640px !important; }
  .tv-advanced-chart:not(.tv-workbench) .tradingview-widget-container { height: 380px !important; }
  .tv-advanced-chart:not(.tv-workbench) .tradingview-widget-container__widget,
  .tv-advanced-chart:not(.tv-workbench) iframe { height: 380px !important; min-height: 380px !important; }
}

/* The server's figures on a coin page — behind the widgets, or the whole
   thing when TradingView does not quote the asset. */
.coin-title { margin-bottom: 12px; }
.coin-held .coin-header { margin-top: 0; }

/* Where the server's own prices are shown, their age is shown with them. */
.feed-note {
  margin: 0 0 14px;
  font-size: 0.8rem;
  color: #5b6472;
}
.feed-note.delayed, .feed-note.stale { color: #8a5a1f; }
.feed-note.down { color: #7a2222; }

/* ------------------------------------------------------------------------- */
/* The front page below the hero: a wide news column and the site's own rail. */
.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 44px;
  align-items: start;
}
.home-rail { padding-top: 46px; }
.home-rail .newsletter-panel { margin: 0 0 28px; }
.home-main > .section-block:first-child { padding-top: 28px; }
@media (max-width: 920px) {
  .home-layout { grid-template-columns: 1fr; }
  .home-rail { padding-top: 0; }
}

/* The aggregated river in the wide column. */
.wire-river .side-story { padding-top: 16px; }
.wire-river .side-story:first-child { padding-top: 0; }
.wire-river .side-story:last-child { border-bottom: 0; }

/* Rail panels: the desk's pieces and the site's tools. */
.rail-panel { margin-bottom: 28px; }
.rail-panel .category-item .eyebrow { display: block; margin-bottom: 4px; }
.service-links { display: grid; grid-template-columns: 1fr 1fr; }
.service-links a {
  padding: 11px 4px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--border, #e1e6ec);
}
.service-links a:hover { color: var(--blue, #0066cc); }
.service-links a:nth-last-child(-n+2) { border-bottom: 0; }

/* ------------------------------------------------------------------------- */
/* The preview a wire headline opens. */
.story-preview .article-hero-image { height: 300px; }
.story-credit span:first-child { color: var(--blue, #0066cc); font-weight: 800; }
.story-excerpt { font-size: 19px; line-height: 1.65; color: #1f2937; margin: 0 0 22px; }
.readmore {
  display: inline-block;
  background: var(--blue, #0066cc);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: 4px;
}
.readmore:hover { background: #0052a3; }

/* --------------------------------- sharing, citing and the reading list --- */

/*
 * Each network's own colour, as a custom property, because the glyph reads it
 * from an inline `style` property: `var()` does not resolve inside an SVG
 * presentation attribute, so `fill="var(--brand-facebook)"` would render
 * black. X and email are deliberately absent — X's published mark is
 * monochrome and email is not a platform, so both inherit the text colour.
 */
:root {
  --brand-facebook: #0866ff;
  --brand-reddit: #ff4500;
  --brand-linkedin: #0a66c2;
  --brand-whatsapp: #25d366;
  --brand-bluesky: #1185fe;
}

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border, #e1e6ec);
  border-bottom: 1px solid var(--border, #e1e6ec);
  padding: 14px 0;
  margin: 26px 0 18px;
}

.share-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #5b6472);
  margin-right: 4px;
}

.share-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.share-links li { margin: 0; }

.share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border, #e1e6ec);
  border-radius: 999px;
  background: #fff;
  color: var(--text, #111827);
}

.share-link:hover { background: var(--soft, #f5f7fa); border-color: #c9d2dd; }
.share-glyph { display: block; }

.share-copy,
.cite-button,
.bookmark-button {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #374151;
  background: #fff;
  border: 1px solid var(--border, #e1e6ec);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
}

.share-copy:hover,
.cite-button:hover,
.bookmark-button:hover { color: var(--blue, #0066cc); border-color: var(--blue, #0066cc); }

/* Revealed by script only where a share sheet exists, so it is never dead. */
.share-copy[hidden] { display: none; }

.cite { display: inline-block; margin: 0 8px 22px 0; }
.bookmark-button { margin: 0 0 22px; }
.bookmark-button[aria-pressed="true"] {
  color: var(--blue, #0066cc);
  border-color: var(--blue, #0066cc);
  background: #eef5ff;
}

/*
 * Where the clipboard API is refused, the text is copied out of a textarea
 * that has to be in the layout to hold a selection and must not be seen.
 * Off-screen rather than display:none, which cannot be selected from.
 */
.copy-shuttle {
  position: fixed;
  top: 0;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
}

/* The site-level row, on its own line above the footer. */
.share-site { margin: 6px auto 30px; }

/* The wire cards under a preview: four across, the hero-side card reused. */
.story-latest { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.story-latest .side-story { display: block; border-bottom: 0; }
.story-latest .side-plate { width: 100%; height: 120px; margin-bottom: 10px; }
@media (max-width: 920px) {
  .story-latest { grid-template-columns: repeat(2, 1fr); }
}

/*
 * The footer's six groups on one row. The bundle sizes the grid for five
 * (`2fr repeat(4, 1fr)`), which wraps "The paper" onto a lonely second row.
 * The narrow-viewport shapes are restated because this file loads after the
 * bundle: a bare override here would outrank its media rules as well.
 */
.footer-grid { grid-template-columns: 2fr repeat(5, 1fr); }
@media (max-width: 920px) { .footer-grid { grid-template-columns: 2fr repeat(2, 1fr); } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/*
 * The market panel: figures with their names on them, sized for a 300px rail.
 */
.market-rail { margin: 4px 0 14px; }
.market-rail .feed-note { margin: 0 0 10px; font-size: 12px; }
.rail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.rail-stat { background: #f6f8fa; border-radius: 8px; padding: 10px 12px; min-width: 0; }
.rail-stat span { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #5b6673; }
.rail-stat strong { display: block; font-size: 19px; line-height: 1.2; margin: 2px 0; color: #0f1720; font-variant-numeric: tabular-nums; }
.rail-stat small { display: block; font-size: 11.5px; color: #5b6673; }
.rail-assets { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.rail-assets th { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #5b6673; font-weight: 600; text-align: left; padding: 0 0 6px; border-bottom: 1px solid #e1e6ec; }
.rail-assets td { padding: 7px 0; border-bottom: 1px solid #eef1f4; vertical-align: middle; }
.rail-assets tr:last-child td { border-bottom: 0; }
.rail-assets .num, .rail-assets th.num { text-align: right; white-space: nowrap; padding-left: 6px; }
.rail-assets .asset-cell { text-decoration: none; color: inherit; }
.rail-assets .asset-cell strong { display: block; font-size: 13px; line-height: 1.15; }
.rail-assets .asset-cell small { color: #5b6673; font-size: 11px; }
.rail-assets .strong { font-weight: 600; }
.rail-assets .week { width: 78px; }
.rail-assets .week small { display: block; font-size: 10.5px; line-height: 1; margin-top: 2px; }
.rail-spark { display: block; margin-left: auto; }
.rail-spark.none { height: 22px; }
.rail-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.rail-mover { border: 1px solid #e1e6ec; border-radius: 8px; padding: 9px 11px; min-width: 0; }
.rail-mover span { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #5b6673; }
.rail-mover a { color: inherit; text-decoration: none; }
.rail-mover strong { display: block; font-size: 14px; margin: 3px 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-mover .positive, .rail-mover .negative { font-weight: 600; font-size: 14px; }
.rail-mover small { margin-left: 6px; color: #5b6673; font-size: 11.5px; }
.rail-breadth { margin: 12px 0 0; font-size: 13px; color: #3c4750; }
.rail-breadth strong { color: #0f1720; }
.rail-markets > a { display: inline-block; margin-top: 6px; }

/* ------------------------------------------------------------------------- */
/*
 * Wire artwork and the video shelf.
 *
 * Every picture on a wire card is the outlet's own file, embedded from the
 * outlet's server and never copied here; when that server declines, the drawn
 * plate is already behind it. The player is YouTube's embedded one — the
 * licence a channel grants by publishing there.
 */
.side-plate { position: relative; overflow: hidden; }
.side-plate .wire-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.play-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(7, 17, 31, 0.72);
}
.play-badge::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 10px;
  border-left: 12px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.lead-image .lead-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lead-image.has-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 17, 31, 0) 35%, rgba(7, 17, 31, 0.85) 100%);
}
.lead-image .lead-overlay { z-index: 1; }
.article-hero-image { position: relative; overflow: hidden; }
.article-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-credit { font-size: 12px; color: #5b6472; margin: -16px 0 24px; }
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  margin: 24px 0;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-shelf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 28px; }
.video-shelf .side-story { display: block; border-bottom: 0; }
.video-shelf .side-plate { width: 100%; height: 170px; margin-bottom: 10px; }
@media (max-width: 720px) {
  .video-shelf { grid-template-columns: 1fr; }
}

/* ------------------------------- technical analysis, and the screener --- */
.tool-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.tool-picker label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tool-picker select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff; min-width: 240px; }
.tool-picker button { padding: 7px 14px; border: 0; border-radius: 6px; background: var(--blue); color: #fff; font-weight: 700; cursor: pointer; }
.tool-picker-note { font-size: 12px; color: var(--muted); }
.chart-title { font-size: 22px; margin: 0 0 4px; }
.chart-title .eyebrow { margin-left: 6px; }
/* TradingView's loader replaces the __widget div with the iframe itself, so
   the iframe is sized directly, wherever in the container it lands. */
.tv-workbench .tradingview-widget-container { height: 680px !important; margin-top: 8px; display: block; }
.tv-workbench .tradingview-widget-container__widget,
.tv-workbench iframe { height: 680px !important; min-height: 680px !important; width: 100% !important; display: block; }
.tv-workbench .tradingview-widget-copyright { display: none; }
.chart-held { margin-top: 18px; }
/* Our own hundred, under TradingView's everything. */
.screener-ours { margin: 24px 0 14px; }
@media (max-width: 720px) {
  .tv-workbench .tradingview-widget-container { height: 520px !important; }
  .tv-workbench .tradingview-widget-container__widget,
  .tv-workbench iframe { height: 520px !important; min-height: 520px !important; }
  .tool-picker select { min-width: 0; flex: 1; }
}

/*
 * The platform credit, at the very bottom of the footer.
 *
 * `.footer a` in the bundle is a block at 11px with a 9px margin, which is
 * right for a column of links and wrong for one line of credit under the
 * disclosures — so this restates the box rather than inheriting it. It sits on
 * its own row because the two disclosure spans above it are inline and would
 * otherwise swallow it into their sentence.
 */
.footer-bottom .powered-by {
  display: flex; width: fit-content; align-items: center; gap: 5px;
  margin: 12px 0 0; font-size: 11px; letter-spacing: .04em; color: #8090a1;
}
.footer-bottom .powered-by strong { color: #fff; font-weight: 800; letter-spacing: .06em; }
.footer-bottom .powered-by:hover, .footer-bottom .powered-by:hover strong { color: #00a8e8; }

/* ------------------------------------------- the masthead on a phone --- */

/*
 * Below 920px the compiled stylesheet hides `.desktop-nav`, and below 1180px
 * it hides `.utility-actions`; the bundle replaced both with a menu its own
 * script opened. Rendered on the server there is no such script, so the menu
 * is `<details>` — the disclosure the browser already has. It opens with
 * JavaScript off, it is keyboard-operable, and it reports its own state.
 *
 * `.mobile-nav` and its links are the bundle's own classes, so the panel is
 * laid out by the design that was already there: three columns, two below
 * 640px. Only the things that class never had — the toggle, the panel it
 * drops, and a tap target big enough for a thumb — are added here.
 */
.mobile-menu { display: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border: 1px solid var(--border, #e1e6ec);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  user-select: none;
  /* Three ways to drop the disclosure triangle, because the browsers differ. */
  list-style: none;
}

.menu-toggle::-webkit-details-marker { display: none; }
.menu-toggle::marker { content: ""; }
.menu-toggle:hover { color: var(--blue, #0066cc); border-color: var(--blue, #0066cc); }
.mobile-menu[open] .menu-toggle { color: var(--blue, #0066cc); border-color: var(--blue, #0066cc); }

.mobile-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid var(--border, #e1e6ec);
  box-shadow: 0 12px 24px rgba(7, 17, 31, 0.12);
  /*
   * A long menu scrolls inside itself rather than off the end of the screen.
   * `vh` on a phone is the viewport with the URL bar retracted, which is taller
   * than what is actually on screen; `dvh` is the height there really is, and
   * the line above it is what a browser without `dvh` gets.
   */
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
}

@media (max-width: 920px) {
  /* The header is the panel's containing block, and paints above the tape. */
  .main-header { position: relative; z-index: 30; }
  .mobile-menu { display: block; margin-left: auto; }
  .mobile-menu-panel { padding: 0 18px; }
  .mobile-nav { border-bottom: 0; }
  .mobile-nav a {
    padding: 13px 8px;
    font-size: 12px;
    color: #374151;
    border-bottom: 1px solid #eef1f4;
  }
  .mobile-nav a:hover { color: var(--blue, #0066cc); }
  .mobile-nav-reader { border-top: 2px solid var(--navy, #07111f); margin-top: 2px; }
}

@media (max-width: 640px) {
  .mobile-menu-panel { padding: 0 14px; }
}

/*
 * Between the two breakpoints the compiled sheet hides the reader's own links
 * and the menu that carries them has not appeared yet, so Search, Alerts, the
 * watchlist, the portfolio and the account fall through the gap. The bar has
 * room for them at this width.
 */
@media (min-width: 921px) and (max-width: 1180px) {
  .utility-actions { display: flex; }
}

/* ------------------------------------------------------ the masthead mark --- */
/*
 * `.brand` in your stylesheet aligns its two words on the baseline with a 5px
 * gap. A square mark has no baseline to sit on, so it centres itself instead,
 * and takes its size in `em` from whatever `.brand` is set to — 21px normally,
 * 18px on a phone — so the lockup holds its proportions at both.
 *
 * The extra 3px sits on the mark alone rather than in `gap`, which would also
 * push CRYPTO and INFO apart.
 */
.brand .cin-mark {
  width: 1.3em;
  height: 1.3em;
  flex: none;
  align-self: center;
  margin-right: 3px;
}

/* --------------------------------------------------------------------------
 * The contact form — the fleet standard (360REV, 2026-09-04).
 *
 * Generated. The block between the two markers is the output of
 * `contactCss(TOPICS)` in server/views/contact.js, written here by
 * `npm run contact:css` because this sheet is a static file and the compiled
 * `index-*.css` is never edited. The test suite fails if the two drift, so a
 * change to the fragment or to the topic catalog is a change to this file too.
 * Colours read the compiled sheet's own tokens (--blue, --text, --muted,
 * --border, --soft, --red, --green) with the same literals as fallbacks.
 * ----------------------------------------------------------------------- */
/* >>> contact — generated by scripts/contact-css.mjs from server/views/contact.js; do not edit by hand */
/* contact — fleet standard */
.cf{--cf-accent:var(--blue,#0066cc);--cf-ink:var(--text,#111827);--cf-ink2:var(--muted,#5b6472);--cf-ink3:#8f9bad;
  --cf-line:var(--border,#e1e6ec);--cf-surface:#fff;--cf-r:4px;--cf-bad:var(--red,#dc2626);
  max-width:680px;display:grid;gap:26px;margin:22px 0 34px}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-step{display:flex;align-items:baseline;gap:10px;font-size:17px;font-weight:700;color:var(--cf-ink);margin:0 0 12px;flex-wrap:wrap}
.cf-step span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--cf-accent);color:#fff;font-size:13px;flex:none;align-self:center}
.cf-step em{font-style:normal;font-weight:400;font-size:13px;color:var(--cf-ink3)}
.cf-topics{border:0;padding:0;margin:0;min-width:0}
.cf-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.cf-tile{position:relative;display:block;cursor:pointer;min-width:0}
.cf-tile input{position:absolute;opacity:0;width:1px;height:1px}
.cf-tile__body{display:grid;gap:3px;padding:12px 14px;min-height:64px;border:1px solid var(--cf-line);border-radius:var(--cf-r);background:var(--cf-surface);transition:border-color .15s,box-shadow .15s,transform .15s}
.cf-tile__body strong{font-size:14.5px;color:var(--cf-ink)}
.cf-tile__body small{font-size:12.5px;line-height:1.4;color:var(--cf-ink2)}
.cf-tile:hover .cf-tile__body{border-color:var(--cf-accent);transform:translateY(-1px)}
.cf-tile input:checked+.cf-tile__body{border-color:var(--cf-accent);box-shadow:0 0 0 2px var(--cf-accent) inset}
.cf-tile input:focus-visible+.cf-tile__body{outline:2px solid var(--cf-accent);outline-offset:2px}
.cf-field{display:grid;gap:5px;min-width:0}
.cf-field label,.cf-reply legend{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--cf-ink)}
.cf-opt{font-weight:400;color:var(--cf-ink3);font-size:12px}
.cf-why{font-size:12.5px;line-height:1.45;color:var(--cf-ink2);margin:0}
.cf-in{width:100%;min-width:0;border:1px solid var(--cf-line);border-radius:var(--cf-r);padding:11px 12px;font:inherit;font-size:15px;background:var(--cf-surface);color:var(--cf-ink);min-height:44px}
.cf-in:focus{outline:2px solid var(--cf-accent);outline-offset:1px}
.cf-in[aria-invalid=true]{border-color:var(--cf-bad)}
textarea.cf-in{resize:vertical;min-height:150px;line-height:1.5}
.cf-pair,.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-count{font-size:12px;color:var(--cf-ink3);margin:0;text-align:right;font-variant-numeric:tabular-nums}
.cf-count.is-low{color:var(--amber,#d97706)}
.cf-error{font-size:13px;color:var(--cf-bad);margin:0;font-weight:700}
.cf-error--form{padding:10px 12px;border:1px solid var(--cf-bad);border-left-width:3px;border-radius:var(--cf-r);background:#fef2f2}
.cf-when{display:none;padding:18px;border:1px dashed var(--cf-line);border-radius:var(--cf-r)}
.cf-when[data-open]{display:block}
@supports not selector(:has(*)){.cf-when{display:block}}
.cf:has([name=topic][value="correction"]:checked) .cf-when[data-when="correction"]{display:block}
.cf:has([name=topic][value="tip"]:checked) .cf-when[data-when="tip"]{display:block}
.cf:has([name=topic][value="listing"]:checked) .cf-when[data-when="listing"]{display:block}
.cf:has([name=topic][value="press"]:checked) .cf-when[data-when="press"]{display:block}
.cf:has([name=topic][value="advertising"]:checked) .cf-when[data-when="advertising"]{display:block}
.cf:has([name=topic][value="partnership"]:checked) .cf-when[data-when="partnership"]{display:block}
.cf:has([name=topic][value="scam"]:checked) .cf-when[data-when="scam"]{display:block}
.cf:has([name=topic][value="legal"]:checked) .cf-when[data-when="legal"]{display:block}
.cf-after{display:grid;gap:22px}
.cf-reply{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
.cf-radios{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.cf-radio,.cf-check{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--cf-line);border-radius:var(--cf-r);cursor:pointer;background:var(--cf-surface);min-height:44px}
.cf-radio input,.cf-check input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--cf-accent)}
.cf-radio span,.cf-check span{display:grid;gap:2px;font-size:14px;color:var(--cf-ink)}
.cf-radio small,.cf-check small{font-size:12.5px;color:var(--cf-ink2);line-height:1.4}
.cf-radio:has(input:checked),.cf-check:has(input:checked){border-color:var(--cf-accent)}
.cf-phone{display:none;margin-top:4px}
.cf:has([name=replyBy][value=phone]:checked) .cf-phone{display:block}
@supports not selector(:has(*)){.cf-phone{display:block}}
.cf-final{display:grid;gap:14px}
.cf-actions{display:grid;gap:10px}
.cf-go{background:var(--cf-accent);border:1px solid var(--cf-accent);color:#fff;border-radius:var(--cf-r);padding:13px 26px;font:inherit;font-size:15.5px;font-weight:800;cursor:pointer;min-height:48px;justify-self:start;transition:transform .15s,box-shadow .15s}
.cf-go:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.14)}
.cf-go:focus-visible{outline:2px solid var(--cf-ink);outline-offset:2px}
.cf-fine{font-size:12.5px;line-height:1.5;color:var(--cf-ink2);margin:0}
.cf-aside{display:grid;gap:10px;align-content:start;font-size:14px;line-height:1.55;color:var(--muted,#5b6472)}
.cf-aside h2{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5b6472);margin:8px 0 0}
.cf-aside h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5b6472);margin:8px 0 0}
.cf-aside p{margin:0}
.cf-aside a{color:var(--blue,#0066cc)}
.cf-expect{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cf-expect li{display:grid;gap:1px;padding-left:12px;border-left:2px solid var(--blue,#0066cc)}
.cf-expect strong{font-size:13.5px;color:var(--text,#111827)}
.cf-expect span{font-size:13px;color:var(--muted,#5b6472)}
.cf-done{max-width:640px;background:var(--soft,#f5f7fa);border:1px solid var(--border,#e1e6ec);border-left:4px solid var(--green,#16a34a);border-radius:4px;padding:22px 24px;margin:22px 0 34px;display:grid;gap:8px}
.cf-done__kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#5b6472);margin:0}
.cf-done h2{margin:0;font-size:22px}
.cf-done p{margin:0;font-size:15px;line-height:1.55}
.cf-done__ref code{font-size:14px;padding:2px 6px;border:1px solid var(--border,#e1e6ec);border-radius:4px;background:#fff}
.cf-done__links a{color:var(--blue,#0066cc);font-weight:700}
@media (max-width:600px){.cf-pair,.cf-grid,.cf-radios{grid-template-columns:1fr}.cf-tiles{grid-template-columns:1fr 1fr}.cf-go{width:100%;justify-self:stretch}}
@media (max-width:400px){.cf-tiles{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.cf-tile__body,.cf-go{transition:none}}
/* <<< contact */

/* ---------------------------------------------------- the smallest phones --- */
/*
 * Measured at 320px (2026-09-04): the wordmark (21px, nowrap) plus the bar's
 * 28px gap plus the Menu button came to more than the 292px the container
 * leaves, so the button sat 14px past the edge and the page scrolled sideways;
 * and the front page's rail column carried a 300px floor into a one-column
 * layout, so the news column was 350px wide on a 320px screen. Both are the
 * compiled sheet's values, overridden here rather than edited there.
 */
@media (max-width: 380px) {
  .main-header-inner { gap: 10px; }
  .brand { font-size: 15px; gap: 4px; }
  .brand .cin-mark { width: 22px; height: 22px; }
  .menu-toggle { padding: 10px 10px; }
  .home-layout { grid-template-columns: minmax(0, 1fr); }
  .home-main, .home-rail { min-width: 0; }
  .side-story { grid-template-columns: 88px minmax(0, 1fr); }
  .side-story img, .side-story .side-plate { width: 88px; height: 74px; }
  .side-story h3 { font-size: 15px; overflow-wrap: anywhere; }
  .mobile-nav, .mobile-nav-reader { grid-template-columns: 1fr; }
  /* The live price rail is a table of nowrap rows; at this width it scrolls
     inside its panel instead of widening the page. */
  .market-rail { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rail-panel, .category-panel, .home-rail { min-width: 0; }
  /* Belt and braces on the smallest phones: whatever a third-party widget
     (the TradingView tape, an embed) decides its width is, the page itself
     never scrolls sideways. */
  .app-shell { overflow-x: clip; }
}
@media (max-width: 920px) {
  /* Footer links were 14px-tall targets; a thumb needs 40+. */
  .footer-grid a { min-height: 40px; display: flex; align-items: center; }
  .rail-panel > a, .section-heading a { min-height: 40px; display: inline-flex; align-items: center; }
}
@media (max-width: 640px) {
  img, video, iframe { max-width: 100%; }
  .article-body, .article-head h1, .lead-overlay h1, .side-story h3, .news-list-card h2 { overflow-wrap: anywhere; }
  .article-body table { display: block; overflow-x: auto; }
}