:root,
html[data-theme="light"],
html[data-theme="byt-light"] {
--pui-color-text-primary: #0f172a;
--pui-color-text-strong: #0f172a;
--pui-color-text-secondary: #334155;
--pui-color-text-muted: #64748b;
--pui-color-text-disabled: #94a3b8;
--pui-color-text-inverse: #fffdf8;
--pui-color-text-on-accent: #ffffff;
--pui-color-surface-page: #ffffff;
--pui-color-surface-card: #ffffff;
--pui-color-surface-muted: #f8fafc;
--pui-color-surface-raised: #ffffff;
--pui-color-surface-strong: #f3f4f6;
--pui-color-surface-selected: #dbeafe;
--pui-color-surface-hover: #f1f5f9;
--pui-color-surface-disabled: #f1f5f9;
--pui-color-surface-control: #ffffff;
--pui-color-surface-overlay: #ffffff;
--pui-color-border-subtle: #e5e7eb;
--pui-color-border-default: #e2e8f0;
--pui-color-border-hover: #cbd5e1;
--pui-color-border-strong: #2563eb;
--pui-color-border-focus: #2563eb;
--pui-color-link: #2563eb;
--pui-color-link-hover: #1d4ed8;
--pui-color-action-primary: #2563eb;
--pui-color-action-primary-hover: #1d4ed8;
--pui-color-action-secondary: #334155;
--pui-color-action-secondary-hover: #0f172a;
--pui-color-action-ghost: transparent;
--pui-color-action-danger: #dc2626;
--pui-color-accent-soft: #dbeafe;
--pui-color-success: #16a34a;
--pui-color-success-strong: #166534;
--pui-color-success-soft: #dcfce7;
--pui-color-info: #0284c7;
--pui-color-info-strong: #0c4a6e;
--pui-color-info-soft: #e0f2fe;
--pui-color-warning: #facc15;
--pui-color-warning-strong: #854d0e;
--pui-color-warning-soft: #fef9c3;
--pui-color-tone-amber: #d97706;
--pui-color-danger: #dc2626;
--pui-color-danger-strong: #991b1b;
--pui-color-danger-soft: #fee2e2;
--pui-color-state-success: var(--pui-color-success);
--pui-color-state-warning: var(--pui-color-warning);
--pui-color-state-danger: var(--pui-color-danger);
--pui-color-state-info: var(--pui-color-info);
--pui-color-state-neutral: #64748b;
--pui-color-nav-background: #ffffff;
--pui-color-nav-border: #e2e8f0;
--pui-color-nav-text: #0f172a;
--pui-color-nav-text-active: #2563eb;
--pui-color-nav-hover-background: #f1f5f9;
--pui-color-form-background: #ffffff;
--pui-color-form-placeholder: #64748b;
--pui-color-card-background: #ffffff;
--pui-color-card-border: #e2e8f0;
--pui-color-card-selected-background: #dbeafe;
--pui-color-article-heading: #0f172a;
--pui-color-article-body: #334155;
--pui-color-article-metadata: #64748b;
--pui-color-article-divider: #e2e8f0;
--pui-color-article-toc-text: #475569;
--pui-color-logo-text-primary: #1f2937;
--pui-color-logo-text-secondary: #4f46e5;
--pui-color-logo-mark-background: #ffffff;
--pui-color-scrim: rgba(15, 23, 42, 0.48);
/* Popup contract, specification section 6.1. Every default below is the value the modal
shell hardcoded before it was made variable, so declaring them changes nothing anywhere.
A host overrides these in its own token stylesheet; the platform never asks who is
calling. Specification sections 3.5 and 4. */
--pui-modal-backdrop-background: rgba(12, 24, 20, 0.56);
--pui-modal-backdrop-filter: blur(8px);
--pui-modal-panel-surface: linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
--pui-modal-panel-border: 1px solid rgba(26, 58, 50, 0.12);
--pui-modal-panel-radius: 1.25rem;
--pui-modal-panel-elevation: 0 28px 72px rgba(15, 23, 42, 0.24);
--pui-modal-dismiss-colour: rgba(255, 255, 255, 0.98);
--pui-modal-dismiss-corner-colour: rgba(15, 23, 42, 0.62);
--pui-modal-dismiss-corner-inset: 0.75rem;
/* Added by Task 1.1, specification section 3.4 rule 1: proved by a migration rather than
predicted. EstateAgentLeadCapture is 56rem wide and 58rem tall where the shell is 78rem and
88vh, and its before-and-after comparison cannot converge without these. Both default to
the shell's own values, so no existing popup moves. */
--pui-modal-frame-width: min(92vw, 78rem);
--pui-modal-panel-max-height: 88vh;
/* Added by Task 1.2, specification section 3.4 rule 1. ShortlistComparePage aligns its panel
to the top of the viewport rather than the centre, and pads the shell more generously. Both
default to what the shell already did. */
--pui-modal-shell-align: center;
--pui-modal-shell-padding: clamp(0.75rem, 2vw, 1.5rem);
/* Drawer contract, Task 4.2, specification section 5.2. Defaults are the cookie consent
drawer's own values, which is the component this was extracted from. */
--pui-drawer-backdrop-background: rgba(15, 23, 42, 0.48);
--pui-drawer-backdrop-filter: none;
--pui-drawer-width: min(40vw, 620px);
--pui-drawer-surface: var(--pui-color-surface-card);
--pui-drawer-elevation: var(--pui-shadow-overlay);
--pui-drawer-padding: var(--pui-space-6);
--pui-drawer-justify: flex-end;
--pui-drawer-z: 2400;
/* Popover contract, Task 5.1, specification section 5.3. Defaults taken from the deflink
popover, the estate's only anchored surface that is not a MudBlazor menu. */
--pui-popover-surface: var(--pui-color-surface-card);
--pui-popover-border: 1px solid var(--pui-color-border-default);
--pui-popover-radius: 10px;
--pui-popover-elevation: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
--pui-popover-padding: 16px 18px 14px;
--pui-popover-min-width: 260px;
--pui-popover-max-width: 360px;
--pui-popover-z: 9000;
--pui-font-family-base: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--pui-font-size-heading-lg: 2rem;
--pui-font-size-heading-md: 1.5rem;
--pui-font-size-body-lg: 1.05rem;
--pui-font-size-body-md: 1rem;
--pui-font-size-body-sm: 0.95rem;
--pui-font-size-caption: 0.8rem;
--pui-line-height-tight: 1.2;
--pui-line-height-body: 1.5;
--pui-line-height-relaxed: 1.7;
--pui-font-weight-regular: 400;
--pui-font-weight-medium: 500;
--pui-font-weight-semibold: 600;
--pui-font-weight-bold: 700;
--pui-letter-spacing-tight: -0.01em;
--pui-letter-spacing-caps: 0.08em;
--pui-breakpoint-sm: 576px;
--pui-breakpoint-md: 768px;
--pui-breakpoint-lg: 1024px;
--pui-breakpoint-xl: 1280px;
--pui-z-floating-helper: 1150;
--pui-space-1: 0.125rem;
--pui-space-2: 0.25rem;
--pui-space-3: 0.5rem;
--pui-space-4: 0.75rem;
--pui-space-5: 1rem;
--pui-space-6: 1.5rem;
--pui-space-7: 2rem;
--pui-space-8: 2.5rem;
--pui-space-9: 3rem;
--pui-space-10: 4rem;
--pui-radius-sm: 0.375rem;
--pui-radius-md: 0.75rem;
--pui-radius-lg: 1rem;
--pui-shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.05);
--pui-shadow-soft: 0 1px 3px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.06);
--pui-shadow-raised: 0 2px 6px rgba(15, 23, 42, 0.06), 0 14px 32px rgba(15, 23, 42, 0.12);
--pui-shadow-overlay: 0 4px 12px rgba(15, 23, 42, 0.08), 0 20px 48px rgba(15, 23, 42, 0.16);
/* A menu dropped from the header: contact, near and ambient layers, so it lifts without the dark
band one heavy shadow leaves beneath it. */
--pui-shadow-menu: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -8px rgba(15, 23, 42, 0.12), 0 32px 64px -24px rgba(15, 23, 42, 0.22);
--pui-easing-standard: cubic-bezier(0.2, 0, 0, 1);
--pui-easing-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
--pui-easing-exit: cubic-bezier(0.4, 0, 1, 1);
--pui-motion-fast: 160ms var(--pui-easing-standard);
--pui-motion-medium: 240ms var(--pui-easing-standard);
--pui-motion-slow: 320ms var(--pui-easing-emphasized);
--pui-focus-width: 3px;
--pui-focus-color: #2563eb;
--pui-focus-color-rgb: 37, 99, 235;
--pui-focus-outline-color: rgba(var(--pui-focus-color-rgb), 0.35);
/* Two layers: a solid core that carries the contrast, and the soft halo outside it that keeps
the treatment restrained. The halo alone measured 1.32:1 against a light surface in Chromium
, below the 3:1 that WCAG 1.4.11 asks of a non-text indicator, and below what the design
rules mean by "focus treatment must be visible". The solid core is 5.03:1 on white. */
--pui-focus-ring:
0 0 0 1px var(--pui-focus-color),
0 0 0 var(--pui-focus-width) rgba(var(--pui-focus-color-rgb), 0.2);
--pui-disabled-opacity: 0.6;
--pui-touch-target-min: 2.75rem;
}
html[data-theme="dark"],
html[data-theme="byt-dark"] {
color-scheme: dark;
--pui-color-text-primary: #f8fbff;
--pui-color-text-strong: #f8fbff;
--pui-color-text-secondary: #d3deee;
--pui-color-text-muted: #9fb0c8;
--pui-color-text-disabled: #697895;
--pui-color-text-inverse: #07111f;
--pui-color-text-on-accent: #ffffff;
--pui-color-surface-page: #07111f;
--pui-color-surface-card: #0f1b2d;
--pui-color-surface-muted: #101d31;
--pui-color-surface-raised: #14243b;
--pui-color-surface-strong: #13243b;
--pui-color-surface-selected: #16345d;
--pui-color-surface-hover: #13243b;
--pui-color-surface-disabled: #0b1628;
--pui-color-surface-control: #101d31;
--pui-color-surface-overlay: #0b1628;
--pui-color-border-subtle: #1d2e47;
--pui-color-border-default: #2c3d57;
--pui-color-border-hover: #3d5273;
--pui-color-border-strong: #5b91ff;
--pui-color-border-focus: #85b6ff;
--pui-color-link: #8cb5ff;
--pui-color-link-hover: #b8d2ff;
--pui-color-action-primary: #4f8cff;
--pui-color-action-primary-hover: #8cb5ff;
--pui-color-action-secondary: #d3deee;
--pui-color-action-secondary-hover: #f8fbff;
--pui-color-action-ghost: transparent;
--pui-color-action-danger: #fb7185;
--pui-color-accent-soft: #17345a;
--pui-color-success: #22c55e;
--pui-color-success-strong: #7ee2a2;
--pui-color-success-soft: #123821;
--pui-color-info: #38bdf8;
--pui-color-info-strong: #93ddff;
--pui-color-info-soft: #10364a;
--pui-color-warning: #fbbf24;
--pui-color-warning-strong: #fde68a;
--pui-color-warning-soft: #3a2d0a;
--pui-color-tone-amber: #fbbf24;
--pui-color-danger: #fb7185;
--pui-color-danger-strong: #fecdd3;
--pui-color-danger-soft: #3d141d;
--pui-color-state-success: var(--pui-color-success);
--pui-color-state-warning: var(--pui-color-warning);
--pui-color-state-danger: var(--pui-color-danger);
--pui-color-state-info: var(--pui-color-info);
--pui-color-state-neutral: #9fb0c8;
--pui-color-nav-background: #0b1628;
--pui-color-nav-border: #24344d;
--pui-color-nav-text: #f8fbff;
--pui-color-nav-text-active: #8cb5ff;
--pui-color-nav-hover-background: #13243b;
--pui-color-form-background: #0f1b2d;
--pui-color-form-placeholder: #9fb0c8;
--pui-color-card-background: #0f1b2d;
--pui-color-card-border: #2c3d57;
--pui-color-card-selected-background: #16345d;
--pui-color-article-heading: #f8fbff;
--pui-color-article-body: #d3deee;
--pui-color-article-metadata: #9fb0c8;
--pui-color-article-divider: #2c3d57;
--pui-color-article-toc-text: #c4d0e3;
--pui-color-logo-text-primary: #f8fbff;
--pui-color-logo-text-secondary: #7fa7ff;
--pui-color-logo-mark-background: #101d31;
--pui-color-scrim: rgba(2, 6, 23, 0.62);
--pui-shadow-subtle: 0 1px 2px rgba(2, 6, 23, 0.32), 0 2px 8px rgba(2, 6, 23, 0.3);
--pui-shadow-soft: 0 1px 3px rgba(2, 6, 23, 0.36), 0 10px 30px rgba(2, 6, 23, 0.42);
--pui-shadow-raised: 0 2px 6px rgba(2, 6, 23, 0.4), 0 16px 40px rgba(2, 6, 23, 0.5);
--pui-shadow-overlay: 0 4px 12px rgba(2, 6, 23, 0.46), 0 22px 56px rgba(2, 6, 23, 0.62);
--pui-shadow-menu: 0 1px 2px rgba(2, 6, 23, 0.36), 0 12px 28px -8px rgba(2, 6, 23, 0.5), 0 32px 64px -24px rgba(2, 6, 23, 0.66);
--pui-focus-color: #85b6ff;
--pui-focus-color-rgb: 133, 182, 255;
--pui-focus-outline-color: rgba(var(--pui-focus-color-rgb), 0.42);
--pui-focus-ring:
0 0 0 1px var(--pui-focus-color),
0 0 0 var(--pui-focus-width) rgba(var(--pui-focus-color-rgb), 0.28);
--pui-disabled-opacity: 0.58;
}
html {
font-family: var(--pui-font-family-base);
}
@media (prefers-reduced-motion: reduce) {
:root {
--pui-motion-fast: 0ms linear;
--pui-motion-medium: 0ms linear;
--pui-motion-slow: 0ms linear;
}
}
/* ─── Component unavailable panel ─────────────────────────────────────────── */
.pui-component-unavailable {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.25rem 1.5rem;
border: 1px solid var(--pui-color-border-subtle, #e5e7eb);
border-left: 4px solid var(--pui-color-tone-amber, #d97706);
border-radius: 0.5rem;
background: var(--pui-color-surface-muted, #fffaf3);
color: var(--pui-color-text-strong, #1f2937);
}
.pui-component-unavailable__title {
margin: 0;
font-weight: 600;
font-size: 1rem;
}
.pui-component-unavailable__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.45;
}
.pui-component-unavailable__reference {
margin: 0;
font-size: 0.8125rem;
color: var(--pui-color-text-muted, #6b7280);
font-variant-numeric: tabular-nums;
}
.pui-component-unavailable__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.25rem;
}
.pui-component-unavailable__retry {
padding: 0.5rem 1rem;
border: 1px solid var(--pui-color-border-strong, #1f2937);
background: transparent;
color: var(--pui-color-text-strong, #1f2937);
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
}
.pui-component-unavailable__retry:hover {
background: var(--pui-color-surface-strong, #f3f4f6);
}
/* ==========================================================================
Platform anchored popover
THE THIRD SHARED COMPONENT. Specification section 5.3. A modal is centred and
a drawer is pinned to an edge; this one is positioned against the element that
opened it, which neither of the other two has any concept of.
NO BACKDROP, AND THAT IS THE DEFINING PROPERTY rather than an omission. The
page behind stays readable and clickable, because a definition or a menu is
something you consult while reading rather than something that replaces what
you were doing. Specification section 7 gives it a lighter behaviour contract
for the same reason: it closes on Escape and when focus leaves, and it does
not trap focus or lock scrolling.
POSITIONED BY ITS CALLER. Anchor maths depends on the trigger and the
viewport, so the caller sets `top` and `left` and this owns only the card.
Fixed rather than absolute, so those are viewport coordinates whatever the
card's ancestors are: an absolute card is placed against the nearest
positioned ancestor, and a shell's relative page container moved it off its
trigger by that container's offset. The script re-places it on scroll.
========================================================================== */
.pui-popover {
position: fixed;
z-index: var(--pui-popover-z);
min-width: var(--pui-popover-min-width);
max-width: var(--pui-popover-max-width);
padding: var(--pui-popover-padding);
background: var(--pui-popover-surface);
border: var(--pui-popover-border);
border-radius: var(--pui-popover-radius);
box-shadow: var(--pui-popover-elevation);
}
/* ==========================================================================
Platform drawer
THE SECOND SHARED COMPONENT, and deliberately not a variant of the modal.
Specification section 5.2. A modal is centred and sized to its content; a
drawer is pinned to a viewport edge and full height. Expressing one as the
other means a component with two layout modes wearing a single name.
EXTRACTED FROM PlatformCookieConsentDrawer rather than written beside it.
That component was already full height, backdropped and on --pui-* tokens;
only its parameters were cookie specific. Building a second drawer next to it
would have given the estate a fourth drawer shape, which is the problem this
work exists to end.
THE HOST KEEPS ITS OWN OPEN AND CLOSE. The cookie drawer renders conditionally
and the shortlist tray slides in with a transform while staying in the DOM.
Both are correct for their case, and neither is the box's business, so the
platform owns the box and the host owns the motion.
========================================================================== */
.pui-drawer__backdrop {
position: fixed;
inset: 0;
z-index: var(--pui-drawer-z);
background: var(--pui-drawer-backdrop-background);
backdrop-filter: var(--pui-drawer-backdrop-filter);
}
/* Does not take pointer events itself, so the page behind stays clickable where the drawer is
not. The backdrop above is what blocks it, and a host that wants no backdrop gets that for
free rather than having to fight a full-viewport shell. */
.pui-drawer__shell {
position: fixed;
inset: 0;
z-index: calc(var(--pui-drawer-z) + 1);
display: flex;
justify-content: var(--pui-drawer-justify);
pointer-events: none;
}
.pui-drawer {
pointer-events: auto;
width: var(--pui-drawer-width);
max-width: 100%;
height: 100vh;
padding: var(--pui-drawer-padding);
background: var(--pui-drawer-surface);
box-shadow: var(--pui-drawer-elevation);
overflow-y: auto;
}
/* ==========================================================================
Platform modal shell
ONE POPUP SYSTEM FOR THE ESTATE. These values are BeforeYouMove's component
map modal, lifted here unchanged so that everything which opens over the page
looks and behaves the same: a blurred backdrop, a plain "Close" sitting above
the panel on the left, and a panel with the same corner, border and shadow.
Lifted rather than reinvented because that modal was already built, reviewed
and liked. A second popup styled from scratch would be a second look to keep
in step, and they would drift the first time one of them was touched.
Used by Blazor components through PlatformModalShell, and by the content image
lightbox, which builds the same markup in script because sanitised content HTML
has no component to attach to.
========================================================================== */
.pui-modal__backdrop {
position: fixed;
inset: 0;
background: var(--pui-modal-backdrop-background);
backdrop-filter: var(--pui-modal-backdrop-filter);
z-index: 2500;
}
/* `hidden` loses to an explicit display, and these two set one. Without this the closed shell
still covers the viewport and swallows every click on the page behind it -- invisibly, which is
the worst way for it to fail. Found by driving it in a browser. */
.pui-modal__backdrop[hidden],
.pui-modal__shell[hidden] {
display: none;
}
.pui-modal__shell {
position: fixed;
inset: 0;
z-index: 2501;
display: grid;
/* Split from the `place-items: center` shorthand so alignment can vary while centring stays
fixed. A popup that sits at the top of a tall page is still horizontally centred. */
align-items: var(--pui-modal-shell-align);
justify-items: center;
padding: var(--pui-modal-shell-padding);
}
.pui-modal__frame {
width: var(--pui-modal-frame-width);
max-height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
/* Its own row above the panel, so the control never sits on top of the content
it is dismissing, which on a map or a photograph is where it disappears. */
.pui-modal__dismiss-row {
width: 100%;
display: flex;
align-items: center;
}
.pui-modal__dismiss {
padding: 0.15rem 0.25rem;
border: 0;
background: transparent;
color: var(--pui-modal-dismiss-colour);
font: inherit;
font-size: 0.92rem;
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
cursor: pointer;
}
.pui-modal__dismiss:hover {
color: #ffffff;
}
.pui-modal__dismiss:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.9);
outline-offset: 3px;
border-radius: 0.35rem;
}
/* The corner variant, specification section 6.3.
THE ESTATE HAS THREE CLOSE BUTTONS AND SECTION 3.3 FORBIDS CHANGING ANY OF THEM. The default
above is a plain "Close" above the panel on the left. Every MudBlazor dialog instead puts an
icon inside the panel's top-right corner, so the shell has to express that too or Phase 3
cannot migrate them without moving the control.
Done as a modifier rather than a custom property because position is structural: a variable can
change what a rule paints, not which box a control sits in. The markup is unchanged, so the
lightbox script and every Blazor host build the same DOM either way and only add a class.
The row leaves the flow, so the panel keeps the frame's full height rather than being pushed
down by a control that now sits on top of it. */
.pui-modal__frame--dismiss-corner {
position: relative;
}
.pui-modal__frame--dismiss-corner .pui-modal__dismiss-row {
position: absolute;
inset-block-start: var(--pui-modal-dismiss-corner-inset);
inset-inline-end: var(--pui-modal-dismiss-corner-inset);
width: auto;
justify-content: flex-end;
z-index: 1;
}
/* Inside the panel rather than over the backdrop, so it is read against the panel surface and
needs its own colour. A 44px target: the control is now an icon rather than a word, and an icon
sized to its glyph is the most common way a dismiss fails WCAG 2.5.8. */
.pui-modal__dismiss--icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding: 0;
color: var(--pui-modal-dismiss-corner-colour);
text-decoration: none;
line-height: 1;
}
.pui-modal__dismiss--icon:hover {
color: inherit;
}
.pui-modal__dismiss--icon:focus-visible {
outline: 3px solid var(--pui-focus-outline-color, currentColor);
outline-offset: 2px;
}
.pui-modal__panel {
width: 100%;
max-height: var(--pui-modal-panel-max-height);
display: flex;
flex-direction: column;
background: var(--pui-modal-panel-surface);
border: var(--pui-modal-panel-border);
border-radius: var(--pui-modal-panel-radius);
box-shadow: var(--pui-modal-panel-elevation);
overflow: hidden;
}
/* The image variant.
THE PANEL HAS A DEFINITE WIDTH, WHICH IS THE WHOLE POINT. It shrank to fit its
image at first, and that collapsed to nothing for any image without an intrinsic
size: the panel's width depended on the image and the image's width depended on
the panel. Article charts are SVGs written `