@gyramais/gyra-design 0.2.49 → 0.2.50

package/dist/index.css

@@ -732,6 +732,9 @@ video {
 .max-w-\[500px\] {
   max-width: 500px;
 }
+.max-w-full {
+  max-width: 100%;
+}
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -755,9 +758,6 @@ video {
 .flex-col {
   flex-direction: column;
 }
-.flex-wrap {
-  flex-wrap: wrap;
-}
 .items-center {
   align-items: center;
 }
@@ -776,6 +776,9 @@ video {
 .gap-3 {
   gap: 0.75rem;
 }
+.gap-4 {
+  gap: 1rem;
+}
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -889,6 +892,9 @@ video {
   font-size: 1rem !important;
   line-height: 1.5rem !important;
 }
+.text-\[13px\] {
+  font-size: 13px;
+}
 .text-\[16px\] {
   font-size: 16px;
 }
@@ -919,9 +925,16 @@ video {
 .uppercase {
   text-transform: uppercase;
 }
+.capitalize {
+  text-transform: capitalize;
+}
 .italic {
   font-style: italic;
 }
+.tabular-nums {
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
 .leading-none {
   line-height: 1;
 }
@@ -5587,78 +5600,110 @@ h6 {
 
 /* v2 Drawer chrome — flat-first: hairline borders, no soft halo. */
 .gyramais-drawer {
-    min-width: 100%;
-    max-width: 100%;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+  min-width: 100%;
+  max-width: 100%;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 @media (min-width: 768px) {
-    .gyramais-drawer {
-        min-width: 0px;
-        max-width: 100%
-    }
+  .gyramais-drawer {
+    min-width: 0px;
+    max-width: 100%;
+  }
 }
 
 .gyramais-drawer .gyramais-drawer-container {
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-    justify-content: space-between
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .gyramais-drawer .gyramais-drawer-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom-width: 1px;
-    border-color: var(--color-border-secondary);
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-top: 20px;
-    padding-bottom: 20px
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom-width: 1px;
+  border-color: var(--color-border-secondary);
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
 
 .gyramais-drawer .gyramais-drawer-title {
-    margin: 0px;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--color-text-primary)
+  margin: 0px;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text-primary);
 }
 .gyramais-drawer .gyramais-drawer-subtitle {
-    margin-top: 0.25rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    color: var(--color-text-secondary)
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--color-text-secondary);
 }
 
 .gyramais-drawer .gyramais-drawer-content {
-    height: 100%;
-    overflow-y: auto;
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-top: 20px;
-    padding-bottom: 20px
+  height: 100%;
+  overflow-y: auto;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
 
 .gyramais-drawer .gyramais-drawer-footer {
-    border-top-width: 1px;
-    border-color: var(--color-border-secondary);
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-top: 20px;
-    padding-bottom: 20px
+  border-top-width: 1px;
+  border-color: var(--color-border-secondary);
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+/* Botao de fechar de verdade: <button aria-label="Fechar">, focavel pelo
+   teclado, com anel de foco via ::after (o index.css global mata o outline
+   de todo elemento; o pseudo-elemento nao entra nessa regra). A caixa e de
+   24px, o tamanho que o icone solto ja ocupava, para o cabecalho nao mudar
+   de altura em nenhum consumidor. */
+.gyramais-drawer .gyramais-drawer-close {
+  position: relative;
+  margin: 0px;
+  display: flex;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  border-width: 0px;
+  background-color: transparent;
+  padding: 0px;
+  color: var(--color-text-secondary);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+}
+.gyramais-drawer .gyramais-drawer-close:hover {
+  color: var(--color-text-primary);
+}
+.gyramais-drawer .gyramais-drawer-close:focus-visible::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: -4px;
+  border-radius: var(--radius-md);
+  border-width: 2px;
+  border-color: var(--gyra-blue);
 }
 
 .gyramais-drawer .gyramais-drawer-close-icon {
-    cursor: pointer;
-    font-size: 24px;
-    color: var(--color-text-secondary);
-    transition-duration: 150ms;
-    animation-duration: 150ms
-}
-.gyramais-drawer .gyramais-drawer-close-icon:hover {
-    color: var(--color-text-primary)
+  cursor: pointer;
+  font-size: 24px;
+  transition-duration: 150ms;
+  animation-duration: 150ms;
 }
 
 /* v2 DropdownMenu chrome — hairline border + subtle elevation, flat items. */
@@ -6985,11 +7030,38 @@ h6 {
     20px;
 }
 
-.gyramais-modal .gyramais-modal-close-icon {
+/* Botao de fechar de verdade: <button aria-label="Fechar">, focavel pelo
+   teclado, com anel de foco via ::after (o index.css global mata o outline
+   de todo elemento; o pseudo-elemento nao entra nessa regra). A caixa e de
+   24px, o tamanho que o icone solto ja ocupava, para o cabecalho nao mudar
+   de altura em nenhum consumidor. */
+.gyramais-modal .gyramais-modal-close {
+  position:
+    relative;
+  margin:
+    0px;
+  display:
+    flex;
+  height:
+    24px;
+  width:
+    24px;
+  flex-shrink:
+    0;
   cursor:
     pointer;
-  font-size:
-    24px;
+  align-items:
+    center;
+  justify-content:
+    center;
+  border-radius:
+    var(--radius-sm);
+  border-width:
+    0px;
+  background-color:
+    transparent;
+  padding:
+    0px;
   color:
     var(--color-text-secondary);
   transition-duration:
@@ -6997,10 +7069,42 @@ h6 {
   animation-duration:
     150ms;
 }
-.gyramais-modal .gyramais-modal-close-icon:hover {
+.gyramais-modal .gyramais-modal-close:hover:not(:disabled) {
   color:
     var(--color-text-primary);
 }
+.gyramais-modal .gyramais-modal-close:disabled {
+  cursor:
+    not-allowed;
+  opacity:
+    0.6;
+}
+.gyramais-modal .gyramais-modal-close:focus-visible::after {
+  content: "";
+  pointer-events:
+    none;
+  position:
+    absolute;
+  inset:
+    -4px;
+  border-radius:
+    var(--radius-md);
+  border-width:
+    2px;
+  border-color:
+    var(--gyra-blue);
+}
+
+.gyramais-modal .gyramais-modal-close-icon {
+  cursor:
+    pointer;
+  font-size:
+    24px;
+  transition-duration:
+    150ms;
+  animation-duration:
+    150ms;
+}
 
 @keyframes modal-entry {
   0% {
@@ -7268,9 +7372,13 @@ h6 {
     --tw-text-opacity: 1;
     color: rgb(98 105 118 / var(--tw-text-opacity, 1))
 }
-/* Rail — a esteira Gyra+ (lista vertical de etapas + conector condicional).
+/* Rail, a esteira Gyra+ (lista vertical de etapas + conector condicional).
    Todas as cores saem dos tokens do design system: nada de hex solto aqui.
 
+   Escala: tipografia 15 (nome) / 13 (linha 2) / 12 (estado, conector, motivo);
+   espacamento em multiplos de 4: padding do cartao 12, gap entre linhas 2,
+   gap entre cartoes 8 (via o conector de 32px: 24 de pilula + 4 + 4).
+
    Armadilha do repositorio: o index.css global tem `* { outline: none
    !important }` e `*:focus { box-shadow: none !important }`. Anel de foco
    desenhado no proprio elemento morre em silencio. Por isso o foco visivel
@@ -7291,82 +7399,109 @@ h6 {
   padding: 0px;
 }
 
+/* Coluna do trilho: 8px de marcador + 12px de folga ate o cartao. */
 .gyramais-rail-item {
   position: relative;
   display: flex;
   flex-direction: column;
-  padding-left: 30px;
+  padding-left: 20px;
 }
 
-/* O trilho: uma linha continua atras de todas as etapas. */
-.gyramais-rail-item::before {
+/* ---- Trilho: linha de 1px na cor de borda ------------------------------
+   Cada peca (conector, etapa) desenha o seu proprio segmento, assim a linha
+   comeca no marcador da primeira etapa e termina no marcador da ultima. */
+
+.gyramais-rail-connector::before,
+.gyramais-rail-step::before {
   content: "";
   position: absolute;
-  left: 11px;
-  top: 0px;
-  bottom: 0px;
-  width: 2px;
-  background-color: var(--color-border-secondary);
+  left: -16.5px;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--color-border-secondary);
 }
-.gyramais-rail-item:first-child::before {
-  top: 26px;
+.gyramais-rail-item:first-child .gyramais-rail-step::before {
+  top: 23px;
 }
-.gyramais-rail-item:last-child::before {
+.gyramais-rail-item:last-child .gyramais-rail-step::before {
   bottom: auto;
-  height: 26px;
+  height: 23px;
+}
+.gyramais-rail-item:first-child:last-child .gyramais-rail-step::before {
+  display: none;
 }
 
-/* ---- Conector ---------------------------------------------------------- */
+/* ---- Conector (pilula de 24px alinhada ao trilho) ----------------------- */
 
 .gyramais-rail-connector {
+  position: relative;
   display: flex;
-  min-height: 12px;
+  min-height: 32px;
   align-items: center;
-  gap: 8px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-.gyramais-rail-item:first-child .gyramais-rail-connector:empty {
-  display: none;
+  gap: 6px;
+  padding-top: 4px;
+  padding-bottom: 4px;
 }
 
 .gyramais-rail-gate-editor {
   display: inline-flex;
 }
 
-.gyramais-rail-gate.gyramais-segmented-picker {
-  padding-top: 4px;
-  padding-bottom: 4px;
-  padding-left: 10px;
-  padding-right: 10px;
-  font-size: 12.5px;
+/* A pilula editavel e o SegmentedPicker "secondary" com a densidade da
+   esteira: 24px de altura, 12px de texto, 12px de icone. */
+.gyramais-rail-gate.gyramais-segmented-picker.gyramais-segmented-picker-secondary {
+  height: 24px;
+  gap: 4px;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-color: var(--color-border-secondary);
+  background-color: var(--color-surface-primary);
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-left: 6px;
+  padding-right: 6px;
+  font-size: var(--fs-footnote);
   font-weight: 500;
+  line-height: 1;
+  color: var(--color-text-secondary);
+}
+.gyramais-rail-gate.gyramais-segmented-picker.gyramais-segmented-picker-secondary:hover {
+  border-color: var(--color-border-primary);
+  background-color: var(--color-surface-secondary);
+  color: var(--color-text-primary);
+}
+.gyramais-rail-gate.gyramais-segmented-picker-secondary .gyramais-segmented-picker-icon svg {
+  font-size: 12px;
+}
+.gyramais-rail-gate.gyramais-segmented-picker-secondary .gyramais-segmented-picker-chev {
+  margin-left: 0px;
+  font-size: 14px;
 }
 
 .gyramais-rail-gate-static {
   display: inline-flex;
+  height: 24px;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
   border-radius: 9999px;
   border-width: 1px;
   border-color: var(--color-border-secondary);
-  background-color: var(--color-surface-secondary);
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 12.5px;
+  background-color: var(--color-surface-primary);
+  padding-left: 8px;
+  padding-right: 8px;
+  font-size: var(--fs-footnote);
   font-weight: 500;
+  line-height: 1;
   color: var(--color-text-secondary);
 }
 .gyramais-rail-gate-static.is-passed {
-  border-color: var(--color-success);
+  border-color: var(--color-success-light);
   background-color: var(--color-success-light);
   color: var(--status-success-text);
 }
 .gyramais-rail-gate-static.is-blocked {
-  border-color: var(--color-border-primary);
-  background-color: var(--color-surface-secondary);
+  border-style: dashed;
   color: var(--color-text-tertiary);
 }
 
@@ -7381,58 +7516,78 @@ h6 {
 
 /* Acento por condicao, valendo tanto na pilula editavel quanto na estatica. */
 .gyramais-rail-gate.is-approved .gyramais-segmented-picker-icon,
-.gyramais-rail-gate.is-approved.gyramais-rail-gate-static .gyramais-rail-gate-icon {
+.gyramais-rail-gate.is-approved.gyramais-rail-gate-static:not(.is-blocked) .gyramais-rail-gate-icon {
   color: var(--color-success);
 }
 .gyramais-rail-gate.is-alert .gyramais-segmented-picker-icon,
-.gyramais-rail-gate.is-alert.gyramais-rail-gate-static .gyramais-rail-gate-icon {
+.gyramais-rail-gate.is-alert.gyramais-rail-gate-static:not(.is-blocked) .gyramais-rail-gate-icon {
   color: var(--color-warning);
 }
 .gyramais-rail-gate.is-reproved .gyramais-segmented-picker-icon,
-.gyramais-rail-gate.is-reproved.gyramais-rail-gate-static .gyramais-rail-gate-icon {
+.gyramais-rail-gate.is-reproved.gyramais-rail-gate-static:not(.is-blocked) .gyramais-rail-gate-icon {
   color: var(--color-danger);
 }
+.gyramais-rail-gate-static.is-passed .gyramais-rail-gate-icon {
+  color: var(--status-success-text);
+}
 
 /* ---- Inserir / adicionar etapa ----------------------------------------- */
 
-.gyramais-rail-insert,
-.gyramais-rail-add {
+/* O "+" entre etapas so aparece quando o conector esta em hover ou com foco:
+   e uma acao secundaria e nao precisa competir com a pilula. */
+.gyramais-rail-insert {
   position: relative;
   display: inline-flex;
+  height: 20px;
+  width: 20px;
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  border-radius: 9999px;
   border-width: 1px;
   border-style: dashed;
   border-color: var(--color-border-primary);
   background-color: var(--color-surface-primary);
   color: var(--color-text-tertiary);
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  opacity: 0;
+  transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-  animation-duration: 200ms;
+  transition-duration: 150ms;
+  animation-duration: 150ms;
 }
-
-.gyramais-rail-insert {
-  height: 22px;
-  width: 22px;
-  flex-shrink: 0;
-  border-radius: 9999px;
+.gyramais-rail-connector:hover .gyramais-rail-insert,
+.gyramais-rail-connector:focus-within .gyramais-rail-insert,
+.gyramais-rail-insert:focus-visible {
+  opacity: 1;
+}
+@media (hover: none) {
+  .gyramais-rail-insert {
+    opacity: 1;
+  }
 }
 
 .gyramais-rail-add {
-  margin-left: 30px;
-  margin-top: 10px;
+  position: relative;
+  margin-left: 20px;
+  margin-top: 4px;
+  display: inline-flex;
+  height: 28px;
+  cursor: pointer;
+  align-items: center;
+  gap: 6px;
   align-self: flex-start;
-  border-radius: var(--radius-md);
-  padding-left: 14px;
-  padding-right: 14px;
-  padding-top: 7px;
-  padding-bottom: 7px;
-  font-size: 13px;
+  border-radius: var(--radius-sm);
+  border-width: 0px;
+  background-color: transparent;
+  padding-left: 8px;
+  padding-right: 8px;
+  font-size: var(--fs-subheadline);
   font-weight: 500;
   color: var(--color-text-secondary);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
 }
 
 .gyramais-rail-insert:hover,
@@ -7446,8 +7601,10 @@ h6 {
 .gyramais-rail-add:focus-visible::after,
 .gyramais-rail-step:focus-visible::after,
 .gyramais-rail-leaf:focus-visible::after,
+.gyramais-rail-leaves-toggle:focus-visible::after,
 .gyramais-rail-step-open:focus-visible::after,
-.gyramais-rail-step-action:focus-visible::after {
+.gyramais-rail-step-action:focus-visible::after,
+.gyramais-rail-inline-select:focus-visible::after {
   content: "";
   pointer-events: none;
   position: absolute;
@@ -7460,181 +7617,362 @@ h6 {
 .gyramais-rail-step-action:focus-visible::after {
   border-radius: 9999px;
 }
+.gyramais-rail-inline-select:focus-visible::after,
+.gyramais-rail-leaves-toggle:focus-visible::after,
+.gyramais-rail-step-open:focus-visible::after {
+  inset: -2px;
+  border-radius: var(--radius-sm);
+}
 
 /* ---- Etapa ------------------------------------------------------------- */
 
 .gyramais-rail-step {
   position: relative;
-  padding-bottom: 6px;
 }
 
+/* Marcador de 8px sobre o trilho, centrado na linha 1 do cartao
+   (1px de borda + 12px de padding + (20px de linha - 8px) / 2 = 19px). */
 .gyramais-rail-node {
   position: absolute;
-  left: -26px;
-  top: 20px;
-  height: 16px;
-  width: 16px;
-  border-radius: 9999px;
-  border-width: 2px;
+  left: -20px;
+  top: 19px;
+  z-index: 1;
+  height: 8px;
+  width: 8px;
+  border-radius: 9999px;
+  border-width: 1px;
   border-color: var(--color-border-strong);
   background-color: var(--color-surface-primary);
 }
-.gyramais-rail-node.is-running {
+.gyramais-rail-edit .gyramais-rail-node {
+  border-color: var(--color-gray-300);
+  background-color: var(--color-gray-300);
+}
+.gyramais-rail-node.is-info {
   border-color: var(--gyra-blue);
-  background-color: var(--gyra-blue-light);
+  background-color: var(--gyra-blue);
 }
-.gyramais-rail-node.is-done {
+.gyramais-rail-node.is-success {
   border-color: var(--color-success);
-  background-color: var(--color-success-light);
+  background-color: var(--color-success);
 }
-.gyramais-rail-node.is-waiting {
+.gyramais-rail-node.is-warning {
   border-color: var(--color-warning);
-  background-color: var(--color-warning-light);
+  background-color: var(--color-warning);
 }
-.gyramais-rail-node.is-error {
+.gyramais-rail-node.is-danger {
   border-color: var(--color-danger);
-  background-color: var(--color-danger-light);
+  background-color: var(--color-danger);
+}
+.gyramais-rail-node.is-neutral {
+  border-color: var(--color-border-strong);
+  background-color: var(--color-surface-primary);
 }
 .gyramais-rail-node.is-skipped {
   border-color: var(--color-border-primary);
-  background-color: var(--color-surface-secondary);
+  background-color: var(--color-surface-primary);
 }
 
-.gyramais-rail-step .gyramais-rail-step-card {
+/* O Card do design system como contentor (borda, raio, fundo), com a
+   densidade da esteira. O header do Card nao e usado: a anatomia de duas
+   linhas e o conteudo. */
+.gyramais-rail-step-card.gyramais-card {
+  border-radius: var(--radius-md);
+  padding: 12px;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-  animation-duration: 200ms;
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+}
+.gyramais-rail-step-card.gyramais-card .gyramais-card-content {
+  position: static;
+}
+.gyramais-rail-step:hover .gyramais-rail-step-card.gyramais-card {
+  border-color: var(--color-border-primary);
 }
-.gyramais-rail-step.is-active .gyramais-rail-step-card,
-.gyramais-rail-step.is-selected .gyramais-rail-step-card {
+.gyramais-rail-step.is-active .gyramais-rail-step-card.gyramais-card,
+.gyramais-rail-step.is-selected .gyramais-rail-step-card.gyramais-card {
   border-color: var(--gyra-blue);
+}
+.gyramais-rail-step.is-selected .gyramais-rail-step-card.gyramais-card {
   background-color: var(--gyra-blue-subtle);
 }
 
 /* Etapa que nao disparou: cartao translucido. O motivo NAO entra aqui,
    fica fora do cartao, em contraste cheio. */
-.gyramais-rail-step.is-skipped .gyramais-rail-step-card {
+.gyramais-rail-step.is-skipped .gyramais-rail-step-card.gyramais-card {
   border-style: dashed;
-  opacity: 0.55;
+  opacity: 0.5;
 }
-.gyramais-rail-step.is-disabled .gyramais-rail-step-card {
+.gyramais-rail-step.is-disabled .gyramais-rail-step-card.gyramais-card {
   opacity: 0.6;
 }
 
+.gyramais-rail-step-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+/* Glifo do tipo: chip neutro de 24px. O tipo vive aqui e no tooltip, nunca
+   como texto no cartao. */
 .gyramais-rail-step-glyph {
   display: inline-flex;
-  height: 32px;
-  width: 32px;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
+  background-color: var(--color-gray-50);
+  color: var(--color-text-secondary);
+  margin-top: -2px;
+}
+.gyramais-rail-step.is-active .gyramais-rail-step-glyph {
   background-color: var(--gyra-blue-light);
-  font-size: 15px;
-  line-height: 1;
   color: var(--gyra-blue);
 }
-.gyramais-rail-step.is-checkpoint .gyramais-rail-step-glyph {
-  background-color: var(--color-warning-light);
-  color: var(--color-warning);
-}
-.gyramais-rail-step.is-relationships .gyramais-rail-step-glyph {
-  background-color: var(--gyra-teal-light);
-  color: var(--gyra-teal);
+
+.gyramais-rail-step-main {
+  display: flex;
+  min-width: 0px;
+  flex: 1 1 0%;
+  flex-direction: column;
+  gap: 2px;
 }
 
-.gyramais-rail-step-title {
-  display: inline-flex;
+.gyramais-rail-step-line1 {
+  display: flex;
+  min-height: 20px;
+  min-width: 0px;
   align-items: center;
-  gap: 6px;
-  font-family: var(--font-display);
+  gap: 8px;
 }
 
 .gyramais-rail-step-name {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--fs-body);
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: var(--tracking-normal);
   color: var(--color-text-primary);
 }
 
 .gyramais-rail-step-open {
   position: relative;
   display: inline-flex;
+  min-width: 0px;
   cursor: pointer;
   align-items: center;
-  gap: 5px;
+  gap: 4px;
   border-width: 0px;
   background-color: transparent;
   padding: 0px;
-  color: var(--color-text-primary);
   text-decoration-line: none;
   font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
 }
-.gyramais-rail-step-open:hover {
+.gyramais-rail-step-open:hover .gyramais-rail-step-name {
   color: var(--gyra-blue);
-  text-decoration-line: underline;
 }
-
 .gyramais-rail-step-open-icon {
-  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+  color: var(--color-text-quaternary);
 }
 
-.gyramais-rail-step-subtitle {
+.gyramais-rail-step-meta {
   display: inline-flex;
-  flex-wrap: wrap;
+  flex-shrink: 0;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
+}
+/* Tag do design system, na densidade de um chip de 20px. */
+.gyramais-rail-step-meta .gyramais-tag {
+  height: 20px;
+  border-radius: var(--radius-xs);
+  border-color: var(--color-border-subtle);
+  background-color: var(--color-gray-50);
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.gyramais-rail-step-meta .gyramais-tag .gyramais-tag-content {
+  font-size: var(--fs-footnote);
+  line-height: 18px;
   color: var(--color-text-secondary);
 }
+.gyramais-rail-step-meta .gyramais-tag .gyramais-tag-icon {
+  margin-right: 4px;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 
-.gyramais-rail-step-kind {
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: var(--tracking-wide);
-  color: var(--fs-caption);
-  color: var(--color-text-tertiary);
+.gyramais-rail-step-line2 {
+  display: flex;
+  min-height: 18px;
+  min-width: 0px;
+  align-items: center;
 }
 
-.gyramais-rail-step-dot {
-  color: var(--color-text-quaternary);
+.gyramais-rail-step-text {
+  font-size: var(--fs-subheadline);
+  line-height: 18px;
+  color: var(--color-text-secondary);
 }
 
-/* O resto do subtitulo (separador + texto) e UM item do flex: assim o "·"
-   quebra de linha junto com a primeira palavra que ele separa, em vez de
-   ficar pendurado sozinho no fim da linha de cima. */
-.gyramais-rail-step-subtitle-rest {
+/* Seletor inline: texto + chevron no corpo do texto, sem borda. O padding
+   horizontal e compensado por uma margem negativa para o texto alinhar
+   com o nome da etapa. */
+/* Largura: o gatilho ocupa o que o texto pede e so encolhe (com
+   reticencias) quando a linha de fato nao o comporta. `min-w-0` deixa o
+   flex encolher; NAO usar `max-w-full`: com a margem negativa de 6px, um
+   invólucro shrink-to-fit (o `span` do toolbox em volta do gatilho) mede a
+   caixa de margem, e 100% dela e 6px menos que o proprio conteudo, o que
+   truncava toda politica por 6px com meio cartao vazio (E2 do guard). */
+.gyramais-rail-inline-select {
+  position: relative;
+  margin-left: -6px;
+  display: inline-flex;
+  height: 20px;
   min-width: 0px;
+  cursor: pointer;
+  align-items: center;
+  gap: 2px;
+  border-radius: var(--radius-sm);
+  border-width: 0px;
+  background-color: transparent;
+  padding-left: 6px;
+  padding-right: 4px;
+  font-size: var(--fs-subheadline);
+  font-weight: 500;
+  line-height: 18px;
+  color: var(--color-text-primary);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+  font-family: inherit;
+}
+.gyramais-rail-inline-select:hover:not(:disabled) {
+  background-color: var(--color-surface-active);
+}
+.gyramais-rail-inline-select:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.gyramais-rail-inline-select.is-placeholder {
+  font-weight: 400;
+  color: var(--color-text-tertiary);
+}
+.gyramais-rail-inline-select.is-warning {
+  color: var(--status-warning-text);
+}
+.gyramais-rail-inline-select-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gyramais-rail-inline-select-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
 }
 
-.gyramais-rail-step-header-right {
+.gyramais-rail-step-side {
   display: flex;
-  flex-wrap: wrap;
+  min-height: 20px;
+  flex-shrink: 0;
   align-items: center;
-  justify-content: flex-end;
   gap: 8px;
 }
 
+/* Estado: ponto de 6px + texto de 12px. A cor mora no ponto. */
+.gyramais-rail-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  font-size: var(--fs-footnote);
+  line-height: 16px;
+  color: var(--color-text-secondary);
+}
+.gyramais-rail-status-dot {
+  height: 6px;
+  width: 6px;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background-color: var(--color-gray-300);
+}
+.gyramais-rail-status.is-info .gyramais-rail-status-dot {
+  background-color: var(--gyra-blue);
+}
+.gyramais-rail-status.is-success .gyramais-rail-status-dot {
+  background-color: var(--color-success);
+}
+.gyramais-rail-status.is-warning .gyramais-rail-status-dot {
+  background-color: var(--color-warning);
+}
+.gyramais-rail-status.is-danger .gyramais-rail-status-dot {
+  background-color: var(--color-danger);
+}
+.gyramais-rail-status.is-warning .gyramais-rail-status-label {
+  color: var(--status-warning-text);
+}
+.gyramais-rail-status.is-danger .gyramais-rail-status-label {
+  color: var(--status-danger-text);
+}
+
+/* O botao do consumer ("Decidir"), na densidade da linha. */
+.gyramais-rail-step-actions .gyramais-button.gyramais-button-small {
+  height: 24px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  font-size: var(--fs-footnote);
+}
+
+/* Ordenar/remover: so no hover e no foco. */
 .gyramais-rail-step-toolbar {
   display: flex;
   align-items: center;
   gap: 2px;
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+}
+.gyramais-rail-step:hover .gyramais-rail-step-toolbar,
+.gyramais-rail-step:focus-within .gyramais-rail-step-toolbar,
+.gyramais-rail-step.is-selected .gyramais-rail-step-toolbar {
+  opacity: 1;
+}
+@media (hover: none) {
+  .gyramais-rail-step-toolbar {
+    opacity: 1;
+  }
 }
 
 .gyramais-rail-step-action {
   position: relative;
   display: inline-flex;
-  height: 26px;
-  width: 26px;
+  height: 24px;
+  width: 24px;
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  border-radius: 9999px;
+  border-radius: var(--radius-sm);
   border-width: 0px;
   background-color: transparent;
   color: var(--color-text-tertiary);
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-  animation-duration: 200ms;
+  transition-duration: 150ms;
+  animation-duration: 150ms;
 }
 .gyramais-rail-step-action:hover:not(:disabled) {
   background-color: var(--color-surface-active);
@@ -7645,60 +7983,98 @@ h6 {
 }
 .gyramais-rail-step-action:disabled {
   cursor: not-allowed;
-  opacity: 0.35;
+  opacity: 0.3;
 }
 
 .gyramais-rail-step-content {
+  margin-top: 8px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  color: var(--fs-callout);
+  gap: 8px;
+  font-size: var(--fs-subheadline);
   color: var(--color-text-secondary);
 }
 
 /* O motivo de a etapa nao ter disparado. Fora do cartao translucido de
    proposito: e a informacao que precisa ser lida. */
 .gyramais-rail-step-reason {
-  margin-top: 6px;
+  margin-top: 4px;
   margin-bottom: 0px;
   display: flex;
   align-items: flex-start;
-  gap: 6px;
-  border-left-width: 2px;
-  border-color: var(--color-border-primary);
-  padding-left: 10px;
-  line-height: var(--lh-normal);
-  color: var(--fs-footnote);
+  gap: 8px;
+  padding-left: 12px;
+  font-size: var(--fs-footnote);
+  line-height: 16px;
   color: var(--color-text-secondary);
 }
+.gyramais-rail-step-reason-mark {
+  margin-top: 5px;
+  height: 6px;
+  width: 6px;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background-color: var(--color-gray-300);
+}
 .gyramais-rail-step.is-error .gyramais-rail-step-reason {
-  border-color: var(--color-danger);
   color: var(--status-danger-text);
 }
+.gyramais-rail-step.is-error .gyramais-rail-step-reason-mark {
+  background-color: var(--color-danger);
+}
 
 /* ---- Folhas (relatorios derivados dos vinculos) ------------------------ */
 
 .gyramais-rail-leaves {
-  margin-top: 10px;
+  margin-top: 8px;
   display: flex;
   flex-direction: column;
-  gap: 6px;
 }
 
-.gyramais-rail-leaves-label {
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: var(--tracking-wide);
-  color: var(--fs-caption);
+.gyramais-rail-leaves-toggle {
+  position: relative;
+  margin-left: -4px;
+  display: inline-flex;
+  height: 20px;
+  cursor: pointer;
+  align-items: center;
+  gap: 2px;
+  align-self: flex-start;
+  border-radius: var(--radius-sm);
+  border-width: 0px;
+  background-color: transparent;
+  padding-left: 4px;
+  padding-right: 4px;
+  font-size: var(--fs-footnote);
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  font-family: inherit;
+}
+.gyramais-rail-leaves-toggle:hover {
+  background-color: var(--color-surface-active);
+  color: var(--color-text-primary);
+}
+.gyramais-rail-leaves-chevron {
+  --tw-rotate: -90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   color: var(--color-text-tertiary);
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+}
+.gyramais-rail-leaves-chevron.is-open {
+  --tw-rotate: 0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .gyramais-rail-leaves-list {
   margin: 0px;
+  margin-top: 4px;
   display: flex;
   list-style-type: none;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
   padding: 0px;
 }
 
@@ -7708,31 +8084,33 @@ h6 {
 
 .gyramais-rail-leaf {
   position: relative;
+  margin-left: -8px;
+  margin-right: -8px;
   display: flex;
   width: 100%;
+  min-width: 0px;
   flex: 1 1 0%;
   cursor: pointer;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
-  border-radius: var(--radius-md);
-  border-width: 1px;
-  border-color: var(--color-border-subtle);
-  background-color: var(--color-surface-secondary);
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+  gap: 8px;
+  border-radius: var(--radius-sm);
+  border-width: 0px;
+  background-color: transparent;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 6px;
+  padding-bottom: 6px;
   text-align: left;
   text-decoration-line: none;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-  animation-duration: 200ms;
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+  font-family: inherit;
 }
 .gyramais-rail-leaf:hover:not(:disabled) {
-  border-color: var(--gyra-blue);
-  background-color: var(--gyra-blue-subtle);
+  background-color: var(--color-surface-active);
 }
 .gyramais-rail-leaf:disabled {
   cursor: default;
@@ -7741,25 +8119,29 @@ h6 {
 
 .gyramais-rail-leaf-text {
   display: flex;
+  min-width: 0px;
   flex-wrap: wrap;
   align-items: baseline;
-  gap: 8px;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  row-gap: 0px;
 }
 
 .gyramais-rail-leaf-title {
+  font-size: var(--fs-subheadline);
   font-weight: 500;
-  color: var(--fs-callout);
+  line-height: 18px;
   color: var(--color-text-primary);
 }
 
 .gyramais-rail-leaf-document {
-  color: var(--fs-footnote);
+  font-size: var(--fs-footnote);
   color: var(--color-text-secondary);
-  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
 }
 
 .gyramais-rail-leaf-subtitle {
-  color: var(--fs-footnote);
+  font-size: var(--fs-footnote);
   color: var(--color-text-tertiary);
 }
 
@@ -7773,23 +8155,24 @@ h6 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 10px;
-  border-radius: var(--radius-lg);
+  gap: 8px;
+  border-radius: var(--radius-md);
   border-width: 1px;
   border-style: dashed;
   border-color: var(--color-border-primary);
   background-color: var(--color-surface-secondary);
-  padding: 20px;
+  padding: 16px;
 }
 
 .gyramais-rail-empty-text {
   margin: 0px;
-  color: var(--fs-callout);
+  font-size: var(--fs-subheadline);
+  line-height: 18px;
   color: var(--color-text-secondary);
 }
 .gyramais-rail-empty .gyramais-rail-add {
-  margin-left: 0px;
   margin-top: 0px;
+  margin-left: -8px;
 }
 
 /* ---- Somente leitor de tela -------------------------------------------- */
@@ -7806,32 +8189,37 @@ h6 {
   clip: rect(0, 0, 0, 0);
 }
 
-@media (max-width: 768px) {
-  .gyramais-rail-step-header-right {
-    justify-content: flex-start;
-  }
-}
-
 /* ---- Miniatura (RailMini) ---------------------------------------------
-   A esteira do tamanho de uma linha de lista: uma marca por etapa, ligadas
-   por um fio, mais o resumo em texto. As cores sao as mesmas do modo run. */
+   A esteira do tamanho de uma celula de lista: uma bolinha de 6px por etapa,
+   ligadas por um fio de 1px, no maximo ~120px. As cores sao as do modo run. */
 
 .gyramais-rail-mini {
   display: inline-flex;
-  max-width: 100%;
+  max-width: 120px;
   align-items: center;
-  gap: 3px;
+  gap: 6px;
   vertical-align: middle;
 }
 
+.gyramais-rail-mini.with-summary {
+  max-width: 100%;
+}
+
+.gyramais-rail-mini-track {
+  display: inline-flex;
+  min-width: 0px;
+  align-items: center;
+  overflow: hidden;
+}
+
 .gyramais-rail-mini-mark {
-  height: 8px;
-  width: 8px;
+  height: 6px;
+  width: 6px;
   flex-shrink: 0;
   border-radius: 9999px;
   border-width: 1px;
   border-color: transparent;
-  background-color: var(--color-gray-200);
+  background-color: var(--color-gray-300);
 }
 .gyramais-rail-mini-mark.is-approved {
   background-color: var(--color-success);
@@ -7851,28 +8239,27 @@ h6 {
 }
 .gyramais-rail-mini-mark.is-waiting {
   background-color: var(--color-warning);
-  opacity: 0.55;
 }
-/* Etapa que NAO rodou fica oca: e o vocabulario da tela ("não executou"). */
+/* Etapa que NAO rodou fica oca: e o vocabulario da tela ("não rodou"). */
 .gyramais-rail-mini-mark.is-skipped,
 .gyramais-rail-mini-mark.is-pending {
-  border-color: var(--color-border-secondary);
+  border-color: var(--color-border-strong);
   background-color: transparent;
 }
 
+/* O fio encolhe antes de a fileira estourar os 120px. */
 .gyramais-rail-mini-link {
   height: 1px;
-  width: 6px;
-  flex-shrink: 0;
-  background-color: var(--color-border-secondary);
+  background-color: var(--color-border-primary);
+  flex: 0 1 6px;
+  min-width: 2px;
 }
 
 .gyramais-rail-mini-text {
-  margin-left: 6px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--fs-caption);
+  font-size: var(--fs-footnote);
   color: var(--color-text-tertiary);
 }