/* Detail form layout shared by Health/Visit, Vaccine, Growth pages. */

.page-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.btn-back {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--foreground);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-back:hover {
    background-color: var(--accent);
}

.measure-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.45rem;
}

@media (max-width: 380px) {
    .measure-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.status-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

@media (max-width: 380px) {
    .status-row {
        grid-template-columns: 1fr 1fr;
    }
}

.status {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
}

.status:hover {
    background-color: var(--accent);
}

.status-active {
    background-color: oklch(from var(--event-vaccine) l c h / 0.22);
    color: var(--event-vaccine);
    border-color: oklch(from var(--event-vaccine) l c h / 0.55);
}

.page-actions {
    display: flex;
    gap: 0.55rem;
    margin-top: 1rem;
    align-items: stretch;
}

/* --- Le socle des écrans d'authentification ---------------------------------------------
   Global et non isolé par composant, parce que quatre écrans le partagent : la connexion,
   l'inscription, la demande de lien et la pose d'un nouveau mot de passe. La règle est celle
   du dépôt — au-delà de trois consommateurs, un style remonte ici, sinon les copies divergent.
   Et l'isolation CSS de Blazor est par composant : laissée dans SignIn.razor.css, la moitié
   partagée aurait été invisible aux deux écrans de mot de passe, qui se seraient affichés nus.

   Il remplace le shell `.auth-*` qui vivait ici : la carte centrée sur fond, les libellés à
   icône et le bouton rectangulaire ont été remplacés partout par le plein écran des dessins
   1a et 1d — crème, titre serif, galet d'encre. Plus personne ne rendait `.auth-page`.

   Aucune couleur littérale : tout passe par les jetons de theme.css, si bien que le mode
   sombre tombe juste sans une règle de plus.

   Ce qui reste propre à un écran reste chez lui : `.su-*` (inscription) et `.si-*`
   (connexion) sont scopés dans SignIn.razor.css. */

.auth-screen {
    /* EmptyLayout pose déjà padding: 1rem et 100dvh. Sans cette annulation, le plein écran
       des dessins s'ajouterait à ce cadre au lieu de l'occuper, et déborderait d'autant. */
    margin: -1rem;
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 1.6rem 1.6rem;
    background-color: var(--background);
    color: var(--foreground);
}

/* Le contenu occupe la hauteur libre et s'y centre ; `.as-foot` reste au bord. Les dessins
   posent tout en haut, mais ils remplissent le bas d'une rangée Google / Apple que nous ne
   rendons pas : sans elle, un top-aligné laissait cinq cents pixels de vide sous le bouton,
   ce qui se lit comme un défaut plutôt que comme du calme. C'est aussi ce que faisait
   `.auth-page` avant le redessin. */
.as-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* La marque en serif et en taille de lecture. L'inscription, elle, la réduit à une capitale
   discrète (`.su-brand`) : là-bas le titre de l'étape porte l'écran et la marque ne doit pas
   lui disputer la place, ici elle est l'entrée. */
.as-head {
    padding: 2.75rem 0 2rem;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--foreground);
}

.as-title {
    margin: 0 0 0.6rem;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 2.4rem;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--foreground);
    text-wrap: pretty;
}

/* Le titre reçoit le focus au changement d'étape, mais il n'est pas actionnable : le
   contour de focus dirait le contraire. */
.as-title:focus {
    outline: none;
}

.as-lead {
    margin: 0 0 2rem;
    max-width: 20rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--muted-foreground);
    text-wrap: pretty;
}

.as-form {
    display: flex;
    flex-direction: column;
    animation: row-enter var(--motion-duration-slow) var(--ease-snap) both;
}

.as-gap {
    height: 1rem;
}

.as-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius);
    background-color: var(--alert-danger-bg);
    color: var(--alert-danger-foreground);
    font-size: 0.85rem;
}

/* La bonne nouvelle : le code d'invitation reconnu, le lien parti. Même forme que l'erreur,
   l'autre couleur — ce sont les deux réponses possibles au même geste. */
.as-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--alert-success-bg);
    color: var(--alert-success);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* `.btn-primary` porte déjà l'encre sur crème et l'atténuation à l'état désactivé ; il ne
   reste que le galet des dessins et le relief de l'état actif.

   `flex: none` d'abord, et ce n'est pas cosmétique : `.btn-primary` porte `flex: 1` dans
   sheets.css, où il vit dans une RANGÉE d'actions et se partage la largeur. Sur l'inscription
   il est l'enfant direct d'une colonne, et cette même règle le faisait grandir en HAUTEUR
   jusqu'à remplir l'écran — un galet de six cents pixels de haut. Aucun test de rendu ne
   pouvait le voir : le balisage était juste. `width: 100%` pour la famille de raisons
   inverse, la connexion ne posant pas son bouton dans un conteneur flex. */
.as-go {
    flex: none;
    width: 100%;
    margin-top: 1.1rem;
    min-height: 56px;
    border-radius: 999px;
    box-shadow: var(--shadow-md);
}

.as-go:disabled {
    box-shadow: none;
}

.as-go:not(:disabled):active {
    transform: scale(0.985);
}

.as-go:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.as-switch {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin: 1.1rem 0 0;
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.as-switch a {
    color: var(--foreground);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Le pied colle en bas : les dessins posent la sortie au bord de l'écran, loin du bouton
   d'action pour qu'on ne la touche pas par erreur. */
.as-foot {
    margin-top: auto;
    padding-top: 1.5rem;
}

.as-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Au-delà du téléphone ---------------------------------------------------------------
   Les dessins sont des écrans de 390 px. Sur un écran large, les étirer donnerait une ligne
   de texte de 40 caractères sous un titre de 200 : on borne et on centre plutôt. */
@media (min-width: 34rem) {
    .auth-screen {
        padding-inline: 0;
    }

    .as-main > *,
    .as-foot {
        width: 100%;
        max-width: 24rem;
        margin-inline: auto;
    }

    .as-lead {
        max-width: 24rem;
    }
}