/* Morning Brief (2026-08-29) — the long-form page behind the Master Dashboard.
 *
 * This is a READING page, so it is set like one: an editorial
 * type scale that starts at 44px and steps down deliberately, and generous air between
 * sections. That is a different job from the dashboard's dense board, and the sizes here
 * are larger on purpose — a four-minute argument set at the dashboard's 14.5px is a
 * document nobody finishes.
 *
 * TWO widths, not one (see --mb-page / --mb-measure below). The page matches the BOARD's
 * width and the exhibits span it, while prose keeps a 76ch measure. Collapsing those into
 * a single 780px column is what made the page feel squeezed: the release cards, the board
 * and the diary were all being sized by a constraint that exists for the text. The page
 * width was 1360px until 2026-09-10, when the two faces were made one width and centred.
 *
 * Every colour is a TOKEN from app.css, never a literal. The page therefore works in all
 * six palette x theme combinations without a single override, and the wireframe's own
 * palette turns out to be this system's Cool Slate — the same hexes — so matching it took
 * no new colour at all.
 *
 * NINE sizes, one role each and no others. A tenth would be a decision nobody made:
 *   44px   the headline
 *   25px   a section heading, and a printed release figure (the one number a card exists
 *          to show, so it is set at heading weight rather than body)
 *   18px   the standfirst
 *   17px   body prose, wherever it appears
 *   15.5   a NAME or a secondary passage (a pair, an event, a change, a callout heading)
 *   14px   a table's own prose and small print
 *   12px   metadata beside a row (a time, a currency code, a date)
 *   11.5   small prose that is not a label (the byline, a link, a row's stats)
 *   11px   THE ONE uppercase label style (captions, sources, day headers, chips)
 */

/* ── the shell ─────────────────────────────────────────────────────────────── */
.mb-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text);
  font-family: var(--font-sans);
}
/* THE TWO WIDTHS, and they are deliberately different numbers.

   `--mb-page` is how wide the page is: what the board, the release cards, the pairs, the
   diary and every rule span. `--mb-measure` is how long a LINE of prose is allowed to get.
   One column doing both jobs is why this page read as squeezed at 780px: the exhibits
   were sized by a constraint that exists for the text. The wireframe draws the same
   distinction, capping its own paragraphs at 72ch inside a much wider page.

   ⚠️ `--mb-page` IS THE BOARD'S WIDTH, and it must stay that. The two faces of this view
   are Dashboard and Morning Brief, one click apart, and until 2026-09-10 they were 1000px
   centred and 1360px left-aligned — so switching faces moved the whole page sideways and
   changed its measure, which reads as two pages rather than two views of one.

   The number is the BOARD's because the board's is not ours to choose: `.page` is capped
   by the ported reference stylesheet (`scripts/port_desk_css.py`), and re-deriving that
   design by eye is the mistake this whole port exists to avoid. So the brief follows the
   board. `tests/test_master_dashboard_widths.py` reads the generated sheet and fails if
   the two ever disagree — including after a re-port that brings a new reference width. */
:root,
.mb-page {
  --mb-page: 1000px;
  --mb-measure: 76ch;
}
.mb-col {
  width: 100%;
  max-width: var(--mb-page);
  /* Centred, like the board's own `.page`. Without this the column sat against the left
     of the 1560px outer wrapper while the board sat in the middle of it. */
  margin-inline: auto;
  /* Less top padding than the standalone page had: the Dashboard's tab strip now sits
     directly above, and its own gap supplies the air. The SIDE inset is the board's own
     (`.page` in the ported sheet), so the brief's content lines up under the tab strip
     and with the board behind it. */
  padding: 8px 26px 84px;
  display: flex;
  flex-direction: column;
  gap: 46px;
}
.mb-empty,
.mb-notice {
  padding: 28px 24px;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.6;
}
.mb-notice {
  max-width: var(--mb-page);
  margin: 0 auto;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: var(--surface-row-active);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ── model switch ──────────────────────────────────────────────────────────── */
.mb-modelbar {
  width: 100%;
  max-width: var(--mb-page);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 26px 6px;
}
.mb-modelseg {
  padding: 5px 12px;
  border: 1px solid rgba(var(--hairline-rgb), 1);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.mb-modelseg:hover { color: var(--text); }
.mb-modelseg--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.mb-modelbar-note {
  font-size: 11px;
  color: var(--text-faint);
  margin-left: 4px;
}

/* ── masthead ──────────────────────────────────────────────────────────────── */
.mb-masthead {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.mb-flag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding-bottom: 4px;
}
.mb-flag-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--font-mono);
}
.mb-flag-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border: 1px solid rgba(var(--hairline-rgb), 1);
  border-radius: var(--r-pill);
  background: var(--surface-row-active);
  color: var(--text);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.mb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bull-dot);
  animation: mb-pulse var(--dur-pulse) ease-in-out infinite;
}
@keyframes mb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .mb-dot { animation: none; } }

.mb-h1 {
  margin: 0;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -.024em;
  text-wrap: balance;
}
/* The remainder of a headline too long to be one. It is not a subtitle: it is the second
   half of the same sentence, so it stays in the h1 and only changes colour. */
.mb-h1-tail { color: var(--accent); }

/* Every rule below carries the measure. A paragraph is read left-to-right and a long
   line costs the reader the start of the next one; a table cell is scanned, and wants the
   room. The two exceptions on this page are deliberate: a card's read and a board row's
   note already sit inside a narrow column of their own. */
.mb-stand {
  margin: 0;
  max-width: var(--mb-measure);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}
.mb-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  padding: 12px 0;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid rgba(var(--hairline-rgb), 1);
  font-size: 11.5px;
  color: var(--text-faint);
}
.mb-byline b { color: var(--text); font-weight: 600; }
.mb-warn { color: var(--bear-text); }

/* ── sections ──────────────────────────────────────────────────────────────── */
.mb-sec {
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.mb-h2 {
  margin: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(var(--hairline-rgb), 1);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.018em;
}
.mb-p {
  margin: 0;
  max-width: var(--mb-measure);
  font-size: 17px;
  line-height: 1.62;
  color: var(--text-2);
  text-wrap: pretty;
}
.mb-p--tight { font-size: 15.5px; line-height: 1.6; }
.mb-p b { color: var(--text); font-weight: 600; }
.mb-fine { color: var(--text-faint); font-size: 14px; }

/* ── the ONE uppercase style ───────────────────────────────────────────────── */
.mb-label,
.mb-ex-cap,
.mb-ex-src span:first-child,
.mb-day-h,
.mb-chip,
.mb-pkill span {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

/* ── exhibits ──────────────────────────────────────────────────────────────── */
.mb-ex {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
/* The caption names the exhibit; the part after the dash says what it shows, and that
   half is the reader's colour because it is the half they actually read. */
.mb-ex-cap span { color: var(--text); }
.mb-ex-src {
  max-width: var(--mb-measure);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-faint);
}
/* Hairline-separated rows over a single rule-coloured field: the gaps ARE the borders,
   so a row never carries a border of its own and the rhythm cannot drift by a pixel. */
.mb-tbl {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(var(--hairline-rgb), 1);
  border: 1px solid rgba(var(--hairline-rgb), 1);
  border-radius: var(--r-sm);
  overflow: hidden;
}

/* ── key points ────────────────────────────────────────────────────────────── */
.mb-keys { display: flex; flex-direction: column; gap: 13px; }
.mb-key {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.mb-key-dot {
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: 50%;
}
.mb-key .mb-p { line-height: 1.55; }
/* --bull-text / --bear-text for TEXT, --bull-dot / --bear-dot for MARKS. That split is
   why both pairs exist: the dot colours are tuned to be seen as a shape at 7px and read
   3.4:1 as 14px type in the light palettes, which is under AA. The -text pair is the same
   hue darkened until it passes. Using the dot colour for a bold score is the exact mistake
   this token pair was created to prevent. */
.mb-pos { color: var(--bull-text); }
.mb-neg { color: var(--bear-text); }
.mb-neu { color: var(--text-faint); }
.mb-key-dot.mb-pos { background: var(--bull-dot); }
.mb-key-dot.mb-neg { background: var(--bear-dot); }
.mb-key-dot.mb-neu { background: var(--accent); }

/* ── what just came out ────────────────────────────────────────────────────── */
/* Spans the exhibit rather than taking the prose measure: it is one metadata line, read
   once at a glance, and a measure meant for paragraphs only broke "next release in 1h 12m"
   across two of them. */
.mb-jo-legend {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-faint);
}
/* FOUR across, as the wireframe has them — which is what the page was widened to 1360px
   for. That leaves ~318px a card, a little more than the wireframe's own ~280px, so the
   anatomy survives intact: the release name takes two lines instead of one and the read
   runs a few lines longer. That is the trade the fourth column is worth.

   It steps DOWN rather than squeezing. Below 1100px four cards would be under 260px and
   the comparison line would start breaking mid-figure, so it halves; below 700px it goes
   single-file. The breakpoints are on the VIEWPORT rather than the column, because the
   column is already capped and it is the viewport that runs out first on a laptop. */
.mb-jos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.mb-jo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px 14px;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), 1);
  border-radius: var(--r-sm);
}
.mb-jo-top {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(var(--hairline-rgb), 1);
}
.mb-jo-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.mb-jo-dot.mb-pos { background: var(--bull-dot); }
.mb-jo-dot.mb-neg { background: var(--bear-dot); }
.mb-jo-dot.mb-neu { background: var(--accent); }
.mb-jo-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mb-jo-ago { font-size: 12px; color: var(--text-faint); }
/* Impact is not direction, so it does not borrow the bull/bear pair. Amber for a
   three-star, the faint ink for everything else. */
.mb-jo-stars { margin-left: auto; font-size: 11.5px; letter-spacing: .04em; color: var(--text-faint); }
.mb-jo-stars--hi { color: var(--warn-text); }
.mb-jo-name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mb-jo-rel {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
  min-width: 0;
  font-family: var(--font-mono);
}
.mb-jo-ccy { font-size: 12px; font-weight: 600; color: var(--text-2); flex: 0 0 auto; }
.mb-jo-fig { display: flex; flex-direction: column; gap: 3px; }
/* The one place on this page a figure is set large. It is the thing the card exists to
   show, and the reader should be able to find it without reading a word. */
.mb-jo-v {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mb-jo-vs { font-size: 12px; line-height: 1.45; color: var(--text-faint); }
.mb-jo-read {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--hairline-rgb), 1);
}
/* Deliberately NOT pushed to the bottom of the card. Everything above this rule is exactly
   one line tall on every card, so letting the block sit where it falls puts the four rules
   on one horizontal line across the row; `margin-top: auto` staggered them by however many
   lines each read happened to run to, which reads as a misalignment rather than a size. */
.mb-jo-r { font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

@media (max-width: 1100px) {
  .mb-jos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .mb-jos { grid-template-columns: minmax(0, 1fr); }
}

/* ── the chain ─────────────────────────────────────────────────────────────── */
.mb-chain { list-style: none; margin: 0; padding: 0; }
.mb-chain-step {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  padding-bottom: 22px;
}
.mb-chain-step--last { padding-bottom: 0; }
.mb-chain-n {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-row-active);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}
/* The rail is drawn from the step, not between steps, so it cannot outlive the list. */
.mb-chain-step:not(.mb-chain-step--last)::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: rgba(var(--hairline-rgb), 1);
}
.mb-chain-t {
  max-width: var(--mb-measure);
  margin: 0;
  padding-top: 4px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}
.mb-chain-step--last .mb-chain-n { background: var(--accent); color: var(--on-accent); }
.mb-chain-step--last .mb-chain-t { color: var(--text); font-weight: 600; }

/* ── callouts ──────────────────────────────────────────────────────────────── */
.mb-callout,
.mb-book {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 20px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.mb-callout {
  background: var(--surface-row-active);
  border-left: 3px solid var(--accent);
}
.mb-book {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), 1);
  border-left: 3px solid var(--text-2);
}
.mb-callout-h {
  max-width: var(--mb-measure);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}

/* ── the board ─────────────────────────────────────────────────────────────── */
.mb-brow {
  display: grid;
  grid-template-columns: 50px 44px 104px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 11px 14px;
  background: var(--surface);
}
.mb-bcode { font-size: 14px; font-weight: 600; color: var(--text); }
.mb-bscore { font-size: 14px; font-weight: 600; text-align: right; }
.mb-bnote { font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.mb-chip {
  justify-self: start;
  padding: 4px 7px;
  border-radius: var(--r-xs);
  background: var(--surface-row-active);
}
/* -text, not -dot: a chip is 11px type, which needs MORE contrast than the 14px the
   note above measured at 3.4:1, not less. This was the one place in the file still using
   the mark colour for a word. */
.mb-chip.mb-pos { color: var(--bull-text); }
.mb-chip.mb-neg { color: var(--bear-text); }

/* ── the pairs ─────────────────────────────────────────────────────────────── */
.mb-prow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 15px;
  background: var(--surface);
}
.mb-phead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.mb-pname { font-size: 15.5px; font-weight: 600; color: var(--text); }
.mb-pmeta {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.mb-prow .mb-p { color: var(--text-2); }
.mb-pkill {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-faint);
}
.mb-pkill span { margin-right: 7px; }

/* ── the mismatch ──────────────────────────────────────────────────────────── */
.mb-mrow {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
  padding: 13px 15px;
  background: var(--surface);
}
.mb-mval { display: flex; flex-direction: column; gap: 3px; }
.mb-mnum {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.mb-mbody { font-size: 14px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }

/* ── what changed ──────────────────────────────────────────────────────────── */
.mb-crow {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px 15px;
  background: var(--surface);
}
.mb-cwhen { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.mb-chead { display: block; font-size: 15.5px; font-weight: 600; }
.mb-cnote { display: block; margin-top: 3px; font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* ── the diary ─────────────────────────────────────────────────────────────── */
.mb-day { background: var(--surface); }
.mb-day-h { padding: 11px 15px 6px; color: var(--text-2); }
.mb-erow {
  display: grid;
  grid-template-columns: 74px 44px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 10px 15px;
  border-top: 1px dashed rgba(var(--hairline-rgb), 1);
}
.mb-etime { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.mb-eccy { font-size: 12px; font-weight: 600; color: var(--text-2); }
.mb-ename { font-size: 15.5px; font-weight: 600; color: var(--text); margin-right: 9px; }
.mb-ewhy { display: block; margin-top: 3px; max-width: var(--mb-measure); font-size: 14px;
           line-height: 1.5; color: var(--text-2); }

/* ── where this breaks ─────────────────────────────────────────────────────── */
.mb-krow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 16px;
  background: var(--surface);
}
.mb-kn { font-size: 14px; font-weight: 600; color: var(--accent); }

/* ── footer ────────────────────────────────────────────────────────────────── */
.mb-foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--hairline-rgb), 1);
}
.mb-foot .mb-flag-name { align-self: flex-start; font-size: 11px; color: var(--text-faint); }
.mb-foot-links { display: flex; flex-wrap: wrap; gap: 16px; }
.mb-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 11.5px;
  color: var(--accent);
  cursor: pointer;
}
.mb-link:hover { color: var(--text); text-decoration: underline; }
.mb-link--quiet { color: var(--text-2); }

/* ── narrow screens ────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .mb-col { padding: 24px 16px 56px; gap: 36px; }
  .mb-h1 { font-size: 32px; }
  .mb-h2 { font-size: 21px; }
  .mb-stand { font-size: 16.5px; }
  .mb-p { font-size: 16px; }
  /* Below this width the four-column board wraps its note under the row rather than
     squeezing it to two words a line. */
  .mb-brow { grid-template-columns: 46px 40px minmax(0, 1fr); }
  .mb-bnote { grid-column: 1 / -1; }
  .mb-mrow { grid-template-columns: minmax(0, 1fr); }
  .mb-erow { grid-template-columns: 66px minmax(0, 1fr); }
  .mb-eccy { grid-row: 1; grid-column: 2; }
  .mb-pmeta { margin-left: 0; flex-basis: 100%; }
}