/*
  Les cartes du gabarit des pages outils (cartes.mjs ; PRODUIT, 10/11/2026, GO LEAD 17:3x). Elles portent les classes et les
  jetons d'outils.css et de boucle.css (--hb-*) : cette feuille n'ajoute que ce que leurs scènes n'avaient pas, sous des classes
  uc-gab-* à elles. Rien ici ne touche une carte d'outils.mjs.
*/

/* « suite » (Merge, bloc 03) : la question de l'espace au-dessus des IA, puis les IA en lignes comme les outils de l'étape 2. */
.hb.uc .uc-gab-q { margin: 0; padding: .85em 1.6em 0; font-weight: 700; color: var(--hb-ink); line-height: 1.3; }
.hb.uc .uc-gab-q + .uc-tools { padding-block-start: .45em; }
.hb.uc .uc-gab-ia .hb-ai-dot { inline-size: 1.6em; block-size: 1.6em; font-size: max(12px, .72em); } /* deux lettres de l'IA, ≥ 12 px (PRODUIT 12/11, P2) */
.hb.uc .uc-tool.is-selected .hb-ai-dot { background: #fff; color: var(--hb-blue); border-color: transparent; }

/* « continuer » et « suite » : le nouveau chat se lit comme un chat — tant que tout tient, le fil reste en haut ; quand la réponse de
   l'IA ne tient plus (carte basse d'une étape « How it works », réponse de deux lignes), c'est le haut du fil qui sort, jamais la
   dernière ligne écrite. Défaut d'affichage seul, mesuré PRODUIT 12/11 sur /ai-profile-v4/ (EN, FR, DE, ES) à 1440 : la seconde ligne
   de la réponse coupée par le bas de la carte. Marge automatique : elle prend la place libre (fil en haut) ; sans place libre, elle
   vaut 0 et flex-end garde le bas du fil visible. */
.hb.uc[data-uck-carte-gabarit="continuer"] .uc-cont,
.hb.uc[data-uck-carte-gabarit="suite"] .uc-cont { display: flex; flex-direction: column; justify-content: flex-end; }
.hb.uc[data-uck-carte-gabarit="continuer"] .uc-cont > .uc-thread,
.hb.uc[data-uck-carte-gabarit="suite"] .uc-cont > .uc-thread { flex: none; margin-block-end: auto; }

/* « ecart » (Merge, bloc 02) : deux chats, pas trois — ils se rejoignent au milieu. */
.hb.uc .uc-gab-ecart .uc-chats .uc-chat:nth-child(1) { --uc-to: 1.8em; }
.hb.uc .uc-gab-ecart .uc-chats .uc-chat:nth-child(2) { --uc-to: -1.8em; }
/* La ligne où les deux chats diffèrent : un trait de surligneur lime, posé une fois écrite (encre --hb-ink sur lime). */
.hb.uc .uc-gab-deux .uc-typed {
  background: linear-gradient(transparent 58%, transparent 58%) no-repeat 0 0 / 0% 100%;
  transition: background-size .5s cubic-bezier(.2, .8, .2, 1);
}
.hb.uc .uc-gab-deux.is-marked .uc-typed {
  background-image: linear-gradient(transparent 52%, var(--hb-lime) 52%);
  background-size: 100% 100%;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .hb.uc .uc-gab-deux .uc-typed { transition: none; }
}

/* « document » (Memo, bloc 02) : le document de la carte memo d'outils.mjs, et son pied de lecture (ce qui a été lu, d'où). */
.hb.uc .uc-gab-doc { gap: .7em; }
/* Memo V4 (PRODUIT 11/11) : quatre parties au lieu de trois. Sur une carte étroite (390), le document tenait juste ; avec la quatrième
   partie, le titre et la ligne « Source read » sortaient du cadre (mesuré). Le Memo seul se resserre (AI Profile garde ses trois parties). */
@container hb (max-width: 400px) {
  .hb.uc:not([data-doc="profil"]) .uc-gab-doc { gap: .42em; padding-block: .75em; }
  .hb.uc:not([data-doc="profil"]) .uc-gab-doc .uc-part-h { margin-block-end: .12em; }
  .hb.uc:not([data-doc="profil"]) .uc-gab-doc .uc-doc-title { padding-block-end: .4em; }
}
.hb.uc .uc-gab-lu {
  display: grid; gap: .15em;
  margin-block-start: .1em; padding-block-start: .6em;
  border-top: 1px dashed var(--hb-line);
  font-size: max(15px, .84em); line-height: 1.35; color: var(--hb-ink);
  opacity: 0;
}
.hb.uc .uc-gab-lu.is-on { opacity: 1; transition: opacity .3s ease; }
.hb.uc .uc-gab-lu p { margin: 0; }
.hb.uc .uc-gab-lu .uc-typed {
  background: linear-gradient(transparent 58%, transparent 58%) no-repeat 0 0 / 0% 100%;
  transition: background-size .5s cubic-bezier(.2, .8, .2, 1);
}
.hb.uc .uc-gab-lu.is-marked .uc-typed { background-image: linear-gradient(transparent 52%, var(--hb-lime) 52%); background-size: 100% 100%; }

/* « partager » (Memo, bloc 03 et étape 3) : le Memo, puis « Create a link » ; la ligne du lien prend la place du pied. */
.hb.uc .uc-gab-memo { display: flex; flex-direction: column; justify-content: center; gap: .55em; padding: .8em 1.3em; }
.hb.uc .uc-gab-memo .uc-part li + li { display: none; }
.hb.uc .uc-gab-lien {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  display: flex; align-items: center; gap: .6em;
  padding: .7em .9em .85em;
  border-top: 1px solid var(--hb-line); background: #fff;
  opacity: 0; transform: translateY(.6em);
}
.hb.uc .uc-gab-lien.is-on { opacity: 1; transform: none; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.hb.uc .uc-gab-url {
  flex: 1; min-inline-size: 0;
  display: flex; align-items: center; gap: .45em;
  block-size: 2.5em; padding-inline: .85em;
  border-radius: 999px; background: #F3F4FA; box-shadow: inset 0 0 0 1px var(--hb-line);
  font: 600 max(15px, .88em)/1 HBDM, sans-serif; color: var(--hb-ink); white-space: nowrap;
}
.hb.uc .uc-gab-url svg { flex: none; inline-size: .9em; block-size: .9em; color: #8A91AD; }
.hb.uc .uc-gab-url span { overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.hb.uc .uc-gab-copier { flex: none; display: inline-grid; }
.hb.uc .uc-gab-copier > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .4em; transition: opacity .2s ease; }
.hb.uc .uc-gab-copier .uc-gab-b { opacity: 0; }
.hb.uc .uc-gab-copier .uc-gab-b svg { inline-size: .9em; block-size: .9em; }
.hb.uc .uc-gab-copier.is-done .uc-gab-a { opacity: 0; }
.hb.uc .uc-gab-copier.is-done .uc-gab-b { opacity: 1; }
/* Carte étroite (étapes, 390) : le lien se lit en entier — sans cadenas, marges resserrées. */
@container hb (max-width: 400px) {
  .hb.uc .uc-gab-lien { gap: .45em; padding-inline: .7em; }
  .hb.uc .uc-gab-url { padding-inline: .7em; }
  .hb.uc .uc-gab-url svg { display: none; }
  .hb.uc .uc-gab-copier { padding-inline: .85em; }
}
@media (prefers-reduced-motion: reduce) {
  .hb.uc .uc-gab-lu .uc-typed, .hb.uc .uc-gab-copier > span { transition: none; }
}

/* « fichier » (Export, bloc 01) : le fichier .md tel qu'il s'ouvre — une feuille blanche, son nom, ses lignes en chasse fixe
   (la chasse du texte collé de la carte Handoff : HBMono, encre #344256). Les titres Markdown (#, ##) en gras, comme les rt-h. */
.hb.uc .uc-gab-file {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff;
}
.hb.uc .uc-gab-file-head {
  flex: none; display: flex; align-items: center; gap: .6em; min-inline-size: 0;
  padding: .75em 1.1em; border-bottom: 1px solid var(--hb-line);
  font: 700 max(15px, .92em)/1.2 HBDM, sans-serif; color: var(--hb-ink);
}
/* Le nom du fichier se lit en entier, extension comprise (390 : il passe à la ligne plutôt que de perdre « .md »). */
.hb.uc .uc-gab-file-head b { min-inline-size: 0; overflow-wrap: anywhere; }
.hb.uc .uc-gab-badge {
  flex: none; display: inline-grid; place-items: center;
  min-inline-size: 2.6em; block-size: 1.7em; padding-inline: .35em; border-radius: .45em;
  background: var(--hb-lavender); box-shadow: inset 0 0 0 1px var(--hb-line);
  font: 700 max(12px, .68em)/1 HBMono, ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .02em; color: var(--hb-blue);
}
.hb.uc .uc-gab-md-lignes {
  flex: 1; min-block-size: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: .5em;
  padding: .95em 1.2em;
  font-family: HBMono, ui-monospace, SFMono-Regular, Consolas, monospace; font-size: max(13px, .78em); line-height: 1.5; color: #344256;
}
/* Les lignes gardent leur hauteur (jamais écrasées par la colonne) ; ce qui dépasse en bas du cadre s'efface : le fichier continue. */
.hb.uc .uc-gab-md-lignes { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.hb.uc .uc-gab-md-l { flex: none; margin: 0; opacity: 0; }
.hb.uc .uc-gab-md-l.is-on { opacity: 1; transition: opacity .2s ease; }
.hb.uc .uc-gab-md-h { font-weight: 700; color: #142238; }
.hb.uc .uc-gab-md-h + .uc-gab-md-p { margin-block-start: -.15em; }
.hb.uc .uc-gab-md-p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* Carte large (blocs, 1440) : le fichier se lit à sa taille, il remplit sa feuille. */
@container hb (min-width: 401px) {
  .hb.uc .uc-gab-md-lignes { font-size: max(14px, .9em); gap: .65em; padding: 1.2em 1.5em; }
  .hb.uc .uc-gab-file-head { padding: .9em 1.4em; }
}

/* « exporter » (Export, bloc 02 et étapes 2–3) : la vue Export de l'extension — Save as, trois formats, la ligne locale, Save. */
.hb.uc .uc-gab-exp-head > svg { flex: none; inline-size: 1.5em; block-size: 1.5em; color: var(--hb-blue); }
.hb.uc .uc-gab-exp { display: flex; flex-direction: column; padding: .55em 0 0; }
.hb.uc .uc-gab-exp-t { margin: 0; padding: 0 1.6em; font: 700 max(13px, .8em)/1.2 HBDM, sans-serif; color: var(--hb-muted); }
.hb.uc .uc-gab-exp .uc-tools { padding-block: .3em .15em; gap: .15em; }
/* Les trois formats, plus serrés que les lignes d'outils : la carte d'étape large (1440) est courte, la ligne locale doit tenir. */
.hb.uc .uc-gab-exp .uc-tool { block-size: 2.05em; }
.hb.uc .uc-gab-format .uc-gab-badge { min-inline-size: 2.9em; }
.hb.uc .uc-gab-format.is-selected .uc-gab-badge { background: #fff; box-shadow: none; }
.hb.uc .uc-gab-exp-local {
  display: flex; align-items: center; gap: .45em;
  margin: .2em 0 0; padding: 0 1.6em;
  font-size: max(13px, .8em); line-height: 1.3; color: var(--hb-ink);
}
.hb.uc .uc-gab-exp-local svg { flex: none; inline-size: .95em; block-size: .95em; color: var(--hb-blue); }
.hb.uc .uc-gab-exp-foot { align-items: center; gap: .7em; }
.hb.uc .uc-gab-fait {
  flex: 1; min-inline-size: 0;
  display: inline-flex; align-items: center; gap: .4em;
  font: 600 max(13px, .8em)/1.25 HBDM, sans-serif; color: var(--hb-ink);
  opacity: 0; transform: translateY(.35em);
}
.hb.uc .uc-gab-fait > span { overflow-wrap: anywhere; }
.hb.uc .uc-gab-fait svg { flex: none; inline-size: 1.25em; block-size: 1.25em; padding: .22em; border-radius: 50%; background: var(--hb-lime); color: var(--hb-ink); }
.hb.uc .uc-gab-fait.is-on { opacity: 1; transform: none; transition: opacity .3s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
/* Carte étroite (étapes, 390) : marges resserrées. */
@container hb (max-width: 400px) {
  .hb.uc .uc-gab-exp-t, .hb.uc .uc-gab-exp-local { padding-inline: 1.3em; }
}
@media (prefers-reduced-motion: reduce) {
  .hb.uc .uc-gab-md-l, .hb.uc .uc-gab-fait { transition: none; }
}

/* Le résultat de /export-v4/ : le fichier .md lui-même (rendre.mjs → extension/export.js), texte brut, ses retours à la ligne gardés.
   La police et l'encre sont celles du corps de résultat du gabarit (.hf-doc-body.result-text). */
.hf-doc-body .uc-gab-md { margin: 0; font: inherit; color: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }

/* « tri » (Memo, bloc 02 ; revue Kevin 10/11 20:0x, LEAD ⑦) : dans le chat, ce que la personne tranche se marque au surligneur lime
   (le trait de « ecart ») ; l'idée de l'IA qu'elle ne reprend pas reste sans trait. */
.hb.uc .uc-gab-tri { padding-block: .9em; }
.hb.uc .uc-gab-tri .uc-msg { font-size: max(14px, .9em); }
.hb.uc .uc-gab-tranche > span {
  background: linear-gradient(transparent 52%, var(--hb-lime) 52%) no-repeat 0 0 / 0% 100%;
  transition: background-size .5s cubic-bezier(.2, .8, .2, 1);
}
.hb.uc .uc-gab-tranche.is-marked > span { background-size: 100% 100%; }

/* « feuille » (Memo, bloc 05 ; LEAD ⑦ ⑧) : la barre d'actions du résultat (Copy, Share), puis la feuille de partage qui monte du bas,
   le lien du Memo en tête et trois applications en pictogrammes génériques. */
/* Le Memo se lit en haut : la feuille montera sur sa moitié basse. */
.hb.uc .uc-gab-memo-haut { justify-content: flex-start; padding-block-start: 1.1em; }
.hb.uc .uc-gab-actions { justify-content: flex-end; align-items: center; gap: .6em; }
.hb.uc .uc-gab-act {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .7em 1.1em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hb-line);
  font: 700 max(15px, .95em)/1 HBDM, sans-serif; color: var(--hb-ink); white-space: nowrap;
}
.hb.uc .uc-gab-share { display: inline-flex; align-items: center; gap: .4em; }
.hb.uc .uc-gab-act svg, .hb.uc .uc-gab-share svg { flex: none; inline-size: 1em; block-size: 1em; }
.hb.uc .uc-gab-sheet {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  display: grid; gap: .75em;
  padding: .9em 1em 1em;
  border-radius: 1.1em 1.1em 0 0; background: #fff;
  box-shadow: 0 -1px 0 var(--hb-line), 0 -1.2em 2.4em -1em rgba(38, 49, 83, .45);
  opacity: 0; transform: translateY(100%);
}
.hb.uc .uc-gab-sheet.is-on { opacity: 1; transform: none; transition: opacity .25s ease, transform .55s cubic-bezier(.2, .9, .25, 1); }
.hb.uc .uc-gab-sheet-head { display: flex; align-items: center; gap: .65em; min-inline-size: 0; padding-block-end: .7em; border-bottom: 1px solid var(--hb-line); }
.hb.uc .uc-gab-sheet-head .uc-paste-icon { flex: none; inline-size: 2.1em; block-size: 2.1em; }
.hb.uc .uc-gab-sheet-head .hb-head-name { min-inline-size: 0; }
.hb.uc .uc-gab-sheet-head .hb-head-name > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb.uc .uc-gab-apps { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-around; gap: .5em; }
.hb.uc .uc-gab-app {
  display: grid; justify-items: center; gap: .35em;
  font: 600 max(13px, .8em)/1.2 HBDM, sans-serif; color: var(--hb-ink);
  opacity: 0; transform: translateY(.5em);
}
.hb.uc .uc-gab-app.is-on { opacity: 1; transform: none; transition: opacity .3s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.hb.uc .uc-gab-app-i {
  display: grid; place-items: center;
  inline-size: 2.9em; block-size: 2.9em; border-radius: .95em;
  background: var(--hb-lavender); box-shadow: inset 0 0 0 1px var(--hb-line); color: var(--hb-blue);
  transition: transform .18s ease, background-color .25s ease, color .25s ease;
}
.hb.uc .uc-gab-app-i svg { inline-size: 1.35em; block-size: 1.35em; }
.hb.uc .uc-gab-app.is-pressed .uc-gab-app-i { transform: scale(.92); }
.hb.uc .uc-gab-app.is-chosen .uc-gab-app-i { background: var(--hb-blue); color: #fff; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .hb.uc .uc-gab-tranche > span, .hb.uc .uc-gab-sheet, .hb.uc .uc-gab-app, .hb.uc .uc-gab-app-i { transition: none; }
}