/* ==========================================================================
   Vies : compléments du front (LOT-DEV-03)
   Ne redéfinit aucun composant de styles.css : uniquement des utilitaires
   (préfixe app-) qui remplacent les styles en ligne de la maquette, et
   quelques états propres à l'application. Tokens uniquement.
   ========================================================================== */

/* Accès rapide au contenu */
.app-skip {
  position: absolute;
  z-index: 100;
  top: var(--sp-2);
  left: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-2);
  background: var(--primary);
  color: var(--on-primary);
  transform: translateY(-200%);
}
.app-skip:focus { transform: none; color: var(--on-primary); }

.app-boot, .app-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-4);
}
.app-boot { min-height: 60vh; }
.app-noscript { padding: var(--sp-6) var(--gutter); text-align: center; }

/* Remplaçants des styles en ligne de la maquette */
.app-page { padding-block: var(--sp-6) var(--sp-8); }
.app-cluster-tight { --cluster-gap: var(--sp-1); }
.app-cluster-loose { --cluster-gap: var(--sp-3); }
.app-center-cluster { justify-content: center; }
.app-measure { max-width: 52ch; }
.app-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.app-legend { margin-bottom: var(--sp-2); padding: 0; }
.app-cert-space { height: var(--sp-7); }
.app-w-80 { width: 80%; }
.app-w-70 { width: 70%; }
.app-minw0 { min-width: 0; }
.app-ink { color: var(--ink); }
.app-alert-slot:empty { display: none; }
.app-back { padding-left: var(--sp-2); }
.app-btn-danger-text { color: var(--danger); }

/* Avatars teintés (remplace --av-bg/--av-fg en ligne) */
.app-av--1 { --av-bg: var(--accent-wash); --av-fg: var(--accent-strong); }
.app-av--2 { --av-bg: var(--info-wash); --av-fg: var(--info); }
.app-av--3 { --av-bg: var(--warning-wash); --av-fg: var(--warning); }
.app-av--4 { --av-bg: var(--success-wash); --av-fg: var(--success); }

/* Connexion */
.app-auth-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.v-auth__form > .v-alert { margin-bottom: var(--sp-4); }

/* Mes vies */
.app-save__cta { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--ink); }
.app-truncate { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v-save[aria-disabled="true"], .v-btn[aria-disabled="true"][role="link"] { pointer-events: none; }

/* En-tête de jeu */
.app-figure-text { font-size: var(--fs-sm); white-space: nowrap; }

/* Panneau de stats */
.app-stat-delta { margin-left: var(--sp-1); font-size: var(--fs-2xs); font-weight: 700; }
.app-side-dl { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.app-side-warn { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--warning); }

/* ARBITRAGES §9 : sur mobile, panneau replié (icône + valeur) hors onglet « Vie » */
@media (max-width: 767px) {
  .app-side--compact .v-panel { padding: var(--sp-3); }
  .app-side--compact .v-panel__title, .app-side--compact .app-side-dl, .app-side--compact .app-side-warn { display: none; }
  .app-side--compact .v-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
  .app-side--compact .v-stat { grid-template-columns: auto 1fr; grid-template-areas: "icon value"; row-gap: 0; }
  .app-side--compact .v-stat__label, .app-side--compact .v-stat__bar { display: none; }
  .app-side--compact .v-stat__value { justify-self: start; }
}

/* Patrimoine : vignettes de chiffres */
.app-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); }

/* Modales */
.app-modal--wide { max-width: 560px; }
.app-dialog-form .v-alert { margin-top: var(--sp-4); }
.app-pnj-head { display: flex; align-items: center; gap: var(--sp-4); padding-right: var(--sp-7); }
.app-pnj-head .v-modal__title { margin-bottom: var(--sp-1); }
.v-event .v-modal__title { padding-right: var(--sp-7); }
.v-event .v-list__aside .v-btn { white-space: nowrap; }

/* Carte d'événement : résultat */
.app-event-zone:empty { display: none; }
.app-event-zone { margin-top: var(--sp-4); }
.app-event-choice { margin-bottom: var(--sp-3); font-style: italic; }
.app-event-deltas { margin-top: var(--sp-4); }
.app-event-foot { display: block; }

/* Toasts : variations */
.app-toast__deltas { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-1); }
.app-toast__deltas .v-delta { color: inherit; }

/* Fin de vie */
.app-ending-journal { margin-top: var(--sp-8); text-align: left; }
.app-ending-journal:focus { outline: none; }
.app-ending-journal:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }

/* Compte */
.app-card-danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }

/* Focus des titres de page et d'onglet (cibles de focus programmatique) */
[data-page-title]:focus, [data-tab-title]:focus, .v-game__main:focus { outline: none; }

/* Les textes u-sr-only (absolus) d'un tableau défilant ne doivent pas élargir la page */
.v-table-wrap { position: relative; }