/* c.markets.css: the drawn blocks of a Markets Brief page.
   Loaded only by writing/markets/<slug>.html, through head_extra in
   templates/article.html. The markup comes from BLOG's
   tools/markets/blocks_*.py and charts.py; the class names are that
   code's output. Charts carry their own fills inline, so no sector
   colour is declared here.

   This sheet loads after article.css. Where article.css styles p,
   lists, blockquote and tables inside .c-art-body, the rules below
   tie its specificity and win on source order; a test pins the
   order. No motion anywhere. */

.c-art-body {
  /* Stance for risk assets. Teal and crimson are the only red and
     green on the page; grey is mixed. Each always sits beside an
     arrow and a word, so colour never carries the stance alone. */
  --mk-bull: #00866A;
  --mk-bear: #9D2235;
  --mk-mixed: #8A9099;
  --mk-mono: "IBM Plex Mono", monospace;
}
.mk-stance--bullish { --mk-stance: var(--mk-bull); }
.mk-stance--bearish { --mk-stance: var(--mk-bear); }
.mk-stance--mixed { --mk-stance: var(--mk-mixed); }

/* ── Header ─────────────────────────────────────────────── */
p.c-art-dek { margin: 14px 0 0; font-size: 19px; line-height: 1.45;
  color: var(--ink-2); }
/* Same pull-up as the AI brief's window line: 10px under the date. */
p.mk-window { margin: -38px 0 24px; font-family: var(--mk-mono);
  font-size: 12.5px; letter-spacing: .04em; color: var(--muted);
  text-align: left; }

/* ── Shared pieces ──────────────────────────────────────── */
.mk-label { display: block; font-family: var(--mk-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); }
.mk-meta, .mk-note { display: block; font-family: var(--mk-mono);
  font-size: 11.5px; line-height: 1.5; color: var(--muted); }
p.mk-note { margin: 10px 0 0; text-align: left; }
span.mk-chip { display: inline-block; margin-top: 8px; padding: 2px 9px;
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--mk-mono); font-size: 11.5px;
  color: var(--ink-2); background: var(--bg); }
.mk-stance--bullish .mk-chip { border-color: #C3DFD8;
  background: #EFF8F6; color: #1F6F5C; }
.mk-stance--bearish .mk-chip { border-color: #E7B8C0;
  background: #FBECEE; color: #7A1A29; }
.mk-stance--mixed .mk-chip { border-color: var(--line);
  background: var(--bg); color: var(--ink-2); }

/* ── Region, quote and cash cards ───────────────────────── */
/* A top border in the stance colour, as the AI brief's verdict
   cards carry their role. Card text is too narrow to justify. The
   three regions share one row; every quote and cash card takes a
   row of its own, the full width of the column. */
.mk-regions { display: grid; gap: 12px;
  grid-template-columns: repeat(3, 1fr); }
.mk-quotes, .mk-cashes { display: grid; gap: 12px;
  grid-template-columns: 1fr; }
.mk-region, .mk-quote, .mk-cash { min-width: 0; padding: 14px 16px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--mk-stance, var(--line));
  background: var(--paper); }
figure.mk-quote { margin: 0; }
/* Split into three standalone rules, each tying .c-art-body p on
   specificity: a combined selector cannot be pinned as one of the
   three when the page tests check each one wins on its own. */
.mk-region p { margin: 8px 0 0; font-size: 14px; line-height: 1.5;
  text-align: left; color: var(--ink-2); }
.mk-quote p { margin: 8px 0 0; font-size: 14px; line-height: 1.5;
  text-align: left; color: var(--ink-2); }
.mk-cash p { margin: 8px 0 0; font-size: 14px; line-height: 1.5;
  text-align: left; color: var(--ink-2); }
.mk-quote blockquote { margin: 10px 0 0; padding-left: 0;
  border-left: 0; font-size: 15px; line-height: 1.5;
  color: var(--ink); }
.mk-quote figcaption { margin-top: 8px; font-size: 12.5px;
  color: var(--muted); }
p.mk-if { font-size: 13px; }
b.mk-figure { display: block; margin: 6px 0 4px;
  font-family: "Space Grotesk", sans-serif; font-size: 24px;
  font-weight: 600; color: var(--ink); }
p.mk-cash-note { font-size: 13px; }

/* ── Tables: scorecard, watchlist, scores ───────────────── */
/* article.css makes every table a scrolling block with boxed cells.
   These are short and read as lists, so rows get hairlines only. */
table.mk-table { display: table; width: 100%; font-size: 14px;
  border-collapse: collapse; }
.mk-table th { border: 0; padding: 6px 8px 6px 0;
  font-family: var(--mk-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); }
.mk-table td { border: 0; padding: 9px 8px 9px 0;
  border-top: 1px solid var(--line-2); vertical-align: top;
  color: var(--ink-2); }
.mk-scorecard, .mk-watch, .mk-watch-score { overflow-x: auto; }
/* A cell's second line (ticker and exchange, the event under its
   date, the reason under a watch point, a claim's outcome) is a
   span the block code writes with no space before it, so it must
   break onto its own line or the words run together. */
.mk-table td span { display: block; margin-top: 4px; font-size: 13px;
  line-height: 1.45; color: var(--muted); }
.mk-verdict { font-family: var(--mk-mono); font-size: 12px;
  white-space: nowrap; }
.mk-verdict--right { color: #1F6F5C; }
.mk-verdict--wrong { color: #7A1A29; }
.mk-verdict--open { color: var(--muted); }

/* ── Charts ─────────────────────────────────────────────── */
figure.mk-chart { margin-left: 0; margin-right: 0; }
.mk-chart { padding: 16px 18px; border: 1px solid var(--line);
  background: var(--paper); }
.mk-chart figcaption { margin-bottom: 12px; }
.mk-bars, .mk-line { display: block; width: 100%; height: auto; }
.mk-shift, .mk-macro, .mk-score { overflow: hidden; }
p.mk-verdict-line { margin: 10px 0 0; font-size: 14px;
  text-align: left; color: var(--ink-2); }

/* Fund cards: one donut per fund, one to a row. */
.mk-funds { display: grid; gap: 16px; grid-template-columns: 1fr; }
.mk-funds > p.mk-note { grid-column: 1 / -1; margin: 0; }
.mk-fund { min-width: 0; }
div.mk-pie { display: flex; align-items: center; gap: 14px;
  margin-top: 10px; }
.mk-donut { flex: none; max-width: 45%; height: auto; }
p.mk-moves { margin: 10px 0 0; font-size: 13px; line-height: 1.5;
  text-align: left; color: var(--ink-2); }

/* Legend: the swatch carries the colour, the text stays in ink. */
ul.mk-legend { flex: 1; min-width: 0; margin: 0; padding-left: 0;
  list-style: none; font-size: 13px; color: var(--ink-2); }
.mk-legend li { display: flex; align-items: baseline; gap: 8px; }
.mk-legend li + li { margin-top: 0; padding-top: 4px; }
.mk-legend i { flex: none; width: 10px; height: 10px;
  border-radius: 2px; }
.mk-legend span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Share and move keep their width, so a long sector name wraps
   instead of running under the numbers. */
.mk-legend b, .mk-legend em { flex: none; }
.mk-legend em { min-width: 3.4em; text-align: right; }

/* Paper fund: the sector donut and the region tiles. */
.mk-paper { min-width: 0; }
/* One tile per region, so the row fills the block's width. */
div.mk-tiles { display: grid; gap: 8px; margin-top: 14px;
  grid-template-columns: repeat(3, 1fr); }
.mk-tile { padding: 8px 10px; border: 1px solid var(--line-2);
  background: var(--bg); }
/* A tile is a narrow column; article.css's justified prose would
   open wide gaps between its words. */
.mk-tile p { margin: 4px 0 0; font-size: 13px; line-height: 1.45;
  text-align: left; color: var(--ink-2); }
.mk-tile b { display: block; margin-top: 2px; font-family:
  var(--mk-mono); font-size: 17px; font-weight: 500;
  color: var(--ink); }

/* ── Close ──────────────────────────────────────────────── */
/* blockquote.mk-prediction, and the disclosure pair below, restate
   what article.css sets on every blockquote and on p + p. */
blockquote.mk-prediction { margin-left: 0; margin-right: 0;
  padding: 14px 18px;
  border-left: 3px solid var(--blue); background: var(--paper); }
.mk-prediction p { margin: 0; font-size: 17px; line-height: 1.5;
  text-align: left; color: var(--ink); }
ul.mk-sources { padding-left: 0; list-style: none; font-size: 14px;
  color: var(--ink-2); }
.mk-sources li { text-align: left; overflow-wrap: anywhere; }
p.mk-disclosure { font-size: 13px; line-height: 1.55;
  text-align: left; color: var(--ink-2); }
p.mk-disclosure + p.mk-disclaimer { margin-top: 8px; }
p.mk-disclaimer { font-family: var(--mk-mono);
  font-size: 11.5px; line-height: 1.6; text-align: left;
  color: var(--muted); }

/* ── Narrow screens ─────────────────────────────────────── */
/* .c-art caps the column at 720px; below it the three-up region
   cards drop to one column. */
@media (max-width: 720px) {
  .mk-regions { grid-template-columns: 1fr; }
  .mk-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mk-chart { padding: 14px; }
  .mk-pie { flex-direction: column; align-items: flex-start; }
  .mk-donut { max-width: 60%; }
  p.c-art-dek { font-size: 17px; }
}