/* ========== Psychic view (read-only) ========== */

.psy-card {
  border-color: color-mix(in srgb, var(--psychic) 40%, transparent);
}

.psy-card-header {
  background: linear-gradient(90deg, color-mix(in srgb, var(--psychic) 50%, transparent) 0%, color-mix(in srgb, var(--psychic) 40%, transparent) 100%);
  color: var(--ink-strong);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.psy-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.psy-header-icon {
  font-size: 1.1rem;
}

.psy-key-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.psy-key-stat {
  flex: 1;
  min-width: 130px;
  background: color-mix(in srgb, var(--psychic) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--psychic) 30%, transparent);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
}

.psy-key-stat--anomaly {
  border-color: color-mix(in srgb, var(--danger) 50%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.psy-key-stat--anomaly .psy-key-stat-value {
  color: var(--danger);
}

.psy-key-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1.2;
}

.psy-key-stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 2px;
}

.psy-key-stat-detail {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 4px;
}

.psy-disc {
  border-left: 3px solid color-mix(in srgb, var(--psychic) 50%, transparent);
  padding-left: 14px;
}

.psy-disc-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.psy-disc-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-strong);
}

.psy-disc-modifier {
  font-size: 0.9rem;
  color: var(--psychic);
  font-style: italic;
}

.psy-powers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.psy-power {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--psychic) 20%, transparent);
}

/* `flex-wrap: wrap` et non le défaut `nowrap` : quatre des cinq enfants de cette rangée sont
   en `flex-shrink: 0` (.psy-lvl-badge, .psy-strengthen-badge, .psy-power-meta,
   .psy-power-chevron), et le cinquième, .psy-power-title, est en `flex: 1` avec le
   `min-width: auto` par défaut — il ne descend donc pas sous son min-content. Mesuré à 360 px
   sur « Augmenter la Température Ambiante » (le nom le plus long du catalogue) : la rangée
   débordait de 70 px, le chevron sortant de 82 px hors du bord intérieur. Ce débordement
   préexistait au plancher de police (65 px avec les anciennes valeurs) ; la remontée de
   .psy-strengthen-badge et .psy-tag en a ajouté 5. À partir de 575 px il n'y en avait aucun. */
.psy-power-toggle {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--psychic) 8%, transparent);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.psy-power-toggle:hover {
  background: color-mix(in srgb, var(--psychic) 16%, transparent);
}

.psy-lvl-badge {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.psy-lvl-1     { background: color-mix(in srgb, var(--zeon) 20%, transparent);  color: var(--zeon); }
.psy-lvl-2     { background: color-mix(in srgb, var(--success) 20%, transparent);  color: var(--success); }
.psy-lvl-3     { background: color-mix(in srgb, var(--danger) 20%, transparent);  color: var(--danger); }
.psy-lvl-matrix{ background: color-mix(in srgb, var(--psychic) 25%, transparent); color: var(--psychic); }

.psy-power-title {
  font-weight: 600;
  font-size: 1rem;
  flex: 1;
  color: var(--ink);
}

.psy-strengthen-badge {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  background: color-mix(in srgb, var(--psychic) 20%, transparent);
  border-radius: 4px;
  padding: 1px 6px;
  flex-shrink: 0;
}

.psy-power-meta {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.psy-tag {
  font-size: 0.8rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--muted);
  text-transform: capitalize;
}

.psy-tag--action {
  background: color-mix(in srgb, var(--success) 20%, transparent);
  color: var(--success);
}

.psy-power-chevron {
  font-size: 0.8rem;
  color: var(--muted);
  flex-shrink: 0;
}

.psy-power-body {
  padding: 10px 14px 12px;
  background: color-mix(in srgb, var(--psychic) 6%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--psychic) 20%, transparent);
}

.psy-power-desc {
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.5;
}

.psy-effects-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.psy-effects-table th {
  text-align: left;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--psychic) 15%, transparent);
  color: var(--muted);
  font-weight: 600;
  border-bottom: 2px solid color-mix(in srgb, var(--psychic) 30%, transparent);
}

.psy-effects-table td {
  padding: 4px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--psychic) 12%, transparent);
  vertical-align: top;
  color: var(--ink);
}

.psy-fx-roll {
  font-weight: 700;
  color: var(--ink-strong);
  white-space: nowrap;
  width: 48px;
}

.psy-fx-diff {
  white-space: nowrap;
  color: var(--muted);
  width: 140px;
}

.psy-fx-reached {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .psy-key-stats {
    gap: 10px;
  }
  .psy-key-stat {
    min-width: 100px;
  }
  .psy-fx-diff {
    width: auto;
  }
}

/* ========== Psychic launcher (inline in psychic-view) ========== */

.psy-launcher-header {
  margin-bottom: 1rem;
}

.psy-recovery-panel {
  background: color-mix(in srgb, var(--psychic) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--psychic) 35%, transparent);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
}

.psy-recovery-status,
.psy-recovery-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.psy-recovery-status {
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.psy-recovery-status strong {
  color: var(--ink);
}

.psy-recovery-row input {
  max-width: 7rem;
}

.psy-launcher {
  background: color-mix(in srgb, var(--psychic) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--psychic) 35%, transparent);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 1.25rem;
  position: relative;
}

.psy-launcher-close {
  position: absolute;
  top: 8px;
  right: 10px;
}

.psy-launcher-section {
  margin-bottom: 1rem;
}

.psy-pp-spend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(7rem, 1fr)) minmax(8rem, auto);
  gap: 0.6rem;
  align-items: end;
}

.psy-projection-panel {
  border: 1px solid color-mix(in srgb, var(--psychic) 28%, transparent);
  border-radius: 8px;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--surface-2) 22%, transparent);
}

.psy-projection-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
  color: var(--ink);
  font-weight: 600;
}

.psy-projection-toggle input {
  accent-color: var(--psychic);
}

.psy-projection-grid {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) minmax(7rem, auto) minmax(12rem, 1fr);
  gap: 0.75rem;
  align-items: end;
}

.psy-projection-difficulty select {
  min-width: 12rem;
}

.psy-pp-spend-field {
  display: grid;
  gap: 0.25rem;
  margin: 0;
}

.psy-pp-spend-field span,
.psy-pp-spend-field small,
.psy-pp-spend-summary span {
  font-size: 0.8rem;
  color: var(--psychic);
}

.psy-pp-spend-field input {
  max-width: 6rem;
}

.psy-pp-spend-field small {
  color: var(--ink);
}

.psy-pp-spend-summary {
  display: grid;
  gap: 0.15rem;
  justify-items: end;
  padding: 0.35rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--psychic) 32%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-2) 35%, transparent);
}

.psy-pp-spend-summary strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.psy-pp-spend-summary--invalid {
  border-color: color-mix(in srgb, var(--danger) 65%, transparent);
}

.psy-pp-spend-summary--invalid strong,
.psy-pp-spend-summary--invalid span {
  color: var(--danger);
}

.psy-launcher-label {
  /* La balise porteuse varie : deux de ces étiquettes sont devenues des `<label for>`
     pour nommer le champ de dé qui les suit, les autres restent des `<div>` de simple
     titre. `display: block` les rend interchangeables.

     MESURÉ, et le relevé DÉMENT la raison qu'on attendait. Avec les feuilles de
     l'application chargées, un `<label>` privé de cette déclaration ne tombe PAS en
     `inline` : le reset de Bootstrap (`vendor.css`) le met en `inline-block`, donc la
     marge basse survit et le champ suivant ne bouge pas d'un pixel — relevé à 360 px
     contre une copie de cette feuille dont la seule déclaration retirée était celle-ci,
     haut du champ identique des deux côtés. Elle n'est donc pas là pour l'espacement.
     Elle est là pour la CIBLE DE CLIC : en `inline-block` l'étiquette se réduit à la
     largeur de son texte, et un `<label for>` sert précisément à agrandir la zone
     cliquable du champ. Elle ne change rien pour les `<div>`, mesurés identiques avec
     et sans (bloc, mêmes largeur et hauteur). */
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.psy-launcher-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.psy-launcher-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.psy-launcher-empty {
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}

.anima-roll-detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--psychic) 12%, transparent);
  font-size: 0.95rem;
}

/* Le terme de la rangée est un <span>, sauf quand il nomme un champ : il est alors un
   <label for>, et le sélecteur d'élément seul le laissait sans style. */
.anima-roll-detail span:first-child,
.anima-roll-detail label:first-child {
  color: var(--psychic);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.anima-roll-detail span:last-child {
  color: var(--ink);
  font-weight: 600;
}

.anima-disc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.anima-disc-btn {
  padding: 4px 12px;
  font-size: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--psychic) 40%, transparent);
  border-radius: 4px;
  background: transparent;
  color: var(--psychic);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.anima-disc-btn:hover {
  background: color-mix(in srgb, var(--psychic) 15%, transparent);
}

.anima-disc-btn.active {
  background: color-mix(in srgb, var(--psychic) 30%, transparent);
  border-color: color-mix(in srgb, var(--psychic) 70%, transparent);
  color: var(--psychic);
  font-weight: 600;
}

.anima-power-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.anima-power-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--psychic) 25%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--psychic) 8%, transparent);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.anima-power-btn:hover {
  background: color-mix(in srgb, var(--psychic) 18%, transparent);
}

.anima-power-btn.active {
  background: color-mix(in srgb, var(--psychic) 25%, transparent);
  border-color: color-mix(in srgb, var(--psychic) 60%, transparent);
  color: var(--psychic);
  font-weight: 600;
}

/* `.anima-input-with-dice` était déclaré ici ET dans pages/encounter-combat-phase2.css.
   Les déclarations de ce fichier ont rejoint l'autre, sans changer une valeur : le
   triplet a désormais un seul bloc, en tête de encounter-combat-phase2.css, et un seul
   markup, app/components/dice-input.hbs. */

@media (max-width: 575.98px) {
  .psy-pp-spend-grid,
  .psy-projection-grid {
    grid-template-columns: 1fr;
  }

  .psy-pp-spend-summary {
    justify-items: start;
  }
}

/* ========== Mechanics explanation block (view + form) ========== */

.psy-explain {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.psy-explain-item {
  background: color-mix(in srgb, var(--psychic) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--psychic) 20%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--psychic) 55%, transparent);
  border-radius: 6px;
  padding: 8px 12px;
}

.psy-explain-term {
  display: block;
  font-weight: 700;
  color: var(--psychic);
  font-size: 0.95rem;
  margin-bottom: 3px;
}

.psy-explain-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
}

@media (max-width: 640px) {
  .psy-explain {
    grid-template-columns: 1fr;
  }
}

/* ========== Psychic form ========== */

.psy-budget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.psy-budget-item {
  background: color-mix(in srgb, var(--psychic) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--psychic) 25%, transparent);
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.psy-budget-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--psychic);
  margin-bottom: 2px;
}

.psy-budget-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.psy-budget-total {
  border-color: color-mix(in srgb, var(--psychic) 50%, transparent);
}

.psy-budget-free-pos .psy-budget-value {
  color: var(--success);
}

.psy-budget-anomaly {
  border-color: color-mix(in srgb, var(--danger) 50%, transparent);
}

.psy-budget-anomaly .psy-budget-value {
  color: var(--danger);
}

.psy-potential-value {
  font-size: 1.3rem;
  color: var(--psychic);
}

.psy-potential-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.psy-dp-cost-row {
  border-top: 1px solid color-mix(in srgb, var(--psychic) 20%, transparent);
  padding-top: 8px;
}

.psy-discipline {
  border: 1px solid color-mix(in srgb, var(--psychic) 25%, transparent);
  border-radius: 6px;
  padding: 12px;
}

.psy-discipline-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.psy-discipline-header strong {
  font-size: 1.1rem;
  color: var(--psychic);
}

.psy-discipline-modifier {
  font-size: 0.9rem;
  color: var(--psychic);
  font-style: italic;
  flex: 1;
}

.psy-powers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.psy-power-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: color-mix(in srgb, var(--psychic) 8%, transparent);
  border-radius: 4px;
}

.psy-power-level-badge {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.psy-power-level-1 { background: color-mix(in srgb, var(--zeon) 20%, transparent);  color: var(--zeon); }
.psy-power-level-2 { background: color-mix(in srgb, var(--success) 20%, transparent);  color: var(--success); }
.psy-power-level-3 { background: color-mix(in srgb, var(--danger) 20%, transparent);  color: var(--danger); }

.psy-power-name {
  flex: 1;
  font-size: 1rem;
  color: var(--ink);
}

.psy-power-strengthen {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.psy-strengthen-input {
  width: 56px;
}

.psy-add-select {
  max-width: 300px;
}

.psy-add-discipline {
  border-top: 1px solid color-mix(in srgb, var(--psychic) 20%, transparent);
  padding-top: 10px;
}

/* Form — discipline description */
.psy-form-disc-desc {
  font-size: 1rem;
  color: var(--psychic);
  font-style: italic;
  margin: 4px 0 6px;
  line-height: 1.4;
}

/* Form — active powers with expandable description */
.psy-form-powers-active {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.psy-form-power {
  background: color-mix(in srgb, var(--psychic) 8%, transparent);
  border-radius: 4px;
  overflow: hidden;
}

.psy-form-power-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
}

.psy-form-power-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.psy-form-power-toggle:hover .psy-power-name {
  color: var(--psychic);
}

.psy-form-power-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

.psy-form-power-body {
  padding: 6px 10px 8px;
  font-size: 0.95rem;
  color: var(--muted);
  border-top: 1px solid color-mix(in srgb, var(--psychic) 15%, transparent);
  line-height: 1.5;
}

/* Form — available powers list */
.psy-form-avail-powers {
  border-top: 1px dashed color-mix(in srgb, var(--psychic) 20%, transparent);
  padding-top: 8px;
}

.psy-form-avail-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--psychic);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.psy-form-avail-power {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 4px;
}

.psy-form-avail-power:hover {
  background: color-mix(in srgb, var(--psychic) 10%, transparent);
}

.psy-form-avail-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.psy-form-avail-toggle:hover .psy-power-name {
  color: var(--psychic);
}

.psy-form-avail-add {
  flex-shrink: 0;
  padding: 1px 8px;
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 1px;
}

@media (max-width: 575.98px) {
  .psy-budget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .psy-pp-spend-grid {
    grid-template-columns: 1fr;
  }
  .psy-pp-spend-summary {
    justify-items: start;
  }
}

.psy-potential-stepper .psy-stepper-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.psy-stepper-btn {
  min-width: 2rem;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.15rem 0.4rem;
}

.psy-stepper-btn:disabled {
  opacity: 0.4;
}

.psy-stepper-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--bs-secondary-color, var(--muted));
}

/* ========== Psychic how-to modal (mirrors .anima-magic-howto) ========== */

.anima-psychic-howto .magic-howto-section {
  margin-bottom: 0.9rem;
}
.anima-psychic-howto .magic-howto-heading {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.anima-psychic-howto p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.4rem;
}

/* ========== Combat modal — psychic shock phase ========== */

.psy-shock-section,
.psy-shock-result {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
}

.psy-shock-section .anima-modal-label,
.psy-shock-result .anima-modal-label {
  color: var(--danger);
}

.psy-shock-section p,
.psy-shock-result p {
  font-size: 0.9rem;
  margin: 0.35rem 0 0.6rem;
}

.psy-shock-section .btn {
  margin-top: 0.4rem;
}

/* ========== Combat modal — innate-slot maintenance ========== */

.psy-maintained-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.85rem;
}

.psy-maintained-label {
  flex: 1;
  color: var(--ink);
}

/* ========== Combat modal — potential-split (batch multi-power) ========== */

.psy-split-toggle-row {
  display: flex;
  justify-content: flex-end;
}

.psy-split-section {
  border: 1px solid color-mix(in srgb, var(--psychic) 28%, transparent);
  border-radius: 8px;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--surface-2) 22%, transparent);
}

.psy-alloc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.psy-alloc-table th {
  text-align: left;
  padding: 0.25rem 0.4rem;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 2px solid color-mix(in srgb, var(--psychic) 30%, transparent);
}

.psy-alloc-row td {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--psychic) 12%, transparent);
  vertical-align: middle;
}

.psy-alloc-input {
  max-width: 5rem;
}

/* Libellé de cellule : n'existe que sous le seuil, où la table devient une pile de
   cartes. Au-dessus, les <th> font ce travail et l'afficher le ferait deux fois. */
.psy-alloc-cell-label {
  display: none;
}

.psy-split-budget-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--psychic);
  font-weight: 600;
}

.psy-split-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.psy-split-actions .btn,
.psy-split-toggle-row .btn {
  font-size: 0.8rem;
}

.psy-split-results {
  margin-top: 0.5rem;
}

.psy-split-result-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--psychic) 12%, transparent);
}

.psy-split-result-power {
  font-weight: 600;
  color: var(--ink-strong);
}

/* ── Répartition du Potentiel sur téléphone ───────────────────────────────────
   REMPLACE une media query à 575 px qui tentait déjà la mise en cartes. Elle
   s'appliquait bien — et elle ne blockifiait la ligne qu'À MOITIÉ, pour une raison
   qui tient dans son propre bloc : elle déclarait `.psy-alloc-table tr { display:
   block }` (0,1,1) PUIS `.psy-alloc-row { display: flex; flex-wrap: wrap }` (0,1,0).
   Le second perd sur le premier. Mesuré au navigateur à 360 px sur un décalque de la
   chaîne de conteneurs réelle : `getComputedStyle(.psy-alloc-row).display` valait
   `block`, jamais `flex` — donc pas de retour à la ligne, les <td> restaient des
   cellules de tableau et s'alignaient sur une seule rangée.

   ELLE ÉTAIT INERTE, ET ELLE ÉTAIT AUSSI INSUFFISANTE — les deux, et il ne faut pas
   lire la première comme si réparer la spécificité aurait suffi. Contrefactuel
   mesuré : en re-spécifiant son sélecteur pour que le `flex` l'emporte pour de bon,
   `.psy-alloc-row` passe bien à `display: flex`, et il reste 4 éléments coupés,
   +111,5 px à 360 px (+49,5 à 422) — les deux <td> de pouvoir et leurs <select>,
   que rien ne plafonne dans ce bloc-là. Le motif flex ne corrigeait pas la cause,
   il la déplaçait.

   Ce que ça coûtait, relevé sur ce même décalque (deux allocations, la plus longue
   étiquette que puisse produire `allPowerOptions` — le catalogue compte 79 pouvoirs,
   4 de la matrice comprise, recomptés sur AnimaPsychicCatalog.php, et non 78 comme
   l'écrivait une révision antérieure ; polices Roboto/Cinzel réelles
   servies en local) : bord de contenu de la modale à 345 px, trois <td> dont les
   bords droits tombaient à 721,5, 950,5 et 1043,6 px, 28 éléments coupés en tout.
   Un second décalque, monté indépendamment, en relève 24, avec 721,5 à l'identique
   et les deux autres 9 px plus bas : l'écart tient au `target_label` inventé du
   décalque, texte libre dont la longueur n'est pas déterminée par le code. Les deux
   relevés disent la même chose, ils ne se contredisent pas au chiffre près.
   Le relevé qui a ouvert ce chantier
   annonçait 61 éléments et +432 px au pire — il portait sur la modale entière et sur
   d'autres étiquettes, il n'est ni reproduit ni contredit ici ; ce qui se confirme,
   c'est le bord de contenu à 345 px et les trois <td> hors boîte.

   Le seuil passe de 575 à 767,98 px, celui du socle (components.css) et celui que
   suivent les modales. CE BLOC EST LE SEUL À AVOIR CHANGÉ DE SEUIL, et il ne faut
   pas lire ce qui précède comme un alignement du projet : recensé sur app/styles,
   il reste SIX media queries à 575 / 575,98 px, dont TROIS dans ce fichier même
   (`.psy-*`, plus haut), une dans pages/characters.css et deux dans layout.css.
   575 n'était pas un seuil isolé, et il ne l'est toujours pas.

   La carte, et pas la ligne flex : à 360 px, un `flex-wrap` sur cinq cellules donne
   une grille imprévisible où le libellé et son contrôle se séparent. Une cellule =
   une ligne, son libellé au-dessus.

   Après, sur le même décalque : 0 élément coupé à 360, 422, 575 et 576 px, et
   `.anima-modal.scrollWidth === .clientWidth` (358/358 à 360, 420/420 à 422) — donc
   aucun débordement horizontal, pas seulement aucun débordement visible.

   Ce que ce bloc ne corrige PAS, et ce n'est pas un oubli : au-dessus du seuil la
   table reste une table et déborde toujours (26 éléments, +401,7 px à 768 px ;
   16 éléments, +332,9 px à 1024). Relevé identique avant et après — l'ancienne media
   query s'arrêtait à 575, celle-ci à 767,98, ni l'une ni l'autre n'a jamais gouverné
   cette largeur-là. */
@media (max-width: 767.98px) {
  /* `td` est dans cette liste pour la MISE EN PAGE, pas contre le débordement.
     Une révision antérieure écrivait ici que le retirer remettait « 8 éléments hors
     de la boîte de contenu, +42,5 px » : NON REPRODUIT — remesuré à 360 et à 422 px,
     le retirer laisse le relevé à ZÉRO élément coupé.
     La seconde phrase, elle, tient et se vérifie : sans lui les cellules restent des
     `table-cell` et se réalignent en rangée sous un tableau anonyme — c'est
     exactement ce que faisait l'ancien bloc. Ce qui change alors, ce n'est pas le
     débordement, c'est la lisibilité : les cinq cellules se partagent la largeur de
     la carte et les <select> tombent à 55 px (mesuré à 360 px), soit une rangée
     illisible plutôt qu'une rangée qui dépasse. */
  .psy-alloc-table,
  .psy-alloc-table tbody,
  .psy-alloc-table tr,
  .psy-alloc-table td {
    display: block;
    width: 100%;
  }

  /* Les en-têtes de colonne n'ont plus de colonne. Leur texte revient par
     .psy-alloc-cell-label, dans le markup — et l'arbre d'accessibilité confirme que
     l'échange est net : sous le seuil, plus aucun `columnheader`, mais les quatre
     libellés de chaque carte ; au-dessus, les quatre `columnheader` reviennent et les
     libellés disparaissent de l'arbre (ils sont en `display: none`, donc pas
     seulement invisibles : absents). Jamais les deux à la fois.

     RÉSERVE ASSUMÉE, PAS UN OUBLI — la bande 576 à 767,98 px perd les en-têtes de
     colonne alors qu'elle a la place de les porter : le seuil unique du projet la
     range avec le téléphone. Le compromis est délibéré ici — rajouter un seuil
     rien que pour ce tableau serait revenir au défaut qu'on vient de lui retirer —
     mais il n'est pas tranché : c'est une question de conception à poser, pas un
     défaut à corriger en passant. */
  .psy-alloc-table thead {
    display: none;
  }

  .psy-alloc-row {
    border: 1px solid color-mix(in srgb, var(--psychic) 22%, transparent);
    border-radius: 8px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: color-mix(in srgb, var(--surface-2) 30%, transparent);
  }

  .psy-alloc-row td {
    border-bottom: none;
    padding: 0.25rem 0;
    /* Garde-fou pour le cas où un <td> blockifié garderait le `min-width: auto` de
       son contexte de tableau : il ne se laisserait alors pas comprimer sous la
       largeur min-content de son <select>. Le Chromium du harnais ne le fait pas —
       retirer cette ligne laisse le relevé à 0 élément coupé à 360 comme à 422 px.
       Elle reste parce qu'elle ne coûte rien, pas parce qu'elle tient quelque
       chose. */
    min-width: 0;
  }

  .psy-alloc-cell-label {
    display: block;
    /* Plancher du projet. Le libellé est une étiquette, pas du corps de texte, et
       c'est exactement le genre de règle qui glissait sous 0,7 rem. */
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 0.15rem;
  }

  /* LA DEUXIÈME CAUSE DU DÉBORDEMENT (la première, `.anima-input-with-dice > input
     { min-width: 120px }`, est levée plus haut dans ce chantier). La largeur
     intrinsèque d'un <select> est celle de son option la plus longue — ici un nom de
     pouvoir suivi de son niveau, ou un `target_label` de participant.

     CE QUI PORTE LA CORRECTION, ET LA PHRASE QUI ÉTAIT ÉCRITE ICI ÉTAIT FAUSSE.
     Une révision antérieure désignait `max-width: 100%` comme la déclaration
     porteuse, par élimination : elle avait mesuré la règle entière (rouge), puis
     `min-width: 0` seul (vert) et `width: 100%` seul (vert), et conclu qu'il restait
     `max-width`. L'élimination ne vaut pas ici, parce que `width: 100%` et
     `max-width: 100%` sont REDONDANTES — chacune, seule, plafonne déjà le <select>
     à la largeur de sa carte. Retirer `max-width` seul est donc vert lui aussi, ce
     que la révision n'avait pas mesuré.

     Remesuré à 360 et à 422 px sur un décalque de la chaîne de conteneurs réelle,
     polices Roboto/Cinzel servies en local, deux allocations, la plus longue des
     étiquettes d'`allPowerOptions` :

       retirer `min-width: 0`            → 0 coupé      0 coupé
       retirer `width: 100%`             → 0 coupé      0 coupé
       retirer `max-width: 100%`         → 0 coupé      0 coupé
       retirer LES DEUX à la fois        → 2 <select>, +121,5 px    2, +59,5 px
       retirer la RÈGLE ENTIÈRE          → 2 <select>, +121,5 px    2, +59,5 px

     Les deux dernières lignes sont identiques au dixième de pixel : `display: block`
     et `min-width: 0` n'ajoutent rien à ce qui tient la largeur. La seule mutation
     qui rougit est donc le retrait de la règle entière, et c'est celle qu'il faut
     employer pour éprouver une garde — aucune déclaration prise isolément ne
     rougira jamais. */
  .psy-alloc-row select {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* `max-width: 5rem` était calibré pour une cellule de tableau ; en carte, la ligne
     fait toute la largeur.

     SPÉCIFICITÉ 0,2,0 délibérée, et depuis le regroupement du bloc du triplet elle
     n'est plus une précaution : `pages/characters-psychic.css` est chargé AVANT
     `pages/encounter-combat-phase2.css` (index.html, vérifié), et c'est ce dernier qui
     porte maintenant `.anima-input-with-dice input { max-width: 120px }` (0,1,1). Un
     `.psy-alloc-input` nu (0,1,0) ne pourrait donc pas le battre ; le 0,2,0 le bat.
     Mesuré à 360 px, dé-spécifier ce sélecteur à 0,1,0 laisse les quatre champs
     EXACTEMENT aux mêmes largeurs et ne coupe rien de plus. Une révision antérieure
     chiffrait ces largeurs à 281 / 102,9 / 281 / 236,4 px : impossible, les deux
     champs `d100` sont structurellement identiques et ne peuvent pas différer.
     Remesuré : 281 / 237,3 / 281 / 237,3 px — les deux champs d'allocation à 281
     (toute la largeur de la carte), les deux `d100` à 237,3 (la même largeur moins
     le bouton de dé et son écart, qu'ils partagent dans `.anima-input-with-dice`).
     Le plafond est de toute façon levé sous le seuil par
     `.anima-input-with-dice input { max-width: none }`, à 0,1,1, dans la media query
     de pages/encounter-combat-phase2.css.

     Cette règle n'est pas non plus ce qui empêche le débordement : la retirer
     entièrement laisse le relevé à 0 élément coupé. Elle est là pour que le champ
     occupe la largeur de la carte, pas 5 rem au milieu du vide. */
  .psy-alloc-row .psy-alloc-input {
    max-width: none;
    width: 100%;
  }

  .psy-alloc-cell-actions {
    text-align: right;
  }
}

/* Le levée du plafond `max-width` sous le seuil vivait ici, séparée du plancher
   `min-width` qu'elle accompagne. Les deux sont maintenant dans la même media query de
   pages/encounter-combat-phase2.css, avec le bloc de base du triplet. */