/* c.bitcoin.css: the drawn blocks of a Bitcoin Brief page, loaded
   after c.markets.css (a test pins the order) by head_extra in
   templates/article.html, and by no other page. It adds the bt-
   rules the Markets sheet has no reason to carry: stance colour,
   the book donuts, the one drawdown chart, plus the one mk- block
   this series alone reshapes. No colour beyond c.markets.css's
   bull, bear and mixed. No motion. */

.c-art-body {
  /* The air every drawn block gets below, declared once and reused
     through var(--bt-air): it matches article.css's own p + p
     rhythm, the 1.9em gap between two paragraphs in the prose. */
  --bt-air: 1.9em;
}

/* ── Stance colour ──────────────────────────────────────── */
/* Decision 3: a stance tile or row carries a coloured edge, never
   colour alone, since the arrow and the word beside it always
   repeat the call. A figure without a stance in the data keeps the
   plain border it has today. */
.bt-tile.mk-stance--bullish { border-top: 3px solid var(--mk-bull); }
.bt-tile.mk-stance--bearish { border-top: 3px solid var(--mk-bear); }
.bt-tile.mk-stance--mixed { border-top: 3px solid var(--mk-mixed); }
/* td:first-child rides on the firm always being column one. */
tr.bt-row.mk-stance--bullish td:first-child {
  box-shadow: inset 3px 0 0 var(--mk-bull); }
tr.bt-row.mk-stance--bearish td:first-child {
  box-shadow: inset 3px 0 0 var(--mk-bear); }
tr.bt-row.mk-stance--mixed td:first-child {
  box-shadow: inset 3px 0 0 var(--mk-mixed); }
/* mk-table's own td padding is 9px 8px 9px 0, so the firm name sat
   flush on the inset shadow above; this clears it. */
tr.bt-row td:first-child { padding-left: 10px; }

/* ── Scorecard ──────────────────────────────────────────── */
/* A month with nothing settled prints the block as its note alone,
   and mk-note carries a top margin only, so the sentence sat flush
   on the paragraph below and read as a dropped line. */
.mk-scorecard > p.mk-note:only-child { margin-bottom: 22px; }

/* ── Drawdown chart ─────────────────────────────────────── */
/* One inline svg, named by its own class; c.markets.css has no
   bare-svg rule, so without this it would render at its intrinsic
   size. */
.bt-drawdown-chart { display: block; width: 100%; height: auto; }
/* The chart sets its own size and family on every label it draws,
   and a sheet rule beats both. An old rule that flattened them to
   11px mono once widened the legend to the card edge and pushed the
   marks into each other, so the drawing code keeps the type. */
/* The "you are here" mark is the one caption that must read as the
   reader's own position on the chart, so it carries ink and
   weight. */
.bt-drawdown .bt-drawdown-chart text.bt-here { fill: var(--ink-2);
  font-weight: 600; }
/* Every axis rule and grid line in the chart carries this class;
   each drawn series carries its own inline stroke instead, so a
   sheet colour here can never flatten a data series into the grid. */
.bt-grid { stroke: var(--line-2); }

/* Cycle chart spec, decision 4: the chart sits at the article's own
   width, in the ordinary flow, so it lines up with the tables and
   the prose beside it. No width, margin-left or transform here: the
   breakout this figure used to carry is gone, and figure.mk-chart's
   own margin-left: 0 from c.markets.css is all it keeps. */
/* Every drawn figure and table block keeps the same rhythm as a
   paragraph (var(--bt-air) above), so it never butts against the
   prose or block beside it. */
figure.bt-drawdown {
  margin-top: var(--bt-air);
  margin-bottom: var(--bt-air);
}

/* The mean and median summary sits under the drawdown chart inside
   the same figure: a label and a three column table. The figure
   scrolls on a phone narrower than the svg's own floor, so this
   block states its own scroll rather than taking whichever ancestor
   happens to clip it, and keeps a gap from the note above. */
.bt-drawdown .bt-cycles-stats { display: block; overflow-x: auto;
  margin-top: 12px; }

/* ── Now tiles ──────────────────────────────────────────── */
/* One tile per metric in decision 2's fixed monthly set, four
   across, each the card the Markets regions use. */
div.bt-now { display: grid; gap: 8px; margin-top: 14px;
  margin-bottom: var(--bt-air);
  grid-template-columns: repeat(4, 1fr); }
.bt-tile { padding: 8px 10px; border: 1px solid var(--line-2);
  background: var(--bg); }
/* A label wraps to one or two lines depending on its own text, so
   without a reserved height the value under it landed at a
   different y in each card of the same row. Two lines reserved at
   this line height, so a one line label still holds the space a
   two line one would take. */
.bt-tile .mk-label { line-height: 1.3; min-height: 2.6em; }
/* A tile is a narrow column; justified prose would gap badly. */
.bt-tile p { margin: 4px 0 0; font-size: 13px; line-height: 1.45;
  text-align: left; color: var(--ink-2); }
.bt-tile b { display: block; margin-top: 2px; font-family:
  "Space Grotesk", sans-serif; font-size: 20px; font-weight: 500;
  color: var(--ink); }

/* ── Drivers ────────────────────────────────────────────── */
/* One row per signal moving the cycle this month, each carrying a
   stance chip (.mk-chip, .mk-stance--*) so it reads the same way a
   Markets region does; the chip itself needs no rule of its own. */
.bt-drivers { display: grid; gap: 10px; grid-template-columns: 1fr; }

/* ── Institutions and altcoins ──────────────────────────── */
/* Each block wraps one table.mk-table, which keeps c.markets.css's
   styling in full; this only adds the scroll a wide table needs on
   a narrow column, same as .mk-scorecard and .mk-watch. */
div.bt-institutions, div.bt-altcoins { overflow-x: auto;
  margin-top: var(--bt-air); margin-bottom: var(--bt-air); }
/* The scroll above engages only where the table is wider than the
   block, and table.mk-table is width: 100% with no floor, so both
   squeezed instead. Each floor sums that table's own columns.
   Institutions, 5 columns: 116, 75, 97, 73, plus a 390 character
   note needing about 440px at 60 characters a line; at 560px the
   note held 227px and the tallest row 350px, at 800px 439px and
   201px. Altcoins, 6 columns: 85, 65, 72, 58, a 98px chip and a
   344 character note at about 380px, the tallest row falling from
   371px to about 180px. Neither floor bites where the column is
   already wider, so the 1040px desktop tables are unchanged. */
.bt-institutions table { min-width: 800px; }
.bt-altcoins table { min-width: 760px; }
/* A stance chip in a narrow table cell broke between its arrow and
   its word, printing the two on separate lines; the block scrolls,
   so the chip may keep its own width. */
.bt-altcoins .mk-chip, .bt-drivers .mk-chip { white-space: nowrap; }

/* ── Book donuts ────────────────────────────────────────── */
/* Decision 6: up to four donuts, one per firm whose filing shows a
   whole book. A bare card; the donut and legend already carry their
   own type through c.markets.css's mk- rules. */
div.bt-books { display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--bt-air); margin-bottom: var(--bt-air); }
/* .bt-book is a figure; without this its 1em/40px browser default
   would inset each card inside the grid's own 16px gap, the way
   figure.mk-quote and figure.mk-chart already reset it. */
figure.bt-book { min-width: 0; margin: 0; padding: 14px 16px;
  border: 1px solid var(--line); background: var(--paper); }
.bt-book figcaption { margin: 0 0 10px; }
/* 40% here, narrower than a Markets fund card's 45%, so the crypto
   slice and its legend both fit one card beside the other three. */
.bt-book .mk-donut { max-width: 40%; }

/* ── Cycle clock ────────────────────────────────────────── */
/* The day count table (cycle chart spec, decision 2): a plain table
   block built like bt-institutions and bt-altcoins above, so it
   needs only their same rhythm. Its table.mk-table is two columns
   of short text, never wide enough to need the scroll those two
   give theirs. */
div.bt-cycle { margin-top: var(--bt-air); margin-bottom: var(--bt-air); }

/* ── Sentences in the body face ─────────────────────────── */
/* Decision 6: only labels stay mono. c.markets.css sets mk-note in
   mono for every page that loads it; this sheet loads on Bitcoin
   Brief pages only, so restyling it here through bitcoin selectors
   cannot touch a Markets or AI brief page. bt-note is task 4's own
   class, added beside mk-note on the institutions disclosure note
   and left for any other note. mk-label (case names, axis ticks,
   table headings, tile labels) is never touched; only the drawdown
   figure's own note needs the scoped mk-note override, so every
   other mk-note on the page stays mono. */
.bt-note, .bt-drawdown .mk-note {
  font-family: inherit;
  font-size: 14px;
  letter-spacing: normal;
}

/* ── Coins ──────────────────────────────────────────────── */
/* The ten coins render inside .mk-watch, which already scrolls. */
.bt-coins { min-width: 0; }
/* c.markets.css floors .mk-watch table at 840px for the Markets
   watchlist, whose watch point runs 460 characters. The same four
   columns here carry 154 at their longest, so 680px is enough: 90,
   244, 239, 107, tallest row 124px against 337px unfloored. Ties
   the Markets rule at (0,1,1) and this sheet loads after it, so
   only a Bitcoin Brief is lowered. */
.bt-coins table { min-width: 680px; }

/* ── Prediction ─────────────────────────────────────────── */
/* Decision 9: justified like every other paragraph, ragged on its
   last line. mk-prediction is a Markets class, but this sheet loads
   on Bitcoin Brief pages only, so a Markets Brief prediction is
   never touched. */
.mk-prediction p { text-align: justify; text-align-last: left; }

/* ── Narrow screens ─────────────────────────────────────── */
/* article.css holds the column at 1040px of content on wide
   screens; at a 720px viewport it is down to about 670px, where
   four tiles across would squeeze each figure unreadably, so the
   row drops to two and the book cards from two across to one. */
@media (max-width: 720px) {
  /* Matches `div.bt-now` and `div.bt-books`'s own specificity: a
     bare class lost to either and the row stayed at its wide count
     on a phone. */
  div.bt-now { grid-template-columns: 1fr 1fr; }
  div.bt-books { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Restates c.markets.css's own 640px donut width: without it,
     this card's higher specificity would keep the donut at 40% and
     undo the widening every other .mk-pie gets once it stacks. */
  .bt-book .mk-donut { max-width: 60%; }
  /* The chart is drawn on a 1000 unit viewBox (DD_WIDTH in the
     blog's charts_drawdown_frame.py, pinned there by a test that
     names this rule), so one unit must stay one pixel: without a
     floor a phone would shrink the 13 unit ticks past reading size.
     The cost is real and deliberate. At 390 the card scrolls 1000px
     against a 340px view, about three screens of dragging, where the
     narrower canvas scrolled 550. The alternative is 4.4px axis
     type, which is not a chart at all, so the drag wins. */
  .bt-drawdown { overflow-x: auto; }
  .bt-drawdown-chart { min-width: 1000px; }
  /* Matches article.css's own 640px concession: a justified line
     this narrow opens gaps between words. */
  .mk-prediction p { text-align: left; }
}