/* The avatar, and the two screens that choose one.

   Sizes come in as --s7-avatar-size, set per call site, because the same component is drawn at
   24px in a bar, 28px at entry, 40px on victory and 84px on the profile — and the addendum is
   specific about which is which. Nothing here changes a line height: the avatar sits inside the
   box the name already occupied. */

.s7-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    inline-size: var(--s7-avatar-size, 24px);
    block-size: var(--s7-avatar-size, 24px);

    /* Always round, whatever went in. The crop is square; the display is not. */
    border-radius: 50%;

    /* Half the diameter reads about right from 24 to 84 without a rule per size. */
    font-size: calc(var(--s7-avatar-size, 24px) * 0.45);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;

    color: var(--neutral-0);
    overflow: hidden;

    /* It never carries meaning of its own: the name is written beside it everywhere. */
    user-select: none;
}

.s7-avatar--photo {
    object-fit: cover;
    background: var(--neutral-100);
}

/* The six the game offers, and no picker beyond them — so that two people at one table cannot
   end up indistinguishable. Drawn from the board and card palette rather than invented. */
.s7-avatar--1 { background: #0B888F; }  /* teal, the board's own */
.s7-avatar--2 { background: var(--azure-600); }
.s7-avatar--3 { background: #B4322E; }  /* the red card */
.s7-avatar--4 { background: #C9821B; }  /* the amber card */
.s7-avatar--5 { background: #5B4FB0; }  /* violet */
.s7-avatar--6 { background: var(--success-600); }

/* A guest: grey, derived from the name, and not a lesser state. Nothing anywhere invites them
   to fix it — there is nothing to fix. */
.s7-avatar--guest {
    background: var(--neutral-300);
    color: var(--ink-900);
}

/* C11 — the profile. Two columns on a desktop, one on a phone, where each block is its own
   screenful. */
.s7-profile {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-6, 24px);
    align-items: start;
}

.s7-profile__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    min-inline-size: 0;
}

.s7-profile__eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--text-muted);
}

.s7-profile__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);

    padding: var(--space-5, 20px);

    /* 14px on cards, as the handoff specifies. */
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-card);
}

.s7-profile__photo {
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
}

.s7-profile__photoText {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    min-inline-size: 0;
}

.s7-profile__heading {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-strong);
}

.s7-profile__hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.s7-profile__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-strong);
}

.s7-profile__rule {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--border-subtle);
}

.s7-profile__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.s7-profile__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
}

.s7-profile__save,
.s7-profile__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* 44px, because everything on this app is touched before it is clicked. */
    min-block-size: 44px;
    padding-inline: var(--space-5, 20px);

    /* 10px on controls. */
    border-radius: 10px;
    border: 1px solid transparent;

    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.s7-profile__save {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.s7-profile__save:hover { background: var(--color-primary-hover); }

.s7-profile__button {
    background: var(--surface-card);
    border-color: var(--border-default);
    color: var(--text-strong);
}

.s7-profile__link {
    min-block-size: 44px;
    padding-inline: var(--space-2, 8px);

    border: 0;
    background: none;
    color: var(--text-link);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* A status is never a colour alone: the sentence says it too, which is what RGAA asks and what
   a person with the page in bright sunlight needs. */
.s7-profile__status {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.s7-profile__status--ok  { color: var(--color-success); }
.s7-profile__status--bad { color: var(--color-danger, #B4322E); }

.s7-profile__current,
.s7-profile__waiting {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
}

.s7-profile__waiting { flex-direction: column; align-items: flex-start; }

.s7-profile__dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--color-success);
}

.s7-profile__ok {
    margin-inline-start: auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-success);
}

.s7-profile__switch {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-block-size: 44px;
}

.s7-profile__elsewhere {
    margin: 0 0 var(--space-4, 16px);
    font-size: 13px;
    color: var(--text-muted);
}

.s7-profile__note {
    padding: var(--space-4, 16px);
    border-radius: 14px;
    background: var(--surface-brand-soft);
}

.s7-profile__whereHeading {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-strong);
}

/* C13 — choosing. Two cards side by side and the same size, because a pastille is a choice and
   not what you get for failing to upload something. */
.s7-photo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6, 24px);
    align-items: start;
}

.s7-photo__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);

    padding: var(--space-5, 20px);
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-card);
}

.s7-photo__pick { cursor: pointer; }

.s7-photo__editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    align-items: flex-start;
}

/* Shown round while being cropped square, so what is chosen is what is seen everywhere else. */
.s7-photo__canvas {
    inline-size: 220px;
    block-size: 220px;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    background: var(--surface-sunken);
    touch-action: none;
}

.s7-photo__zoom {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: 13px;
    color: var(--text-muted);
}

.s7-photo__palette {
    display: flex;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

.s7-photo__swatch {
    display: inline-flex;
    padding: 4px;

    min-inline-size: 44px;
    min-block-size: 44px;
    align-items: center;
    justify-content: center;

    border: 2px solid transparent;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.s7-photo__error {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-danger, #B4322E);
}

/* The focus ring the whole app keeps: azure, 3px, never removed. */
.s7-profile__save:focus-visible,
.s7-profile__button:focus-visible,
.s7-profile__link:focus-visible,
.s7-photo__swatch:focus-visible,
.s7-photo__pick:focus-within {
    outline: 3px solid var(--azure-500);
    outline-offset: 2px;
}

/* CM11 — one form at a time on a phone.

   The index is a phone-only thing and the three cards are a desktop-only thing, which is the
   whole of the difference: on 393px, three forms with three buttons and three kinds of
   consequence stacked in one scroll is exactly the confusion « trois cartes, trois boutons »
   exists to prevent. Each block gets its own screen, and its own way back. */
.s7-profile__blocks { display: none; }

.s7-profile--one {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 820px) {
    .s7-profile {
        grid-template-columns: minmax(0, 1fr);
    }

    .s7-profile__blocks {
        display: flex;
        flex-direction: column;
        gap: var(--space-2, 8px);
        margin-block-end: var(--space-4, 16px);
    }

    .s7-profile__block {
        display: flex;
        align-items: center;

        min-block-size: 44px;
        padding-inline: var(--space-4, 16px);

        border-radius: 10px;
        border: 1px solid var(--border-subtle);
        background: var(--surface-card);

        font-weight: 700;
        color: var(--text-strong);
        text-decoration: none;
    }

    .s7-profile__block:focus-visible {
        outline: 3px solid var(--azure-500);
        outline-offset: 2px;
    }

    /* With the index showing, the cards below it would be the same three forms again. They are
       reached through it, one at a time, at /mon-profil/bloc/... */
    .s7-profile:not(.s7-profile--one) .s7-profile__column { display: none; }
}