/* ============================================================
   Connect VM — feuille de style
   Outil interne UpSlide. Aucune dépendance externe, aucun script.

   Fondé sur l'UpSlide Design System (rebranding 2026) :
   Cloud White / Crow Black / Warm Red, radii 8-14-22, une seule
   ombre douce, base d'espacement 8pt, Inter pour le corps produit.
   Les couleurs d'état reprennent les sémantiques de la marque
   (vert = succès, bleu = mise à jour, rose = information,
   rouge d'erreur = erreur) ; le mustard secondaire porte le seul
   état qui n'a pas de sémantique dédiée.

   Thème clair par défaut, thème sombre via prefers-color-scheme.
   Les sélecteurs [data-theme="light|dark"] permettent de forcer
   un thème (aperçus de la documentation, futur sélecteur manuel).
   ============================================================ */

/* ---------- 1. Jetons : thème clair ---------- */

:root,
[data-theme="light"] {
  /* Surfaces — uniquement des neutres de la marque :
     Cloud White, blanc, undertones Sandstorm. */
  --cvm-bg:            #FAF5EF;  /* Cloud White */
  --cvm-surface:       #FFFFFF;
  --cvm-surface-alt:   #F8F1E8;  /* Sandstorm 150 */
  --cvm-surface-hover: #F2E7D9;  /* Sandstorm 300 */
  --cvm-surface-sunk:  #E9D8C1;  /* Sandstorm */

  /* Traits — filets Crow Black à faible opacité */
  --cvm-border:        rgba(36, 6, 2, .12);
  --cvm-border-strong: rgba(36, 6, 2, .26);

  /* Texte — Crow Black et ses undertones uniquement */
  --cvm-text:          #240602;  /* Crow Black */
  --cvm-text-muted:    #4A201A;  /* Crow 500 */
  --cvm-text-faint:    #7A554E;  /* Crow 300 */
  --cvm-on-accent:     #240602;  /* encre sur Warm Red */

  /* Accent — Warm Red, seule couleur qui parle fort */
  --cvm-accent:        #FF5F27;  /* Warm Red */
  --cvm-accent-hover:  #F0521B;
  --cvm-accent-press:  #B33B12;  /* Warm Red 700 */
  --cvm-accent-soft:   #FFE4D9;  /* Warm Red 60 */
  --cvm-accent-text:   #B33B12;

  /* Focus clavier — encre, pour ne pas concurrencer l'accent */
  --cvm-focus:         #240602;

  /* États machine : texte / fond / trait / point */
  --cvm-running-fg:    #2F6E4C;
  --cvm-running-bg:    #E6F2EB;
  --cvm-running-br:    #B9DCC8;
  --cvm-running-dot:   #5CB585;  /* Validation Green */

  --cvm-stopped-fg:    #7A554E;
  --cvm-stopped-bg:    #F2E7D9;
  --cvm-stopped-br:    rgba(36, 6, 2, .12);
  --cvm-stopped-dot:   #B9A39D;  /* Crow 150 */

  --cvm-starting-fg:   #3A46B8;
  --cvm-starting-bg:   #EAECFF;
  --cvm-starting-br:   #C3C9FF;
  --cvm-starting-dot:  #7786FF;  /* Finance Blue */

  --cvm-stopping-fg:   #8F5F00;  /* Mustard 700 */
  --cvm-stopping-bg:   #F7EDD6;
  --cvm-stopping-br:   #F0D49B;  /* Mustard 150 */
  --cvm-stopping-dot:  #C88500;  /* Mustard */

  --cvm-unknown-fg:    #8E3E8A;
  --cvm-unknown-bg:    #FDEBFC;
  --cvm-unknown-br:    #F6CDF4;
  --cvm-unknown-dot:   #FFB3FB;  /* Candy Pink */

  /* Erreur */
  --cvm-error-fg:      #C61508;  /* Error Red */
  --cvm-error-bg:      #FBE7E5;
  --cvm-error-br:      #F2C4BF;

  /* Chrome de session : identique dans les deux thèmes.
     La barre surplombe un bureau Windows, elle ne suit donc pas le
     thème de l'application. Crow Black tient sur tous les bureaux. */
  --cvm-chrome-bg:     #240602;  /* Crow Black */
  --cvm-chrome-line:   rgba(250, 245, 239, .16);
  --cvm-chrome-text:   #FAF5EF;  /* Cloud White */
  --cvm-chrome-muted:  rgba(250, 245, 239, .66);
  --cvm-chrome-hover:  #45221C;  /* Macchiatto */

  /* Élévation — une seule ombre douce, centrée (marque) */
  --cvm-shadow-1: 0 0 20px rgba(36, 6, 2, .06);
  --cvm-shadow-2: 0 0 20px rgba(36, 6, 2, .12);
  --cvm-shadow-3: 0 8px 40px rgba(36, 6, 2, .14);

  color-scheme: light;
}

/* ---------- 2. Jetons : thème sombre ---------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cvm-bg:            #240602;
    --cvm-surface:       #2C0C07;
    --cvm-surface-alt:   #351511;
    --cvm-surface-hover: #45221C;
    --cvm-surface-sunk:  #1A0401;

    --cvm-border:        rgba(250, 245, 239, .16);
    --cvm-border-strong: rgba(250, 245, 239, .32);

    --cvm-text:          #FAF5EF;
    --cvm-text-muted:    rgba(250, 245, 239, .74);
    --cvm-text-faint:    rgba(250, 245, 239, .52);
    --cvm-on-accent:     #240602;

    --cvm-accent:        #FF5F27;
    --cvm-accent-hover:  #FF7A45;
    --cvm-accent-press:  #FF936B;  /* Warm Red 300 */
    --cvm-accent-soft:   #3A1008;
    --cvm-accent-text:   #FF936B;

    --cvm-focus:         #FAF5EF;

    --cvm-running-fg:    #8FD2AE;
    --cvm-running-bg:    #1B2F22;
    --cvm-running-br:    #35563F;
    --cvm-running-dot:   #5CB585;

    --cvm-stopped-fg:    #B9A39D;
    --cvm-stopped-bg:    #351511;
    --cvm-stopped-br:    rgba(250, 245, 239, .16);
    --cvm-stopped-dot:   #7A554E;

    --cvm-starting-fg:   #AFB7FF;
    --cvm-starting-bg:   #221E3E;
    --cvm-starting-br:   #3F4380;
    --cvm-starting-dot:  #7786FF;

    --cvm-stopping-fg:   #E0A93B;  /* Mustard 300 */
    --cvm-stopping-bg:   #32200C;
    --cvm-stopping-br:   #5C4715;
    --cvm-stopping-dot:  #C88500;

    --cvm-unknown-fg:    #FFB3FB;
    --cvm-unknown-bg:    #35132F;
    --cvm-unknown-br:    #653060;
    --cvm-unknown-dot:   #FFB3FB;

    --cvm-error-fg:      #F0938A;
    --cvm-error-bg:      #3C1210;
    --cvm-error-br:      #6E2620;

    --cvm-shadow-1: 0 0 20px rgba(0, 0, 0, .30);
    --cvm-shadow-2: 0 0 20px rgba(0, 0, 0, .45);
    --cvm-shadow-3: 0 8px 40px rgba(0, 0, 0, .50);

    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --cvm-bg:            #240602;
  --cvm-surface:       #2C0C07;
  --cvm-surface-alt:   #351511;
  --cvm-surface-hover: #45221C;
  --cvm-surface-sunk:  #1A0401;

  --cvm-border:        rgba(250, 245, 239, .16);
  --cvm-border-strong: rgba(250, 245, 239, .32);

  --cvm-text:          #FAF5EF;
  --cvm-text-muted:    rgba(250, 245, 239, .74);
  --cvm-text-faint:    rgba(250, 245, 239, .52);
  --cvm-on-accent:     #240602;

  --cvm-accent:        #FF5F27;
  --cvm-accent-hover:  #FF7A45;
  --cvm-accent-press:  #FF936B;
  --cvm-accent-soft:   #3A1008;
  --cvm-accent-text:   #FF936B;

  --cvm-focus:         #FAF5EF;

  --cvm-running-fg:    #8FD2AE;
  --cvm-running-bg:    #1B2F22;
  --cvm-running-br:    #35563F;
  --cvm-running-dot:   #5CB585;

  --cvm-stopped-fg:    #B9A39D;
  --cvm-stopped-bg:    #351511;
  --cvm-stopped-br:    rgba(250, 245, 239, .16);
  --cvm-stopped-dot:   #7A554E;

  --cvm-starting-fg:   #AFB7FF;
  --cvm-starting-bg:   #221E3E;
  --cvm-starting-br:   #3F4380;
  --cvm-starting-dot:  #7786FF;

  --cvm-stopping-fg:   #E0A93B;
  --cvm-stopping-bg:   #32200C;
  --cvm-stopping-br:   #5C4715;
  --cvm-stopping-dot:  #C88500;

  --cvm-unknown-fg:    #FFB3FB;
  --cvm-unknown-bg:    #35132F;
  --cvm-unknown-br:    #653060;
  --cvm-unknown-dot:   #FFB3FB;

  --cvm-error-fg:      #F0938A;
  --cvm-error-bg:      #3C1210;
  --cvm-error-br:      #6E2620;

  --cvm-shadow-1: 0 0 20px rgba(0, 0, 0, .30);
  --cvm-shadow-2: 0 0 20px rgba(0, 0, 0, .45);
  --cvm-shadow-3: 0 8px 40px rgba(0, 0, 0, .50);

  color-scheme: dark;
}

/* ---------- 3. Jetons non chromatiques ---------- */

:root {
  /* Typographie — Inter est la police produit de la marque, Arial
     le repli des gabarits. Chargée depuis le poste, jamais du réseau :
     l'outil ne doit dépendre de rien. */
  --cvm-font-ui:   "Inter", "Segoe UI", Arial, "Helvetica Neue", sans-serif;
  /* Le monospace n'est pas au catalogue de la marque : il est ici
     fonctionnel, réservé aux identifiants de machines. */
  --cvm-font-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;

  --cvm-size-100: 12px;   /* badges, méta */
  --cvm-size-200: 13px;   /* demi-pas, nécessaire à la densité */
  --cvm-size-300: 14px;   /* boutons, corps dense */
  --cvm-size-400: 16px;   /* nom de machine, corps */
  --cvm-size-500: 19px;   /* titre de zone */
  --cvm-size-600: 21px;   /* titre d'écran */

  --cvm-weight-normal: 400;
  --cvm-weight-medium: 500;
  --cvm-weight-bold:   600;

  --cvm-leading-tight: 1.22;
  --cvm-leading-body:  1.55;

  /* Espacement — base 8pt de la marque */
  --cvm-space-1:  4px;
  --cvm-space-2:  8px;
  --cvm-space-3: 12px;
  --cvm-space-4: 16px;
  --cvm-space-5: 24px;
  --cvm-space-6: 32px;
  --cvm-space-7: 48px;
  --cvm-space-8: 64px;

  /* Rayons — valeurs exactes de la marque */
  --cvm-radius-1:  8px;   /* CTA, bouton */
  --cvm-radius-2: 14px;   /* carte, petite fenêtre */
  --cvm-radius-3: 22px;   /* grand panneau */
  --cvm-radius-pill: 999px;

  /* Gabarits — multiples de 8 */
  --cvm-row-height: 48px;
  --cvm-bar-height: 48px;
  --cvm-control-height: 32px;
  --cvm-badge-height: 24px;

  /* Mouvement — ease et durées de la marque */
  --cvm-ease: cubic-bezier(.22, .61, .36, 1);
  --cvm-fast: 140ms;
  --cvm-slow: 240ms;
}

/* ---------- 4. Bases ---------- */

/* Les gabarits du système (48px de ligne, 24px de badge, 32px de contrôle,
   48px de barre) sont des hauteurs totales : le modèle de boîte est
   normalisé pour tous les composants livrés. */
.vm,
.badge,
.session,
.session-bar,
.display,
.status,
button.primary,
button.ghost {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cvm-bg);
  color: var(--cvm-text);
  font-family: var(--cvm-font-ui);
  font-size: var(--cvm-size-300);
  line-height: var(--cvm-leading-body);
  -webkit-font-smoothing: antialiased;
}

/* Les hyperliens sont toujours Warm Red. */
a { color: var(--cvm-accent); text-decoration: none; }
a:hover { color: var(--cvm-accent); text-decoration: underline; text-underline-offset: 3px; }

:where(button, a, [tabindex]):focus-visible {
  outline: 2px solid var(--cvm-focus);
  outline-offset: 2px;
  border-radius: var(--cvm-radius-1);
}

/* ---------- 5. Ligne de machine ---------- */

.vm {
  display: grid;
  /* Colonnes déterministes : chaque ligne est sa propre grille, donc les
     largeurs doivent être fixes pour que badges et actions ne se déplacent
     jamais d'une ligne à l'autre. */
  grid-template-columns: minmax(0, 1fr) 132px 200px 240px;
  align-items: center;
  gap: var(--cvm-space-4);
  min-height: var(--cvm-row-height);
  padding: var(--cvm-space-2) var(--cvm-space-4);
  background: var(--cvm-surface);
  /* Filet en ombre intérieure et non en bordure : la ligne mesure
     exactement 48px, le trait ne s'ajoute pas au gabarit. */
  box-shadow: inset 0 -1px 0 var(--cvm-border);
  position: relative;
  transition: background var(--cvm-fast) var(--cvm-ease);
}

.vm:last-child { box-shadow: none; }
.vm:hover { background: var(--cvm-surface-hover); }

/* Une machine éteinte ou inconnue est indisponible : on baisse le
   contraste de la ligne sans la rendre illisible. */
.vm:has(.badge-stopped) .vm-name,
.vm:has(.badge-unknown) .vm-name { color: var(--cvm-text-muted); }

.vm-name {
  font-family: var(--cvm-font-mono);
  font-size: var(--cvm-size-300);
  font-weight: var(--cvm-weight-medium);
  letter-spacing: -.1px;
  color: var(--cvm-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vm-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--cvm-space-2);
  font-size: var(--cvm-size-100);
  color: var(--cvm-text-faint);
  white-space: nowrap;
}

.vm-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cvm-space-2);
}

/* Attente honnête : filet de progression indéterminé sous la ligne
   pendant les transitions, et méta plus lisible pour porter le délai. */
.vm:has(.badge-starting) .vm-meta,
.vm:has(.badge-stopping) .vm-meta { color: var(--cvm-text-muted); }

.vm:has(.badge-starting)::after,
.vm:has(.badge-stopping)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--cvm-starting-dot) 45%, var(--cvm-starting-dot) 55%, transparent 100%);
  background-size: 45% 100%;
  background-repeat: no-repeat;
  animation: cvm-crawl 1.9s var(--cvm-ease) infinite;
}

.vm:has(.badge-stopping)::after {
  background-image: linear-gradient(90deg,
    transparent 0%, var(--cvm-stopping-dot) 45%, var(--cvm-stopping-dot) 55%, transparent 100%);
  animation-direction: reverse;
}

@keyframes cvm-crawl {
  from { background-position: -50% 0; }
  to   { background-position: 150% 0; }
}

/* ---------- 6. Badge d'état ---------- */

.badge {
  display: inline-flex;
  /* Item de grille ou de flex, l'inline-flex est blockifié et s'étirerait
     sur toute sa piste : le badge doit rester à sa largeur intrinsèque. */
  width: max-content;
  max-width: 100%;
  justify-self: start;
  align-self: center;
  align-items: center;
  gap: var(--cvm-space-2);
  height: var(--cvm-badge-height);
  padding: 0 var(--cvm-space-3) 0 var(--cvm-space-2);
  border: 1px solid transparent;
  border-radius: var(--cvm-radius-pill);   /* les tags sont des pilules */
  font-size: var(--cvm-size-100);
  font-weight: var(--cvm-weight-medium);
  letter-spacing: .01em;
  white-space: nowrap;
  user-select: none;
}

.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--cvm-radius-pill);
  background: currentColor;
  flex: none;
}

.badge-running  { color: var(--cvm-running-fg);  background: var(--cvm-running-bg);  border-color: var(--cvm-running-br); }
.badge-stopped  { color: var(--cvm-stopped-fg);  background: var(--cvm-stopped-bg);  border-color: var(--cvm-stopped-br); }
.badge-starting { color: var(--cvm-starting-fg); background: var(--cvm-starting-bg); border-color: var(--cvm-starting-br); }
.badge-stopping { color: var(--cvm-stopping-fg); background: var(--cvm-stopping-bg); border-color: var(--cvm-stopping-br); }
.badge-unknown  { color: var(--cvm-unknown-fg);  background: var(--cvm-unknown-bg);  border-color: var(--cvm-unknown-br); }

.badge-running::before  { background: var(--cvm-running-dot); }
.badge-stopped::before  { background: var(--cvm-stopped-dot); }
.badge-starting::before { background: var(--cvm-starting-dot); }
.badge-stopping::before { background: var(--cvm-stopping-dot); }
.badge-unknown::before  { background: none; box-shadow: inset 0 0 0 1.5px var(--cvm-unknown-dot); }

/* Le point respire pendant une transition : signe de vie sans clignotement. */
.badge-starting::before,
.badge-stopping::before { animation: cvm-breathe 1.6s var(--cvm-ease) infinite; }

@keyframes cvm-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

@media (prefers-reduced-motion: reduce) {
  .badge::before,
  .vm::after { animation: none !important; }
  .vm:has(.badge-starting)::after,
  .vm:has(.badge-stopping)::after { background-size: 100% 100%; opacity: .5; }
}

/* ---------- 7. Boutons ---------- */

button.primary,
button.ghost {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cvm-space-2);
  height: var(--cvm-control-height);
  padding: 0 var(--cvm-space-4);
  border-radius: var(--cvm-radius-1);
  font-family: inherit;
  font-size: var(--cvm-size-300);
  font-weight: var(--cvm-weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--cvm-fast) var(--cvm-ease),
              border-color var(--cvm-fast) var(--cvm-ease),
              box-shadow var(--cvm-fast) var(--cvm-ease),
              transform var(--cvm-fast) var(--cvm-ease),
              color var(--cvm-fast) var(--cvm-ease);
}

/* Warm Red : la seule couleur qui parle fort, réservée à l'action
   qu'on est venu faire. */
button.primary {
  background: var(--cvm-accent);
  border: 1px solid var(--cvm-accent);
  color: var(--cvm-on-accent);
  font-weight: var(--cvm-weight-bold);
}
button.primary:hover:not(:disabled) {
  background: var(--cvm-accent-hover);
  border-color: var(--cvm-accent-hover);
  box-shadow: var(--cvm-shadow-2);
}
button.primary:active:not(:disabled) {
  background: var(--cvm-accent-press);
  border-color: var(--cvm-accent-press);
  box-shadow: none;
  transform: scale(.98);
}

/* Bouton discret : lisible mais volontairement moins attirant.
   Utilisé pour « Éteindre », qui affecte les collègues. */
button.ghost {
  background: transparent;
  border: 1px solid var(--cvm-border-strong);
  color: var(--cvm-text-muted);
}
button.ghost:hover:not(:disabled) {
  background: var(--cvm-surface-hover);
  border-color: var(--cvm-text-faint);
  color: var(--cvm-text);
}
button.ghost:active:not(:disabled) { background: var(--cvm-surface-sunk); transform: scale(.98); }

button.primary:disabled,
button.ghost:disabled {
  cursor: not-allowed;
  opacity: .45;
  box-shadow: none;
}

/* Chargement : le bouton garde sa largeur, le libellé reste lisible. */
button.primary[aria-busy="true"],
button.ghost[aria-busy="true"],
button.primary.is-loading,
button.ghost.is-loading {
  cursor: progress;
  pointer-events: none;
}

button[aria-busy="true"]::before,
button.is-loading::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: var(--cvm-radius-pill);
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  opacity: .8;
  animation: cvm-spin .7s linear infinite;
}

@keyframes cvm-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  button[aria-busy="true"]::before,
  button.is-loading::before { animation-duration: 2.4s; }
}

/* ---------- 8. Session ---------- */

.session {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--cvm-chrome-bg);
}

.session-bar {
  flex: none;
  height: var(--cvm-bar-height);
  display: flex;
  align-items: center;
  gap: var(--cvm-space-4);
  padding: 0 var(--cvm-space-4);
  background: var(--cvm-chrome-bg);
  color: var(--cvm-chrome-text);
  /* Un seul filet clair marque la frontière avec le bureau distant :
     la barre s'annonce sans peser sur ce qu'elle surplombe. */
  box-shadow: inset 0 -1px 0 var(--cvm-chrome-line);
  font-size: var(--cvm-size-300);
  user-select: none;
}

.session-bar .vm-name {
  font-size: var(--cvm-size-300);
  color: var(--cvm-chrome-text);
}

.session-bar .vm-meta { color: var(--cvm-chrome-muted); }

.session-bar .badge {
  background: transparent;
  border-color: var(--cvm-chrome-line);
  color: var(--cvm-chrome-muted);
}

.session-bar .ghost {
  border-color: var(--cvm-chrome-line);
  color: var(--cvm-chrome-muted);
}
.session-bar .ghost:hover:not(:disabled) {
  background: var(--cvm-chrome-hover);
  border-color: var(--cvm-chrome-muted);
  color: var(--cvm-chrome-text);
}
.session-bar .ghost:active:not(:disabled) { background: #1A0401; }

.display {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: #1A0401;
  overflow: hidden;
}

.display > canvas,
.display > video,
.display > iframe,
.display > img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- 9. Statut / erreur ---------- */

.status {
  display: flex;
  align-items: flex-start;
  gap: var(--cvm-space-3);
  padding: var(--cvm-space-3) var(--cvm-space-4);
  border: 1px solid var(--cvm-border);
  border-radius: var(--cvm-radius-2);
  background: var(--cvm-surface-alt);
  color: var(--cvm-text-muted);
  font-size: var(--cvm-size-200);
  line-height: var(--cvm-leading-body);
}

.status::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 7px;
  flex: none;
  border-radius: var(--cvm-radius-pill);
  background: var(--cvm-text-faint);
}

.status[data-kind="error"] {
  background: var(--cvm-error-bg);
  border-color: var(--cvm-error-br);
  color: var(--cvm-error-fg);
}
.status[data-kind="error"]::before { background: currentColor; }

.status[data-kind="waiting"] {
  background: var(--cvm-starting-bg);
  border-color: var(--cvm-starting-br);
  color: var(--cvm-starting-fg);
}
.status[data-kind="waiting"]::before {
  background: var(--cvm-starting-dot);
  animation: cvm-breathe 1.6s var(--cvm-ease) infinite;
}

.status strong { font-weight: var(--cvm-weight-bold); }
.status button.ghost { margin-left: auto; }

/* Dans la session, le statut se pose au-dessus du bureau distant. */
.display .status {
  position: absolute;
  left: 50%;
  top: var(--cvm-space-5);
  transform: translateX(-50%);
  max-width: 520px;
  background: var(--cvm-chrome-bg);
  border-color: var(--cvm-chrome-line);
  color: var(--cvm-chrome-text);
  box-shadow: var(--cvm-shadow-3);
}
.display .status button.ghost {
  border-color: var(--cvm-chrome-line);
  color: var(--cvm-chrome-muted);
}
.display .status button.ghost:hover:not(:disabled) {
  background: var(--cvm-chrome-hover);
  border-color: var(--cvm-chrome-muted);
  color: var(--cvm-chrome-text);
}