/* earnings — The Earnings. Every rule in this file is scoped to `.card.earnings` (rule 14: a change made for one card form is scoped to that form, by class). Every class is prefixed `ern-` and was grepped empty across the whole renderer before it was written (rule 17), so nothing here can be the second declaration of a name that already exists somewhere else. The two class families this file does NOT own and only positions are `.rp-*` (css/replay.css: the chart, its ruled baseline, its leading dot and its two transport buttons) and `.rdprice`/`.rdchg` (css/shell.css's solo readout typography). Both are reached only through `.card.earnings`, so nothing here can travel to another form drawing the same chart. TYPE IS DESIGN PX, VIA TOKENS. Rule 8 as amended session 34: the face is laid out at a fixed 393 and CSS-scaled, so a `vw` clamp here would resolve against the real viewport and be scaled a second time. Every size below is an `--fs-*` token with a live consumer in another form's sheet (--fs-10 habit/insider/indexchange, --fs-11 habit/poll/reaction/indexchange, --fs-13 poll/habit/insider/pricegap/indexchange, --fs-15 pricegap/insider/ indexchange, --fs-28 insider/indexchange) -- checked rather than assumed. */ /* `.card.earnings .ern`, never a bare `.ern`: the card root carries the form's class too, and forms/insider.css's header records what a bare viz-class rule cost there. `flex:1` + `min-height:0`: the panel is whatever the window leaves (rule 8, amended session 33). The stamp below is intrinsic height and the chart is what gives, which is the right way round -- a reader who cannot see the whole session still learns which quarter, which two closes, and the move. `gap:22px` is taken from forms/indexchange.css rather than re-measured, and for the same measured reason: `lineChart` hangs its ruled-baseline label 5px BELOW the rule (`.rp-ref span`, css/replay.css), and that rule sits wherever the close before the release falls -- which on a session that gapped DOWN and stayed down is the very top of the plot, and on one that gapped up is the very bottom. 22px clears the label's offset plus its line box either way. */ .card.earnings .ern{width:100%;flex:1;min-height:0; display:flex;flex-direction:column;gap:22px;padding:0 15px} /* ------------------------------------------------------------------ chart */ /* A flex COLUMN carrying the readout rows and the plot; the time axis is drawn by `lineChart` itself now (`o.axis`, js/viz.js) inside `.ern-canvas` below, so `.ern-chart` no longer carries a third flex row for it. `.ern-plot` is the one box that takes the slack, so a shorter window shortens the plot and never the readout above it. */ .card.earnings .ern-chart{position:relative;flex:1;min-height:0; display:flex;flex-direction:column} /* `margin-bottom:18px` on `.ern-plot`, not `.ern-chart`, is the axis's own reserve: `.ern-canvas` (below) is `position:absolute`, so the axis it now draws does not carry its own height into `.ern-plot`'s `flex:1` sizing the way the in-flow `.ern-axis` row this replaces used to. Without this, `.ern-plot` (and so the SVG inside it, `height:100%` of the canvas) grows by the axis's own height and the chart renders taller than before this option existed -- caught on 2026-09-11-earnings-s40's captured frame, not reasoned. 18px is that row's own content height (`--fs-10` at `line-height:1.2` = 12px, plus its 6px margin-top), so `.ern-plot` ends up exactly the size it always was and the axis lands in the space that used to be its own flex row. */ .card.earnings .ern-plot{position:relative;flex:1;min-height:40px;margin-bottom:18px} /* THE TRANSPORT'S FOOTPRINT, RESERVED OUT OF THE PLOT. `.ern-plot` is the box the shared skip circle is positioned in (`.rp-tp-skip{right:0;bottom:2px}`, css/replay.css -- a 30px circle); `.ern-canvas` is the box the SERIES is drawn in, and it stops 38px short of the right edge. Everything the line can reach is inside it -- the svg, the ruled baseline and its label, the leading dot -- so nothing can be drawn under the button at any series shape. This is The Index Change's decision taken, not rediscovered. That lane filmed a falling six-month line whose last segment AND resting dot drew through the circle, tried forms/poll.js's clamp first, and recorded why a clamp cannot be the fix: it moves one mark out from under a control and does nothing at all about the LINE. A reaction session that sells off into the bell is the identical geometry one window shorter, and this form would have walked into it the same way. 38 = the circle's own 30px plus 8px of clearance, in DESIGN px: the face lays out at a fixed 393 and is CSS-scaled, so a literal here is correct at every device width. The vertical scale is untouched, so the price axis still reads edge to edge; only the time axis draws narrower. */ .card.earnings .ern-canvas{position:absolute;top:0;bottom:0;left:0;right:38px} /* The release, as a mark ON the series, and the time axis under the plot, are both drawn by `lineChart` itself now (`o.rules`/`o.axis`, js/viz.js) -- css/replay.css's `.rp-rule`/`.rp-axis` own them, shared with forms/indexchange.css's identical `.ixc-ann` (the release mark's twin, `.ern-rel`, before this) rather than declared here a second or third time. Both are children of `.ern-canvas` above (the box `lineChart`'s return is inserted into): the axis, unlike the svg, is not clipped to that box's own height, and since `.ern-canvas` is `position:absolute` its overflow is not carried into `.ern-chart`'s own flex sizing the way an in-flow row would be -- `.ern-chart`'s `margin-bottom` above is that reserve, so the axis text has room below the plot before the stamp begins. A full-width row at `.ern-canvas`'s own width already lands its right edge where the line ends, with no `padding-right` to repeat that alignment a second time. */ /* ------------------------------------------------------------------ stamp */ /* What the headline does not say. The Index Change's stamp restates its headline on purpose; this one deliberately does not (see js/forms/earnings.js's header). The headline is the company's own sentence about its quarter; the stamp is the quarter's NAME, the two closes the card measures between, and the move. `border-top` and not a box: a ruled line under the chart reads as a caption belonging to it, where a bordered card inside a card reads as a second card. */ .card.earnings .ern-stamp{flex:none;padding-top:10px; border-top:1px solid var(--edge)} .card.earnings .ern-stamp-row{display:flex;align-items:baseline; justify-content:space-between;gap:10px;flex-wrap:wrap} /* The quarter, small and lettered out -- an eyebrow, because it is what the release is ABOUT and not what the card measured. */ .card.earnings .ern-quarter{font-size:var(--fs-11);line-height:1.1; font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--muted)} /* The move, and the card's one figure. COLOURED BY `data-dir`, NOT BY `var(--stance)`. The clock rewrites both the digits and that attribute from the pen's own reading, and `--stance` is fixed to how the card ENDS. Today the figure is only ever VISIBLE on the frame it lands (see js/forms/earnings.js), so the two agree by construction and this rule changes nothing on any frame -- it is here so that they cannot come apart if the figure is ever shown mid-draw again, which is exactly what the rejected interim state did: a red "+0.00%" at 28px, a colour fighting its own digits. `data-dir` is also what review/formcheck reads, so a gate checks the direction the renderer drew without reading a colour back out of a computed style. --fs-28, level with the chart's own price readout (`.rdprice`), for the reason The Index Change measured at --fs-22: below that the biggest thing on the card is a share price the card is not about. */ .card.earnings .ern-move{font-size:var(--fs-28);line-height:1; font-weight:700;color:var(--stance);font-variant-numeric:tabular-nums} .card.earnings .ern-move[data-dir="up"]{color:var(--up)} .card.earnings .ern-move[data-dir="down"]{color:var(--down)} /* THE PANEL MAY NOT SPOIL ITS OWN ENDING. Two pieces of the stamp state how it ended -- the big figure and the "→ Aug 5 $68.18" half of the closes row -- and drawing them from frame 0 gave the answer away while the header was still reading "+0.94%" over a rising green line (filmed, sim-earn-1500.png). js/forms/earnings.js's `initEarnings` lights both on the one frame the pen reaches Aug 5. `.ern-timed` is added by that same function and is never in the markup, so a card that is never wired shows the complete stamp instead of a blank space: the reveal exists only where there is a clock to finish it. That is the opposite decision from forms/indexchange.css's `.ixc-ann`, which hides from the markup and stays hidden on an unwired card -- deliberate, because a missing dashed rule costs a reader a mark and a missing figure costs them the card's only number. `opacity`, never `display` or `visibility:hidden` on a shrinking box: the element keeps its full width either way, so the stamp cannot reflow at the moment of the reveal and jump the two lines below it. */ .card.earnings .ern.ern-timed .ern-move, .card.earnings .ern.ern-timed .ern-after{opacity:0;transition:opacity .28s ease} .card.earnings .ern.ern-timed .ern-move.lit, .card.earnings .ern.ern-timed .ern-after.lit{opacity:1} @media (prefers-reduced-motion:reduce){ .card.earnings .ern.ern-timed .ern-move, .card.earnings .ern.ern-timed .ern-after{transition:none} } /* The two closes the move is between, with the arrow that says which way the subtraction ran. Printed as ` ` twice rather than as one sentence, because the pair IS the arithmetic and a reader should be able to check the percent above it against them. */ .card.earnings .ern-closes{display:flex;align-items:baseline;gap:8px; flex-wrap:wrap;margin-top:5px; font-size:var(--fs-15);line-height:1.25;font-weight:500;color:var(--ink); font-variant-numeric:tabular-nums} .card.earnings .ern-arrow{color:var(--muted);font-weight:400} /* The arrow and the after-close are ONE timed unit, so they are one element in `.ern-closes`' flex row -- which means the gap between them has to be restated here rather than inherited from the row. */ .card.earnings .ern-after{display:flex;align-items:baseline;gap:8px} /* The ticker and when the release went out. The ticker carries `data-subject` (js/subject.js's document-level delegate) and `.hooktick`, the shell's own brand tint for a tappable ticker -- the same affordance the headline's ticker has on every other form, since this form's headline is the company's own line and usually never prints the ticker at all. */ .card.earnings .ern-foot{display:flex;align-items:baseline;gap:8px; margin-top:7px;font-size:var(--fs-11);line-height:1.25;color:var(--dim)} /* The weight/tracking bump this ticker wants is `.hooktick.stamptick` now (css/shell.css, lane-ticker-mark) -- forms/indexchange.css's `.ixc-tick` declared the identical rule and the two are folded into one shared modifier rather than kept as two copies (rule 17). */ .card.earnings .ern-when{letter-spacing:.02em} .card.earnings .ern-when::before{content:"·";margin-right:8px;color:var(--edge)} /* No series to draw. Never an empty plot box -- that reads as a chart that failed to paint rather than a card with nothing to plot. */ .card.earnings .ern-nochart{flex:1;display:flex;align-items:center; font-size:var(--fs-13);color:var(--dim)} /* Deliberately no `.card.earnings.open` block. The open (detail) state is the shared shell's, and no other solo form hides or resizes its panel for it. Inventing a behaviour here that no sibling has would be this form deciding something cross-card on its own. */