/* --------------------------------------------------------------------------- * seasons.css — the archive bar and the two doors into it. §57.16, §57.30 step 4. * * ==> NOT ONE HARDCODED COLOUR AND NOT ONE RAW PIXEL LITERAL. <== Every value * is a custom property `applyTokens()` already publishes from tokens.js. That * is what makes the bar turn sepia on its own the instant the palette is * forced: it is written against the same variables as every panel, so the * archive costs the theme system nothing and cannot drift out of step with it. * * ==> THE BAR IS GONE AND SO IS THE LAYOUT VARIABLE IT COST. <== Step 5, * §57.38b. `#seasons-bar` was `position: fixed` to the bottom of the viewport, * so the drawer and the control cluster — both fixed to the same edge — had to * be pushed up by its height or they sat on top of it. That was * `--seasons-bar-h`, published on and subtracted from in three places. * All four are deleted. Its two jobs are now two pills that cost no layout at * all: `seasons/pill.js` at the top is the way out, `seasons/status-pill.js` * at the bottom says what is drawn, and both sit at a z-index above the globe * rather than pushing anything off it. That strip of screen goes back to the * globe on every archive view, which on a phone was the whole argument. * * Those overrides are scoped to `html[data-seasons="on"]`, which outranks the * bare `#drawer` and `#controls` rules on specificity — so the live app's own * stylesheet needed no edit at all, and there is no `!important` anywhere in * here. A media query adds no specificity, which is why the two width cases * below are restated rather than written once: they have to sit inside the * same breakpoints panels.css uses or they win at the wrong width. * ------------------------------------------------------------------------- */ html[data-seasons="on"] { /* ==> A WALL ROW IS ONE TOUCH TARGET AND THE TOKEN SAYS SO RATHER THAN A NUMBER. <== §57.36 froze 44px on glass, and `SEASONS.wallRowPx` carries the same figure for the arithmetic in `lib/wall-index.js`. Writing `--touch-target` here rather than `44px` means the two can never disagree about what a touch target is: if that floor ever moves, the wall moves with it instead of quietly falling under it. */ --seasons-wall-row-h: var(--touch-target); /* A quiet year is not a destination, so it does not take a touch target. Tall enough to read a year at `--type-small` and no taller — a run of forty of these at row height would drown the years that carry storms. */ --seasons-wall-hair-h: 18px; /* ==> THE MARK RATIOS ARE SHARED, BECAUSE THERE ARE TWO DOTS NOW. <== §57.53. The Wall of Years sizes its dot after layout (4px to 14px); the season board's roster swatch is a fixed 12px from `ui/panels.css`. The MARKS on them have to be the same shape or the same fact reads as two different ones two taps apart, so the ratios live here once and each surface applies them to its own dot. §12 — a pattern used twice is extracted before the second use, and this is the second use. The values are the mockup's, which is the version Aaron judged: the triangle is a little under three-quarters of the dot wide and a little under three-quarters of its own width tall, and the bar is a sixteenth of the dot. */ --mark-w-ratio: 0.72; --mark-lf-h-ratio: 0.72; --mark-ret-h-ratio: 0.16; /* Clear of the dot's edge without floating free of it. Both marks, both surfaces. */ --mark-gap: 1.5px; /* ==> THE LANDFALL TRIANGLE IS SIZED OFF THE DOT, NEVER OFF A PIXEL COUNT. <== §57.30 step 14 sub-step 4. `--wall-dot` is measured after layout and ranges from `SEASONS.wallDotMin` (4) to `wallDotMax` (14) depending on how busy the basin's widest season is, so a fixed triangle would be a speck against a 14px dot and wider than a 4px one. The floors exist because at `wallDotMin` the arithmetic gives 2.88px by 2.07px, and below about 3px a triangle stops reading as a triangle and starts reading as dirt on the screen. */ --wall-lf-w: max(3px, calc(var(--wall-dot, 7px) * var(--mark-w-ratio))); --wall-lf-h: max(2.5px, calc(var(--wall-lf-w) * var(--mark-lf-h-ratio))); /* Kept as its own name because `--wall-strip-pad` below does arithmetic on it and cannot read a percentage off an element it does not own. */ --wall-lf-gap: var(--mark-gap); /* ==> THE RETIRED BAR. A LINE, AND DELIBERATELY NOT A DOT. <== §57.52. Aaron asked for a small dot above the storm dot, same ink and size as the landfall triangle, and it was measured before it was built. At 390px the busiest basin draws a 6px dot, falling to 4px whenever a sort column is showing or on the desktop side rail. A circle matching the triangle's WIDTH is 4.32px sitting above a 6px dot — 72% of the storm dot itself and 2.2x the triangle's ink — which reads as a second storm rather than as a mark on one. A circle matching the triangle's INK is 2.92px, and 2.19px once a sort column is up, which is under the 3px floor where the triangle already found that a mark stops reading as a mark. There is no diameter that is both legible and not mistakable for another dot. A line survives the small sizes because it only has to hold 1px in one dimension, and it is the shape furthest from both the dot and the triangle — which matters because 109 of the 122 retired storms in the record also came ashore, so almost every barred dot wears the triangle too. Same width as the triangle so the two marks share a column, and the same neutral ink for the same reason it is neutral down there: retirement is a fact about the NAME, and strength is what the dot already says. */ --wall-ret-w: var(--wall-lf-w); --wall-ret-h: max(1px, calc(var(--wall-dot, 7px) * var(--mark-ret-h-ratio))); --wall-ret-gap: var(--mark-gap); /* ==> THE STRIP'S BREATHING ROOM ANSWERS TO WHICHEVER MARK NEEDS MORE. <== The slot clips, so both the glow bleeding outward and the triangle hanging below have to fit inside this padding or they are cut off. The glow wins at small dot sizes and the triangle wins at large ones — at `wallDotMax` the triangle reaches 9.8px against the glow's 8px — so it is a `max()` rather than a number, and neither can be starved by a change to the other. */ /* ==> THE BAR IS IN THE `max()` EVEN THOUGH IT NEVER WINS TODAY. <== §57.52. The padding is applied top AND bottom off one value, and the triangle below is 0.52 of the dot tall against the bar's 0.16 — so the triangle wins at every dot size in the range and the bar fits inside the room it already asks for. It is listed anyway for the reason the other two are: the slot CLIPS, so a retune of the bar that nobody thought to trace back to this line would cut the mark off at the top with nothing on screen saying why. Neither mark can be starved by a change to the other. */ --wall-strip-pad: max( var(--dot-glow-blur), calc(var(--wall-lf-gap) + var(--wall-lf-h) + 1px), calc(var(--wall-ret-gap) + var(--wall-ret-h) + 1px) ); } /* --- the pill: the way back to the live globe ---------------------------- */ /* ==> THE ONE THING ON SCREEN THAT MUST NEVER BE COVERED. <== It is the only way out of the archive — Escape steps the drawer back and closes it, it never leaves — so it sits above the drawer (30) and the control cluster (40) at the same rung the bar holds for the same reason. THE CENTRING AND THE SIZING FIGHT, AND `#storm-pill` ALREADY LOST THAT FIGHT TWICE (ui/panels.css). Setting `left` alone silently caps a fixed element at half the screen; setting `left` AND `right` stops it growing to its contents. So: centre with the transform, which asks nothing of the box, and clamp with `max-width`. Copied deliberately rather than re-derived — that comment is the record of two glass faults and this pill has the same shape. */ #seasons-pill { position: fixed; top: var(--safe-top); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 2 * var(--pill-inset)); z-index: 50; min-height: var(--touch-target); padding: 0 var(--space-comfy); display: flex; align-items: center; gap: var(--space-tight); background: var(--glass-raised); backdrop-filter: blur(var(--glass-blur-raised)); -webkit-backdrop-filter: blur(var(--glass-blur-raised)); border: 1px solid var(--glass-border); border-radius: 999px; color: var(--text-primary); font-family: var(--font-ui); font-size: var(--type-body); font-weight: 600; cursor: pointer; box-shadow: 0 4px 20px var(--glass-shadow); -webkit-appearance: none; appearance: none; /* Transform and opacity only (§9). */ transition: transform var(--duration-instant) var(--ease-swap), opacity var(--duration-instant) var(--ease-swap); } /* Sized off the text rather than a pixel literal, so it tracks the label at every type scale instead of becoming a speck or a billboard. */ .seasons-pill-chevron { flex: 0 0 auto; width: 1.1em; height: 1.1em; } .seasons-pill-text { white-space: nowrap; } #seasons-pill:active { transform: translateX(-50%) scale(0.97); } #seasons-pill:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Hover is a CAPABILITY, never a device (§Input). A finger has none, and a touchscreen laptop has both. */ @media (hover: hover) { #seasons-pill:hover { background: var(--hover); } } /* --- the pill along the bottom ------------------------------------------- */ /* ==> THE SECOND PILL, AND IT SAYS WHAT IS DRAWN. §57.38, §57.38b. <== The archive has two: `#seasons-pill` above is the way out, this one is the caption. They are two elements because one element cannot be in two places saying two things. ==> IT IS THE DELETED BAR'S JOB WITHOUT THE BAR'S COST. <== `#seasons-bar` was fixed to this same edge and full width, so the drawer and the control cluster had to be pushed up by its height. This is a lozenge at `z-index: 30` — the same layer `#storm-pill` sits on — so nothing is pushed anywhere and that strip of screen is the globe's again. MEASUREMENTS ARE `#storm-pill`'s, COPIED RATHER THAN RE-DERIVED. It is the same shape doing the same job on the same edge, and its own comment records two glass faults about centring a fixed element: `left` alone silently caps the width at half the screen, and `left` plus `right` stops it growing to its contents. `left: 50%` with a transform is what survived both. */ #seasons-status-pill { position: fixed; transform: translateX(-50%); bottom: var(--safe-bottom); /* ==> CENTRED ON THE WINDOW, THE SAME AS THE PILL AT THE TOP. <== Aaron, 2026-08-28. A version that shifted right by half the rail so it centred on the visible globe was built and rejected on glass: the pill moving when the drawer opens reads worse than it sitting still, and the two pills must agree with each other before either agrees with the rail. */ left: 50%; width: max-content; max-width: calc(100vw - 2 * var(--pill-inset)); /* ==> BELOW THE DRAWER, AND THAT IS WHERE IT DIFFERS FROM ITS MODEL. <== Glass, 2026-08-28: it painted THROUGH the open sheet. `#storm-pill` is at 30 and so is `#drawer`, which is a tie broken by stylesheet order — and `seasons.css` loads after `panels.css`, so this pill won it. The live pill gets away with 30 only because it sets `data-hidden` whenever the drawer opens; this one has no such rule, because it is meant to still be there when the sheet comes down. So it sits UNDER the drawer by z-index instead, which is also what "it costs the globe no layout" was always supposed to mean. */ z-index: 20; min-height: var(--touch-target); padding: 0 var(--space-comfy); display: flex; align-items: center; background: var(--glass-raised); backdrop-filter: blur(var(--glass-blur-raised)); -webkit-backdrop-filter: blur(var(--glass-blur-raised)); border: 1px solid var(--glass-border); border-radius: 999px; /* ==> MUTED, NOT PRIMARY, AND THAT IS THE ONE DELIBERATE DIFFERENCE FROM THE PILL ABOVE. <== This is a caption about what is on the globe; the top pill is the only way out. If they carried the same weight the eye would have to choose between them, and the one that must never be missed would lose half the time. */ color: var(--text-secondary); font-family: var(--font-ui); font-size: var(--type-small); cursor: pointer; box-shadow: 0 4px 20px var(--glass-shadow); -webkit-appearance: none; appearance: none; /* Transform and opacity only (§9). */ transition: transform var(--duration-instant) var(--ease-swap), opacity var(--duration-instant) var(--ease-swap); } /* ==> `hidden` HAS TO BE SAID OUT LOUD, BECAUSE `display: flex` ABOVE BEATS IT. <== Glass, 2026-08-28: the pill rendered as an empty capsule over the globe before the archive had a sentence for it. The browser's own `[hidden]` rule is a bare element selector and loses to an id, so setting the property in JavaScript did nothing at all visually. Every `display` an id rule declares needs this beside it. */ #seasons-status-pill[hidden] { display: none; } /* One line, and it ellipses rather than wrapping. A two-line lozenge on a 390px phone is a panel, and this is a caption. */ .seasons-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #seasons-status-pill:active { transform: translateX(-50%) scale(0.97); } #seasons-status-pill:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Hover is a CAPABILITY, never a device (§Input). */ @media (hover: hover) { #seasons-status-pill:hover { background: var(--hover); } } /* ==> WIDE SCREENS DO NOT GET IT, AND `btn-storms` IS WHY THAT IS SAFE. <== `#storm-pill` sets this precedent: above 720px the drawer is a docked rail and the control cluster is the navigation, so a lozenge floating over the globe is redundant chrome. The job it does on a phone — reopening the archive's drawer — is `#btn-storms`'s up here, and that button is visible in the archive for exactly this reason. */ /* ==> IT SHOWS AT EVERY WIDTH NOW, AND SO DOES THE LIVE ONE. <== Aaron, 2026-08-28. This copied `#storm-pill`'s wide-screen hide, and that rule turned out to be resting on a premise that had already died — the rail is NOT open by default at any width, so a desktop reader arrived at a globe with no caption. Both pills are unhidden together, because the pair is the point: they are the same furniture on the same edge and having one appear only on a phone was never a decision anybody made. `#btn-storms` keeps the job it took at step 5 — it is a second road to the drawer, not a replacement for this pill, and on a wide screen the two are now both available. */ /* --- the season clock: the FAB and the scrubber. §57.67 slice C ----------- */ /* ==> THE PLAY CONTROL IS A CLUSTER BUTTON WITH ONE EXTRA RULE, NOT A SIXTH KIND OF FLOATING CONTROL. <== It carries `.control` from index.html, so the 44px target, the glass, the shadow, the focus ring, the press scale and the hover-capability rule all arrive with it. `seasons/clock-control.js` prepends it to `#controls`, which is a column flex container where DOM order is both the visual order and the tab order — so it lands at the TOP of the stack and first in the keyboard walk together (Aaron's call 1, 2026-08-31: above the location button). ==> `[hidden]` HAS TO BE SAID OUT LOUD, AND THIS IS THE THIRD TIME. <== `.control` declares `display: grid`, and the browser's own `[hidden]` rule is a bare attribute selector that loses to it — so setting the property in JavaScript would do nothing visually and the button would sit there over an empty globe. `#seasons-status-pill[hidden]` above carries the same note, from glass on 2026-08-28. Every `display` an id or class rule declares needs this beside it. */ #btn-season-clock[hidden] { display: none; } /* Engaged. ==> THE FILL ONLY, AND THE INK STAYS WHERE THE REST OF THE COLUMN'S IS. <== This used to lift `color` to `--text-primary` as well, and on glass (2026-08-31) that made the engaged button the brightest thing in the cluster — a control shouting about its own state beside four that never do. The state is already said twice without it: the mark changes from a triangle to a square, and the scrubber pill is on screen. `--hover` is a published token, so it goes sepia with everything else rather than being a colour this file chose. */ #btn-season-clock[data-on] { background: var(--hover); } /* Both marks are stacked in the same grid cell and cross-faded, which is `.control-view`'s pattern and is there for a measured reason: swapping the SVG's contents would be a parse and a layer promotion on every press. Opacity on two static children costs nothing (§9). It is TWO whole `

` already spans, but the `

` sat in the `auto` column and so a long label like `Power and stamina score` was widening that column for EVERY unmarked row on the panel — pushing `Aug 23, 2005` right to make room for a label on a different line. Spanning takes it out of the measurement, which is the same reason §57.56 spans the value cell. A full-width rule needs it anyway. */ .detail-vitals dt.has-rank { grid-column: 1 / -1; margin-top: var(--space-snug); padding-top: var(--space-base); border-top: 1px solid var(--glass-border); } /* ==> THE FIRST FIGURE IN A SECTION TAKES NO RULE. <== The section heading is already the boundary, and a hairline immediately under it reads as the heading being underlined rather than as a division between two things. */ .detail-vitals:first-child dt.has-rank:first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* Room under the axis, so the block is bounded at both ends rather than only at the top. Smaller than the space above, because the rule is doing most of the work up there and this only has to stop the last line touching. */ .detail-vitals dd.has-rank { padding-bottom: var(--space-snug); } /* ==> WHERE THE FIGURE STANDS, DIRECTLY UNDER THE FIGURE. <== §57.54b. This is the sentence `Where it ranks` used to carry three to five sections away from the number it was about, and moving it here is the whole of step 3. It is quieter than the value above it and louder than the axis below it, which is the order the reader should read them in: what it was, where that puts it, what the spread looks like. */ .detail-figure-rank { display: block; margin-top: var(--space-tight); font-size: var(--type-small); line-height: 1.4; color: var(--text-secondary); } /* ==> AND THE BAR STAYS ON ITS OWN LINE UNDER BOTH. <== The value is still the thing being read; the rank places it and the bar is the context under that. */ .season-spine { margin-top: var(--space-tight); } /* ==> THE ONE FOOTNOTE THAT GOVERNS EVERY RANK ON THE PANEL. <== §57.54b, §57.57c. It replaces the scope sentence that used to sit inside `Where it ranks`, and it is outside every section so it cannot be folded away. The rule above it is what separates it from `NOOA's report` — without one it reads as another paragraph of that section rather than as a note about the whole panel. ==> `--glass-border` RATHER THAN A NEW RULE COLOUR. <== It is what every other horizontal rule in this stylesheet is drawn in — the roster's row separators, the drawer's own edges — and a second opinion about what a dividing line looks like is exactly the drift `tools/text-role-check.mjs` exists to stop one category up. The first draft of this rule reached for a `--hairline` token that does not exist anywhere in the repo, which would have rendered as no border at all with nothing throwing. */ .season-detail-footnote { display: block; margin-top: var(--space-comfy); padding-top: var(--space-base); border-top: 1px solid var(--glass-border); } /* The first note in the footnote has the rule above it doing the separating, so it does not need its own top margin as well. */ .season-detail-footnote .detail-note:first-child { margin-top: 0; } .season-spine-plot { display: block; width: 100%; /* Roughly three times the first mockup's height, which is what made the axis legible rather than decorative. §57.54c. */ height: var(--spine-height); } .season-spine-fill { fill: var(--spine-fill); } /* ==> THE FLOOR THE COLUMNS STAND ON, AND A TICK AT EACH END OF THE RANGE. <== §57.64. Without them the bar has no ends: the reader has to work out where the range starts and stops from where the ink happens to run out, and on the coarse ladders the last few columns are one pixel tall, so it is not workable-out at all. Quieter than the mark and quieter than the fill's tallest columns — this is furniture, not data. */ .season-spine-rule, .season-spine-tick { stroke: var(--spine-fill); stroke-width: 1; } /* ==> THE MARK IS THE ONE THING ON THE BAR THE READER IS LOOKING FOR. <== Two device pixels, held at that width by `vector-effect="non-scaling-stroke"` on the element, because the plot is stretched by `preserveAspectRatio="none"` and a scaled stroke would be a different thickness on every screen width. */ .season-spine-mark { stroke: var(--spine-mark); stroke-width: 2; } /* The two real extremes, one at each end. `space-between` rather than a grid: there are exactly two and they are pinned to the ends of the bar above. */ .season-spine-axis { display: flex; justify-content: space-between; gap: var(--space-base); margin: 2px 0 0; /* `--type-small`, not `--type-micro`: the token block reserves micro for uppercase section headings and kickers, and these are neither. */ font-size: var(--type-small); font-family: var(--font-numeric); color: var(--text-muted); } /* ==> THE RIGHT-HAND END IS RIGHT-ALIGNED SO IT ENDS WHERE THE BAR ENDS. <== `32 days, 18 hours` is the longest label either end ever carries — the lifespan ladder's top rung, `Storm 3 1899` — and left-aligned it would sit under the middle of the bar and read as a mark. */ .season-spine-axis span:last-child { text-align: right; } /* ==> THIS STORM'S OWN FIGURE, PRINTED ON THE BAR UNDER ITS MARK. <== §57.64. Without it the mark is a position with no value — the reader can see the storm sits four fifths along and has to look back up to the row to find out what four fifths means. It is the brightest thing in this block after the mark itself, because it is the one number here that is about THIS storm rather than about the archive. */ .season-spine-figure { position: relative; margin: 3px 0 0; /* The absolutely positioned span is out of flow, so the paragraph would collapse to nothing and the axis line would sit on top of it. One line's worth of height, held open. */ height: 1.3em; font-size: var(--type-small); font-family: var(--font-numeric); color: var(--text-primary); } .season-spine-figure span { position: absolute; top: 0; white-space: nowrap; } /* ==> THREE ANCHORS, NOT ONE, AND THE RECORD-HOLDER IS WHY. <== A label centred on a mark at 2% hangs half of itself off the left edge of the panel. Near either end it pins to that end instead. `--spine-at` is only set on the middle case, so the two pinned cases cannot be moved by a stale value. */ .season-spine-figure-start { left: 0; } .season-spine-figure-end { right: 0; } .season-spine-figure-mid { left: var(--spine-at); transform: translateX(-50%); } /* --- the life chart (§57.54d, §57.59) ------------------------------------- ==> WIND AT EVERY RECORDED FIX, AGAINST TIME, AND IT IS NOT A SECTION. <== It sits directly under the paragraph, above the first fold, because step 6 numbers the landfall list against the marks on it — a reader who could fold the chart away would then meet a numbered list with nothing to match. ==> ONLY COLOURS AND STROKES ARE HERE. <== Every position, size and font size lives in `ui/season-life-chart.js` in the SVG's own user units, so the whole drawing scales with its container the way `ui/chart-home.js` does. A rem-based type token would hold a label still while the tick under it moved. ------------------------------------------------------------------------ */ .lifec { margin: 0; padding: var(--space-base) var(--drawer-inset) var(--space-snug); border-bottom: 1px solid var(--glass-border); } .lifec-plot { display: block; width: 100%; height: auto; } /* ==> THE BANDS ARE THE REAL SAFFIR-SIMPSON COLOURS AT A LOW OPACITY, NOT A RE-THEMED SET. <== SPEC §6: category colours are fixed and are not themeable, so a Cat 4 stripe here is the same ink as the Cat 4 dot on the roster and on the globe. Measured 2026-08-30, it costs nothing on the sepia panel either — composited at this opacity the real colours land within 15 of a warmed set on a 442-point scale. The `fill` is set per rect in the renderer; only the opacity is a style decision. */ .lifec-band { opacity: 0.11; } .lifec-band-label { opacity: 0.85; font-family: var(--font-numeric); } /* The floor and the day ticks are furniture: present enough to bound the plot, quiet enough that the line is what the eye lands on. `--spine-fill` is the distribution bar's own furniture colour and this is the same job one panel further up, so the two charts' baselines match rather than being two opinions about what a quiet rule looks like. */ .lifec-baseline, .lifec-tick { stroke: var(--spine-fill); stroke-width: 1; opacity: 0.7; } .lifec-axis { fill: var(--text-muted); font-family: var(--font-numeric); } /* ==> THE LINE IS 2.6 UNITS AND ROUND-CAPPED SO A ONE-FIX HOLD STILL DRAWS. <== A storm that held one wind for six hours is a zero-length segment, and a butt cap would render it as nothing at all. */ .lifec-line { stroke-width: 2.6; stroke-linecap: round; fill: none; } /* ==> A SYSTEM WITH NO GRADE TO CLAIM IS GREY, WHICH IS §57.7g's DECISION ARRIVING ON A SECOND SURFACE. <== A wave before genesis and an extratropical system after it are both real measured winds and neither is a category. Sandy crossed New Jersey at 80 kt as an `EX`: the line still climbs to 80 and only the ink changes, so the height keeps saying the wind while the colour stops making a claim the agency withdrew. `stormEnded` is the token that already means exactly this, in all three palettes. */ .lifec-line-ungraded { stroke: var(--storm-ended); } /* The peak is already the highest point on the line. The dot is not new information — it says WHICH hump the `Peak winds` row above is about. Its fill is the grade it reached; the ring lifts it off a band of the same hue. */ .lifec-peak { stroke: var(--text-primary); stroke-width: 1.5; } /* ==> THE DROP LINE IS DASHED AND QUIET BECAUSE IT IS A POINTER, NOT A READING. <== It carries the eye from a numbered disc up to the moment on the line, and nothing about the storm is measured along it. */ .lifec-drop { stroke: var(--text-primary); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.45; } /* ==> THE DISC IS THE PANEL'S OWN INK WITH THE PANEL'S OWN BACKGROUND PUNCHED OUT OF IT. <== `textInverse` rather than a literal dark value: the number has to stay legible if a theme ever moves, and a hardcoded hex is how a filled badge ends up dark-on-dark. §57.63 is the same mistake one file over. */ .lifec-disc { fill: var(--text-primary); } .lifec-disc-n { fill: var(--text-inverse); font-family: var(--font-numeric); font-weight: 700; } .lifec figcaption { margin-top: var(--space-tight); }