/* =====================================================================
   Ulalu — le hall de l'invité (D-135)
   ---------------------------------------------------------------------
   La page /c/{token} était une pile : l'appareil, le dépôt, le prénom,
   la voix, un bouton d'envoi grisé, tout déroulé d'un coup sous le même
   titre. Elle est maintenant un menu de ce que cet invité a le droit de
   faire, et chaque action a son écran.

   Trois règles tiennent la mise en page :

     1. les tuiles sont égales — aucune n'est plus grosse qu'une autre :
        toutes sont à faire (D-224), dans l'ordre que l'invité veut ;
     2. une tuile entière est le bouton (jamais un petit « Ouvrir » dans
        un coin) : en soirée, sur un téléphone, la cible est la carte ;
     3. un écran à la fois — le hall s'efface quand un panneau s'ouvre,
        et rien ne reste visible derrière.

   Complément de guest.css, chargé par la seule page invité. Toutes les
   couleurs viennent des jetons : le mode sombre suit sans une règle.

   Sommaire : 1 menu · 2 tuile · 3 états · 4 panneaux · 5 signature
   · 6 grand écran · 7 mouvement
   ===================================================================== */

/* ---------- 1. Le menu ---------- */
.hall__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.hall__item { margin: 0; }

/* ---------- 2. La tuile ---------- */
.hall__tile {
    width: 100%;
    display: grid;
    grid-template-columns: 3.25rem 1fr 1.25rem;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1rem 1rem .9rem;
    text-align: start;
    font: inherit;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    /* La cible au doigt : le minimum posé par ulalu.css, appliqué à la carte entière. */
    min-height: 5.5rem;
}

.hall__tile:hover { border-color: var(--ember-text); }

.hall__art {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ember) 12%, var(--surface));
    color: var(--ember-text);
}

.hall__art svg { width: 1.75rem; height: 1.75rem; }

.hall__text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.hall__name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.25;
}

.hall__lead {
    color: var(--muted-ink);
    font-size: .88rem;
    line-height: 1.35;
}

.hall__chev {
    display: grid;
    place-items: center;
    color: var(--muted-ink);
}

.hall__chev svg { width: 1.1rem; height: 1.1rem; }

/* ---------- 3. Les états ---------- */
/*
 * L'état est ce que la tuile a de plus utile : « 5 poses restantes », « 12 envoyées »,
 * « Pellicule terminée ». Il est vide tant que rien n'est su — jamais un zéro trompeur.
 */
.hall__state {
    margin-top: .2rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ember-text);
}

.hall__state:empty { display: none; }

/*
 * La pastille (D-224) : « À faire » tant que l'invité n'a rien laissé derrière la tuile, « Fait » ensuite. C'est elle
 * qui dit que le menu est une liste, pas une alternative — trois tuiles « À faire » se lisent comme trois choses à
 * faire. Vide tant que rien n'est su, comme l'état qu'elle précède.
 */
.hall__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 .5rem;
}

.hall__status > * { margin-top: .35rem; }

.hall__badge {
    padding: .1rem .55rem;
    border: 1px solid color-mix(in srgb, var(--ember) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ember) 12%, var(--surface));
    color: var(--ember-text);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.hall__badge:empty { display: none; }

/* Déjà fait : la tuile reste lisible et cliquable — on peut toujours revoir — mais elle n'appelle plus. */
.hall__tile.is-done { background: var(--surface-2); }
.hall__tile.is-done .hall__art { color: var(--muted-ink); background: color-mix(in srgb, var(--muted-ink) 12%, transparent); }
.hall__tile.is-done .hall__state { color: var(--muted-ink); }

.hall__tile.is-done .hall__badge {
    border-color: var(--line-strong);
    background: transparent;
    color: var(--muted-ink);
}

.hall__tile.is-done .hall__badge::before {
    content: "\2713\00a0";        /* la coche de « fait », lue comme décoration */
    speak: never;
}

/*
 * Rien à y faire pour cet invité : toutes les pellicules distribuées (D-088), quota atteint. Éteinte par la
 * couleur, jamais par l'opacité — une opacité de 0,7 fait retomber sous AA un texte qui y était (règle 3).
 */
.hall__tile[disabled] {
    cursor: default;
    background: var(--surface-2);
    color: var(--muted-ink);
}

.hall__tile[disabled] .hall__art {
    color: var(--muted-ink);
    background: color-mix(in srgb, var(--muted-ink) 12%, transparent);
}

.hall__tile[disabled] .hall__state { color: var(--muted-ink); }
.hall__tile[disabled]:hover { border-color: var(--line); }

.hall__item--quiet .hall__tile {
    background: transparent;
    box-shadow: none;
    border-style: dashed;
}

/* ---------- 4. Les panneaux ---------- */
/*
 * Un écran par action. Le hall n'est pas masqué par un « display: none » du panneau :
 * c'est le hall lui-même qui porte [hidden], pour que rien ne reste sous le doigt.
 */
.gp { display: block; }

.gp__bar {
    margin: 0 0 .75rem;
}

.gp__back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    padding: 0 .6rem 0 .35rem;
    font: inherit;
    color: var(--ember-text);
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.gp__back:hover { text-decoration: underline; }

.gp__chev {
    display: grid;
    place-items: center;
}

/* Le chevron du menu pointe à droite ; celui du retour, à gauche : c'est le même dessin retourné. */
.gp__chev svg {
    width: 1.1rem;
    height: 1.1rem;
    transform: scaleX(-1);
}

/* Une page qui n'ouvre qu'une porte n'a pas de hall, donc rien où revenir. */
.gp[data-solo] .gp__bar { display: none; }

/* ---------- 5. La signature ---------- */
/*
 * Un seul prénom pour toute la page : le bloc est déplacé dans le panneau ouvert
 * (hall.js), jamais recopié. Masqué tant qu'il n'a pas trouvé sa place.
 */
.g-sign:not([data-placed]) { display: none; }

.g-sign { margin-block: .75rem; }

.g-sign label {
    display: block;
    margin-bottom: .25rem;
}

.g-sign input { width: 100%; }

/* Au menu, le prénom se donne avant de choisir : au-dessus des tuiles, un peu détaché d'elles. */
.hall__sign .g-sign { margin-block: 0 1.1rem; }

/* ---------- 6. Grand écran ---------- */
@media (min-width: 40rem) {
    .hall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Quatre entrées : deux lignes pleines. Trois : la dernière prend toute la largeur
       plutôt que de laisser un trou, et les trois actions restent de même poids. */
    .hall__item--quiet { grid-column: 1 / -1; }
}

/* ---------- 7. Mouvement ---------- */
.hall__tile,
.hall__tile .hall__art {
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .hall__tile,
    .hall__tile .hall__art { transition: none; }
}