@layer components {

    /* Analysis Layout - Override body grid to remove footer reserve */
    body:has(.analysis) {
        grid-template-rows: auto 1fr;
    }

    .analysis {
        --analysis-gap: 0.2rem;
        --analysis-max-width: 1200px;

        display: flex;
        justify-content: center;
        padding: var(--analysis-gap);
        block-size: 100%;
        min-block-size: 0;
        overflow: hidden;
    }

    /* Single panel containing both sections */
    .analysis__panel {
        display: flex;
        flex-direction: column;
        inline-size: 100%;
        max-inline-size: var(--analysis-max-width);
        min-block-size: 0;
        overflow: hidden;
        padding-block: 0;
    }

    /* Sections stacked vertically */
    .analysis__section {
        display: flex;
        flex-direction: column;
        min-block-size: 0;
        overflow: hidden;
    }

    .analysis__section--trend {
        flex: 0 0 200px;
    }

    .analysis__section--spectrum {
        flex: 1 1 0;
        border-block-start: 1px solid var(--color-ink-lighter);
    }

    .analysis__toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem;
        flex-shrink: 0;
        padding: 0.5rem;
        border-block-end: 1px solid var(--color-ink-lighter);
    }

    .analysis__chart {
        flex: 1 1 0;
        min-block-size: 0;
        overflow: hidden;
    }

    .analysis__section--spectrum .analysis__chart {
        overflow-y: auto;
    }

    /* Expandable Filter in header */
    .analysis-filter-details {
        position: relative;

        >summary {
            list-style: none;

            &::-webkit-details-marker {
                display: none;
            }
        }
    }

    .analysis-filter-dropdown {
        position: absolute;
        inset-block-start: 100%;
        inset-inline-end: 0;
        display: flex;
        align-items: center;
        gap: 0.4em;
        margin-block-start: 0.25rem;
        padding: 0.5rem;
        background-color: var(--color-canvas);
        border: 1px solid var(--color-ink-light);
        border-radius: 0.25em;
        box-shadow: var(--shadow);
        white-space: nowrap;
        z-index: var(--z-dropdown, 10);
    }

    .analysis-date-input {
        padding: 0.15em 0.3em;
        font-size: var(--text-x-small);
        border: 1px solid var(--color-ink-light);
        border-radius: 0.2em;
        max-inline-size: 8em;
    }

    /* Metric/Spectrum button container */
    .analysis-metrics {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25em;
    }

    /* Spectrum Placeholder */
    .analysis-spectrum-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        block-size: 100%;
        min-block-size: 100px;
        border-radius: 0.25em;
        margin: 0rem;
    }

    /* Combined Spectrum Chart */
    .analysis-spectrum-combined {
        display: flex;
        flex-direction: column;
        block-size: 100%;
        min-block-size: 0;
    }

    .analysis-spectrum-chart {
        flex: 1 1 0;
        min-block-size: 200px;
        inline-size: 100%;
    }

    /* ==========================================
       MEASUREMENT LIST (Everyday view)
       ========================================== */

    .measurement-list-container {
        --measurement-max-width: 800px;

        display: flex;
        flex-direction: column;
        gap: var(--block-space);
        margin-inline: auto;
        max-inline-size: var(--measurement-max-width);
        padding: var(--block-space) var(--inline-space);
    }

    /* Collapsible summary header */
    .measurement-list__summary {
        display: flex;
        align-items: center;
        gap: 0.5em;
        padding: 0.5em 0;
        cursor: pointer;
        user-select: none;
        list-style: none;

        &::-webkit-details-marker { display: none; }
    }

    .measurement-list__title {
        display: flex;
        align-items: baseline;
        gap: 0.35em;
        font-weight: 600;
        font-size: var(--text-normal);
        white-space: nowrap;
        flex-shrink: 0;
    }

    .measurement-list__chevron {
        --icon-size: 0.65em;

        transform: rotate(-90deg);
        transition: transform 150ms ease-out;
    }

    details[open] > .measurement-list__summary .measurement-list__chevron {
        transform: rotate(0deg);
    }

    /* Search in summary bar */
    .measurement-list__search-wrap {
        margin-inline-start: auto;
    }

    .measurement-list__search {
        --input-border-radius: 2em;
        --input-padding: 0.25em 0.7em;

        font-size: var(--text-small);
        inline-size: 12em;
        min-inline-size: 0;
    }

    /* Card-level filter (in card header) */
    .card-filter {
        display: flex;
        align-items: center;
        gap: 0.35em;
        margin-inline-start: auto;
    }

    .card-filter__drop {
        position: relative;
    }

    .card-filter__btn {
        --btn-size: 1.75rem;

        position: relative;
    }

    .card-filter__badge {
        position: absolute;
        inset-block-start: 2px;
        inset-inline-end: 2px;
        inline-size: 0.45em;
        block-size: 0.45em;
        background-color: oklch(var(--lch-blue));
        border-radius: 50%;
    }

    .card-filter__range {
        white-space: nowrap;
    }

    .card-filter__panel {
        position: absolute;
        inset-block-start: 100%;
        inset-inline-end: 0;
        display: flex;
        align-items: center;
        gap: 0.35em;
        margin-block-start: 0.25rem;
        padding: 0.5rem;
        background-color: var(--color-canvas);
        border: 1px solid var(--color-ink-light);
        border-radius: 0.35em;
        box-shadow: var(--shadow);
        white-space: nowrap;
        z-index: var(--z-dropdown, 10);
    }

    .card-filter__panel .input--select {
        --input-border-radius: 0.25em;
        --input-padding: 0.25em 0.5em;

        font-size: var(--text-small);
        inline-size: auto;
        min-inline-size: 0;
    }

    .card-filter__panel select.input--select {
        --input-padding: 0.25em 1.6em 0.25em 0.5em;
    }

    .card-filter__panel input[type="date"].input--select {
        max-inline-size: 9em;
    }

    /* Mini Trend Chart */
    .measurement-chart {
        background-color: var(--color-canvas);
        block-size: 160px;
        border-radius: 0.5em;
        overflow: hidden;
    }

    /* ==========================================
       SIGNAL GRID (multi-metric sparklines)
       ========================================== */

    /* Hover date label above grid */
    .signal-grid__date-label {
        color: var(--color-ink-dark);
        font-family: var(--font-data);
        font-size: var(--text-x-small);
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.02em;
        text-align: end;
        padding-inline: 0.15em;
        padding-block-end: 0.25em;
        min-block-size: 1.4em;
    }

    .signal-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 16ch), 1fr));
        border: 1px solid var(--color-ink-lighter);
        border-radius: 0.5em;
        overflow: hidden;
    }

    .signal-cell {
        --signal-status-color: transparent;

        background-color: var(--color-canvas);
        border-block-start: 2px solid var(--signal-status-color);
        border-inline-end: 1px solid var(--color-ink-lighter);
        border-block-end: 1px solid var(--color-ink-lighter);
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0.5em 0.6em 0;
    }

    .signal-cell:last-child {
        border-inline-end: none;
    }

    .signal-cell--minor {
        --signal-status-color: oklch(var(--lch-yellow-medium));
    }

    .signal-cell--major {
        --signal-status-color: oklch(var(--lch-red-medium));
    }

    .signal-cell__header {
        align-items: baseline;
        display: flex;
        gap: 0.4em;
        justify-content: space-between;
    }

    .signal-cell__label {
        color: var(--color-ink-dark);
        font-size: var(--text-x-small);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .signal-cell__value {
        align-items: baseline;
        display: flex;
        gap: 0.2em;
        min-inline-size: 0;
    }

    .signal-cell__number {
        color: var(--color-ink);
        font-family: var(--font-data);
        font-size: var(--text-normal);
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        letter-spacing: -0.02em;
    }

    .signal-cell__unit {
        color: var(--color-ink-medium);
        font-family: var(--font-data);
        font-size: var(--text-x-small);
    }

    .signal-cell__chart {
        position: relative;
        block-size: 48px;
        flex-shrink: 0;
        margin-inline: -0.6em;
    }

    /* Synced crosshair line */
    .signal-cell__crosshair,
    .signal-cell__pinned {
        position: absolute;
        inset-block: 0;
        inline-size: 1px;
        pointer-events: none;
    }

    .signal-cell__crosshair {
        background: #334155;
        opacity: 0.5;
        z-index: 2;
    }

    /* Pinned marker (after click) – subtler than hover crosshair */
    .signal-cell__pinned {
        background: #3b82f6;
        opacity: 0.35;
        z-index: 1;
    }

    /* Hover state for value display */
    .signal-cell__value--hover .signal-cell__number {
        color: oklch(var(--lch-blue));
    }

    .signal-cell__timerange {
        display: flex;
        justify-content: space-between;
        color: var(--color-ink-light);
        font-family: var(--font-data);
        font-size: 0.6rem;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.02em;
        margin-block-end: 0.3em;
        padding-inline: 0.15em;
    }

    /* ==========================================
       MEASUREMENT INSPECT (inline turbo-frame)
       ========================================== */

    .measurement-inspect {
        --inspect-max-width: 1000px;

        display: flex;
        flex-direction: column;
        gap: var(--block-space-half);
        margin-inline: auto;
        max-inline-size: var(--inspect-max-width);
        padding: var(--block-space) var(--inline-space);
    }

    .measurement-inspect--empty {
        align-items: center;
        justify-content: center;
        min-block-size: 4rem;
        border: 1px dashed var(--color-ink-lighter);
        border-radius: 0.5em;
        padding: var(--block-space);
    }

    .measurement-inspect__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--inline-space);
        flex-wrap: wrap;
    }

    .measurement-inspect__info {
        display: flex;
        align-items: baseline;
        gap: 0.75em;
        flex-wrap: wrap;
    }

    .measurement-inspect__badge {
        background-color: var(--color-ink-lighter);
        border-radius: 0.25em;
        font-family: var(--font-data);
        font-size: var(--text-small);
        font-weight: 700;
        padding: 0.1em 0.4em;
    }

    .measurement-inspect__badge--1 {
        background-color: oklch(var(--lch-green-lighter, 95% 0.03 145));
        color: oklch(var(--lch-green-dark));
    }

    .measurement-inspect__badge--2 {
        background-color: oklch(var(--lch-yellow-lighter, 95% 0.05 85));
        color: oklch(var(--lch-yellow-dark, 40% 0.12 85));
    }

    .measurement-inspect__badge--3 {
        background-color: oklch(var(--lch-red-lighter, 95% 0.03 25));
        color: oklch(var(--lch-red-dark));
    }

    .measurement-inspect__date {
        color: var(--color-ink-dark);
        font-size: var(--text-small);
    }

    .measurement-inspect__metric {
        color: var(--color-ink-dark);
        font-size: var(--text-x-small);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .measurement-inspect__actions {
        display: flex;
        gap: 0.25em;
    }

    .measurement-inspect__section {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .measurement-inspect__section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--inline-space);
    }

    .measurement-inspect__chart {
        block-size: 280px;
        border-radius: 0.25em;
        overflow: hidden;
    }

    @media (min-width: 100ch) {
        .measurement-inspect__chart {
            block-size: 340px;
        }
    }

    /* Active measurement row highlight */
    .measurement-row--active {
        background-color: oklch(var(--lch-blue) / 0.06);
        box-shadow: inset 3px 0 0 oklch(var(--lch-blue));
    }

    /* Measurement Rows */
    .measurement-rows {
        display: flex;
        flex-direction: column;
        gap: 1px;
        background-color: var(--color-ink-lighter);
        border-radius: 0.5em;
        overflow: hidden;
    }

    .measurement-row {
        --card-status-color: oklch(var(--lch-green-medium));

        align-items: center;
        background-color: var(--color-canvas);
        border-inline-start: 3px solid var(--card-status-color);
        color: var(--color-ink);
        display: flex;
        gap: var(--inline-space);
        padding: var(--block-space-half) var(--inline-space);
        text-decoration: none;
        transition:
            background-color 100ms ease-out,
            border-color 100ms ease-out;
    }

    .measurement-row:hover {
        background-color: var(--color-ink-lightest);
    }

    .measurement-row--minor {
        --card-status-color: oklch(var(--lch-yellow-medium));
    }

    .measurement-row--major {
        --card-status-color: oklch(var(--lch-red-medium));
    }

    /* Date Column */
    .measurement-row__date {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        gap: 0.1em;
        min-inline-size: 9ch;
    }

    .measurement-row__date-day {
        font-size: var(--text-small);
        font-weight: 600;
    }

    .measurement-row__date-time {
        color: var(--color-ink-dark);
        font-size: var(--text-x-small);
        font-variant-numeric: tabular-nums;
    }

    /* Metrics Column */
    .measurement-row__metrics {
        align-items: center;
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        gap: var(--inline-space);
    }

    .measurement-row__metric {
        align-items: baseline;
        display: flex;
        gap: 0.3em;
    }

    .measurement-row__metric-label {
        color: var(--color-ink-dark);
        font-size: var(--text-x-small);
        text-transform: uppercase;
    }

    .measurement-row__metric-value {
        font-size: var(--text-normal);
        font-variant-numeric: tabular-nums;
        font-weight: 600;
    }

    /* Primary value display for scalar types */
    .measurement-row__metric--primary {
        align-items: baseline;
        gap: 0.25em;
    }

    .measurement-row__primary-value {
        font-size: var(--text-large);
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .measurement-row__primary-unit {
        color: var(--color-ink-dark);
        font-size: var(--text-small);
    }

    /* Pass/Fail for Inspection */
    .measurement-row__metric--pass {
        color: oklch(var(--lch-green-dark));
    }

    .measurement-row__metric--fail {
        color: oklch(var(--lch-red-dark));
    }

    /* Running/Stopped for Production */
    .measurement-row__status-badge {
        border-radius: 0.25em;
        font-size: var(--text-x-small);
        font-weight: 600;
        padding: 0.15em 0.5em;
        text-transform: uppercase;
    }

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

    .measurement-row__status-badge--off {
        background-color: var(--color-ink-lighter);
        color: var(--color-ink-dark);
    }

    /* Notes indicator */
    .measurement-row__notes {
        flex-shrink: 0;
    }

    /* Arrow indicator */
    .measurement-row__arrow {
        flex-shrink: 0;
        opacity: 0.5;
        transition: opacity 100ms ease-out;
    }

    .measurement-row:hover .measurement-row__arrow {
        opacity: 1;
    }

    /* Blank slate for empty list */
    .measurement-rows:has(.blank-slate) {
        background-color: transparent;
    }

    .measurement-rows .blank-slate {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: var(--block-space-half);
        padding: var(--block-space-double);
        text-align: center;
    }

    /* Pagination */
    .pagination {
        align-items: center;
        display: flex;
        gap: var(--inline-space);
        justify-content: center;
        padding: var(--block-space);
    }

    .pagination__info {
        min-inline-size: 12ch;
        text-align: center;
    }

    /* Pin Tray - fixed bottom bar for comparing measurements */
    .pin-tray {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75em;
        padding: 0.6em 1.25em;
        background: oklch(var(--lch-ink-darkest) / 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: oklch(var(--lch-white));
        animation: pin-tray-slide-up 0.25s ease-out;
    }

    @keyframes pin-tray-slide-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .pin-tray__label {
        font-size: var(--text-x-small);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
        opacity: 0.5;
        flex-shrink: 0;
    }

    .pin-tray__chips {
        display: flex;
        gap: 0.4em;
        overflow-x: auto;
        scrollbar-width: none;

        &::-webkit-scrollbar { display: none; }
    }

    .pin-tray__chip {
        --chip-color: oklch(var(--lch-blue));

        display: inline-flex;
        align-items: center;
        gap: 0.35em;
        padding: 0.3em 0.6em;
        border: none;
        border-radius: 0.35em;
        background: oklch(100% 0 0 / 0.12);
        color: oklch(var(--lch-white));
        font-size: var(--text-x-small);
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color 0.15s;

        &:hover {
            background: oklch(var(--lch-red) / 0.7);
        }
    }

    .pin-tray__dot {
        display: inline-block;
        width: 0.55em;
        height: 0.55em;
        border-radius: 50%;
        background-color: var(--chip-color);
        flex-shrink: 0;
    }

    .pin-tray__close {
        font-size: 0.9em;
        line-height: 1;
        opacity: 0.4;
        margin-left: 0.1em;
    }

    .pin-tray__chip:hover .pin-tray__close {
        opacity: 1;
    }

    .pin-tray__actions {
        display: flex;
        align-items: center;
        gap: 0.4em;
        flex-shrink: 0;
        margin-left: 0.25em;
    }

    .pin-tray__compare {
        display: inline-flex;
        align-items: center;
        gap: 0.3em;
        padding: 0.35em 0.85em;
        border: none;
        border-radius: 0.35em;
        background: oklch(var(--lch-blue));
        color: oklch(var(--lch-white));
        font-size: var(--text-x-small);
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.15s;

        &:hover {
            background: oklch(var(--lch-blue-darker));
        }
    }

    .pin-tray__clear {
        background: none;
        border: none;
        color: oklch(100% 0 0 / 0.4);
        font-size: var(--text-x-small);
        cursor: pointer;
        padding: 0.35em 0.5em;

        &:hover {
            color: oklch(100% 0 0 / 0.8);
        }
    }

    /* Active pin button state */
    .btn--pin--active {
        color: oklch(var(--lch-blue));
        background-color: oklch(var(--lch-blue) / 0.12);
    }
}