/**
 * BMN dashboard kit — KPI rows, stat tiles, charts, skeletons, empty states.
 *
 * Token-only (visual cohesion system v1 + chart/motion roles registered
 * 2026-10-12): every color, radius, shadow and duration is a --bmn-* role, so
 * light, dark and the forced-light regions resolve without overrides here.
 * Values never wear series or status color; marks do. Motion is limited to
 * the first-paint settle (once per session, never under reduced motion), the
 * refetch dim, and border/shadow feedback on interactive tiles.
 *
 * @package MLS_Listings_Display
 */

.bmn-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------- Section header */

.bmn-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.bmn-section-header__title {
    margin: 0;
    color: var(--bmn-text);
    font-family: var(--bne-font-primary, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

.bmn-section-header__caption {
    margin: 2px 0 0;
    color: var(--bmn-text-3);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.bmn-section-header__actions {
    display: flex;
    gap: 8px;
}

.bmn-section-header__action {
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--bmn-accent);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.bmn-section-header__action:hover {
    color: var(--bmn-accent-hover);
    text-decoration: underline;
}

/* -------------------------------------------------------------------- KPI row */

.bmn-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 24px;
    transition: opacity var(--bmn-motion-base) var(--bmn-ease-out);
}

.bmn-kpi-row[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.bmn-kpi-row[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bmn-kpi-row[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bmn-kpi-row.is-refreshing,
.bmn-chart.is-refreshing .bmn-chart__body {
    opacity: 0.6;
}

/* ----------------------------------------------------------------- Stat tile */

.bmn-stat-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--bmn-border);
    border-radius: var(--bmn-radius-md);
    background: var(--bmn-raised);
    box-shadow: var(--bmn-shadow-xs);
    color: var(--bmn-text);
    font-family: var(--bne-font-primary, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    text-align: left;
    text-decoration: none;
}

.bmn-stat-tile.is-interactive {
    cursor: pointer;
    transition:
        border-color var(--bmn-motion-fast) var(--bmn-ease-out),
        box-shadow var(--bmn-motion-fast) var(--bmn-ease-out);
}

.bmn-stat-tile.is-interactive:hover {
    border-color: var(--bmn-border-strong);
    box-shadow: var(--bmn-shadow-sm);
}

.bmn-stat-tile.is-interactive:focus-visible {
    outline: 2px solid var(--bmn-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--bmn-focus-ring);
}

.bmn-stat-tile__label {
    color: var(--bmn-text-2);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}

.bmn-stat-tile__value {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--bmn-text);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-variant-numeric: proportional-nums;
}

.bmn-stat-tile.is-unavailable .bmn-stat-tile__value {
    color: var(--bmn-text-3);
}

.bmn-stat-tile__partial {
    color: var(--bmn-text-3);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
}

.bmn-stat-tile__detail {
    color: var(--bmn-text-3);
    font-size: 0.75rem;
    line-height: 1.4;
}

.bmn-stat-tile__delta {
    color: var(--bmn-text-2);
    font-size: 0.75rem;
    font-weight: 600;
}

.bmn-stat-tile__delta.is-success { color: var(--bmn-success); }
.bmn-stat-tile__delta.is-error { color: var(--bmn-error); }

.bmn-stat-tile__trend {
    margin-top: 4px;
}

/* Status chip: icon + label on a tint; never color alone. */
.bmn-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    padding: 2px 8px 2px 4px;
    border-radius: var(--bmn-radius-pill);
    background: var(--bmn-card);
    color: var(--bmn-text-2);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
}

.bmn-status-chip__icon {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: var(--bmn-radius-pill);
    background: var(--bmn-text-3);
    color: var(--bmn-text-inverse);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}

.bmn-status-chip--critical,
.bmn-status-chip--error { background: var(--bmn-error-tint); color: var(--bmn-error); }
.bmn-status-chip--critical .bmn-status-chip__icon,
.bmn-status-chip--error .bmn-status-chip__icon { background: var(--bmn-error); }
.bmn-status-chip--warning { background: var(--bmn-warning-tint); color: var(--bmn-warning); }
.bmn-status-chip--warning .bmn-status-chip__icon { background: var(--bmn-warning); }
.bmn-status-chip--success { background: var(--bmn-success-tint); color: var(--bmn-success); }
.bmn-status-chip--success .bmn-status-chip__icon { background: var(--bmn-success); }
.bmn-status-chip--info { background: var(--bmn-info-tint); color: var(--bmn-info); }
.bmn-status-chip--info .bmn-status-chip__icon { background: var(--bmn-info); }

/* In dark, the status hues are light tones: the glyph sits on them in canvas ink. */
html[data-appearance="dark"] .bmn-status-chip__icon {
    color: var(--bmn-canvas);
}

/* ----------------------------------------------------------------- Sparkline */

.bmn-sparkline {
    display: block;
    overflow: visible;
}

.bmn-sparkline__line {
    fill: none;
    stroke: var(--bmn-chart-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bmn-sparkline__dot {
    fill: var(--bmn-chart-1);
    stroke: var(--bmn-raised);
    stroke-width: 2;
}

/* ------------------------------------------------------------------- Charts */

.bmn-chart-host {
    min-width: 0;
}

.bmn-chart {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--bmn-border);
    border-radius: var(--bmn-radius-md);
    background: var(--bmn-raised);
    box-shadow: var(--bmn-shadow-xs);
    color: var(--bmn-text);
    font-family: var(--bne-font-primary, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

.bmn-chart__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 0 0 12px;
}

.bmn-chart__titles {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.bmn-chart__title {
    color: var(--bmn-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.bmn-chart__caption {
    color: var(--bmn-text-3);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.bmn-chart__toggle {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--bmn-border);
    border-radius: var(--bmn-radius-pill);
    background: var(--bmn-raised);
    color: var(--bmn-accent);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--bmn-motion-fast) var(--bmn-ease-out);
}

.bmn-chart__toggle:hover {
    border-color: var(--bmn-border-strong);
}

.bmn-chart__toggle:focus-visible,
.bmn-chart__plot:focus-visible {
    outline: 2px solid var(--bmn-accent);
    outline-offset: 2px;
}

.bmn-chart__body {
    transition: opacity var(--bmn-motion-base) var(--bmn-ease-out);
}

.bmn-chart__plot {
    position: relative;
    width: 100%;
    border-radius: var(--bmn-radius-sm);
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.bmn-chart__svg {
    display: block;
    overflow: visible;
}

.bmn-chart__gridline {
    stroke: var(--bmn-chart-grid);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.bmn-chart__gridline.is-baseline {
    stroke: var(--bmn-chart-axis);
}

.bmn-chart__tick {
    fill: var(--bmn-text-3);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.bmn-chart__line {
    fill: none;
    stroke: var(--bmn-chart-1);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bmn-chart__area {
    fill: var(--bmn-chart-1);
    fill-opacity: 0.1;
    stroke: none;
}

.bmn-chart__end-label,
.bmn-chart__value-label {
    fill: var(--bmn-text);
    font-size: 12px;
    font-weight: 600;
}

.bmn-chart__reference {
    stroke: var(--bmn-chart-axis);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.bmn-chart__reference-label {
    fill: var(--bmn-text-3);
    font-size: 11px;
    font-weight: 500;
}

.bmn-chart__crosshair {
    stroke: var(--bmn-chart-axis);
    stroke-width: 1;
    shape-rendering: crispEdges;
    pointer-events: none;
}

.bmn-chart__dot {
    fill: var(--bmn-chart-1);
    stroke: var(--bmn-raised);
    stroke-width: 2;
    pointer-events: none;
}

.bmn-chart__column {
    fill: var(--bmn-chart-1);
    transition: fill-opacity var(--bmn-motion-fast) var(--bmn-ease-out);
}

.bmn-chart__column.is-dimmed {
    fill-opacity: 0.55;
}

.bmn-chart__hit {
    fill: transparent;
    stroke: none;
    cursor: crosshair;
}

.bmn-column-chart .bmn-chart__hit {
    cursor: pointer;
}

.bmn-chart__tooltip {
    position: absolute;
    z-index: 2;
    display: grid;
    gap: 2px;
    width: max-content;
    min-width: 112px;
    max-width: 220px;
    padding: 8px 10px;
    border: 1px solid var(--bmn-border-strong);
    border-radius: var(--bmn-radius-sm);
    background: var(--bmn-overlay);
    box-shadow: var(--bmn-shadow-md);
    color: var(--bmn-text);
    pointer-events: none;
    transform: translate(-50%, -100%);
    white-space: nowrap;
}

.bmn-chart__tooltip.is-below {
    transform: translate(-50%, 0);
}

.bmn-chart__tooltip-value {
    color: var(--bmn-text);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.bmn-chart__tooltip-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bmn-text-2);
    font-size: 0.75rem;
    line-height: 1.35;
}

/* Tooltip keys mirror the mark: a short stroke for lines, a block for bars. */
.bmn-chart__key {
    display: inline-block;
    flex: 0 0 auto;
    width: 12px;
    background: var(--bmn-chart-1);
}

.bmn-chart__key--line {
    height: 2px;
    border-radius: 1px;
}

.bmn-chart__key--bar {
    height: 8px;
    border-radius: 2px;
}

.bmn-chart__table-wrap {
    overflow-x: auto;
}

.bmn-chart__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.bmn-chart__table th,
.bmn-chart__table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--bmn-border);
    color: var(--bmn-text);
    text-align: left;
}

.bmn-chart__table thead th {
    color: var(--bmn-text-3);
    font-size: 0.75rem;
    font-weight: 600;
}

.bmn-chart__table tbody th {
    font-weight: 500;
}

.bmn-chart__table .is-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- Funnel */

.bmn-funnel,
.bmn-bar-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bmn-funnel__stage {
    display: grid;
    grid-template-columns: minmax(96px, 30%) minmax(0, 1fr);
    align-items: center;
    gap: 2px 12px;
    width: 100%;
    min-height: 44px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--bmn-text);
    font: inherit;
    text-align: left;
}

button.bmn-funnel__stage {
    cursor: pointer;
}

button.bmn-funnel__stage:focus-visible {
    outline: 2px solid var(--bmn-accent);
    outline-offset: 2px;
    border-radius: var(--bmn-radius-sm);
}

.bmn-funnel__stage.is-active .bmn-funnel__label {
    color: var(--bmn-accent);
    font-weight: 600;
}

.bmn-funnel__label {
    color: var(--bmn-text-2);
    font-size: 0.875rem;
    line-height: 1.35;
}

.bmn-funnel__track,
.bmn-bar-list__track {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bmn-funnel__bar,
.bmn-bar-list__bar {
    display: block;
    flex: 0 1 auto;
    height: 20px;
    border-radius: 0 var(--bmn-radius-xs) var(--bmn-radius-xs) 0;
}

.bmn-funnel__bar--1 { background: var(--bmn-chart-seq-1); }
.bmn-funnel__bar--2 { background: var(--bmn-chart-seq-2); }
.bmn-funnel__bar--3 { background: var(--bmn-chart-seq-3); }
.bmn-funnel__bar--4 { background: var(--bmn-chart-seq-4); }
.bmn-funnel__bar--5 { background: var(--bmn-chart-seq-5); }

.bmn-funnel__value,
.bmn-bar-list__value {
    flex: 0 0 auto;
    color: var(--bmn-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.bmn-funnel__conversion {
    grid-column: 2;
    color: var(--bmn-text-3);
    font-size: 0.75rem;
}

.bmn-bar-list__row {
    display: grid;
    gap: 4px;
}

.bmn-bar-list__label {
    color: var(--bmn-text-2);
    font-size: 0.875rem;
}

.bmn-bar-list__bar {
    height: 12px;
    background: var(--bmn-chart-1);
}

/* ------------------------------------------------------------------- Meter */

.bmn-meter {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.bmn-meter__track {
    position: relative;
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: var(--bmn-radius-pill);
    background: var(--bmn-chart-track);
    box-shadow: inset 0 0 0 1px var(--bmn-border);
}

.bmn-meter__fill {
    display: block;
    height: 100%;
    border-radius: var(--bmn-radius-pill);
    background: var(--bmn-chart-1);
}

.bmn-meter__text {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: var(--bmn-text-3);
    font-size: 0.75rem;
}

.bmn-meter__met {
    display: inline-flex;
    gap: 4px;
    color: var(--bmn-success);
    font-weight: 600;
}

/* ---------------------------------------------------------------- Skeleton */

.bmn-skeleton {
    display: block;
    border-radius: var(--bmn-radius-xs);
    background-color: var(--bmn-border);
    background-image: linear-gradient(90deg, transparent 0%, var(--bmn-card) 50%, transparent 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: 150% 0;
}

.bmn-skeleton--label { width: 56%; height: 12px; }
.bmn-skeleton--value { width: 44%; height: 28px; margin: 2px 0; }
.bmn-skeleton--detail { width: 72%; height: 10px; }
.bmn-skeleton--row { width: 100%; height: 56px; border-radius: var(--bmn-radius-md); }
.bmn-skeleton--card { flex: 0 0 240px; height: 180px; border-radius: var(--bmn-radius-md); }
.bmn-skeleton--chart { width: 100%; height: 220px; border-radius: var(--bmn-radius-md); }

.bmn-stat-tile__value--loading {
    width: 100%;
}

.bmn-skeleton-group {
    display: grid;
    gap: 12px;
}

.bmn-skeleton-group--kpi,
.bmn-skeleton-group--tile {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 24px;
}

.bmn-skeleton-group--kpi[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bmn-skeleton-group--kpi[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bmn-skeleton-group--tile[data-count="1"] { grid-template-columns: minmax(0, 1fr); }

.bmn-skeleton-group--rail {
    display: flex;
    overflow: hidden;
}

/* -------------------------------------------------------------- Empty state */

.bmn-empty-state {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 32px 20px;
    border: 1px solid var(--bmn-border);
    border-radius: var(--bmn-radius-md);
    background: var(--bmn-raised);
    color: var(--bmn-text);
    text-align: center;
}

.bmn-empty-state__glyph {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--bmn-radius-pill);
    background: var(--bmn-card);
    color: var(--bmn-text-3);
    font-size: 1.25rem;
}

.bmn-empty-state__title {
    margin: 4px 0 0;
    color: var(--bmn-text);
    font-size: 1rem;
    font-weight: 600;
}

.bmn-empty-state__body {
    max-width: 44ch;
    margin: 0;
    color: var(--bmn-text-2);
    font-size: 0.875rem;
    line-height: 1.5;
}

.bmn-empty-state__action {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 8px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--bmn-radius-sm);
    background: var(--bmn-action);
    color: var(--bmn-text-inverse);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.bmn-empty-state__action:hover {
    background: var(--bmn-action-hover);
}

/* ------------------------------------------------------------------ Phone */

@media (max-width: 760px) {
    .bmn-kpi-row,
    .bmn-kpi-row[data-count="3"],
    .bmn-kpi-row[data-count="4"],
    .bmn-skeleton-group--kpi,
    .bmn-skeleton-group--kpi[data-count="3"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    /* Three tiles: the first spans the row so no cell is orphaned. */
    .bmn-kpi-row[data-count="3"] > :first-child,
    .bmn-skeleton-group--kpi[data-count="3"] > .bmn-stat-tile:first-of-type {
        grid-column: 1 / -1;
    }

    .bmn-kpi-row[data-count="1"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .bmn-stat-tile {
        padding: 12px;
    }

    .bmn-stat-tile__value {
        font-size: 1.5rem;
    }

    .bmn-chart {
        padding: 12px;
    }

    .bmn-chart__header {
        align-items: center;
    }

    .bmn-chart__tooltip {
        max-width: 180px;
        white-space: normal;
    }

    .bmn-funnel__stage {
        grid-template-columns: minmax(0, 1fr);
    }

    .bmn-funnel__conversion {
        grid-column: 1;
    }
}

/* ------------------------------------------------------------------ Motion */

/* The one orchestrated moment: on the first paint of a dashboard in a session,
   KPI values settle and charts draw from their baseline. Refetches never
   replay it, and reduced motion never sees it (the class is not even set). */
@media (prefers-reduced-motion: no-preference) {
    @keyframes bmn-settle {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes bmn-draw {
        from { stroke-dashoffset: 1; }
        to { stroke-dashoffset: 0; }
    }

    @keyframes bmn-rise {
        from { transform: scaleY(0); }
        to { transform: scaleY(1); }
    }

    @keyframes bmn-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes bmn-skeleton {
        from { background-position: 150% 0; }
        to { background-position: -50% 0; }
    }

    .bmn-kpi-row.is-settling .bmn-stat-tile__value,
    .bmn-kpi-row.is-settling .bmn-stat-tile__detail,
    .bmn-kpi-row.is-settling .bmn-status-chip {
        animation: bmn-settle var(--bmn-motion-slow) var(--bmn-ease-out) both;
        animation-delay: calc(var(--bmn-kit-settle-index) * 40ms);
    }

    .bmn-chart.is-settling .bmn-chart__line {
        stroke-dasharray: 1;
        animation: bmn-draw var(--bmn-motion-slow) var(--bmn-ease-out) both;
    }

    .bmn-chart.is-settling .bmn-chart__area,
    .bmn-chart.is-settling .bmn-chart__end-label,
    .bmn-chart.is-settling .bmn-chart__value-label {
        animation: bmn-fade var(--bmn-motion-slow) var(--bmn-ease-out) both;
    }

    .bmn-chart.is-settling .bmn-chart__column {
        transform-box: fill-box;
        transform-origin: 50% 100%;
        animation: bmn-rise var(--bmn-motion-slow) var(--bmn-ease-out) both;
        animation-delay: calc(var(--bmn-kit-settle-index) * 16ms);
    }

    .bmn-skeleton {
        animation: bmn-skeleton 1.2s linear infinite;
    }
}