@layer components {

    /* ==========================================
       PRODUCTION TIMELINE (24h on/off bar)
       ========================================== */

    .production-timeline {
        margin-block: 1em;
    }

    .production-timeline__header {
        align-items: center;
        display: flex;
        gap: 0.75em;
        margin-block-end: 0.4em;
    }

    .production-timeline__label {
        color: var(--color-ink-dark);
        font-size: var(--text-x-small);
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .production-timeline__status {
        background-color: var(--color-ink-lighter);
        border-radius: 0.25em;
        color: var(--color-ink-medium);
        font-size: var(--text-x-small);
        font-weight: 600;
        padding: 0.15em 0.4em;
    }

    .production-timeline__status--on {
        background-color: oklch(var(--lch-green-lighter, 95% 0.03 145));
        color: oklch(var(--lch-green-dark));
    }

    .production-timeline__bar {
        background-color: var(--color-ink-lighter);
        border-radius: 0.25em;
        block-size: 1.25em;
        position: relative;
        overflow: hidden;
    }

    .production-timeline__segment {
        background-color: var(--color-ink-light);
        block-size: 100%;
        position: absolute;
        top: 0;
    }

    .production-timeline__segment--on {
        background-color: oklch(var(--lch-green-medium));
    }

    .production-timeline__midnight {
        border-inline-start: 1px dashed var(--color-ink-dark);
        block-size: 100%;
        position: absolute;
        top: 0;
    }

    .production-timeline__midnight-label {
        background-color: var(--color-ink-dark);
        border-radius: 0.2em;
        color: var(--color-ink-inverted);
        font-size: 0.6rem;
        font-weight: 600;
        padding: 0.1em 0.3em;
        position: absolute;
        top: -1.5em;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .production-timeline__labels {
        color: var(--color-ink-medium);
        display: flex;
        font-size: var(--text-x-small);
        justify-content: space-between;
        margin-block-start: 0.25em;
    }

    /* ==========================================
       GROUPED MEASUREMENTS (compact)
       ========================================== */

    .asset-measurements-grouped {
        display: grid;
        gap: 0.5em;
        margin-block-start: 1em;
    }

    @media (min-width: 100ch) {
        .asset-measurements-grouped {
            grid-template-columns: auto 1fr;
        }

        .asset-group {
            grid-column: span 2;
            grid-template-columns: subgrid;
        }
    }

    .asset-group {
        align-items: center;
        display: grid;
        gap: 0.75em;
    }

    .asset-group__label {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4em;

        & .machine-body {
            --machine-body-height: 1.6em;

            margin-inline-start: 0.3em;
        }
    }

    .asset-group__icon {
        --icon-size: 1em;

        color: var(--color-ink-medium);
    }

    .asset-group__title {
        color: var(--color-ink-dark);
        font-size: var(--text-x-small);
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .asset-group__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35em;
    }

    /* ==========================================
       MEASUREMENT CHIPS
       ========================================== */

    .asset-measurement-chip {
        --chip-color: oklch(var(--lch-green-medium));

        align-items: baseline;
        background-color: var(--color-ink-lightest);
        border-inline-start: 2px solid var(--chip-color);
        border-radius: 0.25em;
        color: var(--color-ink);
        display: inline-flex;
        font-size: var(--text-small);
        gap: 0.4em;
        padding: 0.35em 0.6em;
        text-decoration: none;
        transition: background-color 100ms ease-out;
    }

    .asset-measurement-chip:hover {
        background-color: oklch(var(--lch-green-lighter, 95% 0.03 145));
    }

    .asset-measurement-chip--warning {
        --chip-color: oklch(var(--lch-yellow-medium));
    }

    .asset-measurement-chip--warning:hover {
        background-color: oklch(var(--lch-yellow-lighter));
    }

    .asset-measurement-chip--critical {
        --chip-color: oklch(var(--lch-red-medium));
    }

    .asset-measurement-chip--critical:hover {
        background-color: oklch(var(--lch-red-lighter));
    }

    .asset-measurement-chip__label {
        color: var(--color-ink-dark);
        font-weight: 500;
    }

    .asset-measurement-chip__value {
        font-variant-numeric: tabular-nums;
        font-weight: 600;
    }

    .asset-measurement-chip__unit {
        color: var(--color-ink-medium);
        font-size: 0.85em;
    }

    .asset-measurement-chip__no-data {
        color: var(--color-ink-light);
    }

    /* Tooltip for additional metrics */
    .asset-measurement-chip--has-metrics {
        position: relative;
    }

    .asset-measurement-chip__tooltip {
        background-color: var(--color-ink);
        border-radius: 0.4em;
        bottom: 100%;
        box-shadow: 0 4px 12px oklch(0% 0 0 / 20%);
        color: var(--color-ink-inverted);
        display: none;
        flex-direction: column;
        font-size: var(--text-x-small);
        gap: 0.25em;
        left: 50%;
        margin-bottom: 0.5em;
        padding: 0.6em 0.8em;
        position: absolute;
        transform: translateX(-50%);
        white-space: nowrap;
        z-index: var(--z-tooltip, 100);
    }

    .asset-measurement-chip__tooltip::after {
        border: 6px solid transparent;
        border-top-color: var(--color-ink);
        bottom: -12px;
        content: "";
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
    }

    .asset-measurement-chip--has-metrics:hover .asset-measurement-chip__tooltip,
    .asset-measurement-chip--has-metrics:focus .asset-measurement-chip__tooltip {
        display: flex;
    }

    .asset-measurement-chip__tooltip-row {
        display: flex;
        gap: 1em;
        justify-content: space-between;
    }

    .asset-measurement-chip__tooltip-label {
        opacity: 0.7;
    }

    .asset-measurement-chip__tooltip-value {
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        text-align: right;
    }

    /* Remove forced aspect ratio when using compact measurements */
    .card:has(.asset-measurements-grouped) {
        aspect-ratio: auto;
    }

    /* ==========================================
       MEASUREMENT GROUP (Temperature, Vibration, etc.)
       ========================================== */

    .asset-measurement-group {
        animation: fade-slide-up 400ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
        margin-block-end: var(--block-space);
    }

    .asset-measurement-group:nth-child(2) {
        animation-delay: 100ms;
    }

    .asset-measurement-group:nth-child(3) {
        animation-delay: 200ms;
    }

    .asset-measurement-group:nth-child(4) {
        animation-delay: 300ms;
    }

    @keyframes fade-slide-up {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
    }

    .asset-measurement-group__header {
        align-items: center;
        display: flex;
        gap: 0.5em;
        margin-block-end: 0.75em;
        padding-block-end: 0.5em;
    }

    .asset-measurement-group__icon {
        --icon-size: 1.25em;

        opacity: 0.6;
    }

    .asset-measurement-group__title {
        color: var(--color-ink-dark);
        font-size: var(--text-small);
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .asset-measurement-group__count {
        background-color: oklch(0% 0 0 / 8%);
        border-radius: 1em;
        color: var(--color-ink-medium);
        font-size: var(--text-x-small);
        font-weight: 600;
        padding: 0.15em 0.5em;
    }

    .asset-measurement-group__cards {
        display: grid;
        gap: var(--block-space-half);
        grid-template-columns: repeat(auto-fill, minmax(18ch, 1fr));
    }

    /* Alert banner for points in warning/major status */
    .asset-alert-banner {
        --banner-bg: oklch(var(--lch-yellow-lighter));
        --banner-color: oklch(var(--lch-yellow-dark));
        --banner-icon: oklch(var(--lch-yellow-medium));

        align-items: center;
        background-color: var(--banner-bg);
        border-radius: 0.5em;
        color: var(--banner-color);
        display: flex;
        font-size: var(--text-small);
        font-weight: 600;
        gap: 0.5em;
        margin-block-end: var(--block-space);
        padding: 0.6em 1em;
    }

    .asset-alert-banner--major {
        --banner-bg: oklch(var(--lch-red-lighter));
        --banner-color: oklch(var(--lch-red-dark));
        --banner-icon: oklch(var(--lch-red-medium));
    }

    .asset-alert-banner__icon {
        color: var(--banner-icon);
        flex-shrink: 0;
    }

    /* Status cards grid */
    .asset-status-cards {
        display: grid;
        gap: var(--block-space-half);
        grid-template-columns: repeat(auto-fill, minmax(18ch, 1fr));
        margin-block: var(--block-space);
    }

    /* Individual status card */
    .asset-status-card {
        --card-status-color: oklch(var(--lch-green-medium));
        --card-status-bg: oklch(var(--lch-green-lighter, 95% 0.03 145));

        align-items: start;
        background-color: var(--color-ink-lightest);
        border-inline-start: 3px solid var(--card-status-color);
        border-radius: 0.5em;
        display: flex;
        flex-direction: column;
        gap: 0.35em;
        padding: 0.875em 1em;
        text-decoration: none;
        transition:
            background-color 150ms ease-out,
            box-shadow 150ms ease-out,
            transform 150ms ease-out;
    }

    .asset-status-card:hover {
        background-color: var(--card-status-bg);
        box-shadow: 0 2px 8px oklch(0% 0 0 / 8%);
        transform: translateY(-1px);
    }

    .asset-status-card--minor {
        --card-status-color: oklch(var(--lch-yellow-medium));
        --card-status-bg: oklch(var(--lch-yellow-lighter));
    }

    .asset-status-card--major {
        --card-status-color: oklch(var(--lch-red-medium));
        --card-status-bg: oklch(var(--lch-red-lighter));
    }

    .asset-status-card__header {
        align-items: center;
        display: flex;
        gap: 0.5em;
        inline-size: 100%;
    }

    .asset-status-card__icon {
        --icon-size: 1.1em;

        color: var(--card-icon-color, var(--color-ink-dark));
        flex-shrink: 0;
        opacity: 0.8;
    }

    .asset-status-card__dot {
        background-color: var(--card-status-color);
        block-size: 0.5em;
        border-radius: 50%;
        flex-shrink: 0;
        inline-size: 0.5em;
    }

    .asset-status-card__label {
        color: var(--color-ink-dark);
        flex: 1;
        font-size: var(--text-small);
        font-weight: 500;
        letter-spacing: 0.01em;
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .asset-status-card__location {
        color: var(--color-ink-medium);
        font-weight: normal;
        opacity: 0.8;
    }

    .asset-status-card__value {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35em;
        inline-size: 100%;
        margin-block-start: 0.25em;
    }

    .asset-status-card__number {
        color: var(--color-ink);
        font-size: 1.5rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1;
        transition: transform 150ms ease-out;
    }

    .asset-status-card:hover .asset-status-card__number {
        transform: scale(1.02);
    }

    .asset-status-card__unit {
        color: var(--color-ink-medium);
        font-size: var(--text-small);
        font-weight: 500;
    }

    .asset-status-card__trend {
        align-items: center;
        background-color: oklch(0% 0 0 / 5%);
        border-radius: 0.25em;
        color: var(--color-ink-dark);
        display: inline-flex;
        font-size: var(--text-x-small);
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        gap: 0.15em;
        margin-inline-start: auto;
        padding: 0.2em 0.4em;
    }

    .asset-status-card__trend--up {
        background-color: oklch(var(--lch-red-lighter));
        color: oklch(var(--lch-red-dark));
    }

    .asset-status-card__trend--down {
        background-color: oklch(var(--lch-green-lighter, 95% 0.03 145));
        color: oklch(var(--lch-green-dark));
    }

    .asset-status-card__status-label {
        color: var(--card-status-color);
        font-size: var(--text-x-small);
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .asset-status-card__no-data {
        color: var(--color-ink-medium);
        font-size: var(--text-small);
        font-style: italic;
    }

    /* Sparkline container */
    .asset-status-card__sparkline {
        animation: sparkline-draw 800ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
        animation-delay: 400ms;
        block-size: 24px;
        inline-size: 100%;
        margin-block-start: 0.5em;
        opacity: 0.7;
        transition: opacity 150ms ease-out;
    }

    .asset-status-card:hover .asset-status-card__sparkline {
        opacity: 1;
    }

    @keyframes sparkline-draw {
        from {
            clip-path: inset(0 100% 0 0);
            opacity: 0;
        }

        to {
            clip-path: inset(0 0 0 0);
            opacity: 0.7;
        }
    }

    /* Staggered card entrance within groups */
    .asset-measurement-group__cards .asset-status-card {
        animation: card-enter 300ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
    }

    .asset-measurement-group__cards .asset-status-card:nth-child(1) {
        animation-delay: 50ms;
    }

    .asset-measurement-group__cards .asset-status-card:nth-child(2) {
        animation-delay: 100ms;
    }

    .asset-measurement-group__cards .asset-status-card:nth-child(3) {
        animation-delay: 150ms;
    }

    .asset-measurement-group__cards .asset-status-card:nth-child(4) {
        animation-delay: 200ms;
    }

    @keyframes card-enter {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
    }

    /* Collapsible chart container */
    .asset-chart-collapsible {
        border-block-start: 1px solid var(--color-ink-lighter);
        margin-block-start: var(--block-space);
        padding-block-start: var(--block-space-half);
    }

    .asset-chart-collapsible__toggle {
        align-items: center;
        appearance: none;
        background: none;
        border: none;
        color: var(--color-ink-dark);
        cursor: pointer;
        display: flex;
        font-size: var(--text-small);
        gap: 0.5em;
        padding: 0.5em 0;
        transition: color 100ms ease-out;
    }

    .asset-chart-collapsible__toggle:hover {
        color: var(--color-ink);
    }

    .asset-chart-collapsible__toggle .icon--triangle {
        transition: transform 150ms ease-out;
    }

    .asset-chart-collapsible--expanded .asset-chart-collapsible__toggle .icon--triangle {
        transform: rotate(180deg);
    }

    .asset-chart-collapsible__content {
        display: none;
        padding-block-start: var(--block-space-half);
    }

    .asset-chart-collapsible--expanded .asset-chart-collapsible__content {
        display: block;
    }

    .asset-chart__container {
        block-size: 320px;
        inline-size: 100%;
        margin-block-start: var(--block-space);
    }

    /* Legend item: container row */
    .asset-chart-legend__item {
        display: flex;
        align-items: center;
        gap: 0.3em;
        padding: 0.4em 0.6em;
        border-radius: 0.2em;
        font-size: var(--text-small);
        white-space: nowrap;
        transition: background-color 100ms ease-out;
    }

    .asset-chart-legend__item:hover {
        background-color: color-mix(in srgb, var(--card-color) 15%, transparent);
    }

    .asset-chart-legend__item[data-hidden] {
        opacity: 0.5;
    }

    /* Legend link */
    .asset-chart-legend__link {
        color: inherit;
        text-decoration: none;
        font-weight: 600;
        flex: 1 1 auto;
    }

    .asset-chart-legend__location {
        opacity: 0.5;
    }

    /* Toggle button: right-aligned, visible on touch, hover-reveal on pointer */
    .asset-chart-legend__toggle {
        --icon-size: 1em;

        appearance: none;
        background: none;
        border: none;
        color: inherit;
        cursor: pointer;
        flex-shrink: 0;
        margin-inline-start: auto;
        opacity: 0.5;
        padding: 0;
        transition: opacity 100ms ease-out;
    }

    @media (any-hover: hover) {
        .asset-chart-legend__toggle {
            opacity: 0;
        }

        .asset-chart-legend__item:hover .asset-chart-legend__toggle {
            opacity: 0.5;
        }

        .asset-chart-legend__item:hover .asset-chart-legend__toggle:hover {
            opacity: 1;
        }
    }

    .asset-chart-legend__item[data-hidden] .asset-chart-legend__toggle {
        opacity: 1;
    }

    /* Icon visibility: eye shown by default, eye-slash when hidden */
    .asset-chart-legend__toggle .icon--eye-slash {
        display: none;
    }

    .asset-chart-legend__item[data-hidden] .asset-chart-legend__toggle .icon--eye {
        display: none;
    }

    .asset-chart-legend__item[data-hidden] .asset-chart-legend__toggle .icon--eye-slash {
        display: inline-block;
    }

    /* Point chart (single measurement point page) */
    .point-chart__container {
        block-size: 280px;
        inline-size: 100%;
    }

    .point-chart__filters {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
        margin-block: 0.5rem;
    }

    .point-chart__filter-label {
        font-size: var(--text-small);
        color: var(--color-ink-dark);
    }

    .point-chart__filter-input {
        --input-padding: 0.3em 0.5em;

        font-size: var(--text-small);
        max-inline-size: 10em;
    }

    /* Vibration chart (measurement detail page) */
    .vibration-chart__container {
        block-size: 320px;
        inline-size: 100%;
    }

    /* Measurement metrics grid */
    .measurement-metric {
        display: flex;
        flex-direction: column;
        min-inline-size: 8ch;
    }

    /* ==========================================
       MACHINE BODY DIAGRAM
       ========================================== */

    .machine-body {
        --machine-body-height: 2.5em;
        --sensor-circle-size: calc(var(--machine-body-height) * 0.7);
        --dot-size: 0.35em;
        --dot-offset: calc(var(--sensor-circle-size) / 2 + var(--dot-size) * 0.2);

        block-size: var(--machine-body-height);
        display: inline-block;
        position: relative;
        vertical-align: middle;
    }

    .machine-body__shape {
        block-size: 100%;
        display: block;
        inline-size: auto;
    }

    .machine-body__sensor-circle {
        aspect-ratio: 1;
        block-size: var(--sensor-circle-size);
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .machine-body__ring {
        block-size: 100%;
        border: 1.5px solid var(--color-ink-light);
        border-radius: 50%;
        inline-size: 100%;
    }

    .machine-body__dot {
        background-color: var(--sensor-color, var(--color-ink-medium));
        block-size: var(--dot-size);
        border-radius: 50%;
        inline-size: var(--dot-size);
        left: calc(50% - var(--dot-size) / 2);
        position: absolute;
        top: calc(50% - var(--dot-size) / 2);
        transform: rotate(var(--dot-angle, 0deg)) translateY(calc(-1 * var(--dot-offset)));
        transform-origin: calc(var(--dot-size) / 2) calc(var(--dot-size) / 2);
    }

    .machine-body__dot--axial {
        transform: none;
    }

    /* 10 sensor identity colors */
    .machine-body__dot--c0 { --sensor-color: oklch(var(--lch-blue-medium)); }
    .machine-body__dot--c1 { --sensor-color: oklch(var(--lch-purple-medium)); }
    .machine-body__dot--c2 { --sensor-color: oklch(var(--lch-aqua-medium)); }
    .machine-body__dot--c3 { --sensor-color: oklch(var(--lch-pink-medium)); }
    .machine-body__dot--c4 { --sensor-color: oklch(var(--lch-violet-medium)); }
    .machine-body__dot--c5 { --sensor-color: oklch(var(--lch-lime-medium)); }
    .machine-body__dot--c6 { --sensor-color: oklch(var(--lch-uncolor-medium)); }
    .machine-body__dot--c7 { --sensor-color: oklch(var(--lch-blue-dark)); }
    .machine-body__dot--c8 { --sensor-color: oklch(var(--lch-pink-dark)); }
    .machine-body__dot--c9 { --sensor-color: oklch(var(--lch-aqua-dark)); }

    /* Colored dot on measurement chips to match body diagram */
    .asset-measurement-chip__dot {
        align-self: center;
        background-color: var(--sensor-color, var(--color-ink-medium));
        block-size: 0.5em;
        border-radius: 50%;
        flex-shrink: 0;
        inline-size: 0.5em;
    }

    .segment-indicator {
        align-self: center;
        block-size: 1em;
        display: block;
        flex-shrink: 0;
        inline-size: 0.8em;
    }

    /* ==========================================
       BODY LAYOUT EDITOR (asset edit)
       ========================================== */

    .body-layout-editor {
        margin-block-start: 1em;
    }

    .body-layout-editor__label {
        color: var(--color-ink-dark);
        font-size: var(--text-x-small);
        font-weight: 600;
        letter-spacing: 0.03em;
        margin-block-end: 0.5em;
        text-transform: uppercase;
    }

    .body-layout-editor__segments {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35em;
        min-block-size: 2.5em;
    }

    .body-layout-editor__pill {
        align-items: center;
        background-color: var(--color-ink-lightest);
        border: 1px solid var(--color-ink-lighter);
        border-radius: 0.3em;
        cursor: grab;
        display: inline-flex;
        font-size: var(--text-small);
        font-weight: 600;
        gap: 0.3em;
        padding: 0.3em 0.6em;
        user-select: none;
    }

    .body-layout-editor__pill:active {
        cursor: grabbing;
    }

    .body-layout-editor__pill--dragging {
        opacity: 0.4;
    }

    .body-layout-editor__pill--de {
        border-color: var(--color-ink-light);
    }

    .body-layout-editor__pill--nde {
        border-color: var(--color-ink-lighter);
    }

    .body-layout-editor__pill-remove {
        --icon-size: 0.7em;

        appearance: none;
        background: none;
        border: none;
        color: var(--color-ink-medium);
        cursor: pointer;
        padding: 0;
    }

    .body-layout-editor__pill-remove:hover {
        color: var(--color-negative);
    }

    .body-layout-editor__actions {
        display: flex;
        gap: 0.35em;
        margin-block-start: 0.5em;
    }
}