/* RFSA-110: the Fleet Dashboard's two type families, served from its own static assets. A grotesque (Archivo) for UI text and a monospace (IBM Plex Mono) for every machine-generated value — timestamps, ages, UNC paths, credentials, setting keys, file names, counts. Self-hosted rather than pulled from a font CDN, which is what the RFSA-109 design canvas does: this is the page an operator opens to diagnose an outage, and it must not depend on a third party being reachable to render the readings they are opening it for. It is also public-internet-facing, so every request it makes on an operator's behalf is one more party that learns they are looking. Provenance, the exact commands that produced these files, and why only these subsets and weights ship are in wwwroot/fonts/README.md. Both families are SIL OFL; each licence ships beside the files it covers, as archivo-LICENSE.txt and ibm-plex-mono-LICENSE.txt. Static per-weight instances rather than one variable font per family: every weight the pages compute is a real file, so no weight is ever synthesised — a browser asked for a weight it has no file for smears the nearest one, which reads as a heavier font rather than as a fault. Archivo ships four (400 for body copy, 500 and 600 where a rule says so, 700 for h1/h2/th and the in the credential panels, since body's family inherits everywhere); IBM Plex Mono ships one, because every value it is for sits in a cell that inherits normal weight. SelfHostedFontTests holds both inventories to what the stylesheet actually asks for. Two unicode-range subsets each: `latin` covers French including the Œ/œ ligature, `latin-ext` covers the rest of Latin script. The ranges are the upstream ones, unedited, and are what makes the second subset free — a browser fetches a subset only once a character on the page falls in its range, so latin-ext costs nothing until a Station name or a NAS error text needs it. Anything outside both ranges falls to the fallback stack for that character alone. font-display: swap, not the default `auto`: an operator reading the page during an incident gets the text immediately in the fallback and the family a moment later, rather than a blank column while the file arrives. */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/archivo-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/archivo-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/archivo-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/archivo-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* RFSA-111: the token layer. One committed theme — dark — replacing the four --fleet-* variables, which collapsed distinctions the pages need: one hairline separated table rows *and* outlined panels, and one muted grey carried both a label and a note. Everything below is expressed in these tokens, so a page nobody has touched still comes out coherent. Every colour here is a measurement, not a preference. Each text tier clears WCAG AA (4.5:1) against every surface it can sit on, --surface-raised included — that is the table-header surface, the lightest thing on the page, and the one place the ramp gets tight. The ratios are recorded per token below; RFSA-109 rules they are verified by computation and not asserted in code, since a test that recomputes a ratio from a hex literal only restates the literal. */ :root { /* One theme, named. Not `light dark`, and not removed: this declaration is what makes the day selector's native , the role (color-scheme: dark is what makes its picker match) rather than a styled box with a fake calendar glyph, which is what the RFSA-109 canvas draws — a mockup can draw the field it wants; a page that replaces the native control takes the operator's own date picker away with it, and that is a real loss for a fake gain. What RFSA-118 does change is which surface it is: --surface-inset rather than the panel face, so the one segment of this instrument an operator types into reads as a well sunk into it, the same way every other field on the dashboard does. --text measures 16.78:1 there, the highest reading on any of the four surfaces. */ .day-nav input[type="date"] { border: 0; border-radius: 0; padding: 0.25rem 0.5rem; background: var(--surface-inset); color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* The picker glyph is a UA-drawn button, and under color-scheme: dark it arrives at full white — the brightest thing in a control group whose own labels are one tier down. Held back to the label tier at rest and given all of it back on hover and focus, so it stops competing with the date it opens without ever becoming hard to find. Chromium-only by nature; a browser without this pseudo-element renders the glyph exactly as it does today. */ .day-nav input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; } .day-nav input[type="date"]:hover::-webkit-calendar-picker-indicator, .day-nav input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: 1; } /* RFSA-118: back to the far end of the controls' own row, which is where RFSA-113 moved it *from*. That ticket's argument was sound for the block it was looking at and stops being sound once the block has an outline. It had two halves: "At the far end it still read as the last item in a row of controls." That was true of a bare row on the page, where nothing said where the group began or ended, so the rightmost thing in the row was read as part of it. The panel says it now — the controls are raised chips on a card and this is --dim text at 0.8rem with no face of its own, which is a difference visible in one glance rather than by comparing two items. "Once the row wrapped it read as a control that had dropped to a second line." Still worth avoiding, and `margin-left: auto` is what avoids it rather than what causes it: when the row runs out of room the note wraps alone, and the auto margin keeps it right-aligned on that line, where nothing sits beside it to be mistaken for. Which is the layout RFSA-113 wanted — the difference is that it is now the narrow-viewport case instead of every case. Measured rather than assumed: it shares the controls' row down to ~820px and is alone on its own line at 700 and below, with no width in between where it sits beside a single stray control. What forced the revisit is that the panel is full-bleed: with the note underneath, the whole right half of it was empty, so the one group that scopes everything below it read as the least finished thing on the page. max-width in ch because this is a sentence — it wraps to two lines against the controls' height rather than running the width of the console. */ .day-retention { margin-left: auto; max-width: 46ch; color: var(--dim); font-size: 0.8rem; line-height: 1.4; text-align: right; } /* Amber, not red: viewing a past day is a legitimate thing to do, and the notice is a clarification of what the grid below means, not a fault. RFSA-113 acceptance criterion 5: the same division RFSA-111 made inside an alert panel. A whole paragraph set in --warn is a page shouting a colour that means "something is wrong" at a reader who has merely picked a date; the panel and its lit edge are what say "read this", and the sentence itself returns to the value tier so it can be read as the caveat it is. */ .day-live-notice { margin: 0 0 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--radius-panel); background: var(--surface-card); color: var(--text); } /* RFSA-104: the two orderings, now that the table headers that carried them are gone. Kept above the grid rather than on each Tile — the sort is a property of the grid, not of a Station. */ .grid-sort { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 0.75rem; font-size: 0.9rem; } .grid-sort-label { color: var(--muted); } /* The `th a` rule below gave these controls their look while they were column headers; they are no longer inside a th, so without this they render as default underlined blue links. RFSA-113 acceptance criterion 4. Keeping the header treatment after the header was gone left two words in body text with nothing around them: nothing said they were clickable until the pointer was already on one, and the sort arrow was the only mark on the active one — a single character at the end of a word, which is not a state an operator sees without reading. Each ordering is now a chip an operator can see is a control before touching it. */ .grid-sort a { color: inherit; text-decoration: none; font-weight: 600; padding: 0.15rem 0.5rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-card); } /* The active ordering, marked with the accent from inside — the same idea the nav uses for the page an operator is on (.main-nav-links a.active), since "this is the one you are on" is one idea and a dashboard that says it two ways makes a reader learn two. RFSA-118 made these chips pills, and a pill cannot take the nav's bottom underline: an inset shadow follows the border-radius, so `inset 0 -2px 0` on a 999px corner is not a rule under a word but a crescent under it. The accent becomes a ring instead, which is the same statement in the shape this control actually has. The nav keeps the underline, because a nav link is a rounded rectangle with a flat bottom edge to underline — the idiom is "the accent marks it", and that is what both still do. The arrow SortIndicator appends stays, so the mark is never colour alone. Keyed on aria-current rather than a class: the attribute is what tells a screen reader the same thing the fill tells everyone else, so styling it is what keeps the two from drifting apart. Above the hover rule, not below it, and that ordering is load-bearing: the two selectors have the same specificity, so whichever comes last wins the `background` and `border-color` they both set. Below, this rule would have taken the pointer response away from the active chip — which is still a control, since clicking it reverses the direction — leaving the one ordering an operator is using as the one that does not answer the mouse. The marker itself survives the hover regardless: `box-shadow` is set here and nowhere else. */ .grid-sort a[aria-current="true"] { background: var(--surface-raised); border-color: var(--line); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--accent); } /* The `button` primitive's hover again, for the same reason the day-nav segments take it: these do what a button does. `text-decoration: none` overrides the old underline-on-hover — the chip's own border and fill now answer the pointer, and an underline on top of them is a second answer. */ .grid-sort a:hover, .grid-sort a:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 14%, var(--surface-raised)); text-decoration: none; } /* auto-fill, not auto-fit: a fleet of two Stations should read as two Tiles of the same width as a fleet of forty, rather than two Tiles stretched across the whole viewport. */ .tile-grid { display: grid; /* 28rem rather than 26: a Break row is seven columns since RFSA-106, and the widest of them are floored at what their own values need. Below 28rem those floors no longer fit and the Tile falls back to scrolling sideways, which is worse than fitting one fewer Tile per row. RFSA-115: `min(28rem, 100%)` rather than a bare 28rem, and the difference only shows up at one width. A bare minmax() floor is a hard one — auto-fill cannot drop below a single track, so once the viewport left less than 28rem for it the track stayed 448px wide and the *whole page* scrolled sideways: measured at 480px and below (9px of overflow at 480, 114px at 375), where every column had already reflowed to one and there was no "one fewer Tile per row" left to fit. min() caps the floor at the track's own share of the row, so the last column shrinks with the viewport and the overflow lands where the comment above always said it should — inside .station-tile's own `overflow-x: auto`, on the one Tile that cannot fit its Break row, instead of on the page. Above 496px nothing changes: 100% exceeds 28rem there, so min() resolves to 28rem and the reflow is the one every other width already had. */ grid-template-columns: repeat(auto-fill, minmax(min(28rem, 100%), 1fr)); gap: 1rem; align-items: start; } .station-tile { /* The health colour and the light it throws, both defaulted here and both set per health at the bottom of this file. Declared on the Tile rather than only on the four health rules so that a Tile carrying no health class still has a defined edge instead of inheriting one, and so the box-shadow below can be written once. */ --tile-edge: var(--line); --tile-glow: transparent; border: 1px solid var(--line); /* The lit edge: a crisp 4px line in the health colour, plus the light it throws inward. Border-plus-shadow rather than an element drawn over the content, and that is forced rather than chosen (acceptance criterion 2) — this Tile scrolls its Breaks sideways, so a positioned glow would either scroll away with them or be clipped by the radius. Both of these are properties of the Tile's own box: an inset shadow is painted on the padding box and stays where it was put however far the content inside has scrolled. */ border-left: 4px solid var(--tile-edge); /* The blur is deliberately shorter than the 0.9rem of left padding below it, so the glow lives and dies inside the Tile's own left gutter. Two reasons, both of which cost a longer glow something real. An inset shadow paints in its element's *background* phase, under every descendant — so a glow reaching into the content box is cut into stripes by the first opaque child background it meets, and there are two: .break-row's hover lift and .break-files' well, each spanning the full content width. And any --dim text sitting in the lit band is composited over a verdict colour, which quietly costs it some of the contrast the token block records as measured. Keeping the light in the gutter means no child can occlude it and no text is ever on top of it, so the recorded ratios stay true and the edge reads as one unbroken line. */ box-shadow: inset 0.9rem 0 0.8rem -0.9rem var(--tile-glow); border-radius: var(--radius-panel); padding: 0.7rem 0.9rem; /* A card on the ramp, where the Tile used to sit directly on the page. The Tile is what --surface-card was measured for, and the step matters twice over now: the lit edge has a surface to be lit against, and .break-row's hover lift to --surface-raised reads as a lift out of a card rather than as a band appearing on the page. */ background: var(--surface-card); /* The Breaks table can outgrow a narrow Tile; scroll it inside rather than widening the Tile and breaking the grid's columns. */ overflow-x: auto; } .tile-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; } .tile-name { font-size: 1.05rem; font-weight: 600; margin: 0; } /* The Station name is the drill-down's entry point (RFSA-82), but it is also this Tile's heading, so it must not render in the page's own link colour: as an accent-blue heading on a Tile whose whole left edge is already carrying the health colour, it reads as a badge rather than as a name. Same treatment as .grid-sort a and th a — the text takes the page's own colour — except that the underline stays at rest rather than appearing on hover, because on a heading it is the only remaining cue that this navigates somewhere. */ .tile-name a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 0.15em; } .tile-name a:hover, .tile-name a:focus { text-decoration-color: currentColor; } /* What a Tile carries instead of a health badge on a past day (RFSA-104 AC2). Deliberately quiet: it explains the absence of a colour, and is not itself a status. */ .tile-health-note { color: var(--dim); font-size: 0.8rem; white-space: nowrap; } .tile-empty { margin: 0.25rem 0 0.5rem; color: var(--dim); } /* "Never received" is the Fleet Dashboard reporting a gap in its own data, not the Station reporting a quiet day — so it is marked, where "reported no Breaks" reads as ordinary muted text. Amber rather than red for the same reason .day-live-notice is: it is a caveat about what is on screen, not a fault to go and fix. */ .tile-unavailable { border-left: 3px solid var(--warn); padding-left: 0.5rem; color: var(--warn); } .tile-breaks { font-size: 0.85rem; /* No column is content-sized (`auto` / `max-content`). The header and the rows are separate grids now rather than one table, and a content-sized track resolves per grid — so break 1, break 2 and the header would each pick their own widths and the columns would stagger. The three stamp columns and Status are minmax(floor, fr): the floor is the widest thing that column ever holds, so nothing can be squeezed into wrapping the way "Completed" was, and the fr makes the tracks share out whatever is left so the row ends exactly at the Tile's edge — which is what puts the rule under the header all the way across rather than stopping short of it. Every row resolves those frs against the same width, so they still line up. The floors add up to ~46ch, which is why .tile-grid's minimum Tile is 28rem: below that the row cannot fit and would need the horizontal scroll .station-tile still keeps as a fallback. ch is the advance of "0" in *this element's* font, so RFSA-110 changing the family changed every floor here. Re-checked rather than assumed: Archivo's digit advance is 0.573em against Segoe UI's ~0.55, so at this rule's 0.85rem the floors come to ~358px, plus ~29px of gaps — inside the ~414px a 28rem Tile has left after its padding and borders, with about 27px spare. A wider family, or a larger font-size here, is what would tip the row into scrolling. */ --break-columns: 4.6ch /* Break, including the disclosure marker */ 3.6ch /* F1 — "yes" or a dash; the header is abbreviated to match */ minmax(9.2ch, 1.1fr) /* Status — "Completed" is the widest value on the row */ minmax(7.6ch, 1fr) /* Pushed */ minmax(7.6ch, 1fr) /* Played */ minmax(9ch, 1fr) /* Completed — sized by its own header, not by its stamps */ 4.2ch; /* Files */ } .tile-breaks-head, .break-row { display: grid; grid-template-columns: var(--break-columns); gap: 0 0.3rem; align-items: baseline; padding: 0.2rem 0; /* --line-2 rather than a mix of the panel's own hairline: this separates rows inside a Tile, and a line as strong as the Tile's outline competes with the values it is separating. */ border-bottom: 1px solid var(--line-2); } .tile-breaks-head { color: var(--dim); /* A header never wraps: these are one-word labels sized into their own tracks, and a wrapped "Completed" would push the header row taller than the rows it labels. */ white-space: nowrap; } /* The whole Break row is the , so it is the click target, the focus target and what a screen reader announces — none of which needed a handler, a tabindex or an ARIA attribute. */ .break-row { cursor: pointer; /* Both halves are needed to drop the native disclosure triangle: `display: grid` already suppresses it in most engines, but WebKit needs its own pseudo-element told as well. The marker is re-drawn inside the first cell instead, where it costs no column of its own. */ list-style: none; } .break-row::-webkit-details-marker { display: none; } /* A lift up the surface ramp rather than a tint of the hairline: on a dark Tile the row under the pointer has to get lighter to read as the one being pointed at. Acceptance criterion 8: the NAS sync line takes it too. A Tile has exactly two expanders on it and an operator has to recognise both as one control — the sync line is where they go to find out which NAS folder failed, and it was the one clickable line on the Tile that did not respond to a pointer. It gets the row's vertical padding below so the lift lands as the same band. */ .break-row:hover, .break-row:focus-visible, .tile-sync summary:hover, .tile-sync summary:focus-visible { background: var(--surface-raised); } /* The disclosure marker, for both of a Tile's expanders — the Break row draws it inside its first cell, where it costs no column of its own, and the NAS sync line in front of its label. One rule rather than one each, because "the two expanders on a Tile read as the same control" (acceptance criterion 8) is a claim two rules can quietly stop honouring. The fixed width is what keeps the glyph swap below from shifting the text after it. */ .break-index::before, .tile-sync summary::before { content: "\25B8"; display: inline-block; width: 0.9em; color: var(--dim); } .break[open] > .break-row .break-index::before, .tile-sync details[open] > summary::before { content: "\25BE"; } /* Default wrapping, deliberately — not `overflow-wrap: anywhere`, which is what broke "Completed" across two lines. Ordinary wrapping breaks at spaces only, and the one value here that contains a space is the dated stamp a Break carries when it falls outside its own Station Day ("MM-dd HH:mm:ss", RFSA-104). So a plain "06:37:22" and a plain "Completed" can never break, while the rare dated stamp still wraps after its date instead of overrunning the next column. */ .break-cell { min-width: 0; } /* Acceptance criterion 4: the three lifecycle stamps — Pushed, Played, Completed — monospaced with tabular figures. Proportional digits let 06:20:10 and 11:02:17 resolve to different widths, so nothing lines up down the column and a digit that changed cannot be spotted without reading every row; that is the whole reason .mono exists, and tabular-nums is stated for the reason that rule gives — it is what keeps the column aligning when it renders on the fallback stack. Selected by track position rather than by a class on the span, because which columns hold a stamp and how wide those columns are is one fact with one home: --break-columns above, whose seventh entry is the count in this selector. A class would put half of it in Index.razor. The header keeps the UI family deliberately. Its widest label sizes its own track (--break-columns floors Completed at 9ch by its header, not by its stamps), and 9 monospace characters need 9.4ch — so a monospaced header is a wrapped header. The stamps themselves fit without touching a floor, which acceptance criterion 5 requires. They do need part of the fr share to: --break-columns' floors are in ch, so they are measured in Archivo's digit advance, and IBM Plex Mono's is wider (0.6em against ~0.57em) — an 8-character "HH:mm:ss" is a little past the 7.6ch Pushed and Played floor. Every one of these tracks is minmax(floor, fr), and the fr share covers the difference with room over: verified by rendering a Tile at exactly the 28rem minimum, where each stamp clears its own track on both sides and the header still lines up with every row. The one stamp that does not fit is the dated form a Break outside its own Station Day carries ("MM-dd HH:mm:ss", RFSA-104), and it is not meant to — it wraps after its date, which is the case .break-cell above keeps ordinary word-wrapping for, and both halves then clear the track. The family and the tabular figures themselves are not declared here: this selector joins .mono's own rule below, which is the utility RFSA-110 built for exactly these columns. Re-declaring its two lines here instead would read the same today and drift tomorrow — the next ticket to tune .mono (a tracking correction for the fallback stack, slashed-zero) would leave the one place the utility was made for behind, with SelfHostedFontTests still green because it only ever reads .mono. Only the size step is local, because only it is about this row. 0.95em rather than 1em is not that arithmetic, though it helps it: it is the step `code` below measured for the same pairing, IBM Plex Mono's x-height sitting under Archivo's. */ .break-row > .break-cell:nth-child(n+4):nth-child(-n+6) { font-size: 0.95em; } /* Acceptance criterion 6: weight, and nothing else. These labels are lifecycle names, not verdicts — a Break sitting at Pushed at 08:30 is not a fault — and a second colour system on the row would compete with the one thing on the Tile that *is* a verdict, the lit edge. */ .break-status { font-weight: 600; } /* RFSA-107: the selected day's NAS sync result. Separated from the Breaks above by a rule rather than by spacing alone, because it answers a different question about the same day and a reader scanning the Tile has to see where one ends and the other begins. */ .tile-sync { margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px dashed var(--line); font-size: 0.9rem; } /* The whole summary line is the disclosure control, so it has to read as one — the default marker sits outside the line box and a bare renders list-item, which puts the fields on separate lines in some engines. */ .tile-sync summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; /* The Break row's own vertical padding, so the hover lift the two now share lands as the same band on both rather than as a thinner one here (acceptance criterion 8). */ padding: 0.2rem 0; /* Both halves, for the reason .break-row gives one level up: `display: flex` already suppresses the native triangle in most engines, and WebKit needs its own pseudo-element told as well. Said explicitly rather than left to the flex side effect, so the marker rule this line now shares with .break-index is the only thing drawing one and no engine can render two. */ list-style: none; } .tile-sync summary::-webkit-details-marker { display: none; } /* The marker and the hover lift this line used to declare for itself now come from the two rules .break-row shares them with, one level up — that is what acceptance criterion 8 asks for, and it is also what stops the two expanders drifting apart the way they already had: this one had the glyph but no pointer response, and an underline where the Break rows lift. */ .tile-sync .tile-empty { /* Matches the Breaks section's own empty state, so "no sync ran" and "no Breaks reported" read as the same kind of statement rather than as two different weights of news. */ margin: 0; } .tile-sync-folders { min-width: 0; margin-top: 0.4rem; font-size: 0.85rem; } .tile-sync-folders th, .tile-sync-folders td { padding: 0.2rem 0.5rem 0.2rem 0; border-bottom: 1px solid var(--line-2); white-space: nowrap; } /* The category names the folder's role, the path says which share actually got read. Stacked rather than run together on one line: a NAS UNC path is long enough to push every count off the right of a Tile, and the counts are the part being compared across folders. */ .sync-folder-category { display: block; font-weight: 600; } /* Both are Station-supplied text with no length bound worth relying on, and both are on their own line inside a table whose every other cell is nowrap — so both must wrap where they are rather than letting one bad path widen the Tile (acceptance criterion 9). What they break on differs because what they are differs: see each rule. */ .sync-folder-path, .sync-folder-error { display: block; white-space: normal; } /* The note tier, and smaller: the path answers "which share", which matters once the reader has already decided this row is the interesting one. break-all because a UNC path has no spaces to break at, so the alternative to breaking mid-segment is not breaking at all. */ .sync-folder-path { color: var(--dim); font-size: 0.8rem; word-break: break-all; } /* Acceptance criterion 9: the most readable thing in its row. Not by being the largest — it sits at the table's own size — but by contrast and weight, in a cell whose Outcome is bold and red: the value tier at 12.98:1 against the Tile, at normal weight, beside a verdict at 600. That is exactly the division RFSA-111 made inside an alert panel, where the lit edge carries the verdict and the sentence carries the information, and it is the reason this text is no longer left to inherit the .bad cell around it — the reason a folder failed is prose, and prose set in the verdict's own colour and weight reads as more verdict rather than as the answer. break-word rather than the path's break-all: this is a sentence, so it has spaces to break at, and breaking a word mid-way is a last resort here instead of the only option. */ .sync-folder-error { color: var(--text); font-weight: 400; word-break: break-word; } .break-file-count, .tile-breaks-head > span:last-child { /* Right-aligned so the count sits under its own header rather than drifting away from it in the widest column on the row. */ text-align: right; } .break-file-count { color: var(--dim); } /* Acceptance criterion 7: several playlists can be open at once, and each has to read as belonging to its own Break. RFSA-106's indentation alone did not carry that — with two open, the second playlist is as indented under the first Break's rows as under its own, and the reader is left counting rows to work out which is which. So the playlist becomes a well: --surface-inset, the step down the ramp RFSA-111 defined for a thing sitting *inside* a card, tethered to its Break by a rule down its left. Down the ramp rather than up it, which was the first attempt and does not work: --break-row's hover lift is --surface-raised, so anything lighter than the card either collides with that or — half a step short of it — is too faint to see at all. Recessing instead leaves the whole lighter half of the ramp to the pointer, and reads as what it is: this Break, opened up. The three left lengths still add up to RFSA-106's 1.4rem of indent, so the playlist sits where it always did. --line for the tether, not --line-2: this line brackets the rows above it rather than dividing them, and at the width the ramp's own steps are worth here the quieter hairline disappears against the well. */ .break-files { margin-left: 0.5rem; padding: 0.25rem 0.5rem 0.4rem 0.775rem; border-left: 2px solid var(--line); border-radius: 0 var(--radius-inline) var(--radius-inline) 0; background: var(--surface-inset); } .break-file-list { min-width: 0; margin: 0.3rem 0 0.2rem 0; font-size: 0.8rem; } .break-file-list th, .break-file-list td { padding: 0.2rem 0.45rem 0.2rem 0; white-space: nowrap; } /* The right padding on every cell is the gutter before the next column; on the last one it is a gutter before nothing, and this table has no width to spare — six columns inside a well inside a 28rem Tile. The ~7px it gives back all goes to File, which is the only column that can use it, and is the difference between a typical name fitting on one line and breaking mid-token. */ .break-file-list th:last-child, .break-file-list td:last-child { padding-right: 0; } /* RFSA-118: a label, like every other column header the RFSA-109 canvas draws and like .tile-fact-label two rows below it in the same Tile. This was the one header on the dashboard set in running text at the size of the values under it, which is what left the playlist reading as a paragraph of columns rather than as a table. Smaller here is free, unlike on .tile-breaks-head above: that header shares --break-columns with the rows it labels, and those track floors are in `ch`, so a font-size on the header resolves them differently from the rows and the two stop lining up. This table is `table-layout: auto` and its columns are computed from every cell at once, so the header can be any size it likes. --dim on --surface-inset measures 6.10:1. */ .break-file-list th { color: var(--dim); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--line-2); } /* Monospaced, where this table was the one place on the dashboard machine values were not. A file name, a duration and a played stamp are exactly what .mono exists for — the Break row this playlist hangs off already sets its own stamps in it, so an operator reading down from a Break into its files was crossing a family change for no reason. --muted rather than --text, so the one cell that is worth reading in full can be the one that is: see .file-name. 9.51:1 on --surface-inset. The rules come back too. The global `th, td` rule draws them and this table used to cancel them; a six-column list of near-identical short values is precisely the shape that needs a reader's eye guided along a row, and the well it sits in is what keeps them from adding up to noise. */ .break-file-list td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); border-bottom: 1px solid var(--line-2); } /* The last rule would draw the playlist's own bottom edge a few pixels above the well's, which reads as a table that has been cut off rather than as one that has ended. */ .break-file-list tr:last-child td { border-bottom: 0; } /* Role and State are words, not machine values, so they stay in the UI family — the same split the Break row above makes, where .break-status is a word and only the three stamps are monospaced. State is also the one emphasised cell here, and 600 in the monospace family would be synthesised: that family ships regular only, which SelfHostedFontTests pins and whose rationale is exactly this case. Role is addressed by position because it is the only unclassed word column, and the six columns are fixed by the thead directly above and by BreakFileDetailPageTests, which writes the whole row out. */ .break-file-list td:nth-child(4), .break-file-list .file-state { font-family: var(--font-ui); } /* The one column that can be arbitrarily long and is worth reading in full — a file name is how an operator recognises the spot. Everything else on the row is a short fixed-shape value, so this is the only cell that may wrap, and the only one lifted back to the value tier now that the rest of the row sits a step below it. 16.78:1 on --surface-inset, the highest reading on any surface. */ .break-file-list .file-name { white-space: normal; word-break: break-word; max-width: 22ch; color: var(--text); } .break-file-list .file-state { font-weight: 600; } .break-files-empty { margin: 0.3rem 0 0.2rem 0; font-size: 0.8rem; color: var(--dim); } /* "Pushed, but no playlist detail arrived" is the Fleet Dashboard reporting a gap in its own data, exactly as .tile-unavailable is one level up — where "not pushed yet" is an ordinary state of a Break whose turn has not come, and stays plain muted text. Those two, plus that plain muted text, are the three readings acceptance criterion 10 requires to stay distinct, and RFSA-112 keeps all three: the amber marker is the cue and neither its colour nor its width changed. What did change is the surround — this one now sits inside .break-files' well, so the same marker has a grey rule outboard of it that .tile-unavailable does not. Left that way on purpose. The well is what buys criterion 7, hoisting this one notice out of it would un-tether the Break whose only content *is* this notice, and against a recessed surface the amber reads at more contrast than it did on the card, not less. Verified on a render rather than argued: the two are still the same reading at two scopes. */ .break-files-unavailable { border-left: 3px solid var(--warn); padding-left: 0.5rem; color: var(--warn); } /* Acceptance criterion 4: still visible, deliberately not prominent — the Breaks above are what the Tile is for, and these are the live facts that used to be the table's own columns. */ .tile-footer { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--line); font-size: 0.85rem; } /* Acceptance criterion 11: each fact reads as a label and then a value, with the label subordinate. The footer already groups the pairs — it is a flex row whose gaps put 1rem between facts and nothing between a label and its own value — so what was missing was the subordination: a label and a value both set in running text at the same size read as a sentence, and the eye has to parse it to find out which half is the reading. Still --muted, which is RFSA-111's label tier and exactly what this is; the subordination is carried by size and case instead, and dropping to --dim would have said "note" about something that is not one. Smaller and uppercased, letter-spaced back out because caps set tight read as a word rather than as a label. The two roughly cancel on width — caps are about 15% wider per glyph and this is 15% smaller — so a footer of six facts wraps where it wrapped before. The Tile's NAS sync line takes this class too, and gets the same treatment for the same reason: "NAS SYNC" in front of a verdict is a label, not the first two words of a sentence. */ .tile-fact-label { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; /* These are two- and three-word labels sized to sit on one line with their value; a label that wraps stops looking like the value's own. */ white-space: nowrap; } .tile-fact-label::after { content: " "; } /* Both can carry arbitrarily long Station-supplied text, so they take the whole width rather than stretching the flex row they sit in. */ .tile-fact-event, .tile-fact-error { flex-basis: 100%; word-break: break-word; } /* The Event's detail goes on its own line, which is what the fleet grid table's own `.event-cell > span` rule used to do before RFSA-104 replaced the table. Without it the age and the detail are adjacent inline elements with no whitespace between them in the rendered HTML — Razor strips it around the @if the detail sits in — so a real Station renders "7s agoBreak 6 on 2026-09-02: 2 items". Also keeps a long detail from pushing the age away from the Event type it belongs to. */ .tile-fact-event .event-detail { display: block; } /* Every page-level table on the dashboard is inside one of these, and the two together now read as one panel: the wrapper owns the outline and the corner, so the table itself needs neither and its own sideways scroll is clipped to the radius. */ .grid-wrapper { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-panel); } table { border-collapse: collapse; width: 100%; min-width: 52rem; } th, td { text-align: left; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--line-2); vertical-align: top; } th { font-weight: 600; white-space: nowrap; color: var(--muted); } /* RFSA-83: a sortable column header is a link, but it heads a column — it should read as a header an operator can click, not as prose with a hyperlink in it. The arrow (SortIndicator) marks which one is actually ordering the grid. `color: inherit` now also keeps it out of --accent, which is what a bare `a` on this page takes. */ th a { color: inherit; text-decoration: none; } th a:hover, th a:focus { text-decoration: underline; } /* The card, and the raised band on it. Scoped to .grid-wrapper rather than declared on `table`, because the Tile's own two tables (.break-file-list, .tile-sync-folders) are nested inside a Tile and must not each grow a card of their own. --muted on the header, not --dim: --surface-raised is the lightest surface the dashboard has, and the note tier measured against it comes to 4.72:1 — clear, but with nothing spare. A column header is a label, so it takes the label tier, at 7.36:1. */ .grid-wrapper table { background: var(--surface-card); } .grid-wrapper th { background: var(--surface-raised); } /* The wrapper's own bottom edge already closes the table; a last-row rule under it reads as a stray empty row. */ .grid-wrapper tbody tr:last-child > * { border-bottom: 0; } .muted { color: var(--muted); } .ok { color: var(--ok); font-weight: 600; } .bad { color: var(--bad); font-weight: 600; } /* A page-level alert is a panel, not a coloured sentence. Keyed on role="alert" rather than on a new class, so it reaches all of them — the sign-in rejection, the password rejections, the invalid Password link, the reset confirmation — plus App.razor's unclassed "no access" and "nothing at this address", without touching any markup. Deliberately not a match for .credential-reveal, which carries role="alert" on a
and is a panel in its own right. Inside the panel the text returns to the value tier at normal weight: the panel and its lit edge are what say "read this", and a slab of bold coloured text on top of them says it twice. The inline .ok/.bad spans elsewhere — a revoked credential in a table, a settings error in a list — are untouched and keep their colour, because there they are the only cue there is. */ p[role="alert"] { margin: 0 0 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-control); background: var(--surface-card); } p.ok[role="alert"], p.bad[role="alert"] { color: var(--text); font-weight: 400; } p.ok[role="alert"] { border-left-color: var(--ok); } p.bad[role="alert"] { border-left-color: var(--bad); } /* RFSA-110: the utility that puts a machine-generated value in the monospace family — a timestamp, an age, a UNC path, a credential, a setting key, a file name, a count. No markup carries it yet: the columns it exists for are moved onto it by the later tickets of RFSA-109, which this one deliberately does not start, and it lands here now so each of those is a change of class and nothing else. (.credential-value below is already monospaced and takes --font-mono directly rather than this class — it is one block, not a column, so it has no use for tabular figures.) tabular-nums is the whole reason a column of stamps is worth moving: proportional digits let 06:20:10 and 11:02:17 sit at different widths, so nothing lines up down the column and a digit that changed cannot be spotted without reading every row. Stated explicitly rather than left to IBM Plex Mono — which is monospaced and so already tabular — because the declaration is what keeps the utility aligning when it renders on the fallback stack instead. RFSA-112 is the first caller, and it joins this rule rather than restating it — see the Break stamp rule above for why, and for why it selects its cells by track position instead of carrying the class in markup. Anything added here reaches it. One constraint on the selector list, and it is not cosmetic: `.mono` must stay last, alone on its line and immediately before the brace, because SelfHostedFontTests reads this rule by exact selector and a `.mono,` followed by a comma is a rule it cannot find. Append below, never after `.mono`. */ .break-row > .break-cell:nth-child(n+4):nth-child(-n+6), .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* An inline machine value inside prose — HH:mm:ss in a Settings hint, and the two credential blocks below, which are too and override the box part of this. The inset well is what separates it from the sentence around it; the colour is inherited rather than set, so a value quoted inside a note stays in the note's own tier instead of jumping a tier above it. */ code { font-family: var(--font-mono); /* Barely down from the prose around it, and measured rather than guessed at: IBM Plex Mono's x-height sits below Archivo's, so the usual 0.9em step reads as a size smaller rather than as the same sentence in another family. */ font-size: 0.95em; padding: 0.05em 0.3em; border-radius: var(--radius-inline); background: var(--surface-inset); color: inherit; } /* RFSA-83's derived health; RFSA-112's treatment of it. Still the point RFSA-83 made — a faulted Station has to be findable in a 44-Station fleet without reading any of the other Tiles — but now said in one place per Tile rather than two. The 10% body tint the two fault states carried is gone: a wash that faint across a whole card is a difference an operator has to hunt for, and it only ever existed for two of the four states, so a degraded Station was marked by an edge *and* a field while an on-air one was marked by an edge alone. All four now speak in the same place, at the same intensity, and that is what makes a column of Tiles scannable — the eye runs down the edges and nothing else moves. The three lit states are told apart by hue at one lightness and one chroma, which is RFSA-83's own ruling re-lit by RFSA-111: no verdict shouts louder than another because of how its hue happens to render. Hue is therefore never the only cue — .health-badge below carries the word beside it (acceptance criterion 3), because a colour-blind operator cannot read a status made of colour. */ .station-tile.health-onair { --tile-edge: var(--ok); --tile-glow: var(--ok); } .station-tile.health-degraded { --tile-edge: var(--warn); --tile-glow: var(--warn); } .station-tile.health-offline { --tile-edge: var(--bad); --tile-glow: var(--bad); } /* The two states acceptance criterion 1 rules carry no colour: an idle Station, and any Station on a past day (RFSA-104 AC2 — not a fifth health, the absence of one). The edge keeps its width so a Tile does not shift when the day changes, and takes the Tile's own hairline so nothing about it reads as a verdict. Both leave --tile-glow at its default, so an unlit Tile is unlit rather than faintly lit in grey; said explicitly rather than left to .station-tile's own defaults, because what these two states are is a decision and not an omission. */ .station-tile.health-idle, .station-tile.health-historical { --tile-edge: var(--line); --tile-glow: transparent; } /* The health word itself. Nowrap so "on air" stays one token. Keyed on the health class rather than on being inside a tinted row, so the grid's cell and the drill-down's header badge — which is the same verdict rendered at a different scope — cannot end up two different colours. RFSA-113 acceptance criterion 9 makes it a chip. RFSA-112 wanted this and deferred it, because a tinted chip on the Tile would have landed beside the drill-down's bare online/offline spans and made the two scopes look like two different verdicts — which is exactly what this criterion forbids. Both scopes are in this ticket, so both change together. The fill and the border are color-mix over `currentColor`, not over a named verdict token, and that is what lets one rule serve every wearer. The four .health-* rules below still supply the colour; the drill-down's fallback spans, which have no derived health to name and so wear .ok or .bad instead, get the identical chip from their own colour. A verdict rendered at one scope cannot be a chip while the same verdict at another scope is a bare word. Percentages are low on purpose: at 14% the fill is a tint the verdict colour still reads at full contrast against, so the chip is a shape around the word rather than a second, weaker colour competing with it. */ .health-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.55rem 0.15rem 0.45rem; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } /* RFSA-118 acceptance criterion 4: the same dot .fleet-counter-label carries, so a Tile and the count it is one of read as one verdict in one shape rather than as a chip and a cell that happen to share a hue. currentColor again, for the reason the fill and border above are — the four .health-* rules stay the only place a verdict's colour is decided. Nothing here touches the word's contrast: the dot is a sibling of the text, not a backdrop for it, so RFSA-115's four measurements against the 14% tint (5.80 offline / 5.93 degraded / 6.29 on air / 6.50 idle) are unchanged. Uppercasing is CSS, so the label strings the page tests assert on are untouched too. The two unlit states get no glow, matching .station-tile's own edge rules, which already light on air / degraded / offline and leave idle and historical at the plain hairline. A glow is what makes a verdict findable across ~44 Tiles without reading one, and idle is not a verdict to go and find — it is a Station with nothing wrong and nothing on. */ .health-badge::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } .health-badge.health-idle::before, .health-badge.health-historical::before { box-shadow: none; } /* One rule per verdict, two wearers each. RFSA-114's masthead counters join the badge here rather than restating the mapping next to their own layout: a count and the Tiles it counts are the same verdict, and acceptance criterion 3 is only structurally true — rather than true until someone edits one of two lists — while there is a single place that says which colour that verdict is. Each wearer takes the hue as currentColor and spends it differently: the badge on a chip's fill and border, the counter on its dot. */ .health-badge.health-offline, .fleet-counter.health-offline { color: var(--bad); } .health-badge.health-degraded, .fleet-counter.health-degraded { color: var(--warn); } .health-badge.health-onair, .fleet-counter.health-onair { color: var(--ok); } /* RFSA-115: the label tier, where this was the note tier. --dim was measured against a *surface* when the token block was written — 5.40:1 on --surface-card — but .health-badge above then puts the word on a 14% tint of its own colour, and for the three hued states that tint moves the backdrop sideways in hue while for this one it moves it straight up the same grey ramp the text is on. So the chip cost idle what it cost none of the others: the word measured 4.47:1 on the Tile, the one reading on the nine pages under 4.5:1. At --muted it is 6.50:1, which puts the four badges in one band (5.80 offline / 5.93 degraded / 6.29 on air / 6.50 idle) rather than three clear and one short. Still a neutral grey, so nothing about it reads as a verdict — that is what the two unlit states are about, and --muted is a tier, not a hue. It also corrects the counters strip, where this rule is the other wearer: an idle count set in --dim beside a --muted .fleet-counter-label was the one segment whose word outranked its own number, which is exactly the inversion .fleet-counter-zero below exists to avoid. */ .health-badge.health-idle, .fleet-counter.health-idle { color: var(--muted); } /* Acceptance criterion 2's zero. The segment keeps its place and drops out of the lit tier rather than merely going grey: --surface-inset makes it read as a slot with nothing in it from one segment, where grey among grey is a difference an operator can only find by comparing two — the same ruling RFSA-113 made for an unavailable day bound. Below the four rules above and at equal specificity, which is the whole of how it takes the hue back off a segment nothing is in. Moving it above them would silently stop it working. */ .fleet-counter.fleet-counter-zero { color: var(--dim); background: var(--surface-inset); } /* RFSA-118: the hairline is no longer the segment's own border but the panel's internal rule, so a zero no longer lightens it — a divider that changed weight with the count would make the panel's own grid move. What says "empty" is the inset surface and the unlit tier, which is what it always was; the border was only ever agreeing with them. */ /* Both halves, where before this was the label alone. .fleet-counter-value now sets --text explicitly (the hue moved to the label), so without this a zero would keep a full-strength number over a dimmed word — the exact inversion this rule exists to prevent, arrived at from the other side. --dim on --surface-inset measures 6.10:1. */ .fleet-counter-zero .fleet-counter-value, .fleet-counter-zero .fleet-counter-label { color: var(--dim); } /* And its dot goes out. Nothing lit means nothing to go and fix — a grey dot still burning beside a zero is the one thing on the panel that would read as a reading when it is an absence. */ .fleet-counter-zero .fleet-counter-label::before { background: var(--line-2); } /* The drill-down's Detail and Last error cells — free text a Station sent, so a sentence, a stack frame, or one 400-character UNC path with no space in it, and this rule is on both columns. RFSA-113 acceptance criterion 7: overflow-wrap: anywhere rather than the word-break: break-word this carried, and the difference is the whole fix rather than a modernisation. break-word only breaks a word once the line box is already too narrow for it — but these live in an auto-layout table, where a cell holding an unbreakable token asks for that token's full width as its minimum and the table simply grows to give it, past the max-width here and past .grid-wrapper, until the page scrolls sideways and every other column has been squeezed to pay for it. `anywhere` is the one value that also counts toward min-content width, so the column can shrink and the max-width is finally the constraint it always read as. */ .error-cell { max-width: 24rem; overflow-wrap: anywhere; } /* .event-cell and its span rule lived here until RFSA-104: they styled the fleet grid table's "Last event" cell, and the Tile's footer uses .tile-fact-event instead. Removed rather than left for a future reader to wonder which of the two is live. */ .event-type { font-weight: 600; } .event-detail { color: var(--dim); font-size: 0.85em; } h2 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 0.5rem; } button { font: inherit; padding: 0.3rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-raised); color: var(--text); cursor: pointer; } /* :not(.link-button) because that class is a