@layer components {
    /* Home dashboard
  /* ------------------------------------------------------------------------ */

    /* Container layout via .page-wrap group in atoms.css */
    .plant-home {
        display: grid;
        gap: 1.25rem;
        /* minmax(0, …): a wide table must not stretch the page column past the viewport. */
        grid-template-columns: minmax(0, 1fr);
    }

    /* …it scrolls inside its own panel instead. */
    .home-panel,
    .home-feed {
        overflow-x: auto;
    }

    /* Relative times ("3 MONTHS AGO") stay on one line. */
    .home-panel .datasheet td[data-col="date"] {
        white-space: nowrap;
    }

    /* Running route walks lead the Routes panel. RUNNING is a neutral blue
       state, not an alarm: the shared datasheet rule tints the row; the chip
       takes --card-color, as on .execution-card. */
    .home-panel .datasheet tr[data-state="running"] {
        --card-color: var(--color-considering);
    }

    .home-panel .datasheet tr[data-state="running"] .status-chip {
        color: var(--card-color);
    }

    .home-panel {
        align-content: start;
        display: grid;
        gap: 0.5rem;
    }

    .home-panel__head {
        margin-block-end: 0;
    }

    .home-panel--sections {
        gap: 0.75rem;
    }

    .home-section-grid {
        display: grid;
        gap: 0.75rem;
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }

    .home-section-card {
        background: color-mix(in oklch, var(--surface) 94%, var(--color-canvas));
        border: 1px solid var(--rule);
        color: var(--ink);
        display: grid;
        gap: 0.45rem;
        padding: 0.9rem 1rem;
        text-decoration: none;
        transition: border-color 120ms ease-out;
    }

    .home-section-card--active {
        border-color: var(--primary);
    }

    @media (any-hover: hover) {
        .home-section-card:hover {
            border-color: var(--primary);
        }
    }

    .home-section-card__meta {
        align-items: center;
        color: var(--ink-soft);
        display: flex;
        flex-wrap: wrap;
        font-family: var(--font-data);
        font-size: 0.625rem;
        gap: 0.5rem 0.8rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .home-section-card__name {
        color: var(--ink);
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.2;
        margin: 0;
    }

    .home-section-card__meta strong {
        color: var(--ink);
    }

    .home-highlights {
        display: grid;
        gap: 0 2rem;
        /* Needs attention is the page's job; it gets the wider column. */
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);

        /* No routes panel: needs attention takes the full width. */
        &:has(> :only-child) {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .home-highlights > .home-panel:last-child:not(:only-child) {
        border-inline-start: 1px solid var(--rule-soft);
        padding-inline-start: 2rem;
    }

    @media (max-width: 1099px) {
        .home-highlights {
            gap: 1rem;
            grid-template-columns: 1fr;
        }

        .home-highlights > .home-panel:last-child:not(:only-child) {
            border-block-start: 1px solid var(--rule-soft);
            border-inline-start: none;
            padding-block-start: 1rem;
            padding-inline-start: 0;
        }
    }

    @media (max-width: 639px) {
        .plant-home {
            gap: 1rem;
        }

        .home-section-grid {
            grid-template-columns: 1fr;
        }
    }

}

/* Hours page — the on/off strip rides under its asset row, so the row pair
   reads as one entry: no padding around the strip, strip flush to the cells. */
@layer components {
    .hours-table__strip-row td {
        border-block-start: none;
        padding-block: 0 0.4rem;
    }

    .hours-table__strip-row .asset-operation__strip {
        block-size: 0.5rem;
        margin-block: 0;
    }

    /* Keep "2,136.4 h" on one line so the STATE column still fits at phone width. */
    .hours-table .datasheet__value {
        white-space: nowrap;
    }

    /* The shared datasheet pass drops STATE below 100ch; here it is the row's
       answer (ON / OFF / STALE), so LOCATION and LAST PING go instead. */
    @media (max-width: 100ch) {
        .datasheet.hours-table thead th:last-child,
        .datasheet.hours-table td[data-col="state"] { display: table-cell; }
    }

    /* One-line legend under the section marker: what the range and columns mean. */
    .hours-page__caption {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.08em;
        margin-block: 0 0.625rem;
        text-transform: uppercase;
    }
}

/* Points page — asset sub-heads sit between the section group-head and the
   point rows: same surface as a group-head, lighter rule, indented. */
@layer components {
    .points-table__asset-head th {
        background: var(--surface);
        border: 1px solid var(--rule);
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        font-weight: normal;
        letter-spacing: 0;
        padding: 0.45rem 0.65rem 0.35rem 1.3rem;
        text-align: start;
        text-transform: none;
    }

    /* Below the breakpoint the pill strip already names the type and State
       is the row's point, so drop Type and keep State (the shared datasheet
       pass hides td[data-col=state] there; same override as .asset-operation__table). */
    @media (max-width: 100ch) {
        .points-table th[data-col="type"],
        .points-table td[data-col="type"] { display: none; }
        .points-table td[data-col="state"] { display: table-cell; }
    }

    /* Section combobox: the pill is the anchor; the menu is a flat Control
       Room panel (square, hairline rule, surface) holding a .point-filterbar
       input and a .select-list — the installation selector's vocabulary,
       not the nav menu's rounded popup. */
    /* Not an .rl-filter-strip: that scrolls horizontally and would clip the menu. */
    .points-section-picker {
        border-block-end: 1px solid var(--rule-soft);
        margin-block-end: 0.75rem;
        padding-block: 0.75rem;
        position: relative;
    }
    .points-section-picker .rl-pill .icon--caret-down {
        font-size: 1ch;
        margin-inline-start: 0.5ch;
    }
    .points-section-picker__menu {
        background: var(--surface);
        border: 1px solid var(--rule);
        border-radius: var(--radius-sm, 4px);
        box-shadow: 0 6px 18px color-mix(in oklch, var(--ink) 12%, transparent);
        color: var(--ink);
        inset: 100% auto auto 0;
        margin: 0.25rem 0 0;
        max-block-size: 50dvh;
        min-inline-size: min(32ch, calc(100vw - 2rem));
        overflow: auto;
        padding: 0.5rem;
        position: absolute;
        z-index: var(--z-popup);
    }
    .points-section-picker__menu[open] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .points-section-picker__input {
        inline-size: 100%;
    }
    .points-section-picker__row {
        align-items: center;
        font-size: 0.8125rem;
        gap: 0.75rem;
        padding: 0.45rem 0.4rem;
    }
    .points-section-picker__count {
        color: var(--ink-soft);
        flex: 0 0 auto;
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-variant-numeric: tabular-nums;
    }
    /* Keyboard cursor / current pick: same ink-on-inverted as hover. */
    .points-section-picker .select-list__item[aria-selected="true"] .select-list__link {
        background-color: color-mix(in oklch, var(--surface) 88%, var(--ink));
    }
    .points-section-picker .select-list__item[aria-selected="true"] .select-list__link .select-list__name {
        font-weight: 700;
    }

    /* Value and Unit are separate columns (DESIGN.md datasheet spec) so the
       numbers line up whatever the unit's width; the unit cell hugs its text. */
    .points-table td[data-col="unit"] {
        padding-inline-start: 0.35rem;
        white-space: nowrap;
        width: 1%;
    }
    .points-table td[data-col="unit"] .datasheet__unit { margin-inline-start: 0; }

    /* Trend: a sparkline of the last readings beside the latest delta. */
    .points-table td[data-col="trend"] {
        white-space: nowrap;
    }
    .points-table__spark {
        block-size: 1rem;
        inline-size: 4rem;
        margin-inline-end: 0.5rem;
        vertical-align: middle;
    }
    .points-table__spark polyline {
        fill: none;
        stroke: var(--ink-soft);
        stroke-linejoin: round;
        stroke-width: 1.25;
        vector-effect: non-scaling-stroke;
    }
    .datasheet tr[data-state="warning"]  .points-table__spark polyline { stroke: var(--status-warn-fg); }
    .datasheet tr[data-state="critical"] .points-table__spark polyline { stroke: var(--status-crit-fg); }
    .points-table__delta {
        display: inline-block;
        font-variant-numeric: tabular-nums;
        min-inline-size: 5.5ch;
        text-align: end;
    }
}