/* ══════════════════════════════════════════════════════════════════════════ CHROME: the masthead, the rail's frame, the colophon, the live pill. 2026-09-09. Loads LAST, after gap.css. SCOPE, AND WHY IT IS A SEPARATE FILE. Every selector here is anchored to a chrome node: `header.top`, `nav.rail`, `body > footer`, `#status`. Nothing in this file can reach inside a section, which is the whole reason it is not an instrument.css edit: instrument.css normalises the app with `body *:not(svg)` !important at line 343 and a second blanket at 1883, so a rule added there for the footer is a rule that has to be reasoned about for all 157 nodes of every other surface. A last-loading sheet with chrome-anchored selectors is the containment the blanket makes impossible any other way. TWO !important DECLARATIONS RESOLVE BY SPECIFICITY, NOT BY ORDER. The blanket is (0,0,1). instrument.css's chrome rules are mostly (0,1,1) to (0,2,1). Everything below is written at (1,3,2) or heavier, so it wins on weight and does not depend on this file's position in the list. NO NEW HUE. instrument.css §66 (line 4485) is the colour law and it is obeyed here without exception: --live #2ee6cd LIVENESS "this is recent" --accent #ff7a1a WHERE YOU ARE active nav item, focus, CTAs The accent appears exactly once in this file, on :focus-visible, which IS "where you are". It appears nowhere else. The live meter is --live because it is a liveness mark. Failure states are signalled by CONTRAST and by the meter emptying, not by a fourth colour. No @keyframes are declared here. A keyframe name is global no matter what it is scoped under, and this file has nothing that needs one. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ 1. THE LIVE PILL BECOMES AN INSTRUMENT READING WHAT WAS WRONG, measured on rendered pixels at 1280 and 390 before any edit: a. `live · 34,500 contracts · 2m ago` was 262.8px of one size (15px), one colour (--ink2) and one weight, joined by middots. A STATE, a MAGNITUDE and a STALENESS presented as three items of the same kind. b. At 390 it wrapped to THREE lines, 136px of a 390px header, taller than the wordmark, and it broke "34,500" from "contracts". A figure severed from its unit is the one typographic failure this product cannot ship. c. The dot was a 6px SQUARE, because style.css's `border-radius:50%` loses to the blanket's `border-radius !important`. d. AND THE STATE MARK LIED. instrument.css:1346 is `body .dot, body .dot.live { background: var(--live) !important }`. The first selector catches EVERY dot, so style.css's `.dot.stale{background:var(--warn)}` and `.dot.down{background:var(--bad)}` (no !important, so they lose to any !important) never painted. Live-verified: with class `dot stale` the computed background was rgb(46,230,205), which is --live. A stale feed and a dead feed both displayed the live colour, and the only signal that the page had stopped was a word in the same colour and size as everything else. WHAT IT IS NOW. Three facts, three treatments, no separators: ┃ 34,500 CONTRACTS ┃ LIVE 57s AGO ┃ THE FRESHNESS METER, and it is the point of the redesign. Vertical, 2px, on the left. Its fill height is 1 - age_seconds/poll_seconds, both of which /api/health publishes and neither of which was on screen anywhere before. Full just after a poll, empty when one is due. It is the only thing on the page that says whether 57s is halfway through a cycle or three cycles late, and a reader can answer "is this live" from its length without reading a word. It also MOVES, every four seconds, which is the difference between an instrument and a screenshot. It is arithmetic on two measured values, not a model. If poll_seconds is absent the meter is not drawn at all (`.dot.nometer`): an unknown cadence is not a full bar and it is not an empty one. 34,500 the magnitude. Data ink, 15px, tabular figures. CONTRACTS its unit, micro-caps, --ink3. It NEVER leaves, at any width. LIVE the state, micro-caps, --ink3 while nothing is wrong. It is quiet on purpose: you do not need to be told the normal case. It takes full --ink on stale and --bad on down, so the header's loudest word appears only when the feed has stopped. 57s AGO the reading, --ink2, tabular. THE SENTENCE SURVIVES. app.js still writes the identical string into #status-text, character for character, as text nodes inside these spans: grid.js:1852 mountProvenance() mirrors #status-text.textContent into the terminal's #cmd-prov on a MutationObserver, and a structural change that altered the text would blank a node in a different file. The middots are real text and are hidden with display:none, so textContent keeps them and the screen stops claiming three kinds of fact are one. ══════════════════════════════════════════════════════════════════════════ */ /* The box goes. A hairline rectangle around the status says "widget"; an instrument's reading is not in a container, the instrument is the frame. What replaces it is a keyline, which is a frame element rather than a container, and it pairs with the one after the wordmark so the masthead reads as three measured fields on one rule. */ html body header.top .topright { align-items: stretch !important; gap: 0 !important; } html body header.top #status.status { display: grid !important; grid-template-columns: auto minmax(0, auto); align-items: center; column-gap: 11px; padding: 1px 0 1px 18px !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-left: 1px solid var(--line) !important; color: var(--ink3) !important; min-width: 0; } /* ── THE METER. #dot is reused rather than replaced: app.js already maintains its class (`dot live` / `dot stale` / `dot down`) on every poll, so the meter's colour follows the state with no new JavaScript and no second element to keep in sync. Specificity (1,3,2) clears instrument.css:678, :1346 and :1482, all of which are (0,1,1). */ html body header.top #status .dot { grid-column: 1; width: 2px !important; height: 28px !important; flex: none; align-self: center; position: relative; overflow: hidden; background: var(--line) !important; /* the track */ border: 0 !important; box-shadow: none !important; } /* The pulse that used to live on this pseudo is gone with it: a meter that already moves does not need a halo that pretends to. */ html body header.top #status .dot::after { content: ""; position: absolute; /* `top: auto` IS LOAD-BEARING, and leaving it out cost a wrong picture that no DOM check would have caught. style.css:530 is `.dot.live::after { position:absolute; inset:0; ... }`, and `inset` is a shorthand: it sets top AND bottom to 0. This rule outranks it on every property it names, but it did not name `top`, so top:0 survived, an absolutely positioned box with top, bottom and height all specified is over-constrained, and the spec resolves that by dropping `bottom`. The meter drained DOWNWARD from the top instead of emptying from the top down. Found by sampling the pixels of the rendered PNG, not by reading the declared value, which was correct the whole time. (The same rule would also have painted the fill --mint, which §61 remapped to the accent, and at opacity .55. Both are overridden below.) */ left: 0; right: 0; bottom: 0; top: auto; /* --st-fresh is age_seconds / poll_seconds, set by app.js from the payload. 1 - that is the cycle remaining, which is what the bar is showing. */ height: calc((1 - var(--st-fresh, 1)) * 100%); background: var(--live); opacity: 1; animation: none !important; transition: height 260ms linear; } /* Before the first poll, and whenever the cadence is unknown, there is no ratio to draw. A neutral solid mark, which is neither a full bar nor an empty one, because unknown is not zero. */ html body header.top #status .dot.nometer, html body header.top #status .dot:not(.live):not(.stale):not(.down) { background: var(--ink3) !important; height: 12px !important; } html body header.top #status .dot.nometer::after, html body header.top #status .dot:not(.live):not(.stale):not(.down)::after { display: none; } /* Stale and down: the meter is already empty (age/poll clamps to 1), and the track brightens to --ink3 so an empty bar cannot be mistaken for an unlit one. THREE MARKS, THREE LENGTHS, and they are told apart without colour: live 28px --line track with a --live fill at the cycle remaining stale 28px --ink3 track, no fill unknown 12px --ink3 mark, no track and no fill --line-strong was the first choice and is wrong here: it is #344d50, a cool blue-grey left over from the navy palette §63 replaced, and it reads as a different material next to a warm near-black ground. */ html body header.top #status .dot.stale, html body header.top #status .dot.down { background: var(--ink3) !important; height: 28px !important; } /* AND THE DOWN STATE PAINTS NO LIVE FILL, WHICH THE FIRST VERSION DID. Photographed: with ok:false and the real age_seconds of 104 against a 120s cadence, --st-fresh resolved to 0.867 and the meter drew a 3.7px TEAL bar on a dead feed. The ratio is arithmetically correct and the picture is a lie, which is the exact fault this redesign exists to remove, one state further along. When the last poll failed there is no cycle to be part-way through, and the down branch prints no age either, so the meter would have been the only place the number appeared and it would have appeared in the liveness colour. Stale needs no equivalent rule: at age > 3x poll the ratio clamps to 1 on its own and the fill is already zero. */ html body header.top #status .dot.down::after { display: none; } @media (prefers-reduced-motion: reduce) { html body header.top #status .dot::after { transition: none; } } /* ── THE READING. Two rows, two columns: magnitude over state, unit over age. GRID, NOT WRAPPING FLEX, and the reason is measured. As a wrapping flex container the block's max-content width is the sum of ALL its items, so it sized to 249.5px at 1280 for content that needs 152 and then ragged right inside its own box; at 390 the same sum forced a THIRD row and put the unit back on its own line, which is the defect this was fixing. A two-column grid sizes each column to the wider of its two cells, so the block is exactly as wide as it needs to be and the number lines up over the state word rather than beside nothing. EXPLICIT ROWS, so the failure states still work. `stale 413s` emits only .st-state and .st-age, both placed on row 2; row 1 is then an implicit auto row with no items and collapses to zero. No :has(), no second layout. */ html body header.top #status #status-text { grid-column: 2; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: 7px; row-gap: 1px; min-width: 0; font-size: 11px !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase; color: var(--ink3) !important; } html body header.top #status .st-sep { display: none !important; } html body header.top #status .st-n { grid-row: 1; grid-column: 1; font-size: 15px !important; line-height: 1.05; letter-spacing: var(--tr-display) !important; text-transform: none; color: var(--ink) !important; font-variant-numeric: tabular-nums; white-space: nowrap; } html body header.top #status .st-u { grid-row: 1; grid-column: 2; font-size: 11px !important; letter-spacing: var(--tr-label) !important; color: var(--ink3) !important; white-space: nowrap; } html body header.top #status .st-state { grid-row: 2; grid-column: 1; font-size: 11px !important; letter-spacing: var(--tr-label) !important; color: var(--ink3) !important; white-space: nowrap; } html body header.top #status .st-age { grid-row: 2; grid-column: 2; font-size: 11px !important; /* NOT uppercased. "42S AGO" turns an SI-style unit into a word; a reading is a reading. The label beside it (LIVE) is a label and keeps its caps. */ text-transform: none; letter-spacing: var(--tr-label) !important; color: var(--ink2) !important; font-variant-numeric: tabular-nums; white-space: nowrap; } /* The only time the header raises its voice. */ html body header.top #status .dot.stale ~ #status-text .st-state, html body header.top #status .dot.stale ~ #status-text .st-age { color: var(--ink) !important; font-weight: 600 !important; } html body header.top #status .dot.down ~ #status-text .st-state { color: var(--bad) !important; font-weight: 600 !important; /* An adapter's error text is a sentence, not a label. */ text-transform: none; letter-spacing: normal !important; } /* ══════════════════════════════════════════════════════════════════════════ 2. THE MASTHEAD Mehdi: the header is OK and OK is not the brief. It is not redrawn; three things change and the lockup is untouched. a. The descriptor stops competing. It was a 315px sentence in .14em micro-caps sitting on the wordmark's own baseline with a 14px gap between them, which is two headlines on one line. Micro-cap tracking is for a LABEL of two or three words; on a 37-character sentence it turns a standing line into a banner. It keeps the size and loses half the tracking, and a keyline replaces the gap so the reader is told these are two different things rather than left to infer it. b. The masthead gains one device it did not have: a thin vertical rule as a field separator, used exactly twice, after the wordmark and before the status. Three fields on one measured row. c. Focus is visible and it is the accent, which is the one meaning the colour law assigns to it: where you are. ══════════════════════════════════════════════════════════════════════════ */ html body header.top .brand .tag { /* .07em, a literal: half of --tr-label. --tr-label is the token for a micro-cap LABEL and this is a sentence, so the token is the wrong instrument rather than the right one at the wrong value. Written here rather than as a new token because it has exactly one consumer. */ letter-spacing: .07em !important; color: var(--ink3) !important; padding-left: 15px; border-left: 1px solid var(--line); align-self: center; } html body header.top a:focus-visible, html body header.top button:focus-visible, html body > nav.rail a:focus-visible, html body > nav.rail button:focus-visible, html body > footer a:focus-visible, html body > footer button:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 3px; /* !important because something later gives these buttons an 8px radius and an outline follows the border-radius: the ring rendered as a lozenge on a page where every other corner is square. Scoped to :focus-visible on chrome nodes, none of which paint a background, so nothing else moves. */ border-radius: 0 !important; } /* ══════════════════════════════════════════════════════════════════════════ 3. THE FRAME: THE RAIL MEETS THE MASTHEAD nav.css:135 pins the fixed rail at `top: 46px` with the comment "clears the sticky masthead". The masthead measures 49.5px, so the rail's top edge and the header's bottom border were two hairlines 3.5px apart, forming a visible step in the top-left corner of every screen in the app. It is the same class of fault app.js:~440 already solved for the stage: a literal that describes a box whose height depends on its own contents can only be right until the next edit. --layout-top-offset is written by app.js from a measured rect on boot and on every resize, and it is what the stage is already sized against, so using it here makes the two edges the same number by construction. ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 900px) { html body > nav.rail { top: var(--layout-top-offset, 46px) !important; /* The rail's border and its hover wash were hardcoded cool-white alphas (rgba(255,255,255,.07) and .05) on a warm near-black ground. The tokens exist and are warm: --line is the app's hairline everywhere else, and --hover-wash is the sanctioned wash since --fill-1 and --fill-2 went transparent. Same weight, right hue. */ border-right: 1px solid var(--line) !important; } html body > nav.rail .rl-q { border-top: 1px solid var(--line) !important; } } html body > nav.rail .rl-item:hover { background: var(--hover-wash) !important; } /* ══════════════════════════════════════════════════════════════════════════ 4. THE COLOPHON WHAT WAS WRONG, from the rendered footer and not from the markup: a. NOTHING LED. Five items at effectively one weight. The counter is declared at 30px but PAINTS at 15, because the odometer digits app.js writes into it (`.odo-c`) are caught by the blanket at 15px !important inside a that asks for 30. controls.css:766 found this, named it, and deliberately left it: "levelling them to 11 would shrink the whole bar, which is a design decision and not this file's to make". This is the pass that gets to make it. b. THE WRONG THING WAS BRIGHTEST. `.fb-open`, the feedback button, is injected by feedback.js as the bar's FIRST child and inherits instrument.css:542's `color: var(--ink) !important`, so a "how can this be better?" link was the leading, highest-contrast object in the footer of an instrument of record. c. IT WRAPPED AT 1280. Measured 70px tall with the byline stranded alone on a second line, right-aligned against nothing. Wrapping is most of what "reads as leftovers" means. d. AND AT 390 THE CLAIM LOST ITS UNIT. gap.css:362 hides `.tr-count i` and `.tr-since` under 560px, so the site's strongest single claim rendered as a bare seven-digit number beside a feedback link, with no noun and no date. A figure with no stated population is the one thing this product may not publish, and the chrome was publishing one on every phone. WHAT IT IS NOW. One leader, one claim, one quiet row of exits. 7,005,607 SURFACE ROWS RECORDED SINCE AUG 10, 2026 [exits] Three weights and no more. The number leads at 20px in data ink. The claim around it is one sentence in micro-caps at --ink3, with the date at --ink2 so it is findable without being loud. The three exits (method, feedback, byline) are identical to each other and quieter than the claim, because in a colophon they are the least important thing on the line. THE ORDER IS FIXED IN CSS, NOT IN feedback.js. That file inserts its button at `bar.firstChild`; `order` moves it without touching a byte of it, and reverts by deleting one declaration. COPY: "and counting" is dropped. The odometer visibly counts, and a caption asserting what the reader can see is padding. The since-date moves inside the sentence it belongs to, which is the same two figures from the same /api/health coverage block, said once instead of twice. ══════════════════════════════════════════════════════════════════════════ */ html body > footer .foot-bar { display: flex !important; align-items: baseline !important; flex-wrap: wrap; /* style.css:1124 sets `justify-content: space-between`, which on a WRAPPING flex container distributes every line independently: at 390 it threw the two controls to opposite ends of their own row with 80px of nothing between them. The claim pushes the exits right with an auto margin, which groups them instead of scattering them, and at narrow that margin goes and everything packs left. */ justify-content: flex-start !important; column-gap: 22px; row-gap: 8px; padding: 9px 18px 10px !important; margin: 0 !important; /* The bar's own 11px/.14em never reached a child: the blanket resets every one of them to 15px/normal. The children are set explicitly below, so the bar declares only what a bar owns. */ font-size: 11px !important; letter-spacing: normal !important; text-transform: none; color: var(--ink3) !important; } /* THE RECORD LEADS, and it is one object. */ html body > footer .foot-bar .tr-count { order: 1; margin-right: auto; display: flex !important; align-items: baseline !important; flex-wrap: wrap; column-gap: 11px; row-gap: 2px; min-width: 0; /* controls.css:1110 pins `html body .tr-count { white-space: nowrap }` at (1,1,1) to stop the FIGURE breaking at a thousands separator. The figure still must not break; the sentence beside it now must be allowed to. */ white-space: normal !important; } html body > footer .foot-bar .tr-count > b, html body > footer .foot-bar .tr-count > b .odo-c { /* 20px is a literal and off the 11/15/30 scale on purpose: 30 is a hero number and this band is 44px tall, 15 is the body step and would not lead anything. One step above body, one step below a headline, which is what a colophon's figure is. It has exactly one consumer, so it is a value and not a token. */ font-size: 20px !important; line-height: 1.05 !important; color: var(--ink) !important; letter-spacing: var(--tr-display) !important; font-variant-numeric: tabular-nums; font-weight: 500 !important; white-space: nowrap !important; } /* The digit flash stays. It is a liveness mark on the one number that is genuinely still moving, and it is the evidence that the counter counts. */ html body > footer .foot-bar .tr-count > b .odo-c.odo-hit { color: var(--live) !important; } html body > footer .foot-bar .tr-count > b .odo-sep { opacity: .4; } /* THE CLAIM IS A SENTENCE, AND ITS DATE IS PART OF THE SENTENCE. The figure and the sentence are the same claim, so they are one object at two sizes. Nothing here declares tracking or case: §31.4 owns both inside the footer and its values are right for prose. */ html body > footer .foot-bar .tr-count > i { font-style: normal; font-size: 11px !important; line-height: 1.5; color: var(--ink3) !important; } /* THE DATE WAS RENDERING AT 30px, LARGER THAN THE COUNTER IT QUALIFIES. instrument.css:964 is `body .foot-bar .tr-count b { font-size: var(--t-lg) }` and it is a DESCENDANT selector, so moving the since-date inside the sentence brought under a rule written for . Photographed before this line existed: "Aug 10, 2026" set at 30px next to a 20px seven-figure count, which made the least important half of the claim the largest thing in the footer. The counter's own rule uses `> b` on purpose so the two can never be confused again. */ html body > footer .foot-bar .tr-count > i b { font-size: 11px !important; line-height: 1.5 !important; letter-spacing: inherit !important; color: var(--ink2) !important; font-weight: 500 !important; white-space: nowrap !important; } /* THE EXITS. One treatment for all three, quieter than the claim. */ html body > footer .foot-bar #method-toggle { order: 2; } html body > footer .foot-bar .tr-link, html body > footer .foot-bar .fb-open { order: 3; margin-left: 0 !important; } html body > footer .foot-bar .byline { order: 4; margin-left: 0 !important; } /* THIS BLOCK DOES NOT UPPERCASE ANYTHING, AND THAT IS A CORRECTION. The first version of it set the three exits and the claim in micro-caps. They rendered sentence case anyway, and the reason is a rule worth reading before overriding: instrument.css §31.4 (line 2075) is body .rail *, body footer *, body .cmd *, body .tl-legend *, body .next-step { text-transform: none !important; letter-spacing: 0.01em !important; } under the heading "UPPERCASE IS FOR COLUMN HEADERS, and nothing else. 30% of the page shouting is the single loudest terminal cue after the full bleed. The rail, the footer, the command examples and the legend all go back to sentence case." It names the footer explicitly, it is a decision and not an accident, and !important at (0,1,2) means a specificity escalation is all it would have taken to beat it, which is exactly why it should not be beaten. So the colophon carries its hierarchy in SIZE and COLOUR alone, which is the harder and better version of the fix: 20px ink for the figure, 11px --ink3 for the sentence and the exits, --ink2 for the date inside the sentence. Three steps, no shouting. The masthead keeps its micro-caps because §31.4 does not cover header.top and instrument.css:829 already sets them there, so the two bands have distinct voices on purpose: the masthead labels, the colophon speaks. It is also what makes the bar fit. Sentence case at §31.4's own 0.01em puts the four items at 758px of a 933px line where micro-caps needed 1,061. */ html body > footer .foot-bar #method-toggle, html body > footer .foot-bar .tr-link, html body > footer .foot-bar .fb-open, html body > footer .foot-bar .byline, html body > footer .foot-bar .byline a { font-size: 11px !important; line-height: 1.5 !important; color: var(--ink3) !important; background: none !important; border: 0 !important; text-decoration: none !important; padding: 2px 0 !important; white-space: nowrap; } /* The two real controls read as controls, on a hairline that only the pointer lights. instrument.css:542 gives every .tr-link a permanent --line bottom border and --ink text; both are cancelled above, so the underline has to be declared here or the buttons become indistinguishable from the byline. */ /* AND THE THREE CLICKABLE THINGS SAY SO AT REST. With the exits levelled to one weight, the two buttons and the byline's anchor became visually identical to the static words around them; instrument.css:542 had given them a permanent --line underline for exactly this reason and this file cancels it along with the --ink colour. It comes back at --line, which is the app's hairline and is barely visible on purpose, and lifts to --edge-2 under the pointer. An affordance, not an emphasis. */ html body > footer .foot-bar #method-toggle, html body > footer .foot-bar .tr-link, html body > footer .foot-bar .fb-open, html body > footer .foot-bar .byline a { border-bottom: 1px solid var(--line) !important; cursor: pointer; transition: color 160ms ease, border-color 160ms ease; } html body > footer .foot-bar #method-toggle:hover, html body > footer .foot-bar .tr-link:hover, html body > footer .foot-bar .fb-open:hover, html body > footer .foot-bar .byline a:hover { color: var(--ink) !important; border-bottom-color: var(--edge-2, #423a31) !important; } /* ── NARROW. The claim keeps its noun and its date at every width. */ @media (max-width: 560px) { /* ROW AND WRAP, NOT COLUMN. A column gives every item its own line and measured 193.5px of an 844px viewport, which is worse than the bar it replaced and worse than the 170px gap.css already called a defect in its own right. Wrapping packs the two controls onto one line and costs three rows instead of five. */ html body > footer .foot-bar { align-items: baseline !important; row-gap: 8px; column-gap: 18px; padding: 8px 18px 9px !important; } html body > footer .foot-bar .tr-count { order: 1; margin-right: 0; column-gap: 10px; flex: 0 1 auto; } /* The number keeps its line; the sentence takes the next one. */ html body > footer .foot-bar .tr-count > i { flex: 1 1 100%; } /* gap.css:362 removes the caption and the start date under 560px, which is what left a bare seven-digit number on every phone. They come back: a colophon that has to drop something drops an exit, never a unit. */ html body > footer .foot-bar .tr-count > i { display: block !important; } html body > footer .foot-bar .tr-count > i b { white-space: normal !important; } html body > footer .foot-bar #method-toggle { order: 2; } html body > footer .foot-bar .tr-link, html body > footer .foot-bar .fb-open { order: 3; } html body > footer .foot-bar .byline { order: 4; } } /* ── THE STATUS AT NARROW, AND THE NAMEPLATE THAT HAS TO MAKE ROOM FOR IT. Measured at 390: the lockup is 28px of mark plus a 30px wordmark at 158px, which leaves 136px for a reading that needs 165. The old pill "solved" that by wrapping to three lines and breaking 34,500 from contracts. A masthead scales its nameplate on a phone; it does not amputate the reading beside it. 21px keeps "Moneyness" the dominant object in the row by a factor of two over the 11px micro-caps, and frees 47px, which is more than the reading is short. The mark stays 28px: it is the brand file's own artwork and it is already at its floor. */ @media (max-width: 700px) { html body header.top .brand h1 { font-size: 21px !important; letter-spacing: var(--tr-display) !important; line-height: 1.05; } html body header.top #status.status { padding-left: 13px !important; column-gap: 9px; } html body header.top #status #status-text { column-gap: 6px; } html body header.top #status .dot { height: 26px !important; } } /* §LOGO LINK. The mark became an anchor so it can reach the extension page. An anchor brings underline, a colour and a focus outline the lockup never had, so all three are re-stated here rather than left to the UA sheet. The focus ring is KEPT, only moved: the mark is now keyboard reachable and a link you can tab to but cannot see focused is worse than no link. */ a.logo { text-decoration: none; color: inherit; display: inline-flex; border-radius: 6px; outline: none; } a.logo:focus-visible { outline: 2px solid var(--brand, #ff7a1a); outline-offset: 3px; } a.logo .logomark { transition: transform 140ms cubic-bezier(.2,.7,.3,1); } @media (prefers-reduced-motion: no-preference) { a.logo:hover .logomark { transform: scale(1.06); } }