/* ============================================================
   HRmaps Design System — « À TRAITER » (INBOX)
   ------------------------------------------------------------
   Everything the pending-actions window draws (capacity tabs,
   module chips, queue search, the queue | detail split, every
   module's detail panel, the action bar), and the three
   breakpoints that reshape it. The home card that opens it is
   `action-card`, in ds-components.css.

   Scoped `.v2` throughout. Loaded LAST in _Layout.cshtml,
   after sitecss.css, so these rules win at equal specificity
   without `!important`; where `!important` does appear it is
   beating a legacy `!important`, and the reason is at the rule.

   Tokens only — no literal colour, radius or shadow — so a
   client re-theme and the dark theme both come for free.
   ============================================================ */

/*------------------
« À traiter » processing window
--------------------------*/
/* The window the card's call to action opens. 88vh tall, a 268px queue beside the detail, and up to
   1250px wide — the prototype's 920px measured too tight once the detail pane carried real content,
   so the ceiling now matches the `xlg` size the service asks uib for (`.modal-xlg`, styles.css).
   6vh of margin against 88vh of height is what centres it — no flex trick on `.modal`, whose
   `display` uib sets inline where a class could not reach it. */
.v2 .hm-inbox-window {
  /* `.modal` is the scroll container and carries no inline padding, so the window's breathing room on
     a narrow viewport belongs here rather than on the dialog, whose margins do the centring. */
  padding: 0 var(--space-4);
}
/* `!important` sur la largeur, à contrecœur mais pour une raison précise : `.modal-xlg` de
   `Content/css/styles.css` pose `width: 1250px !important`, et les media queries legacy de
   `responsiveStyle.css` la font redescendre par paliers (1250 au-dessus de 1110px de fenêtre, puis
   890, puis 100%). Cette fenêtre-ci n'en veut pas — le palier à 890px la rendrait plus ÉTROITE
   qu'avant ce changement entre 931 et 1110px. Elle reste donc fluide, bornée à 1250, avec les
   gouttières que `.hm-inbox-window` pose sur `.modal` : une seule règle gouverne sa largeur, à
   toutes les tailles d'écran. */
.v2 .hm-inbox-window .modal-dialog {
  width: 100% !important;
  max-width: 1250px;
  margin: 6vh auto;
}
/* The frame itself. Everything the design draws — surface, radius, shadow — is here, so the
   template can be pure content. */
.v2 .hm-inbox-window .modal-content {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  overflow: hidden;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-modal);
  box-shadow: var(--modal-shadow);
}
/* uib drops `<hm-inbox>`, not the `.hm-inbox` div, into `.modal-content`. Removing the element's
   box makes `.hm-inbox` the flex child its own rules are written for; without it nothing scrolls. */
.v2 .hm-inbox-window hm-inbox {
  display: contents;
}
.v2 .hm-inbox {
  display: flex;
  flex-direction: column;
  /* Without this the queue's own scrollbar never appears: a flex child defaults to min-height:auto,
     which refuses to shrink below its content and pushes the whole window past 88vh instead. */
  min-height: 0;
  flex: 1 1 auto;
}
/* ng-include, ng-transclude and element directives insert wrapper nodes with no design of their own
   between the flex containers below and the boxes they lay out. Removing those boxes is what makes
   the queue scroll and the action bar hold the bottom; otherwise every `flex:` below hits a wrapper. */
.v2 .hm-inbox .hm-inbox-passthrough,
.v2 .hm-inbox hm-action-row,
.v2 .hm-inbox hm-action-row-details,
.v2 .hm-inbox hm-action-row-buttons,
.v2 .hm-inbox .hm-inbox-actions > ng-transclude {
  display: contents;
}
.v2 .hm-inbox .hm-inbox-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
  padding: 18px var(--pad-card);
  border-bottom: 1px solid var(--border);
}
.v2 .hm-inbox .hm-inbox-head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary-700);
  font-size: var(--text-lg);
}
.v2 .hm-inbox .hm-inbox-head-body {
  flex: 1 1 auto;
  min-width: 0;
}
.v2 .hm-inbox .hm-inbox-head-title {
  font: var(--font-h2);
  color: var(--text-primary);
}
.v2 .hm-inbox .hm-inbox-head-count {
  font: var(--font-meta);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.v2 .hm-inbox .hm-inbox-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
}
/* Zone de toucher de 44px autour du bouton de 36px, sans rien changer au dessin. */
.v2 .hm-inbox .hm-inbox-close {
  position: relative;
}
.v2 .hm-inbox .hm-inbox-close::after {
  content: "";
  position: absolute;
  inset: -4px;
}
.v2 .hm-inbox .hm-inbox-close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.v2 .hm-inbox .hm-inbox-close:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
/* --- capacity tabs: Collaborateur | Manager | Valideur --- */
.v2 .hm-inbox .hm-inbox-tabs {
  display: flex;
  gap: 0;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
}
.v2 .hm-inbox .hm-inbox-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font: var(--font-label);
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 150ms, border-color 150ms;
}
.v2 .hm-inbox .hm-inbox-tab:hover {
  color: var(--text-primary);
}
.v2 .hm-inbox .hm-inbox-tab:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.v2 .hm-inbox .hm-inbox-tab--active {
  color: var(--primary-700);
  border-bottom-color: var(--primary-700);
  font-weight: 500;
}
.v2 .hm-inbox .hm-inbox-tab-count {
  font: var(--font-meta);
  color: inherit;
  opacity: 0.7;
}
/* --- module chips: Tous | Absences | Entretiens | ... --- */
.v2 .hm-inbox .hm-inbox-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 0 0 auto;
  padding: var(--space-3) var(--pad-card);
  border-bottom: 1px solid var(--border);
}
/* --- search --- */
/* --- search --- */
/* A row of its own between the chips and the split, carrying the same inline padding so the field
   lines up with the chips above it and the queue below. */
.v2 .hm-inbox .hm-inbox-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: var(--space-3) var(--pad-card);
  border-bottom: 1px solid var(--border);
}
/* Absolutely placed rather than a flex sibling: the input has to fill the row, and the icon sits
   inside its padding so a long query scrolls under the glass instead of pushing it away. */
.v2 .hm-inbox .hm-inbox-search-icon {
  position: absolute;
  left: calc(var(--pad-card) + 12px);
  color: var(--text-muted);
  font-size: var(--text-sm);
  pointer-events: none;
}
.v2 .hm-inbox .hm-inbox-search-input {
  width: 100%;
  /* Symmetric insets hold the glass and the clear button. The `!important` is not optional and
     loading last is no substitute: sitecss.css sets `padding: 7px 15px !important` on an
     enumerated list of input types including `text`, and only `!important` beats `!important`. */
  padding: 9px 34px !important;
  font: var(--font-body-sm);
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.v2 .hm-inbox .hm-inbox-search-input::placeholder {
  color: var(--text-muted);
}
.v2 .hm-inbox .hm-inbox-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.v2 .hm-inbox .hm-inbox-search-clear {
  position: absolute;
  right: calc(var(--pad-card) + 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
/* Zone de toucher de 40px autour du rond de 20px ; elle déborde sur le retrait droit du champ, vide. */
.v2 .hm-inbox .hm-inbox-search-clear::after {
  content: "";
  position: absolute;
  inset: -10px;
}
.v2 .hm-inbox .hm-inbox-search-clear:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.v2 .hm-inbox .hm-inbox-search-clear:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
/* Les filtres par module sont les pastilles du design system : `.chip` et son état `.on`
   (ds-components.css). La recette locale qui vivait ici était la même intention avec d'autres
   jetons — `--surface-raised` contre `--surface`, `--border` contre `--field-border` — et un état
   actif nettement plus fort : fond primaire plein et texte blanc, là où le DS teinte (fond
   `--primary-soft`, bordure et texte primaires). C'est cette divergence-là qui se voit d'un écran à
   l'autre, et c'est le DS qui tranche.

   Le compteur, lui, reste local : ce n'est pas un `.badge` — il n'a ni fond ni bordure, c'est le
   second membre du libellé de la pastille. Le DS n'a pas de fente pour ça, et trois lignes de détail
   sur un composant qu'on réutilise, ce n'est pas une seconde recette. */
.v2 .hm-inbox .hm-inbox-chip-count {
  font: var(--font-meta);
  color: inherit;
  opacity: 0.8;
}
/* --- selection ---
   Two rows above the split: « Tout sélectionner » sits on the window's own ground and is always
   there for a module with a mass action; the batch bar below it appears only once something is
   ticked, so the tint is what says the queue has entered selection. */
.v2 .hm-inbox .hm-inbox-selectall {
  flex: 0 0 auto;
  padding: var(--space-3) var(--pad-card);
  border-bottom: 1px solid var(--border);
}
.v2 .hm-inbox .hm-inbox-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  cursor: pointer;
}
/* Zone de toucher agrandie sans rien déplacer : 12px au-dessus et au-dessous (le retrait vertical des
   bandes et des lignes), 8px de côté. Sur une ligne de la file, ça fait 40 × 40 autour de la case de
   16px : à gauche jusqu'au bord de la file, à droite jusqu'à la ligne voisine (écart de 8px), sans
   empiéter sur elle. Masquée avec la case (`--hidden`, visibility héritée). */
.v2 .hm-inbox .hm-inbox-check::after {
  content: "";
  position: absolute;
  inset: -12px -8px;
}
/* The enumerated `input[type=…]` list in sitecss.css does not include `checkbox`, so no
   `!important` is needed to size these. */
.v2 .hm-inbox .hm-inbox-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.v2 .hm-inbox .hm-inbox-check-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
/* Beside the row, not inside it: a checkbox nested in the row's own <button> is invalid markup and
   every tick would also swing the detail panel across. */
.v2 .hm-inbox .hm-inbox-row-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.v2 .hm-inbox .hm-inbox-check--row {
  flex: 0 0 auto;
  padding-left: var(--space-2);
}
/* Hidden rather than removed, so the checkbox column keeps its width. */
.v2 .hm-inbox .hm-inbox-check--hidden {
  visibility: hidden;
}
.v2 .hm-inbox .hm-inbox-bulk {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
  flex-wrap: wrap;
  padding: var(--space-3) var(--pad-card);
  background: var(--danger-soft);
  border-bottom: 1px solid var(--border);
}
.v2 .hm-inbox .hm-inbox-bulk-count {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--danger-fg);
}
/* Dropping the selection undoes nothing that has happened, so it stays a text button and never
   competes with the decision on the far side of the bar. */
.v2 .hm-inbox .hm-inbox-bulk-clear {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--danger-fg);
  font-size: var(--text-sm);
  text-decoration: underline;
}
/* The cross is not part of the label, so it keeps clear of the underline. */
.v2 .hm-inbox .hm-inbox-bulk-clear::before {
  content: "\00d7";
  font-size: var(--text-base);
  text-decoration: none;
}
.v2 .hm-inbox .hm-inbox-bulk-clear:hover {
  color: var(--danger);
}
.v2 .hm-inbox .hm-inbox-bulk-clear:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.v2 .hm-inbox .hm-inbox-bulk-spacer {
  flex: 1 1 auto;
}
/* --- queue | detail --- */
.v2 .hm-inbox .hm-inbox-body {
  display: grid;
  grid-template-columns: 268px 1fr;
  flex: 1 1 auto;
  min-height: 0;
}
.v2 .hm-inbox .hm-inbox-queue {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-2);
  background: var(--surface-sunken);
  border-right: 1px solid var(--border);
}
.v2 .hm-inbox .hm-inbox-row,
.v2 .hm-inbox .hm-inbox-row-skeleton {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
}
.v2 .hm-inbox .hm-inbox-row:hover {
  background: var(--surface-hover);
}
.v2 .hm-inbox .hm-inbox-row:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.v2 .hm-inbox .hm-inbox-row--selected,
.v2 .hm-inbox .hm-inbox-row--selected:hover {
  background: var(--primary-soft);
}
.v2 .hm-inbox .hm-inbox-row-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.v2 .hm-inbox .hm-inbox-row-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.v2 .hm-inbox .hm-inbox-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--primary-700);
  background: var(--primary-soft);
  border-radius: var(--radius-pill);
}
.v2 .hm-inbox .hm-inbox-badge--new {
  color: var(--gray-0);
  background: var(--danger);
}
/* Both lines are one-line-and-truncate: a long name must not make one row twice the height of the
   next, which is what turns the queue into a list of unequal blocks. */
.v2 .hm-inbox .hm-inbox-row-who,
.v2 .hm-inbox .hm-inbox-row-sub,
.v2 .hm-inbox .hm-inbox-doc-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2 .hm-inbox .hm-inbox-row-who {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.v2 .hm-inbox .hm-inbox-row-sub {
  font: var(--font-meta);
  color: var(--text-muted);
}
/* hm-avatar takes its size from its own scale ('sm' is 55px, 'md' 75px), wider than this window
   wants. Pinned here through the avatar's size variable (`--av-size`, ds-components.css « AVATAR »)
   rather than in the templates, so the window keeps its own sizes. */
.v2 .hm-inbox .hm-inbox-avatar-wrap {
  flex: 0 0 auto;
}
.v2 .hm-inbox .hm-inbox-row .hm-inbox-avatar-wrap .av { --av-size: 40px; }
.v2 .hm-inbox .hm-inbox-detail-head .hm-inbox-avatar-wrap .av { --av-size: 54px; }
/* Initials badge, drawn where the row has no photo to show. */
.v2 .hm-inbox .hm-inbox-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.v2 .hm-inbox .hm-inbox-avatar--lg {
  width: 54px;
  height: 54px;
  font-size: var(--text-base);
}
.v2 .hm-inbox .hm-inbox-avatar--color-0 {
  background: var(--info-soft);
  color: var(--info-fg);
}
.v2 .hm-inbox .hm-inbox-avatar--color-1 {
  background: var(--success-soft);
  color: var(--success-fg);
}
.v2 .hm-inbox .hm-inbox-avatar--color-2 {
  background: var(--warning-soft);
  color: var(--warning-fg);
}
.v2 .hm-inbox .hm-inbox-avatar--color-3 {
  background: var(--accent-violet-soft);
  color: var(--accent-violet);
}
.v2 .hm-inbox .hm-inbox-avatar--color-4 {
  background: var(--primary-soft);
  color: var(--primary-700);
}
/* --- detail ---
   `min-width: 0` for the same reason as `min-height: 0` above: a grid item refuses to shrink below
   its content, so a wide field value would push the detail past the `1fr` track and widen the
   window instead of being clipped or wrapped.
   Deliberately no `overflow-x`: clipping this box would also clip the circuit's hover cards, which
   are meant to leave it, and `.modal-content` already closes the window. */
.v2 .hm-inbox .hm-inbox-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
/* « Retour » vers la file : n'existe que sur téléphone, où file et détail sont deux écrans (voir le
   palier 599px). Ailleurs les deux panneaux sont côte à côte et il n'a rien à faire. */
.v2 .hm-inbox .hm-inbox-back {
  display: none;
}
.v2 .hm-inbox .hm-inbox-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-6);
}
/* The head sits above `.hm-inbox-scroll` rather than inside it, so it carries the scroll box's own
   inline padding — otherwise the identity starts at the pane edge while the fields below it are
   indented, and the two read as belonging to different panels. */
.v2 .hm-inbox .hm-inbox-detail-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
  padding: var(--space-6) var(--space-6) 0;
}
/* The head already spends `--space-6` below itself through the scroll box's top padding.
   `~` and not `+`: the circuit strip now sits between the two when the item has a workflow, and an
   adjacent-sibling rule would silently stop applying for exactly those panels. */
.v2 .hm-inbox .hm-inbox-detail-head ~ .hm-inbox-passthrough .hm-inbox-scroll {
  padding-top: var(--space-5);
}

/*------------------
Validation circuit strip
--------------------------*/
/* Where the item stands in its circuit, under the identity and above the fields. Only the step being
   decided is spelled out; the others are beads carrying their rank, and everything else about them
   is one hover away. Green for what is done, amber for what is being asked, grey for what is still
   to come — the same three readings as the status legends elsewhere in the app. */
.v2 .hm-inbox .hm-inbox-steps {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-4) var(--space-6) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  /* The hover cards are children of this box and rise out of it — over the queue on the left, which
     they are free to cover, so the strip owns a stacking context rather than relying on source order. */
  overflow: visible;
  position: relative;
  z-index: 1;
}
.v2 .hm-inbox .hm-inbox-steps-track {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
/* The sentence claims the rest of the line and sits at the far end, as in the reference. Wraps
   under the beads rather than squeezing them once the panel is too narrow to hold both. */
.v2 .hm-inbox .hm-inbox-steps-summary {
  margin-left: auto;
  font: var(--font-meta);
  color: var(--text-muted);
}

.v2 .hm-inbox .hm-inbox-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  outline: none;
}
.v2 .hm-inbox .hm-inbox-step-bead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  font: var(--font-meta);
  font-weight: 600;
  line-height: 1;
}
.v2 .hm-inbox .hm-inbox-step-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font: var(--font-meta);
  font-weight: 600;
  white-space: nowrap;
}

.v2 .hm-inbox .hm-inbox-step--done .hm-inbox-step-bead {
  background: var(--success);
  color: var(--gray-0);
}
.v2 .hm-inbox .hm-inbox-step--current .hm-inbox-step-pill {
  background: var(--warning-soft);
  color: var(--warning-fg);
  border: 1px solid var(--warning);
}
.v2 .hm-inbox .hm-inbox-step--todo .hm-inbox-step-bead {
  background: var(--gray-0);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Hover card.
   - It opens DOWNWARD. The strip is pinned near the top of the panel, so upward there is only the
     few pixels of the header and the card loses its first lines; downward the whole panel is free.
   - It is pinned to the bead's LEFT edge, so it grows into the panel. Only beads far enough along
     the track flip to their RIGHT edge, where a 240px card would otherwise reach the window's edge. */
.v2 .hm-inbox .hm-inbox-step-bubble {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 3;
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  width: max-content;
  max-width: 240px;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--popover-shadow);
  text-align: left;
}
.v2 .hm-inbox .hm-inbox-step:nth-child(n+6):nth-last-child(-n+2) .hm-inbox-step-bubble {
  left: auto;
  right: 0;
}
.v2 .hm-inbox .hm-inbox-step:hover .hm-inbox-step-bubble,
.v2 .hm-inbox .hm-inbox-step:focus .hm-inbox-step-bubble,
.v2 .hm-inbox .hm-inbox-step:focus-within .hm-inbox-step-bubble {
  display: flex;
}
.v2 .hm-inbox .hm-inbox-step-bubble-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.v2 .hm-inbox .hm-inbox-step-bubble-rank {
  font: var(--font-label);
  font-weight: 700;
}
/* The state reads as a badge, in its step's own colour, so the card says at a glance what the bead
   already said in the strip. */
.v2 .hm-inbox .hm-inbox-step-bubble-state {
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font: var(--font-meta);
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.v2 .hm-inbox .hm-inbox-step--done .hm-inbox-step-bubble-state {
  background: var(--success-soft);
  color: var(--success-fg);
}
.v2 .hm-inbox .hm-inbox-step--current .hm-inbox-step-bubble-state {
  background: var(--warning-soft);
  color: var(--warning-fg);
}
.v2 .hm-inbox .hm-inbox-step-bubble-title {
  font: var(--font-body-sm);
  font-weight: 600;
}
.v2 .hm-inbox .hm-inbox-step-bubble-detail {
  font: var(--font-meta);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}
/* Le squelette du détail porte désormais la structure réelle du panneau — en-tête, zone défilante,
   barre d'actions — et chacune de ces trois parties a déjà ses propres marges. Cette boîte ne doit
   donc plus rien ajouter autour : `display: contents` la retire de la mise en page, si bien que ses
   enfants sont disposés par `.hm-inbox-detail` exactement comme l'est le contenu chargé. Sans ça,
   le squelette serait décalé de 24px par rapport à ce qu'il annonce. */
.v2 .hm-inbox .hm-inbox-detail-loading {
  display: contents;
}
.v2 .hm-inbox .hm-inbox-no-details {
  padding: var(--space-8) 0;
  text-align: center;
  font: var(--font-body-sm);
  color: var(--text-muted);
}
.v2 .hm-inbox .hm-inbox-detail-identity {
  flex: 1 1 auto;
  min-width: 0;
}
.v2 .hm-inbox .hm-inbox-detail-who {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.v2 .hm-inbox .hm-inbox-detail-tag {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-1);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
/* The 1px gap is painted by the container's own background, so the separators between fields are
   hairlines rather than borders that would double up where two cells meet. That also means every
   cell MUST repaint the surface: any square the cells do not cover reads as a grey block, not as a
   hairline.
   
   Wrapping two-per-row is deliberate rather than a two-column grid: a field with no value drops out
   of the DOM (`ng-if` in hm-action-field.html), and grid would leave the hole it vacated showing the
   container's grey. Flex has no holes — the cells simply reflow, and a lone last one grows to the
   full row, which is the same result the design draws for an odd count. */
.v2 .hm-inbox .hm-inbox-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* `hm-action-field` is an element directive, so the cell the design describes is the div inside it,
   not the custom element: without `display: contents` the element is the flex item and the div it
   wraps carries the surface, which paints the background one box too deep and leaves the gap grid grey. */
.v2 .hm-inbox hm-action-field {
  display: contents;
}
.v2 .hm-inbox .hm-inbox-field {
  /* The -1px pays for the gap, so two cells still fit on one row rather than wrapping to one each. */
  flex: 1 1 calc(50% - 1px);
  min-width: calc(50% - 1px);
  background: var(--surface);
  padding: 13px 15px;
}
.v2 .hm-inbox .hm-inbox-label {
  margin-bottom: var(--space-1);
  font: var(--font-meta);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.v2 .hm-inbox .hm-inbox-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.v2 .hm-inbox .hm-inbox-block {
  margin-top: var(--space-5);
}
.v2 .hm-inbox .hm-inbox-note {
  padding: 13px 15px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font: var(--font-body-sm);
  line-height: var(--leading-relaxed);
  white-space: pre-line;
}
.v2 .hm-inbox .hm-inbox-doc {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}
.v2 .hm-inbox .hm-inbox-doc + .hm-inbox-doc {
  margin-top: var(--space-2);
}
.v2 .hm-inbox .hm-inbox-doc-name {
  flex: 1 1 auto;
  min-width: 0;
  font: var(--font-body-sm);
  color: var(--text-primary);
}
/* Opening the attachment is a detour, not a decision, so it stays quieter than anything in the
   action bar: a filled chip on the sunken surface rather than an outlined button.
   Rendered as an <a> where the download link has to be built by encrypted-href, hence the
   text-decoration reset — Bootstrap underlines anchors on hover and the chip is not a link. */
.v2 .hm-inbox .hm-inbox-doc-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  padding: 6px 11px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border: 0;
  border-radius: var(--radius-button);
  text-decoration: none;
}
.v2 .hm-inbox .hm-inbox-doc-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  text-decoration: none;
}
.v2 .hm-inbox .hm-inbox-doc-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
/* --- requested changes (self-service edit request) ---
   One outlined panel holding every edited field, rather than a card per field: the panel is read
   as a single list of « what would change », and per-field boxes would compete with the field grid
   above it for the eye. */
.v2 .hm-inbox .hm-inbox-changes {
  padding: var(--space-4) var(--space-4) 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.v2 .hm-inbox .hm-inbox-change {
  padding-bottom: var(--space-4);
}
.v2 .hm-inbox .hm-inbox-change + .hm-inbox-change {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.v2 .hm-inbox .hm-inbox-change-field {
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
/* Wraps rather than truncates: an IBAN or an address is long, and a value cut in half is worse
   than a value on two lines when the point of the row is comparing the two. */
.v2 .hm-inbox .hm-inbox-change-values {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
/* The old value stays legible instead of being greyed to the point of disappearing: it is half of
   the comparison. The strike-through is what says « replaced ». */
.v2 .hm-inbox .hm-inbox-change-old {
  color: var(--text-muted);
  text-decoration: line-through;
}
.v2 .hm-inbox .hm-inbox-change-arrow {
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.v2 .hm-inbox .hm-inbox-change-new {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
/* --- absence counters (vacation) ---
   One tile per period's balance; a grid so extra tiles wrap at the same width. */
.v2 .hm-inbox .hm-inbox-quotas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
}
.v2 .hm-inbox .hm-inbox-quota {
  padding: var(--space-4);
  text-align: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
/* The current period is the one the request will be taken from, so it is the one that has to be
   read first: it keeps the surface and a full border, the closed period stays quiet. */
.v2 .hm-inbox .hm-inbox-quota--current {
  background: var(--surface);
  border-color: var(--border);
}
.v2 .hm-inbox .hm-inbox-quota-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  line-height: var(--leading-tight);
}
.v2 .hm-inbox .hm-inbox-quota--current .hm-inbox-quota-value {
  color: var(--success);
}
/* The unit rides with the figure but must not compete with it. */
.v2 .hm-inbox .hm-inbox-quota-unit {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.v2 .hm-inbox .hm-inbox-quota-label {
  margin-top: var(--space-1);
  font: var(--font-meta);
  color: var(--text-muted);
}
/* --- imputation (vacation) ---
   One chip per period the request draws on, side by side under the tiles they debit. */
.v2 .hm-inbox .hm-inbox-imputations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.v2 .hm-inbox .hm-inbox-imputation {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--danger-soft);
  color: var(--danger-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
/* FontAwesome runs in SVG mode here, so the <i> is replaced by an <svg> and a bare `i` never matches. */
.v2 .hm-inbox .hm-inbox-imputation i,
.v2 .hm-inbox .hm-inbox-imputation svg {
  font-size: var(--text-sm);
}
/* --- team overlap (vacation) ---
   The only block on this panel with an action of its own, so its label shares a line with the
   button instead of standing alone above the content. */
.v2 .hm-inbox .hm-inbox-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
/* Sentence case where the panel's other blocks use an uppercase micro-label: this one heads a
   list of people rather than captioning a single value. */
.v2 .hm-inbox .hm-inbox-block-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
/* The icon carries the block's own colour, so the header reads as a flag before a single
   row underneath it has been read. */
.v2 .hm-inbox .hm-inbox-block-title i {
  color: var(--warning);
}
/* Reading the planning is a detour, not a decision, so the button stays a soft chip rather than
   anything that could be mistaken for the action bar below. */
.v2 .hm-inbox .hm-inbox-block-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  padding: 6px 11px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--danger-fg);
  background: var(--danger-soft);
  border: 0;
  border-radius: var(--radius-button);
  white-space: nowrap;
}
.v2 .hm-inbox .hm-inbox-block-btn:hover {
  background: color-mix(in srgb, var(--danger) 16%, var(--surface));
  color: var(--danger);
}
.v2 .hm-inbox .hm-inbox-block-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.v2 .hm-inbox .hm-inbox-overlaps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Amber rather than the panel's usual sunken grey: everything else here is a fact to read, this
   is the one thing on the panel that argues against saying yes. */
.v2 .hm-inbox .hm-inbox-overlap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--warning-soft);
}
/* Same pinning as the queue rows, for the same reason: a colleague with a photo must not make
   their line taller than a colleague without one. */
.v2 .hm-inbox .hm-inbox-overlap .hm-inbox-avatar-wrap .av { --av-size: 32px; }
.v2 .hm-inbox .hm-inbox-overlap-who {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The dates are the reason the row is here, so they hold the far edge and carry the block's own
   colour rather than the muted grey the rest of the panel's secondary text uses. */
.v2 .hm-inbox .hm-inbox-overlap-type {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}
.v2 .hm-inbox .hm-inbox-overlap-when {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--warning-fg);
}/* --- action bar --- */
.v2 .hm-inbox .hm-inbox-actions {
  display: flex;
  align-items: center;
  /* The spacer below already holds the two groups apart on the first row, so this only decides
     where the OVERFLOW row lands once too many actions are available to fit: with the decisions
     reading right-to-left, a wrapped row has to keep that edge or the bar loses its alignment. */
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--pad-card);
  border-top: 1px solid var(--border);
}
/* hmActionRowButtons orders the buttons: consult 10, decisions 20, the expected next step 30. The
   spacer takes the space between the two groups so the bar reads as "look at it" on the left and
   "decide on it" on the right, which is the only thing separating them — they are otherwise siblings
   in one flex row. */
.v2 .hm-inbox .hm-inbox-actions-spacer {
  flex: 1 1 auto;
  order: 15;
}
/* The wrapper is what hmActionButton sets `order` and `display:none` on, so it has to be the flex
   item; `display: contents` here would hand the ordering to a box the directive never touches. */
.v2 .hm-inbox hm-action-button {
  display: inline-flex;
}
/* Les boutons de cette fenêtre sont ceux du design system : `.btn` + `.btn-primary` /
   `.btn-secondary` / `.btn-icon` de ds-components.css, atteignables depuis que la racine
   `.hm-inbox` déclare la portée `.ds`. La recette locale qui vivait ici les recopiait à un pixel
   près — `padding: 10px 16px` contre `9px 15px` — et surtout sans leur `min-height: var(--control-h)`,
   la seule chose qui garantit une hauteur de bouton unique dans tout le produit. Deux recettes pour
   une intention avaient déjà divergé ; elles ne peuvent plus.

   Un seul modificateur survit, et c'est un modificateur, pas une recette : le refus est un bouton
   NEUTRE dont le libellé porte le sens — « refuser » se lit, il n'a pas besoin de crier en rouge
   plein à côté de la décision qui, elle, fait avancer. Le DS n'a pas cette nuance : `.btn-danger` est
   plein, `.btn-danger-soft` est teinté. Une ligne de couleur sur un `.btn-secondary` la donne. */
.v2 .hm-inbox .hm-inbox-action--reject {
  color: var(--danger-fg) !important;
}
/* --- nothing left to do --- */
.v2 .hm-inbox .hm-inbox-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: 54px var(--space-8);
}
.v2 .hm-inbox .hm-inbox-done-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--success-soft);
  color: var(--success-fg);
  font-size: var(--text-2xl);
}
.v2 .hm-inbox .hm-inbox-done-title {
  font: var(--font-h2);
  color: var(--text-primary);
}
.v2 .hm-inbox .hm-inbox-done-text {
  max-width: 320px;
  font: var(--font-body-sm);
  color: var(--text-muted);
}
.v2 .hm-inbox .hm-inbox-done .btn {
  margin-top: var(--space-2);
}
/* --- footer: the same « Fermer » as the favourites menu (.topbar-favs-foot) --- */
.v2 .hm-inbox .hm-inbox-foot {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  padding: 10px var(--pad-card);
  border-top: 1px solid var(--border);
}
/*------------------
« À traiter » — smaller screens
--------------------------*/
/* The window keeps its shape all the way down: a scrolling queue on the left, a scrolling detail on
   the right, and one inline row of decisions under it. Only the space it spends changes — the
   paddings tighten, the queue track narrows, and the two rows of filters trade wrapping for a
   horizontal swipe, because a filter row that wraps to three lines eats the queue's height, which is
   the one thing the window cannot spare. */
@media (max-width: 991px) {
  .v2 .hm-inbox-window {
    padding: 0 var(--space-2);
  }
  .v2 .hm-inbox-window .modal-dialog {
    margin: 3vh auto;
  }
  .v2 .hm-inbox-window .modal-content {
    max-height: 94vh;
  }
  .v2 .hm-inbox .hm-inbox-head {
    gap: var(--space-2);
    padding: 13px var(--space-4);
  }
  .v2 .hm-inbox .hm-inbox-tabs,
  .v2 .hm-inbox .hm-inbox-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* The row is swiped, not read as a scroll area: a visible bar under three tabs reads as
       broken chrome, and the overflowing chip is itself the affordance. */
    scrollbar-width: none;
  }
  .v2 .hm-inbox .hm-inbox-tabs::-webkit-scrollbar,
  .v2 .hm-inbox .hm-inbox-chips::-webkit-scrollbar {
    display: none;
  }
  /* Without this the flex items shrink to fit the row instead of overflowing it, and the labels
     truncate rather than scroll — which is the opposite of what the overflow above is for. */
  .v2 .hm-inbox .hm-inbox-tab,
  .v2 .hm-inbox .hm-inbox-chips .chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .v2 .hm-inbox .hm-inbox-tab {
    padding: var(--space-3) var(--space-4);
  }
  .v2 .hm-inbox .hm-inbox-chips {
    padding: var(--space-2) var(--space-4);
  }
  .v2 .hm-inbox .hm-inbox-body {
    grid-template-columns: 216px 1fr;
  }
  .v2 .hm-inbox .hm-inbox-detail-head {
    padding: var(--space-4) var(--space-4) 0;
  }
  /* `.hm-inbox-detail-loading` n'est plus listée ici : elle est en `display: contents`, c'est sa
     zone défilante interne qui reçoit ce padding comme n'importe quelle autre. */
  .v2 .hm-inbox .hm-inbox-scroll {
    padding: var(--space-4);
  }
  /* `~`, for the reason given on the full-width rule: the circuit strip sits between the two. */
  .v2 .hm-inbox .hm-inbox-detail-head ~ .hm-inbox-passthrough .hm-inbox-scroll {
    padding-top: var(--space-3);
  }
  /* The strip follows the head's narrower gutter. */
  .v2 .hm-inbox .hm-inbox-steps {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }
  /* The decisions stay on one line. Wrapping them costs a row of the detail's height on the
     screens least able to pay for it, so the bar scrolls sideways in the rare case that more
     actions are available than fit — the primary action keeps the right edge either way. */
  .v2 .hm-inbox .hm-inbox-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: var(--space-3) var(--space-4);
    scrollbar-width: none;
  }
  .v2 .hm-inbox .hm-inbox-actions::-webkit-scrollbar {
    display: none;
  }
  .v2 .hm-inbox .hm-inbox-foot {
    padding: var(--space-2) var(--space-4);
  }
  .v2 .hm-inbox hm-action-button {
    flex: 0 0 auto;
  }
  /* Sur petit écran la barre de décisions défile horizontalement : les boutons se resserrent et ne
     se coupent plus en deux lignes. Un ajustement de densité sur le composant du DS, pas une
     redéfinition — le `!important` ne fait que reprendre la main sur celui de `.ds .btn`. */
  .v2 .hm-inbox .hm-inbox-actions .btn {
    padding: 9px 13px !important;
    white-space: nowrap;
  }
}
/* Below the tablet the window stops being a dialog and takes the screen: 3vh of margin against a
   400px-wide viewport is a border, not breathing room, and the rounded corners of a sheet that
   reaches every edge only clip content. */
@media (max-width: 767px) {
  .v2 .hm-inbox-window {
    padding: 0;
  }
  .v2 .hm-inbox-window .modal-dialog {
    max-width: none;
    margin: 0;
  }
  /* `dvh` après `vh` : sur Safari iOS, 100vh compte la hauteur SANS la barre d'adresse, et le bas de la
     fenêtre (décisions, « Fermer ») passait sous le bord. Un navigateur qui ignore `dvh` garde `vh`. */
  .v2 .hm-inbox-window .modal-content {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }
  /* Le pied est la dernière bande de la fenêtre plein écran : il s'écarte de la barre d'accueil de l'iPhone. */
  .v2 .hm-inbox .hm-inbox-foot {
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  }
  .v2 .hm-inbox .hm-inbox-body {
    grid-template-columns: 184px 1fr;
  }
}
/* Téléphone (moins de 600px, le seuil du portail) : la file et le détail deviennent deux écrans.
   La file d'abord, en pleine hauteur ; toucher une ligne ouvre son détail en plein écran
   (`is-detail-open`, posé par HmInboxLaneCtrl), « Retour » ramène à la file. Onglets, pastilles,
   recherche et sélection appartiennent à la file : ils se masquent avec elle. */
@media (max-width: 599px) {
  .v2 .hm-inbox .hm-inbox-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }
  .v2 .hm-inbox .hm-inbox-queue {
    border-right: 0;
  }
  .v2 .hm-inbox:not(.is-detail-open) .hm-inbox-detail,
  .v2 .hm-inbox.is-detail-open .hm-inbox-queue,
  .v2 .hm-inbox.is-detail-open .hm-inbox-tabs,
  .v2 .hm-inbox.is-detail-open .hm-inbox-chips,
  .v2 .hm-inbox.is-detail-open .hm-inbox-search,
  .v2 .hm-inbox.is-detail-open .hm-inbox-selectall,
  .v2 .hm-inbox.is-detail-open .hm-inbox-bulk {
    display: none;
  }
  .v2 .hm-inbox .hm-inbox-back {
    display: flex;
    flex: 0 0 auto;
    padding: var(--space-2) var(--space-2) 0;
  }
  /* Le bouton est un `ds-btn-sm` (32px) : sa zone de toucher est portée à 44px sans changer son dessin. */
  .v2 .hm-inbox .hm-inbox-back > button {
    position: relative;
  }
  .v2 .hm-inbox .hm-inbox-back > button::after {
    content: "";
    position: absolute;
    inset: -6px;
  }
  /* « Fermer » fait doublon avec la croix de l'en-tête, et sa bande coûte de la hauteur au détail. La
     barre du bas de l'iPhone est alors tenue par la dernière bande visible (décisions, ou la file). */
  .v2 .hm-inbox .hm-inbox-foot {
    display: none;
  }
  .v2 .hm-inbox .hm-inbox-actions,
  .v2 .hm-inbox:not(.is-detail-open) .hm-inbox-queue {
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
  /* Le détail a tout l'écran : les décisions passent à la ligne plutôt que de défiler de côté, où un
     bouton sorti du cadre ne se voyait pas. */
  .v2 .hm-inbox .hm-inbox-actions {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  /* Absences de l'équipe : le nom garde la première ligne, le type et les dates passent dessous
     (alignés sur le nom, 32px de photo + 12px d'écart) ; côte à côte, ils réduisaient le nom à rien. */
  .v2 .hm-inbox .hm-inbox-overlap {
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }
  .v2 .hm-inbox .hm-inbox-overlap-who {
    flex: 1 1 calc(100% - 44px);
  }
  .v2 .hm-inbox .hm-inbox-overlap-type,
  .v2 .hm-inbox .hm-inbox-overlap-who + .hm-inbox-overlap-when {
    margin-left: 44px;
  }
  /* Circuit : sur téléphone, les numéros des étapes et le nom de l'étape en cours, rien de plus. La
     phrase « Étape n sur N » est masquée ; les étapes ne réagissent plus au toucher, donc n'ouvrent
     pas leur bulle. Circuit terminé, donc sans étape en cours : la bande entière disparaît. */
  .v2 .hm-inbox .hm-inbox-steps-summary,
  .v2 .hm-inbox .hm-inbox-steps:not(:has(.hm-inbox-step--current)) {
    display: none;
  }
  .v2 .hm-inbox .hm-inbox-step {
    pointer-events: none;
  }
  /* One field per row: at this width a 50% cell holds a label that wraps to three lines. */
  .v2 .hm-inbox .hm-inbox-field {
    flex-basis: 100%;
    min-width: 100%;
  }
  .v2 .hm-inbox .hm-inbox-head-icon {
    display: none;
  }
}