:root { --ink: #413f42; --teal: #00939a; --teal-deep: #005f61; --paper: #f6f3ee; --panel: #fff; --line: #dde5ed; --muted: #758796; --mark: #ce0058; --sans: "graphie", "Graphie", "Figtree", Arial, sans-serif; --slab: "mokoko", "Mokoko", "Zilla Slab", "Times New Roman", serif; /* One band for the whole page. The chrome and the content line up because both read this, so a page cannot end up with a header that starts at the viewport edge and a body that starts somewhere else. A page needing more room widens the band on , which moves both. These were 52rem and 72rem, which DevTools reports as 832px and 1152px and which read tight on any monitor bought this decade: a grid of eight columns had to scroll at 1152px when the screen had 1920px to give. It is still a fixed column rather than a percentage, so leftover monitor is gutter and an ultrawide and a 1920 see the same page. Do not make this track the viewport with a min-width query, 100%, 100vw, or a max(): the reason for a fixed measure is that a line of prose has a readable length whatever the screen is, and .jobs-row is pinned to three columns for the same reason. */ --band: 64rem; --gutter: 1.75rem; color-scheme: light; } /* A page class, not a screen-size switch: Query needs the grid, the statement and the staff account page need the table. */ body.wide { --band: 80rem; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.05rem; line-height: 1.45; } .skip { position: absolute; left: -999px; top: 0; } .skip:focus { left: 1rem; top: 1rem; z-index: 2; background: var(--panel); padding: 0.4rem 0.7rem; } .wordmark { margin: 0; font-weight: 650; letter-spacing: -0.03em; font-size: 1.15rem; } .wordmark .domains { color: var(--ink); } .wordmark .bot { color: var(--teal); } .wordmark .product { font-family: var(--slab); font-weight: 500; color: var(--muted); margin-left: 0.35rem; } /* The rule under the header runs the full width; what sits above it does not. The inline padding grows to whatever is left over once the band is centred, so the wordmark starts exactly where the page heading below it starts. */ .top { display: flex; align-items: center; gap: 0.85rem; padding-block: 0.75rem; padding-inline: max(var(--gutter), calc((100% - var(--band)) / 2)); border-bottom: 1px solid var(--line); background: var(--panel); } /* The menu is a compact dock, not a flex-grow strip. flex: 1 was what made three or seven links look like they owned the whole bar. margin-inline-start auto puts the dock on the right, opposite the wordmark. */ .top nav { display: flex; gap: 0.2rem; flex: 0 1 auto; align-items: center; flex-wrap: wrap; margin-inline-start: auto; padding: 0.2rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; } /* The slug is a badge after the dock, furthest right, never a chip. nav.html is its one home. It is not a link and it does not take current/hover the way Query and Account do. */ .top .who { display: inline-flex; align-items: center; flex-shrink: 0; margin: 0; padding: 0.38rem 0.75rem; border-radius: 999px; background: color-mix(in srgb, var(--teal) 12%, white); border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line)); color: var(--teal-deep); font-size: 0.8rem; font-weight: 650; line-height: 1; white-space: nowrap; } .top nav > a, .top nav .staff > summary, .top nav .account > summary { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.38rem 0.8rem; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.92rem; line-height: 1; } .top nav > a:hover, .top nav .staff > summary:hover, .top nav .account > summary:hover { color: var(--teal-deep); background: color-mix(in srgb, var(--teal) 10%, white); } .top nav > a[aria-current="page"], .top nav .staff.current > summary, .top nav .staff[open] > summary, .top nav .account.current > summary, .top nav .account[open] > summary { color: var(--teal-deep); background: var(--panel); box-shadow: 0 0 0 1px var(--line); } /* Staff and Account are disclosures in the dock, same family as Query's .about: no script, no Alpine, and not a button (a typeless one would submit Sign out). The menus are positioned so opening one does not grow the header. Account's menu hangs from the right edge of that pill; the slug badge sits after the dock. */ .top nav .staff, .top nav .account { position: relative; } .top nav .staff > summary, .top nav .account > summary { list-style: none; cursor: pointer; } .top nav .staff > summary::-webkit-details-marker, .top nav .account > summary::-webkit-details-marker { display: none; } .top nav .staff > summary::after, .top nav .account > summary::after { content: ""; width: 0.32em; height: 0.32em; margin-left: 0.05em; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-0.08em); } .top nav .staff[open] > summary::after, .top nav .account[open] > summary::after { transform: rotate(-135deg) translateY(-0.08em); } .top nav .staff-menu { position: absolute; top: calc(100% + 0.55rem); left: 0; z-index: 4; min-width: 14.5rem; padding: 0.35rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0.85rem; display: flex; flex-direction: column; gap: 0.15rem; box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 10%, transparent); } .top nav .account-menu { position: absolute; top: calc(100% + 0.55rem); right: 0; z-index: 4; min-width: 14.5rem; padding: 0.35rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0.85rem; display: flex; flex-direction: column; gap: 0.15rem; box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 10%, transparent); } .top nav .staff-menu a, .top nav .account-menu a, .top nav .account-menu .signout button { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.7rem; border-radius: 0.55rem; color: var(--ink); text-decoration: none; font: inherit; font-size: 0.95rem; font-weight: 600; text-align: start; background: transparent; border: 0; cursor: pointer; width: 100%; } .top nav .staff-menu a:hover, .top nav .staff-menu a[aria-current="page"], .top nav .account-menu a:hover, .top nav .account-menu a[aria-current="page"], .top nav .account-menu .signout button:hover { background: color-mix(in srgb, var(--teal) 10%, white); color: var(--teal-deep); } .top nav .staff-menu strong { font-size: 0.95rem; } .top nav .staff-menu span { font-size: 0.8rem; font-weight: 500; color: var(--muted); } .top nav .account-menu .signout { margin: 0.2rem 0 0; padding-top: 0.2rem; border-top: 1px solid var(--line); } a.inspect { display: inline-flex; align-items: center; padding: 0.32rem 0.7rem; border: 1px solid var(--teal); border-radius: 0.4rem; color: var(--teal-deep); text-decoration: none; font-weight: 650; font-size: 0.88rem; background: transparent; } a.inspect:hover { background: color-mix(in srgb, var(--teal) 12%, white); } main { padding: 2.25rem var(--gutter) 4rem; max-width: calc(var(--band) + var(--gutter) * 2); margin-inline: auto; } /* Signing in is a step on a surface, not a heading floating on the paper. The body centres it in the viewport rather than the old 18vh margin, so the card sits in the middle of a laptop screen and still scrolls on a short one. */ body.signed-out { display: grid; place-items: center; min-height: 100dvh; padding: 2rem 0; } .gate { max-width: 28rem; width: 100%; margin: 0; padding: 0 1.5rem; } .gate .wordmark { margin-bottom: 0.9rem; padding-left: 0.1rem; } /* One card, and the same one on the redeem page the MCP process serves. That page inlines its own copy of these declarations because it has no /static of its own; the two are meant to look identical, so a change here is a change there. The teal edge is the only ornament: it ties the gate to the one teal control on it, and it is the accent the brand already uses. */ .card { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--teal); border-radius: 0.5rem; padding: 1.6rem 1.7rem 1.8rem; box-shadow: 0 1px 2px rgb(65 63 66 / 4%), 0 8px 24px -12px rgb(65 63 66 / 18%); } .gate h1 { font-family: var(--slab); font-weight: 500; font-size: 1.9rem; line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 0.5rem; } .lead { color: var(--muted); max-width: 40rem; } .gate .lead { margin: 0; } .signin { display: grid; gap: 0.55rem; margin: 1.4rem 0 0; } .signin label { font-weight: 650; font-size: 0.92rem; } .signin input[type="email"] { font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 0.4rem; background: var(--panel); } .signin button { font: inherit; font-weight: 650; padding: 0.6rem 0.9rem; border: 0; border-radius: 0.4rem; background: var(--teal); color: #fff; cursor: pointer; } .signin button:hover { background: var(--teal-deep); } code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.92em; } .pagehead h1 { font-family: var(--slab); font-weight: 500; font-size: 2rem; letter-spacing: -0.03em; margin: 0.2rem 0 0.5rem; } .eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; color: var(--teal-deep); margin: 0; } .meters { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0 1.5rem; } .meters article { background: var(--panel); border: 1px solid var(--line); padding: 1.1rem 1.2rem 1.2rem; } .meters h2 { margin: 0; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .figure { font-family: var(--slab); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 500; letter-spacing: -0.04em; margin: 0.35rem 0 0.15rem; color: var(--teal-deep); white-space: nowrap; font-variant-numeric: tabular-nums; } .meta { margin: 0; color: var(--muted); font-size: 0.92rem; } /* A way to another page that is not a bare link on the paper. Pills sit in a row; each one is the control. */ .pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; } /* Unsigned /docs has no dock. The Sign in pill sits where the dock would. */ .top > .pills { margin-inline-start: auto; margin-block: 0; } a.pill { display: inline-flex; align-items: center; padding: 0.4rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--teal-deep); font-weight: 650; font-size: 0.9rem; text-decoration: none; } a.pill:hover { border-color: color-mix(in srgb, var(--teal) 45%, white); background: color-mix(in srgb, var(--teal) 9%, white); } .panel { background: var(--panel); border: 1px solid var(--line); padding: 1.2rem 1.3rem; margin-top: 1rem; } .panel h2 { margin: 0 0 0.5rem; font-size: 1.05rem; } /* One line under the table: how many rows are on this page at the left, the control that turns it at the right, separated from the rows by a hairline. This replaces two blocks, the second of which was a

. That class is the question form's card, so a search that paged ended in an empty white slab with one teal button in its top-left corner, which reads as a second question rather than as the foot of an answer. */ .panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-start: 0.9rem; padding-block-start: 0.8rem; border-block-start: 1px solid var(--line); } /* Pushed to the end as well as spaced apart, so the control still sits at the right when there is no count beside it. */ .pager { margin-inline-start: auto; } .pager button { font: inherit; font-weight: 650; padding: 0.5rem 0.85rem; border-radius: 0.4rem; cursor: pointer; } .list { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); } .list th, .list td { text-align: left; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; /* Never break inside a word here. A domain name has no spaces, so breaking anywhere puts one character on each line once the table has more columns than the band is wide. A wide table scrolls in .list-wrap instead, which keeps every value readable left to right. */ overflow-wrap: normal; min-width: 6rem; } .list th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .list tr:last-child td { border-bottom: 0; } .list .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .list .when { white-space: nowrap; color: var(--muted); font-size: 0.92rem; } .list-wrap { overflow-x: auto; } /* A list of domains is a grid: many columns, many rows, and a name at the left that every other cell is about. Three properties make it one, and all three are CSS, because a grid library, client-side sorting and virtual rows are three dependencies to solve a problem this page does not have. The wrapper is the scroll box. It needs a bounded height or nothing can scroll inside it, and a sticky header sticks to a container that never scrolls, which is to say it does nothing. */ .gridwrap { max-block-size: 70vh; overflow: auto; } /* Denser than the rest of the tables here. This one is read by scanning down a column rather than by reading a row, so the rows are tight and the header is what separates them. */ .grid th, .grid td { padding: 0.32rem 0.7rem; vertical-align: middle; } /* Sticky wants a painted background, or the rows show through as they pass under it, and a border-bottom on a sticky cell scrolls away with the border rather than staying: the shadow is the rule that stays. */ .grid thead th { position: sticky; inset-block-start: 0; z-index: 2; background: var(--panel); box-shadow: inset 0 -1px 0 var(--line); border-bottom: 0; white-space: nowrap; } /* The name column stays while the rest scrolls sideways. A row of dates and status codes with the domain scrolled off the left is a row about nothing. */ .grid th:first-child, .grid td:first-child { position: sticky; inset-inline-start: 0; background: var(--panel); box-shadow: inset -1px 0 0 var(--line); } /* The corner is sticky on both axes, so it has to outrank both. */ .grid thead th:first-child { z-index: 3; } .grid tbody td:first-child { z-index: 1; font-weight: 600; } /* One line per cell, clipped, with the whole value in the title. The ellipsis needs a block box with a width to happen in: max-inline-size on the cell itself is advisory under automatic table layout and a registrar name simply widens the column instead. This is also why overflow-wrap on a table cell stays normal: breaking inside a domain name put one character on each line. */ .grid .cell { display: block; max-inline-size: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .grid tbody tr:hover td { background: color-mix(in srgb, var(--teal) 5%, white); } .grid tbody tr:hover td:first-child { background: color-mix(in srgb, var(--teal) 9%, white); } .list tfoot th, .list tfoot td { border-bottom: 0; font-weight: 600; } .period-list { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; margin: 1rem 0 0; } .period-list [aria-current="page"] { font-weight: 600; } .empty { color: var(--muted); } .notice { background: color-mix(in srgb, var(--mark) 8%, white); border-left: 4px solid var(--mark); padding: 0.85rem 1rem; } .approve { display: grid; gap: 0.6rem; margin-top: 1rem; } .approve button { justify-self: start; font: inherit; font-weight: 650; padding: 0.6rem 0.9rem; border: 0; border-radius: 0.4rem; background: var(--teal); color: #fff; cursor: pointer; } .approve button:hover { background: var(--teal-deep); } .query { display: grid; gap: 1rem; background: var(--panel); border: 1px solid var(--line); padding: 1.2rem 1.3rem; /* One control height for the whole form, so a button beside an input cannot drift from it. Every term traces to a declaration below: 1.45 is the inherited line-height, 0.8rem the font-size a .query label passes to the box inside it, 0.5rem the input's block padding doubled, and 2px the two borders. Anything that has to line up with an input reads this rather than repeating the arithmetic. The font-size is written in rem rather than as an em of the inherited one, which is not pedantry. A custom property holding an em resolves against the font-size of whatever element *uses* it, and the filter buttons are siblings of the labels rather than children, so they never inherit the 0.8rem. Written as 1.45em this measured 44px on the buttons against 38px on the boxes beside them, and the comment above claimed they could not drift while they were visibly drifting. */ --control-h: calc(1.45 * 0.8rem + 0.5rem * 2 + 2px); } .query .row { display: flex; flex-wrap: wrap; gap: 1rem; } .query label { display: grid; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .query input, .query select { font: inherit; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); padding: 0.5rem 0.65rem; border: 1px solid var(--line); background: var(--paper); min-width: 10rem; } /* The boxes read the same height as the buttons, by type so the hundred and fifty checkboxes in the two pickers are not caught by it. A select is the reason this is here: Chromium ignores line-height on one, so it computed 36px from its own metrics while the text input beside it computed 38px, and a row of controls two pixels out of step is the kind of thing that reads as unfinished without a reader being able to say why. Stating it makes the row one height by declaration instead of by three controls happening to agree. */ .query input[type="text"], .query input[type="number"], .query select { block-size: var(--control-h); } .query button { justify-self: start; font: inherit; font-weight: 650; padding: 0.6rem 0.9rem; border: 0; border-radius: 0.4rem; background: var(--teal); color: #fff; cursor: pointer; } .query button:hover { background: var(--teal-deep); } .query .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } /* One secondary language, named once. This was scoped to `.query`, which selects on the form's class, so the pager could not simply be handed the class: the attribute would have been in the markup doing nothing, which a test reading the class name passes and a browser does not. Broadened rather than copied, or there are two secondary buttons that drift. */ .query button.secondary, .pager button.secondary { background: transparent; color: var(--teal-deep); border: 1px solid var(--teal); } .query button.secondary:hover, .pager button.secondary:hover { background: color-mix(in srgb, var(--teal) 12%, white); color: var(--teal-deep); } .export-fields, .show-fields, .filters, .segments { margin: 0; padding: 0.8rem 0 0; border: 0; border-top: 1px solid var(--line); } .export-fields legend, .show-fields legend, .filters legend, .segments legend { padding: 0; font-weight: 650; } .segments { display: grid; gap: 1.2rem; } .segment { display: grid; gap: 0.9rem; } .segment + .segment { padding-top: 0.8rem; border-top: 1px solid var(--line); } .then td:first-child { padding-inline-start: 1.5rem; } .segment-result { margin-top: 1.2rem; } .segment-result h3 { margin: 0 0 0.5rem; } .filters { display: grid; gap: 0.9rem; } /* The condition and the value sit beside the field, and the two icons sit at the bottom of the row so they line up with the inputs rather than with their labels. */ .filter-row { align-items: end; } /* A pair of square controls at the end of each row, so minus sits under minus down the list and the plus on the last row closes the column. The gap is smaller than the form's, because these two act on the same row and the inputs beside them do not. */ .rowbtns { display: flex; gap: 0.35rem; } /* Square, and exactly as tall as the input beside it. Both numbers come from --control-h, which the form derives from the inputs' own padding and border, so a change to the input padding moves the buttons with it instead of leaving a row where the icons float half a line above the boxes. */ .query button.rowbtn { display: grid; place-items: center; inline-size: var(--control-h); block-size: var(--control-h); padding: 0; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 0.35rem; } .query button.rowbtn:hover { background: color-mix(in srgb, var(--teal) 8%, white); color: var(--teal-deep); border-color: var(--teal); } /* Stroked in currentColor and sized in em, so one rule covers every glyph in every state: the icon takes the colour and the size of the control it is in, rather than needing a matching rule per button. */ .icon { inline-size: 1.15em; block-size: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .checks { display: grid; gap: 0.4rem 1.2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 0.6rem; } /* These are choices, not field labels, so they read as words rather than in the small caps the rest of the form uses. */ .checks label { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; font-size: 1rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); } .checks input[type="checkbox"] { min-width: 0; padding: 0; border: 0; background: none; } .checks input { accent-color: var(--teal); } /* A hundred and fifty checkboxes in one grid is a wall. The headings are the ones the Field select uses, so a field is in the same place either way. */ .checks-group { border-top: 1px solid var(--line); padding: 0.5rem 0; } .checks-group:first-of-type { border-top: 0; } .checks-group > summary { cursor: pointer; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .checks-group > summary:hover { color: var(--teal-deep); } .checks-group[open] > summary { color: var(--teal-deep); } .checks-group .checks { margin-bottom: 0.6rem; } /* An explanation a person can open, sized so it reads as an aside rather than as the point of the section. A

and not a button: the query form's own Add and Remove are submit buttons, so a button here would run the query. */ .about { margin: 0.4rem 0 0.2rem; font-size: 0.92rem; } .about > summary { cursor: pointer; color: var(--teal-deep); width: fit-content; } .about > summary:hover { text-decoration: underline; } .about > p { margin: 0.5rem 0 0; padding-left: 0.9rem; border-left: 2px solid var(--line); color: var(--muted); max-width: 46rem; } /* Under the report title, not a stray disclosure between the heading and the start form. Still details.about, never a button. A stylesheet cannot prove a pixel; the test holds the declarations. */ .pagehead .about { margin: 0 0 0.65rem; } .pagehead .about > summary { display: inline-block; padding: 0.16rem 0.65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 0.8rem; font-weight: 600; list-style: none; } .pagehead .about > summary::-webkit-details-marker, .pagehead .about > summary::marker { display: none; content: ""; } .pagehead .about > summary:hover { text-decoration: none; border-color: color-mix(in srgb, var(--teal) 45%, white); } .pagehead .about[open] > summary { background: color-mix(in srgb, var(--teal) 9%, white); border-color: color-mix(in srgb, var(--teal) 45%, white); } /* A returning customer's list, above the form because loading one fills the form. One card, and there is no matching one for saving: saving is a button under the result it belongs to. */ .notebook { background: var(--panel); border: 1px solid var(--line); padding: 1.2rem 1.3rem; margin: 0 0 1rem; font-size: 0.95rem; } .notebook h2 { margin: 0 0 0.5rem; font-size: 1.05rem; } /* Save is a line under the answer: a name, a button, and what loading it will do. It replaced a disclosure at the foot of the page, which kept a result ending with the answer and also meant the way to keep a question you had just got right was a summary nobody opened. */ .save-query { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem 0.75rem; margin: 1.25rem 0 0; background: var(--panel); border: 1px solid var(--line); padding: 1rem 1.2rem; } .save-query label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .save-query input[type="text"] { font: inherit; min-width: 10rem; padding: 0.5rem 0.65rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); } .save-query button { font: inherit; font-weight: 650; padding: 0.6rem 0.9rem; border: 0; border-radius: 0.4rem; background: var(--teal); color: #fff; cursor: pointer; } .save-query button:hover { background: var(--teal-deep); } .save-query .meta { grid-column: 1 / -1; } @media (max-width: 34rem) { .save-query { grid-template-columns: 1fr; } .save-query button { justify-self: start; } } .start-quarter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0 0 1.25rem; background: var(--panel); border: 1px solid var(--line); padding: 1rem 1.2rem; } .start-quarter p { margin: 0; flex: 1 1 18rem; color: var(--muted); } .start-quarter button { font: inherit; font-weight: 650; padding: 0.6rem 0.9rem; border: 0; border-radius: 0.4rem; background: var(--teal); color: #fff; cursor: pointer; } .start-quarter button:hover { background: var(--teal-deep); } .picker > summary { cursor: pointer; font-weight: 650; color: var(--teal-deep); width: fit-content; } .picker > summary:hover { text-decoration: underline; } /* A hundred and fifty checkboxes were the tallest thing on the page and they sat above Run. Collapsed, the question is one line until somebody wants it, and a closed

still posts its inputs, so nothing about what arrives changed. The summary states the current answer, which is also what tells the two pickers apart: they render identically except for which boxes are ticked. */ .picker > summary { margin: 0.5rem 0; } .notebook > .meta { margin-bottom: 0.7rem; } .saved-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; } .saved-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1rem; } .saved-list a { font-weight: 650; color: var(--teal-deep); } .saved-delete { margin: 0; } .saved-delete button { font: inherit; font-size: 0.92rem; background: none; border: 0; padding: 0; color: var(--mark); cursor: pointer; text-decoration: underline; } /* The job picker is radios, so the keyboard and the no-JS path work without help; the card look is entirely CSS over the native control. */ .jobs { margin: 0; padding: 0; border: 0; min-width: 0; } .jobs legend { padding: 0; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .jobs-row, .match-rows { display: grid; gap: 0.6rem; margin-top: 0.6rem; } /* Pinned rather than auto-fit. At the wide band auto-fit gives five columns, so the sixth job would sit alone on a second row, which is worse than the narrow band it replaced. Three is also how the six group by meaning: naming questions on the top row, market questions and sampling underneath. */ .jobs-row { grid-template-columns: repeat(3, 1fr); } .match-rows { grid-template-columns: repeat(2, 1fr); } @media (max-width: 46rem) { .jobs-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 30rem) { .jobs-row, .match-rows { grid-template-columns: 1fr; } } .jobs-row label, .match-rows label { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.6rem; align-content: start; cursor: pointer; color: var(--ink); font-size: 1rem; font-weight: 500; text-transform: none; letter-spacing: 0; } .jobs-row > label { border: 1px solid var(--line); background: var(--paper); padding: 0.6rem 0.75rem; } /* How the rows combine is a choice about the list, not a seventh and eighth job. With the same border and tint as the cards above, the two blocks read as one twelve-option question, so these carry the tint when chosen and no border at all. Both labels and both blurbs stay: About filters names them. */ .match-rows > label { border: 0; padding: 0.35rem 0.5rem; } .jobs-row input[type="radio"], .match-rows input[type="radio"] { grid-row: 1 / span 2; align-self: start; margin: 0.3rem 0 0; min-width: 0; padding: 0; border: 0; background: none; accent-color: var(--teal); } .jobs-row .job-name, .match-rows .job-name { grid-column: 2; font-weight: 650; } .jobs-row .job-blurb, .match-rows .job-blurb { grid-column: 2; color: var(--muted); font-size: 0.85rem; } .jobs-row label:has(input:checked) { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 8%, white); } .match-rows label:has(input:checked) { background: color-mix(in srgb, var(--teal) 8%, white); } .jobs-row label:focus-within, .match-rows label:focus-within { outline: 2px solid var(--teal); outline-offset: 2px; } .facts { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 0 0 2rem; } .facts dt { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .facts dd { margin: 0.25rem 0 0; } .plain { list-style: none; padding: 0; margin: 0.5rem 0 0; } /* Two clients side by side, each under its own name, because a person is scanning for the name of the one they use. They stack under the phone query at the foot of this sheet, where two columns would be two narrow columns. */ .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 0; } .step h3 { margin: 0 0 0.25rem; font-family: var(--sans); font-size: 0.95rem; font-weight: 650; color: var(--ink); } .step p { margin: 0; } /* The notes that apply to both clients. Quieter and smaller, so they read as footnotes to the two steps rather than as a third client. */ .aside { margin: 1.1rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--line); font-size: 0.9rem; } .aside li { margin: 0 0 0.4rem; color: var(--muted); } .aside li:last-child { margin-bottom: 0; } .mint { display: grid; gap: 0.6rem; margin: 0 0 1rem; } .mint label { display: grid; gap: 0.3rem; font-weight: 600; } .mint input { font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 0.35rem; } .mint button { justify-self: start; font: inherit; font-weight: 650; padding: 0.6rem 0.9rem; border: 0; border-radius: 0.4rem; background: var(--teal); color: #fff; cursor: pointer; } .mint button:hover { background: var(--teal-deep); } .snippet { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); padding: 0.85rem 1rem; font-size: 0.92rem; } /* A chat client wants one URL and nothing else, so the URL is the artifact and gets the same paper panel a snippet does: it is the thing to copy rather than prose about the thing to copy. A URL has no spaces, so it may break inside the token instead of pushing the panel wider than the band. */ .connect-url { margin: 0.5rem 0 0; padding: 0.85rem 1rem; background: var(--paper); border: 1px solid var(--line); font-size: 0.92rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; } .connect-url code { overflow-wrap: anywhere; } /* The control sits at the right-hand end of the box it copies, on both of these, because the box is the artifact and the button is a thing you do to it. Inline after the

 the icon landed mid-line wherever the URL
   happened to stop, which reads as punctuation; parked under the  it read
   as a button hanging off the corner of the panel above, and on a short
   snippet it was closer to the next heading than to the code.

   The URL is a grid so the address takes the room and the icon is pinned to
   the end. The snippet cannot use the same trick: it scrolls sideways for a
   long line and would carry the button off the edge, so .boxed is a positioned
   wrapper and the control floats over the top-right corner, padded clear of
   the text and of the scrollbar the box grows when it needs one. */
.boxed { position: relative; }
.boxed > .snippet { padding-right: 3rem; }
.boxed > .copy {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.6rem;
}
.list form { margin: 0; }
.list form button {
  font: inherit;
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
  color: var(--teal-deep);
  cursor: pointer;
}
.notice code { overflow-wrap: anywhere; }

/* A breakdown is a shape before it is a column of numbers, so its groups are
   drawn above the table that carries them. A bar is a width and nothing else:
   no canvas, no chart library, no build step. Each row is three grid tracks, so
   the label, the bar and the count line up down the page and the bar takes
   whatever the band leaves. */
.bars {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
/* The track is capped rather than 1fr, and the count column is reserved. As
   1fr the bar took whatever the band left, so the same chart was a different
   object at every page width and after the band widened: with two groups it
   stretched the full width and read as a progress bar, and the largest count
   sat wherever the fill happened to end. Capped, every row's grey track is the
   same length whatever else is on the page, the largest fill is still 100% of
   that track rather than of the band, and 9rem of tabular digits holds the
   widest grouped integer the corpus produces (413,783,340 is ten characters)
   so the numbers read as a column. */
.bars li {
  display: grid;
  grid-template-columns: minmax(5rem, 11rem) minmax(0, 30rem) 9rem;
  align-items: center;
  gap: 0.9rem;
  justify-content: start;
}
/* The label truncates rather than wrapping. A group value can be a long
   registrar name, and letting it wrap turns one row into three and stops the
   bars lining up, which is the failure the results table already had. The full
   value is a title attribute here and a cell in the table below. */
.bar-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}
.bar-track {
  min-width: 0;
  height: 1.15rem;
  background: var(--paper);
  border: 1px solid var(--line);
}
.bar-fill {
  display: block;
  height: 100%;
  background: var(--teal);
}
.bar-count {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--muted);
  text-align: right;
}

/* On a phone the cap is the viewport, so 1fr is the cap and the count goes
   back to auto rather than reserving nine rem of a narrow screen. */
@media (max-width: 34rem) {
  .bars li { grid-template-columns: minmax(4rem, 7rem) 1fr auto; gap: 0.6rem; }
}

/* A lookup is one domain's record, so it reads down the page as label and
   value. Long values (a page title, a list of name servers) get the whole
   band to wrap in, which is the room the table never had. */

/* The masthead: which domain this is, how fresh our copy is, and how it stands.
   It repeats nothing, it relocates: the dates were a tenth group heading at the
   bottom of the page and the three states were spread across groups six, seven
   and eight. */
.masthead { margin: 0 0 1.6rem; }
.detail + .masthead { margin-top: 2.4rem; }
/* h2.record, not .record: the record sits inside a .panel, and `.panel h2` is a
   class plus an element, so it outranks a bare class and had been setting this
   name to 1.05rem whatever the rule below said. Naming the element here ties the
   specificity, and this block is later in the sheet. */
h2.record {
  font-family: var(--slab);
  font-weight: 500;
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  /* A name is one token with no spaces, so it can be longer than the band. It
     scrolls with the page rather than breaking a character at a time. */
  overflow-wrap: normal;
}
/* The name is 2.1rem, so the control beside it grows with it rather than sitting
   there as a 1.5rem box against a heading twice its height. */
.record .copy {
  inline-size: 1.9rem;
  block-size: 1.9rem;
  margin-left: 0.6rem;
}
.provenance {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.availability {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0 0;
}

/* One pill: a closed-vocabulary value, with the word always written out. Colour
   is decoration on top of the word, never instead of it, so the record reads
   with no colour vision at all. */
.pill {
  display: inline-block;
  padding: 0.16rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.pill.good {
  border-color: color-mix(in srgb, var(--teal) 45%, white);
  background: color-mix(in srgb, var(--teal) 9%, white);
  color: var(--teal-deep);
}
.pill.warn {
  border-color: color-mix(in srgb, var(--mark) 40%, white);
  background: color-mix(in srgb, var(--mark) 8%, white);
  color: var(--mark);
}

/* One pill per item, where the source held a list. A count of them is worth
   more than the count field beside it, which is why those rows are muted. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: baseline;
}
.tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  font-size: 0.85rem;
}
.tag.more { border-style: dashed; color: var(--muted); }
/* align-items, because a copy control is a flex item too: in a column it
   stretches to the width of the longest TXT record and reads as a wide bar
   under it rather than as a small button. */
.lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}
.lines .copy { margin: 0.15rem 0 0; }

/* Hex, hashes and machine ids, read a character at a time by a person checking
   one against another. This is the only place overflow-wrap may break inside a
   token: a fingerprint has no spaces and is wider than the band, and it is not
   a value anybody reads as a word. Never on a table cell. */
.facts-list dd.mono,
.facts-list .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

/* A row the row beside it already answered: the IDN spelling of an ASCII name,
   a length, the count of a list that is now countable as pills. Present because
   the corpus holds it, quiet because it is not why anybody looked. */
.facts-list dt.muted,
.facts-list dd.muted { color: var(--muted); font-size: 0.9rem; }
/* The label loses its weight too. A demoted row in bold reads as emphasis, which
   is the opposite of the point. */
.facts-list dt.muted { font-weight: 500; }

/* An icon, not the word. A record carries thirty of these beside the values
   they belong to, and thirty grey boxes reading COPY down the page read as
   content rather than as controls on it. The accessible name is unchanged, so
   this is a change to what is drawn and not to what is announced. */
.copy {
  display: inline-grid;
  place-items: center;
  inline-size: 1.55rem;
  block-size: 1.55rem;
  margin-left: 0.4rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  vertical-align: middle;
}
.copy:hover { color: var(--teal-deep); border-color: var(--teal); }
/* The listener adds .copied for a moment and takes it off again. Swapping the
   glyph here rather than in the script is what lets the script stay one
   delegated listener: writing "Copied" into the button would erase the svg it
   was drawn with. Both icons ship in the button and one of them is hidden. */
.copy .tick { display: none; }
.copy.copied {
  color: var(--teal-deep);
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 10%, white);
}
.copy.copied .sheets { display: none; }
.copy.copied .tick { display: block; }

.detail + .detail { margin-top: 1.4rem; }
.detail h3 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.facts-list {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.1rem 1.5rem;
  margin: 0.5rem 0 0;
  align-items: baseline;
}
.facts-list dt {
  font-weight: 650;
  font-size: 0.95rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--line);
}
.facts-list dd {
  margin: 0;
  padding: 0.35rem 0;
  border-top: 1px solid var(--line);
  min-width: 0;
  overflow-wrap: break-word;
}
.facts-list dt:first-of-type,
.facts-list dd:first-of-type { border-top: 0; }

@media (max-width: 34rem) {
  .facts-list { grid-template-columns: 1fr; gap: 0; }
  .facts-list dd { border-top: 0; padding-top: 0; }
}
.pagehead a { color: var(--teal-deep); }
main > section { margin-top: 2.25rem; }

@media (max-width: 40rem) {
  .meters { grid-template-columns: 1fr; }
  .top { flex-wrap: wrap; }
  /* Two columns here are two columns too narrow to read a sentence in. */
  .steps { grid-template-columns: 1fr; }
}

a:focus-visible,
.skip:focus {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}