@import '_content/Elioplus.DesignSystem/Elioplus.DesignSystem.gvdmjj65b4.bundle.scp.css';

/* /Components/GettingStarted/GettingStartedIllustration.razor.rz.scp.css */
/* One-off decorative art beside a Getting Started step (DESIGN_SYSTEM_RULES "Where a style goes", step 5):
   composition only, every value from the design system's tokens. Nothing here is reused elsewhere. */

.gs-art[b-7sza7r2f7r] {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    font-size: var(--ds-text-14);
    color: var(--ds-text-primary);
}

.gs-card[b-7sza7r2f7r] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(320px, 100%);
    padding: 22px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-md);
}

.gs-card small[b-7sza7r2f7r] {
    color: var(--ds-text-secondary);
}

.gs-card--center[b-7sza7r2f7r] {
    align-items: center;
    gap: 10px;
    text-align: center;
}

.gs-row[b-7sza7r2f7r] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.gs-id[b-7sza7r2f7r] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: var(--ds-text-16);
}

.gs-url[b-7sza7r2f7r] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 7px 10px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface-sunken);
    font-size: var(--ds-text-12);
    color: var(--ds-text-secondary);
}

.gs-caption[b-7sza7r2f7r] {
    font-size: var(--ds-text-16);
}

/* Team: overlapping avatars. */
.gs-avatars[b-7sza7r2f7r] {
    display: flex;
    padding-left: 10px;
    margin-bottom: 6px;
}

.gs-avatar[b-7sza7r2f7r] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-left: -10px;
    border: 3px solid var(--ds-surface);
    border-radius: 50%;
    background: var(--ds-primary-surface);
    color: var(--ds-primary);
}

.gs-avatar--add[b-7sza7r2f7r] {
    background: var(--ds-primary);
    color: var(--ds-text-inverse);
}

/* Recruit: two tall tiles. */
.gs-tiles[b-7sza7r2f7r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 150px));
    gap: 16px;
}

.gs-tile[b-7sza7r2f7r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-md);
}

/* Portal: a browser window. */
.gs-card--window[b-7sza7r2f7r] {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.gs-window-bar[b-7sza7r2f7r] {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-surface-alt);
}

.gs-window-bar i[b-7sza7r2f7r] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ds-border-emphasis);
}

.gs-window-body[b-7sza7r2f7r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 26px 22px 24px;
    text-align: center;
}

.gs-window-buttons[b-7sza7r2f7r] {
    display: flex;
    gap: 8px;
}

/* A picture of a button, not a control (the whole aside is aria-hidden). */
.gs-fake-button[b-7sza7r2f7r] {
    padding: 6px 16px;
    border: 1px solid var(--ds-primary);
    border-radius: var(--ds-radius-md);
    font-size: var(--ds-text-13);
    font-weight: var(--ds-weight-semibold);
    color: var(--ds-primary);
}

.gs-fake-button--primary[b-7sza7r2f7r] {
    background: var(--ds-primary);
    color: var(--ds-text-inverse);
}

/* Signals and Plans: striped rows. */
.gs-card--rows[b-7sza7r2f7r] {
    gap: 4px;
    padding: 12px;
}

.gs-list-row[b-7sza7r2f7r] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: var(--ds-radius-md);
}

.gs-list-row:nth-of-type(odd)[b-7sza7r2f7r] {
    background: var(--ds-surface-alt);
}

.gs-rows-title[b-7sza7r2f7r] {
    padding: 10px 10px 4px;
    font-weight: var(--ds-weight-bold);
}

/* Acquisition: a two-by-two grid of icon tiles. */
.gs-grid[b-7sza7r2f7r] {
    display: grid;
    grid-template-columns: repeat(2, 80px);
    gap: 14px;
}

.gs-grid-cell[b-7sza7r2f7r] {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-md);
}
/* /Components/PartnerRecruitment/CompanyLogoAvatar.razor.rz.scp.css */
/* A logo with transparency sits on the card surface rather than the avatar's grey fill.
   The image covers the whole (rounded, clipped) avatar, so its background is the avatar's. */
.company-logo-avatar__img[b-bqlsnpdxot] {
    background-color: var(--ds-surface);
}
