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

    /* Container layout via .page-wrap group in atoms.css */
    .plant-home {
        display: grid;
        gap: 1.25rem;
    }

    .home-hero {
        background:
            radial-gradient(circle at top right, color-mix(in oklch, var(--primary) 14%, transparent), transparent 34%),
            linear-gradient(180deg, color-mix(in oklch, var(--surface) 95%, var(--color-canvas)), var(--surface));
        border-block: 1px solid var(--primary);
        box-shadow: inset 3px 0 0 var(--primary);
        display: grid;
        gap: 1rem 1.25rem;
        grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 1fr);
        padding: 1.25rem;
        position: relative;
    }

    .home-hero__main {
        display: grid;
        gap: 0.45rem;
        min-inline-size: 0;
    }

    .home-hero__ids,
    .home-hero__actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .home-hero__chip {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .home-hero__title {
        color: var(--ink);
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 4vw, 3rem);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1;
        margin: 0.15rem 0 0;
        text-wrap: balance;
    }

    .home-hero__subtitle {
        color: var(--ink-soft);
        font-size: 0.95rem;
        line-height: 1.5;
        margin: 0;
        max-inline-size: 62ch;
    }

    .home-hero__actions {
        margin-block-start: 0.35rem;
    }

    .home-hero__stats {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-hero__stat {
        background: color-mix(in oklch, var(--surface) 88%, transparent);
        border: 1px solid var(--rule);
        display: grid;
        gap: 0.15rem;
        padding: 0.85rem 0.9rem;
    }

    .home-hero__stat span {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .home-hero__stat strong {
        color: var(--ink);
        font-family: var(--font-display);
        font-size: clamp(1.15rem, 2vw, 1.5rem);
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .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);
        box-shadow: inset 3px 0 0 var(--rule-soft);
        color: var(--ink);
        display: grid;
        gap: 0.45rem;
        padding: 0.9rem 1rem;
        text-decoration: none;
        transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
    }

    .home-section-card--active {
        box-shadow: inset 3px 0 0 var(--primary), 0 0 0 1px color-mix(in oklch, var(--primary) 50%, transparent);
    }

    @media (any-hover: hover) {
        .home-section-card:hover {
            border-color: var(--primary);
            box-shadow: inset 3px 0 0 var(--primary), 0 0 0 1px var(--primary);
        }
    }

    .home-section-card__head,
    .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__routes {
        margin-inline-start: auto;
    }

    .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;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    @media (max-width: 899px) {
        .home-hero {
            grid-template-columns: 1fr;
        }

        .home-highlights {
            gap: 1rem;
            grid-template-columns: 1fr;
        }

        .home-highlights > .home-panel:last-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-hero {
            padding: 0.9rem;
        }

        .home-hero__stats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

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

        .home-section-card__routes {
            margin-inline-start: 0;
        }
    }

}