/* The company Overview -- header band, body layout and the read-only cards (item 3458, M8, M14, M18-M22; R79, R80).
   Source of truth: docs/design/ui/company-overview/2026-10-22-company-overview-mockup.html, its `.band*`, `.marker*`,
   `.lock`, `.ov`, `.grip`, `.blk*`, `.facts`, `.inact`, `.pick-list` rules, ported with the colour tokens
   tokens.css already declares. Linked after company.css in App.razor.

   SCOPE: every rule sits under .company-page (CompanyOverviewBody's and the page's root), because several class names
   here (.facts, .hint, .mono, .muted, .pill, .page) are generic and search.css uses some of them under .search-shell. The one
   exception is the registration log popup's lgp-* block at the end of the file: a DxPopup may be drawn outside .company-page,
   so those rules carry a unique prefix instead of the page scope (item 3599 R18).

   TOKEN OWNERSHIP: the band's and the Event in focus card's shadows are the only colours the mockup adds beyond tokens.css; they are declared here in the
   same three blocks tokens.css uses (bare :root; the dark media query guarded as :root:not([data-theme="light"]);
   :root[data-theme="dark"]), so nothing is defined only in a dark block (--work-shadow has one value in both
   themes, M:681, so only the bare :root declares it). */
:root { --band-shadow: rgba(0, 0, 0, .06); --work-shadow: rgba(0, 0, 0, .05); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --band-shadow: rgba(0, 0, 0, .4); }
}
:root[data-theme="dark"] { --band-shadow: rgba(0, 0, 0, .4); }

/* The mockup's body type (its `body` rule): the shell's page type is 14px / 1.5 system-ui, which made every line, control and
   card taller than the approved design (product owner's UI review, 2026-10-26). */
.company-page { --ov-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; line-height: 1.45; font-variant-numeric: tabular-nums; }

/* The card grid's live region (OverviewCardGrid's #card-live): read to a screen reader, never drawn. The DevExpress
   bs5 theme happens to declare a Bootstrap .visually-hidden too; this rule (the mockup's .sr) does not depend on it. */
.company-page .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Header band: alternative C1's band (mockup `header.band`). ---- */
.company-page .band { flex: none; position: relative; z-index: 6; padding: 8px 14px 9px; background: var(--pane); border-bottom: 1px solid var(--line); box-shadow: 0 2px 6px var(--band-shadow); }
.company-page .band-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--ink2); min-height: 26px; }
.company-page .crumb { display: flex; align-items: center; gap: 6px; min-width: 0; }
.company-page .crumb [aria-current] { color: var(--ink); font-weight: 600; }
.company-page .crumb-link { border: none; background: none; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; font-size: 12px; }
.company-page .crumb-link:hover { text-decoration: underline; }
.company-page .band-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 4px; }
.company-page .band-main h1 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.company-page .idnum { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--ink2); }
.company-page .idnum .mono { font-size: 13px; color: var(--ink); font-weight: 500; }
.company-page .marker { display: inline-flex; align-items: center; gap: 5px; align-self: center; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; border: 1px solid currentColor; }
.company-page .marker svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.company-page .marker--inactive { color: var(--stop); background: var(--stop-bg); }
.company-page .marker--prospect { color: var(--cool); background: var(--cool-bg); }
.company-page .lock { display: inline-flex; align-items: center; gap: 6px; align-self: center; padding: 2px 9px; border-radius: 4px; background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 600; }
.company-page .lock svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* P11: the lock could not be read. Muted text in the indicator's place: no warning colour, because nothing is known
   to be held. */
.company-page .lock.lock--unavailable { background: none; color: var(--ink3); font-weight: 500; font-style: italic; padding: 2px 0; }
.company-page .band-facts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 6px 0 0; padding: 0; }
.company-page .band-facts div { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.company-page .band-facts dt { font-size: 11.5px; font-weight: 400; color: var(--ink3); }
.company-page .band-facts dd { margin: 0; font-size: 12.5px; color: var(--ink); font-weight: 500; }
.company-page .band-facts dd .sub { color: var(--ink3); font-weight: 400; }

/* ---- Body: company rail | page. The rail's own rules are company.css's. ---- */
/* the footer bar (mockup `.actionbar`): the shell's bar is 9px 14px; the mockup's is 10px 16px */
.company-page .actionbar { padding: 10px 16px; }
.company-page .cw { flex: 1; display: flex; min-width: 0; }
.company-page .page { flex: 1; min-width: 0; padding: 16px 20px 20px; }
/* item 3599 R21: 12 px page edges at 760 px and below (EV10: 258 px cards at 390) */
@media (max-width: 760px) { .company-page .page { padding-left: 12px; padding-right: 12px; } }
.company-page .company-notfound { margin: 24px 20px; color: var(--ink2); font-size: 14px; }

/* ---- Overview: the full width of the page (SD-3112 R79: no centring band, no empty bands either side). A 12-column
        grid of movable cards (R80); overview-cards.js sets each card's span and order. ---- */
.company-page .ov { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 14px; align-items: stretch; }
.company-page .ov > [data-card] { grid-column: span 12; min-width: 0; position: relative; }
@media (max-width: 1000px) { .company-page .ov > [data-card] { grid-column: 1 / -1 !important; } }
.company-page .ov-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.company-page .ov-stack > .blk:last-child { flex: 1; }
/* R80: the drag handle at the right of each card's header; arrow keys on it move the card too */
.company-page .grip { flex: none; width: 24px; height: 24px; margin: -2px -4px -2px 2px; display: grid; place-items: center; border: none; border-radius: 4px; background: none; color: var(--ink3); cursor: grab; opacity: .55; }
.company-page .grip:hover, .company-page .grip:focus-visible { opacity: 1; background: var(--accent-bg); color: var(--ink); }
.company-page .grip:active { cursor: grabbing; }
.company-page .grip svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
/* The drag feedback overview-cards.js toggles (is-dragging on the card being moved; drop-before / drop-after with
   drop-x / drop-y on the card under the pointer), mockup lines 594-599. */
.company-page .ov > [data-card].is-dragging { opacity: .45; }
.company-page .ov > [data-card].drop-before::before, .company-page .ov > [data-card].drop-after::after { content: ""; position: absolute; z-index: 8; background: var(--accent); border-radius: 2px; pointer-events: none; }
.company-page .ov > [data-card].drop-before.drop-y::before { left: 0; right: 0; top: -9px; height: 3px; }
.company-page .ov > [data-card].drop-after.drop-y::after { left: 0; right: 0; bottom: -9px; height: 3px; }
.company-page .ov > [data-card].drop-before.drop-x::before { top: 0; bottom: 0; left: -9px; width: 3px; }
.company-page .ov > [data-card].drop-after.drop-x::after { top: 0; bottom: 0; right: -9px; width: 3px; }

/* ---- Cards ---- */
.company-page .blk { display: flex; flex-direction: column; background: var(--pane); border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
.company-page .blk > .blk-b { flex: 1; }
.company-page .blk-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line2); min-height: 40px; }
.company-page .blk-h h2 { margin: 0; font-size: 13.5px; font-weight: 700; line-height: inherit; }
.company-page .blk-h .sub { font-size: 11.5px; color: var(--ink3); }
.company-page .blk-h .evname { font-weight: 600; color: var(--ink); }
.company-page .blk-h .grow { flex: 1; }
.company-page .blk.is-minor > .blk-h { min-height: 34px; padding: 7px 12px; }
.company-page .blk.is-minor > .blk-h h2 { font-size: 12px; font-weight: 600; color: var(--ink2); }
.company-page .blk-b { padding: 10px 12px 12px; }
.company-page .mem-h { flex-wrap: nowrap; }
.company-page .mem-h h2, .company-page .mem-h .unbuilt { white-space: nowrap; flex: none; }
.company-page .mem-h .evname { min-width: 0; flex: 0 1 auto; white-space: normal; line-height: 1.25; }
/* Narrow screens (T17 F1, product owner 2026-10-25): the header wraps in three rows - the title with the grip at the right, the
   association name (or the "None in focus" line) across the full row, then "View all memberships" - so a long name no longer
   overlaps the link or the grip, and nothing widens the page. */
@media (max-width: 640px) {
  .company-page .mem-h { flex-wrap: wrap; }
  .company-page .mem-h .grow { display: none; }
  .company-page .mem-h .grip { margin-left: auto; }
  .company-page .mem-h .evname, .company-page .mem-h .sub { order: 1; flex: 1 1 100%; }
  .company-page .mem-h .unbuilt { order: 2; }
}
/* a page not built yet is named but does nothing (as the rail's unbuilt entries): "View all memberships" until item 3476 */
.company-page .unbuilt { color: var(--ink3); font-size: 13px; font-weight: 500; cursor: default; }

/* Read-only facts: label beside value (R79) */
.company-page .facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 12.5px; }
.company-page .facts dt { font-size: 11px; font-weight: 600; color: var(--ink3); padding-top: 2px; }
.company-page .facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* item 3599 R15: the seven Membership facts as label-above-value cells that wrap by width (the 3599 mockup's .mem-grid),
   scoped to this card so every other .facts list keeps label beside value */
.company-page [data-card="membership"] .facts { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px 14px; }
.company-page [data-card="membership"] .facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.company-page [data-card="membership"] .facts dt { white-space: nowrap; padding-top: 0; }
/* the address in two label/value columns, so the communication card stays close to the company card's height */
.company-page .facts--address { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 6px 10px; }
/* the mockup's value rows are 28px (its `.ifl` rows, gap 6px 10px, and `.ro-val`), so the read-only address fills its card as the
   editable one does */
.company-page .facts--address dt, .company-page .facts--address dd { display: flex; align-items: center; min-height: 28px; padding-top: 0; }
.company-page .facts--address dd { padding-left: 9px; }
/* the address in two columns at 1,279 px and below, so City, State and Country fit the half-width card of R20's 6 / 6 row
   (item 3599 R20; the design note section 4 item 8) */
@media (max-width: 1279px) { .company-page .facts--address { grid-template-columns: max-content minmax(0, 1fr); } }
.company-page .facts dd.ro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.company-page .ro-hint { font-size: 11px; color: var(--ink3); }
/* the mockup's Company name sits in a 28px value row inside its `.part` (padding 6px 8px 8px, 1px frame, value inset 9px); the
   name is read-only here, so the row is the same size and the card the same height */
.company-page .co-name { margin: 0 -8px; padding: 7px 18px 9px; min-height: 44px; display: flex; align-items: center; box-sizing: border-box; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.company-page .mono { font-family: var(--ov-mono); font-size: 12px; }
.company-page .muted { color: var(--ink3); }
.company-page .hint { font-size: 11.5px; color: var(--ink3); margin: 0 0 6px; }
.company-page .lnk { color: var(--accent); text-decoration: none; font-weight: 500; }
.company-page .lnk:hover { text-decoration: underline; }
.company-page .mem-owner { margin: 8px 0 0; font-size: 11.5px; color: var(--ink2); }
.company-page .mem-pick { margin-top: 0; }
.company-page .facts + .mem-pick, .company-page .mem-owner + .mem-pick { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line2); }

/* the membership chooser: each row a plain link that re-opens the Overview with ?membership= */
.company-page .pick-list { list-style: none; margin: 0; padding: 0; }
.company-page .pick-list li + li { border-top: 1px solid var(--line2); }
.company-page .pick-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; width: 100%; padding: 8px 6px; color: var(--ink); text-decoration: none; border-radius: 4px; }
.company-page .pick-ev:hover { background: var(--accent-bg); }
.company-page .pick-ev .nm { font-weight: 600; flex: 1; }

/* membership status: the mockup's colour beside the text, keyed by StatusId in MembershipInFocusCard (1 Current --ok,
   2 --stop, 3 Suspended --warn, 4 Pending --cool); all four tokens are declared in every tokens.css block */
.company-page .mt-current { color: var(--ok); }
.company-page .mt-terminated { color: var(--stop); }
.company-page .mt-suspended { color: var(--warn); }
.company-page .mt-pending { color: var(--cool); }

/* people: the two grids (item 3599 R10-R14, R23); the card's empty states, the fold's gap and the pill's gap */
.company-page .ppl-empty { margin: 0; }
.company-page .overview-grid-scroll + .inact, .company-page .ppl-empty + .inact { margin-top: 12px; }
.company-page .pill { margin-left: 8px; }
.company-page .pname { font-weight: 600; }
.company-page .pill { font-size: 10.5px; font-weight: 600; padding: 0 6px; border-radius: 9px; background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-line); }
.company-page .inact { margin-top: 6px; }
.company-page .inact > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink2); padding: 4px 0; list-style: none; display: flex; gap: 6px; align-items: center; }
.company-page .inact > summary::-webkit-details-marker { display: none; }
.company-page .inact > summary::before { content: "\25B8"; color: var(--ink3); font-size: 10px; transition: transform .12s; }
.company-page .inact[open] > summary::before { transform: rotate(90deg); }

/* item 3459: event in focus, registration panels, registration log, representatives grid and invoices */
.company-page .overview-registration { border-top: 1px solid var(--line); padding-block: 12px; min-width: 0; }
.company-page .overview-event-name { font-weight: 600; margin: 0 0 10px; }
/* the no-focus list's facts (EventSummaryGroup), kept as S2 drew them (item 3594 R20) */
.company-page .overview-registration-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; margin: 0 0 12px; }
.company-page .overview-registration-facts > div { min-width: 0; }
.company-page .overview-registration-facts dt { font-size: 12px; color: var(--ink2); }
.company-page .overview-registration-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.company-page .overview-grid-scroll { max-width: 100%; overflow-x: auto; min-width: 0; }
/* item 3599 LR5: no fixed minimum (item 3459's 520 px overflowed the span-9 card and cut off Due); the grid shrinks to its
   columns' MinWidth and scrolls in .overview-grid-scroll below that, as the other Overview grids do. */
.company-page .overview-invoice-grid { min-width: 0; }
.company-page .overview-log-warning { color: var(--ink2); }
/* item 3599 R5: Total Due 20 px mono in --stop with its hint (the 3599 mockup's .inv-total; M:1145-1148) and a Due above 0 in
   --stop (M:652). The mockup's var(--mono) is this file's --ov-mono. Late ruling LR5 moved Total Due out of the Invoices card's
   side column (.inv, .inv-aside, removed) into a Total Due card of its own (TotalDueCard), whose heading replaces the side
   column's .k label; the two cards stack at 1,000 px by the .ov one-column rule above, as every Overview card does. */
.company-page .inv-total { display: grid; gap: 2px; }
.company-page .inv-total .amt { font-family: var(--ov-mono); font-size: 20px; font-weight: 500; color: var(--stop); }
/* LR8: the New payment placeholder under the hint -- the footer bar's .dx-btn look (company.css scopes that to .actionbar), disabled. */
.company-page .inv-total .dx-btn { justify-self: start; margin-top: 8px; font: inherit; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 4px; border: 1px solid var(--dx-primary, var(--accent)); background: var(--dx-primary, var(--accent)); color: var(--dx-on-primary, var(--pane)); }
.company-page .inv-total .dx-btn:disabled { opacity: .45; cursor: not-allowed; }
.company-page .due-pos { color: var(--stop); }
.company-page .overview-event-choices { list-style: none; padding: 0; margin: 12px 0 0; }
.company-page .overview-event-choices li { display: flex; gap: 12px; flex-wrap: wrap; padding-block: 7px; }

/* ---- item 3594: the Event in focus card follows the approved mockup (spec R1-R20). Each block names its mockup rules. ---- */
/* registration status: colour + dot + text, the mockup's .rgs (M:518-522), keyed by StatusId in RegistrationStatusDot; an id
   RegistrationStatus does not define gets the neutral ink, as search.css's .registration-status--unknown does */
.company-page .rgs { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.company-page .rgs::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.company-page .rgs--registered { color: var(--reg-registered); }
.company-page .rgs--pending { color: var(--reg-pending); }
.company-page .rgs--cancelled { color: var(--reg-cancelled); }
.company-page .rgs--transferred { color: var(--reg-transferred); }
.company-page .rgs--qualified { color: var(--reg-qualified); }
.company-page .rgs--waiting { color: var(--reg-waiting); }
.company-page .rgs--unknown { color: var(--ink2); }
/* the two representatives tables' captions (R15), the mockup's .grp-h (M:785) */
.company-page .grp-h { font-size: 12px; font-weight: 600; margin: 0 0 6px; }
.company-page .overview-grid-scroll + .grp-h { margin-top: 12px; }
/* final review S3: the DevExpress theme gives every grid `min-width: var(--dxbl-grid-min-width)`, 240px in blazing-berry and
   blazing-dark 26.1.6, which is wider than the .overview-grid-scroll wrapper on a 390px phone (216px): the wrapper clipped the
   grid's right edge, Status Reason included, and scrolled as a second scroller. The plain property (not the internal --dxbl-*
   variable, which App.razor's theme note rules out) lets the grid be its wrapper's width; it still scrolls inside itself. The People grids (item 3599 R10-R14; PeopleRowsGrid takes the representatives' class) and the
   log and booths grids (item 3599 R17, .overview-grid) share the rule. */
.company-page .overview-representative-grid, .company-page .overview-grid { min-width: 0; }

/* the log and booths sections (item 3594 R4): a titled section (the mockup's .sub-h, M:810-812) over a DxGrid (item 3599 R17) */
.company-page .sub-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 26px; margin-bottom: 4px; }
.company-page .sub-h h3 { margin: 0; font-size: 12px; font-weight: 600; }
/* item 3599 R17, R18: the log is a DxGrid; its Log Entry cell keeps line breaks (as S2's log did) and clamps to three lines; a row opens the popup */
.company-page .overview-log-grid td { vertical-align: top; }
/* only a data row (DxGrid marks it data-visible-index) opens the popup, so the "No entries." cell (td.dxbl-grid-empty-data-area,
   in a row with no data-visible-index; measured in the rendered markup, DevExpress 26.1.6) keeps the default cursor */
.company-page .overview-log-grid tr[data-visible-index] > td { cursor: pointer; }
.company-page .overview-log-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }

/* a company registration's facts, label beside value (R79): one shaded bar per registration, the mockup's .reg-facts
   (M:790-794; R1). The no-focus list keeps .overview-registration-facts (R20). */
.company-page .reg-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 0 0 10px; padding: 6px 10px; background: var(--rail); border: 1px solid var(--line2); border-radius: 4px; }
.company-page .reg-facts > div { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 26px; }
.company-page .reg-facts dt { font-size: 11px; font-weight: 600; color: var(--ink3); white-space: nowrap; }
.company-page .reg-facts dd { margin: 0; font-size: 12.5px; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; }
.company-page .reg-facts .regtype { font-weight: 600; }
/* item 3599 R19: the Event in focus Total Due value in --stop, as legacy's on-site Total Due (onSiteCheckIn.html:1424-1425) */
.company-page .reg-facts .reg-due dd { color: var(--stop); }
/* P12's audit lines under the bar, above the representatives (R14) */
.company-page .overview-registration-audit { margin: 0 0 10px; }
.company-page .overview-registration-audit p { margin: 0; }
/* under the representatives: the log wide, the booths narrow, the mockup's .creg-sub (M:808-809; R3); one column under 1,000 px (R9) */
.company-page .creg-sub { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-top: 12px; align-items: start; }
@media (max-width: 1000px) { .company-page .creg-sub { grid-template-columns: minmax(0, 1fr); } }
/* P13's schedule-book line under the booths table, in the narrow column (R14) */
.company-page .overview-schedule-books { margin-top: 10px; }
.company-page .overview-schedule-books p { margin: 0; }

/* the one emphasised card (R8): the event is where the staff member works, the mockup's .blk.is-work (M:681-683) */
.company-page .blk.is-work { border-color: var(--accent-line); border-top: 3px solid var(--accent); box-shadow: 0 1px 2px var(--work-shadow), 0 8px 24px var(--work-shadow); }
.company-page .blk.is-work > .blk-h h2 { font-size: 15px; }
.company-page .blk.is-work > .blk-h .evname { font-size: 15px; font-weight: 600; color: var(--ink); }
/* the Read-only event tag (R17), the mockup's .ro-tag (M:770) */
.company-page .ro-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn); }
/* narrow screens (SD-3520 L2): the header wraps rather than widen the page, as .mem-h does at 640 px */
@media (max-width: 640px) { .company-page .blk.is-work > .blk-h { flex-wrap: wrap; } }

/* ---- item 3599 R18: the registration log entry popup (RegistrationLogEntryPopup). The file's one unscoped block: a DxPopup may
   be drawn outside .company-page (company.css's note on the cb-* dialogs), so these classes carry the unique lgp- prefix. The
   3599 mockup's .log-full; the tokens are declared on :root in all three tokens.css blocks. ---- */
.lgp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 10px; font-size: 12.5px; }
.lgp-facts dt { font-size: 11px; font-weight: 600; color: var(--ink3); }
.lgp-facts dd { margin: 0; }
/* the --ov-mono stack, which is declared on .company-page only */
.lgp-mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12px; }
.lgp-label { margin: 0 0 4px; font-size: 11px; font-weight: 600; color: var(--ink3); }
.lgp-text { margin: 0; padding: 8px 10px; max-height: min(50vh, 420px); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 12.5px; color: var(--ink); background: var(--row); border: 1px solid var(--line2); border-radius: 4px; }