/* Le calculateur de dégâts. Rien d'exotique : les mêmes jetons de couleur que
   le reste, et un tableau qui doit rester lisible à 320 px. */

.calc-form{
  display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;
  margin-bottom:16px
}
.calc-champ{display:flex;flex-direction:column;gap:5px;min-width:150px}
/* L'étiquette est celle du Roster (`.member-roster-filter-field span`) : le
   calculateur avait la sienne, plus grosse et plus pâle, et deux dialectes
   d'étiquette sur un même site se voient. */
.calc-champ label{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2)
}

/* LES CHAMPS. Rien ne les habillait : ni cette feuille, qui posait seulement
   une hauteur, ni `base.css`, qui n'a aucun style global d'`input`/`select`.
   Le navigateur rendait donc ses propres boîtes blanches au milieu d'une page
   sombre. Même habillage que `.member-roster-filter-field select`. */
.calc-champ input,.calc-champ select{
  min-height:44px;width:100%;min-width:0;
  font-family:var(--ui);font-size:13.5px;color:var(--parchment);
  background:var(--obsidian-2);border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;transition:.16s
}
.calc-champ select{cursor:pointer;padding-right:30px}
.calc-champ input:hover,.calc-champ select:hover{border-color:var(--gold-deep)}

.calc-armes{display:flex;flex-wrap:wrap;gap:6px}
/* Le build affiché doit se voir : la classe `active` était posée par la vue
   depuis toujours, mais aucune feuille ne la dessinait — les trois armes se
   ressemblaient, et rien ne disait laquelle on regardait. */
.calc-armes .btn.active{
  border-color:var(--gold-bright);color:var(--gold-bright);
  background:linear-gradient(180deg,rgba(217,164,65,.14),var(--obsidian-2))
}

/* Les trois coéquipiers tiennent leur propre ligne. Sans règle, ce bloc était
   un `<div>` nu : ses trois champs s'empilaient en colonne, et
   `align-items:flex-end` alignait tout le reste du formulaire sur le bas de
   cette colonne — d'où le trou béant au-dessus de « Personnage ». */
.calc-coequipiers{
  display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;
  flex:1 1 100%
}
.calc-coequipiers .calc-champ{flex:1 1 180px}
.calc-coequipiers .calc-muette{flex:1 1 100%;margin:0}

/* Une valeur retouchée doit se voir sans qu'on la cherche : c'est elle qui
   fait que le chiffre ne décrit plus le build enregistré. */
.calc-retouche{color:var(--gold-bright)}

.calc-avertissement{font-size:12px;color:var(--muted);margin:8px 0 16px}
.calc-avertissement ul{margin:6px 0 0 18px}
/* Une phrase glissée dans le formulaire prend sa propre ligne : en tant que
   simple élément flex, elle se posait à côté d'un champ et décalait tout
   l'alignement de la rangée. */
.calc-form > .calc-avertissement,.calc-form > .btn{flex:1 1 100%;margin:0}
.calc-form > .btn{flex:0 0 auto;align-self:flex-start}

/* Chaque source de buffs est une carte, sur le modèle de `.cov-card`
   d'analyse.css : le calculateur était le seul onglet du site à empiler des
   sections nues sous un titre en gras, et c'est ce qui lui donnait son air de
   brouillon. La bordure de la carte REMPLACE le séparateur d'avant — les deux
   ensemble poseraient un filet à l'intérieur du cadre.

   `--ec` porte le liseré, et rien d'autre ne change de couleur. */
.calc-carte{
  --ec:var(--gold);
  margin:12px 0;padding:12px 14px;
  background:var(--panel);border:1px solid var(--line);
  border-top:2px solid var(--ec);border-radius:var(--radius)
}
.calc-carte-titre{
  margin:0 0 8px;font-family:var(--display);font-size:13px;font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;color:var(--ec)
}

/* Le dégradé d'or, dans l'ordre d'affichage : du clair à l'éteint. AUCUNE
   teinte nouvelle — les sept couleurs d'élément de js/noyau/constantes.js sont
   déjà prises, et le badge d'élément du build s'affiche sur cette même page :
   un liseré violet s'y lirait comme un indice de Ténèbres.

   Cinq sources, cinq jetons déjà définis dans base.css. La cinquième s'est
   glissée entre les potentiels et les suppléments sans casser la progression :
   `--muted` est la marche qui manquait entre `--gold-deep` et `--muted-2`. */
.calc-soutiens{--ec:var(--gold-bright)}
.calc-tenues{--ec:var(--gold)}
.calc-potentiels{--ec:var(--gold-deep)}
.calc-passifs-armes{--ec:var(--muted)}
.calc-supplements{--ec:var(--muted-2)}

/* La calibration et les avertissements prennent la coque, jamais le liseré :
   le dégradé signifie « source de buff », et ces deux blocs n'en sont pas. */
.calc-calibration.calc-carte,.calc-avertissement.calc-carte{
  border-top:1px solid var(--line)
}
/* « Tout cocher » commande les quatre sections suivantes : elle est au-dessus
   d'elles, et sans trait de séparation, pour se lire comme leur en-tête et non
   comme une cinquième source de buffs. */
.calc-tout-cocher{margin:16px 0 0}
.calc-tout-cocher-case{
  display:flex;gap:9px;align-items:flex-start;padding:3px 0;min-height:30px;
  line-height:1.35;font-size:14px;font-weight:600;cursor:pointer
}
.calc-tout-cocher .calc-avertissement{margin:2px 0 0}
/* Une ligne déjà comptée, sans case à cocher : elle doit se lire comme un
   constat, pas comme une option qu'on aurait oublié de cocher. */
.calc-supplement-actif{
  margin:4px 0;font-size:14px;line-height:1.35;color:var(--gold-bright)
}
/* En colonnes : vingt-quatre buffs en liste plate faisaient défiler la page
   entière avant d'atteindre le tableau, qui est pourtant l'objet de la page. */
.calc-soutiens-grille{
  display:grid;gap:16px 28px;margin-top:12px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))
}
.calc-soutien-nom{
  margin:0 0 2px;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-bright)
}
.calc-buff{
  display:flex;gap:9px;align-items:flex-start;padding:3px 0;min-height:30px;
  line-height:1.35;font-size:14px;cursor:pointer
}
.calc-buff input{
  flex:none;margin-top:2px;width:17px;height:17px;accent-color:var(--gold-bright)
}

/* Un passif qui monte par cumuls se règle au lieu de se cocher. Le nom garde
   l'alignement des lignes cochables au-dessus ; le réglage passe dessous, à
   la même marge que le texte, pour que l'œil descende sans zigzaguer. */
.calc-cumul-ligne{
  display:flex;flex-direction:column;gap:4px;padding:5px 0;
  line-height:1.35;font-size:14px
}
.calc-cumul-reglage{display:flex;gap:9px;align-items:center}
.calc-cumuls-choix{
  flex:none;width:60px;padding:3px 6px;background:var(--panel-2);
  color:inherit;border:1px solid var(--gold-deep);
  border-radius:calc(var(--radius) / 2);font:inherit
}
.calc-cumuls-choix:focus-visible{outline:2px solid var(--gold-bright)}
/* L'apport réel, jamais le plafond : c'est le seul chiffre de la ligne qui
   bouge avec le réglage, donc celui qui doit se voir. */
.calc-cumul-apport{color:var(--gold-bright);font-size:13px}

/* Le tableau cesse de flotter sur le fond : bandeau doré, bordure accentuée,
   coins arrondis. L'ordre reste celui du kit et aucune ligne n'est mise en
   avant — c'est un choix, pas un oubli. */
.calc-resultat{
  margin:16px 0;background:var(--panel-2);border:1px solid var(--gold-deep);
  border-radius:var(--radius);overflow:hidden
}
.calc-resultat-titre{
  padding:9px 14px;background:rgba(217,164,65,.10);
  border-bottom:1px solid var(--gold-deep);
  font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;color:var(--gold-bright)
}
.calc-table{width:100%;border-collapse:collapse;margin-bottom:0}
.calc-resultat .calc-table th,.calc-resultat .calc-table td{padding:8px 14px}
/* L'allure de `.rank-head` d'analyse.css, RECOPIÉE et non empruntée :
   importer la classe coupleraient deux feuilles dont tests/css-ordre.test.js
   vérifie l'ordre, et amènerait son fond `--panel`, qui jure avec le
   `--panel-2` du panneau. */
.calc-resultat .calc-table th{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)
}
/* Le dernier filet tomberait sur la bordure du panneau. */
.calc-resultat .calc-table tbody tr:last-child td{border-bottom:0}
.calc-table th,.calc-table td{
  padding:8px 6px;text-align:right;border-bottom:1px solid var(--line-soft)
}
.calc-table th:first-child,.calc-table td:first-child{text-align:left}
.calc-valeur{font-variant-numeric:tabular-nums}
.calc-essai{
  display:block;margin-top:3px;color:var(--gold-bright);font-size:12px;
  font-variant-numeric:tabular-nums;font-weight:500
}
.calc-essai-negatif{color:var(--muted)}

/* LE BALAYAGE DES PALIERS.

   Trente et une lignes : la couleur doit se lire d'un coup d'oeil, sans que
   le membre ait a comparer des nombres deux a deux. Un gain et une perte ne
   se distinguent donc PAS par la seule teinte — le signe est toujours ecrit
   dans la cellule, pour que la lecture tienne aussi sans percevoir la
   couleur. */
.calc-balayage-paliers{
  margin:16px 0;display:flex;flex-direction:column;gap:10px;
  align-items:flex-start
}
.calc-balayage-resume{margin:0;font-weight:600}
.calc-balayage{
  width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums
}
.calc-balayage th,.calc-balayage td{
  padding:5px 8px;text-align:right;border-bottom:1px solid var(--line-soft)
}
.calc-balayage thead th{
  text-align:right;color:var(--muted);font-size:12px;font-weight:600
}
.calc-balayage th[scope="row"],.calc-balayage thead th:first-child{
  text-align:left;font-weight:500
}
.calc-balayage-ecart{font-weight:600}

/* Le depliant du detail complet. Ferme, il ne coute qu'une ligne : c'est
   tout l'interet, puisque trente et un paliers d'affilee ne se lisent pas. */
.calc-balayage-tout{width:100%}
.calc-balayage-tout>summary{
  cursor:pointer;padding:6px 0;color:var(--gold-bright);font-weight:600;
  font-size:13px;list-style-position:inside
}
.calc-balayage-tout>summary:hover{color:var(--gold)}
.calc-balayage-tout[open]>summary{margin-bottom:4px}

/* Un palier EXTRAPOLE. La marque doit se voir sans crier : le chiffre reste
   utilisable pour comparer, il n'est douteux qu'en valeur absolue. Elle ne
   repose donc pas sur la seule couleur — l'asterisque est ecrit dans la
   cellule, et l'infobulle porte la raison. */
.calc-balayage-extrapole>th[scope="row"]{
  color:var(--muted);font-style:italic;cursor:help
}
.calc-balayage-gain .calc-balayage-ecart{color:var(--gold-bright)}
.calc-balayage-perte .calc-balayage-ecart{color:var(--crimson)}
.calc-balayage-inconnu{color:var(--muted)}

/* Une compétence non chiffrable garde sa ligne : la masquer ferait croire
   qu'elle n'existe pas, la chiffrer à zéro qu'elle ne fait rien. */
.calc-muette{color:var(--muted);font-style:italic}

/* La calibration est un bloc à part, et doit le rester : c'est la seule
   section où le membre saisit une mesure venue du jeu plutôt qu'un chiffre
   que la page a calculé pour lui. */
.calc-calibration{
  margin:24px 0 8px;
  display:flex;flex-direction:column;gap:10px;align-items:flex-start
}
.calc-calibration .calc-champ{min-width:min(100%,260px)}
.calc-calibration select,.calc-calibration input{min-height:44px}
.calc-calibration p{margin:0;max-width:60ch}

/* Le retour de la calibration parle au membre — réussite comme refus — donc
   il ne se fond pas dans les avertissements permanents au-dessus. */
.calc-calibration-message{
  color:var(--gold-bright);border-left:2px solid var(--gold-bright);
  padding-left:10px
}

@media (max-width:560px){
  /* La colonne « Crit » cède la place avant que le tableau ne déborde ;
     non-crit et espérance suffisent à comparer. */
  .calc-table th:nth-child(3),.calc-table td:nth-child(3){display:none}
  .calc-champ{min-width:120px}
  /* La cible tactile reprend ses 44 px : la densité gagnée sur grand écran
     ne doit pas se payer au doigt. */
  .calc-buff{min-height:44px;align-items:center}
  .calc-cumuls-choix{min-height:44px;width:72px}
  .calc-soutiens-grille{grid-template-columns:1fr;gap:12px}
  /* La carte se resserre : 28 px de rembourrage horizontal sur un écran de
     320 px mangeaient une colonne du tableau. */
  .calc-carte{padding:10px 11px}
  .calc-resultat .calc-table th,.calc-resultat .calc-table td{padding:8px 10px}
}