/*
 * Bosaso City admin skin. Plain CSS on top of Filament's compiled theme:
 * it is linked after the theme stylesheet, so a two-class selector is
 * enough to win over a Tailwind utility, including the dark: variants.
 */

:root {
    --bo-blue: 55, 86, 163;
    --bo-red: 237, 32, 37;
    --bo-paper: 250, 248, 255;

    --bo-canvas: 246, 247, 251;
    --bo-surface: 255, 255, 255;
    --bo-hairline: rgba(15, 23, 42, 0.07);
    --bo-muted: var(--gray-500);

    --bo-radius: 16px;
    --bo-radius-sm: 10px;
    --bo-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    --bo-shadow:
        0 0 0 1px var(--bo-hairline),
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 2px 6px -1px rgba(15, 23, 42, 0.04),
        0 14px 32px -16px rgba(15, 23, 42, 0.14);
    --bo-shadow-raised:
        0 0 0 1px var(--bo-hairline),
        0 2px 4px rgba(15, 23, 42, 0.04),
        0 12px 24px -6px rgba(15, 23, 42, 0.1),
        0 32px 64px -20px rgba(15, 23, 42, 0.22);

    --bo-flag: linear-gradient(
        31deg,
        rgb(var(--bo-blue)) calc(50% - 0.5px),
        rgb(var(--bo-red)) calc(50% + 0.5px)
    );
    --bo-stripe: linear-gradient(
        100deg,
        rgb(var(--bo-blue)) 0 58%,
        rgb(var(--bo-red)) calc(58% + 1px) 100%
    );
}

.dark {
    --bo-canvas: var(--gray-950);
    --bo-surface: var(--gray-900);
    --bo-hairline: rgba(255, 255, 255, 0.08);
    --bo-muted: var(--gray-400);

    --bo-shadow:
        0 0 0 1px var(--bo-hairline),
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 16px 36px -18px rgba(0, 0, 0, 0.7);
    --bo-shadow-raised:
        0 0 0 1px var(--bo-hairline),
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 32px 72px -20px rgba(0, 0, 0, 0.75);
}

/* Canvas */

.fi .fi-body {
    background-color: rgb(var(--bo-canvas));
    background-image:
        radial-gradient(1100px 520px at 100% -10%, rgba(var(--bo-blue), 0.075), transparent 65%),
        radial-gradient(900px 420px at -8% -14%, rgba(var(--bo-red), 0.05), transparent 60%);
    background-attachment: fixed;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dark .fi-body {
    background-image:
        radial-gradient(1100px 520px at 100% -10%, rgba(var(--bo-blue), 0.16), transparent 65%),
        radial-gradient(900px 420px at -8% -14%, rgba(var(--bo-red), 0.07), transparent 60%);
}

.fi-body ::selection {
    background-color: rgba(var(--bo-blue), 0.2);
}

/* Brand lockup */

.bo-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    height: 100%;
}

.bo-logo-mark {
    height: 100%;
    width: auto;
    border-radius: 22.4%;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.12),
        0 6px 14px -6px rgba(var(--bo-blue), 0.55);
}

.bo-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    white-space: nowrap;
}

.bo-logo-name {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgb(var(--gray-950));
}

.bo-logo-caption {
    margin-top: 0.2rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--primary-600));
}

.bo-logo--dark .bo-logo-name {
    color: #fff;
}

.bo-logo--dark .bo-logo-caption {
    color: rgb(var(--primary-300));
}

/* Sidebar */

@media (min-width: 1024px) {
    .fi-body .fi-sidebar {
        background-color: rgb(var(--bo-surface));
        box-shadow: inset -1px 0 0 var(--bo-hairline);
    }
}

.fi-body .fi-sidebar-header {
    position: relative;
    background-color: rgb(var(--bo-surface));
    box-shadow: inset 0 -1px 0 var(--bo-hairline);
}

.fi-body .fi-sidebar-header::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--bo-stripe);
}

.fi-body .fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--gray-400), 0.35) transparent;
}

.fi-body .fi-sidebar-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--gray-400));
}

.fi-body .fi-sidebar-group-button .fi-sidebar-group-icon {
    color: rgb(var(--gray-400));
}

.fi-body .fi-sidebar-item-button {
    border-radius: var(--bo-radius-sm);
    transition:
        background-color 0.2s var(--bo-ease),
        box-shadow 0.2s var(--bo-ease),
        color 0.2s var(--bo-ease);
}

.fi-body .fi-sidebar-item-button:hover,
.fi-body .fi-sidebar-item-button:focus-visible {
    background-color: rgba(var(--primary-600), 0.07);
}

.fi-body .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: rgb(var(--primary-600));
}

.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background-color: rgb(var(--primary-600));
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 1px 2px rgba(var(--primary-900), 0.25),
        0 8px 18px -8px rgba(var(--primary-600), 0.75);
}

.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label {
    color: #fff;
}

.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-grouped-border .rounded-full {
    background-color: #fff;
}

.dark .fi-sidebar-item-button:hover,
.dark .fi-sidebar-item-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: rgb(var(--primary-300));
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background-color: rgb(var(--primary-500));
}

.dark .fi-sidebar-group-label,
.dark .fi-sidebar-group-button .fi-sidebar-group-icon {
    color: rgb(var(--gray-500));
}

.bo-sidebar-footer {
    margin: 0 1.5rem 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bo-hairline);
    font-size: 0.7rem;
    line-height: 1.45;
    color: rgb(var(--bo-muted));
}

.bo-sidebar-footer-stripe {
    display: block;
    width: 1.75rem;
    height: 3px;
    margin-bottom: 0.6rem;
    border-radius: 999px;
    background: var(--bo-stripe);
}

.bo-sidebar-footer-so {
    font-weight: 600;
    color: rgb(var(--gray-700));
}

.dark .bo-sidebar-footer-so {
    color: rgb(var(--gray-200));
}

/* Topbar */

/* Safari clips every child of an element with backdrop-filter, which hid the
   user menu and search results, so the blur sits on a layer behind the bar. */
.fi-body .fi-topbar > nav {
    position: relative;
    isolation: isolate;
    background-color: transparent;
    box-shadow: inset 0 -1px 0 var(--bo-hairline);
}

.fi-body .fi-topbar > nav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: rgba(var(--bo-surface), 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
}

.fi-body .fi-global-search-field .fi-input-wrp {
    border-radius: 999px;
    background-color: rgba(var(--gray-500), 0.08);
    box-shadow: none;
}

.fi-body .fi-global-search-field .fi-input-wrp:focus-within {
    background-color: rgb(var(--bo-surface));
    box-shadow:
        0 0 0 1.5px rgb(var(--primary-500)),
        0 0 0 5px rgba(var(--primary-500), 0.15);
}

.fi-body .fi-global-search-results-ctn {
    border-radius: 14px;
    box-shadow: var(--bo-shadow-raised);
}

.fi-body .fi-user-menu .fi-avatar {
    box-shadow:
        0 0 0 2px rgb(var(--bo-surface)),
        0 0 0 3.5px rgba(var(--primary-500), 0.45);
}

/* Page header */

.fi-body .fi-header-heading {
    font-weight: 700;
    letter-spacing: -0.025em;
}

.fi-body .fi-header-subheading {
    font-size: 0.975rem;
    color: rgb(var(--bo-muted));
}

.fi-body .fi-header-subheading .bo-stage-badge {
    margin-inline-start: 0.5rem;
    vertical-align: 0.1em;
}

.fi-body .fi-breadcrumbs-item-label {
    font-weight: 500;
    transition: color 0.15s var(--bo-ease);
}

.fi-body a.fi-breadcrumbs-item-label:hover {
    color: rgb(var(--primary-600));
}

.dark a.fi-breadcrumbs-item-label:hover {
    color: rgb(var(--primary-300));
}

/* Surfaces */

.fi-body .fi-section:not(.fi-aside),
.fi-body .fi-section.fi-aside > .fi-section-content-ctn,
.fi-body .fi-ta-ctn,
.fi-body .fi-wi-stats-overview-stat,
.fi-body .fi-tabs:not(.fi-contained) {
    border-radius: var(--bo-radius);
    background-color: rgb(var(--bo-surface));
    box-shadow: var(--bo-shadow);
}

.fi-body .fi-section-header-description {
    color: rgb(var(--bo-muted));
}

.fi-body .fi-section-header-icon {
    color: rgb(var(--primary-600));
}

.dark .fi-section-header-icon {
    color: rgb(var(--primary-400));
}

.fi-body .fi-section-header-heading,
.fi-body .fi-ta-header-heading,
.fi-body .fi-wi-stats-overview-header-heading {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.015em;
}

.fi-body .fi-ta-header-description,
.fi-body .fi-wi-stats-overview-header-description {
    color: rgb(var(--bo-muted));
}

.fi-body .fi-wi-stats-overview-header {
    padding-inline: 0.25rem;
}

/* Infolists */

.fi-body .fi-in-entry-wrp-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgb(var(--gray-500));
}

.dark .fi-in-entry-wrp-label {
    color: rgb(var(--gray-400));
}

.fi-body .fi-in-text-item {
    font-variant-numeric: tabular-nums;
}

/* Tables */

.fi-body .fi-ta-table > thead > tr:last-child {
    background-color: rgb(var(--gray-50));
}

.dark .fi-ta-table > thead > tr:last-child {
    background-color: rgba(255, 255, 255, 0.025);
}

.fi-body .fi-ta-header-cell-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
}

.dark .fi-ta-header-cell-label {
    color: rgb(var(--gray-400));
}

.fi-body .fi-ta-row {
    transition: background-color 0.15s var(--bo-ease);
}

.fi-body .fi-ta-row:hover {
    background-color: rgba(var(--primary-500), 0.04);
}

.dark .fi-ta-row:hover {
    background-color: rgba(var(--primary-400), 0.07);
}

.fi-body .fi-ta-text-item {
    font-variant-numeric: tabular-nums;
}

.fi-body .fi-ta-empty-state {
    padding-block: 3.5rem;
}

.fi-body .fi-ta-empty-state-icon-ctn {
    padding: 0.9rem;
    background-image: linear-gradient(135deg, rgba(var(--bo-blue), 0.14), rgba(var(--bo-red), 0.1));
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(var(--bo-blue), 0.14);
}

.fi-body .fi-ta-empty-state-icon {
    color: rgb(var(--primary-600));
}

.dark .fi-ta-empty-state-icon {
    color: rgb(var(--primary-300));
}

.fi-body .fi-ta-empty-state-heading {
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.fi-body .fi-ta-empty-state-description {
    color: rgb(var(--bo-muted));
}

.fi-body .fi-ta-header-toolbar {
    gap: 0.75rem;
}

.fi-body .fi-ta-group-header {
    background-color: rgba(var(--primary-500), 0.035);
}

/* Pagination */

.fi-body .fi-pagination-items {
    padding: 0.2rem;
    gap: 0.15rem;
    border-radius: 999px;
    background-color: rgb(var(--bo-surface));
    box-shadow: var(--bo-shadow);
}

.fi-body .fi-pagination-item {
    border-inline: 0;
}

.fi-body .fi-pagination-item .fi-pagination-item-button {
    min-width: 2rem;
    justify-content: center;
    border-radius: 999px;
}

.fi-body .fi-pagination-item.fi-active .fi-pagination-item-button {
    background-color: rgb(var(--primary-600));
    box-shadow: 0 4px 10px -4px rgba(var(--primary-600), 0.7);
}

.fi-body .fi-pagination-item.fi-active .fi-pagination-item-label {
    color: #fff;
}

.dark .fi-pagination-items {
    background-color: rgba(255, 255, 255, 0.04);
}

.dark .fi-pagination-item.fi-active .fi-pagination-item-button {
    background-color: rgb(var(--primary-500));
}

.fi-body .fi-pagination-overview {
    color: rgb(var(--bo-muted));
    font-variant-numeric: tabular-nums;
}

/* Tabs as a segmented control */

.fi-body .fi-tabs:not(.fi-contained) {
    padding: 0.3rem;
    gap: 0.25rem;
}

.fi-body .fi-tabs-item {
    border-radius: var(--bo-radius-sm);
    transition:
        background-color 0.2s var(--bo-ease),
        box-shadow 0.2s var(--bo-ease);
}

.fi-body .fi-tabs-item.fi-active {
    background-color: rgba(var(--primary-500), 0.09);
    box-shadow: inset 0 0 0 1px rgba(var(--primary-500), 0.14);
}

.dark .fi-tabs-item.fi-active {
    background-color: rgba(var(--primary-400), 0.14);
}

.fi-body .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-body .fi-tabs-item.fi-active .fi-tabs-item-icon {
    color: rgb(var(--primary-700));
}

.dark .fi-tabs-item.fi-active .fi-tabs-item-label,
.dark .fi-tabs-item.fi-active .fi-tabs-item-icon {
    color: rgb(var(--primary-200));
}

.fi-body .fi-tabs-item .fi-badge {
    min-width: 1.5rem;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

.fi-body .fi-tabs.fi-contained {
    gap: 0.25rem;
}

/* Controls */

.fi-body .fi-badge {
    border-radius: 999px;
    font-weight: 600;
}

.fi-body .fi-btn {
    transition:
        background-color 0.15s var(--bo-ease),
        box-shadow 0.15s var(--bo-ease),
        transform 0.1s var(--bo-ease);
}

.fi-body .fi-btn:active {
    transform: translateY(0.5px);
}

.fi-body .fi-btn.fi-color-custom:not(.fi-btn-outlined, label) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 1px 2px rgba(var(--c-600), 0.3),
        0 6px 14px -6px rgba(var(--c-600), 0.6);
}

.fi-body .fi-btn.fi-color-gray:not(.fi-btn-outlined, label) {
    box-shadow:
        0 0 0 1px var(--bo-hairline),
        0 1px 2px rgba(15, 23, 42, 0.06);
}

.fi-body .fi-btn.fi-color-gray:not(.fi-btn-outlined, label):hover {
    box-shadow:
        0 0 0 1px rgba(var(--primary-500), 0.25),
        0 2px 6px -2px rgba(15, 23, 42, 0.12);
}

.fi-body .fi-btn.fi-btn-outlined {
    background-color: rgb(var(--bo-surface));
}

.dark .fi-btn.fi-btn-outlined {
    background-color: transparent;
}

.fi-body .fi-btn:focus-visible,
.fi-body .fi-btn.fi-color-custom:not(.fi-btn-outlined, label):focus-visible,
.fi-body .fi-icon-btn:focus-visible,
.fi-body .fi-link:focus-visible,
.fi-body .fi-tabs-item:focus-visible,
.fi-body .fi-sidebar-item-button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px rgb(var(--bo-surface)),
        0 0 0 4px rgba(var(--c-500, var(--primary-500)), 0.65);
}

.fi-body .fi-input-wrp:not(.fi-invalid):not(:has(.fi-ac-action:focus)):focus-within {
    box-shadow:
        0 0 0 1.5px rgb(var(--primary-500)),
        0 0 0 5px rgba(var(--primary-500), 0.14);
}

.fi-body .fi-input-wrp.fi-invalid:not(:has(.fi-ac-action:focus)):focus-within {
    box-shadow:
        0 0 0 1.5px rgb(var(--danger-500)),
        0 0 0 5px rgba(var(--danger-500), 0.14);
}

.fi-body .fi-input-wrp,
.fi-body .fi-select-input {
    transition: box-shadow 0.15s var(--bo-ease), background-color 0.15s var(--bo-ease);
}

.fi-body .fi-checkbox-input:focus-visible,
.fi-body .fi-radio-input:focus-visible {
    box-shadow: 0 0 0 4px rgba(var(--primary-500), 0.25);
}

/* Overlays */

.fi-body .fi-dropdown-panel {
    border-radius: 14px;
    box-shadow: var(--bo-shadow-raised);
}

.fi-body .fi-dropdown-list-item {
    border-radius: 8px;
}

.fi-body .fi-modal-close-overlay {
    background-color: rgba(var(--gray-950), 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.fi-body .fi-modal-window:not(.fi-modal-slide-over-window) {
    border-radius: 20px;
    box-shadow: var(--bo-shadow-raised);
}

.fi-body .fi-modal-heading {
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: -0.015em;
}

.fi-body .fi-modal-description {
    line-height: 1.55;
}

.fi-body .fi-modal-slide-over-window {
    box-shadow: var(--bo-shadow-raised);
}

.fi-body .fi-modal-window .fi-modal-icon {
    filter: drop-shadow(0 4px 8px rgba(var(--c-500, var(--primary-500)), 0.35));
}

/* Notifications */

.fi-body .fi-no-notification:not(.fi-inline) {
    --bo-status: var(--gray-400);
    border-radius: 16px;
    background-color: rgba(var(--bo-surface), 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow:
        inset 3px 0 0 rgb(var(--bo-status)),
        var(--bo-shadow-raised);
}

.fi-body .fi-no-notification.fi-status-success {
    --bo-status: var(--success-500);
}

.fi-body .fi-no-notification.fi-status-warning {
    --bo-status: var(--warning-500);
}

.fi-body .fi-no-notification.fi-status-danger {
    --bo-status: var(--danger-500);
}

.fi-body .fi-no-notification.fi-status-info {
    --bo-status: var(--primary-500);
}

.fi-body .fi-no-notification-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.fi-body .fi-no-notification-body {
    line-height: 1.5;
    color: rgb(var(--bo-muted));
}

/* Dashboard */

@media (min-width: 1024px) {
    .fi-body .fi-wi-widget.fi-account-widget {
        grid-column: 1 / -1;
    }
}

.fi-body .fi-account-widget .fi-section {
    position: relative;
    overflow: hidden;
}

.fi-body .fi-account-widget .fi-section::before {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: min(46%, 480px);
    background: var(--bo-flag);
    opacity: 0.13;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 75%);
    mask-image: linear-gradient(90deg, transparent, #000 75%);
    pointer-events: none;
}

.dark .fi-account-widget .fi-section::before {
    opacity: 0.16;
}

.fi-body .fi-account-widget .fi-section-content-ctn {
    position: relative;
}

.fi-body .fi-wi-stats-overview-stat {
    overflow: hidden;
    transition:
        box-shadow 0.25s var(--bo-ease),
        transform 0.25s var(--bo-ease);
}

.fi-body .fi-wi-stats-overview-stat:hover {
    box-shadow: var(--bo-shadow-raised);
    transform: translateY(-1px);
}

.fi-body .fi-wi-stats-overview-stat-label {
    font-weight: 500;
    color: rgb(var(--bo-muted));
}

.fi-body .fi-wi-stats-overview-stat-value {
    font-size: 2rem;
    font-weight: 650;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}

.fi-body .fi-wi-stats-overview-stat-chart {
    border-bottom-left-radius: var(--bo-radius);
    border-bottom-right-radius: var(--bo-radius);
}

.bo-stat {
    --bo-tint: var(--primary-600);
}

.bo-stat-accent {
    --bo-tint: var(--accent-600);
}

.bo-stat-success {
    --bo-tint: var(--success-600);
}

.bo-stat-warning {
    --bo-tint: var(--warning-600);
}

.dark .bo-stat {
    --bo-tint: var(--primary-300);
}

.dark .bo-stat-accent {
    --bo-tint: var(--accent-400);
}

.dark .bo-stat-success {
    --bo-tint: var(--success-400);
}

.dark .bo-stat-warning {
    --bo-tint: var(--warning-400);
}

.fi-body .bo-stat .fi-wi-stats-overview-stat-icon {
    box-sizing: content-box;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0.5rem;
    margin-inline-end: 0.25rem;
    border-radius: 0.7rem;
    color: rgb(var(--bo-tint));
    background-color: rgba(var(--bo-tint), 0.1);
    box-shadow: inset 0 0 0 1px rgba(var(--bo-tint), 0.12);
}

.fi-body .bo-stat::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, rgba(var(--bo-tint), 0.9), rgba(var(--bo-tint), 0));
}

a.bo-stat::after {
    content: '';
    position: absolute;
    top: 1.6rem;
    right: 1.25rem;
    width: 1rem;
    height: 1rem;
    background-color: rgb(var(--gray-300));
    -webkit-mask: var(--bo-glyph-chevron) center / contain no-repeat;
    mask: var(--bo-glyph-chevron) center / contain no-repeat;
    transition:
        transform 0.25s var(--bo-ease),
        background-color 0.25s var(--bo-ease);
}

a.bo-stat:hover::after,
a.bo-stat:focus-visible::after {
    background-color: rgb(var(--bo-tint));
    transform: translateX(3px);
}

.dark a.bo-stat::after {
    background-color: rgb(var(--gray-600));
}

.fi-body .fi-wi-chart .fi-section-content {
    padding-top: 0.5rem;
}

/* Workflow: shared glyphs, drawn with CSS masks when a dot has no icon */

:root {
    --bo-glyph-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E");
    --bo-glyph-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.3 5.3a1 1 0 0 1 1.4 0L10 8.6l3.3-3.3a1 1 0 1 1 1.4 1.4L11.4 10l3.3 3.3a1 1 0 0 1-1.4 1.4L10 11.4l-3.3 3.3a1 1 0 0 1-1.4-1.4L8.6 10 5.3 6.7a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
    --bo-glyph-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2h-4v4a1 1 0 1 1-2 0v-4H5a1 1 0 1 1 0-2h4V5a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
    --bo-glyph-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10.3 4.3a1 1 0 0 1 1.4 0l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H4a1 1 0 1 1 0-2h9.6l-3.3-3.3a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
    --bo-glyph-return: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.7 3.3a1 1 0 0 1 0 1.4L5.4 7H12a5 5 0 0 1 0 10h-2a1 1 0 1 1 0-2h2a3 3 0 0 0 0-6H5.4l2.3 2.3a1 1 0 1 1-1.4 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E");
    --bo-glyph-import: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3a1 1 0 0 1 1 1v6.6l2.3-2.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L9 10.6V4a1 1 0 0 1 1-1ZM4 14a1 1 0 0 1 1 1v1h10v-1a1 1 0 1 1 2 0v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
    --bo-glyph-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7ZM4 16.5C4 13.5 6.7 12 10 12s6 1.5 6 4.5a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5Z'/%3E%3C/svg%3E");
    --bo-glyph-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.3 4.3a1 1 0 0 1 1.4 0l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4-1.4L11.6 10 7.3 5.7a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
}

/* Workflow: stage stepper */

.bo-stepper {
    --bo-step-dot: 1.875rem;
    --bo-step-gap: 0.4rem;
    display: flex;
    margin: 0;
    padding: 0.35rem 0.25rem 0.5rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--gray-400), 0.35) transparent;
}

.bo-step {
    --bo-step-line: rgb(var(--gray-200));
    position: relative;
    display: flex;
    flex: 1 0 7.25rem;
    flex-direction: column;
    align-items: center;
    padding-inline: 0.4rem;
    text-align: center;
    scroll-snap-align: start;
}

.bo-step:not(:first-child)::before {
    content: '';
    position: absolute;
    top: calc(var(--bo-step-dot) / 2 - 1px);
    left: calc(-50% + var(--bo-step-dot) / 2 + var(--bo-step-gap));
    right: calc(50% + var(--bo-step-dot) / 2 + var(--bo-step-gap));
    height: 2px;
    border-radius: 999px;
    background: var(--bo-step-line);
}

.bo-step__dot {
    position: relative;
    z-index: 1;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: var(--bo-step-dot);
    height: var(--bo-step-dot);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--gray-400));
    background-color: rgb(var(--bo-surface));
    box-shadow: inset 0 0 0 1.5px rgb(var(--gray-300));
    transition:
        background-color 0.3s var(--bo-ease),
        box-shadow 0.3s var(--bo-ease);
}

.bo-step__dot svg {
    width: 0.95rem;
    height: 0.95rem;
}

.bo-step__dot:empty::after {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background-color: currentColor;
}

.bo-step__label {
    margin-top: 0.55rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: rgb(var(--gray-500));
    text-wrap: balance;
}

.bo-step__meta {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgb(var(--gray-400));
    text-wrap: balance;
}

.bo-step--done,
.bo-step--current {
    --bo-step-line: rgb(var(--bo-blue));
}

.bo-step--done .bo-step__dot {
    color: #fff;
    background-color: rgb(var(--bo-blue));
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 10px -4px rgba(var(--bo-blue), 0.7);
}

.bo-step--done .bo-step__dot:empty::after {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 0;
    -webkit-mask: var(--bo-glyph-check) center / contain no-repeat;
    mask: var(--bo-glyph-check) center / contain no-repeat;
}

.bo-step--done .bo-step__label {
    color: rgb(var(--gray-700));
}

.bo-step--done .bo-step__meta {
    color: rgb(var(--primary-600));
}

.bo-step--current .bo-step__dot {
    color: rgb(var(--bo-blue));
    box-shadow:
        inset 0 0 0 2px rgb(var(--bo-blue)),
        0 0 0 5px rgba(var(--bo-blue), 0.14),
        0 6px 16px -6px rgba(var(--bo-blue), 0.7);
}

.bo-step--current .bo-step__dot::before,
.bo-step--returned .bo-step__dot::before {
    --bo-pulse: var(--bo-blue);
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: bo-pulse 2.4s var(--bo-ease) infinite;
}

.bo-step--current .bo-step__dot:empty::after {
    width: 0.6rem;
    height: 0.6rem;
}

.bo-step--current .bo-step__label {
    font-weight: 700;
    color: rgb(var(--gray-950));
}

.bo-step--current .bo-step__meta {
    font-weight: 500;
    color: rgb(var(--primary-600));
}

.bo-step--returned {
    --bo-step-line: linear-gradient(90deg, rgb(var(--bo-blue)), rgb(var(--bo-red)));
}

.bo-step--returned .bo-step__dot {
    color: rgb(var(--bo-red));
    background-color: rgb(var(--bo-surface));
    background-image: none;
    box-shadow:
        inset 0 0 0 2px rgb(var(--bo-red)),
        0 0 0 5px rgba(var(--bo-red), 0.13),
        0 6px 16px -6px rgba(var(--bo-red), 0.65);
}

.bo-step--returned .bo-step__dot::before {
    --bo-pulse: var(--bo-red);
}

.bo-step--returned .bo-step__dot:empty::after {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 0;
    -webkit-mask: var(--bo-glyph-return) center / contain no-repeat;
    mask: var(--bo-glyph-return) center / contain no-repeat;
}

.bo-step--returned .bo-step__label {
    font-weight: 700;
    color: rgb(var(--accent-700));
}

.bo-step--returned .bo-step__meta {
    font-weight: 500;
    color: rgb(var(--accent-600));
}

.bo-step--cancelled {
    --bo-step-line: linear-gradient(90deg, rgb(var(--gray-300)) 50%, transparent 0) 0 0 / 6px 2px;
}

.bo-step--cancelled .bo-step__dot {
    color: rgb(var(--gray-500));
    background-color: rgb(var(--gray-100));
    background-image: none;
    box-shadow: inset 0 0 0 1.5px rgb(var(--gray-300));
}

.bo-step--cancelled .bo-step__dot::before {
    content: none;
}

.bo-step--cancelled .bo-step__dot:empty::after {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0;
    -webkit-mask: var(--bo-glyph-x) center / contain no-repeat;
    mask: var(--bo-glyph-x) center / contain no-repeat;
}

.bo-step--cancelled .bo-step__label,
.bo-step--cancelled .bo-step__meta {
    color: rgb(var(--gray-400));
}

.dark .bo-step {
    --bo-step-line: rgba(255, 255, 255, 0.1);
}

.dark .bo-step--done,
.dark .bo-step--current {
    --bo-step-line: rgb(var(--primary-400));
}

.dark .bo-step--returned {
    --bo-step-line: linear-gradient(90deg, rgb(var(--primary-400)), rgb(var(--accent-400)));
}

.dark .bo-step--cancelled {
    --bo-step-line: linear-gradient(90deg, rgb(var(--gray-700)) 50%, transparent 0) 0 0 / 6px 2px;
}

.dark .bo-step__dot {
    color: rgb(var(--gray-500));
    background-color: rgb(var(--gray-900));
    box-shadow: inset 0 0 0 1.5px rgb(var(--gray-700));
}

.dark .bo-step__label {
    color: rgb(var(--gray-400));
}

.dark .bo-step__meta {
    color: rgb(var(--gray-500));
}

.dark .bo-step--done .bo-step__dot {
    color: #fff;
    background-color: rgb(var(--primary-500));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 12px -4px rgba(var(--primary-500), 0.8);
}

.dark .bo-step--done .bo-step__label {
    color: rgb(var(--gray-200));
}

.dark .bo-step--done .bo-step__meta,
.dark .bo-step--current .bo-step__meta {
    color: rgb(var(--primary-300));
}

.dark .bo-step--current .bo-step__dot {
    color: rgb(var(--primary-300));
    box-shadow:
        inset 0 0 0 2px rgb(var(--primary-400)),
        0 0 0 5px rgba(var(--primary-400), 0.18),
        0 6px 18px -6px rgba(var(--primary-400), 0.8);
}

.dark .bo-step--current .bo-step__label {
    color: #fff;
}

.dark .bo-step--current .bo-step__dot::before {
    --bo-pulse: var(--primary-400);
}

.dark .bo-step--returned .bo-step__dot::before {
    --bo-pulse: var(--accent-400);
}

.dark .bo-step--returned .bo-step__dot {
    color: rgb(var(--accent-400));
    background-color: rgb(var(--gray-900));
    box-shadow:
        inset 0 0 0 2px rgb(var(--accent-400)),
        0 0 0 5px rgba(var(--accent-400), 0.16),
        0 6px 18px -6px rgba(var(--accent-500), 0.7);
}

.dark .bo-step--returned .bo-step__label,
.dark .bo-step--returned .bo-step__meta {
    color: rgb(var(--accent-300));
}

.dark .bo-step--cancelled .bo-step__dot {
    color: rgb(var(--gray-500));
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1.5px rgb(var(--gray-700));
}

.dark .bo-step--cancelled .bo-step__label,
.dark .bo-step--cancelled .bo-step__meta {
    color: rgb(var(--gray-500));
}

/* Workflow: status history */

.bo-timeline {
    --bo-tl-dot: 1.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bo-timeline__item {
    position: relative;
    min-height: var(--bo-tl-dot);
    padding: 0.3rem 0 1.5rem calc(var(--bo-tl-dot) + 0.9rem);
}

.bo-timeline__item:last-child {
    padding-bottom: 0.25rem;
}

.bo-timeline__item:not(:last-child)::before {
    content: '';
    position: absolute;
    top: calc(var(--bo-tl-dot) + 0.35rem);
    bottom: 0.35rem;
    left: calc(var(--bo-tl-dot) / 2 - 1px);
    width: 2px;
    border-radius: 999px;
    background-color: rgb(var(--gray-200));
}

.bo-timeline__dot {
    --bo-dot: var(--gray-400);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: var(--bo-tl-dot);
    height: var(--bo-tl-dot);
    border-radius: 999px;
    color: rgb(var(--bo-dot));
    background-color: rgba(var(--bo-dot), 0.12);
    box-shadow:
        inset 0 0 0 1px rgba(var(--bo-dot), 0.22),
        0 0 0 4px rgb(var(--bo-surface));
}

.bo-timeline__dot svg {
    width: 0.95rem;
    height: 0.95rem;
}

.bo-timeline__dot:empty::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background-color: currentColor;
}

.bo-timeline__dot:is(
    .bo-timeline__dot--create,
    .bo-timeline__dot--forward,
    .bo-timeline__dot--return,
    .bo-timeline__dot--cancel,
    .bo-timeline__dot--import,
    .bo-timeline__dot--assign
):empty::after {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 0;
    -webkit-mask: var(--bo-glyph) center / contain no-repeat;
    mask: var(--bo-glyph) center / contain no-repeat;
}

.bo-timeline__dot--create {
    --bo-dot: var(--success-600);
    --bo-glyph: var(--bo-glyph-plus);
}

.bo-timeline__dot--forward {
    --bo-dot: var(--primary-600);
    --bo-glyph: var(--bo-glyph-arrow);
    color: #fff;
    background-color: rgb(var(--bo-dot));
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
    box-shadow:
        0 0 0 4px rgb(var(--bo-surface)),
        0 6px 14px -4px rgba(var(--bo-dot), 0.6);
}

.bo-timeline__dot--return {
    --bo-dot: var(--accent-500);
    --bo-glyph: var(--bo-glyph-return);
    color: #fff;
    background-color: rgb(var(--bo-dot));
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
    box-shadow:
        0 0 0 4px rgb(var(--bo-surface)),
        0 6px 14px -4px rgba(var(--bo-dot), 0.6);
}

.bo-timeline__dot--cancel {
    --bo-dot: var(--gray-500);
    --bo-glyph: var(--bo-glyph-x);
}

.bo-timeline__dot--import {
    --bo-dot: var(--info-600);
    --bo-glyph: var(--bo-glyph-import);
}

.bo-timeline__dot--assign {
    --bo-dot: var(--warning-500);
    --bo-glyph: var(--bo-glyph-person);
}

.bo-timeline__title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: rgb(var(--gray-950));
}

.bo-timeline__meta {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgb(var(--gray-500));
    font-variant-numeric: tabular-nums;
}

.bo-timeline__reason {
    position: relative;
    margin: 0.65rem 0 0;
    padding: 0.6rem 0.85rem 0.6rem 1rem;
    border-radius: 10px;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgb(var(--gray-700));
    background-color: rgba(var(--accent-500), 0.05);
    box-shadow: inset 3px 0 0 rgba(var(--accent-500), 0.6);
    overflow-wrap: anywhere;
}

.bo-timeline__item:has(.bo-timeline__dot--cancel) .bo-timeline__reason {
    background-color: rgba(var(--gray-500), 0.07);
    box-shadow: inset 3px 0 0 rgb(var(--gray-400));
}

.dark .bo-timeline__item:not(:last-child)::before {
    background-color: rgba(255, 255, 255, 0.08);
}

.dark .bo-timeline__dot {
    --bo-dot: var(--gray-500);
    box-shadow:
        inset 0 0 0 1px rgba(var(--bo-dot), 0.3),
        0 0 0 4px rgb(var(--bo-surface));
}

.dark .bo-timeline__dot--create {
    --bo-dot: var(--success-400);
}

.dark .bo-timeline__dot--forward {
    --bo-dot: var(--primary-500);
}

.dark .bo-timeline__dot--return {
    --bo-dot: var(--accent-500);
}

.dark .bo-timeline__dot--import {
    --bo-dot: var(--info-400);
}

.dark .bo-timeline__dot--assign {
    --bo-dot: var(--warning-400);
}

.dark .bo-timeline__dot--forward,
.dark .bo-timeline__dot--return {
    box-shadow:
        0 0 0 4px rgb(var(--bo-surface)),
        0 6px 16px -4px rgba(var(--bo-dot), 0.55);
}

.dark .bo-timeline__title {
    color: #fff;
}

.dark .bo-timeline__meta {
    color: rgb(var(--gray-400));
}

.dark .bo-timeline__reason {
    color: rgb(var(--gray-300));
    background-color: rgba(var(--accent-500), 0.09);
}

.dark .bo-timeline__item:has(.bo-timeline__dot--cancel) .bo-timeline__reason {
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: inset 3px 0 0 rgb(var(--gray-600));
}

/* Workflow: stage badge */

.bo-stage-badge {
    --bo-badge: var(--primary-600);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.15rem 0.65rem 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0.005em;
    white-space: nowrap;
    color: rgb(var(--primary-700));
    background-color: rgba(var(--bo-badge), 0.09);
    box-shadow: inset 0 0 0 1px rgba(var(--bo-badge), 0.18);
}

.bo-stage-badge::before {
    content: '';
    flex-shrink: 0;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background-color: rgb(var(--bo-badge));
    box-shadow: 0 0 0 3px rgba(var(--bo-badge), 0.18);
}

.bo-stage-badge--returned {
    --bo-badge: var(--accent-500);
    color: rgb(var(--accent-700));
}

.dark .bo-stage-badge {
    --bo-badge: var(--primary-400);
    color: rgb(var(--primary-200));
    background-color: rgba(var(--bo-badge), 0.14);
}

.dark .bo-stage-badge--returned {
    --bo-badge: var(--accent-400);
    color: rgb(var(--accent-200));
}

/* Workflow: deed card and key figures */

.bo-deed-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    border-radius: var(--bo-radius);
    color: rgb(var(--gray-700));
    background-color: rgb(var(--bo-paper));
    background-image:
        radial-gradient(420px 220px at 100% 0%, rgba(var(--bo-blue), 0.08), transparent 70%),
        repeating-linear-gradient(135deg, rgba(var(--bo-blue), 0.025) 0 1px, transparent 1px 9px);
    box-shadow: var(--bo-shadow);
}

.bo-deed-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, rgb(var(--bo-blue)) 0 58%, rgb(var(--bo-red)) calc(58% + 1px) 100%);
}

.bo-deed-card::after {
    content: '';
    position: absolute;
    top: -3.5rem;
    right: -3.5rem;
    z-index: -1;
    width: 9rem;
    height: 9rem;
    border-radius: 999px;
    background: var(--bo-flag);
    opacity: 0.07;
}

.bo-deed-card :where(h2, h3, h4, strong) {
    color: rgb(var(--gray-950));
    letter-spacing: -0.015em;
}

.bo-deed-card :where(dt) {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
}

.bo-deed-card :where(dd) {
    margin: 0.15rem 0 0;
    font-weight: 500;
    color: rgb(var(--gray-950));
    font-variant-numeric: tabular-nums;
}

.bo-deed-card :where(dl) {
    display: grid;
    gap: 0.9rem;
    margin: 0;
}

.bo-deed-card > * + * {
    margin-top: 1.1rem;
}

.bo-deed-card :where(dd img) {
    display: block;
    margin-top: 0.35rem;
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.dark .bo-deed-card {
    color: rgb(var(--gray-300));
    background-color: rgba(255, 255, 255, 0.035);
    background-image:
        radial-gradient(420px 220px at 100% 0%, rgba(var(--bo-blue), 0.22), transparent 70%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 9px);
}

.dark .bo-deed-card::after {
    opacity: 0.12;
}

.dark .bo-deed-card :where(h2, h3, h4, strong, dd) {
    color: #fff;
}

.dark .bo-deed-card :where(dt) {
    color: rgb(var(--gray-400));
}

.bo-kpi {
    display: inline-grid;
    align-content: start;
    gap: 0.2rem;
    min-width: 8rem;
    vertical-align: top;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    color: rgb(var(--gray-500));
    background-color: rgba(var(--primary-500), 0.045);
    box-shadow: inset 0 0 0 1px rgba(var(--primary-500), 0.1);
}

.bo-kpi :where(strong, b, dd, data, output) {
    display: block;
    margin: 0;
    font-size: 1.375rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: rgb(var(--gray-950));
    font-variant-numeric: tabular-nums;
}

.dark .bo-kpi {
    color: rgb(var(--gray-400));
    background-color: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px var(--bo-hairline);
}

.dark .bo-kpi :where(strong, b, dd, data, output) {
    color: #fff;
}

/* Maps: shared surfaces */

.bo-map {
    position: relative;
    overflow: hidden;
    border-radius: var(--bo-radius);
    background-color: rgb(var(--bo-surface));
    box-shadow: var(--bo-shadow);
}

.bo-map__stage {
    position: relative;
    height: clamp(32rem, calc(100dvh - 14.5rem), 80rem);
    background-color: rgb(var(--gray-100));
}

.bo-map__stage:fullscreen {
    height: 100%;
}

.bo-map__canvas {
    position: absolute;
    inset: 0;
}

.bo-map__veil {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background-color: rgba(var(--bo-canvas), 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.bo-map-glass {
    border-radius: 14px;
    background-color: rgba(var(--bo-surface), 0.9);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: var(--bo-shadow-raised);
}

.bo-map-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--bo-muted));
}

.bo-map-loading__spinner {
    width: 1.75rem;
    height: 1.75rem;
    color: rgb(var(--primary-600));
}

.dark .bo-map-loading__spinner {
    color: rgb(var(--primary-400));
}

.bo-map-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 30rem;
    margin: 0 auto;
    padding: 4.5rem 1.5rem;
    text-align: center;
}

.bo-map--disconnected .bo-map-empty {
    min-height: clamp(26rem, calc(100dvh - 14rem), 40rem);
    justify-content: center;
}

.bo-map-empty__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1.1rem;
    border-radius: 999px;
    color: rgb(var(--primary-600));
    background-image: linear-gradient(135deg, rgba(var(--bo-blue), 0.14), rgba(var(--bo-red), 0.1));
    box-shadow: inset 0 0 0 1px rgba(var(--bo-blue), 0.14);
}

.bo-map-empty__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.bo-map-empty__heading {
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: rgb(var(--gray-950));
    text-wrap: balance;
}

.bo-map-empty__text {
    margin: 0.4rem 0 1.1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgb(var(--bo-muted));
    text-wrap: pretty;
}

.bo-map-empty__text code {
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 600;
    color: rgb(var(--primary-700));
    background-color: rgba(var(--primary-500), 0.09);
}

.bo-map-empty--problem .bo-map-empty__icon {
    color: rgb(var(--accent-600));
    background-image: linear-gradient(135deg, rgba(var(--bo-red), 0.16), rgba(var(--bo-red), 0.06));
    box-shadow: inset 0 0 0 1px rgba(var(--bo-red), 0.18);
}

.bo-map-empty--compact {
    padding: 2rem 1rem;
}

.bo-map-empty--compact .bo-map-empty__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.75rem;
}

.bo-map-empty--compact .bo-map-empty__icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.bo-map-empty--compact .bo-map-empty__heading {
    font-size: 0.9375rem;
}

.bo-map-empty--compact .bo-map-empty__text {
    margin-bottom: 0;
    font-size: 0.8125rem;
}

.dark .bo-map__stage {
    background-color: rgb(var(--gray-800));
}

.dark .bo-map-glass {
    background-color: rgba(var(--gray-900), 0.86);
}

.dark .bo-map-empty__heading {
    color: #fff;
}

.dark .bo-map-empty__icon {
    color: rgb(var(--primary-300));
}

.dark .bo-map-empty--problem .bo-map-empty__icon {
    color: rgb(var(--accent-400));
}

.dark .bo-map-empty__text code {
    color: rgb(var(--primary-200));
    background-color: rgba(var(--primary-400), 0.16);
}

/* Maps: colour swatches, one per layer or shape, coloured by --bo-layer */

.bo-map-layer__swatch,
.bo-map-swatch {
    flex-shrink: 0;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 5px;
    background: var(--bo-layer-fill, color-mix(in srgb, var(--bo-layer) 42%, transparent));
    box-shadow:
        inset 0 0 0 2px var(--bo-layer),
        0 0 0 1px var(--bo-hairline);
}

.bo-map-layer__swatch--open {
    box-shadow: 0 0 0 1px var(--bo-hairline);
}

.bo-map-layer__swatch--mismatch {
    box-shadow:
        inset 0 0 0 2px var(--bo-layer),
        0 0 0 1.5px rgb(var(--bo-red));
}

.bo-map-layer__swatch--retired,
.bo-map-swatch[data-tone='context'] {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px rgb(var(--gray-400));
}

.bo-map-layer__swatch--point,
.bo-map-swatch--point {
    width: 0.7rem;
    height: 0.7rem;
    margin: 0.125rem;
    border-radius: 999px;
    background: var(--bo-layer);
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 3px var(--bo-hairline);
}

.bo-map-swatch--outline {
    background: transparent;
}

.bo-map-swatch--dashed {
    background: color-mix(in srgb, var(--bo-layer) 18%, transparent);
    box-shadow: none;
    outline: 2px dashed var(--bo-layer);
    outline-offset: -2px;
}

.bo-map-layer__swatch--attention {
    box-shadow:
        inset 0 0 0 2px var(--bo-layer),
        0 0 0 3px color-mix(in srgb, var(--bo-layer) 28%, transparent);
}

/* City map: search, filters and layers */

.bo-map-panel {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: 21.5rem;
    max-height: calc(100% - 1.5rem);
}

.bo-map-search {
    position: relative;
    padding: 0.6rem 0.6rem 0.35rem;
}

.fi-body .bo-map-search__field {
    border-radius: 10px;
}

.bo-map-results {
    position: absolute;
    top: calc(100% - 0.1rem);
    left: 0.6rem;
    right: 0.6rem;
    z-index: 4;
    max-height: 20rem;
    margin: 0;
    padding: 0.3rem;
    overflow-y: auto;
    list-style: none;
    border-radius: 12px;
    background-color: rgb(var(--bo-surface));
    box-shadow: var(--bo-shadow-raised);
}

.bo-map-results--empty {
    padding: 0.85rem 1rem;
    font-size: 0.8125rem;
    color: rgb(var(--bo-muted));
}

.bo-map-result {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    text-align: start;
    transition: background-color 0.15s var(--bo-ease);
}

.bo-map-result--active:not(:disabled) {
    background-color: rgba(var(--primary-500), 0.08);
}

.bo-map-result:disabled {
    cursor: default;
    opacity: 0.55;
}

.bo-map-result__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(var(--gray-950));
    font-variant-numeric: tabular-nums;
}

.bo-map-result__detail {
    font-size: 0.75rem;
    color: rgb(var(--bo-muted));
}

.bo-map-panel__toggle {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.95rem 0.5rem;
    text-align: start;
}

.bo-map-panel__title {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
}

.bo-map-panel__summary {
    flex: 1;
    font-size: 0.75rem;
    color: rgb(var(--bo-muted));
    font-variant-numeric: tabular-nums;
}

.bo-map-panel__chevron {
    width: 1rem;
    height: 1rem;
    align-self: center;
    color: rgb(var(--gray-400));
    transition: transform 0.2s var(--bo-ease);
}

.bo-map-panel__toggle[aria-expanded='false'] .bo-map-panel__chevron {
    transform: rotate(-90deg);
}

.bo-map-panel__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--gray-400), 0.35) transparent;
}

.bo-map-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0 0.6rem 0.5rem;
}

.fi-body .bo-map-filters .fi-input-wrp {
    border-radius: 10px;
}

.bo-map-layers {
    margin: 0;
    padding: 0 0.35rem 0.35rem;
    list-style: none;
}

.bo-map-layers__item {
    position: relative;
}

.bo-map-layer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.7rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    text-align: start;
    transition:
        background-color 0.15s var(--bo-ease),
        opacity 0.2s var(--bo-ease);
}

.bo-map-layer:hover {
    background-color: rgba(var(--primary-500), 0.06);
}

.bo-map-layer:focus-visible,
.bo-map-layer__only:focus-visible,
.bo-map-panel__toggle:focus-visible,
.bo-map-panel__reset:focus-visible,
.bo-map-parcel:focus-visible,
.bo-map-stacked:focus-visible,
.bo-map-card__retry:focus-visible,
.bo-map-card__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-500), 0.65);
}

.bo-map-layer .bo-map-layer__swatch {
    margin-top: 0.15rem;
    transition: opacity 0.2s var(--bo-ease);
}

.bo-map-layer__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.bo-map-layer__label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: rgb(var(--gray-950));
}

.bo-map-layer__description {
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgb(var(--bo-muted));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bo-map-layer__count {
    min-width: 2.5rem;
    padding-top: 0.05rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: end;
    color: rgb(var(--gray-700));
    font-variant-numeric: tabular-nums;
    transition: opacity 0.15s var(--bo-ease);
}

.bo-map-layer--off .bo-map-layer__swatch {
    opacity: 0.25;
}

.bo-map-layer--off .bo-map-layer__label,
.bo-map-layer--off .bo-map-layer__count {
    color: rgb(var(--gray-400));
}

.bo-map-layer__only {
    display: none;
    position: absolute;
    top: 0.45rem;
    right: 0.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgb(var(--primary-700));
    background-color: rgb(var(--bo-surface));
    box-shadow: inset 0 0 0 1px rgba(var(--primary-500), 0.3);
    opacity: 0;
    transition: opacity 0.15s var(--bo-ease);
}

@media (hover: hover) {
    .bo-map-layer__only {
        display: block;
    }

    .bo-map-layers__item:hover .bo-map-layer__only,
    .bo-map-layer__only:focus-visible {
        opacity: 1;
    }

    .bo-map-layers__item:hover .bo-map-layer__count,
    .bo-map-layers__item:has(.bo-map-layer__only:focus-visible) .bo-map-layer__count {
        opacity: 0;
    }
}

.bo-map-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.85rem;
    margin: -0.15rem 0 0.35rem;
    padding: 0 0.6rem 0 2.25rem;
    list-style: none;
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgb(var(--gray-600));
}

.bo-map-stages li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bo-map-stages li::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background-color: var(--bo-layer);
}

.bo-map-panel__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.75rem;
    padding: 0.55rem 0.95rem 0.75rem;
    border-top: 1px solid var(--bo-hairline);
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgb(var(--bo-muted));
}

.bo-map-panel__note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bo-map-panel__note .bo-map-swatch {
    width: 0.8rem;
    height: 0.8rem;
}

.bo-map-panel__reset {
    margin-inline-start: auto;
    border-radius: 6px;
    font-weight: 600;
    color: rgb(var(--primary-600));
}

.dark .bo-map-result__title,
.dark .bo-map-layer__label {
    color: #fff;
}

.dark .bo-map-layer__count {
    color: rgb(var(--gray-300));
}

.dark .bo-map-layer--off .bo-map-layer__label,
.dark .bo-map-layer--off .bo-map-layer__count {
    color: rgb(var(--gray-600));
}

.dark .bo-map-layer:hover,
.dark .bo-map-result--active:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .bo-map-results {
    background-color: rgb(var(--gray-900));
}

.dark .bo-map-stages {
    color: rgb(var(--gray-400));
}

.dark .bo-map-layer__only {
    color: rgb(var(--primary-200));
    background-color: rgb(var(--gray-900));
}

.dark .bo-map-panel__reset {
    color: rgb(var(--primary-300));
}

/* City map: map style, fit and full screen */

.bo-map-tools {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fi-body .bo-map-tools__style.fi-tabs {
    padding: 0.25rem;
    border-radius: 12px;
    background-color: rgba(var(--bo-surface), 0.9);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: var(--bo-shadow-raised);
}

.fi-body .bo-map-tools__style .fi-tabs-item {
    padding-block: 0.35rem;
}

.bo-map-tools__buttons {
    display: flex;
    padding: 0.25rem;
    border-radius: 12px;
}

.dark .bo-map-tools__style.fi-tabs {
    background-color: rgba(var(--gray-900), 0.86);
}

.bo-map-readout {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    z-index: 2;
    max-width: min(30rem, calc(100% - 2rem));
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgb(var(--gray-800));
    font-variant-numeric: tabular-nums;
    transform: translateX(-50%);
    pointer-events: none;
}

.dark .bo-map-readout {
    color: rgb(var(--gray-100));
}

/* City map: the card of the parcel or survey picked on the map */

.bo-map-card {
    --bo-layer: rgb(var(--bo-blue));
    position: absolute;
    top: 4.25rem;
    right: 0.75rem;
    z-index: 3;
    width: 22.5rem;
    max-height: calc(100% - 11rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.bo-map-card::before {
    content: '';
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    height: 3px;
    background-color: var(--bo-layer);
}

.bo-map-card--entering {
    transition:
        opacity 0.25s var(--bo-ease),
        transform 0.25s var(--bo-ease);
}

.bo-map-card--from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
}

.bo-map-card__header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.85rem 0.6rem 0.25rem 1.1rem;
}

.bo-map-card__heading {
    flex: 1;
    min-width: 0;
}

.bo-map-card__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
}

.bo-map-card__dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background-color: var(--bo-layer);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bo-layer) 22%, transparent);
}

.bo-map-card__title {
    margin-top: 0.3rem;
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: rgb(var(--gray-950));
    overflow-wrap: anywhere;
}

.bo-map-card__skeleton {
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem 1.1rem 1.25rem;
}

.bo-map-card__skeleton span {
    height: 0.7rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--gray-400), 0.16), rgba(var(--gray-400), 0.28), rgba(var(--gray-400), 0.16));
    background-size: 200% 100%;
    animation: bo-shimmer 1.2s linear infinite;
}

.bo-map-card__skeleton span:nth-child(2) {
    width: 75%;
}

.bo-map-card__skeleton span:nth-child(3) {
    width: 55%;
}

.bo-map-card__gone {
    padding: 0.5rem 1.1rem 1.1rem;
    font-size: 0.8125rem;
    color: rgb(var(--bo-muted));
}

.bo-map-card__retry {
    border-radius: 6px;
    font-weight: 600;
    color: rgb(var(--primary-600));
}

.bo-map-card__body {
    padding: 0.5rem 1.1rem 1.1rem;
}

.bo-map-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.bo-map-badge {
    --bo-badge: var(--gray-500);
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
    color: rgb(var(--bo-badge));
    background-color: rgba(var(--bo-badge), 0.1);
    box-shadow: inset 0 0 0 1px rgba(var(--bo-badge), 0.2);
}

.bo-map-badge[data-color='primary'] {
    --bo-badge: var(--primary-600);
}

.bo-map-badge[data-color='success'] {
    --bo-badge: var(--success-600);
}

.bo-map-badge[data-color='warning'] {
    --bo-badge: var(--warning-600);
}

.bo-map-badge[data-color='danger'] {
    --bo-badge: var(--danger-600);
}

.bo-map-card__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin: 0 0 1rem;
}

.bo-map-card__facts dt {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
}

.bo-map-card__facts dd {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(var(--gray-950));
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.bo-map-card__subheading {
    margin-bottom: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
}

.bo-map-card__parcels ul {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bo-map-parcel {
    display: grid;
    gap: 0.2rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background-color: rgba(var(--primary-500), 0.04);
    box-shadow: inset 0 0 0 1px rgba(var(--primary-500), 0.1);
    transition:
        background-color 0.15s var(--bo-ease),
        box-shadow 0.15s var(--bo-ease);
}

a.bo-map-parcel[href]:hover {
    background-color: rgba(var(--primary-500), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--primary-500), 0.24);
}

.bo-map-parcel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.bo-map-parcel__title {
    font-size: 0.8125rem;
    font-weight: 650;
    color: rgb(var(--gray-950));
    font-variant-numeric: tabular-nums;
}

.bo-map-parcel__owners {
    font-size: 0.8125rem;
    color: rgb(var(--gray-700));
}

.bo-map-parcel__detail,
.bo-map-card__more {
    font-size: 0.72rem;
    color: rgb(var(--bo-muted));
    font-variant-numeric: tabular-nums;
}

.bo-map-card__more {
    margin-top: 0.45rem;
}

.bo-map-card__stack {
    margin-top: 1rem;
}

.bo-map-card__stack ul {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bo-map-stacked {
    width: 100%;
    padding: 0.45rem 0.75rem;
    border-radius: 9px;
    font-size: 0.78rem;
    text-align: start;
    color: rgb(var(--gray-700));
    background-color: rgba(var(--primary-500), 0.04);
    box-shadow: inset 0 0 0 1px rgba(var(--primary-500), 0.1);
    font-variant-numeric: tabular-nums;
    transition:
        background-color 0.15s var(--bo-ease),
        box-shadow 0.15s var(--bo-ease);
}

.bo-map-stacked:hover {
    background-color: rgba(var(--primary-500), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--primary-500), 0.24);
}

.bo-map-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--bo-hairline);
}

.bo-map-card__link {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border-radius: 9px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(var(--gray-700));
    background-color: rgb(var(--bo-surface));
    box-shadow:
        0 0 0 1px var(--bo-hairline),
        0 1px 2px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.15s var(--bo-ease);
}

.bo-map-card__link:hover {
    box-shadow:
        0 0 0 1px rgba(var(--primary-500), 0.25),
        0 2px 6px -2px rgba(15, 23, 42, 0.12);
}

.bo-map-card__link--primary {
    color: #fff;
    background-color: rgb(var(--primary-600));
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 1px 2px rgba(var(--primary-600), 0.3),
        0 6px 14px -6px rgba(var(--primary-600), 0.6);
}

.bo-map-card__link--primary:hover {
    background-color: rgb(var(--primary-500));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 6px 14px -6px rgba(var(--primary-600), 0.7);
}

.dark .bo-map-card__title,
.dark .bo-map-card__facts dd,
.dark .bo-map-parcel__title {
    color: #fff;
}

.dark .bo-map-card__facts dt,
.dark .bo-map-card__subheading,
.dark .bo-map-card__eyebrow {
    color: rgb(var(--gray-400));
}

.dark .bo-map-parcel {
    background-color: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px var(--bo-hairline);
}

.dark a.bo-map-parcel[href]:hover {
    background-color: rgba(var(--primary-400), 0.1);
}

.dark .bo-map-parcel__owners {
    color: rgb(var(--gray-300));
}

.dark .bo-map-stacked {
    color: rgb(var(--gray-300));
    background-color: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px var(--bo-hairline);
}

.dark .bo-map-stacked:hover {
    background-color: rgba(var(--primary-400), 0.1);
}

.dark .bo-map-card__retry {
    color: rgb(var(--primary-300));
}

.dark .bo-map-badge[data-color='primary'] {
    --bo-badge: var(--primary-400);
}

.dark .bo-map-badge[data-color='success'] {
    --bo-badge: var(--success-400);
}

.dark .bo-map-badge[data-color='warning'] {
    --bo-badge: var(--warning-400);
}

.dark .bo-map-badge[data-color='danger'] {
    --bo-badge: var(--danger-400);
}

.dark .bo-map-badge {
    --bo-badge: var(--gray-400);
}

.dark .bo-map-card__link:not(.bo-map-card__link--primary) {
    color: rgb(var(--gray-200));
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .bo-map-card__link--primary {
    background-color: rgb(var(--primary-500));
}

/* City map at phone width: the panel tops the map and the card rises from the bottom */

@media (max-width: 767px) {
    .bo-map__stage {
        height: max(32rem, calc(100dvh - 10rem));
    }

    .bo-map-panel {
        top: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        max-height: 58%;
    }

    .bo-map-tools {
        top: auto;
        right: auto;
        bottom: 0.75rem;
        left: 0.5rem;
    }

    .bo-map-readout {
        display: none;
    }

    .bo-map-card {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 4;
        width: auto;
        max-height: 62%;
        border-radius: 18px 18px 0 0;
    }
}

/* Parcel, survey and application pages: the read-only map */

.bo-parcel-map__frame {
    overflow: hidden;
    border-radius: 12px;
    box-shadow:
        0 0 0 1px var(--bo-hairline),
        0 1px 2px rgba(15, 23, 42, 0.05);
}

.bo-parcel-map__stage {
    position: relative;
    height: clamp(16rem, 40vh, 24rem);
    background-color: rgb(var(--gray-100));
}

.dark .bo-parcel-map__stage {
    background-color: rgb(var(--gray-800));
}

.bo-parcel-map .bo-map-empty--compact {
    max-width: none;
    border-radius: 12px;
    background-color: rgba(var(--primary-500), 0.03);
    box-shadow: inset 0 0 0 1px var(--bo-hairline);
}

.bo-parcel-map__stage .bo-map-empty--compact {
    background-color: transparent;
    box-shadow: none;
}

.bo-parcel-map__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
}

.bo-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: rgb(var(--gray-600));
}

.bo-map-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.dark .bo-map-legend {
    color: rgb(var(--gray-300));
}

/* Sign-in */

.bo-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

.bo-auth-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: var(--bo-flag);
}

.bo-auth-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(to top, rgba(10, 18, 44, 0.42), transparent 48%);
}

.dark .bo-auth-brand::before {
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.1), transparent 55%),
        linear-gradient(to top, rgba(2, 6, 23, 0.6), rgba(2, 6, 23, 0.15) 60%);
}

.bo-auth-brand-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        'chip chip'
        'copy boat';
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 1.5rem 1rem 5.5rem;
}

.bo-auth-chip {
    grid-area: chip;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.85rem 0.3rem 0.3rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

.bo-auth-chip img {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 22.4%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.bo-auth-boat {
    grid-area: boat;
    width: 6.5rem;
    height: auto;
    color: #fff;
    filter: drop-shadow(0 18px 30px rgba(8, 16, 44, 0.35));
    animation: bo-float 7s ease-in-out infinite;
}

.bo-auth-boat .bo-waves {
    animation: bo-drift 7s ease-in-out infinite;
}

.bo-auth-copy {
    grid-area: copy;
}

.bo-auth-title {
    max-width: 18ch;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.bo-auth-subtitle {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
}

.bo-auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -4rem;
    padding: 0 1rem 2.5rem;
}

.bo-auth-card {
    width: 100%;
    max-width: 26.5rem;
    padding: 2rem 1.5rem;
    border-radius: 22px;
    background-color: rgb(var(--bo-surface));
    box-shadow: var(--bo-shadow-raised);
    animation: bo-rise 0.6s var(--bo-ease) both;
}

.bo-auth-legal {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: rgb(var(--gray-400));
    text-align: center;
}

.bo-auth .fi-simple-header {
    align-items: flex-start;
}

.bo-auth .fi-simple-header-heading {
    font-size: 1.65rem;
    letter-spacing: -0.03em;
    text-align: start;
}

.bo-auth .fi-simple-header-subheading {
    margin-top: 0.35rem;
    text-align: start;
}

.bo-auth .fi-input-wrp {
    border-radius: 12px;
}

.bo-auth .fi-input {
    padding-block: 0.625rem;
}

.bo-auth .fi-btn {
    padding-block: 0.7rem;
    border-radius: 12px;
    font-size: 0.95rem;
}

.bo-auth-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bo-hairline);
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgb(var(--bo-muted));
}

.bo-auth-note-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.1rem;
    color: rgb(var(--primary-500));
}

.bo-auth-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

@media (min-width: 1024px) {
    .bo-auth {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    }

    .bo-auth-brand-inner {
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 2.75rem 3.5rem 3.25rem;
    }

    .bo-auth-chip {
        align-self: flex-start;
        font-size: 0.8rem;
    }

    .bo-auth-boat {
        flex: 1;
        align-self: center;
        width: clamp(15rem, 52%, 27rem);
        margin-block: 2rem;
    }

    .bo-auth-title {
        font-size: clamp(2rem, 2.6vw, 2.6rem);
        line-height: 1.08;
    }

    .bo-auth-subtitle {
        margin-top: 0.75rem;
        font-size: 1.1rem;
    }

    .bo-auth-main {
        justify-content: center;
        margin-top: 0;
        padding: 3rem 2rem;
    }

    .bo-auth-card {
        padding: 2.75rem 2.5rem;
        border-radius: 26px;
    }
}

/* Account: password and two-factor sign-in */
.bo-account-form,
.bo-account-stack {
    display: grid;
    gap: 1.25rem;
    font-size: 0.875rem;
    color: rgb(var(--gray-600));
}

.dark .bo-account-form,
.dark .bo-account-stack {
    color: rgb(var(--gray-300));
}

.bo-account-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.bo-account-setup {
    display: grid;
    gap: 1.5rem;
}

.bo-account-qr {
    justify-self: start;
    padding: 0.75rem;
    border-radius: var(--bo-radius-sm);
    background-color: #fff;
    box-shadow: var(--bo-shadow);
}

.bo-account-qr svg {
    display: block;
    width: 11rem;
    height: 11rem;
}

.bo-account-steps {
    display: grid;
    gap: 0.6rem;
    padding-inline-start: 1.1rem;
    list-style: decimal;
}

.bo-account-key,
.bo-recovery-codes {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--gray-950));
}

.dark .bo-account-key,
.dark .bo-recovery-codes {
    color: rgb(var(--gray-50));
}

.bo-account-key {
    display: block;
    width: fit-content;
    margin-top: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    background-color: rgb(var(--gray-100));
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
}

.dark .bo-account-key {
    background-color: rgb(var(--gray-800));
}

.bo-recovery {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border-radius: var(--bo-radius-sm);
    background-color: rgba(var(--warning-500), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--warning-500), 0.3);
}

.bo-recovery-heading strong {
    display: block;
    margin-bottom: 0.2rem;
    color: rgb(var(--gray-950));
}

.dark .bo-recovery-heading strong {
    color: rgb(var(--gray-50));
}

.bo-recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: 0.4rem 1rem;
    font-size: 0.85rem;
}

@media (min-width: 640px) {
    .bo-account-setup {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }
}

@keyframes bo-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes bo-drift {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(14px);
    }
}

@keyframes bo-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes bo-shimmer {
    to {
        background-position: -200% 0;
    }
}

@keyframes bo-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--bo-pulse), 0.45);
    }

    70%,
    100% {
        box-shadow: 0 0 0 10px rgba(var(--bo-pulse), 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-auth-boat,
    .bo-auth-boat .bo-waves,
    .bo-auth-card,
    .bo-step__dot::before,
    .bo-map-card__skeleton span {
        animation: none;
    }

    .bo-map-card--entering {
        transition: none;
    }

    .fi-body .fi-wi-stats-overview-stat:hover,
    .fi-body .fi-btn:active,
    a.bo-stat:hover::after {
        transform: none;
    }
}