/* STORM ATLAS — the surface's own ink, and nothing else's. * * SCOPED, DELIBERATELY. Every token override and every class below sits inside `[data-atlas]`, * which only this surface sets. Other surfaces share styles.css with the Atlas and * must keep its own radii, its own accents and its own type scale; a refinement to one surface * that silently restyles the other is not a refinement, it is a regression with a nice * screenshot. So docs/tokens/* is untouched and the divergence lives here, in one file, where * it can be read as a list of deliberate differences. * * THE ONE TONAL DECISION EVERYTHING ELSE RESTS ON: the map plate is the DARKEST plane and the * chrome around it is lighter. That inversion is what makes the map read as a canvas set into * an instrument rather than as the page background it happens to fill. Move one of the three * planes and all three have to move — the ladder carries the reading, not the absolute values. * * Classes are prefixed `at-`. The design-system bundle injects its own stylesheet into the same * document and short names collide; a prefix makes the boundary structural. */ /* IBM PLEX SANS, SELF-HOSTED, AND DECLARED HERE RATHER THAN IN docs/tokens/fonts.css. Other surfaces render no Plex Sans and its font manifest should not grow four faces it never uses; IBM Plex Mono IS shared, so its faces live in the shared manifest. Both families are the latin subsets from the fontsource distribution of IBM's own release (OFL 1.1). SELF-HOSTED RATHER THAN LINKED. The design file pulls both from fonts.googleapis.com, and every browser gate in this repository ABORTS that host to stay hermetic (see scripts/lib/browser-harness.mjs) -- a linked face would fall back to a system font in every check that measures this surface, so the gates would be measuring a design nobody ships. The product skin (Handoff B) is two families: Plex Sans for words, Plex Mono for figures. */ @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap; src:url('assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap; src:url('assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap; src:url('assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap; src:url('assets/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2')} /* ─── tokens ──────────────────────────────────────────────────────────────────────────── */ [data-atlas]{ /* the three planes, plus the sunken one inputs sit in */ /* THE B SKIN -- INSTITUTIONAL CARTOGRAPHIC, ONE SHELL. Charcoal #13171c is the page and the chrome; the raised planes step up from it the way Handoff B's surface/panel tokens do; the plate steps DOWN from it, one tone, because the plate is the darkest plane on this surface and the chrome around it is lighter (the tonal lock above). There is no second shell: the paper tokens further down are retained for Direction C export and nothing selects them. */ --chrome-hi:#1a1f26; /* header, transport, plate caption bands — one step up from the page */ --chrome:#13171c; /* the page, the rail, the panel */ --chrome-raised:#202830; /* inspector, popover, drawer — the raised plane */ --sunken:#0f1317; /* year inputs */ --stage:#0f1317; /* the plate — darkest, one step below the page */ --rule:#2a3440; --rule-2:#313e4d; --rule-3:#3a4d5f; --rule-4:#4c5f73; /* The text tiers are Handoff B's slate ramp, with the tertiary tier lifted from #6b7a8d to #8a98aa: B's own value measures 3.4:1 on the raised plane, and --t3 is this surface's secondary TEXT ink (--text-2), which needs 4.5. --t4 is a MARK ink and carries no text. */ --t1:#e6e8eb; --t2:#8f9bb0; --t3:#8a98aa; --t4:#505d6e; /* THE POPULATION INK, AS A CSS TOKEN. This is `POPULATION_INK` from render/palette.js -- the colour of the archive's own population when it is CONTEXT rather than subject -- restated here because the forward view draws that population in CSS and SVG rather than on a canvas. It is not a sixth colour job: it is the one the map already uses for exactly this, so the distribution a reader sees beside a forecast is inked the same as the tracks they see behind a selection. scripts/check-atlas-adherence.mjs pins the two to the same value, because two declarations of one ink drift and the one that drifted would be the one nobody was looking at. */ --at-population:#7a9cbb; color-scheme:dark; /* A 45° hatch, reused by the refused mark. Declared once so the mark and the key cannot drift apart. */ --hatch:repeating-linear-gradient(45deg,#2b3d53 0 1.5px,transparent 1.5px 5px); /* The design-system aliases every component already reads, remapped for this surface. This is what lets the panels adopt the ladder without every inline style being rewritten. */ --surface-app:var(--chrome); --surface-card:var(--chrome); --surface-sunken:var(--sunken); --border-dim:var(--rule); --border-strong:var(--rule-2); --text-1:var(--t1); --text-2:var(--t3); /* THE CHROME ACCENT IS SLATE, NOT CYAN. Handoff B reserves the cyan for the cartography -- the class ramp's Category 1 and the pathway cells -- and inks its controls in a muted slate so nothing in the chrome competes with the plate. B's #7a8fa3 measures 4.47:1 on the raised plane, so the text accent is lifted one step to #8ea3b8 and B's value keeps the borders. */ --accent:#8ea3b8; --accent-bright:#9ab0c3; --accent-2:#7a8fa3; /* The one cyan the chrome may reach for, and only to draw ON the plate: the probe ring. */ --plate-accent:#4fc3f7; --border-accent:var(--accent); --text-link:var(--accent); --pos:#3ddc97; --neg:#f4746f; /* `--warn` is the archive's own epistemic flag on this surface and nothing else's. */ --warn:#f2b233; --flag:#f2b233; --special:#b09af5; /* Radius 0 everywhere. Other surfaces keep 6/8/12 px; a research plate has square corners. */ --radius-sm:0; --radius-md:0; --radius-lg:0; --radius-pill:0; /* Colour, border and background only, and one duration. No easing curve, because an easing curve is a gesture and nothing on this surface is gesturing. */ --ease-ui:.1s linear; --ease-cam:.1s linear; --dur-drawer:0s; --dur-veil:0s; --shadow-card:none; --shadow-cmd:none; /* The three-zone header lock: the brand is exactly the rail's width and the status block exactly the panel's, so the chrome lines up with the columns underneath it. One pair of variables drives both, which is what keeps them locked through every breakpoint. FLUID, NOT STEPPED. These were fixed at 312/424 with breakpoints stepping them down, which meant every pixel a narrower viewport lost came out of the PLATE: measured on the archive, the plate held 61.7% of the width at 1920 but 54.0% at 1600 and 51.7% at 1440, where the instrument stops reading as a map with chrome around it and starts reading as two dense rails with a map wedged between them. Tying both columns to the viewport shares the loss, so the plate keeps 60-64% of the width from 1920 down to the collapse. THE FLOORS ARE MEASURED, NOT GUESSED, and they are set by TYPE rather than by boxes. Both columns hold their grids well below these widths -- the rail's twelve-cell month strip and the panel's 112/1fr/78 count table both survive to 240 -- but their labels do not, and a narrower column than this starts ellipsising the things a reader steers by. Measured at 1440, ellipsised items in each column against its width: rail 240: 4, incl. the ENVIRONMENT stage row 260: 2 296: 1 panel 300: 2, incl. LANDFALLS WITH A WITHHELD CLASS 312: 1 400: 0 260 and 312 are where the last stage row and the last ledger key come back whole. What still ellipsises at those widths is two long explanatory keys inside disclosure sections, which ellipsised on the fixed 296/400 columns too. */ --at-rail:clamp(260px,15.5vw,300px); --at-panel:clamp(312px,20.5vw,400px); /* THE VERTICAL RHYTHM, DECLARED ONCE, because the instrument's cap below is computed from it. Each of the first three is both a grid track and a term in --at-frame; two copies of the same number in a stylesheet is a drift waiting to happen, and here the drift would silently mis-size the plate. The header is 54 rather than 58 and the transport 52 rather than 56: the brand block is 30px of type and the transport's tallest readout 26px, so both were carrying more air than they needed while the plate -- the only element whose job is to be large -- was short. THE TRANSPORT IS THE ONE THAT IS NOT IN THE CAP, and that is deliberate. This surface has no resting transport: the row is 0px until a storm is selected or the replay clock is running. Counting it anyway reserved 52px that was not there, and the plate came out 917px against the 865 its aspect asks for -- 1.34 rather than 1.421. The cap is sized for the RESTING state, so chrome that appears later comes out of the plate and only ever makes it wider, which is the safe direction: a transport can shorten the plate but can never make it portrait. */ --at-head:54px; --at-band-top:26px; --at-band-bot:24px; --at-transport-h:52px; /* THE APERTURE CEILING IS THE CAMERA'S, AND IT IS MEASURED RATHER THAN CHOSEN. * * 1.67 used to bound the plate on an argument about SURPLUS -- past it the extra height is * latitude the archive's frame has nothing to put in. Under a declared band that argument is * outranked, and the first draft of this composition retired the bound entirely. It was wrong, * and check-atlas-camera is what said so: the opening view is a longitude aperture inside a * clamp, so a squarer plate makes the clamp cover more latitude, which raises the zoom, which * crops longitude off both ends. Measured at 1440x1600 with no bound: aspect 0.67, and two of * the four research corridors off the plate -- a plate captioned NORTH ATLANTIC + EAST PACIFIC * opening on neither development region. * * SO THE BOUND IS BACK, AT THE VALUE THE CORRIDORS ACTUALLY NEED. Measured by driving the * plate's height directly: the four corridors hold at 1.62 and 1.63 at 1440, at 1.59 at 1920 * and at 1.54 at 1280, and fail at 1.49. 1.60 is the round number above all four, and it * bounds the BAND rather than the plate -- see .atlas-plate-row -- so that capping the map * never leaves paper under it. * * WHAT IT IS NOT. It is not the old surplus argument and it is not a shape somebody liked: it * is the aspect below which this instrument's own opening view stops holding the geography its * caption names. */ --at-plate-ar:1.6; /* THE FIGURE'S OWN CHROME, AS A RESERVATION -- AND THE PLATE IS THE BAND LESS THIS, NEVER THE BAND LESS WHAT THE CHROME HAPPENED TO MEASURE. The plate head, the class key and Figure 1 measure 81.3px at every supported width from 1280 up and 97.3 below it, in every state, now that the caption is one line; it was 150 to 166 with the old paragraph and eight lines of it under a runner's fallback fonts. 120 is the reservation: enough headroom that a machine with other metrics still fits inside it, small enough that the slack it banks reads as the figure's own spacing rather than a hole. BEING WRONG IN EITHER DIRECTION IS SURVIVABLE, WHICH IS THE POINT. Too large and the extra is white space above Figure 1, which sits at the column's foot. Too small and the band's `min-height` lets the row grow, taking the answer column with it. Neither moves the map. */ --at-fig-chrome:120px; /* AND THE HEAD'S, THE SAME WAY. The question and its cohort line measure ~150 at 1920 and 1440 with a two-line question; 176 is the bound. A longer question shortens the peek rather than the band, which is the right direction: what is under the fold is advertised a little less, and nothing the reader is reading moves. */ --at-head-h:176px; /* RETIRED WITH THE COMPOSITION. * * `--at-plate-ar:1.67` capped the plate at the aspect the archive's own frame fills, on the * argument that a taller plate shows empty latitude. That argument is still true and it is now * outranked: the first band is declared from the viewport and the plate takes it, so that both * columns of the band terminate on one baseline. Measured at 1920, the ceiling would put the * plate at 662px inside an 812px band and leave 150px of paper under the map with the answer * running past it -- the "plate dies into beige" the composition exists to end, reintroduced by * a rule about aspect. The surplus is ocean the frame does not fill rather than paper nothing * fills, which is the trade the contract makes deliberately. * * THE FLOOR STAYS, because it is not about surplus: past 3.2 a single East Pacific track is a * horizontal scratch and recurvature is unreadable. It is declared here, once, and * scripts/check-atlas-adherence.mjs pins it -- a bound that can be edited in the one place it * is used is a bound that can be widened to make a failing gate pass. */ --at-plate-ar-max:3.2; /* THE THREE BOUNDS THAT WENT WITH THE STACKED SHELL, AND WHY THEY ARE NOT REPLACED BY OTHERS. * * `--at-plate-hmax:500px` capped the map's height outright, `--at-plate-ar-wide:4.0` relaxed * the aspect ceiling at the widths where that cap was what set the shape, and * `--at-deck-min:352px` reserved the evidence a floor the plate had to subtract before taking * anything. All three existed for ONE reason: the deck sat UNDER the map, so every pixel of * plate height came straight out of visible rows, and a large monitor would otherwise have * spent its surplus on ocean. * * Under the composition that trade does not exist. The answer is eight rows in a column of its * own and the complete matrix is below the band at page width, so plate height buys no rows * from anybody; a height cap would only be forcing the plate to an aspect the frame does not * ask for. * * WHAT DECIDES THE PLATE NOW IS THE ANSWER MEASURE AND THE BAND'S ASPECT CEILING, and those * are the numbers scripts/check-atlas-adherence.mjs pins in their place. See --at-answer with * the shell below: the split it produces is the contract's -- 777px of a 1362px band at 1440, * 1106px of a 1840px band at 1920 -- and widening it is the modern form of the edit those * tokens were pinned to prevent. scripts/check-atlas-contract.mjs measures the resulting * shares against the approved frames, on both sides of the gutter. */ /* THE PLATE'S OWN MARGIN. The graticule is ruled on the plate's edges and its longitude labels sit in the bottom 16px of it -- measured, an 11px line five pixels up. Everything the plate floats over that band rather than on it: the attribution first, the density legend above that, and the invitation moved to the head of the plate entirely, because three things anchored to one bottom-right corner is not a stack, it is a collision. */ --at-plate-gutter:16px; /* ─── THE REDESIGN'S TOKENS ───────────────────────────────────────────────────────────── * * Added alongside the tokens above rather than replacing them, because the shell that reads * the old ones is still standing: each handoff step ships on its own, and a token sweep that * landed before the markup that consumes it would break the surface between two green * commits. The old block is removed in the step that removes its last reader. * * TWO SHELLS, ONE ARCHITECTURE. The dark ramp already matches the specification exactly -- * --chrome, --chrome-hi, --stage, --t1..--t4, --rule-4, --accent, --flag are the audited * values and are not restated here. What is new is the LIGHT ramp, and the plate is excluded * from the swap BY CONSTRUCTION: --stage is one token, declared once, identical in both * shells, so no future edit to a shell can lighten the cartographic plate by accident. */ /* THE LIGHT SHELL. Contrast is against the ground each ink actually lands on, and every tier clears AA at the size it is used: ink-1 15.93, ink-2 7.27, ink-3 5.56/5.14, ink-4 5.16/4.77, accent 6.29, flag 5.35. The three hairlines carry NO text -- enforced by scripts/check-atlas-adherence.mjs, which reads the word "rule" or "hair" in any segment of a token's name and fails the build if it reaches a colour declaration. */ --at-paper:#f6f3ee; --at-paper-raised:#efeae1; --at-paper-sunken:#ece7dd; --at-ink-1:#16191d; --at-ink-2:#4a5158; --at-ink-3:#5c626a; --at-ink-4:#61676e; --at-paper-accent:#17607f; --at-paper-flag:#8a5a05; --at-paper-rule:#ded7cb; --at-paper-hair:#c9c1b4; --at-paper-strong:#a9a196; /* THE EVIDENCE BAR'S LIGHT ECHO OF THE CARTOGRAPHIC RAMP. * * NOT palette.js. That ramp is authoritative, it is verified against the dark stage it draws * on, and it ships unchanged -- these are its paper derivatives, and they are DERIVED rather * than picked. The handoff's own draft of this table is the reason it is computed: it put * CAT 2 at #9c7a1e against CAT 3 at #c2661a, which is 1.00:1 in luminance and one step apart * in monochrome. That is the pair deciding "major hurricane", rendered indistinguishable, in * the table whose stated job was to keep it separable. * * The constraint set, asserted in the gate rather than described here: >=3:1 on every paper * ground a bar can land on (WCAG 1.4.11 -- a bar is a graphical object carrying meaning), * >=1.25:1 between adjacent classes so a 1px stroke separates, >=12 Rec.601 luma between * them so MONOCHROME separates too, and a strictly monotonic sequence so the ordering * survives with no colour at all. Hue is held to the plate's class hue throughout, which is * what keeps the two tables the same seven classes rather than two palettes. */ --at-bar-td:#788594; --at-bar-ts:#577691; --at-bar-cat1:#2a6985; --at-bar-cat2:#5e4b1e; --at-bar-cat3:#61320d; --at-bar-cat4:#541d1c; --at-bar-cat5:#1f1930; /* THE TYPE SCALE. Sixteen declared sizes become six, carrying nine roles. The floor is 12 for any number and 10 for any label; 9 exists only for the stamps -- methodology version, pack hash, build time, URL echo -- and nothing else may use it. No italics anywhere, no letter-spacing on the sans, uppercase only at label and stamp size, and sentence case for every sentence including the refusal statements printed verbatim from the engine. */ --at-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --at-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; /* Every sans and every display face on this surface resolves to Plex Sans: the design system's Satoshi and Erode tokens are re-pointed inside [data-atlas], so no component has to know which family it is set in. Two families, and the second is the mono. */ --font-sans:var(--at-sans); --font-display:var(--at-sans); /* ─── THE INSTRUMENT'S FIVE STEPS ────────────────────────────────────────────────────── * * TWO FAMILIES, FIVE SIZES, AND EVERY ELEMENT OF THE RESTING FRAME ASSIGNED TO ONE OF THEM. * IBM Plex Sans carries the question and every outcome name; IBM Plex Mono carries every * figure. (5c set the words in Source Serif 4; Handoff B, the product skin, sets them in Plex * Sans at the same five steps. The scale is 5c's, the family is B's.) What this replaces used eleven sizes and three * families, and the cost of that was not ugliness -- it was that SIZE STOPPED MEANING * ANYTHING: a reader could not tell, from type alone, whether a number was a finding or a * stamp, because eleven steps have no order a reader can hold. * * t1 30 the question. One per screen. * t2 14 an outcome name, a rate, a limit's count. The findings. * t3 11.5 the cohort line, Figure 1, a group's qualifier. The prose that frames a finding. * t4 10.5 n / N, a Wilson interval. A finding's supporting arithmetic. * t5 9.5 column heads, the class key, plate metadata, the colophon. The apparatus. * * A LIMIT'S COUNT IS AT t2, THE SAME STEP AS A RATE, AND THAT IS THE ONE ASSIGNMENT THAT IS AN * ARGUMENT RATHER THAN A CONVENTION. 269 storms with no recorded outcome is a finding of the * same kind and the same weight as 13.0% reaching Category 4; setting it smaller would be an * editorial claim the archive never made. * * THE FLOOR IS 9.5 AND IT IS BELOW THE 12px ONE THIS FILE USED TO HOLD. That is a deliberate, * frozen decision and not an economy: the two steps below 12 carry SUPPORTING arithmetic and * APPARATUS, never a headline figure, and every one of them is mono with tabular figures on * paper at 5.5:1 or better -- scripts/check-light-contrast.mjs measures each on the ground it * actually lands on, in both shells. What no longer exists is the thing the old floor was * written against: type shrunk at a breakpoint to make a merged cell fit. Nothing here shrinks * with the viewport at all. */ --at-t1:30px; --at-t2:14px; --at-t3:11.5px; --at-t4:10.5px; --at-t5:9.5px; /* THE INSTRUMENT'S OWN TOKENS RESOLVE TO THE FIVE STEPS. The rest of this table is unchanged and belongs to surfaces this frame does not govern -- the inspector, the builder sheet, the provenance drawer, the calibration ledger. A five-size frame is a claim about the RESTING SCREEN; imposing it on a 2,500px scrolling drawer would be a different design decision, and not one 5c makes. */ --at-fs-question:var(--at-t1); /* sans 400 · the research question */ --at-fs-subject:26px; /* sans 700 · the storm's name in the inspector */ --at-fs-figure:26px; /* mono 400 · refusal counts, the empty pool. One per screen, maximum */ --at-fs-cohort:var(--at-t3); /* the cohort line, Figure 1, the wordmark */ --at-fs-action:13.5px; /* sans 700 · BUILD HISTORICAL COHORT, VIEW COHORT, SEE EVIDENCE */ --at-fs-body:13.5px; /* sans 400 · interpretation, refusal statements, disclosure prose */ --at-fs-row:12px; /* sans 400 · inspector field names, off-frame surfaces */ --at-fs-value:12px; /* mono 400 · off-frame values */ --at-fs-label:10px; /* mono 400-600 · off-frame column heads and status words */ --at-fs-stamp:9px; /* mono 400 · off-frame stamps only */ --at-tr-subject:-.2px; --at-tr-label:1.2px; --at-tr-stamp:.8px; /* THE SPACING STEPS, AND THE ROW HEIGHTS THAT ARE NOT SPACING. Cells carry no vertical padding on purpose: the rhythm comes from the ROW, so a cell whose text wraps grows its own row instead of colliding with the next one. */ --at-s1:4px; /* label to value */ --at-s2:7px; /* mark to text, chip padding */ --at-s3:10px; /* table column gap */ --at-s4:14px; /* strip item gap */ --at-s5:16px; /* shell gutter, table inset */ --at-s6:18px; /* inspector padding */ --at-s7:26px; /* block separation */ --at-row-h:20px; --at-row-head-h:24px; } /* ─── page ────────────────────────────────────────────────────────────────────────────── */ [data-atlas]{background:var(--chrome);color:var(--t1)} [data-atlas] *{box-sizing:border-box} [data-atlas] button{font:inherit} [data-atlas] ::-webkit-scrollbar-thumb{background:var(--rule-3);border-radius:0} [data-atlas] ::-webkit-scrollbar-thumb:hover{background:var(--rule-4)} /* Keyboard focus is visible on every control, not only the ones that happened to be links. */ [data-atlas] :focus-visible{outline:1px solid var(--accent);outline-offset:2px} [data-atlas] .at-chip:focus-visible,[data-atlas] .at-months button:focus-visible, [data-atlas] .at-tg:focus-visible,[data-atlas] .at-tbtn:focus-visible, [data-atlas] .at-speeds button:focus-visible,[data-atlas] .at-pool button:focus-visible, [data-atlas] .at-years input:focus-visible,[data-atlas] .at-hbtn:focus-visible, [data-atlas] .leaflet-control-zoom a:focus-visible{outline:1px solid var(--accent);outline-offset:1px} /* Nothing on this surface animates for effect, so there is nothing to keep when a reader has asked for less of it. The replay clock is the one continuous motion and it is always started by an explicit act; under this preference it steps coarser rather than stopping (see archive-transport.jsx), so the same run is watched in fewer moving frames. */ @media (prefers-reduced-motion:reduce){ [data-atlas] *{transition:none!important;animation:none!important} } /* ─── shell ───────────────────────────────────────────────────────────────────────────── */ /* Fixed to the viewport, because the map IS the page and a page that scrolls under a map is a different product. The three rows are chrome / instrument / transport. THE PADDING IS THE CAP. The shell still covers the whole viewport and still paints it, but its CONTENT box is capped at --at-frame and centred, so the surplus on a tall workstation becomes the shell's own chrome above and below the instrument rather than more plate. It is one declaration and it degrades to nothing: on a viewport shorter than the cap the max() is 0 and the grid is exactly what it was. All three columns end at the same baseline, both vertical rules run the instrument's full height, and no column is left holding a gap. */ /* THE SHELL IS A GRID AND NOTHING ELSE HERE DECIDES ITS SHAPE. * * It used to declare the three-column instrument -- rail, stage, panel -- and both surfaces that * still use this class override every track of it: the stacked shell with its own six rows, the * calibration variant with its own two. What is left is what both actually share. * * WHAT WAS REMOVED WITH IT. `.atlas-rail` and `.atlas-panel` are elements no JSX in this * repository renders any more, and their rules were seating them in columns 1 and 3 of a grid * that has one. `.atlas-stage` was pinned at column 2, row 2 with `align-self:center` and a * height computed from the plate's aspect cap -- which is how the plate first measured 0x0 in a * single-cell row, and which the stacked shell has had to override ever since. `.atlas-transport` * was pinned at row 3, which in the stacked shell is the CONDITION STRIP, and it took that row * until the override went in. Every one of them was a rule about a shell that is gone, still * aimed at a live surface. */ /* THE CALIBRATION SURFACE IS A PANE; THE INSTRUMENT IS A PAGE. `position:fixed; inset:0` is right for the ledger -- it replaces the instrument rather than opening beside it, and it scrolls inside itself. It is wrong for the instrument, whose composition puts the complete matrix under the first band: pinned, everything below the fold had to scroll inside a column instead of the page. So the pin belongs to the surface that wants it rather than to every surface that shares the class. */ [data-atlas].atlas-shell{ display:grid; background:var(--chrome); } [data-atlas].atlas-shell:not(.atlas-instrument){position:fixed;inset:0} /* A grid item's default min-height is `auto`, which means CONTENT, which means a stage holding a map that wants to be as tall as its own content escapes the row it was given. An explicit floor of zero so the row height wins. */ [data-atlas] .atlas-stage{min-width:0;min-height:0} /* THE CALIBRATION SURFACE IS A SHELL VARIANT, not a fourth child rule. Written as a variant because the media queries below cap row 2 -- at 760px it is minmax(280px,46vh) -- and a full-width reading surface squeezed into 46vh of viewport would be a page nobody scrolls. In this mode the rail, stage and panel are not rendered at all, so the variant needs no edits inside either media block: it simply redefines the grid it is laid into. */ [data-atlas].atlas-shell[data-view="calibration"]{ /* AND IT DROPS THE PLATE'S ASPECT CAP, because there is no plate. `padding-block` above exists for one reason: to stop a tall viewport from stretching the map past the archive's working shape. The ledger renders no map -- it is a reading surface of ten contract blocks -- and it was inheriting the cap anyway, so at 1280x1000 it opened with 398px of the viewport painted blank and ONE of its ten contracts on screen. The <=760px branch already zeroes this for the same reason; the variant simply never did. */ padding-block:0; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); } [data-atlas] .atlas-calibration{grid-column:1/-1;grid-row:2;min-width:0;min-height:0;overflow-y:auto} /* ─── header ──────────────────────────────────────────────────────────────────────────── */ /* THE CALIBRATION SURFACE'S MASTHEAD, and the last thing `--at-head` sizes. The tactical shell replaced it with the identity strip; the ledger and the boot screen still render it. */ [data-atlas] .at-header{ grid-column:1/-1;grid-row:1;height:var(--at-head); display:flex;align-items:stretch;min-width:0; border-bottom:1px solid var(--rule-2);background:var(--chrome-hi); } [data-atlas] .at-brand{ display:flex;flex-direction:column;justify-content:center;gap:4px;flex:none; padding:0 16px 0 20px;width:var(--at-rail);border-right:1px solid var(--rule-2);min-width:0; } [data-atlas] .at-brand h1{ margin:0;font-family:var(--font-sans);font-size:14px;font-weight:700;letter-spacing:3px; line-height:1;text-transform:uppercase;color:var(--t1);white-space:nowrap; } [data-atlas] .at-brand .at-sub{ font-family:var(--font-mono);font-size:9px;letter-spacing:1.1px;color:var(--t3); text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } [data-atlas] .at-brand a{color:inherit;text-decoration:none} [data-atlas] .at-brand a:hover{color:var(--accent)} /* The archive ledger. It degrades by dropping whole figures, never by clipping one mid-word: a truncated count is a wrong count, and an absent one is only an absent one. */ [data-atlas] .at-ledger{display:flex;align-items:stretch;flex:1 1 auto;min-width:0;overflow:hidden} [data-atlas] .at-fig{ display:flex;flex-direction:column;justify-content:center;gap:3px;flex:none; padding:0 17px;border-right:1px solid var(--rule);white-space:nowrap; } [data-atlas] .at-fig b{ font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--t1);line-height:1; } [data-atlas] .at-fig span{font-family:var(--font-mono);font-size:8.5px;letter-spacing:1px;color:var(--t3)} [data-atlas] .at-sys{ display:flex;align-items:center;justify-content:flex-end;gap:16px;flex:0 1 auto; width:var(--at-panel);min-width:0;padding:0 18px;border-left:1px solid var(--rule-2); } [data-atlas] .at-sys .at-stack{ display:flex;flex-direction:column;gap:4px;text-align:right;min-width:0; font-family:var(--font-mono);font-size:9px;letter-spacing:.8px;color:var(--t3);line-height:1.3; } [data-atlas] .at-sys .at-stack div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-atlas] .at-sys .at-stack em{font-style:normal;color:var(--t2)} /* The text button. A rule under a word, not a pill: this surface has no buttons that look like buttons except the transport's. */ [data-atlas] .at-hbtn{ font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.2px;color:var(--t2); background:none;border:0;border-bottom:1px solid var(--rule-3);padding:0 0 2px; text-transform:uppercase;flex:none;cursor:pointer; transition:color .1s linear,border-color .1s linear; } [data-atlas] .at-hbtn:hover{color:var(--t1);border-bottom-color:var(--accent)} /* ─── editorial furniture ─────────────────────────────────────────────────────────────── */ [data-atlas] .at-pad{padding:0 18px 34px 20px} [data-atlas] .at-sechd{ display:flex;align-items:baseline;gap:9px;flex-wrap:nowrap; margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--rule-2); } [data-atlas] .at-sechd .at-n{ font-family:var(--font-mono);font-size:9px;color:var(--t3);letter-spacing:.5px;flex:none;width:16px; } [data-atlas] .at-sechd h3{ margin:0;font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:1.7px; text-transform:uppercase;color:var(--t1);white-space:nowrap;flex:none; } /* the section label is never abbreviated; its right-hand annotation is what gives way */ [data-atlas] .at-sechd .at-r{ margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.7px;color:var(--t3); text-align:right;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* the double rule opens a movement, not a section */ [data-atlas] .at-grouprule{ height:4px;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);margin:30px 0 0; } [data-atlas] .at-grouprule + .at-sechd{margin-top:14px} [data-atlas] .at-note{ font-family:var(--font-mono);font-size:10px;line-height:1.65;color:var(--t3);letter-spacing:.15px; } [data-atlas] .at-note b{color:var(--t2);font-weight:400} [data-atlas] .at-prose{font-family:var(--font-sans);font-size:12px;line-height:1.62;color:var(--t2)} [data-atlas] .at-prose strong{color:var(--t1);font-weight:500} [data-atlas] .at-lede{ font-family:var(--font-display);font-weight:400;font-size:16px;line-height:1.42;color:var(--t1); letter-spacing:.1px; } /* One leader, one right-aligned figure. The label ellipsizes and the value never does: a number that has lost its last digit looks exactly like a smaller number. */ [data-atlas] .at-row{display:flex;align-items:baseline;gap:10px;padding:4px 0;min-width:0} [data-atlas] .at-row .at-k{ font-family:var(--font-mono);font-size:9.5px;letter-spacing:.85px;text-transform:uppercase; color:var(--t3);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis; } [data-atlas] .at-row .at-dots{ flex:1;height:1px;min-width:10px;transform:translateY(-3px); background:linear-gradient(90deg,#2c3948 55%,transparent 0) 0 0/4px 1px repeat-x; } [data-atlas] .at-row .at-v{ font-family:var(--font-mono);font-size:11px;color:var(--t1);text-align:right;white-space:nowrap; letter-spacing:.1px;flex:none; } [data-atlas] .at-row.at-dim .at-k,[data-atlas] .at-row.at-dim .at-v{color:var(--t3)} [data-atlas] .at-row .at-v small{font-size:9px;color:var(--t3);margin-left:3px} [data-atlas] .at-grp{border-top:1px solid var(--rule);margin-top:10px;padding-top:8px} /* A value the Atlas derived by replaying the archive's own rule, rather than an archive column. Kept as a superscript so it annotates the number without competing with it. */ [data-atlas] sup.at-drv{ font-family:var(--font-mono);font-size:7.5px;color:var(--t3);margin-left:2px; vertical-align:super;letter-spacing:0; } /* The headline figure takes its consequence from the caption under it, not from size alone. */ [data-atlas] .at-figure{display:flex;align-items:flex-end;gap:11px;margin:14px 0 0;min-width:0} [data-atlas] .at-figure .at-big{ font-family:var(--font-mono);font-size:36px;font-weight:600;line-height:.82;letter-spacing:-1.2px; color:var(--t1);flex:none; } [data-atlas] .at-figure .at-den{ font-family:var(--font-mono);font-size:11px;color:var(--t2);padding-bottom:3px;line-height:1.4; } [data-atlas] .at-capt{ font-family:var(--font-mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--t3); border-top:1px solid var(--rule);margin-top:11px;padding-top:6px; } [data-atlas] .at-bar{height:2px;background:var(--sunken);margin:11px 0 0;position:relative;overflow:hidden} [data-atlas] .at-bar i{position:absolute;inset:0 auto 0 0;background:var(--accent);opacity:.7} [data-atlas] .at-bar u{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--accent)} /* ─── controls ────────────────────────────────────────────────────────────────────────── */ [data-atlas] .at-chips{display:flex;flex-wrap:wrap;gap:4px} [data-atlas] .at-chip{ font-family:var(--font-mono);font-size:9.5px;letter-spacing:.8px;text-transform:uppercase; padding:5px 8px;border:1px solid var(--rule-2);color:var(--t2);background:transparent; border-radius:0;cursor:pointer;white-space:nowrap; transition:color .1s linear,border-color .1s linear,background-color .1s linear; } [data-atlas] .at-chip:hover{border-color:var(--rule-4);color:var(--t1)} [data-atlas] .at-chip[aria-pressed=true]{border-color:var(--accent);color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--chrome))} [data-atlas] .at-chip[disabled]{opacity:.4;cursor:not-allowed} /* Twelve contiguous cells sharing their borders — a strip, not twelve buttons. */ [data-atlas] .at-months{display:flex;border:1px solid var(--rule-2);border-right:0} [data-atlas] .at-months button{ flex:1;font-family:var(--font-mono);font-size:9.5px;padding:7px 0;color:var(--t3); background:transparent;border:0;border-right:1px solid var(--rule-2);border-radius:0;cursor:pointer; transition:background-color .1s linear,color .1s linear; } [data-atlas] .at-months button:hover{color:var(--t1);background:var(--chrome-hi)} [data-atlas] .at-months button[aria-pressed=true]{color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--chrome))} [data-atlas] .at-years{display:flex;align-items:flex-end;gap:9px} [data-atlas] .at-years label{flex:1;min-width:0;display:block} [data-atlas] .at-years span{ display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:1px;color:var(--t3); margin-bottom:4px;text-transform:uppercase; } [data-atlas] .at-years input{ width:100%;font-family:var(--font-mono);font-size:11px;padding:6px 8px;background:var(--sunken); color:var(--t1);border:1px solid var(--rule-2);border-radius:0; } [data-atlas] .at-years input:focus{outline:0;border-color:var(--accent-2)} /* A square that fills, not a pill that slides. Nothing here is a preference switch. */ [data-atlas] .at-tg{ display:flex;align-items:flex-start;gap:10px;padding:6px 0;width:100%;text-align:left; background:none;border:0;cursor:pointer; } [data-atlas] .at-tg .at-box{ width:12px;height:12px;border:1px solid var(--rule-3);flex:none;margin-top:1px;position:relative; transition:border-color .1s linear; } [data-atlas] .at-tg[aria-pressed=true] .at-box{border-color:var(--accent)} [data-atlas] .at-tg[aria-pressed=true] .at-box::after{content:"";position:absolute;inset:2px;background:var(--accent)} [data-atlas] .at-tg .at-lb{ font-family:var(--font-mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase; color:var(--t3);transition:color .1s linear; } [data-atlas] .at-tg[aria-pressed=true] .at-lb{color:var(--t1)} [data-atlas] .at-tg:hover .at-lb{color:var(--t1)} [data-atlas] .at-tgnote{ font-family:var(--font-sans);font-size:11px;line-height:1.55;color:var(--t3); padding:0 0 6px 22px;margin-top:-1px; } /* The query spine: six stages, each narrowed by the query in force or passing the whole archive through. A derived view of the filters below it — never a control. */ [data-atlas] .at-spine{margin-top:12px;border-top:1px solid var(--rule)} [data-atlas] .at-stage-row{ display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--rule);min-width:0; } [data-atlas] .at-stage-row .at-tick{ width:6px;height:6px;border:1px solid var(--rule-3);flex:none;margin-left:2px; } [data-atlas] .at-stage-row.at-on .at-tick{background:var(--accent);border-color:var(--accent)} [data-atlas] .at-stage-row.at-na .at-tick{background:var(--hatch);border-color:var(--rule-3)} [data-atlas] .at-stage-row .at-nm{ font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase; color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } [data-atlas] .at-stage-row.at-on .at-nm{color:var(--t1)} [data-atlas] .at-stage-row .at-st{ margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.7px;color:var(--t3); text-align:right;flex:none; } [data-atlas] .at-stage-row.at-on .at-st{color:var(--accent)} [data-atlas] .at-stage-row.at-na .at-st{color:var(--flag)} [data-atlas] details.at-excl{margin-top:11px} [data-atlas] details.at-excl summary{ font-family:var(--font-mono);font-size:9px;letter-spacing:.9px;color:var(--t3);cursor:pointer; list-style:none;text-transform:uppercase; } [data-atlas] details.at-excl summary::-webkit-details-marker{display:none} [data-atlas] details.at-excl summary:hover,[data-atlas] details.at-excl[open] summary{color:var(--t1)} /* ─── the plate ───────────────────────────────────────────────────────────────────────── */ /* The map is framed as a figure in a journal: a caption band above and below, as SIBLINGS of the map rather than as overlays, so neither can ever sit on top of the geography. */ /* THE CAPTION BANDS SIZE AGAINST THE PLATE, NOT THE WINDOW. What fits in the plate head and foot is a function of how wide the PLATE is, and that is not a function of the viewport: at 1181 the third column leaves a 641px plate and the head cannot hold its title, while one pixel narrower the two-column arrangement leaves 894 and it fits comfortably again. Viewport media queries cannot express that -- they dropped captions that fitted and kept captions that did not -- so the stage is an inline-size container and the bands query it directly. */ [data-atlas] .atlas-stage{ display:grid; grid-template-rows:var(--at-band-top) minmax(0,1fr) var(--at-band-bot); background:var(--chrome); container:plate / inline-size; } [data-atlas] .at-platehead,[data-atlas] .at-platefoot{ display:flex;align-items:center;gap:16px;padding:0 14px;min-width:0; font-family:var(--font-mono);font-size:9.5px;letter-spacing:1px;color:var(--t3); text-transform:uppercase;white-space:nowrap;overflow:hidden; } [data-atlas] .at-platehead > span,[data-atlas] .at-platefoot > span{ min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto; } [data-atlas] .at-platehead{border-bottom:1px solid var(--rule-2);background:var(--chrome-hi)} [data-atlas] .at-platefoot{border-top:1px solid var(--rule-2);background:var(--chrome-hi)} [data-atlas] .at-platehead em,[data-atlas] .at-platefoot em{font-style:normal;color:var(--t2)} [data-atlas] .at-platehead .at-r,[data-atlas] .at-platefoot .at-r{margin-left:auto;text-align:right;flex:none} [data-atlas] .at-plate{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--stage)} [data-atlas] .at-scalebar{display:flex;align-items:center;gap:7px;flex:none} [data-atlas] .at-scalebar i{ height:5px;display:block; border-left:1px solid var(--rule-4);border-right:1px solid var(--rule-4); border-bottom:1px solid var(--rule-4); } [data-atlas] .at-scalebar em{font-style:normal;color:var(--t2)} /* the tick frame, ruled on the plate's own edges */ [data-atlas] .at-frame{position:absolute;inset:0;pointer-events:none;z-index:460} [data-atlas] .leaflet-container{background:var(--stage);border-radius:0} [data-atlas] .leaflet-tile-pane{background-color:var(--stage);background-image:none} [data-atlas] .leaflet-control-zoom{border:1px solid var(--rule-2);border-radius:0} [data-atlas] .leaflet-control-zoom a{ width:26px;height:24px;line-height:24px;border-radius:0!important; font:400 12px/24px var(--font-mono)!important; background:rgba(19,27,39,.92)!important;color:var(--t2)!important; border-color:var(--rule-2)!important; } /* ON-PLATE, DARK IN BOTH SHELLS -- see the exemption list in check-atlas-adherence.mjs. */ [data-atlas] .leaflet-control-zoom a:hover{background:#1d2836!important;color:#fff!important} /* THE TWO CAMERA CONTROLS, ABOVE THE ZOOM AND BUILT LIKE IT. Words rather than glyphs: a house icon and a crosshair are two pictures a reader has to be taught, and the whole reason these exist is that somebody is lost. They sit in a leaflet-bar so they inherit the same containment, stacking and pointer discipline as the zoom control they stack on, and they are wide enough for four characters at the label token. */ [data-atlas] .at-mapnav{border:1px solid var(--rule-2);border-radius:0;margin-bottom:6px} [data-atlas] .at-mapnav a{ display:block;width:auto;min-width:44px;height:22px;line-height:22px;padding:0 7px; text-align:center;text-decoration:none;border-radius:0!important; font-family:var(--font-mono);font-size:9px;letter-spacing:1.2px; background:rgba(19,27,39,.92);color:var(--t2); border-bottom:1px solid var(--rule-2); } [data-atlas] .at-mapnav a:last-child{border-bottom:0} /* RETICLE, PRESSED: the plate's own accent as a rule on the control's map-facing edge. */ [data-atlas] .at-mapnav a[aria-pressed="true"]{color:var(--t1);box-shadow:inset 2px 0 0 var(--plate-accent)} /* ON-PLATE, DARK IN BOTH SHELLS -- see the exemption list in check-atlas-adherence.mjs. */ [data-atlas] .at-mapnav a:hover{background:#1d2836;color:#fff} [data-atlas] .at-mapnav a:focus-visible{outline:1px solid var(--accent);outline-offset:1px} /* THE HEAD BAND'S LIVE FIGURES. They come after the title and before nothing, and they are the last thing on the band to be given up: see the container ladder below. */ [data-atlas] .at-plate-counts{flex:0 1 auto;min-width:0} /* PLATE NOTES — the foot band's progressive disclosure. Closed by default, and that is allowed here for the one reason it is never allowed in the deck: nothing behind it qualifies a NUMBER. It holds what the plate draws and how to drive it, and a reader who never opens it misreads nothing. The degraded coastline state does NOT live here -- see map.jsx. */ [data-atlas] .at-plate-notes{position:relative;flex:none} [data-atlas] .at-plate-notes > summary{ list-style:none;cursor:pointer;color:var(--t3); border-bottom:1px solid var(--rule-3); } [data-atlas] .at-plate-notes > summary::-webkit-details-marker{display:none} [data-atlas] .at-plate-notes > summary:hover{color:var(--t1);border-bottom-color:var(--accent)} [data-atlas] .at-plate-notes[open] > summary{color:var(--t1)} [data-atlas] .at-plate-notes-body{ position:absolute;left:0;bottom:calc(100% + 7px);width:min(52ch,70vw);z-index:900; background:var(--chrome);border:1px solid var(--rule-2);padding:var(--at-s3) var(--at-s4); text-transform:none;letter-spacing:0;white-space:normal; font-family:var(--at-sans);font-size:var(--at-fs-row);line-height:1.5;color:var(--t2); } [data-atlas] .at-plate-notes-body p{margin:0 0 var(--at-s2)} [data-atlas] .at-plate-notes-body p:last-child{margin-bottom:0} [data-atlas] .at-plate-notes-body b{ font-family:var(--at-mono);font-size:var(--at-fs-label);font-weight:600; letter-spacing:var(--at-tr-label);color:var(--t3);margin-right:var(--at-s2); } [data-atlas] .leaflet-control-attribution{ background:rgba(13,19,29,.82)!important;color:var(--t3)!important; font-family:var(--font-mono);font-size:8.5px;border-radius:0; margin-bottom:calc(var(--at-plate-gutter) + 5px)!important; } [data-atlas] .leaflet-control-attribution a{color:var(--t3)!important} [data-atlas] .at-legend{ position:absolute;right:12px;bottom:calc(var(--at-plate-gutter) + 22px); max-width:320px;z-index:450;pointer-events:none; display:flex;flex-direction:column;gap:5px; background:rgba(15,21,31,.86);padding:5px 8px; } [data-atlas] .at-legend .at-lrow{ display:flex;gap:8px;align-items:center;font-family:var(--font-mono);font-size:9.5px; letter-spacing:.7px;color:var(--t2); } [data-atlas] .at-legend .at-lrow .at-d{color:var(--t3);letter-spacing:0;text-transform:none} [data-atlas] .at-legend .at-sw{display:flex;flex:none} [data-atlas] .at-legend .at-sw i{width:9px;height:9px;display:block} [data-atlas] .at-legend .at-lrow-live{padding:0;border-top:0;white-space:nowrap;color:var(--t1)} [data-atlas] .pk-live{display:flex;flex-direction:column;gap:3px;margin:8px 0 2px;padding:7px 8px;border:1px solid var(--rule-3);border-left:3px solid var(--t1);font-size:11.5px;color:var(--t2)} [data-atlas] .pk-live b{color:var(--t1);font-weight:600} [data-atlas] .pk-live-h{font-family:var(--at-mono);font-size:9.5px;letter-spacing:1.1px;color:var(--t1)} [data-atlas] .pk-live em{font-style:normal;font-size:10.5px;color:var(--t3)} /* At the HEAD of the plate, not the foot. The foot is where the graticule prints its longitude labels, where Leaflet prints the attribution and where the density legend sits, and this ribbon was landing on all three: measured at 1920, its box overlapped the attribution's and occluded 120W through 60W. The head of the plate is empty at rest -- it is the top of the Atlantic, above the band -- and the rule mirrors to the edge facing the map so the ribbon still reads as hanging off the frame. The gutter each side keeps it clear of the zoom control at every supported plate width. */ /* AT THE PLATE'S LEFT, PAST THE GRATICULE'S LABEL COLUMN, NOT CENTRED. Centred it set three ragged lines over the top of the Atlantic; ranged left it sets two, like the caption under the plate, the latitude labels keep their own margin, and the camera controls at the opposite corner are never in its way. */ [data-atlas] .at-invite{ position:absolute;left:56px;top:12px;text-align:left;z-index:450; pointer-events:none;font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.1px; line-height:1.5;color:var(--t2);text-transform:uppercase;background:rgba(14,20,30,.9); padding:6px 12px 7px;border-bottom:1px solid var(--rule-3);max-width:min(58%,430px); } /* ON-PLATE, DARK IN BOTH SHELLS. */ [data-atlas] .at-invite em{font-style:normal;color:#fff} /* Clamped on BOTH axes against the plate, so a chip near an edge can never end up under a caption band or off the side. */ [data-atlas] .at-hover{ position:absolute;z-index:500;pointer-events:none;font-family:var(--font-mono);font-size:9.5px; background:rgba(17,24,35,.97);border:1px solid var(--rule-3);padding:5px 8px;white-space:nowrap; letter-spacing:.4px;color:var(--t1); } [data-atlas] .at-hover span{color:var(--t3)} /* ─── panel ───────────────────────────────────────────────────────────────────────────── */ [data-atlas] .at-masthead{ padding:16px 18px 14px 20px;border-bottom:1px solid var(--rule-2);background:var(--chrome); } [data-atlas] .at-masthead .at-kicker{ display:flex;align-items:baseline;gap:9px;font-family:var(--font-mono);font-size:9px; letter-spacing:1.3px;color:var(--t3);text-transform:uppercase; } [data-atlas] .at-masthead .at-kicker .at-x{margin-left:auto;flex:none} [data-atlas] .at-masthead h2{ margin:9px 0 0;font-family:var(--font-sans);font-size:17px;font-weight:700;letter-spacing:.1px; line-height:1.18;color:var(--t1);text-transform:uppercase;text-wrap:pretty; } [data-atlas] .at-masthead h2.at-storm{font-size:22px;letter-spacing:-.2px; overflow:hidden;text-overflow:ellipsis} [data-atlas] .at-masthead .at-loc{ font-family:var(--font-mono);font-size:11px;color:var(--accent);margin-top:7px;letter-spacing:.3px; line-height:1.45; } [data-atlas] .at-masthead .at-loc span{color:var(--t3)} /* THE COHORT SPEC. The question as one citable line, derived entirely from state already on screen: no new claim, no new threshold, nothing computed that is not published above it. */ [data-atlas] .at-spec{ display:flex;align-items:flex-start;gap:10px;margin-top:13px;padding-top:10px; border-top:1px solid var(--rule); } [data-atlas] .at-spec code{ font-family:var(--font-mono);font-size:9px;letter-spacing:.5px;line-height:1.6;color:var(--t3); text-transform:uppercase;flex:1;min-width:0;overflow-wrap:break-word; } [data-atlas] .at-spec code b{color:var(--t2);font-weight:400} /* The URL half of a citation. Never uppercased -- the query carries case-sensitive values and a citation that cannot be pasted back is not a citation. */ [data-atlas] .at-spec code.at-url{ display:block;text-transform:none;color:var(--t3);margin-top:4px;letter-spacing:0; word-break:break-all; } [data-atlas] .at-spec button{flex:none;align-self:flex-start} /* counts over denominators, with the numerators aligned on one column */ [data-atlas] .at-itable{ display:grid;grid-template-columns:112px minmax(40px,1fr) 78px;align-items:center;gap:0 10px; } [data-atlas] .at-itable .at-lab{font-family:var(--font-mono);font-size:9px;letter-spacing:.7px;padding:4px 0} [data-atlas] .at-itable .at-meas{height:3px;background:var(--sunken);position:relative} [data-atlas] .at-itable .at-meas i{position:absolute;inset:0 auto 0 0;opacity:.7} [data-atlas] .at-itable .at-meas u{position:absolute;top:-2px;bottom:-2px;width:1px} [data-atlas] .at-itable .at-val{ display:grid;grid-template-columns:1fr 8px 1fr;font-family:var(--font-mono);font-size:10.5px; color:var(--t1); } [data-atlas] .at-itable .at-val b{font-weight:400;text-align:right} [data-atlas] .at-itable .at-val s{text-decoration:none;color:var(--t3);text-align:center} [data-atlas] .at-itable .at-val u{text-decoration:none;color:var(--t3);text-align:left;padding-left:1px} /* ─── THE OUTCOME LADDER ────────────────────────────────────────────────────────────────── * * WHY A LADDER AND NOT SIX CARDS. Every intensity contract used to get a card of its own: a * bar, a 20px percentage, a Wilson line, a sentence of prose, a three-line delta box and a * four-line UNKNOWN refusal -- about 150px each, six of them, and the identical refusal prose * repeated six times running. Measured on one rendered panel: "Nobody recorded this outcome" * six times, "A LIMIT OF THE RECORD" seven, "Widen the basin or the era" twelve. A reader who * wants to know whether this cohort intensifies more than its baseline had to read five * independent mini-panels and hold five numbers in their head to compare them. * * The ladder is the same information on one axis. TS -> Cat 1 -> Cat 3 -> Cat 4 -> Cat 5 is a * SEQUENCE, and a sequence read down aligned columns is one glance rather than five readings. * * WHAT SURVIVES INTACT, because none of it is decoration: * - the drawn Wilson band, which is the width of what is not known; * - the baseline's band on the SAME axis, directly beneath, so overlap is seen not computed; * - the count over its denominator on every row -- the archive's first panel rule is that a * percent never appears without the evidence it rests on, and compression is not an excuse; * - the refusal, IN THE RATE COLUMN, where the number would have been. * * The rows are three short lines rather than a wide table because the panel is 312-400px: a * seven-column table at that width is a table with three unreadable columns. */ [data-atlas] .at-ladder{margin-top:8px} [data-atlas] .at-lrow{padding:8px 0;border-top:1px solid var(--rule)} [data-atlas] .at-lrow:first-child{border-top:0} [data-atlas] .at-lhd{display:flex;align-items:baseline;gap:8px;min-width:0} [data-atlas] .at-lhd .at-lname{ font-family:var(--font-mono);font-size:9.5px;letter-spacing:.8px;flex:1;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } [data-atlas] .at-lhd .at-lct{font-family:var(--font-mono);font-size:10px;color:var(--t3);flex:none} [data-atlas] .at-lhd .at-lrate{ font-family:var(--font-mono);font-size:13.5px;flex:none;text-align:right;letter-spacing:.2px; } /* A refusal sits in the same slot the rate would have taken, at the size a status reads at rather than the size a number does: the absence of the number is the result, and inflating it to 13.5px would make an unanswered contract shout louder than an answered one. */ /* THE COMPACT LABEL, SAME VOICE. 9px bold in the state's own hue was the card idiom; 9.5 at 400 in one ink is the frame's, and the mark still names which refusal fired. */ [data-atlas] .at-lhd .at-lref{ font-family:var(--at-mono);font-size:var(--at-t5);font-weight:400;letter-spacing:1.1px; flex:none;text-align:right;color:var(--t3); } [data-atlas] .at-lbars{margin-top:6px} [data-atlas] .at-lmeas{position:relative;height:6px;background:var(--sunken);overflow:hidden} [data-atlas] .at-lmeas + .at-lmeas{margin-top:2px;height:4px} [data-atlas] .at-lmeas i{position:absolute;top:0;bottom:0;left:0} /* the rate, as a length */ [data-atlas] .at-lmeas b{position:absolute;top:0;bottom:0} /* the interval, as a band */ [data-atlas] .at-lmeas u{position:absolute;top:1px;bottom:1px;width:1px;background:var(--t1);opacity:.75} [data-atlas] .at-lft{ font-family:var(--font-mono);font-size:9.5px;color:var(--t3);margin-top:5px; display:flex;flex-wrap:wrap;gap:0 9px;line-height:1.5; } [data-atlas] .at-lft em{font-style:normal;color:var(--t2)} /* Filled = the intervals do not overlap. Hollow = they do. Both meanings are spelled out once under the ladder; the mark is what makes the column scannable, never the whole statement. */ [data-atlas] .at-sep{ display:inline-block;width:6px;height:6px;border:1px solid var(--t3); transform:translateY(-1px);margin-left:5px; } [data-atlas] .at-sep.at-on{background:var(--t2);border-color:var(--t2)} [data-atlas] .at-lkey{ font-family:var(--font-mono);font-size:9.5px;color:var(--t3);line-height:1.6; margin-top:9px;padding-top:8px;border-top:1px solid var(--rule); } /* REFUSAL GRAMMAR — a marginal rule, the way a journal sets a caveat. Never an alert box, never a tint, never a coloured background: a refusal is part of the argument, not an error in it, and colouring it as a warning is how a reader learns to skip past it. */ [data-atlas] .at-ref{ display:grid;grid-template-columns:auto 1fr;gap:10px;padding:2px 0 2px 11px;margin:11px 0; border-left:1px solid var(--rule-3); } /* NOT uppercased in CSS. The status line is the engine's own string, printed verbatim -- `BASE RATE ONLY -- unscoreable` is what analogs.js wrote, and a text-transform would quietly publish a string the archive never produced. */ [data-atlas] .at-ref .at-st{ font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:1.5px; color:var(--t1); } [data-atlas] .at-ref .at-why{ font-family:var(--font-sans);font-size:11px;line-height:1.6;color:var(--t3);margin-top:5px; text-wrap:pretty; } [data-atlas] .at-ref .at-why b{color:var(--t2);font-weight:500} [data-atlas] .at-mk{width:14px;height:14px;display:block;border:1px solid var(--rule-3);margin-top:1px;flex:none} [data-atlas] .at-mk.at-refused{background:var(--hatch)} [data-atlas] .at-mk.at-notev{ background:linear-gradient(to bottom right,transparent calc(50% - .6px),var(--rule-4) 50%, transparent calc(50% + .6px)); } [data-atlas] .at-mk.at-cond{border:0;border-left:2px solid var(--accent-2);width:7px;height:14px} [data-atlas] .at-mk.at-base{border:0;width:14px;height:14px;position:relative} [data-atlas] .at-mk.at-base::after{ content:"";position:absolute;left:1px;right:1px;bottom:4px;border-bottom:1px dotted var(--t3); } [data-atlas] .at-mk.at-unk{ border:0;width:14px;height:14px;font-family:var(--font-mono);font-size:12px;color:var(--t3); text-align:center;line-height:14px; } /* A gap the archive recorded is not a refusal. It gets a neutral mark, deliberately outside the five, so the key stays a key. */ [data-atlas] .at-mk.at-gapmark{border:0;width:6px;height:6px;background:var(--rule-4);margin:5px 4px 0} [data-atlas] .at-keyrow{ display:grid;grid-template-columns:16px 116px 1fr;gap:9px;align-items:start;padding:7px 0; border-top:1px solid var(--rule); } /* Same rule as the status line it defines: printed as the engine wrote it. */ [data-atlas] .at-keyrow .at-nm{ font-family:var(--font-mono);font-size:9px;letter-spacing:.9px;color:var(--t2); line-height:1.5;overflow-wrap:break-word; } [data-atlas] .at-keyrow .at-ds{font-family:var(--font-sans);font-size:11px;line-height:1.5;color:var(--t3);text-wrap:pretty} [data-atlas] .at-pool{max-height:252px;overflow-y:auto} [data-atlas] .at-pool button{ display:grid;grid-template-columns:1fr 38px 48px 52px;gap:9px;width:100%;text-align:left; padding:4.5px 0;border:0;border-top:1px solid var(--rule);background:transparent;cursor:pointer; font-family:var(--font-mono);font-size:9.5px;align-items:baseline;letter-spacing:.3px; } [data-atlas] .at-pool button:hover{background:var(--chrome-hi)} [data-atlas] .at-pool .at-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1)} [data-atlas] .at-pool .at-se,[data-atlas] .at-pool .at-km{color:var(--t3);text-align:right} [data-atlas] .at-pool .at-ct{text-align:right} /* ─── transport ───────────────────────────────────────────────────────────────────────── */ [data-atlas] .atlas-transport{grid-column:1/-1} [data-atlas] .at-transport{ display:flex;align-items:center;gap:18px;padding:0 18px 0 20px; min-height:var(--at-transport-h); border-top:1px solid var(--rule-2);background:var(--chrome-hi); } [data-atlas] .at-tbtn{ width:32px;height:27px;border:1px solid var(--rule-2);background:transparent;border-radius:0; font-family:var(--font-mono);font-size:10.5px;color:var(--t1);flex:none;cursor:pointer; transition:border-color .1s linear,background-color .1s linear,color .1s linear; } [data-atlas] .at-tbtn:hover{border-color:var(--rule-4);background:var(--chrome-hi)} [data-atlas] .at-tbtn.at-on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--chrome))} [data-atlas] .at-tbtn.at-wide{width:auto;padding:0 10px;font-size:9px;letter-spacing:.8px} [data-atlas] .at-speeds{display:flex;border:1px solid var(--rule-2);flex:none} [data-atlas] .at-speeds button{ font-family:var(--font-mono);font-size:9.5px;padding:5px 8px;color:var(--t3);background:transparent; border:0;border-right:1px solid var(--rule-2);border-radius:0;cursor:pointer; transition:color .1s linear,background-color .1s linear; } [data-atlas] .at-speeds button:hover{color:var(--t1)} [data-atlas] .at-speeds button:last-child{border-right:0} [data-atlas] .at-speeds button.at-on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--chrome))} [data-atlas] .at-scrub{flex:1;min-width:90px} [data-atlas] .at-scrub input{ width:100%;-webkit-appearance:none;appearance:none;height:14px;background:transparent; cursor:pointer;accent-color:#4fc3f7; } [data-atlas] .at-scrub input::-webkit-slider-runnable-track{height:2px;background:var(--rule-3);border-radius:0} [data-atlas] .at-scrub input::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:3px;height:14px;border:0;border-radius:0; box-shadow:none;background:var(--accent);margin-top:-6px; } [data-atlas] .at-scrub input::-moz-range-track{height:2px;background:var(--rule-3)} [data-atlas] .at-scrub input::-moz-range-thumb{width:3px;height:14px;border:0;border-radius:0;background:var(--accent)} [data-atlas] .at-scrub .at-ends{ display:flex;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:8.5px; letter-spacing:.8px;color:var(--t3);margin-top:-2px; } [data-atlas] .at-scrub .at-ends span{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis} [data-atlas] .at-readouts{display:flex;flex:none;border-left:1px solid var(--rule)} [data-atlas] .at-ro{ padding:0 14px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:4px; white-space:nowrap; } [data-atlas] .at-ro:last-child{border-right:0;padding-right:0} [data-atlas] .at-ro .at-k{ font-family:var(--font-mono);font-size:8.5px;letter-spacing:1px;color:var(--t3);text-transform:uppercase; } [data-atlas] .at-ro .at-v{font-family:var(--font-mono);font-size:12.5px;color:var(--t1);letter-spacing:.1px} /* The working-state instruction, at caption weight in the foot band. It gives way before the scale bar and the coordinates, which are unconditional, and before the coastline statement, which is the band's one epistemic claim -- an instruction is the most recoverable thing here, since the gesture is still available whether or not the words are. */ [data-atlas] .at-plate-hint{ font-family:var(--font-mono);font-size:9.5px;letter-spacing:1px;color:var(--t3); white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis; } [data-atlas] .at-hint{ font-family:var(--font-mono);font-size:9.5px;letter-spacing:1px;color:var(--t3); text-transform:uppercase;display:flex;gap:22px;width:100%;min-width:0;overflow:hidden; } [data-atlas] .at-hint span{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis} [data-atlas] .at-hint em{font-style:normal;color:var(--t2)} [data-atlas] .at-hint .at-r{margin-left:auto;flex:none} /* the skip announcement: the archive's own flag, and the only coloured thing on the transport */ [data-atlas] .at-skip{ font-family:var(--font-mono);font-size:9px;letter-spacing:1px;color:var(--flag);flex:none; white-space:nowrap;border-left:1px solid var(--rule-3);padding-left:10px; } /* ─── provenance drawer ───────────────────────────────────────────────────────────────── */ [data-atlas] .at-drawer{ position:fixed;top:0;right:0;bottom:0;width:560px;max-width:94vw;background:var(--chrome); border-left:1px solid var(--rule-2);z-index:1200;overflow-y:auto; } [data-atlas] .at-drawer .at-dh{ display:flex;align-items:baseline;gap:10px;padding:18px 22px 14px; border-bottom:1px solid var(--rule-2);position:sticky;top:0;background:var(--chrome);z-index:2; } [data-atlas] .at-drawer .at-dh h2{ margin:0;font-family:var(--font-display);font-weight:500;font-size:21px;letter-spacing:.2px; color:var(--t1); } [data-atlas] .at-drawer .at-body{padding:0 22px 44px} [data-atlas] .at-veil{position:fixed;inset:0;background:rgba(2,4,9,.62);z-index:1199} [data-atlas] .at-srcs{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px} [data-atlas] .at-srcs i{ font-family:var(--font-mono);font-size:9.5px;font-style:normal;color:var(--t2); border:1px solid var(--rule-2);padding:4px 7px;letter-spacing:.3px; } /* ─── responsive degradation, workstation first ───────────────────────────────────────── */ /* The rule that produced all of these: caption bands and ledgers give up whole items, never half a word. A survivor ellipsizes; a casualty leaves. The columns are fluid now, so these carry only what still has to give up a whole item. */ /* THE LADDER SHORTENED WITH THE STRIP. It used to shed the fifth figure at 1560 and the fourth at 1400; the compressed identity strip carries three, so those two steps had nothing to drop and the first real step is now the third figure at 1240. The rungs that are gone are gone because the items are, not because the rule relaxed. */ @media (max-width:1560px){ [data-atlas] .at-fig{padding:0 13px} [data-atlas] .at-platehead,[data-atlas] .at-platefoot{gap:13px} } @media (max-width:1240px){ [data-atlas] .at-fig:nth-child(n+3){display:none} [data-atlas] .at-sys .at-stack div:last-child{display:none} } /* THE PLATE'S OWN LADDER, measured against the plate rather than the window, and ordered by what each caption is worth rather than by how long it is. Measured demand, at rest: foot, all four scale bar 149-166 + projection 230 + coastline 370 + coordinates 65, three gaps and 28px of padding -- 898px of plate at the worst scale bar foot, no proj 655px foot, neither 272px head, all three plate title + tracks drawn + mode -- fits to 696, clips at 666 So the PROJECTION caption goes first, at 910, even though the coastline caption is the longer of the two: the graticule it describes is drawn and labelled on the plate either way, while the coastline caption is the one epistemic statement on the band -- which geometry is authoritative and which is context. It survives to 680. Below that only the scale bar and the live coordinates remain, and both are unconditional. Each casualty is recoverable where it goes: the coastline statement is section 05 of the provenance drawer, the plate's framing is the Cohort Spec's basin line. A survivor still ellipsises rather than overflowing -- a reader who zooms in far enough to quadruple the scale bar while hovering a coordinate can still push a caption past its space, and an ellipsis is the right answer to that, not a fourth breakpoint. */ /* THE HINT GOES FIRST. It was added to the foot band after the budget above was measured, and an instruction is the most recoverable item on it: the gesture is available whether or not the words are, while the coastline statement is the only epistemic claim the band carries and the scale bar and coordinates are unconditional. Dropped ahead of the projection caption rather than with it. */ @container plate (max-width:1100px){ [data-atlas] .at-plate-hint{display:none} } @container plate (max-width:600px){ [data-atlas] .at-plate-proj{display:none} } /* THE STROKE NOTE IS THE FOOT'S LOWEST-PRIORITY ITEM, and it goes whole rather than to an ellipsis: swatches 285, note 175, the measure 190 and two gaps ask 676; with the echo or the cell readout in the slot between them the note yields to it, since both are the same line's reading aid for what the plate is showing. */ @container plate (max-width:690px){ [data-atlas] .at-classkey-major{display:none} } [data-atlas] .at-platefoot:has(.at-plate-lens) .at-classkey-major, [data-atlas] .at-platefoot:has(.at-plate-cellread:not(:empty)) .at-classkey-major{display:none} /* PLATE NOTES SURVIVES WHERE THE PROSE IT REPLACED DID NOT, and that is the point of folding it: a 370px sentence had to be dropped at 680 to keep the scale bar, whereas an 11-character summary costs almost nothing and the sentence behind it is reachable at every width. What is dropped here is the DEGRADED-STATE sentence, which is the only thing left in that slot -- and it is dropped last, after the projection, because it is the band's one epistemic claim. */ @container plate (max-width:680px){ [data-atlas] .at-plate-model{display:none} } @container plate (max-width:600px){ [data-atlas] .at-plate-notes{display:none} } @container plate (max-width:600px){ [data-atlas] .at-plate-title{display:none} } /* THE LIVE FIGURE OUTLIVES THE CONSTANTS. The head band carried a plate title, the drawn/lifted counts and a mode caption, and the counts -- the only thing on the band that changes with the query, and the number a reader uses to check that the map and the panel are describing the same cohort -- were the part that clipped, while two fixed strings survived intact. The mode is also stated on the rail's own EXPLORE / REPLAY control, so it is the recoverable one. */ @container plate (max-width:770px){ [data-atlas] .at-platehead .at-r{display:none} } @container plate (max-width:700px){ [data-atlas] .at-plate-cellread,[data-atlas] .at-plate-lens{display:none} } @media (max-width:1040px){ [data-atlas] .at-fig:nth-child(n+2){display:none} [data-atlas] .at-sys .at-stack{display:none} } /* THE THREE-COLUMN SHELL'S OWN BREAKPOINTS ARE GONE WITH THE SHELL. * * Two media blocks lived here -- one at 1180 that re-laid the rail, the stage and the panel into * two columns, one at 760 that stacked all three -- and every element they named except the * stage has been deleted. They were not merely inert: both re-declared `grid-template-rows` on * `[data-atlas].atlas-shell`, which is the selector the calibration surface still uses, and both * would have gone on winning against anything less specific than the stacked shell's own * `[data-atlas].atlas-shell.atlas-instrument`. Dead CSS that still sizes a live surface is a * compatibility surface, and the instruction was that none of it ships. * * The stacked shell's ladder is declared with the shell itself, below, so that what a width * gives up is stated next to the grid it gives it up from. */ /* ─── the evidence deck ─────────────────────────────────────────────────────────────────── * * ONE GRID WHERE SIX SECTIONS WERE. Between six and eight tracks depending on what the deck has * to say -- see --at-deck-cols below and columnsOf() in evidence-deck.jsx. MED h and P25-P75 are * two tracks under one heading, because they are one statement about duration. * * ROWS ARE `display:contents`, WHICH IS THE POINT AND ALSO THE HAZARD. It puts every cell on the * deck's own grid, so columns line up across groups without a nested table -- and it means a row * generates no box, so a row-level rule or fill has to be painted on the CELLS. Both are done * below. What it buys is worth the care: the alternative is a grid per row, and a grid per row is * how a column silently stops aligning with its heading. * * ROW HEIGHT IS FIXED AND CELLS CARRY NO VERTICAL PADDING. The rhythm comes from the row, so a * cell whose text wraps grows its own row rather than colliding with the next one. */ [data-atlas] .at-deck{ /* THE TRACK SIZES, ONE TOKEN PER COLUMN. Which columns exist is decided in evidence-deck.jsx and arrives as --at-deck-cols; how wide each is, is decided here. Neither file can quietly take over the other's half of that. ALLOCATION IS THE HIERARCHY, and the hierarchy is stated once: RATE + CI the thing the surface exists to publish. A fixed 176 -- enough for "53.3% [48.5-58.2%]" at the value token with no wrap and no ellipsis at any supported width. It is fixed rather than fractional precisely because it must never be the column that gives way. VS ARCHIVE the comparison, and the second thing read. STATUS the qualification. Fractional, because a status that ellipsises is a qualification a reader cannot read, and on a wide desktop it should grow. COUNT the denominator's numerator. Fixed and modest: it is checked, not scanned. TIMING secondary, and the first thing folded. THE OUTCOME NAME TAKES THE SURPLUS NOW, WHICH IS WHAT REMOVING THE BAR WAS FOR. The bar carried 1fr -- 110px minimum and most of a wide desktop -- to draw the rate, its band and the archive baseline at a resolution where the overlap could be READ. In a five-column table that also has to hold a Wilson interval there is no such resolution to be had: the bar would be a 110px stub restating, softly and less precisely, the two columns next to it. So the track is gone, the class it encoded survives as a 3px hairline inside the outcome cell, and the width it was holding goes to the one thing at this measure that genuinely needs it -- the outcome name, which must not ellipsise on "Central America · ≥ 64 KT". THE THREE VALUE TRACKS ARE THE FROZEN TABLE, AT THE FROZEN MEASURES. 76 / 58 / 74 with a 12px gutter is exactly 5c's, and each is sized to its widest real content at its own type step: `3,224 / 3,616` at 10.5, `89.2%` at 14, `88.1–90.1%` at 10.5. Fixed rather than fractional precisely because none of them may ever be the column that gives way. */ /* EVERY TRACK IS ITS OWN WIDEST REAL CONTENT AT ITS OWN TYPE STEP, MEASURED, AND THE OUTCOME NAME CARRIES A FLOOR RATHER THAN A SHARE. IBM Plex Mono is 0.6em, so: count `3,224 / 3,616` measured at 83 in the rendered page, not multiplied out of an 0.6em advance, because the separators and the tracking are half of it. 82 was one pixel short and broke the pair over two lines, which reads as two numbers → 84 rate `100.0%` 6 characters at 14 → 52 int `95% WILSON` the HEAD, and wider than any interval it heads (`88.1-90.1%` measures 64). Measured at 69 with its tracking, so 70: a head right-set in a track one pixel short loses its FIRST character, and `5% WILSON` heads a column of ninety-five percent intervals while naming a different one → 70 status `STATUS` not the head, which is 41, but `CONDITIONED` -- the longest single WORD any status prints, measured at 76. A status wraps at its spaces (`BASE RATE ONLY` is 96 and takes two lines), so what the track has to hold is one word, not one phrase → 78 outcome a 150px floor, which is `TROPICAL STORM` at 14 serif plus the class hairline and the mark slot. Below that a ladder rung stops being readable, and the two optional columns are what would have taken it. THE BUDGET, RESTATED, NOW THAT STATUS IS NOT A TRACK. Resting is 150 + 84 + 52 + 70 and three 10px gutters -- 386 against the 486 measure, with the name taking the surplus. A CONDITIONED cohort adds the comparison and measures 150 + 84 + 52 + 70 + 72 and four gutters, 468, which the SAME 486 holds. That is the whole of the change: the sixth column this file used to buy out of the plate is bought out of the column the status vacated, and the measure is now the only one this surface has in any state. The status figure below is kept because it is what the phone's outcome floor was derived against; no template uses it. The duration pair remains genuinely optional and the ledger still scrolls horizontally to reach it rather than crushing the name. */ --at-col-outcome:minmax(150px,1fr); --at-col-count:84px; --at-col-rate:52px; --at-col-int:70px; /* vs `VS ARCHIVE` -- the HEAD again, at 69, and not `+22.8 pp` at 58. This track is RIGHT-SET like every other numeric one, and a right-set cell that is one pixel short does not ellipsise: `text-overflow` works at the end of the line, the overflow here is at the START, and `overflow:hidden` simply cuts the first characters off. Measured at 64: the head published `'S ARCHIVE`, which is the `95% WILSON` failure again in the one column that only appears once a reader has asked a question → 72 */ --at-col-vs:72px; /* status NOT A TRACK. The word is a line under the row it governs, at every width -- see the rule below. The measure is kept because it is what the phone's outcome floor was derived against, and because deleting a number a comment still reasons from is how a budget stops being checkable → 78, unused by any template */ --at-col-med:44px; --at-col-iqr:70px; display:grid; grid-template-columns:var(--at-deck-cols); gap:0 10px; padding:0; align-content:start; font-family:var(--at-sans); } /* ─── THE LEDGER'S OWN TYPE, ON THE FIVE STEPS ─────────────────────────────────────────── * * THE RATE IS THE FINDING AND IT IS SET AS ONE. 14px mono in full text ink, the same step as the * outcome name it answers -- so the pair reads as one statement, "Reached Category 4 · 13.0%", * rather than as a label and a value. Everything supporting it is a step down. * * THE COUNT AND THE INTERVAL ARE AT 10.5, AND THAT IS NOT A DEMOTION. `470 / 3,616` and * `11.9–14.1%` are the arithmetic BEHIND the rate: a reader checks them, and checking is done at * a size where a column of figures reads down its last digit, not at the size of the thing being * checked. Setting all three at one step is what made the old table read as a wall -- every cell * shouting at the same volume, and no way to tell from type which one was the answer. * * WHAT IS NOT ALLOWED, AND IS NOT DONE HERE: shrinking a published statistic to make a track * fit. The three value tracks are sized to their widest real content at their own step, and if * one did not fit the track would widen. */ [data-atlas] .at-dc-rate{ gap:var(--at-s1); font-family:var(--at-mono);font-size:var(--at-t2);color:var(--t1); } [data-atlas] .at-dc-rate .at-val,[data-atlas] .at-dc-rate .at-slot{ font-size:var(--at-t2); } [data-atlas] .at-dc-interval{justify-content:flex-end} [data-atlas] .at-dc-int{ font-family:var(--at-mono);font-size:var(--at-t4);color:var(--t2);white-space:nowrap; } [data-atlas] .at-dc-int .at-val,[data-atlas] .at-dc-int .at-slot{font-size:var(--at-t4)} [data-atlas] .at-dc-count .at-val{font-family:var(--at-mono);font-size:var(--at-t4);color:var(--t3)} /* THE CLASS HAIRLINE — the only magnitude-adjacent ink left in the table, and it encodes CLASS rather than magnitude. 3px of the row's own paper-ramp ink, 4px on a major hurricane, which is the same extra stroke the plate gives cat3 and above: the cat2/cat3 pair decides "major" and is the one pair a reader must never misread, so the distinction is carried in weight as well as in hue and survives monochrome. It carries no number and is 3px wide, so nothing about it can be read as a second, softer answer to the rate two cells along. */ [data-atlas] .at-dc-tick{ flex:none;display:block;width:3px;height:13px;background:var(--bar,var(--rule-3)); } /* A CAVEAT COLLAPSED TO ITS FINDING, WITH THE ARGUMENT ONE CLICK BELOW IT. The summary is set at the SAME size and ink as the prose it replaced -- this is a collapse of LENGTH, not of standing, and a qualification set smaller than the numbers it qualifies is a qualification a reader is being invited to skip. The marker is a rule under the line rather than a triangle, so it reads as a sentence that continues rather than as a widget. */ [data-atlas] .at-pre-more > summary{ list-style:none;cursor:pointer; border-bottom:1px solid var(--rule-3);display:inline; } [data-atlas] .at-pre-more > summary::-webkit-details-marker{display:none} [data-atlas] .at-pre-more > summary:hover{color:var(--t2);border-bottom-color:var(--accent)} [data-atlas] .at-pre-more > p{margin:var(--at-s2) 0 0;max-width:96ch} /* THE GROUP'S OWN QUALIFIER, on a line of its own because it is a sentence about a denominator rather than a value in a column. Spans every track, and it is set in the serif at the prose step: it is a sentence about what these rates are rates OF, and the frame has no sans in it. */ [data-atlas] .at-deck-groupnote{ grid-column:1/-1;padding:0 0 6px; font-family:var(--at-sans);font-style:italic;font-size:var(--at-t3);color:var(--t3); } /* ─── the fold line and the pinned limits ───────────────────────────────────────────────── */ [data-atlas] .at-deck-foldline{ grid-column:1/-1;display:flex;align-items:center;gap:12px;min-height:28px; font-family:var(--at-mono);font-size:var(--at-t4);letter-spacing:.8px;color:var(--t3); } [data-atlas] .at-deck-foldnote{color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis} /* THE LIMITS. Under one ink rule -- the same weight as the column heads, which is what says these are not another row -- with their counts at the finding step. */ [data-atlas] .at-deck-limits{ display:flex;flex-direction:column;gap:var(--at-s2); } [data-atlas] .at-deck-limits .at-foot-k{ font-family:var(--at-mono);font-size:var(--at-t5);letter-spacing:1.1px;color:var(--t3); } [data-atlas] .at-deck-limits .at-foot-line{ font-family:var(--at-sans);font-size:var(--at-t3);line-height:1.45;color:var(--t2); } /* NO SIZE OVERRIDE ON THE FIGURES INSIDE THESE SENTENCES. The frozen frame sets a limit's count at the finding step, and it would be right to -- but the archive publishes each limit as one measured sentence with its figures inside it, so there is no numeral here to set. Pulling one out means rewording what is left, and rewording a finding is how a finding stops being one. */ /* + N, ON THE GROUP ROW, COUNTING WHAT IS FOLDED. Never a bare chevron: a control that does not say how many contracts it holds turns a folded group and an empty one into the same picture. */ [data-atlas] .at-group-fold{ margin-left:var(--at-s2);flex:none; font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:var(--at-tr-label); background:transparent;border:1px solid var(--rule-2);color:var(--accent); padding:0 var(--at-s1);cursor:pointer; } [data-atlas] .at-group-fold:hover{border-color:var(--accent)} [data-atlas] .at-deck-row{display:contents} /* 29px ROWS, HAIRLINE RULES, NO HEADER BAND AND NO FILLED GROUP BANDS. The rhythm comes from the row and cells carry no vertical padding, so a cell whose text wraps grows its own row rather than colliding with the next one. */ [data-atlas] .at-dc{ min-height:var(--at-row-h); display:flex;align-items:center;gap:var(--at-s1); min-width:0; padding:0; } /* Every numeric cell is right-set, because a column of figures is read down its last digit. */ [data-atlas] .at-dc-count,[data-atlas] .at-dc-interval, [data-atlas] .at-dc-vs,[data-atlas] .at-dc-med,[data-atlas] .at-dc-iqr{justify-content:flex-end} /* EVERY NUMERIC COLUMN IS RIGHT-SET, INCLUDING THE RATE, WHICH IS WHAT SPLITTING THE CELL BOUGHT. While the rate and its interval shared a cell the rate had to be left-set with the percentage right-set inside a 46px sub-track, because right-setting the compound cell would have aligned the interval's closing bracket and let the percentages wobble by a character -- on the most scanned column of the table. In its own track the rate simply reads down its last digit, which is the rule the workaround existed to approximate. */ [data-atlas] .at-dc-rate{justify-content:flex-end} /* NO HEADER BAND. The column heads are ruled, not filled: one hairline in the surface's strongest ink and nothing else. A filled band puts a block of tone between the question and the first rate, which is the only thing in this column that should ever be a block. */ [data-atlas] .at-deck-head > .at-dc{ min-height:var(--at-row-head-h); font-family:var(--at-mono);font-size:var(--at-t5);font-weight:400; letter-spacing:1.1px;text-transform:none; color:var(--t3); background:none; border-bottom:1px solid var(--t1); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* NO FILLED GROUP BANDS EITHER. A group is a label and its denominator on a line of its own, at the apparatus step, with no rule under it -- the rows beneath carry their own hairlines and a second rule above the first of them reads as a table inside a table. */ [data-atlas] .at-deck-group > .at-dc{ min-height:26px;align-items:flex-end;padding-bottom:1px; font-family:var(--at-mono);font-size:var(--at-t5);font-weight:400; letter-spacing:1.2px;text-transform:uppercase; color:var(--t1); background:none; border-bottom:0; } [data-atlas] .at-deck-group > .at-dc-count{ font-family:var(--at-sans);font-style:italic;font-size:var(--at-t3); letter-spacing:0;text-transform:none;color:var(--t3); } [data-atlas] .at-deck-data > .at-dc{min-height:29px;border-bottom:1px solid var(--rule)} /* A ROW IS PRESSABLE, AND THE PRESS IS THE ONLY THING A HOVER SAYS. The lens that will read it is PR 3; what is here is the affordance and nothing behind it. */ [data-atlas] .at-deck-data:hover > .at-dc{background:var(--chrome-hi)} /* THE OUTCOME CELL holds the class hairline, the mark and the name, in that order. The mark's slot is reserved whether or not a mark is present, so a qualified row and an unqualified one start their names at the same x -- a name that shifts sideways when a status appears reads as a different row. THE NAME IS SERIF AT 14, the same family and step as the question. Source Serif carries the question and every outcome name; mono carries every figure. Two families, and a reader can tell which of the two kinds of thing they are reading without reading it. */ [data-atlas] .at-dc-outcome{ font-family:var(--at-sans);font-size:var(--at-t2);color:var(--t1);gap:var(--at-s2); justify-content:flex-start; } [data-atlas] .at-dc-outcome .at-mark{ flex:none;width:11px;text-align:center;font-family:var(--at-mono); font-size:var(--at-t5);color:var(--t3); } /* THE NAME WRAPS; IT DOES NOT ELLIPSISE. `Central America · ≥64 KT` measures 162 against the 135 this track leaves after the indent at the narrow end of the ladder, where no distribution of the five columns holds it on one line -- so the question is only which way it gives. An ellipsis truncates the ROW'S OWN IDENTITY, and `Central Ame…` beside a rate is a figure whose subject the reader has to hover to learn. A second line costs 11px of a row whose 29 is a MINIMUM by construction, and costs it on two rows of eighteen. */ /* `break-word`, NOT `anywhere`: a word is broken only when it cannot fit a line BY ITSELF, so the wrap happens at the spaces every name has -- `Central America ·` / `≥64 KT` -- and `Unattributed` is never served as `Unattribute` / `d`. */ [data-atlas] .at-dc-name{min-width:0;overflow-wrap:break-word;hyphens:none} /* EVERY NUMBER IS MONO AT THE VALUE TOKEN, which is the floor: nothing numeric goes below 12. */ [data-atlas] .at-val{font-family:var(--at-mono);font-size:var(--at-fs-value);color:var(--t1)} [data-atlas] .at-dc-int .at-val,[data-atlas] .at-dc-vs .at-val, [data-atlas] .at-dc-med .at-val,[data-atlas] .at-dc-iqr .at-val{color:var(--t2)} /* THE SCOPE COUNTS, ON THE REFUSAL LINE THEY QUALIFY. `nowrap` was right while this sat in an 84px numeric cell and had to stay on one line to be read as a figure; on a sentence line it is a measured phrase, and held to one line it ran off the right of a 390px screen. It wraps. */ [data-atlas] .at-need{ font-family:var(--at-mono);font-size:var(--at-fs-label);color:var(--t3); margin-left:var(--at-s1);min-width:0;overflow-wrap:break-word; } /* A SLOT IS CONTENT. The dash means "the archive has no value here", which is a statement, so it is held to the same contrast bar as the value it replaces and never dimmed into a hairline. */ [data-atlas] .at-slot{font-family:var(--at-mono);font-size:var(--at-fs-value);color:var(--t3)} [data-atlas] .at-isarchive{font-family:var(--at-sans);font-size:var(--at-fs-row);color:var(--t3)} [data-atlas] .at-reached,[data-atlas] .at-notreached{ font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:var(--at-tr-label); color:var(--t2); } /* STATUS IS A LINE UNDER ITS ROW, AT EVERY WIDTH, AND NO LONGER A TRACK. * * WHY IT WAS PROMOTED. This treatment already existed twice -- below 1340 with a comparison on * screen, and below 480 -- each time for a width that could not hold six tracks. The reason it * is now unconditional is not width. It is that a 14-term controlled vocabulary set at 9.5px in * the rightmost, most-droppable track is the least legible thing on a row whose whole content, * when it refuses, IS the qualification; and that retiring the track is what pays for the * comparison track being RESERVED at rest, which is what stops the ledger's measure -- and with * it `--at-plate-avail`, the stage, and the camera -- moving when a condition arrives. * * NOTHING IS HIDDEN AND NOTHING IS ABBREVIATED. The cell is emitted on every row, the head's and * the group rows' included, and spans every track. That uniformity is load-bearing: the deck's * rows are `display:contents`, so the cells are auto-placed onto one shared grid in document * order and every row must contribute the same number of items. `display:none` on the empty ones * removes them from that flow and the next row's outcome name lands in whatever column the last * row stopped at -- measured, the Category 1 name was placed in a 0px track and the deck's * columns walked out of alignment one row at a time. So the empty ones stay, at zero height, * taking no line and no rule. * * check-responsive-matrix draws exactly one exception for a cell leaving the line and this is * it: a cell may do so only by spanning every track and sitting below its row's other cells. */ [data-atlas] .at-deck .at-dc-status{ grid-column:1/-1;justify-content:flex-start;min-height:0;padding:0; } [data-atlas] .at-deck .at-dc-status:not(:empty){ padding:0 0 var(--at-s1) calc(11px + var(--at-s2)); } /* THE HEAD'S IS HIDDEN RATHER THAN REMOVED, for the same auto-placement reason and one more: a column head over a column that is no longer there is a promise the table does not keep. `visibility` rather than `display` keeps the cell in the shared flow, and check-atlas-instrument exempts an invisible element from its truncation sweep on exactly that basis. */ [data-atlas] .at-deck-head .at-dc-status{visibility:hidden} /* STATUS: one ink, never coloured, never a score. The whole argument for a single ink is that a coloured status becomes a verdict -- red for refused reads as an error, and a refusal is not an error. It is left-set against the row's right edge so the words start on one line. */ [data-atlas] .at-dc-status{ justify-content:flex-start; font-family:var(--at-mono);font-size:var(--at-t5);font-weight:400; letter-spacing:1.1px;color:var(--t2); /* AND IT WRAPS, FOR THE REASON THE NAME DOES. `BASE RATE ONLY` measures 96 against a 72 track, and a status is the sentence a refused row says INSTEAD of a rate: `BASE RATE O…` is a qualification the reader cannot read, which is the one failure mode a status column exists to prevent. Two lines of 9.5 is 21px inside a 29px row and costs nothing at all. `break-word`, NOT `anywhere`, AND THE TRACK FITS THE LONGEST WORD. `anywhere` breaks at any character it likes, so `CONDITIONED ON` in a 72px track came out as `CONDITIONE` / `D ON` -- a published status word cut in half, which is not a smaller version of the word. The track is now the width of `CONDITIONED`, the longest single word any status prints, so every one of them breaks at its own space or not at all. */ min-width:0;overflow-wrap:break-word;line-height:1.15; } /* THE TWO RAMPS, RESOLVED PER SHELL. * * The dark shell paints the cartographic ink itself -- the chrome and the stage are close enough * in tone that the plate's ramp reads on both. The light shell CANNOT: #f2c14e is 1.5:1 on paper, * and no amount of stylesheet can rescue a Cat 2 nobody can see. So paper gets the derived echo, * whose seven values are computed against contrast, adjacent separability and monochrome * ordering, and pinned in scripts/check-atlas-adherence.mjs against these very declarations. */ [data-atlas]{ --barink-td:#9aabbf; --barink-ts:#8cbdea; --barink-cat1:#4fc3f7; --barink-cat2:#f2c14e; --barink-cat3:#ee7a1f; --barink-cat4:#ef5350; --barink-cat5:#9b7bf0; } /* THE CLASS INK IS RESOLVED ONCE, BY CLASS, AND THE HAIRLINE READS IT. `data-bar-class` is the same attribute the bar carried and it still names the same seven classes; what changed is the MARK that resolves it -- a 3px tick inside the outcome cell rather than a 110px track of its own. The per-shell ramps above are untouched, which is what keeps the paper derivation the adherence gate verifies the one the light shell actually paints. */ [data-atlas] [data-bar-class="td"]{--bar:var(--barink-td)} [data-atlas] [data-bar-class="ts"]{--bar:var(--barink-ts)} [data-atlas] [data-bar-class="cat1"]{--bar:var(--barink-cat1)} [data-atlas] [data-bar-class="cat2"]{--bar:var(--barink-cat2)} [data-atlas] [data-bar-class="cat3"]{--bar:var(--barink-cat3);width:4px} [data-atlas] [data-bar-class="cat4"]{--bar:var(--barink-cat4);width:4px} [data-atlas] [data-bar-class="cat5"]{--bar:var(--barink-cat5);width:4px} /* THE ROW'S OWN SENTENCE, spanning every column because it qualifies the whole row. Never an alert box, never a tint, never a coloured background -- a refusal is part of the argument and not an error in it, and a tinted panel is how a reader learns to skip one. */ [data-atlas] .at-deck-say{ grid-column:1/-1; display:flex;align-items:baseline;gap:var(--at-s2);flex-wrap:wrap; padding:0 0 var(--at-s2) calc(11px + var(--at-s2)); border-bottom:1px solid var(--rule); font-size:var(--at-fs-row);line-height:1.45; } [data-atlas] .at-say-text{color:var(--t2)} [data-atlas] .at-say-remedy{color:var(--t3)} /* THE KICKER, NOT A BOLD RUN. `A LIMIT OF THE RECORD` and `YOU CAN CHANGE THIS` classify the refusal that follows them, which is the same job the ledger's own `GAPS THE ARCHIVE RECORDED` does at its foot — so they are set the same way, in mono at the frame's smallest step with the frame's tracking, rather than as the serif sentence shouted in bold. The words are unchanged and the element is still a ``: what a screen reader announces does not move. */ [data-atlas] .at-say-remedy strong,[data-atlas] .at-ref-k{ font-family:var(--at-mono);font-size:var(--at-t5);letter-spacing:1.1px; font-weight:400;color:var(--t3);margin-right:var(--at-s1); } /* SEE THE EVIDENCE IS A LINK, NOT A CHIP. A bordered box on an accent ground is dashboard furniture; the instrument's other three ways out — CALIBRATION, PROVENANCE, CITE — are words on a hairline, and a refusal's evidence is the same kind of offer. */ [data-atlas] .at-say-link,[data-atlas] .at-ref-link{ font-family:var(--at-mono);font-size:var(--at-t5);letter-spacing:1.1px; background:transparent;border:0;border-bottom:1px solid var(--rule-2); color:var(--accent);padding:0 0 1px;cursor:pointer; } [data-atlas] .at-say-link:hover,[data-atlas] .at-ref-link:hover{border-bottom-color:var(--accent)} /* ─── a refusal, in the marginal-rule grammar this file already had ──────────────────────── * * ONE REFUSAL IDIOM, NOT TWO. `.at-ref` above is the Atlas's own: a hairline down the left and * `auto 1fr`, the way a journal sets a caveat. The Refusal component used to ignore it and draw * a card instead — a 1px border all round, a rounded corner, a `color-mix` wash of the state's * own hue, a 3px signal bar and a bold uppercase title in `--neg` or `--warn`. Every one of * those is a device the frozen frame does not own, and set that way a refusal reads as an ERROR * beside the table rather than as the part of the argument that makes the table worth believing. * So the component joins the grammar that was already here, and these rules only say what goes * in its two columns. * * THE RULE IS DASHED WHERE THE REFUSAL IS IRREDUCIBLE — solid where a different question would * dissolve it, dashed where nothing the reader can build will. That is the one distinction the * three tones were carrying that a reader can act on, and it is now drawn in the frame's own * material rather than in a second palette. */ [data-atlas] .at-ref-hard{border-left-style:dashed} [data-atlas] .at-ref-compact{margin:6px 0} /* The mark keeps the rule's own column, so a stack of refusals aligns down its titles. */ [data-atlas] .at-ref-mark{ font-family:var(--at-mono);font-size:var(--at-t5);color:var(--t3); width:12px;text-align:center;line-height:1.5; } /* BOTH COLUMNS MAY SHRINK. `.at-ref` is a grid inside a flex block inside the ledger, and a grid item's automatic minimum is its CONTENT -- so a long unbroken reason held the whole block at its own measure and pushed a 390px shell to 430. Measured on the env-lens refusal. */ [data-atlas] .at-ref{min-width:0} [data-atlas] .at-ref-body{min-width:0} [data-atlas] .at-ref-detail,[data-atlas] .at-ref-remedy, [data-atlas] .at-ref .at-why{overflow-wrap:break-word} [data-atlas] .at-ref-head{ display:flex;align-items:baseline;gap:var(--at-s2);flex-wrap:wrap;min-width:0; font-family:var(--at-mono);font-size:var(--at-t5);letter-spacing:1.1px;color:var(--t3); } [data-atlas] .at-ref-title{color:var(--t2);flex:none} [data-atlas] .at-ref-subject{flex:0 1 auto;min-width:0;overflow-wrap:break-word} [data-atlas] .at-ref-counts{margin-left:auto;flex:none;color:var(--t2)} /* THE ARCHIVE'S OWN SENTENCE AND THE REMEDY ARE ONE VOICE, in the serif the rest of the instrument reads in, at the step the pinned limits use. */ [data-atlas] .at-ref-detail,[data-atlas] .at-ref-remedy{ font-family:var(--at-sans);font-size:var(--at-t3);line-height:1.45;color:var(--t2); margin-top:5px; } [data-atlas] .at-ref-link{margin-top:6px} [data-atlas] .at-ref-more{margin-top:4px} [data-atlas] .at-ref-more > summary{ font-family:var(--at-mono);font-size:var(--at-t5);letter-spacing:1.1px; color:var(--t3);cursor:pointer; } [data-atlas] .at-ref-more > summary:hover{color:var(--t2)} /* THE ONE PERMITTED FILL ON THIS DECK. Issue 15 and nothing else: a row whose numerator is the reader's own selected storm. Everything else here is separated by hairlines alone. */ [data-atlas] .at-deck-self > .at-dc{background:color-mix(in srgb,var(--accent) 9%,transparent)} [data-atlas] .at-dc-fold{ justify-content:center; font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:var(--at-tr-label); background:transparent;border:0;border-bottom:1px solid var(--rule-2); color:var(--accent);cursor:pointer;text-transform:uppercase; } /* ─── the condition strip ───────────────────────────────────────────────────────────────── * * THREE ZONES, ALWAYS RENDERED, AND THE RULES ARE THE GRAMMAR. Genesis-side carries a 2px accent * rule, outcome-side a 2px muted-accent rule, scope a 1px hairline -- three weights a reader can * tell apart at a glance and without reading a word, which is the property the gate asserts with * the prose covered. The outcome-side rule is the SAME ink the deck uses for a CONDITIONED ON * row, and that is deliberate: it is how a reader connects a missing rate to the condition that * removed it, across two different parts of the surface. * * SCOPE IS FIXED-WIDTH because it holds at most two short tokens and should not take width from * the two zones that carry the question. */ [data-atlas] .at-strip{ display:flex;align-items:stretch;gap:var(--at-s4); padding:0 var(--at-s5); min-width:0;overflow:hidden; background:var(--chrome-hi); border-bottom:1px solid var(--rule-2); } /* AN EMPTY ZONE IS A BUTTON ELEMENT, so every UA default it would otherwise bring -- an outset border on three sides, a centred label, a system font, a grey ground -- is reset here. The zone rules below then apply identically to both tags, which is what lets the boundary gate go on reading one selector. */ [data-atlas] .at-zone{ display:flex;align-items:center;gap:var(--at-s2); min-width:0;flex:1 1 auto; padding:0 var(--at-s2) 0 var(--at-s2); border:0;border-radius:0;background:transparent; font:inherit;color:inherit;text-align:left; } [data-atlas] .at-zone-accent{border-left:2px solid var(--accent)} [data-atlas] .at-zone-muted{border-left:2px solid var(--accent-2)} [data-atlas] .at-zone-hair{border-left:1px solid var(--rule-2);flex:0 0 clamp(250px,19vw,290px)} /* THE UNSET ZONE, AS A TINT RATHER THAN AS A DASHED BOX. Two per cent of the zone's own rule ink, so each empty zone is faintly the colour of the boundary it belongs to and the three remain three distinguishable shapes with every word covered -- which is the property the strip gate measures. Hover and focus lift the tint and bring the hint to full text ink, so an affordance a reader can miss becomes one they cannot: the whole zone responds, not eleven pixels of heading. */ [data-atlas] button.at-zone{cursor:pointer;transition:background-color .1s linear} [data-atlas] .at-zone-empty{background:color-mix(in srgb,var(--t3) 5%,transparent)} [data-atlas] .at-zone-accent.at-zone-empty{background:color-mix(in srgb,var(--accent) 6%,transparent)} [data-atlas] .at-zone-muted.at-zone-empty{background:color-mix(in srgb,var(--accent-2) 7%,transparent)} [data-atlas] button.at-zone-accent:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)} [data-atlas] button.at-zone-muted:hover{background:color-mix(in srgb,var(--accent-2) 16%,transparent)} [data-atlas] button.at-zone-hair:hover{background:color-mix(in srgb,var(--t3) 12%,transparent)} [data-atlas] button.at-zone:hover .at-zone-hint, [data-atlas] button.at-zone:focus-visible .at-zone-hint{color:var(--t1)} [data-atlas] button.at-zone:hover .at-zone-label, [data-atlas] button.at-zone:focus-visible .at-zone-label{color:var(--t1)} [data-atlas] button.at-zone:focus-visible{outline:1px solid var(--accent);outline-offset:-1px} /* RESET QUERY, AT THE FAR RIGHT, AND ONLY WHEN THERE IS A QUERY TO RESET. The same text-button treatment as the header's two ways out, because it is a third one -- and deliberately NOT the accent: clearing a question a reader has just built is the one control on this row that should not invite a stray click. */ [data-atlas] .at-strip-reset{ margin-left:auto;flex:none;align-self:center; font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:var(--at-tr-label); color:var(--t3);background:transparent;border:0;border-bottom:1px solid var(--rule-3); padding:0 0 1px;cursor:pointer; transition:color .1s linear,border-color .1s linear; } [data-atlas] .at-strip-reset:hover{color:var(--t1);border-bottom-color:var(--accent)} [data-atlas] .at-strip-reset:focus-visible{outline:1px solid var(--accent);outline-offset:2px} [data-atlas] .at-zone-label{ flex:none; font-family:var(--at-mono);font-size:var(--at-fs-label);font-weight:600; letter-spacing:var(--at-tr-label);text-transform:uppercase; color:var(--t3);background:transparent;border:0;padding:0;cursor:pointer; } [data-atlas] .at-zone-label:hover{color:var(--t1)} [data-atlas] .at-zone-items{display:flex;align-items:center;gap:var(--at-s2);min-width:0;overflow:hidden} /* THE EMPTY STATE IS THE BOUNDARY, and the tint above is what carries it. The hint says what the zone WOULD hold -- a heading over nothing tells a reader the zone exists; this tells them what it is for -- and it no longer draws a dashed rectangle of its own, which read as a drop target and framed one idea twice. */ [data-atlas] .at-zone-hint{ font-family:var(--at-sans);font-size:var(--at-fs-row);color:var(--t3); padding:1px 0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; transition:color .1s linear; } [data-atlas] .at-cond{ display:inline-flex;align-items:baseline;gap:var(--at-s1); border:1px solid var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); padding:1px var(--at-s2);min-width:0; } [data-atlas] .at-zone-muted .at-cond{ border-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 16%,transparent); } [data-atlas] .at-zone-hair .at-cond{ border-color:var(--rule-2);background:transparent; } [data-atlas] .at-cond-k{ font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:var(--at-tr-label); color:var(--t3);flex:none; } [data-atlas] .at-cond-v{ font-family:var(--at-sans);font-size:var(--at-fs-row);color:var(--t1); min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } [data-atlas] .at-cond-x{ font-family:var(--at-mono);font-size:var(--at-fs-label); background:transparent;border:0;color:var(--t3);cursor:pointer;padding:0 0 0 2px;flex:none; } [data-atlas] .at-cond-x:hover{color:var(--t1)} [data-atlas] .at-lastedit{ display:flex;align-items:center;gap:var(--at-s1);flex:none;margin-left:auto; font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:var(--at-tr-label); } [data-atlas] .at-lastedit-k{color:var(--t3)} [data-atlas] .at-lastedit-v{color:var(--t2)} /* WHAT CHANGED, at the deck's foot. The label is not decoration and is not optional: a delta read as an effect is causal language the archive cannot support, so the denial travels with the numbers rather than living in documentation. */ [data-atlas] .at-changed{ display:flex;align-items:baseline;gap:var(--at-s3);flex-wrap:wrap; padding:var(--at-s2) var(--at-s5); border-top:1px solid var(--rule-2); font-family:var(--at-sans);font-size:var(--at-fs-row);color:var(--t2); } [data-atlas] .at-changed-label{ font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:var(--at-tr-label); color:var(--t3);flex:none; } [data-atlas] .at-changed-line{color:var(--t2)} /* ─── the inspector, and its pinned foot ────────────────────────────────────────────────── * * A FLEX COLUMN WHERE ONLY THE MIDDLE SCROLLS. The masthead is fixed, the whole-life blocks take * what height is left and scroll inside it, and the bridge is pinned at the foot. * * WHAT IS ACTUALLY LOAD-BEARING IS `overflow-y:auto`, AND THAT IS NOT THE OBVIOUS ANSWER. * * The natural claim is that `min-height:0` is what lets the body shrink -- a flex item's default * minimum is its CONTENT, so without it the column should grow past the dock and push the pinned * foot off the bottom. That claim is wrong here, and the gate is what established it: seeding * `min-height:auto` changes nothing, because a flex item that is a SCROLL CONTAINER has its * automatic minimum resolve to zero already. The overflow declaration is doing the work. * * `min-height:0` stays anyway, and deliberately: it is what keeps this correct on the day the * overflow is changed for some unrelated reason. It is belt-and-braces rather than the belt -- * which is worth writing down, because a comment that misnames the load-bearing line teaches the * next reader to protect the wrong declaration. * * scripts/check-inspector-bridge.mjs drives the body to its full scroll extent at three content * sizes and requires the bridge to stay on screen, so a regression fails a check rather than * quietly hiding the surface's main affordance. */ [data-atlas] .at-inspector{ display:flex;flex-direction:column; min-height:0;height:100%; border-left:1px solid var(--rule-2); background:var(--chrome); } /* THE MASTHEAD IS BOUNDED, AND THAT IS WHAT KEEPS THE BRIDGE PINNED. * * It was `flex:none` -- an unshrinkable block whose height is whatever the storm's name, its * coordinate line, its citation and its provisional flag come to. Measured at 1440x900 that is * 226px of a 412px dock, or 55%, and the bridge below it may take 46%: 101%, so the bridge hung * 4px past the inspector that pins it. The failure scales with how short the plate row is, and * the plate row is exactly what a narrower or shorter workstation takes height out of. * * Capped at 42% with its own scroll, which leaves 46 for the bridge and at least 12 for the * middle. The storm's NAME is the first line of the block, so it is on screen at every height; * what a very short dock scrolls away is the citation beneath it, and the citation is also the * URL in the address bar. */ [data-atlas] .at-insp-head{ /* A FLOOR AS WELL AS A CAP, AND THE FLOOR IS THE POINT. `flex:0 1 auto` with `min-height:0` is permission to shrink to NOTHING, and flexbox took it: measured at 1440x900 the masthead was 29px tall around 226px of content, so the block showed its kicker and clipped the storm's NAME -- the one fact the whole inspector is about -- into a scroll nobody would think to perform. Capping it stopped the bridge overflowing and started this instead. The floor is the identity: kicker, name, and the season/basin/id line beneath it. Below that the squeeze goes to the BODY, which is the block the design nominates as the one that scrolls; the bridge keeps its 46% and never moves. */ flex:0 1 auto;min-height:96px;max-height:42%; overflow-y:auto;overscroll-behavior:contain; } /* THE FLOOR IS ONE LINE TALLER WHEN THERE IS A SOURCE STATE TO DECLARE, and only then. * * The 96px floor above is exactly kicker + name + id line, measured. A storm whose record is * OPERATIONAL, PROVISIONAL or missing its live continuation carries a fourth identity fact -- * which record this is, and how fresh -- and it is the fact the panel now exists to answer. At * 1440x900 the head is squeezed to its floor (96 visible pixels around 144 of content, because * the BODY's flex basis is its full 2.5k scroll height and the shrink lands on both), so a badge * outside the floor is a badge inside a scroll box nobody opens. That is where it was, and it is * the one element that must not be. * * 144px = the 96 floor plus the measured 48 of badge, freshness line and their margins. * * SCOPED TO THE STATES THAT HAVE ONE. A post-analysed storm renders no badge, so raising its * floor would take 41px off the body of all 3,958 of them to reserve space for nothing. */ [data-atlas] .at-inspector:not([data-source-state="archive"]) .at-insp-head{min-height:144px} /* AND THE BRIDGE GIVES BACK WHAT THE HEAD TOOK, in the same states and for the same reason. * * The 46% below was set when the head's floor was 96px: head 96 + bridge 188 left the body 124 * visible pixels on a 408px dock, which is one section head and one headline figure. Raising the * floor to 144 without touching this would have left 76 -- enough to clip the figure the panel * exists to show, so a reader would have met "115" with its unit and class cut off. 40% of 408 * is 163, and 144 + 163 leaves the body its 101. * * The bridge scrolls internally and its content is 263px in this state, so it was already * showing part of itself at 188; at 163 it shows slightly less of the same scroll. What the * bridge must never lose is being ON SCREEN AT ALL WITHOUT SCROLLING, which is what * scripts/check-inspector-bridge.mjs asserts, and which a cap of any size preserves. */ [data-atlas] .at-inspector:not([data-source-state="archive"]) .at-insp-bridge{max-height:40%} [data-atlas] .at-insp-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain} [data-atlas] .at-insp-bridge{ flex:none; border-top:2px solid var(--accent); background:var(--chrome-hi); padding:var(--at-s2) var(--at-s6) var(--at-s4); max-height:46%;overflow-y:auto;overscroll-behavior:contain; } /* ─── THE INSTRUMENT ────────────────────────────────────────────────────────────────────── * * FOUR ROWS, AND ONLY THE BODY IS ELASTIC. * * auto head the question at 30px and the cohort line under it * 1fr body plate left, evidence ledger right — the only elastic row * auto transport 40 with a subject, 0 without * auto colophon wordmark, scale, stamps, the three ways out * * WHAT CHANGED FROM THE STACKED SHELL, AND WHY. The plate spanned the width and the evidence sat * underneath it, which meant a reader could see the map or the answer but not both without * moving their eye the height of a monitor. `5c` puts them side by side: the plate takes the * left column and the ledger a fixed measure on the right, and simultaneity — reading a rate * while looking at what is drawn — is the whole architecture rather than a happy accident of * viewport height. * * THE THREE FIXED ROWS BECAME TWO, AND BOTH ARE `auto`. The identity strip is gone from the top * (it is the colophon now) and the condition strip is gone entirely (it is the sentence now), so * there is nothing left to measure in pixels: the head is as tall as a 30px question needs, one * line or three, and the body takes what is left. That is also what makes the head safe to let * wrap — a question that grows takes its height from the BODY, and the plate's own bounds then * decide how much of that the map may keep. * * THE LEDGER MEASURE IS ONE EXPRESSION AND IT HITS BOTH FROZEN NUMBERS. * `clamp(300px, 33.75vw, 620px)` with 40px page padding and a 40px gutter gives: * * 1440 → ledger 486, plate 834 (5c's measured plate box, exactly) * 1920 → ledger 620, plate 1180 (turn 4's stated plate at 1920, exactly) * 900 → ledger 300, plate 468 (side by side is still simultaneous) * * A fixed 486 would have given a 1314px plate at 1920 and a ledger with 300px of slack beside a * map nobody asked to be wider; a pure percentage would have broken the ledger below 900. The * clamp is the two frozen measurements and the floor that keeps the table readable, and nothing * in it is a number chosen to make one screenshot look right. * * THE FLOOR IS 486, WHICH IS THE FROZEN TABLE'S OWN MEASURE RATHER THAN A ROUND NUMBER. * 33.75vw is 486 at 1440 and falls below it on every narrower screen, and what the percentage * gives up first is the right-hand column -- so between 900 and 1387 a percentage-only measure * put the STATUS of a refused row off the right-hand edge of a table the reader has to drag * sideways to finish reading. A refused row that says so off-screen has not said so. So the * measure never goes below the five resting tracks and their gutters, and what pays for it in * that band is the plate, which is the same answer this file already gives for the comparison * column below. 5c's 834 at 1440 and 1180 at 1920 are the clamp's own endpoints and are * untouched: the floor binds only where 5c's own measure had already run out. */ /* THE INSTRUMENT IS A PAGE WITH A DECLARED FIRST BAND, NOT A PANE. * * WHAT WAS HERE, AND WHAT IT COST. One grid of exactly four rows summing to the viewport, with * the whole evidence base inside the second one's right-hand column. Measured on the deployed * surface at 1440 with one genesis-radius condition: 3,457px of deck inside a 673px window, a * 486px measure for a table of six columns, and the refusal sentence repeated after every row it * governed. The answer to "what happened next" was three scroll-lengths inside a rail. * * WHAT REPLACES IT. The first band is declared from the viewport -- plate left, an eight-row * answer right -- and the page CONTINUES below it with the complete matrix at full width, the * limits grouped once, and the apparatus collapsed. So: * * .atlas-above min-height: 100vh - peek. Head and band, and nothing else. * .atlas-plate-row the band. One grid row of `1fr` inside that box, which is what makes the * plate and the answer terminate on the same baseline. * .atlas-evidence below it, in flow, at page width, scrolling with the page and not itself. * * THE PEEK IS NOT DECORATION. 86px of the matrix's own heading is left showing under the band at * the resting viewport, so what is below the fold is advertised rather than guessed at. It is the * difference between "this is the answer, and here is the evidence" and a page that appears to * end at the plate. */ [data-atlas].atlas-shell.atlas-instrument{ display:block; min-height:100vh; background:var(--chrome); --at-pad:40px; --at-gap:24px; /* THE ANSWER'S MEASURE, DECLARED RATHER THAN CLAMPED. The contract fixes the split: the plate is 60-62% of the usable width at 1920 and 57-59% at 1440, because the Atlas announces itself as a geographic instrument before it announces itself as a table. A fixed measure at each of the two desktop bands is what holds that, and scripts/check-atlas-contract.mjs measures the resulting percentages rather than trusting the arithmetic here. */ --at-answer:559px; --at-peek:86px; --at-tport:0px; /* The plate's available width: the band less the page padding, the gutter and the answer. */ --at-plate-avail:calc(100vw - 2 * var(--at-pad) - var(--at-gap) - var(--at-answer)); } @media (min-width:1700px){ [data-atlas].atlas-shell.atlas-instrument{--at-gap:34px;--at-answer:700px} } /* THE DECLARED BAND, AND IT IS A BOX RATHER THAN A NUMBER. The head's height is whatever the question wraps to -- two lines at 1920, three when a cohort sentence is long -- so the band is the `1fr` row of a container sized from the viewport instead of the viewport less a frozen chrome constant. A longer question shortens the band and shows less of the matrix under it; it can never push the band off the screen, and there is no measurement to re-freeze. */ [data-atlas].atlas-instrument .atlas-above{display:block} /* 40px only when the transport actually has something in it. The row exists either way; an empty one must not reserve height the plate could be using. */ [data-atlas].atlas-shell.atlas-instrument:has(.atlas-transport > *){--at-tport:40px} /* THE LEDGER TOOK ITS SIXTH COLUMN OUT OF THE PLATE. IT NO LONGER HAS A SIXTH COLUMN. * * WHAT WAS HERE. `:has(.at-dc-vs){--at-ledger:clamp(486px,41vw,700px)}` -- the measure widened * from 33.75vw the moment the deck rendered a comparison, so that six tracks would fit. The * reasoning was sound and the alternatives it rejected are still the right things to reject: the * outcome name may not be ellipsised to pay for a secondary column, and a refusal that says so * off the right-hand edge of a sideways scroll has not said so. What it got wrong was where the * width came from. It came from the plate. * * WHAT THAT COST, MEASURED. `--at-plate-avail` is computed from `--at-ledger`, and the stage's * height bounds are computed from `--at-plate-avail`, so one condition resized the map. At 1440 * the plate went 834x499 -> 730x437; at 1920, 1180x707 -> 1100x659; at 1680 it lost 23% of its * area. And because the box changed while the view was still AT the aperture, settle() correctly * re-derived the aperture against the new box and took the CAMERA with it -- zoom 3.75 -> 3.50 * and the centre 3.2 degrees north at 1920, with the reader's hands nowhere near the map. A * cohort edit is not a camera command, and the surface answered one as though it were. * * WHAT REPLACED IT. Nothing here: the fix is in the deck. STATUS stops being a track and becomes * the line under the row it governs at every width -- which it already was below 1340 and below * 480 -- and the comparison track is RESERVED at rest rather than summoned. Five tracks and four * gutters measure 468 against the 486 the resting screen was always given, so the sixth column * this rule bought is a column the ledger no longer needs, and the measure below is now the only * one this surface has in any state. * * settle() IS UNTOUCHED, DELIBERATELY. Its re-derivation is right -- an aperture is defined by a * frame, a clamp and the plate's box -- and pan-compensating instead once put HOME and the * opening view measurably apart. With the box no longer moving, that branch re-derives the same * aperture against the same rectangle and is inert. scripts/check-atlas-stability.mjs asserts * exactly that, in both the at-aperture and the post-drag branch. */ [data-atlas].atlas-shell.atlas-instrument > *{min-width:0} /* ─── the head: the question, and the line that sizes it ────────────────────────────────── */ [data-atlas] .at-head{ flex:none;padding:30px var(--at-pad) 0;min-width:0; } /* THE QUESTION WINS THE PAGE, AND 30px IS WHAT THAT COSTS. * * It was 19px on one clipped line beside a 22px cohort numeral, which put a NUMBER and a * QUESTION at the same optical weight and let the number win — the row read as a figure with a * caption rather than as a question with its population. At 30px in the serif, with the mono * count demoted to 11.5 underneath, the hierarchy states itself: this is the thing being asked, * and that is how many storms it is asked of. * * AND IT WRAPS, WHERE IT USED TO ELLIPSISE. A question that ends in "…" is a question a reader * cannot act on, and the reason it was ellipsised — that a second line would take height from * the plate — is answered by the row model above: the head is `auto`, the body is `1fr`, and the * plate's own aspect bounds decide what the map keeps. `58ch` is the measure, not a pixel width, * so the line length stays readable at every viewport and the wrap point moves with the type. */ [data-atlas] .at-question-text{ margin:0;min-width:0;max-width:58ch; font-family:var(--at-sans);font-size:var(--at-fs-question);font-weight:400; line-height:1.24;color:var(--t1);letter-spacing:-.25px; white-space:normal;overflow:visible;text-overflow:clip;text-wrap:pretty; } /* THE PRESSABLE CLAUSE. A real button so it is in the tab order, answers Enter and Space and gets the focus ring; `display:inline` so it BREAKS WITH THE SENTENCE rather than sitting in it as an unbreakable box — an inline-block clause at 30px is what turns a 768px question into a horizontal scroll. */ [data-atlas] .at-clause{ display:inline;font:inherit;color:var(--t3); background:none;border:0;padding:0;margin:0;cursor:pointer; border-bottom:1px dotted var(--rule-3); transition:color .1s linear,border-color .1s linear; } [data-atlas] .at-clause:hover{color:var(--accent);border-bottom-color:var(--accent)} [data-atlas] .at-clause:focus-visible{outline:1px solid var(--accent);outline-offset:2px} /* THE BOUNDARY, IN INK AS WELL AS IN GRAMMAR — pairwise distinct, and each difference means * something a reader can act on. * * GENESIS-SIDE, SET accent, solid. It narrows the population and nothing else. * OUTCOME-SIDE, SET flag, solid. It narrows the population AND takes the conditioned * variable out of the evidence — a cohort defined by "reached Cat 4" * cannot report a Category 4 rate, because every member has one by * construction. The flag ink is this surface's "this costs you * something" colour everywhere else; it is the same claim here. * SCOPE, SET hairline, solid. It changes which RECORDS are eligible, not which * storms qualify. * ANY SIDE, UNSET dotted, in the neutral. An invitation is not a condition. * * scripts/check-condition-strip.mjs asserts the four are distinguishable from computed style * with the prose covered. A reader scanning a sentence reads its shapes before its words, and a * boundary that only exists once you have parsed a subordinate clause is a boundary that is * late. */ [data-atlas] .at-clause.at-zone-accent{color:var(--t1);border-bottom:1px solid var(--accent)} [data-atlas] .at-clause.at-zone-muted{color:var(--t1);border-bottom:1px solid var(--flag)} [data-atlas] .at-clause.at-zone-hair{color:var(--t1);border-bottom:1px solid var(--rule-3)} [data-atlas] .at-clause.at-zone-empty{color:var(--t3);border-bottom:1px dotted var(--rule-3)} /* THE REMOVAL RIDES BESIDE THE CLAUSE, NOT INSIDE IT. A × within the button that opens the editor would make removing one condition a coin flip against editing it. */ [data-atlas] .at-clause-x{ font-family:var(--at-mono);font-size:var(--at-t4);line-height:1; color:var(--t3);background:none;border:0;padding:0 0 0 3px;cursor:pointer; vertical-align:.15em; } /* PAINTED RATHER THAN WRITTEN, so the mark is not part of the question's own text. */ [data-atlas] .at-clause-x::after{content:"\00d7"} [data-atlas] .at-clause-pair{white-space:nowrap} [data-atlas] .at-clause-pair > .at-clause{white-space:normal} [data-atlas] .at-clause-x:hover{color:var(--neg)} /* ─── the cohort line ───────────────────────────────────────────────────────────────────── * * ONE PRIMARY HOME FOR THE POPULATION, IN ONE NEUTRAL WEIGHT. The count used to appear three * times on one screen — a 22px numeral beside the question, a 26px numeral in the deck's * preamble, and again in the plate's head band — and three renderings of one number make a * reader look for the difference between them. It is stated here, once, at 11.5px, and the * preamble that repeated it is gone. * * `SUFFICIENT` AND `BELOW SAMPLE` ARE THE SAME SIZE AS THE REST OF THE LINE and differ only in * ink. Whether the sample clears the gate is a fact about the cohort rather than a headline * about it — except when it does not clear, which is the one state where the cohort IS the * finding, and that is exactly where the ink change earns its keep. */ [data-atlas] .at-cohort{ display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;row-gap:4px; margin:13px 0 0;min-width:0; font-family:var(--at-mono);font-size:var(--at-fs-cohort);line-height:1.35; letter-spacing:.6px;color:var(--t3); } [data-atlas] .at-cohort-n{min-width:0} [data-atlas] .at-cohort-n em{font-style:normal;color:var(--t1)} [data-atlas] .at-cohort-ok{font-weight:400;letter-spacing:1.1px;color:var(--t2)} [data-atlas] .at-cohort-no{font-weight:400;letter-spacing:1.1px;color:var(--neg)} [data-atlas] .at-cohort-min{color:var(--t3)} /* SCOPE IS A CLAUSE TOO, IT SIMPLY BELONGS ON THIS LINE. Named-only and provisional-season handling change which RECORDS are eligible rather than which storms qualify, so the third zone sits with the count it qualifies rather than in the sentence it does not narrow. */ [data-atlas] .at-cohort-scope{ font:inherit;letter-spacing:inherit;background:none;padding:0;cursor:pointer;flex:none; color:var(--t3);border:0;border-bottom:1px solid var(--rule-3); } [data-atlas] .at-cohort-scope.at-zone-empty{color:var(--t3);border-bottom:1px dotted var(--rule-3)} [data-atlas] .at-cohort-scope:hover{color:var(--accent);border-bottom-color:var(--accent)} [data-atlas] .at-cohort-scope:focus-visible{outline:1px solid var(--accent);outline-offset:2px} [data-atlas] .at-cohort-acts{margin-left:auto;display:flex;align-items:baseline;gap:14px;flex:none} [data-atlas] .at-cohort-add{ font:inherit;letter-spacing:inherit;background:none;border:0;padding:0;cursor:pointer; color:var(--accent); } [data-atlas] .at-cohort-add:hover{text-decoration:underline} [data-atlas] .at-cohort .at-lastedit{display:flex;align-items:baseline;gap:6px;flex:none} [data-atlas] .at-cohort .at-lastedit-k{color:var(--t3);letter-spacing:1.1px} [data-atlas] .at-cohort .at-lastedit-v{color:var(--t2)} [data-atlas] .at-cohort .at-strip-reset{ font:inherit;letter-spacing:1.1px;background:none;border:0;padding:0;cursor:pointer; color:var(--t3);border-bottom:1px solid var(--rule-3); } [data-atlas] .at-cohort .at-strip-reset:hover{color:var(--neg);border-bottom-color:var(--neg)} /* ─── the body: plate left, ledger right ──────────────────────────────────────────────── */ [data-atlas].atlas-instrument .atlas-plate-row{ display:grid; grid-template-columns:minmax(0,1fr) var(--at-answer); gap:0 var(--at-gap); align-items:stretch; /* THE COLOPHON'S SEPARATION IS THIS ROW'S BOTTOM PADDING, NOT THE COLOPHON'S TOP MARGIN, and the difference is measurable. The shell is a grid whose rows must sum to the viewport, and scripts/check-plate-aperture.mjs proves that by summing the CHILDREN'S boxes -- a margin is in neither box, so 18px of it read as 18px of blank plane at every viewport. Padding on the elastic row costs the plate the same 18px and is inside a box the sum can see. */ padding:14px var(--at-pad) 16px; min-width:0;position:relative; /* THE BAND'S HEIGHT, DECLARED, AND BOUNDED AT BOTH ENDS. The viewport decides it, less the head and the peek; the plate's aspect caps it, so that a tall monitor shows more of the matrix rather than a taller map with a cropped opening view. It is a variable rather than a literal because the PLATE is derived from it too -- see the stage's declared height below -- and the two must be the same number by construction and not by two edits staying in step. */ --at-band-h:min( calc(100vh - var(--at-head-h) - var(--at-peek) - var(--at-tport)), calc(var(--at-plate-avail) / var(--at-plate-ar) + var(--at-fig-chrome))); /* `height`, AND IT IS THE ANSWER THAT DECIDES IT RATHER THAN THE CAPTION. `min-height` was tried here, so that chrome overrunning its reservation could grow the row instead of the map. It does -- and it also lets the ANSWER grow it, because eight rows have an intrinsic height and at 1280 that is 90px more than the band the aspect ceiling allows. Measured: the row went to 625.8 where the band declares 505.6, the plate kept its declared height, and the 129px difference was paper under the map. That is the defect this composition was opened to end, arriving from the other side. So the band is exactly the declared number, the answer distributes itself into it as it always did, and the plate is the band less the RESERVATION rather than less the measurement -- which is what makes the caption unable to move it either way. Chrome that overruns 120px overflows the band's foot by the overrun; it does not come out of the map. */ height:var(--at-band-h); } [data-atlas].atlas-instrument .atlas-stage-col{ grid-column:1;grid-row:1; display:flex;flex-direction:column;min-width:0;min-height:0; /* THE CAPTION APPARATUS QUERIES THE COLUMN IT IS SET IN. The head, the foot and Figure 1 are the stage's SIBLINGS -- the stage wraps exactly the plate -- so a `@container plate` query written on any of them resolved to no container at all and never matched: the aperture and the stroke note were not giving way at the widths the ladder names, they were being clipped. The column is the plate's width wherever the two share a row, which is every layout the ladder measures, and the on-plate rules keep resolving to the stage, their nearer container. */ container:plate / inline-size; } /* THE PLATE HEAD IS RESERVED TWO LINES, AND THAT RESERVATION IS THE APERTURE INVARIANT. It used to print the cohort count and the context count -- "306 COHORT · 3,885 CONTEXT" -- so a condition lengthened it, and below 1280 it took a second line; the counts have since moved to the cohort line and the caption, but the reservation is kept, because it is the invariant. The plate is what is left of the band after the figure's chrome, so an unreserved head means a CONDITION CHANGES THE MAP'S HEIGHT: measured at 1220, 288px of plate unconditioned against 272px with a genesis radius set, with the reader's hands nowhere near the camera. check-atlas-stability is what caught it. Two lines is what the longest supported head takes at the narrowest two-column width, and it costs 16px of plate at the wide ones -- the right side of that trade by a distance. */ [data-atlas].atlas-instrument .at-platehead{min-height:35px} /* THE ANSWER COLUMN. It is a flex column so the ladder can distribute the band's slack between its rows rather than bank it at the foot: a remainder under the answer is the same defect as a remainder under the plate, drawn on the other side of the gutter. */ [data-atlas].atlas-instrument .atlas-answer{ grid-column:2;grid-row:1; display:flex;flex-direction:column;min-width:0;min-height:0; } /* AND THE LADDER TAKES THE COLUMN. Without this the answer is content-height inside a full-height cell, and the difference is paper: measured 134px of it under the pointer line at 1920, which is the same defect as a plate that stops short of the band. */ [data-atlas].atlas-instrument .atlas-answer > .at-answer{flex:1 1 auto;min-height:0} /* THE PLATE'S HEIGHT, BOUNDED AT BOTH ENDS AND NOT CAPPED AT 500. * * WHY THE HARD CAP WENT, AND WHAT REPLACED IT. `--at-plate-hmax:500px` existed because the * stacked shell put the evidence UNDER the map: every pixel of plate height came straight out of * the deck, so surplus height on a tall monitor had to be stopped from becoming more ocean at * the expense of visible rows. Beside a ledger with its own full-height column that trade no * longer exists — plate height and row count are independent — and a 500px cap on an 834px plate * would have forced aspect 1.67 where 5c measures 1.44. * * The two ends that DO still mean something are unchanged, and they are the geometric ones: * * floor avail / ar-max the widest the plate may read. Past 3.2 a single East Pacific * track is a horizontal scratch and recurvature is unreadable. * ceiling avail / ar the tallest the archive's own frame can fill. Past 1.421 the * plate is taller than the geography has anything to put in it and * the surplus is empty latitude. * * At 1440 that gives 834/1.421 = 587 and the row has 653 to give, so the ceiling binds and the * plate lands at 587 — within a pixel of 5c's measured 580, from the archive's own frame rather * than from a number anybody typed. */ /* THE PLATE FILLS THE BAND, AND THE ASPECT CEILING IS WHAT PAID FOR IT. * * `max-height: avail / --at-plate-ar` capped the plate at the aspect the archive's own frame * fills, on the argument that a taller plate is showing empty latitude. That argument still * holds -- and under a declared band it costs more than it buys. At 1920 the ceiling puts the * plate at 662px inside an 812px band, and the 150px left over is beige under the map with the * answer column running past it: exactly the "the plate dies into beige" the composition exists * to end, reintroduced by a rule about aspect. So the plate takes the band, and the surplus is * ocean the frame does not fill rather than paper nothing fills. The floor stays: past * --at-plate-ar-max a single East Pacific track is a horizontal scratch. */ /* AND THE PLATE'S HEIGHT IS DECLARED, NOT WHAT IS LEFT OVER. * * THE DEFECT THIS ENDS. `flex:1 1 auto` made the plate the elastic member of the figure column, * so its height was the band less whatever the head, the legend row and the caption happened to * measure. Every one of those three is typeset, and the caption names the cohort count -- so a * condition could change how it wrapped, and the map would resize under a reader whose hands * were nowhere near the camera. It never fired locally because the caption took the same number * of lines in every state on this machine's fonts; CI, on fallback metrics, caught it as * 583x340.13 -> 583x336.13 when a season condition was added. A one-line caption makes that * rarer. Only a declared height makes it impossible. * * SO THE PLATE IS A PURE FUNCTION OF THE VIEWPORT AND THE TOKENS. `--at-band-h` less the chrome * reservation, and nothing in that chain is content: not a caption, not a font, not a cohort * count. `--at-fig-chrome` is a RESERVATION, not a measurement -- if the real chrome is smaller * the slack goes between the plate and the caption, which is pinned to the column's foot so no * paper is left under it; if the real chrome is larger the band grows and takes the answer * column with it. Neither case moves the map by a pixel. * * THE FLOOR IS UNCHANGED AND STILL BINDS FIRST. Past --at-plate-ar-max a single East Pacific * track is a horizontal scratch, so the plate never reads narrower than the frame can carry. */ [data-atlas].atlas-instrument .atlas-stage{ flex:none;min-width:0;position:relative;overflow:hidden; height:max( calc(var(--at-band-h) - var(--at-fig-chrome)), calc(var(--at-plate-avail) / var(--at-plate-ar-max))); } /* THE CAPTION TAKES THE SLACK, AT THE FOOT OF THE COLUMN. The reservation is a bound, so it is usually a little larger than the chrome actually is; banked at the bottom that difference is paper under the figure, which is the beige this composition was opened to remove. Pushed above the caption it is the figure's own white space, between the legend rule and the sentence that describes it, and the column still ends exactly where the answer does. */ [data-atlas].atlas-instrument .at-plate-chrome{margin-top:auto} [data-atlas].atlas-instrument .at-plate{position:absolute;inset:0} /* THE INSPECTOR OVERLAYS THE PLATE RATHER THAN TAKING A COLUMN FROM IT. * * A resident 380px dock beside an 834px plate and a 486px ledger leaves 414px of map, which is * narrower than a track needs to be judgeable and is bought out of the one element whose job is * to be large. Overlaying is the treatment the stacked shell already used below 1180 and it is * unchanged here: same panel, same state, same bridge, same close. * * IT STOPS AT THE TRANSPORT, WHICH IS NOT A DETAIL. The transport is how a reader plays the * storm the inspector is describing; an overlay that covered it would leave the subject on * screen and its controls underneath the thing describing it. */ /* AND IT IS THE FIGURE COLUMN'S, NOT THE ROW'S. Absolutely positioned against the row, the dock's foot was the ROW's foot -- and between 1181 and 1439 the band can be a little taller than the viewport, so the panel ran off the bottom of the screen with its close control on it. Inside the column it overlays, its box is the plate and its captions, which is what "overlays the plate" always meant. */ [data-atlas].atlas-instrument .atlas-dock{ position:absolute; top:20px;bottom:0;right:0; /* THE PLATE'S OWN WIDTH IS THE THIRD BOUND, AND IT IS THE ONE THAT MATTERS AT 900. `overlays the plate` is the whole rule; a panel wider than the plate it overlays is a panel over the LEDGER, and covering the table with the inspector is the one thing an overlay is supposed to avoid. Measured at 900, where the plate is 336: an unbounded 380 reached 18px into the ledger's first column. */ left:auto; width:min(380px, 86vw, var(--at-plate-avail)); z-index:880;overflow:hidden; background:var(--chrome);border-left:1px solid var(--rule-2); } /* ─── the ledger column ─────────────────────────────────────────────────────────────────── * * THREE PARTS, AND THE MIDDLE ONE IS THE ONLY THING THAT SCROLLS. The column heads stay pinned * to the top and the limits stay pinned to the foot, so the two things that qualify every row — * what the columns ARE, and what the record does not hold — are on screen at every scroll * position. A denominator that scrolls away is a denominator a reader stops applying. */ /* THE EVIDENCE IS THE PAGE'S, NOT A COLUMN'S. * * `overflow-y:auto` on a 486px column is what made the deck a 3,457px scroll inside a 673px * window. Nothing about the evidence needed that: it needed WIDTH. Below the band it has the * whole measure, it scrolls with the page like any other document, and the two things the old * pin existed to keep on screen -- what the columns are, and what the record does not hold -- * are solved by the matrix being read top to bottom instead of through a slot. */ [data-atlas].atlas-instrument .atlas-evidence{ display:block;min-width:0; padding:0 var(--at-pad) 0; background:var(--chrome); } /* THE TIMING COLUMNS COST NOTHING AT PAGE WIDTH. At a 486px measure they were 114px the column did not have and the honest answer was a sideways scroll; across the page there is room for every track the archive publishes, so the fold is a reader's preference rather than a concession, and the column heads ride with the table instead of being pinned over it. */ [data-atlas].atlas-instrument .at-deck-head > .at-dc{background:var(--chrome)} /* THE LIMITS SIT UNDER THE MATRIX THEY QUALIFY, under one ink rule -- the surface's strongest, the same weight as the column heads' -- which is what says these are not another row. Nothing is pinned: the page scrolls, and a block pinned to the foot of a page is a block that covers the page. Counts at the rate's size, because a limit is a finding. */ [data-atlas].atlas-instrument .atlas-evidence .at-deck-limits{ background:var(--chrome);border-top:1px solid var(--t1); padding:12px 0 0; } [data-atlas].atlas-instrument .atlas-transport{padding:0 var(--at-pad)} /* ─── limits & exclusions: one block per governing refusal ─────────────────────────────────── * * UNDER THE MATRIX, NOT INSIDE IT. A refusal's sentence used to sit between two rows of the * table it qualified; six of them on a conditioned cohort read as the table's texture. The rows * keep their marks, their state words and their counts -- what is here is the SENTENCE, once per * governing refusal, with the contracts that share it named beside it. */ [data-atlas] .at-deck-limitgroups{ grid-column:1/-1;margin-top:22px;border-top:1px solid var(--t1);padding-top:12px; } [data-atlas] .at-limitgroups-head{display:flex;align-items:baseline;gap:14px;padding-bottom:6px} [data-atlas] .at-limitgroups-note{ font-family:var(--at-mono);font-size:var(--at-t5);letter-spacing:.8px;color:var(--t3); } /* THE RULE ABOVE A BLOCK IS THE ONE THING THAT SEPARATES A REFUSAL A READER CAN ACT ON FROM ONE NOBODY CAN: solid for resolvable, dashed for a limit of the record. It is the same distinction refusal.jsx draws and the only one that decides what a reader can DO. */ [data-atlas] .at-limit{border-top:1px solid var(--rule-2);padding:10px 0 12px} [data-atlas] .at-limit[data-limit-kind="BASE_RATE_ONLY"], [data-atlas] .at-limit[data-limit-kind="UNKNOWN"]{border-top:1px dashed var(--rule-1)} [data-atlas] .at-limit-head{display:flex;align-items:baseline;gap:10px;padding-bottom:6px} [data-atlas] .at-limit-title{ font-family:var(--at-mono);font-size:var(--at-t3);letter-spacing:1.6px;font-weight:600; color:var(--t1); } [data-atlas] .at-limit-count{ font-family:var(--at-mono);font-size:var(--at-t5);letter-spacing:1px;color:var(--t3); } [data-atlas] .at-limit-line{padding:4px 0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline} [data-atlas] .at-limit-which{ font-family:var(--at-sans);font-size:var(--at-t3);color:var(--t1);flex:none;max-width:100%; } [data-atlas] .at-limit-line .at-say-text{ font-family:var(--at-sans);font-size:var(--at-t3);line-height:1.5;color:var(--t2); flex:1 1 24ch;min-width:0; } /* ─── the answer: eight rows beside the plate ──────────────────────────────────────────────── * * THE ROW ANATOMY IS FIXED AND IT IS THE SAME IN EVERY STATE: * * NAME .................... RATE Δ * n / N · 95% WILSON STATUS * * and where the archive publishes no rate, the COUNT stands in the rate's place at the rate's * size, with the state word under it. A refused row loses its rate and keeps everything else, * because the count is the finding -- the same argument this file already makes for the * unrecorded-outcome total. No sentence is printed on a row: the sentence is written once, per * governing refusal, in the limits below the matrix. * * THE RATE IS THE LARGEST THING ON THE PAGE AFTER THE MAP. It is set at --at-t-rate against a * name at --at-t2 and its supporting arithmetic at --at-t4, which is a spread the old ledger did * not have: a rate and its own outcome name were both 14px there, and size had stopped meaning * anything a reader could hold. */ [data-atlas] .at-answer{ display:flex;flex-direction:column;min-height:0;gap:9px;justify-content:space-between; /* THE ANSWER'S OWN FIVE STEPS, DECLARED HERE AND NOWHERE ELSE. The frame's scale -- t1 30 to t5 9.5 -- is the deck's, and the deck keeps it: consolidating it is its own piece of work and is not this one. What the contract fixes is the ANSWER's hierarchy, and it fixes it wide: a rate at 27 over a name at 17 over its arithmetic at 12, where the ledger set a rate and its own outcome name at 14px each and size had stopped meaning anything a reader could hold. */ --at-t-rate:27px; --at-t-name:17px; --at-t-syn:16.5px; --at-t-sup:12px; --at-t-stamp:10.5px; } [data-atlas] .at-ans-head{ display:flex;align-items:flex-end;gap:12px; border-bottom:2px solid var(--t1);padding-bottom:7px; } [data-atlas] .at-ans-n{ font-family:var(--font-mono);font-size:32px;font-weight:600;line-height:.9; letter-spacing:-1px;color:var(--t1); } [data-atlas] .at-ans-l{ font-family:var(--font-mono);font-size:var(--at-t-stamp);letter-spacing:1.2px; color:var(--t3);padding-bottom:3px;line-height:1.45; } /* A WORD, NOT A PILL. The sample gate is a registry state and it is printed in the registry's one ink at stamp size; a border around it made it the only boxed word on the answer, and a box on a line that already ends in a 2px rule is chrome saying what the rule says. */ [data-atlas] .at-ans-state{ margin-left:auto;font-family:var(--font-mono);font-size:var(--at-t-stamp);letter-spacing:1.2px; color:var(--t1);padding-bottom:3px;white-space:nowrap; } /* TWO OR THREE LINES, AND EVERY CLAUSE IN THEM IS COUNTED. See synthesise() -- this is the one place on the surface that says something ABOUT the rows rather than printing them. */ /* THE TWO DENOMINATORS, AT STAMP SIZE, UNDER THE HEAD. Not a headline: a statement of what the rates below are rates OF, in the one place a reader meets before reading them. */ [data-atlas] .at-ans-denoms{color:var(--t2)} [data-atlas] .at-ans-syn{ margin:0;padding:6px 0 7px;font-size:var(--at-t-syn);line-height:1.34;color:var(--t1); } [data-atlas] .at-ans-mid{flex:1 1 auto;display:flex;flex-direction:column;min-height:0} [data-atlas] .at-ans-key{ display:flex;justify-content:space-between;gap:12px; font-family:var(--font-mono);font-size:var(--at-t-stamp);letter-spacing:1.4px;color:var(--t3); border-bottom:1px solid var(--t1);padding-bottom:2px;line-height:1.25; } [data-atlas] .at-ans-key span:first-child{color:var(--t1);font-weight:600} [data-atlas] .at-ans-rows{flex:1 1 auto;display:flex;flex-direction:column;min-height:0} /* THE LANDFALL MARKER IS A STAMP ON THE RULE, NOT A SECOND HEADING. The sequence is one ladder of eight; what changes at this line is the denominator, and a reader must not have to infer that from the row above. */ [data-atlas] .at-ans-lf{ flex:none;font-family:var(--font-mono);font-size:var(--at-t-stamp);letter-spacing:1.6px; color:var(--t3);border-bottom:1px solid var(--rule-3);padding:3px 0 1px;line-height:1.25; } /* THE ROWS GROW INTO THE BAND'S SLACK, AND ONLY SO FAR. Distributed, the ledger reads as a printed table set to its measure; banked at the foot it is a void under the answer. Past 92px a row stops being a line in a table and starts being a panel. */ [data-atlas] .at-ans-row{ display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto auto; column-gap:14px;padding:6px 0 5px;border-bottom:1px solid var(--rule-3); flex:1 1 auto;align-content:center;max-height:118px; } [data-atlas] .at-ans-row > *{min-width:0} [data-atlas] .at-ans-name{ grid-column:1;grid-row:1;align-self:end;display:flex;align-items:baseline;gap:12px; font-family:var(--at-sans);font-size:var(--at-t-name);line-height:1.05;color:var(--t1); } [data-atlas] .at-ans-label{flex:none} /* ─── the interval, as a mark on a common track ─────────────────────────────────────────── * * A HAIRLINE WHISKER, A DOT, AND THE ARCHIVE'S TICK -- NOT A BAR. The canonical rendering of an * interval on this surface is TYPE, and it is one cell to the right on the same row; this is * those same figures placed on a ruler so two rows can be compared by eye. A filled bar was * tried and is what 5c removed: it encodes magnitude as area, at four times the width, competing * with the rate set at 27px beside it. * * THE TRACK IS THE SAME WIDTH AND THE SAME 0-100 SCALE ON EVERY ROW. A track sized to whatever * space an outcome name left over is not a scale, and two rows measured on different rulers are * not comparable -- which is the entire job of the mark. * * THE INKS: the whisker and the dot carry the row's own class ink, the base tick is a hairline in * the rule ink. Nothing here carries text, which is what lets the mark use the mark tokens. */ [data-atlas] .at-ans-int{ position:relative;flex:none;width:96px;height:11px;align-self:center; } [data-atlas] .at-ans-track{ position:absolute;left:0;right:0;top:5px;height:1px;background:var(--rule-3); } [data-atlas] .at-ans-whisk{ position:absolute;top:5px;height:1px;background:var(--barink-cat1); } [data-atlas] .at-ans-int[data-bar-class="ts"] .at-ans-whisk, [data-atlas] .at-ans-int[data-bar-class="ts"] .at-ans-dot{background:var(--barink-ts)} [data-atlas] .at-ans-int[data-bar-class="cat2"] .at-ans-whisk, [data-atlas] .at-ans-int[data-bar-class="cat2"] .at-ans-dot{background:var(--barink-cat2)} [data-atlas] .at-ans-int[data-bar-class="cat3"] .at-ans-whisk, [data-atlas] .at-ans-int[data-bar-class="cat3"] .at-ans-dot{background:var(--barink-cat3)} [data-atlas] .at-ans-int[data-bar-class="cat4"] .at-ans-whisk, [data-atlas] .at-ans-int[data-bar-class="cat4"] .at-ans-dot{background:var(--barink-cat4)} [data-atlas] .at-ans-int[data-bar-class="cat5"] .at-ans-whisk, [data-atlas] .at-ans-int[data-bar-class="cat5"] .at-ans-dot{background:var(--barink-cat5)} /* THE WHISKER'S ENDS ARE DRAWN, so a narrow interval is still visibly an interval rather than a dot with a smudge. */ [data-atlas] .at-ans-whisk::before,[data-atlas] .at-ans-whisk::after{ content:"";position:absolute;top:-3px;width:1px;height:7px;background:inherit; } [data-atlas] .at-ans-whisk::before{left:0} [data-atlas] .at-ans-whisk::after{right:0} [data-atlas] .at-ans-dot{ position:absolute;top:2.5px;width:6px;height:6px;margin-left:-3px;border-radius:50%; background:var(--barink-cat1);box-shadow:0 0 0 1.5px var(--chrome); } /* THE ARCHIVE'S OWN RATE, WHERE THERE IS A COMPARISON TO MAKE. A hairline the height of the track, in the rule ink: it says where the baseline sits without claiming a second answer. */ [data-atlas] .at-ans-base{ position:absolute;top:1px;width:1px;height:9px;background:var(--rule-4); } /* NONMEMBER CONTEXT LOSES COLOUR, NEVER CONTRAST. With a storm selected, a contract it did not reach keeps every figure and every word at full contrast and gives up only the class ink on its mark -- which is the one thing on the row that was carrying identity rather than meaning. */ [data-atlas] .at-ans-int[data-nonmember] .at-ans-whisk, [data-atlas] .at-ans-int[data-nonmember] .at-ans-dot{background:var(--t4)} /* ─── the row as the lens's control ─────────────────────────────────────────────────────── * * HOVER LIFTS, A PRESS HOLDS, AND NEITHER PUBLISHES ANYTHING. The row is the control that draws * its own storms on the plate, so it gets a pointer, a focus ring and a held state -- drawn as a * rule in the left margin rather than as a fill, because a filled row in a research table reads * as a value rather than as a state. */ [data-atlas] .at-ans-row[data-lens-row]{cursor:pointer} [data-atlas] .at-ans-row[data-lens-row]:hover{background:rgba(255,255,255,.022)} [data-atlas] .at-ans-row[data-lens-row]:focus-visible{ outline:1px solid var(--accent);outline-offset:-1px; } [data-atlas] .at-ans-row[data-held]{ background:rgba(255,255,255,.03);box-shadow:inset 2px 0 0 var(--accent); } [data-atlas] .at-ans-ld{ flex:1 1 auto;min-width:10px;border-bottom:1px dotted var(--rule-2); transform:translateY(-4px); } [data-atlas] .at-ans-rate{ grid-column:2;grid-row:1;align-self:end;text-align:right; font-family:var(--font-mono);font-size:var(--at-t-rate);font-weight:600;line-height:1; letter-spacing:-.6px;color:var(--t1);white-space:nowrap; } [data-atlas] .at-ans-den{ font-family:var(--font-mono);font-size:var(--at-t-sup);font-weight:400;letter-spacing:.9px; color:var(--t3);padding-left:7px; } [data-atlas] .at-ans-vs{ grid-column:3;grid-row:1;align-self:end;text-align:right;min-width:58px; font-family:var(--font-mono);font-size:var(--at-t-sup);color:var(--t1);white-space:nowrap; } [data-atlas] .at-ans-sup{ grid-column:1;grid-row:2;padding-top:1px;line-height:1.1; font-family:var(--font-mono);font-size:var(--at-t-sup);color:var(--t2); } [data-atlas] .at-ans-st{ grid-column:2/4;grid-row:2;text-align:right;padding-top:1px;line-height:1.1; font-family:var(--font-mono);font-size:var(--at-t-sup);letter-spacing:.9px;color:var(--t3); white-space:nowrap; } /* THE VALUE TOKEN INHERITS INSIDE THE ANSWER. `.at-val` carries the deck's own step, which is what it is for -- but inside a row whose whole point is that the rate is the largest thing on the page after the map, a nested token that resets to 14px silently undoes the hierarchy. */ [data-atlas] .at-ans-rate .at-val{font-size:inherit;font-weight:inherit;letter-spacing:inherit} [data-atlas] .at-ans-vs .at-val,[data-atlas] .at-ans-sup .at-val{font-size:inherit;color:inherit} [data-atlas] .at-ans-row[data-refused] .at-ans-rate{font-weight:400} /* THE BASELINE IS METHODOLOGICAL CONTEXT AT STAMP SIZE, ATTACHED TO THE ANSWER. It was tried as a block in the masthead's right, opposite the question, and at that size and that position it read as a second headline competing with the one thing the head is for. */ [data-atlas] .at-ans-foot{flex:none} [data-atlas] .at-ans-cmp{ margin:0;padding-top:7px;border-top:1px solid var(--rule-3); font-family:var(--font-mono);font-size:var(--at-t-stamp);letter-spacing:.9px; color:var(--t3);line-height:1.6; } [data-atlas] .at-ans-cmp b{color:var(--t1);font-weight:400;letter-spacing:1.4px} /* ONE POINTER, ONE FACT. How many contracts refused, and where their explanation is. Not the refusal prose, and not a second governing idea riding along on the same line. */ [data-atlas] .at-ans-pointer{ margin:0;padding-top:6px; font-family:var(--font-mono);font-size:var(--at-t-stamp);letter-spacing:1px;color:var(--t3); } /* ─── the foot colophon ─────────────────────────────────────────────────────────────────── * * ONE HAIRLINE-RULED LINE, AND EVERY ITEM ON IT WAS IN THE IDENTITY STRIP. Wordmark, the * archive's three counts, the three stamps that say what the numbers above MEAN, and the three * ways out. It is a printed-plate convention and it is what clears the top of the screen for the * question. * * IT DEGRADES BY WHOLE ITEMS. A truncated pack hash is a wrong pack hash; an absent one is only * absent, and it is still in the provenance drawer this line's own control opens. */ [data-atlas] .at-colophon{ flex:none;display:flex;align-items:center;gap:16px;min-width:0; margin:0 var(--at-pad);padding:10px 0 14px; border-top:1px solid var(--rule); font-family:var(--at-mono);font-size:var(--at-t5);letter-spacing:1px; text-transform:uppercase;color:var(--t3);white-space:nowrap; } [data-atlas] .at-colophon > *{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto} [data-atlas] .at-colophon-brand{ font-family:var(--at-sans);font-size:var(--at-fs-cohort);line-height:1; letter-spacing:.3px;text-transform:none;color:var(--t2);flex:none; } [data-atlas] .at-colophon-back{color:var(--t3);text-decoration:none} [data-atlas] .at-colophon-back:hover{color:var(--accent)} [data-atlas] .at-colophon .at-ledger{display:flex;align-items:baseline;gap:14px;min-width:0} [data-atlas] .at-colophon .at-fig{display:flex;align-items:baseline;gap:4px;min-width:0} [data-atlas] .at-colophon .at-fig b{font-weight:400;color:var(--t2)} [data-atlas] .at-colophon .at-fig span{color:var(--t3)} [data-atlas] .at-colophon-stamps{color:var(--t3)} [data-atlas] .at-colophon-acts{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none} [data-atlas] .at-colophon-cite{ font-family:var(--at-mono);font-size:var(--at-t5);letter-spacing:1px; color:var(--t2);background:none;border:0;border-bottom:1px solid var(--rule-3); padding:0 0 1px;cursor:pointer; transition:color .1s linear,border-color .1s linear; } [data-atlas] .at-colophon-cite:hover{color:var(--t1);border-bottom-color:var(--accent)} /* ─── the ladder ────────────────────────────────────────────────────────────────────────── * * TWO STEPS, AND THE MAP NEVER PAYS FIRST. Stated here rather than scattered, so that a narrower * workstation is a decision rather than an accident. No step reduces a type size and no step * hides a qualification. */ /* 900-1279 · THE PAGE PADDING AND THE GUTTER COME IN. * 40px of margin on each side of a 900px shell is 9% of the width spent on nothing, and it comes * out of the plate. Trimming the frame first is the right order: it is the only thing on the * surface that carries no information at all. */ @media (max-width:1279px){ [data-atlas].atlas-shell.atlas-instrument{--at-pad:26px;--at-gap:26px} /* AND THE PLATE'S TWO PAPER LINES WRAP RATHER THAN TRUNCATE. * * Both lines are ordered by priority and give way from the right, which is right at 834px and * wrong at 460: the class key is the LAST thing on the foot before the measure, and a plate * whose key has lost Category 4 and Category 5 is a coloured map that cannot be read -- the * one thing 5c says the palette is never removed for. So below this width the lines wrap * instead, the key keeps the whole line it needs, and the measure takes the second. It costs * the stage column a row of 9.5px type and nothing else: the head and the foot are paper set * OUTSIDE the plate, so neither the rectangle nor its aspect moves. */ [data-atlas].atlas-instrument .at-platehead, [data-atlas].atlas-instrument .at-platefoot{flex-wrap:wrap;row-gap:5px} } /* < 900 · ONE COLUMN, AND THE SHELL SCROLLS. * * SIMULTANEITY IS THE ONLY REAL LOSS, AND IT IS STATED RATHER THAN PAPERED OVER. Below this * width the plate and a ledger row cannot both be on screen, so the instrument stacks in the * same reading order — question, cohort, plate with both its captions, ledger, colophon — and * the page becomes the scroll rather than the ledger. A reader gets one gesture instead of two * nested ones. * * THE PLATE IS A FIXED FIGURE, NOT A SCALED-DOWN COPY. 392px with the class key and Figure 1 * both intact: the aspect bound is switched off because it exists to keep the archive's frame * fillable inside an ELASTIC row, and this row is not elastic. What must not happen is the * desktop composition shrinking; what happens instead is a smaller figure with the same two * captions. */ /* THE BAND IS SHORTER BETWEEN 1181 AND 1699, AND THE EIGHT ROWS STILL HAVE TO FIT INSIDE IT. The contract fixes the answer at eight findings above the fold at 1440 and up, so what gives at the shorter viewports is the LEADING, not the ladder: a row that cannot fit is a row the reader has to scroll for, and the whole composition is that they do not. Measured at 1220x820, where the band is 584px and the answer wanted 711. */ @media (min-width:1181px) and (max-width:1699px){ [data-atlas] .at-answer{gap:6px} [data-atlas] .at-ans-row{padding:1px 0 0;max-height:58px} [data-atlas] .at-ans-syn{padding:7px 0 8px} [data-atlas] .at-ans-cmp{padding-top:6px;line-height:1.5} [data-atlas] .at-ans-pointer{padding-top:5px} [data-atlas] .at-ans-lf{padding:6px 0 3px} } /* ─── stacked: PLATE → ANSWER → MATRIX ──────────────────────────────────────────────────── * * THE BREAKPOINT MOVED FROM 900 TO 1180, and it moved because the answer is eight rows now * rather than a scrolling column. Two columns at 1024 give the answer 350px, which is a rate * and its outcome name on separate lines; stacked it has the whole measure and the plate becomes * a figure again. * * THE PLATE IS CAPPED, AND THAT IS THE WHOLE POINT OF THE STACK. A map that fills the first * screen is a map that has answered nothing: the sample and at least two numerical findings must * clear the fold at 1024x768, which is what scripts/check-atlas-contract.mjs measures. 26vh is * what leaves room for them at 768 with the question at three lines. * * NOTHING IS FIXED ANY MORE. The shell was `position:fixed; inset:0; overflow-y:auto` -- a pane * scrolling inside the viewport -- which is the same construction the desktop ledger used and * has the same cost: two scrollbars, and a page that cannot be printed or linked to a position * in. The page scrolls. */ @media (max-width:1180px){ [data-atlas].atlas-shell.atlas-instrument{ --at-pad:26px;--at-gap:0px;--at-peek:56px;--at-answer:auto; /* THE STACKED PLATE'S HEIGHT, IN ONE PLACE, BECAUSE THREE RULES READ IT. The column's width is this times the aspect ceiling, the stage's height is this, and the phone overrides it below. Written three times it was three chances to change two of them. */ --at-stack-ph:min(30vh,300px); } [data-atlas].atlas-instrument .atlas-above{min-height:0;display:block} /* `min-height:auto` ON BOTH, AND IT IS THE WHOLE OF WHY THE STACK WORKS. * * Every layout item in this shell carries `min-height:0`, because in the side-by-side model * they live in tracks that must be allowed to be shorter than their content and scroll. Kept * here that rule is a trap: a grid whose container has a DEFINITE height (this shell is * `position:fixed; inset:0`) and whose `auto` tracks have a min-content contribution of ZERO * will happily divide the viewport between them. Measured at 768x1024 before this line: the * plate column was given 380px around 525px of content, so the figure caption was painted * over the top of the ledger. Restoring the real min-content contribution makes the rows take * their content, the shell overflow, and the PAGE become the scroll -- which is the stated * behaviour below 900. */ [data-atlas].atlas-instrument .atlas-plate-row{ grid-template-columns:minmax(0,1fr); gap:18px 0;min-height:auto; } [data-atlas].atlas-instrument .atlas-stage-col{grid-column:1;grid-row:1;min-height:auto} [data-atlas].atlas-instrument .atlas-answer{grid-column:1;grid-row:2;min-height:auto} /* STACKED, THE PLATE IS A BANNER FIGURE, AND THE WHOLE FIGURE MOVES WITH IT. * * THE GEOMETRY IS A VICE AND BOTH JAWS ARE REAL. The fold rule says the effective sample and * at least two numerical findings must clear the first screen, which caps the plate's HEIGHT. * The aperture rule says the plate may not read past --at-plate-ar-max, which turns that cap * into a cap on WIDTH. At 1024x768 the two together forbid a full-bleed plate outright: 972px * of band needs 304px of height at the ceiling, and the fold has 261 to give. Measured, not * reasoned -- a full-bleed plate here puts the second finding at 786px on a 768px screen. * * SO THE PLATE IS NARROWER THAN THE BAND, AND WHAT WAS WRONG BEFORE WAS NOT THAT. It was that * only the PLATE narrowed: the head, the legend and the caption kept the band's full width, so * a 639px map sat at the left edge of a 972px column with a 333x220 rectangle of paper beside * it and its own caption wrapping in the half-measure next to the void. That is the defect this * composition was opened to remove, drawn at a different width. * * THE FIGURE IS ONE BLOCK AND IT IS CENTRED AS ONE. The column takes the plate's width, so the * plate head, the class key, the scale bar and Figure 1 are all set to the plate's own edges -- * which is what made them read as its caption in the first place -- and the paper that is left * is a symmetric margin around a figure rather than a slab beside a strip. The answer and the * matrix below are unaffected: they are the band's full width, as they were. * * 30vh, AND WHY NOT MORE. Measured at 1024x768: 28vh leaves the second finding 55px clear of * the fold, 30vh leaves 40px, 32vh leaves 24px. The last is the plate a reader would rather * have and the one a machine whose fonts are not this one's would push off the screen -- which * is the exact failure that put the previous revision in front of CI. 30vh is the largest * share with room for that. check-atlas-contract measures the OUTCOME rather than the token, * at 1024 and at 414, so a viewport where this stops being true fails a run rather than * shipping. */ [data-atlas].atlas-instrument .atlas-stage-col{ width:min(100%, calc(var(--at-stack-ph) * var(--at-plate-ar-max))); margin-inline:auto; } [data-atlas].atlas-instrument .atlas-stage{ /* `width:100%`, not `max-width` with auto margins: an auto inline margin turns off the flex item's stretch, and a stage whose only child is absolutely positioned then shrinks to zero content width. Measured at 1024: a 0x200 plate that every "is it on screen" check passed because it had height. The centring is the COLUMN's job now, which is what keeps the captions on the plate's edges. */ flex:none;height:var(--at-stack-ph);min-height:0;width:100%; } /* AND THE CAPTION IS NOT PUSHED TO A FOOT THERE IS NONE OF. Stacked, the column takes its content and there is no band remainder to bank, so the desktop rule that pins Figure 1 to the column's foot would only add a gap nothing asked for. */ [data-atlas].atlas-instrument .at-plate-chrome{margin-top:0} } /* ─── THE WIDE, SHORT STACK: THE LEFTOVER IS FIGURE CHROME ───────────────────────────────── * * WHERE THIS APPLIES AND WHY IT IS A RANGE RATHER THAN A BREAKPOINT. Stacked, the plate's height * is capped by the fold and its width by the aspect ceiling against that cap -- so on a viewport * that is WIDE and SHORT the band is wider than any legal plate. At 1024x768 that leftover was * 235px. Centring the figure made it a symmetric margin instead of a slab, which is honest and * still wrong: 117px of empty page either side of a 737x230 plate reads as a thumbnail, and the * aspect sat on the 3.2 ceiling because spending the whole budget on width is the only way to * use it when the leftover has no other job. * * SO THE LEFTOVER IS GIVEN A JOB. The class key, the scale bar, the projection, Figure 1 and * PLATE NOTES move out of the column's vertical flow and into the width beside the plate. They * are the figure's own chrome and they were always set to the plate's edges; here they are set * to its right edge instead of its bottom one. Two things follow, and both are the point: * * the plate gets the width back it is no longer competing with a margin for it * the plate gets the HEIGHT back the foot and the caption are no longer under it, so the * fold budget they were spending is the plate's to spend * * which together land the aspect near 2.4 rather than on the ceiling. 3.2 is where a plate stops * being a plate; it was never the target. * * IT IS NOT A SECOND LAYOUT SYSTEM. The order is still PLATE -> ANSWER -> MATRIX, the answer and * the matrix are still the band's full width and are not touched by any rule in this block, and * nothing here is a column of evidence -- it is a figure and its caption, which is the same * arrangement the desktop band uses turned through ninety degrees. * * THE RANGE. Wide enough that the leftover can hold a caption (960px), still stacked (1180px), * and short enough that the fold is what caps the plate (900px). Outside it the plate already * fills the band -- 900x900 gives 848px of plate against 848 of band, 768x1024 gives 716 of 716 * -- so there is no leftover to place anything in and the vertical caption is correct. */ @media (min-width:960px) and (max-width:1180px) and (max-height:900px){ [data-atlas].atlas-shell.atlas-instrument{ /* THE SIDE MEASURE. Wide enough for the seven-class key on two lines and a caption that does not set one word per line; narrow enough to leave the plate the majority of the band. */ --at-fig-side:236px; --at-fig-sidegap:18px; } /* THE BLOCK IS FULL WIDTH AGAIN, because the leftover is no longer leftover. */ [data-atlas].atlas-instrument .atlas-stage-col{ width:100%;margin-inline:0; display:grid; grid-template-columns:minmax(0,1fr) var(--at-fig-side); grid-template-rows:auto auto; column-gap:var(--at-fig-sidegap); } /* THE HEAD STAYS ON TOP OF THE PLATE AND SPANS BOTH, because it is the plate's title bar -- it names the plate and prints its cohort counts, and set beside the map it would read as a caption competing with Figure 1. */ [data-atlas].atlas-instrument .at-platehead{grid-column:1 / -1;grid-row:1} [data-atlas].atlas-instrument .atlas-stage{grid-column:1;grid-row:2} /* ONE CELL, AND `align-self:start` SO IT PACKS AGAINST THE PLATE'S TOP EDGE. The chrome is shorter than the plate; stretched, the key and the caption would be spread down 290px of column with the space between them growing as the plate does -- the hole this composition removed from under the map, reopened to its right. */ [data-atlas].atlas-instrument .at-plate-chrome{ grid-column:2;grid-row:2;align-self:start;margin-top:0;min-width:0; } /* THE KEY AND THE MEASURE STACK, because at 236px they are a column rather than a band. The scale bar is still computed from the rendered plate -- nothing here touches what it says. */ [data-atlas].atlas-instrument .at-platefoot{ flex-direction:column;align-items:flex-start;gap:8px;padding:0 0 10px; } [data-atlas].atlas-instrument .at-platefoot .at-plate-measure{ flex-wrap:wrap;gap:6px 10px;margin-left:0; } [data-atlas].atlas-instrument .at-platefoot .at-r{margin-left:0} [data-atlas].atlas-instrument .at-classkey{flex-wrap:wrap;gap:5px 9px} /* AND FIGURE 1 IS A PARAGRAPH HERE RATHER THAN A LINE, which is what a narrow measure is for. The one-line rule was never about the sentence -- it was about the sentence being in the plate's vertical budget. Beside the plate it is not, so it may take the lines it needs and the plate does not move: check-atlas-stability drives that invariant at this viewport. */ [data-atlas].atlas-instrument .at-plate-figure{display:block} [data-atlas].atlas-instrument .at-plate-caption{max-width:none} [data-atlas].atlas-instrument .at-plate-acts{display:block;margin-top:8px} /* THE PLATE TAKES THE FOLD BUDGET THE CAPTION USED TO SPEND, AND IT SPENDS IT ON HEIGHT. * * TWO BOUNDS, AND WHICHEVER IS SMALLER WINS. The first is the SHAPE: the plate's width divided * by the aspect this frame is composed at, which is what takes it off the 3.2 ceiling and puts * it at 2.46 -- a rectangle a recurving track reads in, rather than a letterbox. The second is * the FOLD: 38vh, against the 30 the vertical stack allows, because the class key and Figure 1 * are no longer under the map spending it. At 1024x768 the shape bound wins at 293 and the * fold bound at 291.8, so they land within a pixel of each other -- which is what it looks * like when a composition is solved rather than clamped. At 1180x800 the fold binds first. * * AND THE WIDTH IS READ FROM THE VIEWPORT, NOT FROM THE COLUMN. `100%` of a grid area is its * height for a height property, so the shape bound is composed from the same terms the column * itself is: the viewport less the page padding, the side measure and the gutter. Nothing in * that chain is content, which is what keeps the caption -- now free to take the lines a * 236px measure needs -- unable to move the plate. */ [data-atlas].atlas-shell.atlas-instrument{--at-stack-ph:min(38vh,340px)} [data-atlas].atlas-instrument .atlas-stage{ height:min( calc((100vw - 2 * var(--at-pad) - var(--at-fig-side) - var(--at-fig-sidegap)) / 2.45), var(--at-stack-ph)); } } @media (max-width:1180px){ /* THE INTERVAL MARK IS THE FIRST WHOLE ITEM THE ROW GIVES UP. Stacked, the answer runs the page's width and the row's measure is spent on the outcome name and the figures; a 96px ruler is the one thing on the line that states nothing the type does not already state -- the interval is printed in full, in type, one cell along. A strip gives up whole items. */ [data-atlas] .at-ans-int{display:none} /* Stacked, the rows take their content: there is no band slack to distribute. */ [data-atlas] .at-ans-row{flex:none;max-height:none} [data-atlas] .at-ans-mid,[data-atlas] .at-ans-rows{flex:none} [data-atlas] .at-question-text{max-width:none} [data-atlas] .at-colophon{flex-wrap:wrap;white-space:normal;row-gap:6px} [data-atlas] .at-colophon-acts{margin-left:0} [data-atlas].atlas-instrument .atlas-dock{ position:fixed;inset:0;left:auto;top:0;bottom:0;width:min(380px,86vw); } [data-atlas] .at-sheet{width:auto;right:0;border-right:0} [data-atlas] .at-transport{flex-wrap:wrap;padding:8px 14px} [data-atlas] .at-readouts{border-left:0} [data-atlas] .at-ro:first-child{padding-left:0} } /* 390 · THE SAME INSTRUMENT, SMALLER, AND STILL NOT A SECOND PRODUCT. * * The question steps down one place on its own scale -- 24px, not a percentage of 30 -- and the * cohort line wraps rather than truncating. The plate is a 300px figure with both its captions * intact: a smaller figure, not a scaled-down copy of the 834px one, and the class key and * Figure 1 are the two things that must survive the reduction because they are what makes the * remaining ink readable at all. * * WHAT IS NOT HERE. Whether a 300px plate can carry the two-ink lens legibly at basin zoom is * unproven and needs a device test rather than another rule -- turn 4 names it GATE A and its * documented fallback. Nothing in this block pretends to have settled it. */ @media (max-width:480px){ [data-atlas].atlas-shell.atlas-instrument{--at-t1:24px;--at-pad:18px} /* A SMALLER FIGURE, NOT A SCALED-DOWN COPY -- and still capped so that the sample and the first findings are on the first screen. 300px of plate on an 896px phone left the answer entirely below the fold, which is the same failure as the 1024 stack and has the same fix. */ /* THE TOKEN, NOT THE RULE. The column's width is derived from --at-stack-ph one media query up, so overriding the token moves the plate and the block that carries it together; overriding the stage's height alone would have left the column sized for a plate three times this one's height. */ [data-atlas].atlas-shell.atlas-instrument{--at-stack-ph:min(17vh,155px)} /* THE RATE STEPS DOWN ONE PLACE AND NOTHING ELSE DOES. The contract is explicit: a phone may reduce the rate, and may not shrink the rest to make a layout fit. */ [data-atlas] .at-answer{--at-t-rate:25px;gap:6px} [data-atlas] .at-ans-syn{padding:7px 0 8px} [data-atlas] .at-ans-row{padding:7px 0 6px} /* AND THE DENOMINATOR LINE GOES WITH IT AT 390. It is a convenience -- both figures are on every row as n / N -- and at this width one line above the ladder is one finding below the fold, which check-atlas-contract measures as the first screen answering less. */ [data-atlas] .at-ans-denoms{display:none} /* THE STATUS GIVES UP ITS COLUMN HERE, AND KEEPS ITS ROW. * * The five resting tracks are 468px wide and a 390px phone has 350 of them, so something on * this row is going to be off-screen -- and left alone it is the RIGHTMOST column, which is * STATUS. That is the same failure the ledger measure is floored against between 900 and * 1387, arriving from the other end: a refused row whose refusal sits past the right edge of * a sideways scroll has not refused where the reader is looking. * * So on a phone the status stops being a column and becomes a line of its own directly under * the row that owns it, indented to the same rule as that row's refusal sentence and reading * straight into it. Nothing is hidden, nothing is abbreviated, and the four tracks 5c * actually specifies -- OUTCOME | n / N | RATE | 95% WILSON -- fit the measure with the * outcome name taking what is left. */ /* THE MATRIX IS IN THE PAGE NOW, so a track budget it cannot meet is the PAGE scrolling sideways rather than a column doing it. Measured at 414: five tracks and four 8px gutters came to 428 against 378 of usable width -- 14px of horizontal overflow on the resting instrument. The outcome name gives up its minimum and the gutters tighten; every column the archive publishes stays, which is the rule this file has always kept at this width. */ [data-atlas].atlas-instrument .at-deck{ --at-col-outcome:minmax(78px,1fr); column-gap:6px; } /* AND THE RESERVED COMPARISON WIDTH IS GIVEN BACK, BECAUSE HERE IT CANNOT BE AFFORDED. * * The deck holds the comparison's width open before the comparison exists so that the resting * columns do not shift when it arrives. That is worth a track where the measure can hold one. * On a phone it is not: the budget is `100 + 84 + 52 + 70` and four 8px gutters against 350px * of screen, and 72px held open for a column nobody has asked for measured 430 into 390 -- * the instrument scrolling sideways in the RESTING state, which check-atlas-instrument asserts * against at every width. * * Keyed on `data-reserved-tracks`, which the deck sets only while it is holding width for a * comparison that does not exist yet. So this zeroes the reserved track and nothing else: a * cohort that HAS a comparison keeps the real 72px column and the deck scrolls sideways to * reach it, which is the rule this file already states for the optional columns. Nothing here * touches `--at-ledger`, so the plate is not a function of it either way. */ [data-atlas].atlas-instrument .at-deck[data-reserved-tracks]{--at-col-vs:0px} /* AND THE NAME'S OWN INDENT TIGHTENS BY SIX PIXELS, which is the difference between `Unattributed` fitting the measure and being broken across two lines mid-word. The class hairline and the mark slot keep their widths; only the two gutters between them close. */ [data-atlas].atlas-instrument .at-deck .at-dc-outcome{gap:4px} /* THE COMPARISON IS STILL THE COLUMN THAT SCROLLS, AND THE ROW'S OWN WORDS STILL DO NOT. * * VS ARCHIVE is the optional sixth track: it exists only because a condition does, and at * 350px of phone there is no distribution of six columns that leaves the outcome name * readable. So it keeps its column and the deck scrolls sideways to reach it -- the rule this * file already states for the optional columns. * * What must NOT scroll with it is anything the row SAYS. A refusal sentence and a status word * span every column, so a deck 60px wider than the screen would take the last 60px of both * off the right-hand edge -- the same failure the measure is floored against elsewhere, * arriving through a track the reader asked for. Pinned to the left of the scrollport and * bounded by the screen, they are whole wherever the comparison happens to be scrolled to. */ [data-atlas].atlas-instrument .at-deck .at-dc-status:not(:empty), [data-atlas].atlas-instrument .at-deck .at-deck-say, [data-atlas].atlas-instrument .at-deck .at-deck-pre, [data-atlas].atlas-instrument .at-deck .at-deck-groupnote, [data-atlas].atlas-instrument .at-deck .at-deck-foldline, [data-atlas].atlas-instrument .at-deck .at-deck-foot, [data-atlas].atlas-instrument .at-deck .at-deck-foot-block, [data-atlas].atlas-instrument .at-deck .at-deck-env, [data-atlas].atlas-instrument .at-deck .at-deck-cite{ position:sticky;left:0; max-width:calc(100vw - 2 * var(--at-pad)); } } /* THE BUILDER SHEET. Summoned, not resident. It overlays the plate rather than the evidence, because a reader editing a condition is looking at what the map holds, not at the answer they are about to invalidate. * * PINNED TO THE BODY ROW, NOT TO THE SHELL'S BOX. An absolutely-positioned grid child that names * a grid area gets THAT AREA as its containing block, so `inset:0` here resolves to the body row * exactly, at whatever height the aperture bounds gave it. Out of flow either way, so * auto-placement of the in-flow rows is untouched. * * BOTH LINES, NOT ONE, AND THE SHORTHAND IS THE TRAP. `grid-row:2` is `2 / auto`, and for an * ABSOLUTELY POSITIONED grid child an `auto` line resolves to the grid container's PADDING EDGE * rather than to a one-track span — a sheet still covering the whole surface while appearing to * be placed. `2 / 3` closes the area at the row it names. */ [data-atlas] .at-sheet{ position:absolute;grid-row:2 / 3;grid-column:1 / 2; inset:0;right:auto;width:clamp(320px,26vw,420px); z-index:900;display:flex;flex-direction:column; background:var(--chrome);border-right:1px solid var(--rule-2); } /* ANCHORED TO THE CLAUSE THAT OPENED IT. * * A map-independent control belongs to the QUESTION: the editor edits words in the sentence, so * it opens under the words it edits rather than in a corner of the plate, and a reader never has * to work out what they pressed to make it appear. Map-dependent controls stay on the plate -- * the mode segment, HOME, FIT, the reticle -- which is the other half of the same rule. * * IT MAY OVERLAP THE PLATE AND IT MAY NOT MOVE IT. Absolutely positioned against the grid area * it names, so it is out of flow: the plate's box is unchanged whether this is open or closed, * and check-atlas-stability drives the transition and measures the rectangle either side. It * never occupies the ledger column and it hides no row -- the answer stays on screen beside it. * * The inset reset is what lets the inline left/top place it: the base rule stretches the sheet * over the whole plate row, the right shape for a sheet and the wrong one for a popover. */ [data-atlas] .at-sheet[data-sheet-anchored]{ grid-row:1 / -1;grid-column:1 / -1; inset:auto;right:auto;bottom:auto; max-height:min(62vh,540px); border:1px solid var(--rule-3);border-radius:0; box-shadow:0 18px 44px rgba(0,0,0,.55); } [data-atlas] .at-sheet-hd{ flex:none;display:flex;align-items:center;justify-content:space-between; padding:0 var(--at-s5);height:var(--at-row-head-h); border-bottom:1px solid var(--rule-2);background:var(--chrome-hi); font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:var(--at-tr-label); color:var(--t3); } [data-atlas] .at-sheet-x{ background:transparent;border:0;color:var(--t3);cursor:pointer; font-family:var(--at-mono);font-size:var(--at-fs-value);padding:0 2px; } [data-atlas] .at-sheet-x:hover{color:var(--t1)} [data-atlas] .at-sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain} /* THE ACTIVE SYSTEM LAUNCHER. A stack of tracked systems at the head of the GENESIS section, each one a name, the two positions a reader must be able to tell apart, and a launch. RULED, NOT BOXED. Each system is separated by the same hairline every other group on this surface uses, and carries no panel, no card and no tint. A live storm is the most tempting thing on the plate to put in a coloured box, and a coloured box is exactly what would make the operational record look like the authoritative one -- it is the least post-analysed thing here. The rows inside are the panel's own leader-dot rows, so an operational position is set in the same ink as an archive column and cannot borrow authority from its typography. */ [data-atlas] .at-live-row{ padding:9px 0 11px;border-top:1px solid var(--rule);min-width:0; } /* NO `:first-of-type` EXCEPTION, AND IT IS NOT AN OVERSIGHT. The obvious rule here -- `.at-live-row:first-of-type{border-top:0}` -- is DEAD: `:first-of-type` matches the first element of its TYPE among its siblings, and the block opens with the section head's div and the scope note's div, so the first `.at-live-row` is never the first `div`. The rule would have matched nothing and sat in the stylesheet looking like it worked. The hairline above the first system is wanted in any case: it separates the systems from the scope note that governs them. */ [data-atlas] .at-live-id{ display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:3px;min-width:0; } [data-atlas] .at-live-name{ font-family:var(--at-mono);font-size:var(--at-fs-value);font-weight:600; letter-spacing:.4px;color:var(--t1); } [data-atlas] .at-live-meta{ font-family:var(--at-mono);font-size:9px;letter-spacing:.9px;color:var(--t3); } /* PAST THE PUBLISHED FRESHNESS BOUND. Named in the negative ink the surface already uses for a figure that has gone wrong, because a stale operational position is the one state in which this block is actively misleading and the reader has no other way to know. */ [data-atlas] .at-live-stale{color:var(--neg)} [data-atlas] .at-live-go{letter-spacing:.7px} /* A LABELLED READING. Micro-label and its qualification on one line, the value in mono beneath at full width -- so a position WRAPS rather than truncating, and the label never degrades to an unreadable stub the way a leader-dot row's does inside a 320px sheet. THE QUALIFICATION IS SET IN THE LABEL'S OWN INK, not smaller and not dimmer. THE COHORT IS KEYED HERE and NOT USED FOR MATCHING are the two most consequential strings in this block: they are what stop a reader taking the operational position for the one the population was built from. Demoting them typographically would be demoting the only thing that distinguishes the two readings. */ [data-atlas] .at-live-rd{padding:4px 0 0;min-width:0} [data-atlas] .at-live-rd-k{ display:flex;align-items:baseline;gap:8px;justify-content:space-between; font-family:var(--at-mono);font-size:9px;letter-spacing:1px;color:var(--t2);min-width:0; } /* --t3, NOT --t4, and the adherence gate is why. `--t4` is designated MARKS ONLY in the dark shell's ink table -- it paints hairlines and mark glyphs, never a glyph a reader is meant to read -- and check-atlas-adherence.mjs fails any `color:` that uses it. The first draft of this rule reached for it to make the qualification recede, which would have set THE COHORT IS KEYED HERE and NOT USED FOR MATCHING in mark ink: the two strings in this block that most need to be read, demoted below body contrast, on the gate's own list of things that must not happen. */ [data-atlas] .at-live-rd-k em{ font-style:normal;color:var(--t3);letter-spacing:.7px;text-align:right;flex:0 1 auto; } [data-atlas] .at-live-rd-v{ font-family:var(--at-mono);font-size:var(--at-fs-value);font-variant-numeric:tabular-nums; color:var(--t1);line-height:1.45;white-space:normal;overflow-wrap:break-word;margin-top:1px; } [data-atlas] .at-live-rd-dim .at-live-rd-v{color:var(--t2)} /* THE SELECTED STORM'S STRIP. The minimum the locked rules ask for -- what the archive recorded, how much of the evidence this storm is in, and the way to a cohort -- with the whole record one press away. It is the panel's first screen, not a replacement for it. */ /* THE STRIP TAKES ITS CONTENT'S HEIGHT, NOT THE COLUMN'S SLACK. * * At `flex:1 1 auto` it absorbed everything the head and the bridge did not want, and since the * bridge is the last block in the column that slack landed BETWEEN them: measured with Carlotta * selected, 71px at 1440x900, 251 at 1920x1080 and 339 stacked at 1056x816, as a void bounded * above by the OPEN RECORD control and below by the bridge's accent rule. Two blocks of equal * weight held apart by nothing reads as a layout that failed rather than as a column that ended. * * Sized to its content the five facts and their control close up under the identity, the bridge * follows immediately beneath them, and the same empty pixels fall at the FOOT of the column, * where a column ending is what they look like. Nothing is added, removed, or made denser. * * ONLY IN THIS STATE. With the record open the strip is not rendered at all and the BODY is the * elastic block -- the one the design nominates as the one that scrolls -- so the bridge is * pinned by a full-height sibling exactly as before, which is what check-inspector-bridge * asserts by driving that body to its full scroll extent. */ [data-atlas] .at-insp-strip{flex:0 1 auto;min-height:0;overflow-y:auto} /* ─── the paper set, above and below the plate ──────────────────────────────────────────── * * THE PLATE IS ONE UNINTERRUPTED RECTANGLE. Both dark bands are gone from inside it — a head * band across the top and a foot band across the bottom, each a strip of chrome laid over * cartography — and their words are set in PAPER immediately above and below, aligned to the * plate's own edges. That is how a plate in a journal is captioned, it returns the 58px the two * bands were using, and it is the difference between reading as a plate and reading as a panel. * * THEY ARE OUTSIDE `.atlas-stage`, WHICH IS THE PART THAT HAD TO BE STRUCTURAL. The stage * re-declares the whole dark ink ramp for its own subtree inside the light shell, because * everything drawn over cartography inherits the surface's text tokens. A caption left inside * that boundary would resolve near-white ink on a near-white ground. So the stage now wraps * exactly the rectangle and the captions are its siblings. * * THE LIVE READOUT ON PAPER IS 5c's ONE NAMED RISK: during a pan the coordinate changes just off * the map. The mitigation is position — left-aligned to the plate's own edge, immediately * beneath it, so it reads as the plate's footer rather than as a figure floating on the page. */ [data-atlas] .at-platehead,[data-atlas] .at-platefoot{ flex:none;display:flex;align-items:center;gap:16px;min-width:0; font-family:var(--at-mono);font-size:var(--at-t5);letter-spacing:1.1px; color:var(--t3);text-transform:uppercase;white-space:nowrap;overflow:hidden; background:none;border:0;padding:0; } [data-atlas] .at-platehead{padding:0 0 8px} [data-atlas] .at-platefoot{padding:9px 0 0;letter-spacing:1px} [data-atlas] .at-platehead > span,[data-atlas] .at-platefoot > span{ min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto; } [data-atlas] .at-platehead em,[data-atlas] .at-platefoot em{font-style:normal;color:var(--t2)} /* THE HEAD'S THREE ITEMS DO NOT SHRINK; THEY GIVE WAY WHOLE, BELOW. `.at-platehead > span` lets a span ellipsise, which is right for a count and wrong for a control: the third mode was losing its last letters. Measured with Plex Mono at the head's step: title 277, modes 287, aperture 178, two gaps -- 768 with everything, 590 without the aperture. */ [data-atlas] .at-platehead > .at-plate-title{color:var(--t1);flex:none} [data-atlas] .at-platehead > .at-plate-modes{flex:none;margin-left:0} [data-atlas] .at-plate-counts{flex:0 1 auto;min-width:0} [data-atlas] .at-plate-mode{color:var(--flag);flex:none} /* ─── the plate's mode segment ──────────────────────────────────────────────────────────── * * WHAT THE PLATE COUNTS, ON THE PLATE. Pathway counts / Genesis counts / Tracks -- three * readings of the same storms, and a map-dependent control, so it sits on the plate's own head * beside the aperture rather than in the clause editor, which changes the QUESTION. Three real * buttons: in the tab order, pressable by Enter and Space, and carrying aria-pressed, so the * reading of the plate is reachable and announced without a pointer. * * IT IS APPARATUS, AT THE APPARATUS STEP. 9.5px mono, the plate head's own size, in the head's * own ink -- the pressed one takes the surface's text ink and a hairline under it rather than a * fill, because a filled pill on a caption line reads as a second heading. */ [data-atlas] .at-plate-modes{ display:flex;align-items:center;gap:2px;flex:none;margin-left:var(--at-s3); } [data-atlas] .at-plate-modebtn{ font-family:var(--at-mono);font-size:var(--at-t5);letter-spacing:1.1px;text-transform:uppercase; color:var(--t3);background:transparent;border:0;border-bottom:1px solid transparent; padding:2px var(--at-s2) 1px;cursor:pointer;white-space:nowrap; } [data-atlas] .at-plate-modebtn:hover{color:var(--t2)} [data-atlas] .at-plate-modebtn[aria-pressed="true"]{ color:var(--t1);border-bottom-color:var(--rule-4); } /* THE CELL UNDER THE POINTER, AS A LITERAL COUNT. The density surface shades by pow(c/max) so structure reads across a cohort; this is the count itself, for the cell the pointer or the keyboard reticle is on. A shaded cell whose count cannot be read is a probability surface wearing a legend. It sits with the measure, and it is the first thing that line gives up when the plate narrows -- the shading is still legible without it, and the readout is a hover affordance a narrow plate has no room for anyway. */ [data-atlas] .at-plate-cellread{ font-family:var(--at-mono);font-size:var(--at-t5);letter-spacing:1px;color:var(--t2); flex:none;white-space:nowrap; } /* WHAT IS HELD, ON THE PLATE'S OWN FOOT. The held row's already-published figures, echoed -- the plate computes nothing here. It sits with the class key because it is a reading aid for the ink above it, and it gives up its own words before the key does. */ /* IT IS NEVER CUT: an echo that ellipsises inside a figure has echoed a different figure. It gives way whole -- to the cell readout while the pointer is on a cell, and below the width at which it fits beside the key and the measure. */ [data-atlas] .at-plate-lens{ font-family:var(--at-mono);font-size:var(--at-t5);letter-spacing:1px;color:var(--t2); flex:none;white-space:nowrap; } /* THE SLOT'S PRIORITY: a held row or a brushed rectangle is a deliberate gesture and its count is the result of it, so it outranks the cell under a pointer that merely happens to be on the plate; a row that is only hovered does not. */ [data-atlas] .at-platefoot:has(.at-plate-cellread:not(:empty)) .at-plate-lens:not([data-lens-held]){display:none} [data-atlas] .at-platefoot:has(.at-plate-lens[data-lens-held]) .at-plate-cellread{display:none} [data-atlas] .at-plate-lens em{font-style:normal;color:var(--t1)} /* ─── the keyboard's hands on the plate ─────────────────────────────────────────────────── * * The map's primary gesture is a click on the ocean, and a control only a pointer can reach is * not a control. RETICLE turns the arrow keys into a crosshair; Enter does what a click does. * The control itself is the third item of the camera bar (`.at-mapnav`, above). */ /* THE CROSSHAIR ITSELF, on the plate, where the pointer's cursor would be. Drawn in the plate's own accent so it reads as an instrument's reticle rather than as a finding. */ [data-atlas] .at-reticle{ position:absolute;width:23px;height:23px;margin:-12px 0 0 -12px;pointer-events:none;z-index:460; } [data-atlas] .at-reticle::before,[data-atlas] .at-reticle::after{ content:"";position:absolute;background:var(--plate-accent); } [data-atlas] .at-reticle::before{left:11px;top:0;width:1px;height:23px} [data-atlas] .at-reticle::after{top:11px;left:0;height:1px;width:23px} /* THE BRUSH. A dashed rectangle while it is dragged, a quieter one once it is set: the first is a gesture and the second is a statement about which water is being asked about. Neither is evidence -- nothing is published from either -- so both are drawn in chrome ink. */ [data-atlas] .at-brushbox{ position:absolute;z-index:455;pointer-events:none; border:1px dashed var(--plate-accent);background:rgba(79,195,247,.07); } [data-atlas] .at-brushbox-set{border-style:solid;background:rgba(79,195,247,.05)} /* The one thing on this surface that is spoken and not shown. */ [data-atlas] .at-sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } [data-atlas] .at-platehead .at-r,[data-atlas] .at-platefoot .at-r{ margin-left:auto;text-align:right;flex:none;color:var(--t3); } [data-atlas] .at-plate{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--stage)} /* THE MEASURE. Scale bar, projection and the live coordinate, right-aligned on the same line as the class key so the key leads and the instrument's own settings follow it. */ [data-atlas] .at-plate-measure{ margin-left:auto;flex:none;display:flex;align-items:center;gap:13px; } [data-atlas] .at-scalebar{display:flex;align-items:center;gap:7px;flex:none} /* A SINGLE RULE, NOT A BRACKETED BAR. On paper under a plate the bar is a measure rather than a piece of chrome, and its LENGTH is the whole of what it says — which is computed in map.jsx from the projection's own answer at the plate's rendered size, never stored. */ [data-atlas] .at-scalebar i{height:1px;display:block;background:var(--rule-3)} [data-atlas] .at-scalebar em{font-style:normal;color:var(--t3)} /* ─── the Saffir-Simpson key ────────────────────────────────────────────────────────────── * * COMPACT, SUBORDINATE, AND NEVER REMOVED FOR MINIMALISM. The plate colours every fix by the * class it had reached; a coloured map with no key is a map that cannot be read, so the key is * present wherever class-coloured tracks are — at 9.5px, the smallest step the frame has, on the * paper line directly beneath the plate. * * EACH SWATCH CARRIES THE PLATE'S OWN GROUND. The cartographic ramp was chosen against a * near-black stage: on paper #4fc3f7 measures 1.8:1, below the 3:1 WCAG 1.4.11 asks of a * graphical object that carries meaning. So a swatch is a tile of the stage with the class * stroke inside it — a two-millimetre sample of the plate rather than a colour chip. The * identity ink is unchanged, the contrast is the one the reader sees on the map itself, and the * sample says what it is a sample OF. */ /* THE KEY DOES NOT SHRINK, AND THE ECHO DOES. Both sit on the plate's foot, and with a row held there was more on that line than it could hold -- so the key gave up Category 4 and 5, which is the one thing this file has always said it may not do: a coloured map with no key is a map that cannot be read, and half a key is worse than none because it looks complete. The echo is a reading aid for a row whose figures are already published two feet to the right; it ellipsises, and the key stays whole. The stroke NOTE beside it keeps its own truncation, because a note is prose and a swatch is a class. */ [data-atlas] .at-classkey,[data-atlas] .at-platefoot > .at-classkey{ display:flex;align-items:center;gap:9px;flex:none;min-width:0;overflow:hidden; } [data-atlas] .at-classkey-item{display:flex;align-items:center;gap:5px;flex:none;color:var(--t3)} [data-atlas] .at-classkey-sw{ display:block;flex:none;background:var(--stage);padding:2px;line-height:0; } [data-atlas] .at-classkey-sw i{display:block;width:15px} [data-atlas] .at-classkey-major{color:var(--t3);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} /* ─── Figure 1 ──────────────────────────────────────────────────────────────────────────── * * A SERIF SENTENCE UNDER THE PLATE, NAMING WHAT IS DRAWN. The one borrowing from 5b, and the * thing that turns a map into a figure: what the ink is, which coastlines the landfall rule is * written against and which are context, and the two gestures. It is subordinate to the plate — * 11.5px against a 30px question — and it explains the plate's ink, which is the only reason it * is allowed to sit under it. */ [data-atlas] .at-plate-figure{ flex:none;display:flex;align-items:flex-start;gap:22px;padding:9px 0 0;min-width:0; } [data-atlas] .at-plate-caption{ margin:0;min-width:0;max-width:78ch; font-family:var(--at-sans);font-size:var(--at-fs-cohort);line-height:1.5; color:var(--t2);text-wrap:pretty; } [data-atlas] .at-plate-caption em{font-style:italic;color:var(--t1)} [data-atlas] .at-plate-gesture{color:var(--t3)} [data-atlas] .at-plate-hint{color:var(--accent)} /* THE DEGRADED COASTLINE IS NOT A CAPTION DETAIL. With the archive's rings absent the plate is drawing a line the landfall rule was never written against, and that is a provenance failure rather than a note — so it takes the flag ink at full weight, inside the sentence. */ [data-atlas] .at-plate-model{color:var(--flag);font-weight:400} [data-atlas] .at-plate-acts{ margin-left:auto;flex:none;display:flex;align-items:baseline;gap:14px; font-family:var(--at-mono);font-size:var(--at-t5);letter-spacing:1px;color:var(--t3); } /* Clear of the plate's own bottom-right, where Leaflet draws its attribution. */ [data-atlas].atlas-instrument .at-legend{bottom:calc(var(--at-band-bot) + var(--at-plate-gutter))} /* THE DECK'S FOOT. Spans every column, because what it says qualifies every row above it. */ [data-atlas] .at-deck-foot{ grid-column:1/-1; display:flex;flex-direction:column;gap:var(--at-s2); padding:var(--at-s3) 0 var(--at-s4); border-top:1px solid var(--rule-2); } [data-atlas] .at-foot-block{ display:flex;align-items:baseline;gap:var(--at-s2);flex-wrap:wrap;min-width:0; } [data-atlas] .at-foot-k{ flex:none;font-family:var(--at-mono);font-size:var(--at-fs-label); letter-spacing:var(--at-tr-label);text-transform:uppercase;color:var(--t3); } [data-atlas] .at-foot-line{ font-family:var(--at-sans);font-size:var(--at-fs-row);line-height:1.45;color:var(--t2); min-width:0; } [data-atlas] .at-deck-foot .at-mark{ flex:none;width:11px;text-align:center;font-family:var(--at-mono); font-size:var(--at-fs-label);color:var(--t3); } [data-atlas] .at-fold-btn{ flex:none;font-family:var(--at-mono);font-size:var(--at-fs-label); letter-spacing:var(--at-tr-label);text-transform:uppercase; background:transparent;border:1px solid var(--rule-2);color:var(--accent); padding:1px var(--at-s2);cursor:pointer; } [data-atlas] .at-fold-btn:hover{border-color:var(--accent)} /* THE DECK'S PREAMBLE. Spans every column: the count, the gate, the effective sample and what the rates assume all qualify the whole table rather than any row of it. */ [data-atlas] .at-deck-pre{grid-column:1/-1;padding:var(--at-s3) 0 var(--at-s2)} [data-atlas] .at-pre-line{ display:flex;align-items:baseline;gap:var(--at-s3);flex-wrap:wrap;min-width:0; margin-bottom:var(--at-s1); } [data-atlas] .at-pre-n{ font-family:var(--at-mono);font-size:var(--at-fs-figure);line-height:1;color:var(--t1); } [data-atlas] .at-pre-ok,[data-atlas] .at-pre-no,[data-atlas] .at-pre-shape{ font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:var(--at-tr-label); } [data-atlas] .at-pre-ok{color:var(--pos)} [data-atlas] .at-pre-no{color:var(--neg)} [data-atlas] .at-pre-shape{color:var(--t3);margin-left:auto} [data-atlas] .at-pre-prose{ font-family:var(--at-sans);font-size:var(--at-fs-row);line-height:1.45;color:var(--t2); } [data-atlas] .at-pre-assume,[data-atlas] .at-deck-env{grid-column:1/-1} [data-atlas] .at-pre-assume > summary,[data-atlas] .at-deck-env > summary{ font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:var(--at-tr-label); text-transform:uppercase;color:var(--t3);cursor:pointer;padding:var(--at-s1) 0; } [data-atlas] .at-pre-assume > summary:hover,[data-atlas] .at-deck-env > summary:hover{color:var(--t1)} [data-atlas] .at-pre-assume p{margin:0 0 var(--at-s2)} [data-atlas] .at-deck-env{border-top:1px solid var(--rule-2);padding-top:var(--at-s2)} [data-atlas] .at-env-body{padding-bottom:var(--at-s3)} /* ─── the table's foot ──────────────────────────────────────────────────────────────────── * * SPANS EVERY COLUMN, BECAUSE IT QUALIFIES EVERY ROW. What the last edit did and what the whole * VS ARCHIVE column is measured against are facts about the table, not about any rung of it. * * `.at-changed` already carries its own top rule and padding -- it was written for exactly this * position -- so the block adds none of its own around it, and the baseline sits beneath on the * same hairline rhythm the deck uses everywhere else. */ [data-atlas] .at-deck-foot-block{grid-column:1/-1} [data-atlas] .at-deck-baseline{ padding:var(--at-s3) var(--at-s5) var(--at-s4); border-top:1px solid var(--rule-2); /* THE ONE 2px RULE THIS BLOCK IS ALLOWED. A box may only exist where two planes meet, and the baseline is a different plane from the ladder: everything above is this cohort, everything stated here is the OTHER population the deltas are against. */ border-left:2px solid var(--rule-3); max-width:88ch; } [data-atlas] .at-deck-baseline .at-foot-line{margin:2px 0 0;color:var(--t1)} [data-atlas] .at-foot-fig{ margin:var(--at-s1) 0 0; font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:var(--at-tr-label); color:var(--t3); } /* THE CAVEAT IS NOT AN ERROR AND IS NOT PAINTED AS ONE -- no tint, no box, no coloured ground. It is the sentence engine/compare.js wrote about how the two populations overlap, and it is held to the body contrast bar because a reader who misses it misreads every delta above. */ [data-atlas] .at-foot-note{ margin:var(--at-s2) 0 0; font-family:var(--at-sans);font-size:var(--at-fs-row);line-height:1.45;color:var(--t2); } [data-atlas] .at-foot-none{ margin:var(--at-s2) 0 0; font-family:var(--at-sans);font-size:var(--at-fs-row);line-height:1.45;color:var(--neg); } /* THE ARCHIVE RAISING ITS HAND, INSIDE A PARAGRAPH. Same ink as every other flag on the surface, which on paper is the burnt amber and on the dark chrome the bright one. */ [data-atlas] .at-foot-flag{color:var(--flag)} [data-atlas] .at-deck-cite{ grid-column:1/-1;padding:var(--at-s3) var(--at-s5) var(--at-s5); border-top:1px solid var(--rule-2); } [data-atlas] .at-deck-cite .at-foot-k{display:block;margin-bottom:var(--at-s2)} [data-atlas] .at-foot-holdout{ display:flex;align-items:center;flex-wrap:wrap;gap:var(--at-s1); margin-top:var(--at-s3); } [data-atlas] .at-deck-empty{grid-column:1/-1;padding:var(--at-s4) 0;max-width:76ch} [data-atlas] .at-empty-k{ font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:var(--at-tr-label); color:var(--flag);margin-bottom:var(--at-s3); } [data-atlas] .at-deck-empty p{margin:0 0 var(--at-s3)} /* THE METHODOLOGY NOTICE IS OUT OF FLOW, AND THAT IS STRUCTURAL RATHER THAN COSMETIC. It renders only when a shared URL was written under a different methodology than the one now loaded -- rare, and important enough to interrupt. As a grid child it became a SEVENTH row in a six-row model: measured, it displaced every track and took the plate to aspect 4.235, outside its ceiling. Out of flow it interrupts without moving anything. */ [data-atlas].atlas-instrument [data-methodology-moved]{ position:absolute;top:70px;left:0;right:0;z-index:820;margin:0; background:var(--chrome-hi); } /* ─── one shell ───────────────────────────────────────────────────────────────────────── * * THE PAPER SHELL IS RETIRED AS A SELECTABLE SURFACE. The Atlas ships one skin -- Handoff B's * charcoal, declared at the top of the token block -- and there is no `data-shell` attribute, * no stored preference and no selector that remaps the semantic inks. The `--at-paper-*` and * `--at-bar-*` tokens above are RETAINED, unread, for Direction C (the CITE / export treatment, * which is the one place a paper plate belongs); scripts/check-atlas-adherence.mjs still pins * their values so the export direction inherits a verified ramp rather than a stale one, and it * asserts that no shell selector has come back. */ /* ─── the forward outcome view ───────────────────────────────────────────────────────────── * * PAGE WIDTH, IN FLOW, ABOVE THE EVIDENCE MATRIX. It is a second instrument and not a card: it * needs the measure, it scrolls with the page, and it renders only when the cohort on screen is * keyed to a live system's derived genesis and a reader has asked for the official forecast. * * TWO LAYOUTS, AND THE BREAKPOINT HIDES ONE OUTRIGHT. Below 860px the SVG plate is `display:none` * and the row stack takes over; above it the row stack is gone. Neither is the other scaled -- * the plate's 1600-unit viewBox at 600px renders its 9px labels near 3px, which makes the chart * decoration, so it is not shown at a size it was not drawn for. * * ON THE INKS. The prototype used --t4 for its most recessive text. It is a MARK ink on this * surface -- 3.80:1 on the raised plane, 2.38:1 on the chrome -- and the shell's ink table says * it carries no text, in CSS `color` and in SVG `fill` alike; the adherence gate reads the first * and the contrast floor governs both. So every recessive string here is --t3, the shell's own * secondary text ink, and the three-tier hierarchy is carried by SIZE and TRACKING (13.5 / 10 / * 9px, mono, with letter-spacing rising as the size falls) rather than by a fourth tone. --t4 and * --rule-4 appear below only on hairlines, voids and rings. */ [data-atlas].atlas-instrument .atlas-forward{ display:block;min-width:0; padding:var(--at-s7) var(--at-pad) 0; background:var(--chrome); } [data-atlas] .at-fo-kick{ display:flex;justify-content:space-between;align-items:baseline;gap:var(--at-s5); font-family:var(--at-mono);font-size:var(--at-fs-stamp);letter-spacing:var(--at-tr-label); color:var(--t3);border-bottom:1px solid var(--rule-2);padding-bottom:var(--at-s2); } /* THE HERO IS ONE SENTENCE AND IT IS THE CLAIM. Sans, large, unspaced -- the only element on this instrument set in prose rather than in mono, because it is the one thing a reader reads as a statement instead of as a reading. */ [data-atlas] .at-fo-hero{ font-family:var(--at-sans);font-size:31px;font-weight:400;letter-spacing:-.4px; line-height:1.14;margin:var(--at-s6) 0 0;max-width:1180px;color:var(--t1);text-wrap:pretty; } [data-atlas] .at-fo-hero b{font-weight:600} [data-atlas] .at-fo-stand{ font-family:var(--at-mono);font-size:var(--at-fs-value);letter-spacing:.2px; color:var(--t2);margin-top:var(--at-s3); } /* SUBORDINATE BY SIZE, NOT BY TONE. */ [data-atlas] .at-fo-qual{ font-family:var(--at-mono);font-size:var(--at-fs-stamp);letter-spacing:var(--at-tr-stamp); color:var(--t3);margin-top:var(--at-s2);line-height:1.7; } [data-atlas] .at-fo-qual b{color:var(--t2);font-weight:400} [data-atlas] .at-fo-qual code{ font-family:var(--at-mono);color:var(--t3);display:block;margin-top:2px; overflow-wrap:anywhere; } [data-atlas] .at-fo-cond{ display:flex;gap:var(--at-s5);align-items:baseline;flex-wrap:wrap; margin:var(--at-s6) 0 0;padding:var(--at-s4) 0 0;border-top:1px solid var(--rule); } [data-atlas] .at-fo-ck{ flex:none;font-family:var(--at-mono);font-size:var(--at-fs-stamp); letter-spacing:var(--at-tr-label);color:var(--flag); } [data-atlas] .at-fo-cv{ flex:1 1 440px;font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:.3px; color:var(--t3);line-height:1.65; } [data-atlas] .at-fo-cv b{color:var(--t1);font-weight:400} [data-atlas] .at-fo-cd{ flex:none;font-family:var(--at-mono);font-size:var(--at-fs-stamp);letter-spacing:.4px; color:var(--t3);cursor:help; } [data-atlas] .at-fo-cd b{color:var(--t2);font-weight:400} [data-atlas] .at-fo-cdim{color:var(--t3);opacity:.72;margin-left:5px} /* THE FIVE-SECOND READ. Two cells, one rule between them, and each names what KIND of thing its marks are -- carried, or computed. */ [data-atlas] .at-fo-layers{ display:grid;grid-template-columns:1fr 1fr;gap:0;margin:var(--at-s7) 0 0; border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2); } [data-atlas] .at-fo-layer{padding:var(--at-s4) 0;display:flex;gap:var(--at-s4);align-items:flex-start} [data-atlas] .at-fo-layer+.at-fo-layer{ padding-left:var(--at-s7);border-left:1px solid var(--rule); } [data-atlas] .at-fo-sw{flex:none;width:44px;height:16px;margin-top:2px} [data-atlas] .at-fo-swline{stroke:var(--t1);stroke-width:2} [data-atlas] .at-fo-swring{fill:var(--stage);stroke:var(--t1);stroke-width:2} [data-atlas] .at-fo-swbox{fill:var(--at-population);opacity:.46} [data-atlas] .at-fo-swmed{fill:var(--at-population)} [data-atlas] .at-fo-nm{ font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:var(--at-tr-label); color:var(--t1);display:block;margin-bottom:var(--at-s1); } [data-atlas] .at-fo-ds{ font-family:var(--at-mono);font-size:var(--at-fs-stamp);letter-spacing:.4px;color:var(--t3); line-height:1.55;display:block; } [data-atlas] .at-fo-ds em{font-style:normal;color:var(--t2)} /* ── the plate ── */ /* THE PLATE'S TYPE HOLDS ITS SIZE WHILE THE PLATE SCALES, and this is the correction the * prototype needed rather than a change to what it drew. * * MEASURED, AT HALF SCREEN. The plate is a 1600-unit viewBox at `width:100%`, so at a 960px * viewport it renders at 0.57 and its 9px labels reach the screen at 5px: KNOTS · ONE AXIS, every * threshold, both clock rows, the attrition heading and the callout carrying the finding were all * illegible, and the drawing they annotate became decoration. That is precisely the failure the * narrow layout was purpose-built to avoid, arriving through the one band nobody had looked at -- * above the 860px breakpoint, where the plate is still shown. * * Neither obvious fix works. Raising the breakpoint until the type is legible unaided puts it at * about 1500px, which would hide the plate at 1440 -- the workstation band this surface is * designed for. Leaving it is the illegible plate. * * So the geometry, the marks, the gutters and the hierarchy are all exactly as approved, and ONE * variable multiplies the label sizes so they reach the screen at the size they were drawn to * reach it. The bands below are the page's own padding bands, and each factor is 0.95 (the * reference scale at a 1600px viewport) over that band's plate scale. */ [data-atlas] svg.at-fo-plate{ --at-fo-ts:1; display:block;width:100%;height:auto;margin-top:var(--at-s1); } @media (max-width:1599px){ [data-atlas] svg.at-fo-plate{--at-fo-ts:1.10} } @media (max-width:1439px){ [data-atlas] svg.at-fo-plate{--at-fo-ts:1.30} } @media (max-width:1179px){ [data-atlas] svg.at-fo-plate{--at-fo-ts:1.67} } [data-atlas] .at-fo-grid{stroke:var(--rule);stroke-width:1;stroke-dasharray:2 5} [data-atlas] .at-fo-axis{stroke:var(--rule-3);stroke-width:1} [data-atlas] .at-fo-gridlab,[data-atlas] .at-fo-axlab{ font-family:var(--at-mono);font-size:calc(9px * var(--at-fo-ts)); letter-spacing:calc(1px * var(--at-fo-ts));fill:var(--t3); } /* HISTORY: one hue, a body and a rule. Magnitude, so one hue and no ramp -- a class ramp here would put SELECTION-coloured marks on a population nobody selected. */ [data-atlas] .at-fo-hbody{fill:var(--at-population);opacity:.46} [data-atlas] .at-fo-hmed{fill:var(--at-population)} [data-atlas] .at-fo-hist.at-fo-head .at-fo-hbody{opacity:.66} /* OFFICIAL: achromatic, so it cannot be read as one of the archive's own classes. */ [data-atlas] .at-fo-oline{fill:none;stroke:var(--t1);stroke-width:2;stroke-linejoin:round} [data-atlas] .at-fo-oring{fill:var(--stage);stroke:var(--t1);stroke-width:2} [data-atlas] .at-fo-off.at-fo-head .at-fo-oring{stroke:var(--flag);stroke-width:2.5} [data-atlas] .at-fo-tick line{stroke:var(--rule-3);stroke-width:1} [data-atlas] .at-fo-tick.at-fo-head line{stroke:var(--flag)} [data-atlas] .at-fo-tz{ font-family:var(--at-mono);font-size:calc(10px * var(--at-fo-ts)); letter-spacing:calc(.6px * var(--at-fo-ts));fill:var(--t2);text-anchor:middle; } [data-atlas] .at-fo-tg{ font-family:var(--at-mono);font-size:calc(10px * var(--at-fo-ts)); letter-spacing:calc(.6px * var(--at-fo-ts));fill:var(--t3);text-anchor:middle; } [data-atlas] .at-fo-tick.at-fo-head .at-fo-tz{fill:var(--t1)} [data-atlas] .at-fo-tick.at-fo-head .at-fo-tg{fill:var(--flag)} [data-atlas] .at-fo-headrule{stroke:var(--flag);stroke-width:1;stroke-dasharray:3 4;opacity:.55} /* THE VOID IS A HAIRLINE AND THE BAR IS A MARK. Neither carries text. */ [data-atlas] .at-fo-avoid{fill:none;stroke:var(--rule-2);stroke-width:1} [data-atlas] .at-fo-abar{fill:var(--at-population);opacity:.34} [data-atlas] .at-fo-att.at-fo-head .at-fo-abar{opacity:.55} [data-atlas] .at-fo-att.at-fo-head .at-fo-avoid{stroke:var(--rule-4)} [data-atlas] .at-fo-aend{ font-family:var(--at-mono);font-size:calc(9px * var(--at-fo-ts));fill:var(--t3); text-anchor:middle; } [data-atlas] .at-fo-att.at-fo-head .at-fo-aend{fill:var(--flag)} [data-atlas] .at-fo-an{ font-family:var(--at-mono);font-size:calc(10px * var(--at-fo-ts));fill:var(--t3); text-anchor:middle; } [data-atlas] .at-fo-att.at-fo-head .at-fo-an{fill:var(--t1);font-weight:600} [data-atlas] .at-fo-clocklab{ font-family:var(--at-mono);font-size:calc(9px * var(--at-fo-ts)); letter-spacing:calc(1.1px * var(--at-fo-ts));fill:var(--t3);text-anchor:end; } [data-atlas] .at-fo-callout{ font-family:var(--at-mono);font-size:calc(10.5px * var(--at-fo-ts)); letter-spacing:calc(.5px * var(--at-fo-ts));fill:var(--t2); } [data-atlas] .at-fo-callout .at-fo-cb{fill:var(--t1);font-weight:600} [data-atlas] .at-fo-callout .at-fo-cf{fill:var(--flag);font-weight:600} [data-atlas] .at-fo-serieslab{ font-family:var(--at-mono);font-size:calc(10px * var(--at-fo-ts)); letter-spacing:calc(1px * var(--at-fo-ts)); } [data-atlas] .at-fo-series-off{fill:var(--t1)} [data-atlas] .at-fo-series-pop{fill:var(--at-population)} /* ── the narrow layout: a row per instant, read DOWN, intensity read ACROSS ── */ [data-atlas] .at-fo-narrow{display:none} @media (max-width:860px){ [data-atlas] svg.at-fo-plate{display:none} [data-atlas] .at-fo-narrow{display:block} [data-atlas] .at-fo-hero{font-size:23px;letter-spacing:-.2px} [data-atlas] .at-fo-layers{grid-template-columns:1fr} [data-atlas] .at-fo-layer+.at-fo-layer{ padding-left:0;border-left:0;border-top:1px solid var(--rule); } [data-atlas] .at-fo-cd{flex:1 1 100%} } [data-atlas] .at-fo-nkey{ display:flex;gap:var(--at-s4);align-items:center;flex-wrap:wrap;margin:var(--at-s6) 0 0; font-family:var(--at-mono);font-size:var(--at-fs-stamp);letter-spacing:1px;color:var(--t3); } [data-atlas] .at-fo-nkey span{display:flex;gap:var(--at-s2);align-items:center} [data-atlas] .at-fo-nkey .at-fo-kr{margin-left:auto} [data-atlas] .at-fo-nkey i{display:block;flex:none} [data-atlas] .at-fo-kn{width:11px;height:11px;border:2px solid var(--t1);border-radius:50%} [data-atlas] .at-fo-kb{width:22px;height:11px;background:var(--at-population);opacity:.46} [data-atlas] .at-fo-km{width:2px;height:13px;background:var(--at-population)} [data-atlas] .at-fo-nscale{ position:relative;height:16px;margin:var(--at-s5) 0 2px;padding-left:82px;padding-right:56px; } [data-atlas] .at-fo-nscale b{ position:absolute;transform:translateX(-50%);font-family:var(--at-mono);font-size:8.5px; letter-spacing:.8px;color:var(--t3);font-weight:400; } [data-atlas] .at-fo-nrow{ display:flex;align-items:center;gap:0;padding:11px 0;border-top:1px solid var(--rule); } [data-atlas] .at-fo-nrow.at-fo-nhead{background:color-mix(in srgb,var(--flag) 6%,transparent)} [data-atlas] .at-fo-nlead{flex:none;width:82px;display:flex;flex-direction:column;gap:2px} [data-atlas] .at-fo-nlead b{ font-family:var(--at-mono);font-size:var(--at-fs-value);font-weight:600;color:var(--t1); letter-spacing:.2px; } [data-atlas] .at-fo-nrow.at-fo-nhead .at-fo-nlead b{color:var(--flag)} [data-atlas] .at-fo-nlead span{ font-family:var(--at-mono);font-size:8.5px;letter-spacing:.5px;color:var(--t3); } [data-atlas] .at-fo-ntrack{position:relative;flex:1 1 auto;height:26px} [data-atlas] .at-fo-ntick{position:absolute;top:2px;bottom:2px;width:1px;background:var(--rule)} [data-atlas] .at-fo-nbox{position:absolute;top:7px;height:12px;background:var(--at-population);opacity:.46} [data-atlas] .at-fo-nrow.at-fo-nhead .at-fo-nbox{opacity:.62} [data-atlas] .at-fo-nmed{position:absolute;top:3px;height:20px;width:2px;background:var(--at-population)} [data-atlas] .at-fo-nnhc{ position:absolute;top:6px;width:14px;height:14px;margin-left:-7px;border-radius:50%; border:2px solid var(--t1);background:var(--stage); } [data-atlas] .at-fo-nrow.at-fo-nhead .at-fo-nnhc{ border-color:var(--flag);width:16px;height:16px;top:5px;margin-left:-8px; } [data-atlas] .at-fo-nnhclab{ position:absolute;top:-6px;transform:translateX(-50%);font-family:var(--at-mono); font-size:var(--at-fs-stamp);font-weight:600;color:var(--t2);letter-spacing:.2px; } [data-atlas] .at-fo-nrow.at-fo-nhead .at-fo-nnhclab{color:var(--flag)} [data-atlas] .at-fo-nden{ flex:none;width:56px;text-align:right;font-family:var(--at-mono); font-variant-numeric:tabular-nums; } [data-atlas] .at-fo-nden b{display:block;font-size:13px;font-weight:600;color:var(--t1)} [data-atlas] .at-fo-nden em{ display:block;font-style:normal;font-size:var(--at-fs-stamp);color:var(--t3);margin-top:1px; } [data-atlas] .at-fo-nden em.at-fo-nz{opacity:.55} /* THE CLAIM RIDES WITH THE ROW IT IS ABOUT, indented to the track it reads off. */ [data-atlas] .at-fo-nsay{ font-family:var(--at-mono);font-size:11px;letter-spacing:.2px;color:var(--t2); padding:0 0 12px 82px;background:color-mix(in srgb,var(--flag) 6%,transparent); } [data-atlas] .at-fo-nsay b{color:var(--t1);font-weight:600} [data-atlas] .at-fo-nfoot{ font-family:var(--at-mono);font-size:var(--at-fs-stamp);letter-spacing:.3px;color:var(--t3); line-height:1.7;border-top:1px solid var(--rule);padding-top:11px; } [data-atlas] .at-fo-nfoot b{color:var(--t2);font-weight:400} /* ── the ledgers underneath ── */ [data-atlas] .at-fo-grouprule{ border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);height:3px; /* 40px: block separation plus a strip gap. This instrument's negative space is what keeps the plate reading as a plate rather than as the top of a table. */ margin:calc(var(--at-s7) + var(--at-s4)) 0 0; } [data-atlas] .at-fo-h{ font-family:var(--at-mono);font-size:var(--at-fs-label);letter-spacing:1.6px;color:var(--t2); font-weight:400;margin:var(--at-s6) 0 var(--at-s1); display:flex;justify-content:space-between;align-items:baseline;gap:var(--at-s5); } [data-atlas] .at-fo-h span{color:var(--t3);letter-spacing:.8px;text-align:right} [data-atlas] table.at-fo-tbl{width:100%;border-collapse:collapse;margin-top:var(--at-s3)} [data-atlas] .at-fo-tbl th{ font-family:var(--at-mono);font-size:var(--at-fs-stamp);letter-spacing:var(--at-tr-label); color:var(--t3);font-weight:400;text-align:left;padding:0 var(--at-s3) var(--at-s2) 0; border-bottom:1px solid var(--rule-2);white-space:nowrap; } [data-atlas] .at-fo-tbl th.at-fo-r{text-align:right} [data-atlas] .at-fo-tbl td{ font-family:var(--at-sans);font-size:var(--at-fs-value);color:var(--t2); padding:var(--at-s2) var(--at-s3) var(--at-s2) 0;border-bottom:1px solid var(--rule); white-space:nowrap; } [data-atlas] .at-fo-tbl td.at-fo-m{font-family:var(--at-mono);font-variant-numeric:tabular-nums} [data-atlas] .at-fo-tbl td.at-fo-r{text-align:right} [data-atlas] .at-fo-tbl td.at-fo-b{color:var(--t1);font-weight:600} [data-atlas] .at-fo-tbl td.at-fo-dim{color:var(--t3)} [data-atlas] .at-fo-tbl tr.at-fo-hl td{ background:color-mix(in srgb,var(--flag) 7%,transparent);color:var(--t1); } [data-atlas] .at-fo-tbl tr.at-fo-hl td.at-fo-dim{color:var(--t2)} [data-atlas] .at-fo-tbl tr.at-fo-ref td{color:var(--t3)} [data-atlas] .at-fo-vintage{ display:flex;flex-wrap:wrap;gap:var(--at-s2) var(--at-s7);font-family:var(--at-mono); font-size:var(--at-fs-stamp);letter-spacing:1px;color:var(--t3); border-top:1px solid var(--rule-2);margin-top:calc(var(--at-s7) + var(--at-s2));padding-top:var(--at-s4); } [data-atlas] .at-fo-vintage b{color:var(--t2);font-weight:400;margin-right:var(--at-s1)} [data-atlas] .at-fo-vintage .at-fo-vgo{margin-left:auto} /* THE OFFER, BEFORE THE READ. One control and one sentence naming what the press costs and what the alignment rule is -- the two things a reader cannot recover afterwards. */ [data-atlas] .at-fo-offer{ display:flex;gap:var(--at-s5);align-items:baseline;flex-wrap:wrap; border-top:1px solid var(--rule-2);padding-top:var(--at-s4); } [data-atlas] .at-fo-offer > span{ flex:1 1 380px;font-family:var(--at-mono);font-size:var(--at-fs-stamp);letter-spacing:.4px; color:var(--t3);line-height:1.6; } [data-atlas] .at-fo-offer > span b{color:var(--t2);font-weight:400} /* THE AUDIT TABLES SCROLL THEMSELVES RATHER THAN SCROLLING THE PAGE. Ten columns do not fit a phone. Hiding columns deletes the audit; letting the table widen the document breaks the row stack above it, which is the one thing the narrow layout is for. So the overflow is contained here, and at any width where the columns fit the box does nothing. */ [data-atlas] .at-fo-scroll{overflow-x:auto;overflow-y:hidden;max-width:100%} [data-atlas] .at-fo-scroll:focus-visible{outline:1px solid var(--accent);outline-offset:2px} /* AND THE EDGE SAYS SO, BECAUSE THE SCROLLBAR DOES NOT. * * Measured at 560px: the table clipped at the container's edge with the MEDIAN column's digits * half-drawn and nothing on screen saying more was there, which reads as a rendering fault rather * than as a scroller. The first fix asked the scrollbar to be the affordance. Measured again: * `offsetHeight - clientHeight` is 0 -- this is an OVERLAY scrollbar, painted only while the * reader is already scrolling, which is exactly when they no longer need telling. The styling * below stays because it dresses that overlay in this surface's own ink where a browser honours * it, but it is not the cue. * * A "scrolls sideways" line under the heading is not the cue either: the columns fit from about * 604px up, so any breakpoint-keyed sentence is true on one side of that width and false on the * other, and a caption that lies at some widths is worse than no caption. * * THE CUE IS TWO BACKGROUNDS AND IT CANNOT BE WRONG. One pair is `background-attachment:local`, * so it travels WITH the content and sits flush against its two ends; the other is `scroll`, so * it stays pinned to the box. The local pair is opaque and covers the pinned pair exactly at the * ends of the scroll range, so a shadow appears on whichever side has content beyond it and on * neither side when everything fits. No width, no media query, no measurement, no script -- the * geometry answers the question. */ [data-atlas] .at-fo-scroll{ background: linear-gradient(to right, var(--chrome) 30%, transparent) left / 28px 100% no-repeat local, linear-gradient(to left, var(--chrome) 30%, transparent) right / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.55), transparent) left / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.55), transparent) right / 14px 100% no-repeat scroll; scrollbar-width:thin;scrollbar-color:var(--rule-3) var(--sunken); } [data-atlas] .at-fo-scroll::-webkit-scrollbar{height:8px;background:var(--sunken)} [data-atlas] .at-fo-scroll::-webkit-scrollbar-thumb{background:var(--rule-3)} /* ─── the bridge and methodology notices ─────────────────────────────────────────────── */ [data-atlas] .at-notice{ margin:var(--sp-4,12px) var(--at-gutter,24px) 0;border:1px solid var(--rule-2); padding:10px 14px; } [data-atlas] .at-notice-hd{ font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.6px; } [data-atlas] .at-notice-bd{ font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--t2);margin-top:3px;max-width:110ch; } /* ═══ THE INSTRUMENT, VERSION TWO ══════════════════════════════════════════════════════════ * * FOUR BANDS: the top bar, the question, the work (plate + inspector) and the record below the * fold. The work band is sized from the viewport so the plate and the inspector always end on * the same line, and the record's heading peeks under it so what is below is advertised. Every * rule here is scoped to `.atlas-v2`; the retired instrument shell's rules are scoped to * `.atlas-instrument` and no longer match anything. * * THE TYPE STEPS ARE LARGER THAN THE LAST SHELL'S. Nine-pixel mono was the default label size; * the smallest step here is 10.5px, and anything a reader must read to act on is 11px or more. */ [data-atlas].atlas-shell.atlas-v2{ position:relative;inset:auto;overflow:visible; --top-h:46px; --insp-w:clamp(400px,31vw,560px); --at-pad:var(--g); display:block;min-height:100vh; } [data-atlas].atlas-v2{--g:24px} [data-atlas].atlas-v2 > *{min-width:0} [data-atlas] .v2-skip{ position:absolute;left:-9999px;top:6px;z-index:5000;padding:8px 12px; background:var(--chrome-raised);color:var(--t1);border:1px solid var(--accent); font-family:var(--at-mono);font-size:12px; } [data-atlas] .v2-skip:focus{left:12px} /* ── the top bar ──────────────────────────────────────────────────────────────────────── */ [data-atlas] .v2-top{ position:relative;z-index:1100; display:flex;align-items:center;gap:18px;min-width:0; height:var(--top-h);padding:0 var(--g); background:var(--chrome-hi);border-bottom:1px solid var(--rule-2); } [data-atlas] .v2-brand{display:flex;align-items:baseline;gap:14px;min-width:0;flex:0 1 auto} [data-atlas] .v2-back{ font-family:var(--at-mono);font-size:11px;letter-spacing:.8px;color:var(--t3);text-decoration:none;flex:none; } [data-atlas] .v2-back:hover{color:var(--accent)} [data-atlas] .v2-word{ font-family:var(--at-sans);font-size:14px;font-weight:700;letter-spacing:3.2px;color:var(--t1);flex:none; } [data-atlas] .v2-scope{ font-family:var(--at-mono);font-size:10.5px;letter-spacing:.8px;color:var(--t3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; } [data-atlas] .v2-tools{display:flex;align-items:center;gap:18px;flex:none;margin-left:auto} [data-atlas] .v2-tool{ font-family:var(--at-mono);font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase; color:var(--t2);background:none;border:0;border-bottom:1px solid var(--rule-3); padding:0 0 2px;cursor:pointer; } [data-atlas] .v2-tool:hover{color:var(--t1);border-bottom-color:var(--accent)} /* the live strip */ [data-atlas] .lv{position:relative;display:flex;align-items:center;gap:6px;min-width:0;margin-left:auto} [data-atlas] .lv + .v2-tools{margin-left:18px} /* THE LIVE CHIPS GIVE WAY BEFORE THE NAV DOES. Three active systems at 1440 ran the last chip under READINGS; the chips' metadata goes first (below 1600) and a chip can then shrink to its name, never past the tools. */ [data-atlas] .lv > .lv-sys{min-width:0;flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} @media (max-width:1599px){ [data-atlas] .lv-meta{display:none} /* The region is the top bar's to name; the plate head keeps its number and its controls on one line, so the map starts one line higher. */ [data-atlas].atlas-v2 .at-plate-region{display:none} } [data-atlas] .lv-k{ display:flex;align-items:center;gap:6px;flex:none; font-family:var(--at-mono);font-size:10.5px;letter-spacing:1.4px;color:var(--pos); } [data-atlas] .lv-dot{width:7px;height:7px;border-radius:50%;background:var(--pos);display:block} [data-atlas] .lv-dot-stale{background:transparent;border:1px solid var(--warn)} [data-atlas] .lv-sys{ display:flex;align-items:baseline;gap:7px;flex:none;cursor:pointer; padding:4px 9px;background:transparent;color:var(--t1); border:1px solid var(--rule-3); } [data-atlas] .lv-sys:hover,[data-atlas] .lv-sys[aria-expanded="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)} [data-atlas] .lv-sys b{font-family:var(--at-sans);font-size:12.5px;font-weight:600;letter-spacing:.3px} [data-atlas] .lv-meta{font-family:var(--at-mono);font-size:10.5px;color:var(--t3);letter-spacing:.5px} [data-atlas] .lv-on{font-family:var(--at-mono);font-size:9.5px;letter-spacing:1.2px;color:var(--accent)} [data-atlas] .lv-pop{ position:absolute;top:calc(100% + 9px);right:0;width:min(400px,92vw);max-height:70vh;overflow:auto; z-index:1200;padding:12px 14px 14px;background:var(--chrome-raised); border:1px solid var(--rule-3);box-shadow:0 18px 44px rgba(0,0,0,.55); } /* THE FEED'S AGE, WHERE "LIVE" WAS. Past the artifact's own freshness bound the word LIVE is withdrawn and the age takes its place, in the warning ink, so a feed nobody has rewritten can never sit under a green dot. */ [data-atlas] .lv-k-stale{color:var(--warn)} /* THE WATCH'S MARK ON A CHIP. Only ELEVATED and above get one; QUIET is the absence of a mark. Each state carries its own word, so nothing here is read from colour alone. */ [data-atlas] .lv-w{ font-family:var(--at-mono);font-size:9.5px;letter-spacing:1px;padding:1px 5px; border:1px solid currentColor;line-height:1.3;flex:none; } [data-atlas] .lv-w-elev{color:var(--t2)} [data-atlas] .lv-w-dis{color:var(--warn)} [data-atlas] .lv-w-case{color:var(--neg)} /* FORECAST NOW and the watch, inside the live card. */ [data-atlas] .at-live-fc{margin-top:10px;padding-top:8px;border-top:1px solid var(--rule)} [data-atlas] .at-live-fc-h{ display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap; font-family:var(--at-mono);font-size:9.5px;letter-spacing:1.3px;color:var(--t1);margin-bottom:2px; } [data-atlas] .at-live-fc-h em{font-style:normal;color:var(--t3);font-size:9px;letter-spacing:.8px} [data-atlas] .at-live-fc-wh{margin-top:10px} [data-atlas] .at-live-w{margin-top:6px;padding:6px 8px;border:1px solid var(--rule-3);border-left-width:3px} [data-atlas] .at-live-w.lv-w-elev{border-left-color:var(--accent);color:inherit} [data-atlas] .at-live-w.lv-w-dis{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 7%,transparent);color:inherit} [data-atlas] .at-live-w.lv-w-case{border-left-color:var(--neg);background:color-mix(in srgb,var(--neg) 7%,transparent);color:inherit} [data-atlas] .at-live-w-ref{border-left-color:var(--t3)} [data-atlas] .at-live-w-k{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-family:var(--at-mono);font-size:10px;letter-spacing:.6px;color:var(--t1)} [data-atlas] .at-live-w-k b{letter-spacing:1.1px} [data-atlas] .lv-w-dis .at-live-w-k b{color:var(--warn)} [data-atlas] .lv-w-case .at-live-w-k b{color:var(--neg)} [data-atlas] .at-live-w-k em{font-style:normal;color:var(--t3);font-size:9px} [data-atlas] .at-live-w p{margin:4px 0 0;font-size:11.5px;line-height:1.4;color:var(--t2)} [data-atlas] .at-live-w code{display:block;margin-top:4px;font-family:var(--at-mono);font-size:9.5px;color:var(--t3)} [data-atlas] .at-live-w-q{margin-top:6px;font-family:var(--at-mono);font-size:10px;letter-spacing:.5px;color:var(--t2)} [data-atlas] .at-live-w-q b{color:var(--t1);letter-spacing:1.1px;margin-right:4px} [data-atlas] .at-live-w-foot{margin:6px 0 0;font-size:10.5px;color:var(--t3);line-height:1.4} [data-atlas] .at-live-jump{ background:none;border:0;padding:0;cursor:pointer;color:var(--accent-bright); font-family:var(--at-mono);font-size:9.5px;letter-spacing:1px;text-decoration:underline; } /* ── the question ──────────────────────────────────────────────────────────────────────── */ [data-atlas] .v2-main{ display:flex;flex-direction:column;min-width:0; } [data-atlas] .v2-q{flex:none;padding:16px var(--g) 12px;min-width:0} [data-atlas].atlas-v2 .at-head{padding:0} [data-atlas].atlas-v2 .at-question-text{ font-size:25px;line-height:1.28;max-width:80ch;margin:0;font-weight:400;letter-spacing:-.2px; } [data-atlas].atlas-v2 .at-cohort{margin-top:9px;font-size:11.5px} [data-atlas].atlas-v2 .at-notice{margin:0 0 12px} [data-atlas] .at-addc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0} [data-atlas] .at-addc-k{ font-family:var(--at-mono);font-size:10.5px;letter-spacing:1.4px;color:var(--t3);margin-right:2px; } [data-atlas] .at-addc-b{ font-family:var(--at-mono);font-size:11px;letter-spacing:.4px;color:var(--t2);cursor:pointer; background:transparent;border:1px dashed var(--rule-3);padding:3px 9px; } [data-atlas] .at-addc-b:hover{color:var(--t1);border-style:solid;border-color:var(--accent)} [data-atlas] .at-addc-outcome{border-color:color-mix(in srgb,var(--flag) 55%,var(--rule-3))} [data-atlas] .at-addc-outcome:hover{border-color:var(--flag)} /* ── the work band ─────────────────────────────────────────────────────────────────────── */ [data-atlas] .v2-work{ /* THE BAND'S HEIGHT DOES NOT DEPEND ON THE QUESTION ABOVE IT. A longer question pushes the band down the page; it never shrinks the plate, because a plate that changes size with the words changes the aperture HOME returns to. AND IT IS CAPPED BY THE PLATE'S OWN WIDTH. The aperture fills the plate with the research geography's longitude; its latitude, 0-65N, projects to about 0.69 of that width -- and the zoom is floored to a quarter step, which takes that to about 0.55 of the plate's width in the worst case (measured at 1280). A plate taller than that makes the clamp raise the zoom and crop the East Pacific off a plate captioned for it -- so the band stops at 0.55 of the plate's width plus its head and figure lines (114px), and the page carries on below. */ --plate-w:calc(100vw - 2 * var(--g) - var(--insp-w) - 22px); height:max(480px,min(calc(100vh - var(--top-h) - 150px),calc(var(--plate-w) * .55 + 114px))); flex:none;display:grid;grid-template-columns:minmax(0,1fr) var(--insp-w); grid-template-rows:minmax(0,1fr); gap:0 22px;padding:0 var(--g) 12px;min-height:0;min-width:0; } /* WIDER PLATES TAKE A LITTLE MORE HEIGHT, AND THE INSPECTOR NEEDS IT. At 0.55 the 1440x900 inspector clipped the Category 5 rate inside its own scroller -- the ladder that must be whole at first paint. Measured across 1280-1920: 0.60 keeps every development region on the opening plate from 1400px up (0.62 loses the MDR and the East Pacific at 1440 and 1680), and below 1400 the 0.55 bound stays, because at 1280 0.60 loses the East Pacific. */ @media (min-width:1400px){ [data-atlas] .v2-work{height:max(480px,min(calc(100vh - var(--top-h) - 150px),calc(var(--plate-w) * .6 + 114px)))} } [data-atlas] .v2-plate{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative} [data-atlas].atlas-v2 .at-platehead{min-height:30px;padding:0 0 8px;gap:4px 14px;flex-wrap:wrap;overflow:visible;white-space:normal} [data-atlas].atlas-v2 .at-platehead .at-plate-title{display:inline;color:var(--t1)} [data-atlas].atlas-v2 .at-platehead .at-r{display:inline;margin-left:auto} [data-atlas].atlas-v2 .at-plate-modebtn{font-size:10.5px;padding:3px 7px} [data-atlas].atlas-v2 .at-layers{margin-left:auto;padding-left:10px} [data-atlas].atlas-v2 .at-layer-btn::before{content:"\25A1\00a0";color:var(--t3)} [data-atlas].atlas-v2 .at-layer-btn[aria-pressed="true"]::before{content:"\25A0\00a0";color:var(--accent)} [data-atlas].atlas-v2 .at-layer-btn[aria-pressed="true"]{border-bottom-color:transparent} [data-atlas].atlas-v2 .atlas-stage{ display:block;flex:1 1 auto;min-height:340px;position:relative;overflow:hidden; container:plate / inline-size; } [data-atlas].atlas-v2 .at-plate{position:absolute;inset:0} [data-atlas].atlas-v2 .at-plate-chrome{flex:none} [data-atlas].atlas-v2 .at-platefoot{padding:8px 0 0;font-size:10.5px} [data-atlas].atlas-v2 .at-plate-lens{display:inline;color:var(--t1)} [data-atlas].atlas-v2 .at-plate-cellread{display:inline} [data-atlas].atlas-v2 .at-plate-figure{padding-top:6px} /* ONE LINE, ALWAYS. The caption's length follows the question, and a caption that grew a line took that line off the plate -- so HOME returned to a different aperture than the page opened on. Its height is fixed at one line; a longer caption ends in an ellipsis and its full text is its title. (Stacked, the stage has a height of its own and the caption may take two.) */ [data-atlas].atlas-v2 .at-plate-figure .at-plate-hint{display:none} [data-atlas].atlas-v2 .at-plate-caption{font-size:12px;line-height:18px;height:18px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-atlas] .v2-transport{flex:none;margin-top:8px} [data-atlas] .v2-transport .at-transport{border:1px solid var(--rule-2)} /* ── the inspector ─────────────────────────────────────────────────────────────────────── */ [data-atlas] .v2-insp{ display:flex;flex-direction:column;min-width:0;min-height:0; border-left:1px solid var(--rule-2);padding-left:20px; } /* THE INSPECTOR'S THREE PLACES, AS ONE CONTROL. Equal thirds, a filled active tab, a rule the active tab sits on -- read as "outcomes, storms, record", not as three small links. */ [data-atlas] .v2-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;flex:none;border-bottom:1px solid var(--rule-3)} [data-atlas] .v2-tabs [role="tab"]{ font-family:var(--at-mono);font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase; color:var(--t2);background:none;border:0;padding:10px 10px 9px;cursor:pointer;text-align:center; box-shadow:inset 0 -2px 0 transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; min-width:0; } [data-atlas] .v2-tabs [role="tab"]:disabled{color:var(--t3);cursor:default;font-style:italic} [data-atlas] .v2-tabs [role="tab"]:hover{color:var(--t1)} [data-atlas] .v2-tabs [role="tab"][aria-selected="true"]{color:var(--t1);font-weight:600; background:color-mix(in srgb,var(--accent) 9%,transparent);box-shadow:inset 0 -2px 0 var(--accent)} [data-atlas] .v2-tabn{ display:inline-block;margin-left:5px;padding:0 5px;border:1px solid var(--rule-3); color:var(--t2);font-size:10.5px;letter-spacing:.5px; } [data-atlas] .v2-tabbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:var(--rule-3) transparent} [data-atlas] .v2-tabbody:has(> .ro){overflow:hidden;display:flex;flex-direction:column} [data-atlas] .v2-sealbar{ flex:none;display:flex;align-items:center;gap:12px;min-width:0; padding:10px 0 0;border-top:1px solid var(--rule-2); } [data-atlas] .v2-seal{ flex:none;display:inline-flex;align-items:center;gap:8px; font-family:var(--at-mono);font-size:11px;font-weight:600;letter-spacing:1.6px;color:var(--chrome); background:var(--accent);border:1px solid var(--accent); padding:8px 13px;cursor:pointer; } [data-atlas] .v2-seal:hover{background:color-mix(in srgb,var(--accent) 82%,#fff)} [data-atlas] .v2-seal:focus-visible{outline:2px solid var(--t1);outline-offset:2px} [data-atlas] .v2-seal-g{flex:none} [data-atlas] .v2-sealnote{display:flex;flex-direction:column;gap:2px} [data-atlas] .v2-sealnote > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} [data-atlas] .v2-sealnote b{font-weight:500;color:var(--t2)} [data-atlas] .at-seal-ok{font-family:var(--at-sans);font-size:12.5px;color:var(--t2);margin:0 0 10px; padding:5px 10px;border-left:2px solid var(--pos);background:color-mix(in srgb,var(--pos) 6%,transparent)} [data-atlas] .at-seal-ok b{font-family:var(--at-mono);font-size:10.5px;letter-spacing:1px;color:var(--pos);font-weight:600;margin-right:6px} [data-atlas] .v2-sealnote .v2-seal-ok{color:var(--pos);font-weight:600} [data-atlas] .v2-sealnote{ font-family:var(--at-mono);font-size:10.5px;letter-spacing:.5px;color:var(--t3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; } /* the selected storm */ [data-atlas] .sj{ flex:none;display:flex;flex-direction:column;gap:7px; padding:2px 0 10px;margin-bottom:4px;border-bottom:1px solid var(--rule-2); } [data-atlas] .sj-who{display:flex;align-items:baseline;gap:9px;min-width:0} [data-atlas] .sj-who .sj-x{margin-left:auto;background:none;border:0;color:var(--t3);cursor:pointer;font-size:14px;padding:0 2px} [data-atlas] .sj-who .sj-x:hover{color:var(--t1)} [data-atlas] .sj-name{font-family:var(--at-sans);font-size:19px;font-weight:600;color:var(--t1);letter-spacing:.2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} [data-atlas] .sj-season{font-family:var(--at-mono);font-size:13px;color:var(--t2)} [data-atlas] .sj-meta{font-family:var(--at-mono);font-size:10.5px;color:var(--t3);letter-spacing:.6px;white-space:nowrap} [data-atlas] .sj-facts{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap} [data-atlas] .sj-peak{display:flex;align-items:baseline;gap:6px;font-family:var(--at-mono);font-size:13px;color:var(--t1)} [data-atlas] .sj-peak i{width:9px;height:9px;display:inline-block;align-self:center} [data-atlas] .sj-src{font-size:10px;letter-spacing:1.1px;color:var(--t3)} [data-atlas] .sj-mem{font-family:var(--at-mono);font-size:10.5px;letter-spacing:1.2px;color:var(--pos)} [data-atlas] .sj-mem.sj-out{color:var(--t3)} [data-atlas] .sj-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap} [data-atlas] .sj-acts button{ font-family:var(--at-mono);font-size:10.5px;letter-spacing:1px;color:var(--t2);cursor:pointer; background:transparent;border:1px solid var(--rule-3);padding:4px 8px;white-space:nowrap; } [data-atlas] .sj-acts button:hover{color:var(--t1);border-color:var(--accent)} [data-atlas] .sj-acts button[aria-pressed="true"]{color:var(--t1);border-color:var(--accent)} [data-atlas] .v2-record-tab{padding-top:4px} [data-atlas] .v2-record-tab .at-insp-head,[data-atlas] .v2-record-tab .at-inspector{position:static} /* ── the ledger ────────────────────────────────────────────────────────────────────────── */ [data-atlas] .lg{display:flex;flex-direction:column;min-width:0;padding-top:10px} [data-atlas] .lg-head{display:flex;align-items:flex-end;gap:12px;padding-bottom:7px;border-bottom:2px solid var(--t1)} [data-atlas] .lg-n{font-family:var(--at-mono);font-size:34px;font-weight:600;line-height:.9;letter-spacing:-1px;color:var(--t1)} [data-atlas] .lg-l{font-family:var(--at-mono);font-size:10.5px;letter-spacing:1.2px;color:var(--t3);line-height:1.45;padding-bottom:2px} [data-atlas] .lg-denoms{color:var(--t2)} [data-atlas] .lg-state{margin-left:auto;font-family:var(--at-mono);font-size:10.5px;letter-spacing:1.3px;color:var(--t1);padding-bottom:3px;white-space:nowrap} [data-atlas] .lg-state-no{color:var(--neg)} [data-atlas] .lg-top .lg-pointer{margin:0 0 9px;color:var(--warn);border-bottom-color:color-mix(in srgb,var(--warn) 45%,transparent)} [data-atlas] .lg-syn{margin:0;padding:8px 0 7px;font-family:var(--at-sans);font-size:15.5px;line-height:1.38;color:var(--t1);text-wrap:pretty} [data-atlas] .lg-key{ display:flex;align-items:baseline;gap:10px;padding:0 0 3px;border-bottom:1px solid var(--t1); font-family:var(--at-mono);font-size:10.5px;letter-spacing:1.2px;color:var(--t3); } [data-atlas] .lg-key-l{color:var(--t1);font-weight:600} [data-atlas] .lg-key-r{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} [data-atlas] .lg-colswitch{display:flex;gap:0;flex:none;border:1px solid var(--rule-3)} [data-atlas] .lg-colswitch button{ font-family:var(--at-mono);font-size:10px;letter-spacing:1px;color:var(--t3);cursor:pointer; background:transparent;border:0;padding:2px 6px; } [data-atlas] .lg-colswitch button[aria-pressed="true"]{color:var(--t1);background:color-mix(in srgb,var(--accent) 16%,transparent)} [data-atlas] .lg-rows{display:flex;flex-direction:column;min-width:0} [data-atlas] .lg-group{ display:flex;align-items:baseline;gap:10px;padding:12px 0 3px;border-bottom:1px solid var(--rule-3); font-family:var(--at-mono);font-size:10.5px;letter-spacing:1.5px;color:var(--t3); } [data-atlas] .lg-group-l{color:var(--t2)} [data-atlas] .lg-group-r{margin-left:auto;letter-spacing:.8px;text-align:right;min-width:0} [data-atlas] .lg-group-note{color:var(--t3)} [data-atlas] .lg-row{ display:grid;grid-template-columns:minmax(0,1fr) 92px 84px 64px;grid-template-rows:auto auto; column-gap:12px;padding:7px 0 6px;border-bottom:1px solid var(--rule);min-width:0; } [data-atlas] .lg-row > *{min-width:0} [data-atlas] .lg-row[data-lens-row]{cursor:pointer} [data-atlas] .lg-row[data-lens-row]:hover{background:rgba(255,255,255,.025)} [data-atlas] .lg-row[data-lens-row]:focus-visible{outline:1px solid var(--accent);outline-offset:-1px} [data-atlas] .lg-row[data-held]{background:rgba(255,255,255,.04);box-shadow:inset 2px 0 0 var(--accent);padding-left:8px} [data-atlas] .lg-name{ grid-column:1;grid-row:1;align-self:end;display:flex;align-items:baseline;gap:7px;min-width:0; font-family:var(--at-sans);font-size:15.5px;line-height:1.1;color:var(--t1); } [data-atlas] .lg-name .at-dc-tick{width:3px;height:12px;display:inline-block;background:var(--bar,var(--rule-3));flex:none;align-self:center} [data-atlas] .lg-name .at-dc-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} [data-atlas] .lg-name .at-mark{font-family:var(--at-mono);font-size:11px;color:var(--t3);flex:none} [data-atlas] .lg-subj{font-family:var(--at-mono);font-size:9.5px;letter-spacing:1.1px;padding:1px 4px;flex:none;border:1px solid currentColor} [data-atlas] .lg-subj.at-reached{color:var(--pos)} [data-atlas] .lg-subj.at-notreached{color:var(--t3)} [data-atlas] .lg-row .at-ans-int{grid-column:2;grid-row:1;align-self:center;width:92px} [data-atlas] .lg-rate{grid-column:3;grid-row:1;align-self:end;text-align:right;white-space:nowrap} [data-atlas] .lg-rate .at-val{font-family:var(--at-mono);font-size:22px;font-weight:600;line-height:1;letter-spacing:-.5px;color:var(--t1)} [data-atlas] .lg-bigcount{font-family:var(--at-mono);font-size:19px;line-height:1;color:var(--t2)} [data-atlas] .lg-bigof{font-size:10.5px;letter-spacing:.8px;color:var(--t3)} [data-atlas] .lg-rate .at-slot{display:none} [data-atlas] .lg-right{grid-column:4;grid-row:1;align-self:end;text-align:right;white-space:nowrap; font-family:var(--at-mono);font-size:12px;color:var(--t1)} [data-atlas] .lg-right .at-slot{color:var(--t3);font-size:10px;letter-spacing:.8px} [data-atlas] .lg-sup{grid-column:1 / 3;grid-row:2;padding-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-family:var(--at-mono);font-size:11px;color:var(--t2);letter-spacing:.2px} /* IN HOURS MODE THE LINE CARRIES THE P25-P75 THAT QUALIFIES THE MEDIAN, and an ellipsis cut exactly that off at laptop widths. It wraps instead. */ [data-atlas] [data-ledger-column="timing"] .lg-sup{white-space:normal;overflow:visible} [data-atlas] .lg-sup .at-val{color:inherit;font-size:inherit} [data-atlas] .lg-st{grid-column:3 / 5;grid-row:2;text-align:right;padding-top:2px;white-space:nowrap; font-family:var(--at-mono);font-size:10.5px;letter-spacing:1px;color:var(--t3)} [data-atlas] .lg-row[data-refused] .lg-st{color:var(--warn)} [data-atlas] .lg-row[data-nonmember] .lg-name{color:var(--t2)} [data-atlas] .lg-held{ display:flex;align-items:center;gap:12px;padding:6px 0 7px 10px;border-bottom:1px solid var(--rule); background:rgba(255,255,255,.04);box-shadow:inset 2px 0 0 var(--accent); font-family:var(--at-mono);font-size:10.5px;letter-spacing:.8px;color:var(--t2); } [data-atlas] .lg-held button{ font-family:var(--at-mono);font-size:10.5px;letter-spacing:1px;color:var(--t1);cursor:pointer; background:transparent;border:1px solid var(--accent);padding:3px 8px;white-space:nowrap;flex:none; } [data-atlas] .lg-held .lg-held-x{border-color:var(--rule-3);color:var(--t3)} [data-atlas] .lg-foot{padding:10px 0 4px;display:flex;flex-direction:column;gap:6px} [data-atlas] .lg-cmp{font-family:var(--at-mono);font-size:10.5px;letter-spacing:.6px;line-height:1.6;color:var(--t3)} [data-atlas] .lg-cmp b{color:var(--t1);font-weight:400} [data-atlas] .lg-cmp-k{color:var(--t2);letter-spacing:1.3px} [data-atlas] .lg-holdout{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px} [data-atlas] .lg-holdout button{ font-family:var(--at-mono);font-size:10.5px;letter-spacing:.3px;color:var(--t2);cursor:pointer; background:transparent;border:1px solid var(--rule-3);padding:2px 7px; } [data-atlas] .lg-holdout button[aria-pressed="true"]{color:var(--t1);border-color:var(--accent)} [data-atlas] .lg-pointer{ align-self:flex-start;font-family:var(--at-mono);font-size:10.5px;letter-spacing:1px;color:var(--t2); background:none;border:0;border-bottom:1px solid var(--rule-3);padding:0 0 1px;cursor:pointer; text-align:left; } [data-atlas] .lg-pointer:hover{color:var(--t1);border-bottom-color:var(--accent)} /* ── the roster ────────────────────────────────────────────────────────────────────────── */ [data-atlas] .ro{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding-top:10px} [data-atlas] .ro-head{flex:none;display:flex;flex-direction:column;gap:7px;padding-bottom:8px} [data-atlas] .ro-what{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-family:var(--at-sans);font-size:15px;color:var(--t2)} [data-atlas] .ro-what b{font-family:var(--at-mono);font-size:22px;font-weight:600;color:var(--t1)} [data-atlas] .ro-clear{ margin-left:auto;font-family:var(--at-mono);font-size:10.5px;letter-spacing:1px;color:var(--t2);cursor:pointer; background:transparent;border:1px solid var(--rule-3);padding:2px 7px; } [data-atlas] .ro-clear:hover{color:var(--t1);border-color:var(--accent)} [data-atlas] .ro-note{font-family:var(--at-mono);font-size:10.5px;letter-spacing:.5px;color:var(--t3)} [data-atlas] .ro-tools{display:flex;gap:8px;align-items:center} [data-atlas] .ro-search{ flex:1 1 auto;min-width:0;font-family:var(--at-mono);font-size:12px;color:var(--t1); background:var(--sunken);border:1px solid var(--rule-3);padding:6px 9px;border-radius:0; } [data-atlas] .ro-search:focus{outline:1px solid var(--accent);outline-offset:0;border-color:var(--accent)} [data-atlas] .ro-sort{display:flex;border:1px solid var(--rule-3);flex:none} [data-atlas] .ro-sort button{ font-family:var(--at-mono);font-size:10px;letter-spacing:1px;color:var(--t3);cursor:pointer; background:transparent;border:0;padding:5px 7px; } [data-atlas] .ro-sort button[aria-pressed="true"]{color:var(--t1);background:color-mix(in srgb,var(--accent) 16%,transparent)} [data-atlas] .ro-cols,[data-atlas] .ro-row{ display:grid;grid-template-columns:minmax(0,1fr) 40px 78px 72px;gap:8px;align-items:center; } [data-atlas] .ro-cols{ flex:none;padding:0 8px 4px 0;border-bottom:1px solid var(--t1); font-family:var(--at-mono);font-size:10px;letter-spacing:1.3px;color:var(--t3); } [data-atlas] .ro-list{flex:1 1 auto;min-height:160px;overflow-y:auto;position:relative; scrollbar-width:thin;scrollbar-color:var(--rule-3) transparent} [data-atlas] .ro-row{ position:absolute;left:0;right:0;height:30px;padding:0 8px 0 0;cursor:pointer;text-align:left; background:transparent;border:0;border-bottom:1px solid var(--rule);color:var(--t1); } [data-atlas] .ro-row:hover,[data-atlas] .ro-row[data-cursor],[data-atlas] .ro-row:focus-visible{background:rgba(255,255,255,.045);outline:0} [data-atlas] .ro-row[data-selected]{box-shadow:inset 2px 0 0 var(--accent);background:rgba(255,255,255,.05)} [data-atlas] .ro-name{font-family:var(--at-sans);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:6px} [data-atlas] .ro-name b{font-weight:600} [data-atlas] .ro-season{font-family:var(--at-mono);font-size:11.5px;color:var(--t2)} [data-atlas] .ro-basin,[data-atlas] .ro-lf{font-family:var(--at-mono);font-size:11px;color:var(--t3);letter-spacing:.5px;white-space:nowrap;overflow:hidden} [data-atlas] .ro-peak{display:flex;align-items:center;gap:5px;font-family:var(--at-mono);font-size:11.5px;color:var(--t1)} [data-atlas] .ro-peak i{width:8px;height:8px;display:inline-block;flex:none} [data-atlas] .ro-peak .ro-nocat{border:1px solid var(--t4)} [data-atlas] .ro-kt{color:var(--t3)} [data-atlas] .ro-empty{padding:18px 4px;font-family:var(--at-sans);font-size:13.5px;color:var(--t2)} /* ── the pick card ─────────────────────────────────────────────────────────────────────── */ [data-atlas] .pk{ position:absolute;z-index:950;padding:10px 12px 12px;background:var(--chrome-raised); border:1px solid var(--rule-3);box-shadow:0 14px 36px rgba(0,0,0,.55); font-family:var(--at-sans);color:var(--t1);cursor:default; } [data-atlas] .pk-hd{display:flex;justify-content:space-between;align-items:center; font-family:var(--at-mono);font-size:11px;letter-spacing:1px;color:var(--t2);padding-bottom:6px;border-bottom:1px solid var(--rule-2)} [data-atlas] .pk-x{background:none;border:0;color:var(--t3);cursor:pointer;font-size:15px;line-height:1;padding:0 2px} [data-atlas] .pk-x:hover{color:var(--t1)} [data-atlas] .pk-counts{display:flex;flex-direction:column;gap:2px;padding:7px 0;font-size:12.5px;color:var(--t2);line-height:1.35} [data-atlas] .pk-counts b{font-family:var(--at-mono);color:var(--t1);font-weight:600} [data-atlas] .pk-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)} [data-atlas] .pk-list button{ display:flex;align-items:center;gap:7px;width:100%;text-align:left;cursor:pointer; background:transparent;border:0;border-bottom:1px solid var(--rule);padding:5px 2px; font-family:var(--at-sans);font-size:13px;color:var(--t1); } [data-atlas] .pk-list button:hover,[data-atlas] .pk-list button:focus-visible{background:rgba(255,255,255,.05);outline:0} [data-atlas] .pk-list i{width:8px;height:8px;flex:none} [data-atlas] .pk-list b{font-weight:600} [data-atlas] .pk-peak{margin-left:auto;font-family:var(--at-mono);font-size:11px;color:var(--t3)} [data-atlas] .pk-none{font-size:12.5px;color:var(--t2);margin:4px 0} [data-atlas] .pk-more{margin-top:6px;font-family:var(--at-mono);font-size:10.5px;letter-spacing:1px;color:var(--t2); background:none;border:0;border-bottom:1px solid var(--rule-3);padding:0 0 1px;cursor:pointer} [data-atlas] .pk-more:hover{color:var(--t1);border-bottom-color:var(--accent)} [data-atlas] .pk-ask{margin-top:10px;padding-top:9px;border-top:1px solid var(--rule-2);display:flex;flex-direction:column;gap:5px} [data-atlas] .pk-ask button{ font-family:var(--at-mono);font-size:11px;letter-spacing:1.2px;color:var(--t1);cursor:pointer; background:color-mix(in srgb,var(--plate-accent) 12%,transparent);border:1px solid var(--plate-accent);padding:7px 10px;text-align:left; } [data-atlas] .pk-ask button:hover{background:color-mix(in srgb,var(--plate-accent) 22%,transparent)} [data-atlas] .pk-ask span{font-size:11.5px;color:var(--t3);line-height:1.35} /* ── the seal and the readings list ───────────────────────────────────────────────────── */ [data-atlas] .sl-veil{position:fixed;inset:0;z-index:3000;background:rgba(5,8,12,.62); display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px} [data-atlas] .sl{width:min(680px,100%);max-height:84vh;overflow:auto;background:var(--chrome-raised); border:1px solid var(--rule-3);box-shadow:0 24px 60px rgba(0,0,0,.6);padding:0 18px 18px} [data-atlas] .sl-hd{display:flex;justify-content:space-between;align-items:center;height:42px; border-bottom:1px solid var(--rule-2);font-family:var(--at-mono);font-size:11px;letter-spacing:1.6px;color:var(--t2)} [data-atlas] .sl-x{background:none;border:0;color:var(--t3);cursor:pointer;font-size:18px} [data-atlas] .sl-x:hover{color:var(--t1)} [data-atlas] .sl-id{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:14px 0 10px;border-bottom:1px solid var(--rule)} [data-atlas] .sl-body{display:grid;grid-template-columns:238px minmax(0,1fr);gap:18px;padding:16px 0 4px} [data-atlas] .sl-stamp{ display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:flex-start; padding:14px 14px 13px;border:1px solid var(--accent);outline:1px solid color-mix(in srgb,var(--accent) 35%,transparent); outline-offset:3px;background:color-mix(in srgb,var(--accent) 7%,transparent); } [data-atlas] .sl-stamp-k{font-family:var(--at-mono);font-size:9.5px;letter-spacing:1.8px;color:var(--accent)} [data-atlas] .sl-stamp-id{font-family:var(--at-mono);font-size:21px;font-weight:600;letter-spacing:1px;color:var(--t1);line-height:1.15} [data-atlas] .sl-stamp-at,[data-atlas] .sl-stamp-m{font-family:var(--at-mono);font-size:10.5px;letter-spacing:.6px;color:var(--t3)} [data-atlas] .sl-binds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;min-width:0} [data-atlas] .sl-binds li{display:grid;grid-template-columns:14px 72px minmax(0,1fr);align-items:baseline;gap:6px;min-width:0} [data-atlas] .sl-binds i{font-style:normal;color:var(--pos);font-size:12px} [data-atlas] .sl-binds .sl-v{font-family:var(--at-mono);font-size:12px;color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-atlas] .sl-binds .sl-q{font-family:var(--at-sans);font-size:13px;white-space:normal;line-height:1.35;color:var(--t1)} [data-atlas] .sl-primary{display:flex;align-items:center;gap:12px;margin:14px 0 4px;min-width:0} [data-atlas] .sl-copy{ flex:none;font-family:var(--at-mono);font-size:11.5px;font-weight:600;letter-spacing:1.4px;color:var(--chrome); background:var(--accent);border:1px solid var(--accent);padding:9px 14px;cursor:pointer; } [data-atlas] .sl-copy:hover{background:color-mix(in srgb,var(--accent) 82%,#fff)} [data-atlas] .sl-url{font-family:var(--at-mono);font-size:11px;color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-atlas] .sl-more{margin-top:12px;border-top:1px solid var(--rule);padding-top:8px} [data-atlas] .sl-more summary{font-family:var(--at-mono);font-size:10.5px;letter-spacing:1px;color:var(--t2);cursor:pointer;text-transform:uppercase} [data-atlas] .sl-more summary:hover{color:var(--t1)} [data-atlas] .sl-id > div{display:flex;flex-direction:column;gap:3px;min-width:0} [data-atlas] .sl-k{font-family:var(--at-mono);font-size:10px;letter-spacing:1.4px;color:var(--t3)} [data-atlas] .sl-id b{font-family:var(--at-mono);font-size:14px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-atlas] .sl-what,[data-atlas] .sl-cli,[data-atlas] .sl-log{font-family:var(--at-sans);font-size:13px;line-height:1.5;color:var(--t2);margin:10px 0} [data-atlas] .sl-cli code{font-family:var(--at-mono);font-size:11.5px;color:var(--t1);word-break:break-all} [data-atlas] .sl-log{font-size:12px;color:var(--t3)} [data-atlas] .sl-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} [data-atlas] .sl-acts button{ font-family:var(--at-mono);font-size:11px;letter-spacing:1.1px;color:var(--t1);cursor:pointer; background:transparent;border:1px solid var(--accent);padding:6px 10px; } [data-atlas] .sl-acts button:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)} [data-atlas] .sl .at-spec{margin-top:6px} [data-atlas] .rd-list{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0} [data-atlas] .rd-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--rule)} [data-atlas] .rd-stamp{font-family:var(--at-mono);font-size:12px;font-weight:600;letter-spacing:.6px;color:var(--t1); border:1px solid var(--accent);outline:1px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px;padding:5px 7px;white-space:nowrap} [data-atlas] .rd-main{min-width:0;display:flex;flex-direction:column;gap:3px} [data-atlas] .rd-acts{display:flex;gap:8px;align-items:center} [data-atlas] .rd-list .rd-open,[data-atlas] .rd-copy{font-family:var(--at-mono);font-size:10.5px;letter-spacing:1px;color:var(--t1); background:none;border:1px solid var(--rule-3);padding:4px 8px;cursor:pointer;text-decoration:none} [data-atlas] .rd-list .rd-open:hover,[data-atlas] .rd-copy:hover{border-color:var(--accent)} [data-atlas] .rd-list a{font-family:var(--at-sans);font-size:13.5px;color:var(--t1);text-decoration:none;border-bottom:1px solid var(--rule-3)} [data-atlas] .rd-list a:hover{border-bottom-color:var(--accent)} [data-atlas] .rd-meta{display:block;font-family:var(--at-mono);font-size:10.5px;color:var(--t3);margin-top:3px} /* ── below the fold: the record ───────────────────────────────────────────────────────── */ [data-atlas] .v2-forward{padding:18px var(--g) 0} [data-atlas] .v2-below{padding:0 var(--g);border-top:1px solid var(--rule-2);margin-top:4px} [data-atlas] .at-record{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;padding:22px 0 30px;min-width:0; } [data-atlas] .at-record-col{min-width:0} [data-atlas] .at-record-wide{grid-column:1 / -1;min-width:0;margin-top:18px} [data-atlas] .at-record-h{ margin:0 0 4px;padding-bottom:6px;border-bottom:1px solid var(--t1); font-family:var(--at-mono);font-size:11px;font-weight:600;letter-spacing:1.8px;color:var(--t1); } [data-atlas] .at-record .at-deck-limitgroups{margin-top:0;border-top:0;padding-top:8px} [data-atlas] .at-record .at-deck-limits{margin-top:14px} [data-atlas] .at-record .at-deck-pre,[data-atlas] .at-record .at-deck-foot-block, [data-atlas] .at-record .at-pre-assume,[data-atlas] .at-record .at-deck-env{margin-top:12px} [data-atlas] [data-section-focus]{outline:1px solid var(--accent);outline-offset:4px} [data-atlas].atlas-v2 .at-colophon{margin:0 var(--g)} /* ── when the plate loses width ────────────────────────────────────────────────────────── */ @media (max-width:1279px){ [data-atlas].atlas-v2{--insp-w:clamp(360px,36vw,440px)} [data-atlas] .v2-scope{display:none} [data-atlas] .lg-row{grid-template-columns:minmax(0,1fr) 74px 78px 58px} [data-atlas] .lg-row .at-ans-int{width:74px} } @media (max-width:1179px){ /* STACKED. The plate takes the full width and a fixed share of the viewport's height; the inspector follows it at full width and scrolls with the page rather than inside itself. */ [data-atlas].atlas-v2{--g:18px} [data-atlas] .v2-main{height:auto} [data-atlas] .v2-work{display:block;grid-template-columns:1fr;padding-bottom:6px;min-height:0;height:auto} [data-atlas].atlas-v2 .atlas-stage{flex:none;height:min(50vh,520px);min-height:300px} [data-atlas] .v2-insp{border-left:0;padding-left:0;margin-top:16px;border-top:1px solid var(--rule-2);padding-top:4px} [data-atlas] .v2-tabbody{overflow:visible} [data-atlas] .v2-tabbody:has(> .ro){overflow:visible} [data-atlas] .ro-list{height:min(60vh,520px);flex:none} [data-atlas] .v2-sealbar{position:sticky;bottom:0;background:var(--chrome);padding-bottom:10px;z-index:20} [data-atlas] .at-record{grid-template-columns:minmax(0,1fr)} [data-atlas] .at-record-col + .at-record-col{margin-top:22px} [data-atlas] .lv-meta{display:none} } @media (max-width:760px){ [data-atlas].atlas-v2{--g:14px;--top-h:auto;padding-bottom:58px} /* TWO ROWS, NOT THREE: the wordmark and the three records on one, the live systems on the next -- wrapping, never scrolling sideways. */ [data-atlas] .v2-top{flex-wrap:wrap;height:auto;padding:8px var(--g);gap:6px 12px} [data-atlas] .v2-brand{flex:0 1 auto;gap:8px} [data-atlas] .v2-back-w,[data-atlas] .v2-scope{display:none} [data-atlas] .v2-word{font-size:12.5px;letter-spacing:2.4px} [data-atlas] .v2-tools{gap:9px;margin-left:auto} [data-atlas] .v2-tool{font-size:9px;letter-spacing:.6px} [data-atlas] .v2-top > .v2-brand{order:0} [data-atlas] .v2-top > .v2-tools{order:1} [data-atlas] .lv{order:3;flex:1 1 100%;margin-left:0;flex-wrap:wrap;row-gap:6px} [data-atlas] .at-cohort-min{white-space:nowrap} [data-atlas] .at-cohort-n{white-space:normal} [data-atlas].atlas-v2 .at-plate-figure .at-plate-acts,[data-atlas].atlas-v2 .at-plate-acts{display:flex;flex-wrap:wrap;white-space:normal;row-gap:4px;gap:4px 12px;max-width:100%;flex:1 1 100%;margin-left:0} /* The bottom bar's SEAL is this control on a phone; one seal button per screen. */ [data-atlas] .v2-sealbar{display:none} /* The small plate keeps its lower quarter: the legend is one short line, the attribution one line that ellipsises. */ [data-atlas] .at-legend{right:6px;bottom:22px;max-width:70%;padding:3px 6px} [data-atlas] .at-legend .at-lrow{font-size:9px} [data-atlas] .leaflet-control-attribution{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:8.5px!important} [data-atlas].atlas-v2 .v2-mnav{display:grid} [data-atlas] .lv + .v2-tools{margin-left:auto} /* ON A PHONE BOTH CARDS ARE SHEETS ABOVE THE BOTTOM BAR: the live card opened above the screen's top edge and the pick card ran under the bar. */ [data-atlas] .lv-pop{position:fixed;left:8px;right:8px;top:auto!important;bottom:60px;width:auto;max-height:calc(100vh - 140px);overflow:auto;z-index:1300} [data-atlas].atlas-v2 .at-question-text{font-size:22px;line-height:1.3} [data-atlas].atlas-v2 .at-cohort{font-size:11px} /* NO SIDEWAYS SCROLL FOR CONTROLS. The chips wrap onto as many lines as they need; a reader on a phone sees every condition they can add without discovering a hidden scroll. */ [data-atlas] .at-addc{flex-wrap:wrap;overflow:visible;margin:4px 0 0;padding:0;border-left:0;flex:1 1 100%} [data-atlas] .at-addc-b,[data-atlas] .at-addc-k{flex:none} [data-atlas].atlas-v2 .atlas-stage{height:min(41vh,350px);min-height:240px} [data-atlas].atlas-v2 .at-platehead{flex-wrap:wrap;row-gap:4px;overflow:visible;white-space:normal} [data-atlas].atlas-v2 .at-platehead .at-plate-title,[data-atlas].atlas-v2 .at-platehead .at-r{display:none} [data-atlas].atlas-v2 .at-layers{margin-left:0;padding-left:0;border-left:0} [data-atlas].atlas-v2 .at-platefoot{flex-wrap:wrap;white-space:normal;row-gap:4px} /* ON A PHONE THE FIGURE'S CAPTION GIVES WAY TO THE ANSWER. It restates the cohort line two inches above it, and its PLATE NOTES are the desktop's; the class key and the measure stay. */ [data-atlas].atlas-v2 .at-plate-acts{margin-top:6px} [data-atlas] .lg-row{grid-template-columns:minmax(0,1fr) 76px 56px;column-gap:8px} [data-atlas] .lg-row .at-ans-int{display:none} [data-atlas] .lg-rate{grid-column:2} [data-atlas] .lg-right{grid-column:3} [data-atlas] .lg-sup{grid-column:1 / 2;white-space:normal} [data-atlas] .lg-st{grid-column:2 / 4} [data-atlas] .lg-name{font-size:14.5px} [data-atlas] .lg-rate .at-val{font-size:19px} [data-atlas] .lg-key{flex-wrap:wrap;row-gap:4px} [data-atlas] .ro-cols,[data-atlas] .ro-row{grid-template-columns:minmax(0,1fr) 34px 70px 48px;gap:6px} [data-atlas] .sl-id{grid-template-columns:repeat(2,minmax(0,1fr))} [data-atlas] .sl-body{grid-template-columns:1fr} [data-atlas] .rd-item{grid-template-columns:minmax(0,1fr)} [data-atlas] .sl-primary{flex-wrap:wrap} [data-atlas] .sl-veil{padding:4vh 8px 8px} [data-atlas] .pk{position:fixed;width:auto!important;left:8px!important;right:8px;top:auto!important;bottom:60px;max-height:calc(100vh - 150px)!important;overflow:auto;z-index:1300;box-shadow:0 -12px 40px rgba(0,0,0,.6)} [data-atlas] .at-readouts{flex-wrap:wrap;max-width:100%} [data-atlas] .at-transport{flex-wrap:wrap;max-width:100%} [data-atlas] .at-sheet[data-sheet-anchored]{left:8px!important;right:8px;width:auto} [data-atlas].atlas-v2 .at-classkey{flex-wrap:wrap;white-space:normal;row-gap:3px;overflow:visible;flex:1 1 100%} [data-atlas].atlas-v2 .at-plate-hint{white-space:normal} [data-atlas].atlas-v2 .at-plate-caption{height:auto;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2} [data-atlas].atlas-v2 .at-plate-notes-body{width:calc(100vw - 40px);max-width:none} [data-atlas].atlas-v2 .at-platefoot > span,[data-atlas].atlas-v2 .at-platefoot .at-plate-measure{flex-wrap:wrap;white-space:normal} [data-atlas] .v2-plate,[data-atlas] .v2-insp,[data-atlas] .v2-q{max-width:100%;overflow-x:clip} } /* the limits, set as a list rather than a column of prose */ [data-atlas] .at-record .at-limit-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:6px 0;border-bottom:1px solid var(--rule)} [data-atlas] .at-record .at-limit-which{font-size:13.5px} [data-atlas] .at-record .at-need{font-family:var(--at-mono);font-size:10.5px;color:var(--t3);text-align:right} [data-atlas] .at-record .at-limit-line .at-say-text{grid-column:1 / -1;font-size:12.5px;line-height:1.45;color:var(--t3);flex:none} /* the phone's way through the answer (MobileNav in atlas.jsx) */ [data-atlas] .v2-mnav{ display:none;position:fixed;left:0;right:0;bottom:0;z-index:1200; grid-template-columns:1fr 1fr 1.25fr 1fr; background:color-mix(in srgb,var(--chrome-hi) 94%,transparent);backdrop-filter:blur(6px); border-top:1px solid var(--rule-3);padding:0 0 env(safe-area-inset-bottom); } [data-atlas] .v2-mnav button{ font-family:var(--at-mono);font-size:11px;letter-spacing:1.3px;text-transform:uppercase; color:var(--t2);background:none;border:0;border-top:2px solid transparent; height:52px;cursor:pointer; } [data-atlas] .v2-mnav button span{color:var(--t3);font-size:10px;letter-spacing:.5px;margin-left:3px} [data-atlas] .v2-mnav button[aria-current="true"]{color:var(--t1);border-top-color:var(--accent)} [data-atlas] .v2-mnav .v2-mnav-seal{color:var(--t1);border-left:1px solid var(--rule-2)} /* a limit whose sentence repeats an earlier one's shape: its contract and counts, and its own sentence one press away (LimitBlock in evidence-deck.jsx) */ [data-atlas] .at-say-more{grid-column:1 / -1} [data-atlas] .at-say-more summary{font-family:var(--at-sans);font-size:12px;letter-spacing:0;color:var(--t3);cursor:pointer;list-style:none} [data-atlas] .at-say-more summary::before{content:"+ ";color:var(--t3)} [data-atlas] .at-say-more[open] summary::before{content:"− "} [data-atlas] .at-say-more summary:hover{color:var(--t1)} [data-atlas] .at-deck-cite-seal{font-family:var(--at-sans);font-size:12.5px;line-height:1.5;color:var(--t2);margin:8px 0 0} [data-atlas] .at-say-remedy + .at-say-link{margin-left:10px}