/* The combat windows as side panels (sub-project 3C). The box itself is `UiSidePanel`'s
   (components.css, `.anima-side-panel*`); this file lays out what each panel puts inside it.
   The panels carry none of the old `.anima-modal` / `.anima-combat-modal` box classes, so no
   width, max-height, padding or overflow of a centred box lands on the <aside>. Tokens only. */

/* ========== Attaque — maquette [AttackPanel] ========== */

.anima-attack-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The flex gap spaces the blocks: the modal sections' own bottom margin would double it. */
.anima-attack-form > .anima-modal-section {
  margin-bottom: 0;
}

/* The mockup's field labels: sentence case, muted. */
.anima-attack-panel .anima-modal-label {
  margin-bottom: 0;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.anima-attack-panel .form-select,
.anima-attack-panel .form-control {
  min-height: var(--touch-min);
  border-color: var(--border-strong);
  background-color: var(--field);
  color: var(--ink);
}

/* Cible | Arme */
.anima-attack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.anima-attack-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Chips: the attack types, a weapon's uses, a creature's member attacks. */
.anima-attack-chips,
.anima-attack-panel .anima-weapon-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.anima-attack-chip,
.anima-attack-panel .anima-weapon-slot {
  min-height: var(--touch-min);
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
}

.anima-attack-chip:hover,
.anima-attack-panel .anima-weapon-slot:hover {
  border-color: var(--accent);
}

/* Pressed: a 2 px accent ring, the 1 px of padding it takes given back. */
.anima-attack-chip[aria-pressed="true"],
.anima-attack-panel .anima-weapon-slot.active {
  padding: 0 13px;
  border: 2px solid var(--accent);
  background: var(--selected);
  color: var(--ink);
}

.anima-attack-panel .anima-attack-type-master-header {
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

/* The two roll cards: « Jet d'attaque », « Défense de … ». */
.anima-attack-roll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

.anima-attack-roll-heading {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.anima-attack-roll .anima-input-with-dice {
  gap: 10px;
}

.anima-attack-roll .anima-input-with-dice > .form-control {
  max-width: 120px;
  min-height: 52px; /* the mockup's roll field */
  font-family: var(--font-num);
  font-size: 1.2rem;
  text-align: center;
}

.anima-attack-roll .anima-dice-btn {
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.anima-attack-roll .anima-dice-btn:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

/* Esquive / Parade */
.anima-attack-toggles {
  display: flex;
  gap: 6px;
}

.anima-attack-toggle {
  flex: 1 1 0;
  min-height: var(--touch-min);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
}

.anima-attack-toggle:hover {
  border-color: var(--accent);
}

.anima-attack-toggle[aria-pressed="true"] {
  border: 2px solid var(--accent);
  background: var(--selected);
  font-weight: 700;
}

/* The fold group: one bordered list, a row per fold, its count on the right. No overflow
   clipping on the group: a fold body may hold a select or a long label, and a clipped box
   loses it silently. The rows are transparent, so the rounded corners need none. */
.anima-attack-folds {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.anima-attack-fold + .anima-attack-fold {
  border-top: 1px solid var(--border);
}

.anima-attack-folds .anima-fold-toggle {
  min-height: 48px; /* the mockup's fold row */
  gap: 10px;
  padding: 0 14px;
  border: none;
  border-radius: 0;
  color: var(--ink);
  text-align: left;
}

/* The group's rounded corners, on the rows that touch them (1 px inside its border). */
.anima-attack-fold:first-child > .anima-fold-toggle {
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}

.anima-attack-fold:last-child > .anima-fold-toggle:not(.is-open) {
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
}

.anima-attack-folds .anima-fold-toggle:hover,
.anima-attack-folds .anima-fold-toggle.is-open {
  color: var(--ink);
  background: var(--selected);
}

.anima-attack-folds .anima-fold-toggle .anima-section-label {
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.anima-attack-fold-count {
  font-size: 0.8rem;
  color: var(--muted);
}

.anima-attack-folds .anima-fold-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 10px 14px 14px;
}

/* The rule above (0,2,0) ties with `.anima-fold-body.is-folded` (encounter-combat.css, 0,2,0)
   and comes later in the cascade, so its `display: flex` would unfold every fold. This rule is
   more specific than both (0,3,0) and puts the folded body back out of the layout. */
.anima-attack-folds .anima-fold-body.is-folded {
  display: none;
}

.anima-attack-folds .anima-turn-counter-banner {
  margin-bottom: 0;
}

/* Footer: the requirement hint on the left, Annuler and Valider l'attaque on the right. */
.anima-attack-panel .anima-side-panel-actions {
  align-items: center;
  gap: 12px;
  margin-top: 0;
}

.anima-attack-hint {
  flex: 1 1 auto;
  margin-right: auto;
  font-size: 0.8rem;
  color: var(--muted);
}

/* The mockup's footer buttons: body font, sentence case, on one line — not the global Cinzel
   capitals of `.btn` (components.css), which wrapped « Valider l'attaque » onto two lines. */
.anima-attack-panel .anima-side-panel-actions .btn {
  min-height: var(--touch-min);
  padding-inline: 18px;
  border-radius: 10px;
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.anima-attack-submit {
  --bs-btn-bg: var(--accent);
  --bs-btn-color: var(--on-accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-color: var(--on-accent);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-color: var(--on-accent);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-disabled-bg: var(--surface-2);
  --bs-btn-disabled-color: var(--muted);
  --bs-btn-disabled-border-color: var(--border);
  --bs-btn-disabled-opacity: 1;
  font-weight: 700;
}

/* ========== Attaque de zone — target rows ========== */

.anima-area-attack-modal .anima-area-target-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anima-area-attack-modal .anima-area-target-row {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.anima-area-attack-modal .anima-area-target-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.anima-area-attack-modal .anima-area-target-actions {
  display: flex;
  gap: 6px;
}

/* The roll field takes the row, its dice button beside it. The shared field
   (encounter-combat-phase2.css) caps every dice input at 120 px — `.anima-input-with-dice input`,
   `max-width` — which clipped the placeholder « Résultat d100 défense »; the cap is lifted here
   (this rule is more specific: 0,4,0 against 0,1,1), the row's width bounds the field instead. */
.anima-area-attack-modal .anima-area-target-inputs .anima-input-with-dice {
  flex-wrap: nowrap;
}

.anima-area-attack-modal .anima-area-target-inputs .anima-input-with-dice > .form-control {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

/* ========== Résultat d'attaque — la table de calcul ==========
   Le panneau fait 560 px (moins sa gouttière), la table du pire cas tient sans déborder parce
   que ses valeurs cèdent (`overflow-wrap: anywhere`, adventures.css). Si une chaîne venait à
   la dépasser quand même, elle DÉFILE dans la table au lieu d'être coupée : c'est le défaut des
   228 px (CLAUDE.md), une boîte en `overflow-x: hidden` qui perdait les totaux sans rien dire.
   Mesuré par `modal-desktop-reach` (témoin `combat-result`).
   Les colonnes : `1fr auto` (adventures.css) laissait la colonne des valeurs prendre toute sa
   largeur de contenu, et les libellés tombaient à un mot par ligne (« Qualité de / l'arme du /
   défenseur / (+5) », vu à 1440 et 1180 px). Un tiers / deux tiers : un libellé tient sur une ou
   deux lignes, une équation courante sur une, la plus longue sur trois. */
.anima-combat-result-modal .anima-result-breakdown {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  overflow-x: auto;
}