/**
 * Le thème : toutes les couleurs, la typographie et les quelques mesures partagées.
 *
 * C'est le seul fichier où l'on écrit une couleur en dur. Partout ailleurs on cite
 * un jeton `--*`. Une nuance qui n'existe pas encore se déclare ici avant de servir,
 * sinon la même idée finit écrite de trois façons.
 *
 * Trois familles de jetons :
 *   --bg, --panel, --line, --fg…   la matière de l'interface (fonds, traits, texte) ;
 *   --lvl-…                        la gravité d'un verdict (faute, à surveiller, propre) ;
 *   --c-…, --d-…, --o-…            ce que désigne un marqueur (kick, mort, CD défensif).
 *
 * Une couleur de classe de personnage n'est pas un choix de design : elle vient de
 * Blizzard et vit dans `js/domain/classes.js`.
 */

/* Polices servies par le site lui-même : aucune requête vers un tiers pour afficher du texte. */
@font-face {
  font-family: 'Inter';
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2?v=2c295d99e2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2?v=5e6d4fe9d9) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin.woff2?v=83c005d49d) format('woff2');
}

:root {
  /* ---------- Matière ---------- */
  --bg: #0b0d12;
  --panel: #12161f;
  --panel-2: #171c27;
  /* Fond creusé : une zone en retrait dans un panneau (piste, cellule, barre). */
  --sunken: #0c0f16;
  --sunken-2: #0c1017;
  /* Fond d'un élément qui flotte au-dessus du reste : bulle, tiroir, menu. */
  --float: #0d1119;
  /* Surface relevée : un élément survolé ou actif. */
  --raise: #1c2431;
  --raise-2: #2a3444;
  /* Voile posé sur la page sous une fenêtre qui attend une réponse. */
  --scrim: rgba(8, 10, 14, 0.78);
  --line: #222a38;
  --line-soft: #1a212c;
  /* Trait plus marqué : séparateur assumé, contour d'un bloc flottant. */
  --line-strong: #232c3c;
  --line-float: #2c3648;
  /* Contour d'un contrôle survolé ou allumé. */
  --line-hot: #33405a;
  --fg: #e7eaf0;
  --muted: #8a93a6;
  /* L’or du liseré de la capuche : l’accent de toute l’interface. */
  --accent: #d8a657;

  /* ---------- Identité : le hibou ---------- */
  /* Poukey, la mascotte de Wipe to Win : un hibou encapuchonné qui veille la nuit sur
     tes clés et voit ce qui a échappé au groupe. Ses trois teintes viennent du logo
     (images/logo-*.png) : la capuche, le liseré d’or, le regard. */
  --owl-navy: #1c2b5c;
  --owl-teal: #2ccfc3;
  /* Halo de la capuche : sans lui, le bleu nuit se perd sur le fond. */
  --owl-glow: rgba(44, 207, 195, 0.22);

  /* ---------- Gravité d'un verdict ---------- */
  /* Les trois niveaux que rendent les règles (`js/domain/rules.js`) : une faute
     nette, un point à surveiller, un contrôle passé. Ils reprennent les teintes des
     marqueurs correspondants, pour qu'une carte rouge et une mort se répondent. */
  --lvl-bad: var(--c-death);
  --lvl-warn: var(--c-interrupt);
  --lvl-good: var(--d-major);
  /* Déclinaisons : le liseré d'une carte, le fond d'une pastille. */
  --lvl-bad-ring: #3a1f25;
  --lvl-warn-ring: #3a2f1c;
  --lvl-bad-bg: #2a1519;
  --lvl-warn-bg: #2a2317;
  /* Versions adoucies, pour un chiffre ou un libellé : le rouge vif d'un marqueur
     fatigue dès qu'il porte du texte. */
  --text-bad: #ff7a85;
  --text-good: #63d69f;

  /* ---------- Ce que désigne un marqueur ---------- */
  --c-interrupt: #ff9f43;
  --c-miss: #e0574f;
  --c-dispel: #38c8e8;
  --c-cc: #b47cff;
  --c-conso: #7ee787;
  --c-death: #ff4d5e;
  --c-rez: #7ee787;
  --c-hp: #6ea8fe;
  --c-cast: #e879a6;
  --c-taunt: #b5e853;
  /* Sévérité d'un cast ennemi passé (cf. CAST_TIERS). */
  --cast-none: #5a6275;
  --cast-low: #f2c14e;
  --cast-mid: #ff8c42;
  --cast-high: #ff4d5e;
  /* CD défensifs, par nature. */
  --d-immunity: #ffd166;
  --d-major: #2dd4a7;
  --d-external: #5b9bff;
  --d-raid: #c084fc;
  --d-minor: #64748b;
  /* CD offensifs : même grammaire, dans les tons chauds. */
  --o-major: #ff9f43;
  --o-minor: #8a6a3f;
  --o-group: #ffd166;
  --c-dmg: #ff9f43;

  /* ---------- Séries ---------- */
  /* Couleurs de la répartition par cible. Le même jeu est déclaré dans
     `js/views/tables.js`, qui les pose en style en ligne — les deux doivent suivre. */
  --series-1: #e0b341;
  --series-2: #4e9ef5;
  --series-3: #5fd38d;
  --series-4: #e06c9f;
  --series-5: #9b7ede;
  --series-6: #e4894f;
  --series-7: #48c0c8;
  --series-8: #c2556d;
  --series-9: #8b93a3;

  /* ---------- Mesures ---------- */
  /* Confort de lecture : 1.5 revient au zoom 150 % du navigateur. */
  --ui-scale: 1.5;
  /* Marges du panneau de droite. Les en-têtes collants les reprennent : Chrome cale
     leur `top` sur la zone de contenu, pas sur le bord du panneau, et une barre
     collante doit couvrir toute la largeur, sinon la frise défile sur ses côtés. */
  --pane-pad: 28px;
  --pane-padx: 32px;
  /* Largeur des panneaux latéraux, que l'utilisateur peut tirer (voir ui/drawer.js).
     Les comparaisons suivent le principal tant qu'on ne les a pas tirées à la main. */
  --drawer-w: 520px;
  --compare-w: var(--drawer-w);

  /* ---------- Typographie ---------- */
  /* Inter pour le texte : dessin neutre, très lisible en petit corps, et des chiffres
     à chasse fixe (`tabular-nums`) qui alignent les colonnes sans police monospace.
     JetBrains Mono pour les horodatages et les valeurs brutes. Les polices système
     restent en repli : hors ligne, l'application doit rester lisible. */
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  zoom: var(--ui-scale);
  /* L'agrandissement multiplie aussi les hauteurs : on rend la fenêtre en unités d'avant zoom. */
  height: calc(100dvh / var(--ui-scale));
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 var(--sans);
  /* Les chiffres d'une colonne doivent s'aligner : c'est une application de chiffres. */
  font-variant-numeric: tabular-nums;
  font-optical-sizing: auto;
  letter-spacing: -0.006em;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Barres de défilement fines, sur fond transparent, dans les teintes de l'interface :
   celles du système, claires et larges, juraient avec le thème sombre. Chrome ignore
   les pseudo-éléments dès que `scrollbar-color` est posé : Firefox seul le reçoit. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--raise-2);
  border: 3px solid transparent;
  border-radius: 6px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--line-hot);
  border-width: 2px;
}
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--raise-2) transparent;
  }
}

.mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: -0.02em;
}
.muted {
  color: var(--muted);
}
.grow {
  flex: 1;
}
.hidden {
  display: none !important;
}