: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);
--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);
--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-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 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: rgba(12, 24, 20, 0.56);
backdrop-filter: blur(8px);
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;
place-items: center;
padding: clamp(0.75rem, 2vw, 1.5rem);
}
.pui-modal__frame {
width: min(92vw, 78rem);
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: rgba(255, 255, 255, 0.98);
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;
}
.pui-modal__panel {
width: 100%;
max-height: 88vh;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
border: 1px solid rgba(26, 58, 50, 0.12);
border-radius: 1.25rem;
box-shadow: 0 28px 72px rgba(15, 23, 42, 0.24);
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 `