@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);
    }

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

    /* Measurement Filters - Fizzy style with centered search */
    .measurement-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        max-inline-size: 24em;
        margin-inline: auto;
    }

    .measurement-filters--expanded {
        max-inline-size: none;
    }

    .measurement-filters--expanded .measurement-filters__search {
        flex: 0 0 auto;
    }

    .measurement-filters--expanded .measurement-filters__search .filter__terms {
        flex: 0 0 auto;
        inline-size: 10em;
    }

    /* Search wrapper - pill shape with filter icon inside */
    .measurement-filters__search {
        position: relative;
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-inline-size: 0;
    }

    .measurement-filters .filter__terms {
        --input-border-radius: 2em;
        --input-padding: 0.3em 2.2em 0.3em 0.8em;

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

    .measurement-filters__toggle-btn {
        position: absolute;
        inset-inline-end: 0.3em;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.25em;
        color: var(--color-ink-dark);
        background: transparent;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 100ms ease-out;
    }

    .measurement-filters__toggle-btn:hover {
        background-color: var(--color-ink-lighter);
    }

    /* Hide toggle button inside input when expanded */
    .measurement-filters--expanded .measurement-filters__toggle-btn {
        display: none;
    }

    /* Remove extra padding when expanded (no icon inside) - match date input height */
    .measurement-filters--expanded .filter__terms {
        --input-padding: 0.3em 0.6em;
        font-size: var(--text-small);
        block-size: 36px;
        inline-size: 100%;
        min-inline-size: 0;
    }

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

    /* Expanded filters - hidden by default */
    .measurement-filters__expanded {
        display: none;
    }

    .measurement-filters--expanded .measurement-filters__expanded {
        display: flex;
        align-items: center;
        gap: 0.35em;
    }

    .measurement-filters__expanded .input--select {
        --input-border-radius: 2em;
        --input-padding: 0.3em 0.6em;

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

    .measurement-filters__expanded select.input--select {
        --input-padding: 0.3em 1.6em 0.3em 0.6em;
    }

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

    .measurement-filters__expanded .btn {
        --btn-padding: 0.3em 0.6em;

        font-size: var(--text-small);
    }

    .measurement-filters__expanded .icon--arrow-right {
        --icon-size: 0.9em;
    }

    /* 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;
    }
}