/* Design tokens (Platform-Architecture.md §19.4c). Every page and shared component uses these; no page defines its own
   colors or sizes. StudioTheme maps the same values into MudBlazor (a UI test keeps them in step).
   Breakpoints (CSS variables can't be used in media queries): 560px phone, 760px tablet, 1100px desktop. */
:root {
    /* The cell layout map (#5): what each feature kind is drawn in */
    --lw-map-lore-land: #2f7d6d;   /* Lore World land inside a territory (#368): earmarked cells, reserves, corridors */
    --lw-map-blocked: #5f5f68;     /* a cell that never opens (founder 2026-10-08): wilderness in no ring */
    --lw-map-district: #ece6f8;
    --lw-map-terrain: #d3e2c0;
    --lw-map-water: #5b95d6;
    --lw-map-garden: #79b465;
    --lw-map-plaza: #ddd5c6;
    --lw-map-path: #6f6350;
    --lw-map-road: #f1c40f;        /* the world's roads on the Overworld (founder 2026-10-12): yellow, to stand out on any terrain */
    --lw-map-road-casing: #3a3426; /* the thin dark edge that keeps a road readable on sand, snow and grass */
    --lw-map-bridge: #877a62;
    --lw-map-road-bridge: #e0457b; /* a world road on a bridge on the Overworld: a strong pink, clearly not the road yellow, readable on water, sand, snow and grass */
    --lw-map-street: #fff3c4;      /* a town street inside a block layout: quieter than the road, thin, no casing */
    --lw-map-wall: #6d6873;
    --lw-map-plot: #d4af37;
    --lw-space-1: 4px;
    --lw-space-2: 8px;
    --lw-space-3: 12px;
    --lw-space-4: 16px;
    --lw-space-5: 24px;
    --lw-space-6: 32px;
    --lw-radius-sm: 4px;
    --lw-radius: 8px;
    --lw-radius-lg: 12px;
    --lw-font-size-sm: 0.82rem;
    --lw-font-size: 0.95rem;
    --lw-font-size-lg: 1.15rem;
    --lw-font-size-xl: 1.5rem;
    --lw-shadow: 0 1px 3px var(--lw-content-shadow);
    --lw-shadow-lg: 0 12px 32px var(--lw-content-shadow-lg);
    --lw-touch: 40px;
}

:root {
    --lw-brand-navy: #092a63;
    --lw-brand-text: #183b72;
    --lw-brand-blue: #0865e8;
    --lw-brand-violet: #7137d9;
    --lw-brand-muted: #607197;
    --lw-brand-panel: #fafafa;
    --lw-brand-border: #d8e5ff;
    --lw-brand-soft-violet: #fbf8ff;
    --lw-brand-violet-border: #e3d8fa;

    /* The header wordmark's gradient and glow, from the book logo's flame (founder, 2026-10-07). */
    --lw-brand-glow-blue: #6cc4ff;
    --lw-brand-glow-violet: #b77bff;
    --lw-brand-glow-pink: #ff62d8;

    /* One physical device pixel expressed in CSS pixels; overridden per display scale below. */
    --lw-px: 1px;
}

/* Studio theme: Wisteria (GitHub #213). Colour tokens are grouped by where they are used: FRAME (header, logo, nav),
   CONTENT (page, panels, text), CONTROLS (buttons, tabs, focus), STATUS (pills only) and ACCENT. A component takes colours
   only from its group; no component writes a literal colour. Dark mode redefines the same names: for System when the OS is
   dark (the media block), and always when the person chooses Dark on this device (data-theme="dark", from the lw-theme
   cookie). The two dark blocks are identical (CSS can't share one block between a media query and a selector); the ui check
   keeps them, the light block and StudioTheme's palettes in step. The map colours (--lw-map-*) are the same in both modes.
   Public pages (Portal, landing, legal) render data-theme="light" and keep the --lw-brand-* colours for now. */
:root {
    color-scheme: light dark;
    /* ---- FRAME: header, logo, nav ---- */
    --lw-frame-header-bg: radial-gradient(130px 60px at 74px 50%, #ffffff, rgb(255 255 255 / 0) 72%), linear-gradient(90deg, #ffffff 0, #ffffff min(220px, 20%), #e7dcfc 50%, #c8b3f3 100%);
    --lw-frame-header-fallback: #ece3fd;
    --lw-frame-header-text: #1a1b22;
    --lw-frame-header-border: #d9cbf7;
    --lw-frame-search-bg: #ffffff;
    --lw-frame-search-border: #d4c4f5;
    --lw-frame-search-text: #636575;
    --lw-frame-logo-glow: rgb(122 90 240 / 0.22);
    --lw-frame-wordmark: linear-gradient(90deg, #0b3fb8, #1e5fe8 40%, #7137d9 75%, #8a2fd0);
    --lw-frame-wordmark-fallback: #0b3fb8;
    --lw-frame-wordmark-depth: rgb(9 42 99 / 0.35);
    --lw-frame-wordmark-kind: #7b818d;
    --lw-frame-wordmark-kind-sheen: linear-gradient(180deg, #b9bec8, #7b818d 55%, #5d636e);
    --lw-frame-wordmark-kind-light: rgb(255 255 255 / 0.85);
    --lw-frame-nav-bg: linear-gradient(180deg, #eee5fc 0%, #f3ecfd 100%);
    --lw-frame-nav-fallback: #f1e9fc;
    --lw-frame-nav-text: #1a1b22;
    --lw-frame-nav-label: #6b6880;
    --lw-frame-nav-border: #e4daf7;
    --lw-frame-nav-hover-bg: #e7dcfb;
    --lw-frame-nav-selected-bg: #ddd0f8;
    --lw-frame-nav-selected-text: #3e2499;
    --lw-frame-nav-marker: #6648dc;
    --lw-frame-avatar-bg: #4b30bf;
    --lw-frame-avatar-text: #ffffff;
    --lw-frame-browser: #faf7ff;

    /* ---- CONTENT: page, panels, text ---- */
    --lw-content-page-bg: #fbfaff;
    --lw-content-surface: #ffffff;
    --lw-content-surface-muted: #f7f4fd;
    --lw-content-border: #e8e3f6;
    --lw-content-border-strong: #d3c9ec;
    --lw-content-divider: #efeaf8;
    --lw-content-selected-bg: #f0ebfd;
    --lw-content-text: #1a1b22;
    --lw-content-text-muted: #636575;
    --lw-content-item-name: #2a2350;
    --lw-content-link: #4b30bf;
    --lw-content-shadow: rgb(26 27 34 / 0.12);
    --lw-content-shadow-lg: rgb(26 27 34 / 0.22);

    /* ---- CONTROLS: buttons, tabs, focus ---- */
    --lw-control-primary-bg: #4b30bf;
    --lw-control-primary-text: #ffffff;
    --lw-control-primary-ring: rgb(75 48 191 / 0.14);
    --lw-control-secondary-bg: #ffffff;
    --lw-control-secondary-text: #3e2499;
    --lw-control-secondary-border: #d9cdf6;
    --lw-control-command-bg: transparent;
    --lw-control-command-icon: #2e2459;
    --lw-control-command-border: #e4daf7;
    --lw-control-destructive: #b0243f;
    --lw-control-destructive-border: #eec2cf;
    --lw-control-destructive-text-on-fill: #ffffff;
    --lw-control-tab-selected: #4b30bf;
    --lw-control-focus: #6648dc;

    /* ---- STATUS: pills only ---- */
    --lw-status-done: #11733a;
    --lw-status-done-bg: #e3f4e8;
    --lw-status-pending: #975800;
    --lw-status-pending-bg: #fff1da;
    --lw-status-error: #b0243f;
    --lw-status-error-bg: #fce8ee;
    --lw-status-ai: #4b30bf;
    --lw-status-ai-bg: #efeafe;
    --lw-status-ai-border: #ddd3fb;

    /* ---- ACCENT ---- */
    --lw-accent-featured: #6648dc;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        /* ---- FRAME ---- */
        --lw-frame-header-bg: radial-gradient(140px 70px at 74px 50%, rgb(170 150 255 / 0.45), rgb(170 150 255 / 0) 72%), linear-gradient(90deg, #221c4c 0%, #2b2160 60%, #3a2470 100%);
        --lw-frame-header-fallback: #2b2160;
        --lw-frame-header-text: #f2f4fb;
        --lw-frame-header-border: rgb(255 255 255 / 0.08);
        --lw-frame-search-bg: rgb(255 255 255 / 0.10);
        --lw-frame-search-border: rgb(255 255 255 / 0.16);
        --lw-frame-search-text: rgb(242 244 251 / 0.70);
        --lw-frame-logo-glow: rgb(200 185 255 / 0.85);
        --lw-frame-wordmark: linear-gradient(90deg, #6cc4ff, #4f8dff 40%, #b77bff 75%, #c48bff);
        --lw-frame-wordmark-fallback: #8fb8ff;
        --lw-frame-wordmark-depth: rgb(0 0 0 / 0.45);
        --lw-frame-wordmark-kind: #c3c8d2;
        --lw-frame-wordmark-kind-sheen: linear-gradient(180deg, #f1f3f7, #b8bec9 55%, #8d94a1);
        --lw-frame-wordmark-kind-light: rgb(255 255 255 / 0.25);
        --lw-frame-nav-bg: #1b1442;
        --lw-frame-nav-fallback: #1b1442;
        --lw-frame-nav-text: #e4e2da;
        --lw-frame-nav-label: #9a95b0;
        --lw-frame-nav-border: rgb(255 255 255 / 0.06);
        --lw-frame-nav-hover-bg: #261d58;
        --lw-frame-nav-selected-bg: #332572;
        --lw-frame-nav-selected-text: #ffffff;
        --lw-frame-nav-marker: #b9a6ff;
        --lw-frame-avatar-bg: #a78bfa;
        --lw-frame-avatar-text: #1a1236;
        --lw-frame-browser: #2b2160;

        /* ---- CONTENT ---- */
        --lw-content-page-bg: #120f2a;
        --lw-content-surface: #1a1638;
        --lw-content-surface-muted: #201b45;
        --lw-content-border: #2f285e;
        --lw-content-border-strong: #463d7a;
        --lw-content-divider: #262050;
        --lw-content-selected-bg: #2a2160;
        --lw-content-text: #eceae3;
        --lw-content-text-muted: #a3a0b2;
        --lw-content-item-name: #ede8fb;
        --lw-content-link: #b9a6ff;
        --lw-content-shadow: rgb(0 0 0 / 0.45);
        --lw-content-shadow-lg: rgb(0 0 0 / 0.6);

        /* ---- CONTROLS ---- */
        --lw-control-primary-bg: #a78bfa;
        --lw-control-primary-text: #1a1236;
        --lw-control-primary-ring: rgb(167 139 250 / 0.35);
        --lw-control-secondary-bg: transparent;
        --lw-control-secondary-text: #c9bcff;
        --lw-control-secondary-border: #4a3f8c;
        --lw-control-command-bg: transparent;
        --lw-control-command-icon: #e4e2da;
        --lw-control-command-border: #3a3270;
        --lw-control-destructive: #f47c93;
        --lw-control-destructive-border: #6b2a42;
        --lw-control-destructive-text-on-fill: #1a1236;
        --lw-control-tab-selected: #b9a6ff;
        --lw-control-focus: #b9a6ff;

        /* ---- STATUS ---- */
        --lw-status-done: #5fd38a;
        --lw-status-done-bg: #163524;
        --lw-status-pending: #f0b45a;
        --lw-status-pending-bg: #3a2a10;
        --lw-status-error: #f47c93;
        --lw-status-error-bg: #3e1426;
        --lw-status-ai: #c9bcff;
        --lw-status-ai-bg: #241d4d;
        --lw-status-ai-border: #3d3280;

        /* ---- ACCENT ---- */
        --lw-accent-featured: #b9a6ff;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    /* ---- FRAME ---- */
    --lw-frame-header-bg: radial-gradient(140px 70px at 74px 50%, rgb(170 150 255 / 0.45), rgb(170 150 255 / 0) 72%), linear-gradient(90deg, #221c4c 0%, #2b2160 60%, #3a2470 100%);
    --lw-frame-header-fallback: #2b2160;
    --lw-frame-header-text: #f2f4fb;
    --lw-frame-header-border: rgb(255 255 255 / 0.08);
    --lw-frame-search-bg: rgb(255 255 255 / 0.10);
    --lw-frame-search-border: rgb(255 255 255 / 0.16);
    --lw-frame-search-text: rgb(242 244 251 / 0.70);
    --lw-frame-logo-glow: rgb(200 185 255 / 0.85);
    --lw-frame-wordmark: linear-gradient(90deg, #6cc4ff, #4f8dff 40%, #b77bff 75%, #c48bff);
    --lw-frame-wordmark-fallback: #8fb8ff;
    --lw-frame-wordmark-depth: rgb(0 0 0 / 0.45);
    --lw-frame-wordmark-kind: #c3c8d2;
    --lw-frame-wordmark-kind-sheen: linear-gradient(180deg, #f1f3f7, #b8bec9 55%, #8d94a1);
    --lw-frame-wordmark-kind-light: rgb(255 255 255 / 0.25);
    --lw-frame-nav-bg: #1b1442;
    --lw-frame-nav-fallback: #1b1442;
    --lw-frame-nav-text: #e4e2da;
    --lw-frame-nav-label: #9a95b0;
    --lw-frame-nav-border: rgb(255 255 255 / 0.06);
    --lw-frame-nav-hover-bg: #261d58;
    --lw-frame-nav-selected-bg: #332572;
    --lw-frame-nav-selected-text: #ffffff;
    --lw-frame-nav-marker: #b9a6ff;
    --lw-frame-avatar-bg: #a78bfa;
    --lw-frame-avatar-text: #1a1236;
    --lw-frame-browser: #2b2160;

    /* ---- CONTENT ---- */
    --lw-content-page-bg: #120f2a;
    --lw-content-surface: #1a1638;
    --lw-content-surface-muted: #201b45;
    --lw-content-border: #2f285e;
    --lw-content-border-strong: #463d7a;
    --lw-content-divider: #262050;
    --lw-content-selected-bg: #2a2160;
    --lw-content-text: #eceae3;
    --lw-content-text-muted: #a3a0b2;
    --lw-content-item-name: #ede8fb;
    --lw-content-link: #b9a6ff;
    --lw-content-shadow: rgb(0 0 0 / 0.45);
    --lw-content-shadow-lg: rgb(0 0 0 / 0.6);

    /* ---- CONTROLS ---- */
    --lw-control-primary-bg: #a78bfa;
    --lw-control-primary-text: #1a1236;
    --lw-control-primary-ring: rgb(167 139 250 / 0.35);
    --lw-control-secondary-bg: transparent;
    --lw-control-secondary-text: #c9bcff;
    --lw-control-secondary-border: #4a3f8c;
    --lw-control-command-bg: transparent;
    --lw-control-command-icon: #e4e2da;
    --lw-control-command-border: #3a3270;
    --lw-control-destructive: #f47c93;
    --lw-control-destructive-border: #6b2a42;
    --lw-control-destructive-text-on-fill: #1a1236;
    --lw-control-tab-selected: #b9a6ff;
    --lw-control-focus: #b9a6ff;

    /* ---- STATUS ---- */
    --lw-status-done: #5fd38a;
    --lw-status-done-bg: #163524;
    --lw-status-pending: #f0b45a;
    --lw-status-pending-bg: #3a2a10;
    --lw-status-error: #f47c93;
    --lw-status-error-bg: #3e1426;
    --lw-status-ai: #c9bcff;
    --lw-status-ai-bg: #241d4d;
    --lw-status-ai-border: #3d3280;

    /* ---- ACCENT ---- */
    --lw-accent-featured: #b9a6ff;
}

:root[data-theme="light"] {
    color-scheme: light;
}

@media (min-resolution: 1.13dppx) and (max-resolution: 1.32dppx) {
    :root { --lw-px: calc(1px / 1.25); }
}

@media (min-resolution: 1.33dppx) and (max-resolution: 1.44dppx) {
    :root { --lw-px: calc(1px / 1.4); }
}

@media (min-resolution: 1.45dppx) and (max-resolution: 1.62dppx) {
    :root { --lw-px: calc(1px / 1.5); }
}

@media (min-resolution: 1.63dppx) and (max-resolution: 1.87dppx) {
    :root { --lw-px: calc(1px / 1.75); }
}

@media (min-resolution: 1.88dppx) and (max-resolution: 2.4dppx) {
    :root { --lw-px: calc(1px / 2); }
}

@media (min-resolution: 2.41dppx) {
    :root { --lw-px: calc(1px / 3); }
}

html, body {
    font-family: 'Segoe UI', Arial, sans-serif;
}

.mud-appbar.lore-appbar {
    box-sizing: border-box;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.mud-appbar.lore-appbar > .mud-toolbar {
    box-sizing: border-box;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    align-items: center;
    padding-left: 4px;
}

/* A narrow bar: the bell and account sit closer together, and the right edge tightens, so the avatar stays on
   screen (founder, 2026-10-07). */
@media (max-width: 760px) {
    .mud-appbar.lore-appbar > .mud-toolbar { padding-right: 6px; }
    .lore-appbar .mud-icon-button { padding: 6px; }
    .mud-appbar.lore-appbar .lw-bell { width: 34px; }
}

/* A phone bar (GitHub 404): the search button's gap closes and the spacers stop growing, so the Lore picker takes the
   free width and keeps room for a name. */
@media (max-width: 560px) {
    .mud-appbar.lore-appbar > .mud-toolbar > .flex-grow-1 { flex-grow: 0 !important; }
    .mud-appbar.lore-appbar .lore-search-button { margin: 0 2px; }
}

/* The Studio frame (#213): the header over its solid fallback, then its wash; ink lettering in light mode, bright in dark. */
.mud-appbar.lore-appbar {
    border-bottom: 1px solid var(--lw-frame-header-border);
    color: var(--lw-frame-header-text);
    background: var(--lw-frame-header-fallback);
    background: var(--lw-frame-header-bg), var(--lw-frame-header-fallback);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.lore-global-search .mud-input-outlined {
    background-color: var(--lw-frame-search-bg);
}

.lore-global-search .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--lw-frame-search-border);
}

.lore-global-search input.mud-input-root {
    color: var(--lw-frame-header-text) !important;
}

.lore-global-search input.mud-input-root::placeholder {
    color: var(--lw-frame-search-text) !important;
    opacity: 1;
}

.lore-global-search .mud-input-adornment .mud-icon-root {
    color: var(--lw-frame-search-text);
}

html, body {
    color: var(--lw-content-text);
    background: var(--lw-content-page-bg);
    -webkit-tap-highlight-color: transparent;
    scrollbar-color: var(--lw-content-border-strong) transparent;
}

/* A tap is a tap (tester, 2026-10-15): no double-tap zoom on controls, so Safari fires each click at once and a quick
   second tap isn't read as a zoom gesture. Pinch zoom still works. tap-guard.js drops the accidental second tap. */
a, button, [role=tab], [role=button], label, summary, select, input, textarea, [contenteditable] {
    touch-action: manipulation;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 6px; background: var(--lw-content-border-strong) padding-box; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
    outline: 2px solid var(--lw-control-focus);
    outline-offset: 2px;
}

.agreement-view-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--lw-content-border);
}

.agreement-view-tabs a {
    padding: 9px 2px;
    border-bottom: 3px solid transparent;
    color: var(--lw-content-text-muted);
    font-weight: 600;
    text-decoration: none;
}

.agreement-view-tabs a:hover,
.agreement-view-tabs a:focus-visible {
    color: var(--lw-content-text);
}

.agreement-view-tabs a.active {
    border-bottom-color: var(--lw-control-tab-selected);
    color: var(--lw-control-tab-selected);
}

a, .btn-link {
    color: var(--lw-content-link);
}

.btn-primary {
    color: var(--lw-control-primary-text);
    background-color: var(--lw-control-primary-bg);
    border-color: var(--lw-control-primary-bg);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem var(--lw-control-primary-ring);
}

/* Motion off when the person asks for less (drawer slide, hover fades). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Windows high contrast: buttons, pills and the selected nav item keep a border, so nothing shows by colour alone. */
@media (forced-colors: active) {
    button, .lw-status, .area-link.active { border: 1px solid CanvasText; }
}

/* Touch screens: tap targets at least 44px. */
@media (pointer: coarse) {
    :root { --lw-touch: 44px; }
    .lw-command, .mud-icon-button, .lore-nav-toggle, .lore-search-button { min-width: 44px; min-height: 44px; }
    .mud-button { min-height: var(--lw-touch); }
    select { min-height: var(--lw-touch); }
    summary { display: flex; align-items: center; min-height: var(--lw-touch); }
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--lw-status-done);
}

.invalid {
    outline: 1px solid var(--lw-status-error);
}

.validation-message {
    color: var(--lw-status-error);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--lw-content-border-strong);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.legal-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 34px 28px 72px;
    color: var(--lw-brand-text);
    font: 1rem/1.72 Inter, sans-serif;
}

.legal-header {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--lw-brand-border);
}

.legal-brand {
    display: inline-flex;
    align-items: center;
    margin-bottom: 32px;
}

.legal-brand img {
    width: 190px;
    height: auto;
}

.legal-eyebrow {
    margin: 0 0 10px;
    color: var(--lw-brand-blue);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.legal-page h1,
.legal-page h2,
.legal-page h3 {
    color: var(--lw-brand-navy);
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 0;
}

.legal-page h1 {
    margin: 0 0 12px;
    font-size: 3.25rem;
    line-height: 1;
    font-weight: 600;
}

.legal-summary {
    max-width: 720px;
    margin: 0;
}

.legal-effective-date {
    margin: 14px 0 0;
    color: var(--lw-brand-muted);
    font-size: .9rem;
    font-weight: 600;
}

.legal-toc {
    margin: 30px 0 44px;
    padding: 22px 24px;
    border-left: 3px solid var(--lw-brand-blue);
    background: #f7f9fd;
}

.legal-toc h2 {
    margin: 0 0 12px;
    font-size: 1.45rem;
}

.legal-toc ol {
    columns: 2;
    column-gap: 38px;
    margin: 0;
    padding-left: 22px;
}

.legal-toc li {
    break-inside: avoid;
    margin: 5px 0;
}

/* Touch targets (coarse pointer): each contents link is a 44px row. */
@media (pointer: coarse) {
    .legal-toc li { margin: 0; }
    .legal-toc a {
        display: inline-flex;
        align-items: center;
        min-height: var(--lw-touch);
    }
}

.legal-page a {
    color: #075dbf;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.legal-section {
    scroll-margin-top: 24px;
    margin-top: 38px;
}

.legal-section h2 {
    margin: 0 0 12px;
    font-size: 1.9rem;
    line-height: 1.15;
}

.legal-section h3 {
    margin: 24px 0 8px;
    font-size: 1.3rem;
    line-height: 1.2;
}

.legal-section p,
.legal-section ul {
    margin: 0 0 14px;
}

.legal-section li {
    margin: 5px 0;
}

.legal-callout {
    margin: 24px 0;
    padding: 18px 20px;
    border: 1px solid var(--lw-brand-border);
    border-left: 4px solid var(--lw-brand-violet);
    background: var(--lw-brand-soft-violet);
}

.legal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px 28px;
    margin-top: 54px;
    padding-top: 22px;
    border-top: 1px solid var(--lw-brand-border);
    color: var(--lw-brand-muted);
    font-size: .86rem;
}

.legal-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.legal-return {
    margin: 46px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--lw-brand-border);
    font-weight: 600;
}

@media (max-width: 560px) {
    .legal-page { padding: 24px 18px 52px; }
    .legal-brand { margin-bottom: 24px; }
    .legal-brand img { width: 165px; }
    .legal-page h1 { font-size: 2.5rem; }
    .legal-toc { padding: 18px 20px; }
    .legal-toc ol { columns: 1; }
    .legal-section h2 { font-size: 1.65rem; }
}
/* Phones: data tables scroll horizontally rather than squeezing columns. */
@media (max-width: 760px) {
  .styled-table,
  .ideas-table:not(.split) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  .mud-dialog {
    margin: 8px;
    max-width: calc(100vw - 16px);
  }
}

/* No page is wider than the screen (founder, 2026-10-05; GitHub #161). A long word, key or code token wraps instead of
   stretching its column, and form controls and media stay inside their box; a wide data table scrolls inside itself.
   Grid tracks use minmax(0, 1fr) so they can shrink (the ui check enforces it). */
.workspace-content {
    overflow-wrap: anywhere;
}

.workspace-content :where(input, select, textarea, img, video, iframe, canvas, table) {
    max-width: 100%;
}

.workspace-content :where(code, kbd, samp) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Text utilities for markup passed into shared components (scoped page CSS can't reach it). */
.lw-sub {
    color: var(--lw-content-text-muted);
    font-size: var(--lw-font-size-sm);
}

/* A table cell's second line (name above key, lore above release) joins the first when the column has room and drops
   below it only when it doesn't. */
.lw-table td > .lw-sub {
    display: inline;
    margin-inline-start: var(--lw-space-2, 0.5rem);
}

.lw-mono {
    font-family: Consolas, 'Cascadia Mono', monospace;
    font-size: var(--lw-font-size-sm);
    word-break: break-all;
}

/* A catalog key (CLOSE_CONTRACT) stays on one line; its column fits it. */
.lw-mono.lw-key {
    word-break: normal;
    white-space: nowrap;
}

/* A checkbox with its label, in lists inside forms. */
.lw-check {
    display: flex;
    align-items: center;
    gap: var(--lw-space-2);
    min-height: var(--lw-touch);
}

/* Under touch the box itself grows too (the whole label row already takes the tap). */
@media (pointer: coarse) {
    .lw-check > input[type=checkbox],
    .lw-check > input[type=radio] {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        margin: 0;
    }
}

/* Rule logic blocks (Platform-Architecture.md §18.17), shared by ConditionEditor, ConditionNode and EffectList. Global,
   because the blocks nest inside one another across component boundaries. */
.logic-empty,
.logic-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lw-space-2);
}

.logic-bar {
    margin-bottom: var(--lw-space-2);
}

.logic-bar select {
    min-width: 14rem;
    min-height: var(--lw-touch);
}

.logic-group {
    padding: var(--lw-space-2) var(--lw-space-3);
    border: 1px dashed var(--lw-content-border-strong);
    border-radius: var(--lw-radius);
}

.logic-group > .logic-group,
.logic-group > .logic-leaf {
    margin-top: var(--lw-space-2);
}

.logic-leaf,
.logic-effect {
    padding: var(--lw-space-2) var(--lw-space-3) var(--lw-space-3);
    border-left: 3px solid var(--lw-status-ai);
    border-radius: var(--lw-radius-sm);
    background: var(--lw-content-surface-muted);
}

.logic-leaf.negated {
    border-left-color: var(--lw-status-pending);
}

.logic-effect {
    margin-bottom: var(--lw-space-2);
    border-left-color: var(--lw-status-done);
}

.logic-effects {
    display: grid;
    gap: var(--lw-space-1);
}

/* Rendered Markdown (Blueprint, Guide, ideas). Global because the HTML is injected as a MarkupString, which Blazor's
   scoped CSS never matches. Compact rhythm: headings sit close to their text, paragraphs and lists have small gaps. */
.lw-markdown {
    color: var(--lw-content-text);
    font-size: var(--lw-font-size);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.lw-markdown > :first-child {
    margin-top: 0;
}

.lw-markdown h1,
.lw-markdown h2,
.lw-markdown h3,
.lw-markdown h4 {
    margin: var(--lw-space-5) 0 var(--lw-space-2);
    color: var(--lw-content-text);
    line-height: 1.25;
}

.lw-markdown h1 { font-size: var(--lw-font-size-xl); }
.lw-markdown h2 { font-size: var(--lw-font-size-lg); }
.lw-markdown h3,
.lw-markdown h4 { font-size: var(--lw-font-size); }

.lw-markdown p {
    margin: 0 0 var(--lw-space-3);
}

.lw-markdown ul,
.lw-markdown ol {
    margin: 0 0 var(--lw-space-3);
    padding-inline-start: var(--lw-space-5);
}

.lw-markdown li + li {
    margin-top: var(--lw-space-1);
}

.lw-markdown li > p {
    margin: 0;
}

.lw-markdown table:not(.grid) {
    width: 100%;
    margin: var(--lw-space-2) 0 var(--lw-space-4);
    border: 1px solid var(--lw-content-border);
    border-collapse: collapse;
}

.lw-markdown table:not(.grid) th,
.lw-markdown table:not(.grid) td {
    padding: var(--lw-space-1) var(--lw-space-3);
    border: 1px solid var(--lw-content-border);
    text-align: left;
    vertical-align: top;
}

.lw-markdown table:not(.grid) th {
    background: var(--lw-content-surface-muted);
    font-weight: 600;
}

.lw-markdown code {
    padding: 0 var(--lw-space-1);
    border-radius: var(--lw-radius-sm);
    background: var(--lw-content-surface-muted);
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 0.9em;
}

.lw-markdown pre {
    padding: var(--lw-space-3);
    border-radius: var(--lw-radius-sm);
    background: var(--lw-content-surface-muted);
    overflow-x: auto;
}

.lw-markdown pre code {
    padding: 0;
    background: none;
}

.lw-markdown blockquote {
    margin: 0 0 var(--lw-space-3);
    padding: var(--lw-space-1) var(--lw-space-3);
    border-left: 3px solid var(--lw-control-primary-bg);
    color: var(--lw-content-text-muted);
}

/* The public player site (home, waitlist, player portal): a night scene with mist cards and a parchment notice. */
:root {
    --lw-scene-night: #0e1634;
    --lw-scene-night-violet: #161e4a;
    --lw-scene-mist: #e9eef8;
    --lw-scene-on-dark: #ffffff;
    --lw-scene-shadow: #000000;
    --lw-scene-action: #1f5f8b;
    --lw-scene-scrollbar: #5f86b5;
    --lw-scene-icon: #dfe7ff;
    --lw-scene-link: #b9d4ff;
    --lw-scene-glow: #a0b4ff;
    --lw-scene-glow-soft: #dce4ff;
    --lw-scene-teal: #28787d;
    --lw-scene-teal-deep: #16505c;
    --lw-scene-teal-edge: #8ce6dc;
    --lw-scene-parchment: #f3e7c9;
    --lw-scene-parchment-edge: #c9b27c;
    --lw-scene-ink: #3a2c18;
    --lw-parchment: #f7efdc;
    --lw-parchment-deep: #ecdfc0;
    --lw-parchment-edge: #785a28;
    --lw-parchment-ink: #3a2c1a;
    --lw-parchment-heading: #2a1f12;
    --lw-parchment-muted: #5a4630;
    --lw-parchment-seal: #8a3b2a;
    --lw-parchment-seal-deep: #6b2c1f;
}

/* Phones (GitHub #195): Safari zooms into any form control under 16px when it's focused, so on touch screens every
   input, textarea and select is at least 16px, whatever a component sets; the page keeps clear of the notch and the
   home bar. */
@media (pointer: coarse) {
    input,
    textarea,
    select {
        font-size: max(16px, 1em) !important;
    }
}

@supports (padding: env(safe-area-inset-left)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* The top bar's search (a MudBlazor field, so its rules live here): it shrinks as the bar narrows and stays at every
   width; on a phone it keeps at least its icon. */
.lore-global-search {
    flex: 0 1 520px;
    min-width: 200px;
}

@media (max-width: 1100px) {
    .lore-global-search {
        min-width: 160px;
    }
}

/* The search is the Lore picker's height beside it: 36px, and 44px under touch. */
.lore-global-search .mud-input-control-input-container,
.lore-global-search .mud-input-outlined { height: 36px; }
.lore-global-search input.mud-input-root { padding-top: 0; padding-bottom: 0; height: 100%; }
@media (pointer: coarse) {
    .lore-global-search .mud-input-control-input-container,
    .lore-global-search .mud-input-outlined { height: var(--lw-touch); }
}

/* Where the bar is narrow the search is a rounded-square button (founder, 2026-10-07); it opens the field across the bar,
   over the other controls, until the field loses focus. */
.lore-search-button {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 4px;
    border: 1px solid var(--lw-content-border-strong);
    border-radius: var(--lw-radius);
    color: var(--lw-control-secondary-text);
    background: var(--lw-content-selected-bg);
    cursor: pointer;
}

@media (max-width: 760px) {
    .mud-appbar.lore-appbar > .mud-toolbar { position: relative; }
    .lore-search-button { display: inline-flex; }
    .lore-global-search { display: none !important; }
    .lore-global-search.open {
        position: absolute !important;
        z-index: 5;
        inset: 8px 8px auto 8px;
        display: flex !important;
        min-width: 0;
        margin: 0 !important;
    }
}

/* The cell layout drawing (#5, #386): layout-render.mjs markup, in the layout editor and on Map › Overworld. */
.ll-drawing .ll-cell { fill: var(--lw-content-surface); stroke: none; }
.ll-drawing .ll-lore-land { fill: var(--lw-map-lore-land); fill-opacity: 0.12; }
.ll-drawing .ll-district { fill: var(--lw-map-district); fill-opacity: 0.6; stroke: var(--lw-control-primary-bg); stroke-width: 1; stroke-dasharray: 6 4; }
.ll-drawing .ll-terrain { fill: var(--lw-map-terrain); fill-opacity: 0.5; }
.ll-drawing .ll-water { fill: var(--lw-map-water); }
.ll-drawing path.ll-water[fill="none"] { fill: none; stroke: var(--lw-map-water); }
.ll-drawing .ll-garden { fill: var(--lw-map-garden); }
.ll-drawing .ll-plaza { fill: var(--lw-map-plaza); }
.ll-drawing .ll-foundation { fill: var(--lw-content-border-strong); }
.ll-drawing path.ll-path, .ll-drawing path.ll-bridge, .ll-drawing path.ll-wall, .ll-drawing path.ll-garden[fill="none"], .ll-drawing path.ll-plaza[fill="none"] { fill: none; }
.ll-drawing path.ll-path { stroke: var(--lw-map-path); }
.ll-drawing path.ll-bridge { stroke: var(--lw-map-bridge); }
.ll-drawing path.ll-wall { stroke: var(--lw-map-wall); }
.ll-drawing rect.ll-path, .ll-drawing circle.ll-path { fill: var(--lw-map-path); }
.ll-drawing rect.ll-wall, .ll-drawing circle.ll-wall { fill: var(--lw-map-wall); }
.ll-drawing .ll-dashed { stroke-dasharray: 8 6; }
.ll-drawing .ll-plot { fill: color-mix(in srgb, var(--lw-map-plot) 28%, var(--lw-content-surface)); fill-opacity: 1; stroke: var(--lw-map-plot); stroke-width: 1.5; }
.ll-drawing .ll-plot-built { fill: color-mix(in srgb, var(--lw-map-plot) 55%, var(--lw-content-surface)); }
.ll-drawing .ll-plot-reserved { stroke-dasharray: 4 3; }
.ll-drawing .ll-placement { fill: var(--lw-content-selected-bg); stroke: var(--lw-control-primary-bg); stroke-width: 1.5; }
/* Nodes: a glyph per preset (shape and token colour), a larger invisible hit circle, dimmed when the legend filters others. */
.ll-drawing .ll-hit { fill: transparent; stroke: none; }
.ll-drawing .ll-glyph { fill: var(--ll-node, var(--lw-content-text-muted)); stroke: var(--lw-content-surface); stroke-width: 1; }
.ll-drawing .ll-glyph-knob, .ll-legend-item .ll-glyph-knob { fill: var(--lw-content-surface); stroke: none; }
.ll-drawing .ll-glyph-knobline, .ll-legend-item .ll-glyph-knobline { fill: none; stroke: var(--lw-content-surface); stroke-width: 0.8; stroke-linecap: round; }
.ll-drawing .ll-glyph-ring { fill: none; stroke: var(--ll-node, var(--lw-content-text-muted)); stroke-width: 1.5; }
.ll-drawing .ll-object.ll-selected .ll-glyph { stroke: var(--lw-content-text); stroke-width: 1.5; }
.ll-drawing .ll-object.ll-dim { opacity: 0.18; }
.ll-drawing .ll-node-name { font-weight: 600; paint-order: stroke; stroke: var(--lw-content-surface); stroke-width: 3px; }
.ll-object-switch { --ll-node: var(--lw-status-pending); }
.ll-object-waypoint { --ll-node: var(--lw-control-primary-bg); }
.ll-object-npc { --ll-node: var(--lw-status-ai); }
.ll-object-discovery { --ll-node: var(--lw-accent-featured); }
.ll-object-checkpoint { --ll-node: var(--lw-status-error); }
.ll-object-arrival { --ll-node: var(--lw-status-done); }
.ll-legend { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ll-legend-item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--lw-content-border); border-radius: 999px; background: var(--lw-content-surface); color: var(--lw-content-text); font-size: 0.8rem; cursor: pointer; }
.ll-legend-item .ll-glyph { fill: var(--ll-node, var(--lw-content-text-muted)); }
.ll-legend-item .ll-glyph-ring { fill: none; stroke: var(--ll-node, var(--lw-content-text-muted)); stroke-width: 1.5; }
.ll-legend-item.ll-on { border-color: var(--lw-content-text); font-weight: 600; }
.ll-picker { position: fixed; z-index: 30; display: grid; gap: 2px; min-width: 12rem; padding: 6px; border: 1px solid var(--lw-content-border); border-radius: 6px; background: var(--lw-content-surface); color: var(--lw-content-text); box-shadow: 0 4px 16px rgb(0 0 0 / 0.25); }
.ll-picker button { text-align: left; padding: 4px 8px; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
.ll-picker button:hover, .ll-picker button:focus-visible { background: var(--lw-content-selected-bg); }
.ll-drawing .ll-label { font-size: 10px; fill: var(--lw-content-text); pointer-events: none; }
.ll-drawing .ll-centre { text-anchor: middle; dominant-baseline: middle; }
.ll-drawing .ll-plot-grid { stroke: var(--lw-content-text-muted); stroke-width: 0.6; stroke-dasharray: 2 3; fill: none; pointer-events: none; }
.ll-drawing .ll-size { font-size: 8px; fill: var(--lw-content-text-muted); }
.ll-drawing .ll-cell-label { font-size: 18px; font-weight: 600; }
.ll-drawing .ll-place { fill: var(--lw-status-ai); stroke: var(--lw-content-surface); stroke-width: 1.5; }
.ll-drawing .ll-place.ll-under { fill: none; stroke: var(--lw-status-ai); stroke-dasharray: 2 2; }
.ll-drawing .ll-place-settlement { fill: var(--lw-control-primary-bg); }
.ll-drawing .ll-note { fill: none; stroke: var(--lw-content-text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.ll-drawing .ll-note-label-text { font-weight: 600; }
.ll-drawing .ll-chunks { stroke: var(--lw-content-border); stroke-width: 0.3; fill: none; pointer-events: none; }
.ll-drawing .ll-cell-lines { stroke: var(--lw-content-text-muted); stroke-width: 2; fill: none; pointer-events: none; }
.ll-drawing .ll-underlay { image-rendering: pixelated; pointer-events: none; }
.ll-drawing .ll-selected { stroke: var(--lw-control-destructive); }
.ll-drawing rect.ll-selected, .ll-drawing circle.ll-selected, .ll-drawing ellipse.ll-selected { stroke-width: 3; }
.ll-drawing path.ll-selected[fill="none"] { stroke: var(--lw-control-destructive); }

/* #399: where a Blueprint link lands. The choice between an object's story and its game version, and the way back. */
.lw-open-choices { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; }
.lw-open-choices a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--lw-content-border); border-radius: 8px; color: var(--lw-content-text); text-decoration: none; }
.lw-open-choices a:hover, .lw-open-choices a:focus-visible { border-color: var(--lw-content-link); }
.lw-back-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--lw-content-link); }

/* The short "Copied" message beside a Copy icon (GitHub 314). */
.lw-copy {
    position: relative;
    display: inline-flex;
}

/* Out of the flow, to the left of the button: the button never moves when the message shows. */
.lw-copy-state {
    position: absolute;
    inset-inline-end: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-inline-end: .5rem;
    white-space: nowrap;
    color: var(--lw-control-secondary-text);
    font-size: var(--lw-font-size-sm);
}

.lw-copy-state:empty {
    display: none;
}

/* A heading screen readers and the page outline need, kept off screen (a page whose top is just a back link). */
.lw-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Full screen on the map pages (MapFull): the navigation, page title, description and tabs fold away. */
html.lw-full .area-navigation, html.lw-full .lw-page-header, html.lw-full .lw-tabs, html.lw-full .author-areas, html.lw-full .lore-nav-backdrop { display: none !important; }
html.lw-full .lore-shell { grid-template-columns: minmax(0, 1fr) !important; }
/* The Story editor's focus adds the top bar (html.lw-full-bar): it slides up out of the way, the page takes its height, and
   it slides back while the pointer touches the top edge (html.lw-bar-show, set by map-full.js). The nav-collapsed state is
   untouched, so leaving focus restores the navigation as it was. */
html.lw-full-bar .mud-appbar.lore-appbar { transform: translateY(-100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; z-index: 1300; }
html.lw-full-bar.lw-bar-show .mud-appbar.lore-appbar { transform: none; visibility: visible; transition: transform 0.2s ease; }
html.lw-full-bar .lore-main-content { padding-top: 0 !important; }
html.lw-full-bar .lore-shell { height: 100vh; height: 100dvh; }
@media (prefers-reduced-motion: reduce) { html.lw-full-bar .mud-appbar.lore-appbar { transition: none; } }
/* The legend chip that is on outlines every item of its kind in red; the canvas shows a focus ring for the keyboard (Tab steps through the items). */
.ll-drawing .ll-object.ll-mark .ll-hit { fill: none; stroke: var(--lw-control-destructive); stroke-width: 2; }
.ll-drawing rect.ll-plot.ll-mark { stroke: var(--lw-control-destructive); stroke-width: 3; }
.ll-legend-item.ll-legend-plots { font-weight: 500; }
.le-svg:focus-visible { outline: 2px solid var(--lw-control-primary-bg); outline-offset: -2px; }

/* The hover card of a content link (#126, wwwroot/js/link-cards.js). */
.lw-link-card {
    position: absolute;
    z-index: 1200;
    display: grid;
    gap: var(--lw-space-1);
    max-width: 22rem;
    padding: var(--lw-space-3);
    border: 1px solid var(--lw-content-border);
    border-radius: var(--lw-radius, 6px);
    background: var(--lw-content-surface);
    color: var(--lw-content-text);
    box-shadow: var(--lw-shadow-lg);
    font-size: .875rem;
}
.lw-link-card-kind, .lw-link-card-used { color: var(--lw-content-text-muted); }
.lw-link-card-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--lw-space-2); margin: 0; }
.lw-link-card-fields dt { color: var(--lw-content-text-muted); }
.lw-link-card-fields dd { margin: 0; overflow-wrap: anywhere; }