/*
  Tiroir d'aperçu des DEUX messageries — la part commune.

  Retour Tatianna, 21/08 10:56, sur /recruiter/conversations (#3264) :
    « Est-ce que ici on peut adapter le style graphique des autres previews ?
      Avoir la photo de profil en large en haut avec le prénom (tout pareil pour
      le 1er bandeau) et les mêmes tailles et polices pour les sections.
      Remplacer les cercles par les carrés pour les différents états etc.
      → L'idée étant d'avoir une cohérence globale sur toutes les fenêtres. »
  Puis, le même matin (#3266) : « bien penser à faire la modification de la
  messagerie aussi côté Talent ».

  Le commit 180d4e3 (21/08) avait aligné l'HABILLAGE du tiroir sur la charte
  (échelle typographique, gabarits de boutons, jetons de couleur) et laissé la
  STRUCTURE de côté. C'est elle que la cliente demande ici.

  POURQUOI UNE FEUILLE À PART, et pas deux blocs dans recruiter_messages.css et
  talent_messages.css. Les deux messageries déclarent le même vocabulaire `.pm-*`
  sans portée, Propshaft sert les deux feuilles sur chaque page, et c'est pour ça
  que chacune scope ses règles sous `.pm-recruiter` / `.pm-talent`. Mais la
  demande est justement que les DEUX tiroirs se ressemblent : écrire deux fois
  les mêmes règles, une par scope, c'est recréer la dérive qu'on vient de
  corriger. `.pm-drawer` n'existe que sur ces deux tiroirs (rien d'autre dans le
  produit ne porte cette classe), donc une portée `.pm-drawer` dit exactement
  « les deux tiroirs, et rien d'autre », en une seule définition.

  Ce que cette feuille NE fait PAS : redessiner le bandeau, les libellés de
  section ou les lignes de langue. Ces trois composants existent
  (`recruiter/_talent_hero` + recruiter_talent_hero.css, `.ts-qp-sec` et
  `.ts-qp-langs` de recruiter_talent_search.css) et les vues les rendent tels
  quels. Il ne reste ici que ce qu'aucun composant ne couvre : brancher les
  jetons que ces règles consomment, et la forme des pastilles d'état.

  Zéro couleur en dur : tout passe par les jetons de design_tokens.css
  (test/assets/design_system_test.rb, liste TOKENISED_SHEETS).
*/

/* ── 1. Jetons de l'aperçu, rendus disponibles dans le tiroir ────────────────
   Les règles `.ts-qp-*` lisent des variables `--ts-*` qui n'étaient déclarées
   que sur `.ts-page` (recruiter_talent_search.css) et sur `.ra-overlay`
   (recruiter_application_preview.css). Hors de ces deux surfaces elles sont
   « invalid at computed-value time » : les encres et les bordures
   DISPARAISSENT. On ne déclare ici que les six que le tiroir consomme
   réellement, avec les mêmes valeurs (mêmes jetons sources). */
.pm-drawer {
  --ts-gold: var(--gold-500);
  --ts-cream-border: var(--gold-200);
  --ts-ink: var(--preview-ink);
  --ts-ink-soft: var(--n-700);
  --ts-ink-mute: var(--n-500);
  /* Dégradé « métal brossé » du badge Vérifié, déclaré à :root par components.css. */
  --ts-round: var(--gold-metal);
}

/* ── 2. Bandeau d'identité ───────────────────────────────────────────────────
   `.ts-qp-photo` fait 300 px dans un panneau de 440 px. Le tiroir en fait 400,
   la bannière garde donc sa hauteur au bureau et se resserre au mobile, au même
   palier et à la même valeur que l'aperçu d'une candidature (240 px). */
.pm-drawer .ts-qp-photo { border-radius: 0; }

/* Identité encore masquée, côté talent : le bandeau porte le cadenas, pas des
   initiales qui diraient déjà le nom de la Maison. `.page-messages svg` le
   ramènerait à 16 px au milieu d'une bannière de 300, comme un oubli. */
.pm-drawer .ts-qp-hero-initials svg { width: 46px; height: 46px; }

/* Le sous-titre du tiroir talent est le type de la Maison, et ce libellé porte
   une étoile en SVG (« Hôtel 5★ » : le glyphe est banni, `starize`). La preflight
   Tailwind pose `svg { display: block }` globalement, donc l'étoile partait à la
   ligne toute seule, sous le libellé. Elle revient dans le texte, à sa taille. */
.pm-drawer .ts-qp-role svg {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: -1px;
}

/* La croix du tiroir se pose désormais SUR la photo. Elle passe devant la
   bannière et son dégradé, qui n'ont pas de z-index et se rangeraient après
   elle dans l'ordre du document. */
.pm-drawer .pm-drawer-x { z-index: 5; }

/* ── 3. Libellés de section ──────────────────────────────────────────────────
   Les vues rendent `.ts-qp-sec` (9.5px / 700 / .14em / --n-500), la définition
   unique du libellé de section d'un aperçu. Une seule règle restait accrochée à
   l'ancien nom : la rangée « titre + pastille privée » du tiroir recruteur. */
.pm-drawer .pm-ctx-sec-row .ts-qp-sec { margin: 0; }

/* ── 4. Pastilles d'état : des carrés, pas des cercles ───────────────────────
   « Remplacer les cercles par les carrés pour les différents états etc. »
   La référence est la timeline de parcours des deux autres aperçus
   (`.ts-qp-tl-i::before`) : 12 px, coin à 3 px, filet de 1.5 px. On reprend sa
   géométrie et on garde les QUATRE états du fil de candidature (à venir, fait,
   en cours, refusé), que la timeline de parcours ne connaît pas : elle n'en a
   que deux. La forme vient du composant, l'information reste celle de l'écran.

   Seules les propriétés de FORME sont écrites ici. Les couleurs d'état
   (`.pm-step.done .bullet`, `.cur`, `.red`) valent (0,3,0) comme ces
   sélecteurs : elles ne portent que `background` et `box-shadow`, il n'y a donc
   aucun conflit à arbitrer, quel que soit l'ordre de chargement. */
.pm-drawer .pm-step .bullet {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border-width: 1.5px;
}
/* Le filet vertical se recentre sur la nouvelle pastille : 12 px de large, donc
   centre à 6 px, donc un filet de 1.5 px à 5.25 px — les valeurs de
   `.ts-qp-tl::before`. Il démarre sous la pastille, pas sous l'ancienne. */
.pm-drawer .pm-step .rail {
  left: 5.25px;
  width: 1.5px;
  top: 14px;
}

/* ── 5. Mobile (mesuré à 390 px) ─────────────────────────────────────────────
   Le tiroir vaut 92vw, soit 358 px : une bannière de 300 px y prendrait plus
   d'un tiers de la hauteur utile avant le premier bloc de contenu. Même palier
   et même hauteur que l'aperçu d'une candidature. */
@media (max-width: 480px) {
  .pm-drawer .ts-qp-photo { height: 240px; }
  .pm-drawer .ts-qp-id { left: 18px; right: 60px; }
}