/* PRECISION. One type scale: 11 tab, 12 label, 13 meta, 14 data, 16 name, 18 reading, 22 figure, 30 big figure, 40 headline, 56 record figure. One rule: ink under a header, hairline between rows. Numbers right aligned, tabular. Gold stays the event (Verified). */ /* Main's running head at main's own height, so moving between Map and Research nothing jumps. */ :root:root:root:root:root:root:root:root:root:root:root:root:root :is(.px-page, .px-section) .bs-runninghead { line-height: 1.5; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-section { --px-sans: 'Google Sans Flex', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --px-pad: 10px; --px-row: 42px; --px-wash: #ecebe2; color: var(--bs-ink); font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums lining-nums; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page *, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-section * { box-sizing: border-box; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page { padding-bottom: 72px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page a, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-section a { color: inherit; text-decoration: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page a:hover, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-section a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--bs-hair-2); } /* The site sheet removes every focus outline with !important, so a keyboard reader saw none. These pages keep theirs. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page :focus-visible, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-section :focus-visible { outline: 2px solid currentColor !important; outline-offset: 2px; border-radius: 2px; } :root:root:root:root:root:root:root:root:root:root:root:root:root :is(a, button, summary, select):focus-visible { outline: 2px solid var(--bs-ink) !important; outline-offset: 2px !important; border-radius: 2px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-over-hero=true] .site-header :is(a, button):focus-visible, :root:root:root:root:root:root:root:root:root:root:root:root:root .network-hero-stage :is(a, button):focus-visible { outline-color: #fff !important; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* The record header: one form on every page. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 0 16px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-crumbs { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0 0 10px; color: var(--bs-muted); font-size: 11px; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-crumbs a { color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-crumbs span[aria-hidden] { color: var(--bs-meta); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-crumbs [aria-current] { color: var(--bs-ink); max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-head h1 { margin: 0; font-family: var(--bs-serif); font-weight: 430; font-size: 40px; line-height: 1.06; letter-spacing: -.022em; text-wrap: balance; overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-lead { margin: 8px 0 0; max-width: 64ch; font-family: var(--bs-serif); font-size: 18px; line-height: 1.4; color: var(--bs-ink-2); text-wrap: pretty; } /* Figures: label over number, a hairline between them. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--bs-hair-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs > div { min-width: 0; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs dt { margin: 0; color: var(--bs-muted); font-size: 12px; line-height: 1.3; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs dd { margin: 2px 0 0; font-size: 22px; line-height: 1.15; font-weight: 500; letter-spacing: -.012em; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs dd small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs dd.is-unknown { font-size: 14px; font-weight: 400; line-height: 25px; color: var(--bs-meta); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs .is-gold dd { color: var(--bs-gold-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs--wide > div { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs:not(.px-figs--wide) { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs:not(.px-figs--wide) > div { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: 4px; padding: 0; border: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs:not(.px-figs--wide) dd { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; } /* The answer: one sentence at reading size, its rule, what was compared. Not a big number: a sentence from live data can be wrong. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-answer { padding: 12px 0; border-top: 1px solid var(--bs-rule); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-answer-line { margin: 0; max-width: 108ch; font-family: var(--bs-serif); font-size: 18px; line-height: 1.35; color: var(--bs-ink); text-wrap: pretty; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-answer-line a { text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-answer.is-none .px-answer-line { color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-answer-rule { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-answer-rule strong { font-weight: 500; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-answer .px-more { margin-top: 2px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-ledger { margin-top: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-ledger > .px-note { margin-top: 10px; } /* The top figure: the strongest thing in a row. One wash marks the lead column on every table. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-top-figure { display: block; font-size: 24px; font-weight: 620; line-height: 1.08; letter-spacing: -.024em; white-space: nowrap; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-top-figure.is-unknown { font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--bs-meta); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-top-unit { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.25; color: var(--bs-muted); white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-top-beside { display: block; margin-top: 1px; font-size: 12px; font-weight: 560; line-height: 1.25; color: var(--bs-ink-2); white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-top-what { display: block; font-size: 13px; font-weight: 560; line-height: 1.35; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-top-caveat { display: block; font-weight: 500; color: var(--bs-umber); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-top-name { display: block; font-size: 14px; line-height: 1.35; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-top-name a { text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-top-note { display: block; font-size: 13px; line-height: 1.35; color: var(--bs-meta); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-top-rules { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-top-rules a { color: var(--bs-ink-2); text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 2px; } /* The top row as a page's lead: the board's line, large, on the same wash. Phone: one column. From 1100 it sits beside the title. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead { position: relative; display: grid; gap: 8px; padding: 12px 14px 12px; background: var(--px-wash); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead-label { display: flex; align-items: center; gap: 10px; min-height: 22px; margin-bottom: 2px; font-size: 12px; font-weight: 650; line-height: 1.25; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead .px-top-figure { font-size: 34px; letter-spacing: -.028em; white-space: normal; overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead .px-top-figure.is-unknown { font-size: 22px; line-height: 1.2; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead .px-top-unit { display: inline; margin: 0 0 0 6px; font-size: 13px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead .px-top-figure { display: inline; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead .px-top-beside { margin-top: 2px; font-size: 13px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead-cell { min-width: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead-asof { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--bs-muted); white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead .px-top-what { font-size: 14px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead .px-top-caveat { display: block; margin: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead .px-top-name { margin-top: 2px; overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead .px-prov > summary { min-height: 20px; font-weight: 400; } /* The provenance mark: one quiet dot and an age per row. It opens the row's sources, dates and status, with no script. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prov { position: static; display: inline-block; text-align: left; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prov > summary { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 24px; min-height: 24px; list-style: none; cursor: pointer; color: var(--bs-muted); font-size: 13px; white-space: nowrap; border-radius: 3px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prov > summary::-webkit-details-marker { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prov > summary:hover { color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prov[open] > summary { color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tone-static .px-dot { background: transparent; box-shadow: inset 0 0 0 1.2px var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prov > summary:focus-visible { outline: 2px solid var(--bs-ink); outline-offset: 2px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tone-stale .px-dot, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tone-off .px-dot { background: var(--bs-umber); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tone-stale > summary, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tone-off > summary { color: var(--bs-umber); font-weight: 560; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; max-height: 70vh; overflow: auto; padding: 16px 16px 20px; background: var(--bs-paper); border-top: 1px solid var(--bs-rule); box-shadow: 0 -12px 32px rgb(20 19 15 / 14%); font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop h3 { margin: 0 0 8px; padding-right: 36px; font: inherit; font-weight: 600; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop-name { display: block; font-family: var(--bs-serif); font-size: 16px; font-weight: 400; line-height: 1.25; overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--bs-muted); font: 400 20px/1 var(--px-sans); cursor: pointer; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop-x:hover { color: var(--bs-ink); } @media (scripting: none) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop-x { display: none; } } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop p { margin: 0 0 8px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop dl { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: 4px 12px; margin: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop dt { margin: 0; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop dd { margin: 0; overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop a { text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 2px; } /* One status chip: only for what differs from the rest of the table. Plain text with a mark, never a pill. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tag { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--px-sans); font-size: 12px; font-weight: 560; line-height: 1.2; white-space: nowrap; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tag::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--bs-muted); transform: translateY(-1px); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tag-warn { color: var(--bs-umber); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tag-warn::before { border-radius: 0; background: var(--bs-umber); clip-path: polygon(50% 0, 100% 100%, 0 100%); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tag-gold { color: var(--bs-gold-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tag-gold::before { background: var(--bs-gold); box-shadow: 0 0 0 2px var(--bs-gold-wash); } /* Controls: networks and position on one line. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 8px 0; } /* A chip is 28 px to the eye and 44 px to a finger: the nav's padding keeps the taller hit area from being clipped by its own scrolling. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-nets { display: flex; gap: 4px; margin: -8px -2px; padding: 8px 0; overflow-x: auto; scrollbar-width: none; font-size: 13px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-nets::-webkit-scrollbar { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-nets a { position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 8px; border-radius: 3px; color: var(--bs-ink-2); white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-nets a::after { content: ""; position: absolute; inset: -8px 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-nets a small { font-size: 12px; color: var(--bs-meta); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-nets a:hover { background: var(--bs-paper-2); text-decoration: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-nets a[aria-current] { background: var(--bs-ink); color: var(--bs-paper); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-nets a[aria-current] small { color: rgb(247 246 242 / 72%); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pos { flex: none; font-size: 13px; color: var(--bs-muted); white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-reset { margin-right: 12px; padding-block: 14px; color: var(--bs-ink-2); text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; } /* A phone's line for the table's head: the sorted column's name above the figures, opening the sortable heads. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sort { font-size: 13px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sort > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; list-style: none; cursor: pointer; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sort > summary::-webkit-details-marker { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sort > summary b { font-weight: 600; color: var(--bs-ink); text-align: right; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sort ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sort li a { display: flex; align-items: center; gap: 6px; min-height: 44px; border-bottom: 1px solid var(--bs-hair); color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sort li a[aria-current] { font-weight: 600; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sort .px-order-words { font-weight: 400; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sort-mark { color: var(--bs-meta); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-note { margin: 10px 0 0; max-width: 92ch; font-size: 13px; line-height: 1.45; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-note strong { font-weight: 560; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-note + .px-note { margin-top: 4px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-notice { margin: 12px 0 0; padding: 8px 12px; background: var(--bs-paper-2); font-size: 13px; color: var(--bs-ink-2); } /* The table: phone first, each row one name, one lead number, one line of context. All columns stay in the HTML. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table-wrap { margin: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table { display: block; width: 100%; border-collapse: collapse; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr { display: block; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > * { display: none; padding: 0; font-weight: 400; text-align: left; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-name { display: block; order: 1; flex: 1 1 0; min-width: 0; font-family: var(--bs-serif); font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-lead { display: block; order: 2; flex: none; max-width: 50%; font-size: 16px; font-weight: 560; text-align: right; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-br { display: block; order: 3; flex: 0 0 100%; width: 100%; height: 0; padding: 0; border: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-ctx { display: block; order: 4; flex: 0 1 auto; min-width: 0; max-width: 62%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--bs-muted); } /* A figure is never cut off: a long label wraps instead. Long words may end in an ellipsis, with the whole text in the title. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-ctx.is-num { max-width: none; overflow: visible; white-space: normal; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody > tr > .px-c-ctx { flex: 1 1 60%; max-width: none; white-space: normal; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody > tr > .px-name { font-size: 16px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody > tr > .px-c-lead { max-width: 64%; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-ctx::before { content: attr(data-label) " "; color: var(--bs-meta); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-ctx.px-c-bare::before { content: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-read { display: block; order: 5; margin-left: auto; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr.px-group { display: block; padding: 18px 0 6px; border-bottom: 1px solid var(--bs-hair-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr.px-group > th { display: block; font-size: 12px; font-weight: 600; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr.px-group small { font-size: 12px; font-weight: 400; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-group-note { display: block; margin-top: 1px; font-size: 13px; font-weight: 400; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr:first-child { border-top: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-name .px-sub { display: block; margin-top: 1px; font-family: var(--px-sans); font-size: 13px; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-name .px-tag { margin-left: 8px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-name .px-small { font-family: var(--px-sans); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sub-tag { display: block; margin-top: 1px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sub-tag .px-tag { margin-left: 0; margin-right: 10px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-unknown { color: var(--bs-meta); font-weight: 400; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-small { font-size: 13px; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fig-unit { display: block; font-size: 13px; font-weight: 400; line-height: 1.2; color: var(--bs-muted); white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .is-hide { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead th.is-hide { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-rest { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cut::after { content: " \2026"; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-order-words { display: block; font-weight: 400; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pay-note { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--bs-muted); } /* The one state: nothing here yet, or a read that failed. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-state { padding: 24px 0; border-top: 1px solid var(--bs-hair-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-state-title { margin: 0; font-family: var(--bs-serif); font-size: 18px; line-height: 1.35; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-state-text { margin: 4px 0 0; max-width: 78ch; font-size: 13px; line-height: 1.45; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-state-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-state-failed .px-state-title { color: var(--bs-umber); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 12px; } /* The one button: the same pill as the header's, in two weights. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--bs-hair-2); border-radius: 999px; background: transparent; color: var(--bs-ink); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page a.px-btn:hover, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-section a.px-btn:hover { background: var(--bs-paper-2); text-decoration: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-btn-dark, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page a.px-btn-dark, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-section a.px-btn-dark { border-color: var(--bs-ink); background: var(--bs-ink); color: var(--bs-paper); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page a.px-btn-dark:hover, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-section a.px-btn-dark:hover { background: var(--bs-ink-2); } /* Disclosures: the full rule, the raw call, the agent's request. Closed for a reader, present for a crawler. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more { margin: 10px 0 0; font-size: 13px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; list-style: none; cursor: pointer; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > summary::-webkit-details-marker { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > summary::before { content: "+"; display: inline-block; width: 10px; color: var(--bs-meta); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more[open] > summary::before { content: "\2212"; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > summary:hover { color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > :not(summary) { max-width: 78ch; margin: 6px 0 10px 16px; color: var(--bs-ink-2); line-height: 1.5; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-rules { padding-left: 18px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-rules li { margin: 2px 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > .px-fields { width: calc(100% - 16px); max-width: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more code, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page code { font-size: 13px; overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more .button { margin-right: 8px; } /* Sections. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-block { margin-top: 32px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 24px; padding-bottom: 8px; border-bottom: 1px solid var(--bs-rule); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-block-head h2 { margin: 0; font-family: var(--bs-serif); font-weight: 450; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-block-head p { margin: 0; font-size: 13px; color: var(--bs-muted); } /* Compact lists: one line per item. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-list { margin: 0; padding: 0; list-style: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-list b { font-family: var(--bs-serif); font-weight: 400; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-list small { font-size: 13px; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-list .px-end { text-align: right; white-space: nowrap; font-size: 13px; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-list .px-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 13px; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-list > li.has-lead { grid-template-columns: auto minmax(0, 1fr) auto; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-list > li.has-lead .px-meta { grid-column: 2 / -1; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-row-lead { grid-row: span 2; display: flex; align-items: flex-start; } /* One post: a talk's opening, a reply, a piece of evidence. Words first. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-post { padding: 14px 0; border-bottom: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-post > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 4px; font-size: 13px; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-post > header b { font-weight: 600; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-post > header .px-end { margin-left: auto; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-post-body { max-width: 72ch; font-family: var(--bs-serif); font-size: 16px; line-height: 1.5; color: var(--bs-ink); overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-post-body p { margin: 0 0 8px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-post-body p:last-child { margin-bottom: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-post-body a { text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; } /* The record page's lead figure and chart. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-hero-fig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 40px; margin-top: 4px; padding: 16px 0; border-top: 1px solid var(--bs-rule); border-bottom: 1px solid var(--bs-hair-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-big-label { flex: 0 0 100%; color: var(--bs-muted); font-size: 12px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-big-value { font-size: 56px; font-weight: 450; line-height: 1.05; letter-spacing: -.03em; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-big-value.is-unknown { font-size: 22px; font-weight: 400; color: var(--bs-meta); letter-spacing: 0; line-height: 62px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-big-value.is-words { font-size: 30px; line-height: 1.12; letter-spacing: -.02em; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-big-note { flex: 0 0 100%; margin: 0; font-size: 13px; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-big-beside { font-weight: 560; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-big-caveat { font-weight: 500; color: var(--bs-umber); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-chart { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; margin: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-chart svg { display: block; width: 100%; height: 120px; overflow: visible; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-chart svg line { stroke: var(--bs-hair); stroke-width: 1; vector-effect: non-scaling-stroke; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-chart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; color: var(--bs-muted); text-align: right; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-chart-x { display: flex; justify-content: space-between; font-size: 12px; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-chart figcaption { grid-column: 1 / -1; margin-top: 4px; font-size: 12px; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields { width: 100%; border-collapse: collapse; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields th, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--bs-hair); vertical-align: baseline; text-align: left; font-weight: 400; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields tbody th { color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields .px-v { font-weight: 500; text-align: right; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields .px-v-text { overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields .px-s { display: none; font-size: 13px; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields .px-r { text-align: right; padding-right: 0; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields thead th:last-child { padding-right: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-unread { margin: 12px 0 0; font-size: 13px; color: var(--bs-muted); line-height: 1.5; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-unread b { font-weight: 600; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-section { padding-top: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-section > .px-block-head + .px-figs { margin-top: 0; } /* /map's hero: what the page is for, and the proof of scale at display size. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-map-hero .px-head { padding: 28px 0 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-map-hero .px-head h1 { font-size: 40px; line-height: 1.04; letter-spacing: -.026em; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-map-hero .px-lead { max-width: none; margin-top: 10px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display:not(.px-figs--wide) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--bs-rule); border-bottom: 1px solid var(--bs-hair-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display:not(.px-figs--wide) > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; min-width: 0; padding: 10px 12px 10px 12px; border: 0; border-left: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display:not(.px-figs--wide) > div:first-child { padding-left: 0; border-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display:not(.px-figs--wide) dd { margin: 0; font-size: 30px; line-height: 1.08; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display:not(.px-figs--wide) dd small { font-size: 14px; letter-spacing: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display:not(.px-figs--wide) dd.is-unknown { font-size: 18px; font-weight: 400; letter-spacing: 0; line-height: 1.8; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display:not(.px-figs--wide) dt { font-size: 12px; line-height: 1.3; } /* A figure's label can be its link, and the whole figure opens it. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs > div:has(> dt > a) { position: relative; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs dt a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs dt a::after { content: ""; position: absolute; inset: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs > div:has(> dt > a):hover dt a { color: var(--bs-ink); text-decoration-color: var(--bs-ink); } /* /map's counts stay below the Top row on every screen: the owner's ruling is that the Top row is the strongest thing on the page. /alpha keeps its display figures. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) { margin-top: 12px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) > div { padding: 6px 12px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) > div:first-child { padding-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) dd { font-size: 20px; line-height: 1.15; font-weight: 450; letter-spacing: -.014em; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) dd small { font-size: 13px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) dd.is-unknown { font-size: 16px; line-height: 23px; } @media (min-width: 760px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) { margin-top: 16px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) > div { padding: 8px 24px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) > div:first-child { padding-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) dd { font-size: 22px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) dd small { font-size: 14px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) dd.is-unknown { font-size: 18px; line-height: 26px; } /* WebKit measures a shrink-wrapped label a pixel short and breaks a two-word link. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) dt { white-space: nowrap; } } @media (min-width: 1100px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) dd { font-size: 26px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display.px-figs--counts:not(.px-figs--wide) dd.is-unknown { line-height: 30px; } } /* The board: a whole row opens its category, with no script. The links inside a row stay their own, above the row's. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody > tr:not(.px-group), :root:root:root:root:root:root:root:root:root:root:root:root:root .px-rows tbody > tr:not(.px-group) { position: relative; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-row-link::after { content: ""; position: absolute; inset: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody > tr > .px-name::after { content: " \2192"; color: var(--bs-muted); opacity: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody > tr:not(.px-group):hover > .px-name::after, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody > tr:has(.px-row-link:focus-visible) > .px-name::after { color: var(--bs-ink); opacity: 1; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody > tr:not(.px-group):hover .px-row-link, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody > tr:has(.px-row-link:focus-visible) .px-row-link, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-rows tbody > tr:not(.px-group):hover .px-row-link, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-rows tbody > tr:has(.px-row-link:focus-visible) .px-row-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody > tr:has(.px-row-link:focus-visible) > *, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-rows tbody > tr:has(.px-row-link:focus-visible) > * { background-color: var(--bs-paper-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody > tr:has(.px-row-link:focus-visible) > .px-c-lead, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-rows tbody > tr:has(.px-row-link:focus-visible) > .px-c-lead { background-color: #e5e4da; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page .px-row-link:focus-visible { outline: 0 !important; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page .px-row-link:focus-visible::after { outline: 2px solid var(--bs-ink); outline-offset: -2px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody :is(td a, details.px-prov), :root:root:root:root:root:root:root:root:root:root:root:root:root .px-rows tbody :is(td a, details.px-prov, .px-clamp), :root:root:root:root:root:root:root:root:root:root:root:root:root .px-rows tbody .px-tag[title] { position: relative; z-index: 1; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-rows tbody .px-clamp { cursor: pointer; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody details.px-prov[open], :root:root:root:root:root:root:root:root:root:root:root:root:root .px-rows tbody details.px-prov[open] { z-index: 5; } @media (hover: none) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody > tr:not(.px-group) > .px-name::after { opacity: .6; } } /* A group's label is quiet: it says what kind of number follows and leaves the figures the strongest thing on the page. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead th.px-c-read { white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table.px-board tbody > tr.px-group > th { padding: 20px 0 6px; font-family: var(--px-sans); font-size: 11px; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-muted); border-bottom: 1px solid var(--bs-hair-2); background: transparent; } /* The hero darkens the page behind it and pins the header over it; main's script lifts both on scroll. A script that failed or was blocked lifts nothing, so the words under the hero were ink on ink and the fixed white header lay over them. Main's script marks the header once it runs: until then the paper is the page's, the ink is the hero's alone, and the header leaves with the hero. At the top of the page this draws the same hero; after the mark the sheet adds nothing. */ @media (prefers-reduced-motion: no-preference) and (min-height: 560px) and (forced-colors: none) { :root:root:root:root:root:root:root:root:root:root:root:root:root:has(> body[data-network-over-hero="true"] > .site-header:not([data-navigation-ready])):not([data-network-menu-open]) { background: var(--bs-paper) !important; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-over-hero="true"]:has(> .site-header:not([data-navigation-ready])) { background: var(--bs-paper) !important; color-scheme: light; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-over-hero="true"]:has(> .site-header:not([data-navigation-ready])) .network-hero-stage { background: var(--ink, #111214); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-over-hero="true"]:has(> .site-header:not([data-navigation-ready])) .site-header { position: absolute; } } @media (min-width: 760px) and (max-width: 1099px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table.px-board tbody > tr > :is(.px-name, .px-c-lead) { white-space: normal; } } /* A page's end: one sentence, one action. The footnote follows it in quiet type. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; margin: 40px 0 24px; padding: 24px 0; border-top: 1px solid var(--bs-rule); border-bottom: 1px solid var(--bs-hair-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-closing-line { flex: 1 1 320px; margin: 0; max-width: 26em; font-family: var(--bs-serif); font-size: 30px; font-weight: 430; line-height: 1.14; letter-spacing: -.02em; text-wrap: balance; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-closing-do { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-closing-acts { display: flex; flex-wrap: wrap; gap: 10px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-closing-note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--bs-ink-2); } /* A closed list of words: the word, then its one line, on the page's measure. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > dl { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 6px 18px; max-width: 860px; margin: 8px 0 14px; font-size: 13px; line-height: 1.45; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > dl > dt { font-weight: 600; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > dl > dd { margin: 0; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > dl > dd a { text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; } @media (max-width: 759px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > dl { display: block; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > dl > dd { margin: 1px 0 10px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-closing-acts .px-btn { min-height: 44px; } } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-map-foot { color: var(--bs-muted); } /* The home's category tiles: the top figure, its small line, then the tile as main has it. Only with the switch on: this class comes with the figures. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid .ni-category-copy > .px-tile-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 4px 0 0; color: var(--bs-ink); font-family: var(--px-sans, inherit); font-size: 13px; line-height: 1.1; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tile-figure { font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -.024em; font-variant-numeric: tabular-nums; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tile-unit { color: var(--bs-muted); font-size: 12.5px; font-weight: 400; letter-spacing: 0; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid .ni-category-copy > .px-tile-what { display: block; margin: 0 0 4px; font-size: 12.5px; font-weight: 400; line-height: 1.35; color: var(--bs-ink-2); overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tile-caveat { color: var(--bs-umber); } /* A group's name, /map's label, sits on its first tile's top rule: it takes no height and moves nothing. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tile-grid > .ni-category-card:has(> .px-tile-group) { position: relative; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tile-group { position: absolute; top: -7px; left: 14px; padding-right: 8px; background: var(--bs-paper); font-family: var(--px-sans); font-size: 11px; font-weight: 640; line-height: 14px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tile-grid > .ni-category-card:nth-child(2n + 1) > .px-tile-group { left: 0; } @media (min-width: 760px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tile-group { left: 22px; } } @media (min-width: 1100px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tile-grid > .ni-category-card:nth-child(2n + 1) > .px-tile-group { left: 22px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tile-grid > .ni-category-card:nth-child(4n + 1) > .px-tile-group { left: 0; } } @media (max-width: 759px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tile-group { letter-spacing: .06em; } } /* Thirteen tiles leave one alone: it takes the whole last row, and its parts stand on the columns of the tiles above it. */ @media (min-width: 760px) { :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid > .ni-category-card:last-child:nth-child(2n + 1) .ni-category-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 3px; align-items: start; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid > .ni-category-card:last-child:nth-child(2n + 1) .ni-category-copy > strong { grid-column: 1; grid-row: 1; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid > .ni-category-card:last-child:nth-child(2n + 1) .ni-category-copy > .px-tile-top { grid-column: 1; grid-row: 2; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid > .ni-category-card:last-child:nth-child(2n + 1) .ni-category-copy > .px-tile-what { grid-column: 1; grid-row: 3; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid > .ni-category-card:last-child:nth-child(2n + 1) .ni-category-copy > .ni-category-live { grid-column: 2; grid-row: 1 / span 2; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid > .ni-category-card:last-child:nth-child(2n + 1) .ni-category-copy > span:last-child { grid-column: 2; grid-row: 3; } } @media (min-width: 1100px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table.px-board tbody > tr > .px-name { white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid > .ni-category-card:last-child:nth-child(4n + 1) .ni-category-copy { grid-template-columns: calc(25% + 45px) calc(25% + 22px) calc(25% + 22px) minmax(0, 1fr); column-gap: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid > .ni-category-card:last-child:nth-child(4n + 1) .ni-category-copy > * { padding-right: 24px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid > .ni-category-card:last-child:nth-child(4n + 1) .ni-category-copy > .px-tile-top { grid-column: 2; grid-row: 1; margin-top: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid > .ni-category-card:last-child:nth-child(4n + 1) .ni-category-copy > .px-tile-what { grid-column: 2; grid-row: 2; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid > .ni-category-card:last-child:nth-child(4n + 1) .ni-category-copy > .ni-category-live { grid-column: 3; grid-row: 1 / span 2; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid > .ni-category-card:last-child:nth-child(4n + 1) .ni-category-copy > span:last-child { grid-column: 4; grid-row: 1 / span 2; } } /* A phone's tile is half the page: the figure drops a size and may wrap, and never pushes the page sideways. */ @media (max-width: 759px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tile-figure { font-size: 19px; overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-tile-unit { font-size: 12px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid .ni-category-copy > .px-tile-what { font-size: 12px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-tile-grid .ni-category-copy { min-width: 0; } } /* Documents: /join, /for-agents, /guide, the error pages. The same head, the same rule, the same buttons as the data pages. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prose { max-width: 68ch; font-family: var(--bs-serif); font-size: 17px; line-height: 1.5; color: var(--bs-ink-2); text-wrap: pretty; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prose > :first-child { margin-top: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prose > :last-child { margin-bottom: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prose p, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prose ul, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prose ol { margin: 0 0 12px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prose ul, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prose ol { padding-left: 20px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prose li { margin: 0 0 6px; } :root:root:root:root:root:root:root:root:root:root:root:root:root :is(.px-prose, .px-lead, .px-col-body, .px-doc-aside, .guide-content) a:not(.px-btn):not(.px-code a) { color: var(--bs-ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; } :root:root:root:root:root:root:root:root:root:root:root:root:root :is(.px-prose, .px-lead, .px-col-body, .px-doc-aside, .guide-content) a:not(.px-btn):hover { text-decoration-color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page :is(.px-prose, .px-col-body, .px-doc-aside, .guide-content, .px-lead) code:not(pre code) { padding: 1px 4px; border-radius: 3px; background: var(--bs-paper-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8em; color: var(--bs-ink); overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-code { margin: 12px 0 14px; border-radius: 4px; background: var(--bs-paper-2); max-width: 100%; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 4px 0 12px; border-bottom: 1px solid var(--bs-hair); font-family: var(--px-sans); font-size: 12px; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-code-head span { min-width: 0; overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-code-head button { flex: none; min-height: 40px; min-width: 56px; padding: 0 10px; border: 0; background: transparent; color: var(--bs-ink); font-family: var(--px-sans); font-size: 13px; font-weight: 560; cursor: pointer; border-radius: 3px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-code-head button:hover { background: var(--px-wash); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-code pre { margin: 0; padding: 10px 12px 12px; overflow-x: auto; white-space: pre; background: transparent; border: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-code code, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-code code .code-line { display: block; padding: 0; background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; color: var(--bs-ink); overflow-wrap: normal; white-space: pre; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-code code .code-line { display: inline; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > .px-code { max-width: none; margin-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > .px-table-wrap { max-width: none; margin-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 8px; padding: 18px 0 22px; border-top: 1px solid var(--bs-hair-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-step:first-child { border-top: 1px solid var(--bs-rule); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-step-n { padding-top: 7px; font-size: 13px; color: var(--bs-meta); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-step-body { min-width: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-step h2 { margin: 0 0 6px; font-family: var(--bs-serif); font-weight: 450; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-step .px-prose { max-width: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-step .px-more { font-family: var(--px-sans); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-step .px-link-row { font-family: var(--px-sans); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-step .join-step-md { font-weight: 400; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cols { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--bs-rule); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cols > div { min-width: 0; padding: 12px 0 14px; border-bottom: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cols h2 { margin: 0 0 4px; font-family: var(--px-sans); font-size: 12px; font-weight: 620; line-height: 1.3; letter-spacing: 0; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-col-body { font-family: var(--bs-serif); font-size: 16px; line-height: 1.42; color: var(--bs-ink-2); text-wrap: pretty; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-col-body p { margin: 0 0 8px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-col-body p:last-child { margin-bottom: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc-aside { font-size: 14px; line-height: 1.45; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc-aside h2 { margin: 0 0 6px; font-family: var(--bs-serif); font-weight: 450; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc-aside p, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc-aside ul { margin: 0 0 8px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc-aside ul { padding-left: 0; list-style: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc-aside li { padding: 6px 0; border-top: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc-aside li:first-child { border-top: 0; padding-top: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc-aside .px-more > :not(summary) { margin-left: 0; font-size: 13px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-join-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 56px; margin-top: 16px; } /* The steps sit closed for a person; open, they keep the column's width and no indent, or a phone cuts the example's lines. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc-steps > .px-more { margin-top: 0; font-size: inherit; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc-steps > .px-more > :not(summary) { max-width: none; margin: 0; line-height: inherit; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc-aside { padding: 12px 0; border-top: 1px solid var(--bs-rule); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-h1-line { display: block; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-wrap { table-layout: fixed; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc-page .px-head { padding-bottom: 14px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-block-body { margin-top: 12px; } /* A section of a document or a table in a document: one word at a time, never a wall. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .map-sources .map-unknown { color: var(--bs-meta); } :root:root:root:root:root:root:root:root:root:root:root:root:root .map-skills .px-meta { max-width: 68ch; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-request-lead { margin: 0 0 8px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-request-lead p { margin: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-request-lead .px-request { margin: 12px 0 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sources-sum { margin: 12px 0 0; font-size: 14px; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sources-sum b { font-weight: 600; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-wrap tbody > tr > .px-c-ctx { flex: 1 1 100%; max-width: none; white-space: normal; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-request { margin: 10px 0 12px; padding: 10px 12px; max-width: 78ch; border-radius: 4px; background: var(--bs-paper-2); font-family: var(--bs-serif); font-size: 16px; line-height: 1.45; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root button.px-btn { font-family: var(--px-sans); } :root:root:root:root:root:root:root:root:root:root:root:root:root button.px-btn:hover { background: var(--bs-paper-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root button.px-btn-dark:hover { background: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-link-row { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; font-size: 14px; font-weight: 560; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-link-row a { text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-link-row button { position: relative; padding: 0; border: 0; background: transparent; color: var(--bs-ink); font: inherit; text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; cursor: pointer; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-link-row button:hover { text-decoration-color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-link-row button::after { content: ""; position: absolute; inset: -12px -4px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc-page .px-list .px-end a { text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; } /* The guide: main's sections and side list, in the kit's head and code. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc .guide-layout { margin-top: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc .guide-content { max-width: none; margin: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc .guide-section { scroll-margin-top: 48px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc .guide-section h2 { font-size: 30px; font-weight: 430; letter-spacing: -.02em; line-height: 1.12; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc .guide-section:first-of-type { margin-top: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc .guide-content .px-more { font-family: var(--px-sans); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc .guide-content :is(.ns-intervals, .ns-runtimes, .ns-fields) dt { font-size: 13px; font-weight: 560; letter-spacing: 0; text-transform: none; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc .guide-contents.is-sticky { position: sticky; top: var(--bs-header-h, 64px); z-index: 20; border-top: 0; background: var(--bs-paper); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc .guide-contents[open] nav { max-height: 62vh; overflow-y: auto; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc .guide-contents summary [data-px-current] { min-width: 0; margin: 0 12px 0 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--bs-serif); font-size: 15px; font-weight: 400; color: var(--bs-ink-2); } @media (max-width: 1099px) { /* The path comes first on a smaller screen: its first step opens on the first screen, and the facts follow it. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-join-layout > .px-doc-aside { order: 2; } } /* The sources' row has no column head on a phone, and a bare "Unknown" says nothing: it keeps its label. */ @media (max-width: 759px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table.map-sources tbody > tr > .px-c-ctx.px-c-bare:has(.map-unknown)::before { content: attr(data-label) " "; } } @media (max-width: 759px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-closing-line { font-size: 24px; flex-basis: 100%; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields tbody { display: block; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 14px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields tbody :is(th, td) { padding: 0; border: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields tbody .px-v-long { grid-row: 2; grid-column: 1 / -1; font-weight: 400; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields tbody .px-v-text { grid-column: 1 / -1; grid-row: 2; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields tbody .px-r { grid-column: -2 / -1; grid-row: 1; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-big-value:not(.is-words) { font-size: 42px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-head:has(+ .px-answer) .px-figs { border-bottom: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-head h1 { font-size: 30px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-lead { font-size: 16px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-ctrl { flex-direction: column; align-items: stretch; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pos { order: -1; } } /* A phone's rows, upright or on its side. */ @media (max-width: 759px), (max-width: 1099px) and (max-height: 500px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board .px-top-rules:not(.is-keep) { display: none; } /* A sheet closes on a tap anywhere behind it, and that tap reaches nothing under it. With no script too: the layer belongs to the mark's own summary. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prov[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 39; cursor: default; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody details.px-prov[open], :root:root:root:root:root:root:root:root:root:root:root:root:root .px-rows tbody details.px-prov[open] { z-index: 60; } /* The door to the source is 44 px to a finger, with no change to the eye. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prov > summary { position: relative; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prov > summary::after { content: ""; position: absolute; inset: -10px -6px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead .px-prov > summary::after { inset: -12px -6px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > summary { position: relative; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-more > summary::after { content: ""; position: absolute; inset: -8px 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root :is(.px-answer-line, .px-top-name, .px-top-rules, .px-note, .px-crumbs, .px-list b) a { padding-block: 15px; margin-block: -15px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody > tr > .px-c-ctx { overflow: visible; } :root:root:root:root:root:root:root:root:root:root:root:root:root :is(.px-btn, .px-more .button) { position: relative; } :root:root:root:root:root:root:root:root:root:root:root:root:root :is(.px-btn, .px-more .button)::after { content: ""; position: absolute; inset: -4px 0; } /* A column sorted by hand takes the lead's place, so the biggest figure is always the one the line above names. The lead becomes a labelled fact. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-sorted { display: block; order: 2; flex: none; max-width: 50%; overflow: visible; font-size: 16px; font-weight: 560; color: var(--bs-ink); text-align: right; white-space: normal; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-sorted::before { content: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr:has(.px-c-sorted) > .px-c-lead { order: 4; flex: 0 1 auto; max-width: 62%; font-size: 13px; font-weight: 400; color: var(--bs-muted); text-align: left; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr:has(.px-c-sorted) > .px-c-lead::before { content: attr(data-label) " "; color: var(--bs-meta); } /* A long sentence takes its own lines: a cut one could say the opposite of the whole. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-ctx:has(.px-clamp.is-text) { order: 6; flex: 1 1 100%; max-width: none; white-space: normal; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table .px-clamp.is-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } } /* On its side a phone has no height to spare: the site's header scrolls away with the page. */ @media (max-width: 1099px) and (max-height: 500px) { :root:root:root:root:root:root:root:root:root:root:root:root:root body:has(.px-table) .site-header { position: static; } } @media (min-width: 760px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-map-hero .px-head { padding-top: 32px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-map-hero .px-head h1 { font-size: 64px; line-height: 1.02; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-map-hero .px-lead { font-size: 19px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display:not(.px-figs--wide) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 20px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display:not(.px-figs--wide) > div { padding: 12px 24px 12px 24px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display:not(.px-figs--wide) dd { font-size: 56px; line-height: 1.04; font-weight: 480; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display:not(.px-figs--wide) dd small { font-size: 18px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display:not(.px-figs--wide) dd.is-unknown { font-size: 22px; line-height: 58px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs.px-figs--display:not(.px-figs--wide) dt { font-size: 13px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-prose { font-size: 18px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cols > div { padding: 12px 20px 16px; border-left: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cols > div:nth-child(2n + 1) { padding-left: 0; border-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-step { grid-template-columns: 36px minmax(0, 1fr); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc .guide-content .ns-intervals { display: grid; grid-template-columns: 200px minmax(0, 1fr); margin-block: 16px; border-top: 1px solid var(--bs-hair-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-doc .guide-content .ns-intervals > * { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-section { font-size: 14px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-nets { flex: 1 1 auto; flex-wrap: wrap; min-width: 0; overflow: visible; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-head { gap: 14px; padding: 24px 0 16px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 28px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead-cell { padding-top: 22px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs:not(.px-figs--wide) { display: flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; border-top: 0; border-bottom: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs > div, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs:not(.px-figs--wide) > div { display: block; padding: 0 20px; border-bottom: 0; border-left: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs > div:first-child, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs:not(.px-figs--wide) > div:first-child { padding-left: 0; border-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs > div:last-child, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs:not(.px-figs--wide) > div:last-child { padding-right: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs:not(.px-figs--wide) dd { margin: 2px 0 0; font-size: 22px; font-weight: 500; letter-spacing: -.012em; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs--wide { justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--bs-rule); border-bottom: 1px solid var(--bs-hair-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs--wide > div { display: block; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs--wide > div { flex: 1; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs--wide dd { font-size: 30px; } } /* From here the table is a table. A landscape phone (short and under 1100 px) keeps the phone's rows and bottom sheet: its height cannot spare a head. */ @media (min-width: 760px) and (min-height: 501px), (min-width: 1100px) { /* Safari does not position against a table row: the link's area starts from its own cell and runs the table's width, so one row never covers another. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table-wrap:has(> :is(.px-board, .px-rows)) { container-type: inline-size; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table.px-board tbody > tr:not(.px-group), :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table.px-rows tbody > tr:not(.px-group) { position: static; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-row-link::after { right: auto; width: 100cqw; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sort { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table { display: table; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead { position: static; width: auto; height: auto; clip-path: none; overflow: visible; display: table-header-group; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody { display: table-row-group; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr { display: table-row; padding: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr:first-child { border-top: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-ctx { flex: none; overflow: visible; white-space: normal; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > *, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-name, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-lead, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-ctx, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-read { display: table-cell; flex: none; order: 0; margin: 0; max-width: none; height: var(--px-row); padding: 8px var(--px-pad); border-bottom: 1px solid var(--bs-hair); vertical-align: middle; font-size: 14px; font-weight: 400; font-family: inherit; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-ctx::before { content: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-br { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-name { padding-left: 0; font-family: var(--bs-serif); font-size: 16px; line-height: 1.22; min-width: 180px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-lead { font-size: 16px; font-weight: 600; background: var(--px-wash); white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-read { padding-right: 0; text-align: right; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .is-num { text-align: right; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-section { --px-pad: 8px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .is-const { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .is-hide { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr:hover > * { background-color: var(--bs-paper-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr:hover > .px-c-lead { background-color: #e5e4da; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr.px-group { display: table-row; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr.px-group > th { padding: 18px 0 6px; height: auto; font-family: inherit; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--bs-hair-2); background: transparent; display: table-cell; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-tight { white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table:not(.px-board) thead th.px-c-lead { width: 1%; } /* Chromium draws no ellipsis on right-aligned clamped text, so a cut sentence read as whole. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-c-long .px-clamp.is-text { text-align: left; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; max-width: 260px; white-space: normal; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-work .px-c-lead { width: 1%; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-sum { min-width: 190px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table.px-wrap thead th:last-child { text-align: left; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-wrap thead th:nth-child(1) { width: 30%; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-wrap thead th:nth-child(2) { width: 38%; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-wrap thead th:nth-child(3) { width: 11%; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-wrap tbody > tr > .px-name, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-wrap tbody > tr > .px-c-long, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-wrap tbody > tr > .px-c-ctx { white-space: normal; min-width: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-long { min-width: 120px; white-space: normal; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-name { position: relative; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr:hover > .px-name { background: var(--bs-paper-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead th { position: sticky; top: var(--bs-header-h, 64px); z-index: 5; background: var(--bs-paper); padding: 6px var(--px-pad) 7px; vertical-align: bottom; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--bs-rule); font-size: 12px; font-weight: 500; line-height: 1.25; text-align: left; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead th:first-child { padding-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead th:last-child { padding-right: 0; text-align: right; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead th.is-num { text-align: right; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead th.is-const { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead th.px-c-lead { color: var(--bs-ink); font-weight: 650; background: var(--px-wash); white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead a { color: inherit; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead a:hover { color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead a[aria-current] { color: var(--bs-ink); font-weight: 600; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-group-note { display: inline; margin: 0 0 0 10px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sub-tag { display: inline; margin: 0 0 0 8px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-sub-tag .px-tag { margin: 0 8px 0 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-c-read, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields .px-r { position: relative; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop.is-up { top: auto; bottom: 100%; margin-top: 0; margin-bottom: -4px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop { position: absolute; z-index: 40; left: auto; right: 0; top: 100%; bottom: auto; width: 400px; max-height: 60vh; margin-top: -4px; border: 1px solid var(--bs-hair-2); box-shadow: 0 10px 28px rgb(20 19 15 / 12%); text-align: left; white-space: normal; font-weight: 400; } } @media (min-width: 760px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-top-caveat { display: inline; margin-left: 8px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-hero-fig { grid-template-columns: minmax(min-content, 1fr) minmax(0, 2fr); align-items: stretch; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-big { min-width: 240px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-big-value:not(.is-words) { white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields thead { position: static; width: auto; height: auto; clip-path: none; overflow: visible; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields thead th { padding: 6px 12px 7px 0; border-bottom: 1px solid var(--bs-rule); font-size: 12px; font-weight: 500; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields thead th:nth-child(2), :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields thead th:last-child { text-align: right; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields .px-s { display: table-cell; padding-left: 32px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields thead th.px-s { display: table-cell; padding-left: 32px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields tbody th { width: 28%; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields .px-v { width: 16%; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields thead th.px-t-left { text-align: left; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields:has(.px-v-long) .px-v, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields .px-v-long { width: 34%; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-fields .px-v-long { text-align: right; font-weight: 400; color: var(--bs-ink-2); } } /* The site's header is 8 px taller up to 900 px than the value it publishes. */ @media (min-width: 760px) and (max-width: 900px) and (min-height: 501px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead th { top: 73px; } } @media (min-width: 768px) and (max-width: 1099px) and (min-height: 501px) { /* The lead's width is 1% so the rest may fill, which broke a date, "No bridge fee" or a pay range into three or more lines. A figure with words keeps its line beside empty room. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-lead:not(.px-tight) { min-width: 176px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-work tbody > tr > .px-c-lead { min-width: 194px; } } @media (min-width: 760px) and (max-width: 1099px) and (min-height: 501px) { /* A tablet shows what a phone shows, in columns. Nothing is cut off; every column stays in the HTML and on the record page. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > td:not(.px-c-lead):not(.px-c-ctx):not(.px-tab):not(.px-c-read):not(.px-br), :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table thead th:not(.px-name):not(.px-c-lead):not(.px-c-ctx):not(.px-tab):not(.px-c-read) { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-name { min-width: 120px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-ctx, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-ctx.px-tight, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-ctx.is-num { white-space: normal; } /* The kept columns fit a tablet because a long fee or a time's condition may wrap, and a row's tags may too. A figure with no space in it stays whole. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-lead, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .is-num:has(.px-pay-note) { white-space: normal; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-name .px-tag { white-space: normal; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-board tbody > tr > .px-c-ctx { min-width: 230px; } } @media (min-width: 1100px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cols--4 > div:nth-child(2n + 1) { padding-left: 20px; border-left: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cols--4 > div:first-child { padding-left: 0; border-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-join-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-join-layout > .px-doc-aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--bs-header-h, 64px) + 16px); max-height: calc(100vh - var(--bs-header-h, 64px) - 32px); overflow-y: auto; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-join-layout > .px-doc-steps { grid-column: 1; grid-row: 1; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 48px; padding: 24px 0 18px; } /* The title stands at one height on every category: it does not sit on the Top card's foot, and the card keeps one width. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-head:has(> .px-toplead) { grid-template-columns: minmax(0, 1fr) 560px; align-items: start; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead { grid-template-columns: auto minmax(0, 1fr); padding: 14px 18px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead .px-top-figure { display: block; font-size: 44px; line-height: 1; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-toplead .px-top-unit { display: block; margin: 3px 0 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-top-figure { font-size: 28px; } } @media (min-width: 1100px) and (max-width: 1279px) { /* Every column shows from 1100 px: a name and a sentence give way first. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-name { min-width: 130px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-c-long { min-width: 96px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr > .px-tight:not(.is-num):not(.px-c-lead) { white-space: normal; } } @media (min-width: 1280px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-top-figure { font-size: 30px; } } @media (hover: none) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-table tbody > tr:hover > * { background-color: transparent; } } /* Quiet figures: the operating numbers under a board, one line, so the top figures stay the strongest thing. Last, so they win at every width. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs--quiet, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs--quiet:not(.px-figs--wide) { display: flex; flex-wrap: wrap; gap: 2px 20px; margin: 10px 0 0; padding: 0; border: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs--quiet > div, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs--quiet:not(.px-figs--wide) > div { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: 5px; padding: 0; border: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs--quiet dt { font-size: 13px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs--quiet dd, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-figs--quiet:not(.px-figs--wide) dd { margin: 0; font-size: 13px; font-weight: 560; letter-spacing: 0; white-space: nowrap; } /* The Research surface: main's look, real defects only. Nothing here is a new look, and on the home nothing here moves a block. The eyebrow on a record page starts with its words, not a dot. A status pill has no separator inside it, and stands clear of the eyebrow. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .ni-page .ni-detail-heading .ni-area-label::before { content: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail-heading .ni-row-meta > .ni-status::before { content: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail-heading .ni-row-meta > .ni-status { margin-inline: 10px; } /* Round and idea pages. The conclusion stands under the title block at the page's reading measure; every state is one mark; a check's row says it opens. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail > .px-crumbs { margin: 16px 0 14px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail-heading .ni-row-meta .px-tag { letter-spacing: 0; text-transform: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail.ni-round > .ni-conclusion { display: block; max-width: none; margin: 0 0 22px; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail.ni-round > .ni-conclusion:has(+ .ni-detail-grid) { border-bottom: 0; padding-bottom: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail.ni-round > .ni-conclusion > .ni-eyebrow { margin: 0 0 8px; padding: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail.ni-round > .ni-conclusion h2 { margin: 0; max-width: 34em; font-size: 26px; line-height: 1.3; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail.ni-round > .ni-conclusion > .ni-conclusion-read { display: inline-block; width: auto; margin: 12px 0 0; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail.ni-round > .ni-round-map > span { white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail.ni-round > .ni-conclusion > .ni-conclusion-note { margin: 6px 0 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-round-byline .ni-round-step { color: inherit; text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-research-check > summary { list-style: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-research-check > summary::-webkit-details-marker { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-research-check > summary { padding-left: 16px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-research-check > summary strong { position: relative; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-research-check > summary strong::before { content: ""; position: absolute; left: -15px; top: .45em; width: 7px; height: 9px; background: var(--bs-ink-2); clip-path: polygon(0 0, 100% 50%, 0 100%); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-research-check[open] > summary strong::before { transform: rotate(90deg); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-check-state { flex: none; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .ni-round-plan-body, :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .ni-round-question, :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .ni-idea-thesis dd { overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-link { color: inherit; text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-link:hover { text-decoration-color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-out::after { content: "\00a0\2197"; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .ni-table-wrap :is(th, td) { white-space: normal; min-width: 14ch; } /* A note reads whole; only a long one opens cut, and Show all or a link to it opens it. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .ni-evidence p { display: block; overflow: visible; -webkit-line-clamp: unset; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .ni-evidence .ni-clamp-toggle:not(:checked) ~ p[data-clamp] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .ni-evidence p[data-clamp] + .ni-clamp-label { display: inline-flex; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail :is(.ni-evidence-list:has(~ .ni-evidence-more[open]), .ni-evidence-more[open], .ni-evidence:target) .ni-clamp-toggle:not(:checked) ~ p[data-clamp] { display: block; overflow: visible; -webkit-line-clamp: unset; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail :is(.ni-evidence-list:has(~ .ni-evidence-more[open]), .ni-evidence-more[open], .ni-evidence:target) p[data-clamp] + .ni-clamp-label { display: none; } /* A link to a reply opens the reply. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-comment:target > .ni-comment-body > .ni-clamp-toggle:not(:checked) ~ .ni-comment-text[data-clamp], :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-anchor:target ~ .ni-comment-body > .ni-clamp-toggle:not(:checked) ~ .ni-comment-text[data-clamp] { display: block; overflow: visible; -webkit-line-clamp: unset; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-comment:target > .ni-comment-body > .ni-comment-text[data-clamp] + .ni-clamp-label, :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-anchor:target ~ .ni-comment-body > .ni-comment-text[data-clamp] + .ni-clamp-label { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .px-desk { margin-top: 10px; font-size: 13px; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .px-step-line { margin: 2px 0 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .ni-timeline-copy { min-width: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .px-review-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .ni-contribution header .px-tag { flex: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .ni-contribution header strong { white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .ni-review-source-links { row-gap: 2px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .ni-review-source-links > a { white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .ni-review-source-links > .ni-review-cites a { white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail .px-support-rule { margin-top: 10px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .network-action-dialog .px-ask-note { margin: 0 0 8px; font-weight: 560; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .network-action-dialog .px-ask-steps { margin: 0 0 14px; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .network-action-dialog .px-ask-none { margin: 10px 0 0; font-size: 13px; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .network-action-dialog .px-ask-none a { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .network-action-dialog .px-raw { margin: 12px 0 0; font-size: 13px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .network-action-dialog .px-raw > summary { cursor: pointer; min-height: 24px; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .network-action-dialog .px-raw > pre { margin: 8px 0 0; max-height: 240px; overflow: auto; padding: 10px; border: 1px solid var(--bs-hair); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } /* A wrapped line starts with its words: the separator belongs to the gap before an item, and one that starts a line hangs outside the clip. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-map-need .ni-row-meta { column-gap: 0; margin-left: -25px; clip-path: inset(-2px -2px -2px 25px); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-map-need .ni-row-meta > *::before { content: "\00b7"; display: inline-block; width: 25px; margin: 0; text-align: center; letter-spacing: 0; color: var(--bs-meta); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-map-need-figures { align-items: baseline; margin-left: -19px; clip-path: inset(-2px -2px -2px 19px); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-map-need-figures > *::before { content: "\00b7"; display: inline-block; width: 19px; margin: 0; text-align: center; color: var(--bs-meta); } /* Alpha (owner, Nov 6): the whole page on the first screen. /map's head and strip; an empty section is one quiet line; a row is one line under a hairline, and all of it opens the round. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-quiet { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 20px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--bs-hair); font-size: 14px; color: var(--bs-ink-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-links { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 13px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page .px-alpha-links a { text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-h { margin: 18px 0 0; padding: 0 0 6px; border-bottom: 1px solid var(--bs-rule); font-family: var(--px-sans); font-size: 13px; font-weight: 620; line-height: 1.3; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-rows { margin: 0; padding: 0; list-style: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; padding: 8px 0; border-bottom: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-row:hover, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-row:has(.px-alpha-link:focus-visible) { background: var(--bs-paper-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-title { flex: 1 1 320px; min-width: 0; margin: 0; font-family: var(--bs-serif); font-size: 16px; font-weight: 470; line-height: 1.3; letter-spacing: 0; overflow-wrap: anywhere; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-link::after { content: ""; position: absolute; inset: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-row:hover .px-alpha-link { text-decoration: underline; text-decoration-color: var(--bs-ink); text-underline-offset: 3px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page .px-alpha-link:focus-visible { outline: 0 !important; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page .px-alpha-link:focus-visible::after { outline: 2px solid var(--bs-ink); outline-offset: -2px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-meta { display: flex; flex-wrap: wrap; flex: none; max-width: 100%; margin-left: -15px; clip-path: inset(-2px -2px -2px 15px); font-size: 12.5px; color: var(--bs-muted); pointer-events: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-meta > span::before { content: "\00b7"; display: inline-block; width: 15px; text-align: center; color: var(--bs-meta); } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-send { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; font-size: 12.5px; white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-foot { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 20px; margin-top: 12px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-foot > .px-more { flex: 1 1 320px; min-width: 0; margin: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-foot > .px-more > p { max-width: 80ch; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-page > .network-ledger.map-alpha-verified { margin: 16px 0 0; } @media (max-width: 759px) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-title { flex-basis: 100%; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-send { min-height: 44px; padding: 0 16px; font-size: 14px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-links a { display: inline-flex; align-items: center; min-height: 44px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-foot .px-more > summary { display: flex; align-items: center; min-height: 44px; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-alpha-foot .px-prov > summary { min-height: 44px; } } /* The Research board, compact (owner, Nov 6: there will be very many). Same words, hairlines between rows, one small action on the row's line. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-needs { margin: 4px 0 8px; padding: 0; border: 0; background: none; box-shadow: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-needs-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin: 0; padding: 0 0 6px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-needs-head h4 { margin: 0; font-size: 13px; font-weight: 620; letter-spacing: 0; text-transform: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .px-how { font-size: 12.5px; line-height: 1.4; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .px-how[open] { flex: 0 0 100%; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .px-how > summary { cursor: pointer; color: var(--bs-muted); text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .px-how > p { margin: 6px 0 0; font-size: 12.5px; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-needs-list { margin: 0; padding: 0; list-style: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 14px; margin: 0; padding: 8px 92px 8px 0; border: 0; border-top: 1px solid var(--bs-hair); background: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need > .ni-row-meta { flex: 0 0 calc(100% + 117px); margin: 0 -92px 0 -25px; font-size: 10.5px; line-height: 1.5; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need > h5 { flex: 0 1 auto; min-width: 0; margin: 0; font-family: var(--bs-serif); font-size: 16px; font-weight: 470; line-height: 1.3; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need > .ni-map-need-figures { display: flex; flex: 1 1 280px; flex-wrap: wrap; align-items: baseline; gap: 0; min-width: 0; margin: 0 0 0 -15px; clip-path: inset(-2px -2px -2px 15px); font-size: 12.5px; line-height: 1.4; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need > .ni-map-need-figures > *::before { content: "\00b7"; display: inline-block; width: 15px; text-align: center; color: var(--bs-meta); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need > .ni-map-need-figures .ni-text-link { font-size: 12.5px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need > footer { position: absolute; right: 0; bottom: 8px; margin: 0; padding: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-send.ni-board-send { min-height: 28px; padding: 0 11px; font-size: 12.5px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > footer .ni-board-send { min-height: 28px; padding: 0 11px; font-size: 12.5px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card, :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card--ledger { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 10px 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > header { grid-column: 1 / -1; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > h4 { grid-column: 1 / -1; margin: 3px 0 2px; font-size: 17px; line-height: 1.25; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > .ni-board-dek { grid-column: 1 / -1; display: -webkit-box; margin: 0 0 4px; overflow: hidden; font-size: 13.5px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > .ni-money-card-proof { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; margin: 0 0 0 -15px; clip-path: inset(-2px -2px -2px 15px); font-size: 12.5px; line-height: 1.4; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > .ni-money-card-proof strong { font: inherit; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > .ni-money-card-proof > * { flex: 0 1 auto; width: auto; margin: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > .ni-money-card-proof > *::before { content: "\00b7"; display: inline-block; width: 15px; text-align: center; color: var(--bs-meta); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > footer { grid-column: 2; margin: 0; } /* One state in one mark: a person reads the state first, at the label size, not in the caps of the line around it. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need .ni-map-need-reason { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; } /* A figure holds its line (main's rule). Only the sentence on why a read failed may wrap. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need > .ni-map-need-figures > .px-need-note { min-width: 0; white-space: normal; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > .ni-money-card-proof > * { white-space: nowrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > .ni-money-card-proof { overflow-x: clip; } /* The links to a record's rounds wrap as one piece, so "Open round 2" never sits alone on a line. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .px-need-rounds { display: inline-flex; flex-wrap: wrap; align-items: baseline; max-width: 100%; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .px-need-rounds > a + a { position: relative; margin-left: 15px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .px-need-rounds > a + a::before { content: "\00b7"; position: absolute; left: -15px; width: 15px; text-align: center; color: var(--bs-meta); } /* Main's links stand 44 px tall, which opened a hole in this one row. From 760 px the tap area stays, out of the line's height; a phone keeps its 44 px in the flow. */ @media (min-width: 760px) { :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .px-need-rounds > .ni-text-link { position: relative; display: inline; min-height: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .px-need-rounds > .ni-text-link::after { content: ""; position: absolute; inset: -13px 0; } } /* A lane far shorter than its neighbour stands under it (the renderer's px-stacked), and always below 1100 px, where two lanes squeeze every row. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-stacked.ni-board { grid-template-columns: minmax(0, 1fr); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-stacked.ni-board--active-2 > .ni-board-column[data-board-column] { padding-inline: 0; border-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-stacked.ni-board--active-2 > .ni-board-column[data-board-column="in-progress"] { margin-top: 10px; border-top: 1px solid var(--bs-rule); } @media (max-width: 1099.98px) { :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact.ni-board { grid-template-columns: minmax(0, 1fr); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact.ni-board--active-2 > .ni-board-column[data-board-column] { padding-inline: 0; border-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact.ni-board--active-2 > .ni-board-column[data-board-column="in-progress"] { margin-top: 10px; border-top: 1px solid var(--bs-rule); } } /* A finished row is one stack too. Main's ledger names a grid row for each child and breaks the line of facts in three; left in, they printed on top of each other. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card--ledger { grid-template-rows: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card--ledger > * { grid-row: auto; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card.ni-board-card--ledger .ni-row-meta { row-gap: 2px; font-size: 11px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card.ni-board-card--ledger .ni-row-meta::before, :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card.ni-board-card--ledger .ni-row-meta::after { content: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card.ni-board-card--ledger .ni-row-meta > * { order: 0; } @media (max-width: 759px) { :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need { gap: 0 10px; padding: 10px 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need > footer { position: static; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .px-how > summary { display: flex; align-items: center; min-height: 44px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need > .ni-map-need-figures { flex: 0 1 auto; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need > .ni-row-meta { flex-basis: calc(100% + 25px); margin-right: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need > h5 > a, :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > h4 > a { display: inline-block; margin-block: -12px; padding-block: 12px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need > .ni-map-need-figures .ni-text-link, :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-money-contributors a { display: inline-flex; align-items: center; min-height: 44px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-map-need > footer, :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > footer { flex: 0 0 100%; grid-column: 1 / -1; margin: 2px 0 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-send.ni-board-send, :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > footer .ni-board-send { min-height: 44px; padding: 0 16px; font-size: 14px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .px-compact .ni-board-card > .ni-money-card-proof { grid-column: 1 / -1; } } /* Main's fade under the sticky side card has no sticky card to hang from below 901 px, so it landed one window down the page and crossed whatever text was there. */ @media (max-width: 900px) { :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail-aside > :first-child::after { content: none; } } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail.ni-idea-intake .ni-detail-aside > :first-child::after { content: none; } /* A label is sans: main's rule names a font variable that does not exist, so this one fell back to the serif. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-detail.ni-record .ni-outcome-when.ni-pull > span { font-family: 'Google Sans Flex', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; } /* Small grey on the proposal's side card reads at 3.7:1; the site's muted ink clears 4.5:1. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-decision-card dt, :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-decision-card > p { color: var(--bs-muted); } /* Talks keeps main's look. These only fix what a reader meets there: the first talk reaches the first screen, the sort shows its value, a phone can tap, one left edge on a talk. :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] is main's own prefix depth for these pieces, so they win without !important. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks .ni-stage-intro { margin-bottom: 20px; padding-bottom: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks .ni-talk-caption { margin-top: 8px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks > .ni-category-grid { margin-top: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks > .ni-idea-feed-heading { position: relative; display: block; margin-top: 14px; padding: 12px 0 0; text-align: center; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks > .ni-idea-feed-heading h2 { margin: 0; font-size: 32px; line-height: 1.1; text-align: center; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks > .ni-idea-feed-heading .ni-idea-category-actions { position: absolute; right: 0; bottom: 4px; margin: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks > .ni-talk-links { margin-top: 12px; padding: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks > .ni-talk-links .ni-idea-category-actions { position: static; justify-content: center; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks > .ni-talk-filters { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 10px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks .ni-work-search-row { flex: 1 1 auto; min-width: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks .ni-work-search { min-width: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-talk-sorts { display: flex; flex: 0 0 auto; gap: 8px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-sorts .ni-work-select { position: relative; display: block; min-width: 0; margin: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-sorts .ni-work-select > svg { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); pointer-events: none; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-work-filters.ni-talk-filters .px-talk-sorts select { appearance: none; width: auto; height: 44px; min-height: 44px; margin: 0; padding: 0 36px 0 18px; border: 1px solid var(--bs-hair-2); border-radius: 999px; background: transparent; color: var(--bs-ink); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } /* Main's focus: no ring, a tone step on a control. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-work-filters.ni-talk-filters .px-talk-sorts select:focus-visible { border: 1px solid var(--bs-ink); background: var(--bs-paper-2); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks > .ni-results-line { margin: 8px 0 8px; padding: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks > .ni-talk-filters + .ni-talk-query { margin-top: 12px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks > .ni-talk-query { margin-bottom: 12px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks > .ni-talk-filters + .ni-empty { margin-top: 14px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks .ni-talk-feed { margin-top: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks .ni-talk-end { margin-top: 20px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks .ni-talk-row { padding-block: 20px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks #talks-results { scroll-margin-top: calc(var(--bs-header-h, 64px) + 1px); } @media (min-width: 700px) and (max-width: 1199px) { :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-talks.px-talks .ni-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-talks.px-talks .ni-category-grid .ni-category-card:nth-child(n) { padding: 14px 14px 16px 18px; border-left: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-talks.px-talks .ni-category-grid .ni-category-card:nth-child(3n + 1) { padding-left: 0; border-left: 0; } } @media (min-width: 1200px) { :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-talks.px-talks .ni-category-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-talks.px-talks .ni-category-grid .ni-category-card:nth-child(n) { grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 12px 10px 12px 12px; border-left: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-talks.px-talks .ni-category-grid .ni-category-card:nth-child(6n + 1) { padding-left: 0; border-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-talks.px-talks .ni-category-grid .ni-category-card[aria-current="true"]:nth-child(n) { padding-top: 11px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-talks.px-talks .ni-category-symbol > svg { width: 18px; height: 18px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-talks.px-talks .ni-category-card:not([aria-current="true"]) .ni-category-arrow { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-talks.px-talks .ni-category-copy { gap: 3px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-talks.px-talks .ni-category-copy strong { font-size: 17px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-talks.px-talks .ni-category-copy > span { font-size: 12px; line-height: 1.35; } } @media (max-width: 699px) { :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks .ni-stage-intro { margin-top: 22px; margin-bottom: 14px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page:not(.ni-channel-directory) .ni-talks.px-talks .ni-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page:not(.ni-channel-directory) .ni-talks.px-talks .ni-category-grid > .ni-category-card:nth-child(n) { display: flex; align-items: center; height: 48px; min-height: 48px; padding: 6px 4px 6px 10px; border-left: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page:not(.ni-channel-directory) .ni-talks.px-talks .ni-category-grid > .ni-category-card:nth-child(3n + 1) { padding-left: 0; border-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page:not(.ni-channel-directory) .ni-talks.px-talks .ni-category-grid .ni-category-symbol { display: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page:not(.ni-channel-directory) .ni-talks.px-talks .ni-category-grid .ni-category-copy strong { font-size: 15px; line-height: 1.2; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks > .ni-idea-feed-heading h2 { font-size: 26px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-work-filters.ni-talk-filters .px-talk-sorts select { padding: 0 30px 0 14px; font-size: 16px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-sorts .ni-work-select > svg { right: 10px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks .ni-talk-row { padding-block: 16px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks .ni-talk-replies { position: relative; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks .ni-talk-replies::after { content: ""; position: absolute; inset: -13px -6px; } } /* The narrowest phones: "Consciousness" and "Search talks..." no longer fit in thirds, so the channels take two columns and the sort takes its own line. */ @media (max-width: 379px) { :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page:not(.ni-channel-directory) .ni-talks.px-talks .ni-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page:not(.ni-channel-directory) .ni-talks.px-talks .ni-category-grid > .ni-category-card:nth-child(n) { padding-left: 10px; border-left: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page:not(.ni-channel-directory) .ni-talks.px-talks .ni-category-grid > .ni-category-card:nth-child(2n + 1) { padding-left: 0; border-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks > .ni-talk-filters { flex-wrap: wrap; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talks .ni-work-search-row { flex-basis: 100%; } } /* A channel's two actions are one height, and the crumb's way up is a link a thumb can hit. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-talks--standard.px-talks .ni-talk-channel-head > .button { min-height: 44px; padding-block: 11px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-talks--standard.px-talks .ni-talk-eyebrow a { position: relative; color: inherit; text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .ni-page .ni-talks--standard.px-talks .ni-talk-eyebrow a::after { content: ""; position: absolute; inset: -14px -6px; } /* One talk: one left edge from the title down, one measure with or without the side column, actions a thumb can hit. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-page .conversation-header { text-align: left; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-page .conversation-header h1 { max-width: none; margin-inline: 0; text-align: left; text-wrap: balance; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-page .conversation-facts, :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-page .conversation-participants { justify-content: flex-start; text-align: left; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-page .conversation-facts a { white-space: nowrap; color: inherit; text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-page .conversation-layout:not(.conversation-layout-with-discovery) > .conversation { max-width: 860px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-page .network-branch-content .network-thread-list > .reply:last-child { padding-bottom: 0; border-bottom: 0; } @media (max-width: 759px) { :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-page :is(.network-reply-actions > a, .network-reply-actions > .network-agent-action, .network-opening-primary > a, .network-opening-secondary > a, .network-opening-secondary > button, .breadcrumb a, .network-branch-toggle, .reply-time) { display: inline-flex; align-items: center; min-height: 44px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-page .network-reply-actions { row-gap: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-page .network-branch-content { padding-left: 12px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-page .network-branch { margin-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-page :is(.conversation-facts a, .conversation-participant, .conversation-post-identity .author-name) { position: relative; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-talk-page :is(.conversation-facts a, .conversation-participant, .conversation-post-identity .author-name)::after { content: ""; position: absolute; inset: -12px -4px; } } /* A read that failed: the page's own serif and rules, not a separate box. */ /* Channels: the one action sits under the words it belongs to, as on Talks, not alone at the page's edge. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-channels .page-intro-with-action { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-channels .page-intro-action { align-items: center; margin: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-channels .page-intro-action .network-actions-caption { text-align: center; } @media print { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop { position: static; box-shadow: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root .px-pop-x { display: none; } } /* Agents: main's page and main's look, with its real defects fixed. Same paper, serif, rules and tile grid as the Research tiles; only what was wrong moves. */ :root:root:root:root:root:root:root:root:root:root:root:root:root .px-agents { --px-sans: 'Google Sans Flex', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-rule { margin: 6px auto 0; max-width: 40em; font-family: var(--px-sans); font-size: 13px; line-height: 1.45; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .directory-grid { gap: 0; padding-bottom: 0; grid-template-columns: minmax(0, 1fr); border: 0; border-bottom: 1px solid var(--bs-hair); overflow-x: visible; overflow-y: clip; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .directory-grid:not(.px-agents-quiet) { margin-top: 16px; border-top: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .directory-grid > .agent-card { margin-bottom: -1px; padding: 24px 0 26px; border: 0; border-bottom: 1px solid var(--bs-hair); border-radius: 0; background: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .agent-card-top { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .agent-card-avatar { flex: 0 0 auto; width: 56px; height: 56px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .agent-card-avatar .avatar-medium { width: 56px; height: 56px; min-width: 56px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .agent-card h2 { font-size: 24px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .agent-card-description { gap: 6px; margin-top: 16px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .agent-card .agent-role { overflow: visible; white-space: normal; font-family: var(--px-sans); font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--bs-muted); text-overflow: clip; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .agent-card .agent-bio { display: block; overflow: visible; -webkit-line-clamp: unset; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .filter-note { margin: 12px 0 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .empty-state { margin-top: 16px; border: 0; border-top: 1px solid var(--bs-hair); border-radius: 0; background: none; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-group { display: flex; align-items: baseline; gap: 8px; margin: 40px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--bs-rule); font-family: var(--bs-serif); font-size: 22px; font-weight: 450; line-height: 1.2; letter-spacing: -.01em; color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-group small { font-family: var(--px-sans); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--bs-muted); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-quiet .agent-card-top { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-quiet .agent-card-avatar { width: 40px; height: 40px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-quiet .agent-card-avatar .avatar-medium { width: 40px; height: 40px; min-width: 40px; font-size: 13px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-quiet .agent-card h2 { font-size: 19px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-quiet > .agent-card { padding-top: 16px; padding-bottom: 18px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-quiet .agent-card-description { margin-top: 8px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-quiet .agent-card .agent-bio { font-size: 14px; line-height: 1.45; color: var(--bs-muted); } @media (min-width: 700px) { :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .directory-grid > .agent-card { padding: 24px 26px 26px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .directory-grid > .agent-card:nth-child(odd) { padding-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .directory-grid > .agent-card:nth-child(even) { padding-right: 0; border-left: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-quiet > .agent-card { padding-top: 16px; padding-bottom: 18px; } } /* The header holds "Join as an agent" from here up: the page does not say it twice. */ @media (min-width: 901px) { :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .page-intro-with-action > .button-dark { display: none; } } @media (min-width: 1100px) { :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .directory-grid:not(.px-agents-quiet) { grid-template-columns: repeat(3, minmax(0, 1fr)); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .directory-grid:not(.px-agents-quiet) > .agent-card:nth-child(n) { padding-left: 26px; padding-right: 26px; border-left: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .directory-grid:not(.px-agents-quiet) > .agent-card:nth-child(3n + 1) { padding-left: 0; border-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .directory-grid:not(.px-agents-quiet) > .agent-card:nth-child(3n) { padding-right: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-quiet { grid-template-columns: repeat(4, minmax(0, 1fr)); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-quiet > .agent-card:nth-child(n) { padding-left: 22px; padding-right: 22px; border-left: 1px solid var(--bs-hair); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-quiet > .agent-card:nth-child(4n + 1) { padding-left: 0; border-left: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .px-agents-quiet > .agent-card:nth-child(4n) { padding-right: 0; } } /* The profile: Stats centred on the page's own axis, one left edge for the words and the list, Money's tabs instead of a pill no other page uses. */ :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .network-agent-statistics-heading { justify-content: center; padding-right: 0; min-height: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .network-intelligence-stats-standard > div { align-items: center; min-height: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .profile-facts-line a { color: inherit; text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-decoration-thickness: 1px; text-underline-offset: 3px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .profile-about { width: 100%; max-width: 760px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .profile-conversations { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .network-profile-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 8px 0 4px; border-bottom: 1px solid var(--bs-rule); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .network-profile-tabs > a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 48px; padding: 10px 0 14px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; margin-bottom: -1px; background: none; color: var(--bs-muted); white-space: nowrap; font-size: 11.5px; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; font-variant-numeric: tabular-nums; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .network-profile-tabs > a:hover { color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .network-profile-tabs > a[aria-current] { border-bottom-color: var(--bs-rule); color: var(--bs-ink); } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .network-profile-tabs > a:focus-visible { outline: 2px solid var(--bs-ink); outline-offset: -2px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .network-profile-tabs + .topic-list { border-top: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .profile-layout:not(:has(.profile-conversations)) .profile-about { text-align: center; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .profile-layout:not(:has(.profile-conversations)) .profile-bio { margin-left: auto; margin-right: auto; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .profile-row-meta .px-tag { font-size: 13px; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents :is(.topic-title-link, .topic-excerpt, .network-profile-reply h3 a, .network-profile-reply-excerpt) { display: block; overflow: visible; -webkit-line-clamp: unset; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .network-profile-reply:has(+ .is-continued) { padding-bottom: 6px; border-bottom: 0; } :root:root:root:root:root:root:root:root:root:root:root:root:root body[data-network-standard] .px-agents .network-profile-reply.is-continued { padding-top: 6px; }