/* The weekly contracts bar chart, and the report page panel that holds one.
   ---------------------------------------------------------------------------
   Loaded on /market-watch AND on all 31 weekly report pages; see the two
   branches in functions.php. Split out of market-watch.css when the reports
   started rendering the same chart: the index also has a hero, a stat band, a
   31 row sortable table and an enquiry card, and none of that belongs on an
   article page. What is here is the chart component and the block a report
   wraps it in, and nothing else.

   The rule the split has to keep true: elevated_mw_chart() in inc/blocks.php is
   ONE implementation with two callers, so its styling has to be one file with
   two loaders. If a chart rule ever drifts back into market-watch.css it will
   render unstyled on 31 pages and nobody will notice until a screenshot.

   No new colours, no new face, no new button. The stat tiles, the bars and the
   type all come from sitewide.css; every literal here is a token's own value.

   EVERY selector is scoped under an .ea-mwx* class. That is not tidiness, it is
   the guarantee that nothing here reaches the homepage, which renders the same
   .ea-mw__* chart component in a twelve week form and must keep rendering
   exactly as it did. Never loosen one of these to a bare .ea-mw__*. */

/* --- The chart -------------------------------------------------------- */

/* Same bars as the homepage, 31 of them instead of 12.

   `flex: 1 1 0` replaces the homepage's `flex: 0 1 34px`. A fixed basis is
   right for a dozen bars and wrong for thirty one: the bars would shrink to
   about 3px while the 8px gaps kept their width, so the chart would read as a
   row of gaps with hairlines in it. Sizing off the container instead lets the
   bars stay wider than the space between them at every width.

   min-width:0 because a flex item's default min-width is auto, which would
   stop the shrink at the item's content width and push the row past the
   container. That is the classic 390 overflow, and a 31 bar chart is exactly
   where it would have happened. */
.ea-mwx__chart {
  margin-bottom: 0;
}

/* THE BARS ROW IS THE REFERENCE BOX for everything anchored to a bar.

   --ea-mwx-x, written inline by the template, is a bar's centre as a percentage
   of THE ROW OF BARS: (i + 0.5) / n. That is only the same thing as a percentage
   of the plot while the bars fill the plot, which they do at 31 bars because
   those are `flex: 1 1 0`. The homepage draws twelve bars at `flex: 0 1 34px`
   inside a centred row about half the width of its band, and against the plot
   every one of those percentages pointed at the wrong place: the hover panel sat
   far to the left of the bar it belonged to, worst at the ends.

   Positioning against the row instead makes the percentage mean what the
   template computed, at any bar count, any bar width and any justification. The
   plot keeps only the two empty strips, which are vertical. */
.ea-mwx__chart .ea-mw__bars {
  position: relative;
  height: var(--ea-mwx-barsh);
  gap: 4px;
}

.ea-mwx__chart .ea-mw__bar {
  flex: 1 1 0;
  min-width: 0;
  /* Static, so the absolutely positioned hover panel inside it resolves
     against .ea-mwx__plot and can be clamped to the plot's edges. */
  position: static;
  /*
   * FILL, not opacity. The homepage draws its bars as solid ink at
   * `opacity: .32`, which is fine when a bar has no children. Here each bar
   * contains its hover panel, and opacity applies to the whole subtree, so the
   * panel came out at 32 percent and was unreadable. Same greys, expressed as
   * the fill instead, so the panel inside stays opaque.
   *
   * rgba rather than var(--eabc-ink) with an alpha, because a custom property
   * cannot be given one without color-mix. The literal is the token's own value
   * (#2e2e2f), which is written out in this file three other times and in
   * sitewide.css as the fallback on every --eabc-ink reference.
   */
  opacity: 1;
  background-color: rgba(46, 46, 47, .3);
  transition: background-color .15s ease;
  /* Every bar is an <a> here, so the link defaults have to be turned off: the
     ported bundle underlines anchors, and the only visible text inside a bar is
     the asterisk on the peak and the label under the newest week. */
  text-decoration: none;
  cursor: pointer;
}

/* --- The peak fill ------------------------------------------------- */

/* The chart's geometry, in one place.

   --ea-mwx-barsh is the height of the bars box, and it is a variable rather
   than a literal because the hover panel has to be positioned off the top of
   its own bar, and the only way to do that arithmetic in CSS is to have the
   height available as a length. Change it here and the bars, the marks and the
   panel all move together.

   --ea-mwx-head is the empty strip above the bars. It exists so the panel over
   the TALLEST bar has somewhere to go: that bar is 100 percent of the bars box
   by definition, so without headroom its panel would reach over the figcaption.
   Sized to hold one panel plus the gap.

   It is RESERVED SPACE, which is only ever the right answer where something
   else would otherwise be under it. On this page the chart is the last thing in
   its section and the strip costs nothing. In the report panel it cost 58px of
   dead air between a caption and the chart it captions, so there the strip is
   zeroed and the panel is allowed to reach up over the caption instead. See
   .ea-mwx__panel .ea-mwx__chart. */
.ea-mwx__chart {
  --ea-mwx-barsh: 150px;
  --ea-mwx-head: 5rem;
  --ea-mwx-foot: 1.3rem;
  /* Room the LATEST label occupies at the right edge, plus a gap. The HIGH
     POINT label is clamped against this so the two can never collide, however
     close to the newest week a record lands. */
  --ea-mwx-latestw: 4.6rem;
  /* Reserved width of the HIGH POINT label, used for its own edge clamp. */
  --ea-mwx-tagw: 5.4rem;
}

/* Two strips, one above the bars and one below: the asterisk over the busiest
   week lives at the bottom of the first, the LATEST label under the newest week
   in the second. Separating them is what lets one bar carry both marks. */
.ea-mwx__plot {
  position: relative;
  padding-top: var(--ea-mwx-head);
  padding-bottom: var(--ea-mwx-foot);
}

/* Barely a step up from the run.

   The label under the bar is what marks the record; this only ties that label
   to the bar it points at, for a reader whose eye lands on the word first. It
   is deliberately far short of the newest week's solid ink, which is the one
   fill on this chart that is meant to be seen from across the room.

   .ea-mwx__chart on the selector so it outranks sitewide's
   `.ea-mw__bar:last-child` outright rather than on source order, and two
   classes on the bar so the LATEST fill still wins whenever the newest week IS
   the record. */
.ea-mwx__chart .ea-mw__bar.ea-mwx__bar--peak {
  background-color: rgba(46, 46, 47, .42);
}

/* --- The newest week --------------------------------------------------- */

/* Solid ink, and a word under it. */
.ea-mwx__chart .ea-mw__bar.ea-mwx__bar--latest {
  background-color: var(--eabc-ink, #2e2e2f);
}

/* --- The two labels ---------------------------------------------------- */

/* One treatment for both marked bars: same size, same casing, same tracking,
   same colour, same strip, one line each. They differ by their words and by
   nothing else, which is the whole point of them.

   Absolutely positioned in the plot's bottom strip, so a label adds nothing to
   its bar's box. Thirty one bars keep one baseline whether they carry a label
   or not, and a merged two-fact label is still one line and still cannot push
   its bar out of line with the rest.

   nowrap, because a label that wraps under a 9px bar at 390 is a mess. The
   clamps below are what make nowrap safe. pointer-events:none so the label is
   unambiguously not part of the link it sits under, rather than an invisible
   extension of a 9px hit area. */
.ea-mwx__tag {
  position: absolute;
  /* Immediately under the bars row, which is the strip .ea-mwx__plot reserves
     with --ea-mwx-foot. Anchored to the row rather than to the plot for the same
     reason the hover panel is: --ea-mwx-x is a percentage of the row. */
  top: 100%;
  height: var(--ea-mwx-foot);
  display: flex;
  align-items: center;
  font-family: var(--primary-button-font-font-family, "Hanken Grotesk"), system-ui, sans-serif;
  font-size: .58rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--eabc-ink, #2e2e2f);
  white-space: nowrap;
  pointer-events: none;
}

/* The newest week is the LAST bar by construction, so its label is pinned to
   the right edge and needs no arithmetic at all. This is also the anchor the
   merged "LATEST / HIGH POINT" label uses when one bar is both. */
.ea-mwx__tag--latest {
  right: 0;
}

/* --- The week being read, on a single report page ---------------------- */

/* Solid ink and the only label the chart draws on a report page: nothing else
   is marked there, so the week in front of the reader cannot be mistaken for
   another one. Two classes, so it outranks the peak fill if this week is also
   the high point. */
.ea-mwx__chart .ea-mw__bar.ea-mwx__bar--current {
  background-color: var(--eabc-ink, #2e2e2f);
}

/* Centred on its own bar, clamped only against the plot edges. There is no
   LATEST label to clear on a report page, so unlike the high point label this
   one reserves nothing on the right. */
.ea-mwx__tag--current {
  left: clamp(
    calc(var(--ea-mwx-tagw) / 2),
    var(--ea-mwx-x, 50%),
    calc(100% - var(--ea-mwx-tagw) / 2)
  );
  transform: translateX(-50%);
}

/* The high point can be any bar, so its label is centred on that bar and
   clamped at both ends: half its own width from the left edge, and clear of the
   room the LATEST label occupies on the right. Without the right hand clamp a
   record set two or three weeks before the newest one would print HIGH POINT
   straight through LATEST at 390, where thirty one bars are 9px apart. */
.ea-mwx__tag--peak {
  left: clamp(
    calc(var(--ea-mwx-tagw) / 2),
    var(--ea-mwx-x, 50%),
    calc(100% - var(--ea-mwx-latestw) - var(--ea-mwx-tagw) / 2)
  );
  transform: translateX(-50%);
}

/* --- The hover panel --------------------------------------------------- */

/* One panel per bar, revealed on hover.

   Positioned against .ea-mwx__plot, not against its own bar, which is what
   makes the clamp below possible: --ea-mwx-x is the bar's centre as a
   percentage of the plot, written inline by the template, and the clamp keeps
   the panel's centre at least half its own width from either edge. The panel
   next to the first or the last bar therefore slides inward instead of hanging
   off the side and widening the page. That is the one way this feature could
   have broken 390, so it is handled in the geometry rather than in a media
   query.

   --ea-mwx-tipw is min(15rem, 100%) so the arithmetic still holds if the plot
   is ever narrower than the panel: half of 100% from each edge leaves the
   panel exactly filling the plot. */
.ea-mwx__tip {
  --ea-mwx-tipw: min(15rem, 100%);
  position: absolute;
  /*
   * VERTICAL: floats a clear 12px ABOVE the top of its own bar, rather than
   * sitting flush on it. --ea-mwx-h is that bar's height as a plain number,
   * written inline by the template alongside the height percentage it mirrors,
   * so the panel rides up and down with the week it describes.
   *
   * NO CEILING. This was min()ed against the top of the plot, so that on the
   * tallest bar the panel stopped at the plot edge rather than reaching over
   * the caption. That clamp is what forced the plot to reserve --ea-mwx-head of
   * empty strip above the bars, and in the report panel that strip read as a
   * caption floating away from its own chart. The panel is transient, opaque
   * ink and z-indexed, so overlaying the caption for as long as a cursor is on
   * a bar costs nothing, where reserving room for it at rest cost 58px on every
   * report page. Overlay instead of reserve.
   */
  bottom: calc((var(--ea-mwx-barsh) * var(--ea-mwx-h, 0) / 100) + 12px);
  left: clamp(calc(var(--ea-mwx-tipw) / 2), var(--ea-mwx-x, 50%), calc(100% - var(--ea-mwx-tipw) / 2));
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  width: var(--ea-mwx-tipw);
  padding: .5rem .7rem .55rem;
  background: var(--eabc-ink, #2e2e2f);
  color: var(--eabc-paper, #fafafa);
  border-radius: 4px;
  font-family: var(--primary-button-font-font-family, "Hanken Grotesk"), system-ui, sans-serif;
  font-size: .66rem;
  line-height: 1.45;
  letter-spacing: .04em;
  text-align: center;
  /* So the panel can never sit between the cursor and the bar under it. */
  pointer-events: none;
}

.ea-mwx__tip-week,
.ea-mwx__tip-figs {
  display: block;
}

.ea-mwx__tip-week {
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .72;
}

.ea-mwx__tip-figs {
  font-variant-numeric: tabular-nums;
}

/* "Latest report" and "Busiest week", on the one or two bars that are either.
   Set apart by a hairline rather than by a colour, since the panel only has two
   colours to work with and both are already in use. */
.ea-mwx__tip-flag {
  display: block;
  margin-top: .35rem;
  padding-top: .3rem;
  border-top: 1px solid rgba(250, 250, 250, .25);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .58rem;
}

/* Pointer only, and only where hovering is a thing that happens.

   A phone gets no panel on purpose: 31 bars nine pixels wide is not a tap
   interface, and making them focusable would put 31 tab stops between a
   keyboard reader and the rest of the page. The table below carries every one
   of these figures for touch, keyboard and screen reader alike, and the chart
   caption says so. */
/* Keyboard first, outside any hover query: the bars are links, so the panel has
   to open for a reader who never touches a mouse. The outline is the same 2px
   ink the filter buttons and the table links use. */
.ea-mwx__chart .ea-mw__bar:focus-visible {
  outline: 2px solid var(--eabc-ink, #2e2e2f);
  outline-offset: 2px;
  background-color: var(--eabc-ink, #2e2e2f);
}

.ea-mwx__chart .ea-mw__bar:focus-visible .ea-mwx__tip {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .ea-mwx__chart .ea-mw__bar:hover .ea-mwx__tip { display: block; }
  /* The hovered bar goes to full ink, which is also what says "this is a
     link". It is transient, so it can be stronger than the peak's own fill
     without taking the record's emphasis away in the resting state. */
  .ea-mwx__chart .ea-mw__bar:hover { background-color: var(--eabc-ink, #2e2e2f); }
}

/* ===========================================================================
   The week over week panel, inside a report body.

   Spliced in at the end of "The numbers at a glance" by
   elevated_mw_insert_context() and gated on the `_elevated_mw` meta flag, so an
   ordinary Knowledge Center guide never sees any of this.

   NO FILLED BOX. This was an .eabc-card on greige for a while and it read as a
   widget dropped into the page rather than as the top of the report. It is on
   the page ground now, like every other block in the article, and the only
   thing separating it from the prose is one hairline and some space. Quiet
   devices the site already uses, in the same weight the table rows and the
   series nav use, rather than a filled panel.

   It is also the FIRST block in the body now, above the lede, so nothing above
   it needs separating from. The rule goes underneath only.

   TWO PARTS, ONE STEP. The panel used to be a tiny uppercase label, three
   figures, a centred sentence and a chart, at four different gaps: .7rem,
   1.4rem, 1.3rem, and then 3.6rem of reserved headroom above the bars that read
   as a fifth. It is now the figures and the chart, and there is exactly one gap
   left in it.

   That gap is 2rem, and it is not a number chosen here: it is the step the
   /market-watch hero already uses between its own blocks, under .ea-mwx__intro
   and under .ea-mwx__weekline, dropping to 1.6rem at 767 where that hero drops
   to 1.6rem too. Same subject, same rhythm, and the index's is the one that has
   been approved.

   Everything the deleted parts said is still on the page. The label named a
   group whose three members are each labelled; the sentence compared this week
   to the previous report and is now the third line inside each tile, against
   the figure it compares.

   Nothing here restyles a bar. The chart inside is the same component the index
   renders, on the same paper ground, so it needs no fill overrides at all.
   ======================================================================== */

.ea-mwx__panel {
  margin: 0 0 2rem;
  padding: 0 0 1.8rem;
  border-bottom: 1px solid var(--eabc-sand, #dbd7ce);
  text-align: center;
  color: var(--eabc-ink, #2e2e2f);
}

/* The change on the previous report, in the slot sitewide.css gives the note
   under a figure, at that slot's own size and on its own .55rem of space. It is
   NOT restyled into a new thing: the whole complaint this answers was too many
   small strings in too many sizes, and inventing a size for this one would have
   added a fourth.

   Three departures from the note it replaces, all because this is a measurement
   and a note is a caption. The utility face rather than the body serif, which is
   what this site sets every label, every button and every table figure in, and
   what stops the line reading as a footnote under the number. Full ink rather
   than muted, so a reader looking for the move does not have to hunt for it. And
   tabular figures, so "-8" and "-$92.1M" sit on one rhythm across three columns
   instead of on three different ones.

   The SIZE is untouched: .92rem, the note slot's own, which is approved. The
   point of the change is that it should read as part of the statistic, not that
   it should be bigger; a fourth type size in this panel is what the whole
   rebuild was undoing.

   NO COLOUR ON THE DIRECTION. Green up and red down is the obvious idea and it
   is wrong here twice over: this palette has no red and no green in it at all,
   and colour on its own is invisible to a reader who cannot separate the two.
   The sign carries it, in every case, for everyone. */
.ea-mwx__delta {
  /* .55rem under a 63px figure read as a wrapped second line of the number
     rather than as a line about it. This is the space sitewide.css puts under
     .ea-mw__eyebrow and .ea-mwx__seriesnav's own foot rule uses; it is enough
     that the delta is plainly a separate line, and far short of the 2rem step
     between the parts of the panel, so the tile still reads as one object.
     The .6rem above the figure is untouched: a label belongs to the figure
     under it more tightly than an annotation belongs to the figure above. */
  margin-top: 1.3rem;
  font-family: var(--primary-button-font-font-family, "Hanken Grotesk"), system-ui, sans-serif;
  /* Hanken Grotesk ships 400 and 700 on this site and nothing between, so 700
     it is: 500 resolves to the 400 face and 600 to a synthesised one. Bold at
     14.72px against a 63px regular figure cannot compete with it, and weight is
     what makes a small line read as a statistic rather than as a caption. */
  font-weight: 700;
  color: var(--eabc-ink, #2e2e2f);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* sitewide gives .ea-mw__chart a 3rem bottom margin and the index zeroes it,
   because there the chart is the last thing in its section. It is the last
   thing here too, and the panel's own padding and rule close it. */
.ea-mwx__panel .ea-mwx__chart {
  margin-bottom: 0;
  /*
   * NO HEADROOM, and therefore the index's own bar height.
   *
   * These were 3.6rem and 120px: a shorter chart with a reserved strip over it,
   * on the theory that a 677px article column wants less of both than a 1012px
   * index does. What it actually produced was a figcaption sitting 74px above
   * the bars it captions, 58px of which was this strip and the rest the
   * caption's own 1rem, and a 120px chart looking like an afterthought in the
   * space that left over.
   *
   * The strip is gone, which is what closes that gap to the caption's 1rem, and
   * the hover panel now reaches up over the caption instead of having room held
   * for it below; see .ea-mwx__tip. With the strip gone the height it was
   * costing goes back into the bars, and there is no longer any reason for this
   * chart to be a different size from the one on /market-watch, so --ea-mwx-barsh
   * is simply inherited: 150px here, 110px at 767. One chart, one height.
   */
  --ea-mwx-head: 0px;
}

/* The caption carries the $4 million threshold now, which the three notes used
   to carry between them, so it is a longer line than the index's and it wraps at
   390. balance splits it into two even lines instead of a full line and a single
   orphaned word. Progressive: a browser without it gets the orphan, which is
   what every caption on the site got before. */
.ea-mwx__panel .ea-mw__chart-cap {
  text-wrap: balance;
}

/* NO bar fill overrides here on purpose.

   While the panel was greige the bars were lifted to .34 to hold against that
   ground, and that three-class rule then outranked `.ea-mwx__chart
   .ea-mw__bar:hover` on source order and silently killed the hover state on 31
   pages. With the box gone the chart sits on the same paper as the index and
   wants exactly the index's fills, so the whole override stack is deleted
   rather than re-tuned. One chart, one set of fills, one set of states.

   If a fill ever has to differ here again, it has to come with matching
   :hover, :focus-visible and --current rules at the same specificity. */

/* --- The three figures -------------------------------------------------- */

/* There are almost no rules here, and that is the point.

   The figures are .ea-mw__stats / .ea-mw__stat-value from sitewide.css, the
   homepage Market Watch band's own component, used unchanged. That is where the
   size comes from: clamp(2.6rem, 5vw, 4rem) at desktop and 2.8rem below 767,
   with the small letterspaced label above and the small note below untouched,
   because the contrast between them is what makes the tiles read.

   It also supplies the mobile behaviour. sitewide already drops .ea-mw__stats
   to a SINGLE COLUMN at 767, which is the only arrangement that works at 390:
   three of these figures side by side in a 343px column cannot fit at any size
   that could still be called large, and forcing them would be the horizontal
   overflow this build keeps rediscovering. Stacked, each figure gets the full
   column and stays at 2.8rem.

   THE NOTES ARE OFF HERE, and only here.

   sitewide.css ships a .ea-mw__stat-note under each figure and the homepage and
   the index both print all three: "above $4 million", "in luxury contracts",
   "highest of the week". Around three numbers this panel was carrying nine
   separate small strings in three sizes, and those three notes were the weakest
   of them: two restate the label directly above them, and only the threshold
   says anything the label does not. So the panel does not render them at all,
   and the threshold is stated once in the chart caption underneath instead.

   Rendered, not hidden: elevated_mw_context_panel() omits the <p> rather than
   display:none-ing it, so there is nothing here to leak onto the two pages that
   want their notes. Verify that by looking at the homepage band, which must
   still show all three.

   The spacing overrides are the space underneath, which is the panel's 2rem
   step rather than the 3.5rem sitewide reserves for a chart and a button, and
   the gap between the tracks, which is put on that same step. */
.ea-mwx__figs {
  margin-bottom: 2rem;
  gap: 2rem;
}

/* A FIGURE MUST NOT BREAK.

   The article column is 677px at 1440 against the homepage band's 1012px, so
   the three tracks are 204px here where the band gives its own about 310px. At
   the band's 4rem that is not enough room: "$239.8M" wants 200px at 64px and
   "$888.8M" would want 213px, and what a grid track does with a figure too wide
   for it is break it, so the March 16 report rendered "$239.8" with a lone "M"
   under it and pushed that tile's delta 64px below its neighbours'. A statistic
   that breaks mid token is always wrong, and it was also the whole of the
   "poorly spaced" complaint: nothing was mis-spaced, one figure was two lines
   tall.

   Two rules fix it and they have to be read together.

   nowrap says the figure is one line, always. On its own that would turn a
   break into an overflow, so:

   min(4rem, 31cqw) sizes the figure off ITS OWN TRACK rather than off the
   viewport. 31cqw is the largest a figure can be and still fit: measured in
   Cormorant Garamond at 64px, the widest money string this format can produce
   sets at about 3.2 times the font size, so a third of the track is the ceiling
   and 31 percent leaves a little air. The 4rem is the homepage band's own
   figure size and it is the cap, so the panel matches the band wherever the
   column is wide enough to and steps down continuously where it is not, instead
   of snapping at a breakpoint. At 1440 that lands at 63.3px against the band's
   64px, which is as close to "the same figure" as a 204px track allows.

   container-type is what makes cqw mean the track: without it the query unit
   resolves against the nearest ancestor container, which is the viewport, and
   the rule would be the viewport clamp it replaced with extra steps.

   min-width:0 stays. A grid track's default minimum is its content, so without
   it a nowrap figure wider than its track would widen the whole row and take
   the page with it. With it, the impossible case is a figure overlapping its own
   cell, which is wrong but cannot break the article around it or scroll the
   page sideways at 390. */
.ea-mwx__figs .ea-mw__stat {
  min-width: 0;
  container-type: inline-size;
}

.ea-mwx__figs .ea-mw__stat-value {
  font-size: min(4rem, 31cqw);
  white-space: nowrap;
}

/* THREE COLUMNS ONLY WHERE THREE COLUMNS FIT.

   The figure can no longer wrap, but the LABEL over it still can, and it wraps
   at a different width in each column because the three labels are different
   lengths. "Contracts Signed" needs 139px of track and the other two need less,
   so between about 800 and 1050 the first tile takes two lines of label and the
   other two take one, which drops that column's figure and its delta 25px below
   its neighbours'. Three figures on three baselines is the same fault as the
   wrapped figure, arriving by a different route.

   sitewide.css already stacks .ea-mw__stats into one column at 767. This moves
   that switch up to where the three tracks actually stop holding a label, which
   measures at 1100px: at 1100 the track is 151px against the 139px the longest
   label needs, and at 1000 it is 135px and short. Stacked, every tile has the
   whole measure, no label wraps, and label, figure and delta line up by
   construction rather than by a height that would have to be guessed.

   The figures take the same 2.8rem they take on a phone, which is sitewide's
   own single column size and the one the homepage band uses when it stacks.
   Below 1100 there is no container ceiling left to hit: the track is the full
   column, so min() would return the 4rem cap and the figure would grow rather
   than settle. */
@media (max-width: 1099px) {
  .ea-mwx__figs {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .ea-mwx__figs .ea-mw__stat-value {
    font-size: 2.8rem;
  }
}

/* --- Previous week / all reports / next week --------------------------- */

/* At the FOOT of the article, not in the panel: links onward belong where a
   reader has finished. Three cells, and the outer two hold their column even
   when empty, because the oldest report has no previous week and the newest has
   no next, and the button must not jump to the left edge on those two pages. */
.ea-mwx__seriesnav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--eabc-sand, #dbd7ce);
}

.ea-mwx__seriesnav-side {
  min-width: 0;
}

.ea-mwx__seriesnav-side--next {
  text-align: right;
}

.ea-mwx__seriesnav-mid {
  margin: 0;
}

/* No breadcrumb and no chevrons: a small uppercase label over the week, which
   is the same two-line shape .ea-kcindex__meta and .ea-mw__stat use. */
.ea-mwx__seriesnav-link {
  display: inline-block;
  max-width: 100%;
  color: var(--eabc-ink, #2e2e2f);
  text-decoration: none;
}

.ea-mwx__seriesnav-dir {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--primary-button-font-font-family, "Hanken Grotesk"), system-ui, sans-serif;
  font-size: .62rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--eabc-muted, rgba(0, 0, 0, .58));
}

.ea-mwx__seriesnav-week {
  display: inline;
  font-family: var(--body-font-font-family, "EB Garamond"), Georgia, serif;
  font-size: 1rem;
  line-height: 1.35;
  border-bottom: 1px solid var(--eabc-sand, #dbd7ce);
}

.ea-mwx__seriesnav-link:hover .ea-mwx__seriesnav-week,
.ea-mwx__seriesnav-link:focus-visible .ea-mwx__seriesnav-week {
  border-bottom-color: var(--eabc-ink, #2e2e2f);
}

.ea-mwx__seriesnav-link:focus-visible {
  outline: 2px solid var(--eabc-ink, #2e2e2f);
  outline-offset: 3px;
}

.ea-mwx__seriesnav-all {
  padding: .8rem 1.4rem;
  font-size: .85rem;
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* 31 bars in 343px: 2px of air is enough to separate them and leaves the
     bars themselves about 9px wide, which still reads as a shape. */
  .ea-mwx__chart {
    --ea-mwx-barsh: 110px;
    /* Less headroom than at 1440, because on a touch device there is no hover
       and therefore no panel to reserve room for. In a narrow window that DOES
       have a mouse the min() clamp on .ea-mwx__tip catches the difference: the
       panel over the tallest bar stops at the top of the plot rather than
       reaching over the caption. */
    --ea-mwx-head: 3.5rem;
  }

  .ea-mwx__chart {
    /* Both labels are shorter here, so the room reserved for the collision
       clamp comes in with them. Measured at 390: LATEST is 40px and HIGH POINT
       is 63px, and the plot is 343px wide, so neither the nowrap nor the clamp
       is under pressure. */
    --ea-mwx-latestw: 3.6rem;
    --ea-mwx-tagw: 4.6rem;
  }

  .ea-mwx__chart .ea-mw__bars { gap: 2px; }

  .ea-mwx__tag { font-size: .54rem; letter-spacing: .1em; }
}

@media (max-width: 767px) {
  .ea-mwx__panel { margin: 0 0 1.6rem; padding: 0 0 1.4rem; }

  /* 1.6rem is the step at this width, and it is the index hero's: that is what
     .ea-mwx__weekline and .ea-mwx__hero .ea-mw__stats both drop to at 767. The
     figures stack into a single column here, which is sitewide's own
     .ea-mw__stats rule, so the gap BETWEEN the three of them is put on the same
     step as well and the panel reads as one evenly spaced list from the first
     figure to the chart. The figures themselves keep the 2.8rem the homepage
     band uses on a phone. */
  /* The columns and the figure size are already handled at 1099; only the
     step under the row changes here. */
  .ea-mwx__figs { margin-bottom: 1.6rem; }

  /* Stacked at 390. Three cells across a 343px column would put "Previous
     week" and "August 3-9, 2026" on four wrapped lines either side of a pill
     with no room left for it. Order is kept: previous, index, next. */
  .ea-mwx__seriesnav {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.1rem;
    text-align: center;
  }
  .ea-mwx__seriesnav-side--next { text-align: center; }
  .ea-mwx__seriesnav-side:empty { display: none; }
  .ea-mwx__seriesnav-all { padding: .75rem 1.2rem; font-size: .8rem; }

  /* padding-bottom stays 0 here too: see the note on .ea-mwx__more. */
}

/* ===========================================================================
   The homepage band's twelve week chart.

   THE SAME COMPONENT, A DIFFERENT SHAPE. The Market Watch section on the front
   page used to draw twelve inert <span>s of its own. It now renders
   elevated_mw_chart() like the index and the reports do, which is what gives it
   the hover fill, the hover panel, the focus ring, the keyboard order and
   twelve links through to the weeks they stand for.

   Everything interactive therefore comes from .ea-mwx__chart above and is not
   repeated here. What IS here is the three ways this chart's geometry differs,
   and the rule is that the section must come out of the change looking exactly
   as it did:

     - TWELVE WIDE BARS, not thirty one narrow ones. `flex: 1 1 0` is right for
       a chart that has to fit 31 bars in an article column and wrong for a
       dozen: they would stretch to about 80px each and read as a block, not a
       trend. sitewide's own `flex: 0 1 34px` and .5rem gap are restored, so
       every bar is the width it has always been.
     - NO HEADROOM AND NO FOOT. Nothing is labelled on this chart, so the bottom
       strip has nothing to hold, and the hover panel reaches up over the caption
       rather than having room reserved under it, exactly as in the report panel.
       Both strips at zero make the plot the height of the bars and nothing more,
       which is what keeps the section's height and every offset below it
       unchanged, hovered or not.
     - THE NEWEST WEEK AT ITS OWN FILL. sitewide draws it with `opacity: .85`,
       which .ea-mwx__chart cannot use because opacity would take the hover panel
       inside the bar down with it. The same grey as a fill instead, and, as the
       note on the report panel warns, a fill that differs has to bring its own
       :hover and :focus-visible at matching specificity or it silently outranks
       them and kills the state.

   AT THE END OF THE FILE on purpose: these are the same specificity as the
   .ea-mwx__chart rules and the media queries they have to beat, so source order
   is what decides it. Do not move this block up.
   ======================================================================== */

.ea-mwh__chart {
  /* sitewide's 3rem under the chart, which .ea-mwx__chart zeroes because on the
     other two surfaces the chart is the last thing in its block. Here the
     button follows it. */
  margin-bottom: 3rem;
  --ea-mwx-barsh: 110px;
  --ea-mwx-head: 0px;
  --ea-mwx-foot: 0px;
}

/* THE ROW IS THE WIDTH OF ITS BARS.

   This is the other half of the homepage hover panel landing in the wrong
   place. .ea-mw__bars is a full width flex box that CENTRES twelve 34px bars
   inside it, so at 1440 the bars occupy the middle 496px of a 1012px row while
   --ea-mwx-x is written as a percentage of the whole row. Every panel was
   therefore pulled toward the centre, by up to 155px at the ends.

   The row is narrowed onto the bars, so the percentage and the box it is a
   percentage of finally describe the same thing. The width is arithmetic on
   --ea-mwx-n, the bar count, which elevated_mw_chart() writes inline: n bars of
   34px with n-1 gaps of .5rem between them. fit-content was tried first and
   gives 88px, because an empty flex item with a flex-basis contributes nothing
   to its container's intrinsic size, so the row collapsed onto its gaps alone.

   min(100%, ...) is what keeps 390 safe. Where the twelve bars want more room
   than there is, the row takes the room there is and the bars shrink into it
   exactly as they did before, so nothing here can push the page sideways.
   justify-content is left alone and simply stops having anything to do. */
.ea-mwh__chart .ea-mw__bars {
  width: min(100%, calc(var(--ea-mwx-n, 12) * (34px + .5rem) - .5rem));
  margin-inline: auto;
  height: var(--ea-mwx-barsh);
  gap: .5rem;
}

.ea-mwh__chart .ea-mw__bar {
  flex: 0 1 34px;
}

.ea-mwh__chart .ea-mw__bar.ea-mwx__bar--latest {
  background-color: rgba(46, 46, 47, .85);
}

.ea-mwh__chart .ea-mw__bar.ea-mwx__bar--latest:hover,
.ea-mwh__chart .ea-mw__bar.ea-mwx__bar--latest:focus-visible {
  background-color: var(--eabc-ink, #2e2e2f);
}