/* The ecosystem band (Components/Shared/EcosystemBand.razor): one quiet line
   under every property's footer. Sent to every area by App.razor beside
   tokens.css, and written only in inherited colour and the shared tokens so
   it takes on each area's own look rather than imposing one. */
.eco-band {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1.5rem;
    padding-block: 1rem;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    font-size: .875rem;
    line-height: 1.4;
}

.eco-band__lead {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
}

.eco-band__home {
    font-weight: 600;
}

.eco-band__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
}

.eco-band__list a,
.eco-band__list span[aria-current] {
    color: inherit;
}

.eco-band__list span[aria-current] {
    font-weight: 600;
}

/* Full colour, not faded: a dimmed host name at this size falls under
   4.5:1 on half the areas' grounds. The parentheses-free spacing is enough. */
.eco-band__host {
    margin-left: .25rem;
    font-weight: 400;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.eco-band a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* The platform flow (Components/Shared/EcosystemFlow.razor): the core as an
   ordered row of steps joined by arrows, then the properties as the questions
   that lead to them. Lists, not a picture — it wraps on a phone and reads in
   order aloud. */
.eco-flow {
    display: grid;
    gap: 1.25rem;
}

.eco-flow__label {
    margin: 0;
    font-weight: 600;
}

.eco-flow__core {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    counter-reset: eco-step;
}

.eco-flow__core li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .75rem;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 999px;
    font-size: .9375rem;
    white-space: nowrap;
}

/* The arrow is decoration: the list's order already says "then". */
.eco-flow__core li + li::before {
    content: "→" / "";
    margin-right: .25rem;
    margin-left: -.25rem;
}

.eco-flow__paths {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: .75rem;
}

.eco-flow__paths li {
    display: grid;
    gap: .25rem;
    padding: .875rem 1rem;
    border-left: 3px solid currentColor;
    min-width: 0;
}

.eco-flow__q {
    font-weight: 600;
}

.eco-flow__paths a {
    font-weight: 600;
}

.eco-flow__job {
    font-size: .9375rem;
}

/* /ecosystem: Run, then the four, as cards in a responsive grid. */
.eco-roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
}

.eco-roles h2 {
    font-size: 1.25rem;
    margin: .25rem 0 .5rem;
}

/* A contextual pointer to another Abizvo product (EcosystemHint.razor). */
.eco-hint {
    margin: .5rem 0 1rem;
    font-size: .875rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
}

.eco-hint__q {
    font-weight: 600;
}