/* ---- The Initiating walk (JourneyNavigation.razor) -------------------- */
/* The strip of the six stages of the Initiating phase, drawn inside the project's own screen while the project is
   in that phase. It is the little brother of the phase strip (`layout.css`, `.phase-navigation`): the same surface,
   the same one-row-of-steps shape and the same treatment for the step being read — the owner asked for the walk to
   look like the bar of phases, one level down. It is a family of its own and it does not re-style the phase strip:
   what it adds is **the state of a step and its pendings**, which is what the walk exists to say.

   The four state modifiers come from the four words of `InitiatingJourneyStates`, in the server's vocabulary:
   `Waiting`, `In progress`, `Complete`, `Blocked`. */

/* **Las dos tiras del recorrido viven juntas en la tarjeta del proyecto**: la de etapas —tercera barra— y la de los
   artefactos de la etapa que se lee —cuarta barra, debajo de la tercera—. Es la instrucción del dueño del 2026-09-30:
   «la barra 4 va debajo de la barra 3». El envoltorio trae el hueco de arriba —el mismo (`--space-sm`) que separa la
   banda del proyecto de las fases— y cierra las esquinas de la tarjeta, porque es el último elemento suyo. */
.journey-bars {
  margin-top: var(--space-3xs);
  background: transparent;
  border-radius: 0;
}

.journey-navigation {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.journey-navigation__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2xs);
  margin: 0;
  /* **A ras del borde de la tarjeta del proyecto**, que es la correccion del dueno del 2026-09-30: «la barra 2 (del
     nombre del proyecto) tiene una card ahi deben iniciar y finalizar todas las demas barras porque si no se ve una
     barra mas ancha que otra como un escalon». La tarjeta rellena 16 px por dentro para su texto, pero lo que manda es
     su borde: la primera etapa empieza donde empieza la tarjeta y la ultima acaba donde acaba. */
  padding: var(--space-3xs) 0;
  list-style: none;
}

.journey-navigation__step {
  display: block;
  flex: 1 0 132px;
  min-width: 132px;
}

.journey-navigation__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  /* **Su alto no es el de un control: es el de lo que dibuja.** Una fila para el número de la fase —en el tamaño de
     una pista— y otra para el icono con el nombre, más el relleno y el borde: unos 39px, por debajo de los 40px de la
     tira de fases, que es lo que el dueño pidió al revisar la tira del recorrido el 2026-09-30. Sin `min-height` de
     control el paso mide su contenido y se puede bajar sin tocar el alto de las otras tiras.
     **Y el relleno es de 4 px, no de 2**, que es la segunda mitad de esa instrucción —«barra 4 … ponerle 4 px mas de
     alto y centrar el contenido»—: los 4 px salen de aquí, dentro del propio boton, y el contenido sigue centrado. */
  min-height: 0;
  height: 100%;
  padding: var(--space-2xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  transition: background var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
}

a.journey-navigation__tab:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-border-strong);
}

.journey-navigation__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* La primera fila de un paso: el número de la fase. Es la instrucción del dueño del 2026-09-30 — «lo que diga Phase va
   en una fila el otro texto con icono abajo»— y por eso el número vive solo, en el tamaño de una pista y sin competir
   con el nombre. */
.journey-navigation__phase {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-tight);
}

/* La segunda fila: el nombre de la etapa con su icono, centrados. */
.journey-navigation__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-width: 0;
}

/* ---- The fourth bar: the artefacts of the stage being read (JourneyNavigation.razor) ---- */
/* **Los botones de los artefactos de la etapa que se lee, repartidos a todo lo ancho.** Es la instrucción del dueño
   del 2026-09-30: «en la fase 2 de initiating dice Initial artefacts pero debe mostrar los botones de esos artefactos
   en la barra 4 … pero los botones deben distribuirse a lo ancho de la barra 4 … igual racionamiento con la fase 4».
   Cada botón lleva el mismo icono que la barra de artefactos del proyecto (`ArtefactIcons`) y lleva a la pantalla de
   su artefacto **leída desde el recorrido**; un artefacto cuya pantalla no existe todavía conserva su botón y no es un
   enlace, con su leyenda diciéndolo. La línea de arriba es lo que separa esta barra de la tercera, como la tira de
   fases se separa de la banda del proyecto. */
.journey-artifacts {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin-top: var(--space-3xs);
  scrollbar-width: thin;
}

.journey-artifacts__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2xs);
  /* **El alto de la barra, aunque no tenga botones.** El dueño pidió que el contenido de la pantalla empiece debajo de
     la altura de esta barra (2026-09-30), y una etapa sin opciones —la de los interesados, la del alcance, la del
     dinero— no puede dejar que lo de abajo suba: el alto es el de un botón más su relleno, tenga o no tenga piezas.
     El botón mide 26px desde el 2026-09-30 —icono de 16, su relleno de 4 a cada lado y su borde—, 4 px más de alto por
     la instrucción del dueño sobre esta barra. */
  min-height: calc(1rem + (2 * var(--space-2xs)) + (2 * var(--border-width)));
  margin: 0;
  /* **A ras del borde de la tarjeta del proyecto**, igual que las barras 3 y 4: las tres empiezan y acaban en la misma
     vertical, que es lo que impide que una se vea mas ancha que otra (2026-09-30). */
  padding: var(--space-3xs) 0;
  list-style: none;
}

/* **Una misma porción para cada botón**, que es lo que los reparte a lo ancho: con seis artefactos, seis porciones
   iguales; con cinco, cinco. `min-width: 0` para que un nombre largo se parta en vez de empujar a los demás. */
.journey-artifacts__item {
  flex: 1 1 0;
  min-width: 0;
}

.journey-artifacts__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  height: 100%;
  min-height: 0;
  /* 4 px de relleno: es lo que hace esta barra 4 px mas alta, y el contenido —el icono y el nombre— sigue centrado. */
  padding: var(--space-2xs);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  transition: background var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
}

a.journey-artifacts__button:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
}

/* El artefacto que se está leyendo: el mismo relleno que el paso de la fase que se lee, para que las cuatro barras
   digan «estás aquí» de la misma manera. */
a.journey-artifacts__button[aria-current="page"] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary-strong);
}

.journey-artifacts__label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
}

/* **La palabra del estado y el número de pendientes ya no se dibujan en el paso.** El dueño los quitó el 2026-09-30
   al pedir el paso de dos filas —«lo que diga Phase va en una fila el otro texto con icono abajo»—: las reglas
   `.journey-navigation__state` y `.journey-navigation__pending` se retiraron con ellos. El estado y lo que la etapa
   debe siguen viniendo del servidor y se leen en la pantalla de la etapa y en la lista de la fase 3, no en la tira. */

/* The step being read wears the filled treatment of the phase strip's own selected step. */
.journey-navigation__tab--selected {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary-strong);
}

/* A stage whose previous one is not complete: it is the normal state of the back half of the walk while the walk
   has not reached it, and it is **not** a door — the step can still be opened (`REC-25`). */
.journey-navigation__tab--waiting {
  color: var(--color-text-muted);
  border-style: dashed;
}

/* **Los estados ya no pintan el paso.** Hasta el 2026-09-30 *En curso* y *Completa* llevaban relleno —el verde del
   sistema— y el dueño lo quitó: «la tercera barra tiene unos botones color verde quitar ese color y dejarlo sin color
   como los otros botones». Lo que queda es el mismo paso llano de la tira de fases, y lo que distingue a un estado de
   otro es **la forma del borde y la palabra**, nunca el color. */
.journey-navigation__tab--in-progress {
  border-color: var(--color-border-strong);
}

.journey-navigation__tab--complete {
  border-color: var(--color-border);
}

/* Blocked is «its condition is met and something behind changed»: nothing produces it yet — the mark of «old»
   arrives with the stored proposals — and it is the one state that keeps a colour, because it is a fault and not a
   state of the walk: the day it happens, the step has to shout. */
.journey-navigation__tab--blocked {
  border-color: var(--color-border-strong);
  background: var(--color-border);
  color: var(--color-text-muted); border-style: dashed;
}

/* The touch minimum the phase strip also serves at the end of its own sheet. */
@media (pointer: coarse) {
  .journey-navigation__tab {
    min-height: 44px;
  }
}

/* ---- One stage of the walk (JourneyStagePage.razor) ------------------ */
/* The screen of a stage: what the stage holds and what its analysis is waiting for, under its legend.
   **Es un marco de artefacto, no un marco propio.** El dueño pidió el 2026-10-01 que esta pantalla llevara la leyenda
   «en el mismo sitio» que la de los artefactos, y eso incluye el marco: por eso **no lleva relleno propio** —el del
   armazón de la aplicación es el mismo que alcanza a las pantallas de artefacto, y con un relleno de más la tarjeta
   caía 16 px adentro y 12 px más abajo que las demás— y separa sus dos piezas con **2 px**, como los catorce marcos de
   artefacto (`layout.css`). */

.journey-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

/* Lo que la etapa dice de sí misma y lo que su corrida produce, con el ritmo de siempre: el único hueco que el dueño
   pidió es el de arriba —los 2 px entre la leyenda y el contenido— y de dentro se encarga esta regla, para que la
   pantalla no se lea apretada. */
.journey-stage__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.journey-stage__recovery {
  display: flex;
  justify-content: flex-start;
}

/* El ancla del título de la etapa, que la pantalla pasa al `PageHeader` compartido como su `HeadingClass` —igual que
   hacen los catorce artefactos—: el título lo dibuja el head, y lo que esta hoja posee de él es el margen que la regla
   propia del head deja. */
.journey-stage__title {
  margin: 0;
}

/* The state of the stage and, when it has one, the server's reason: they travel together because a state without
   its reason is the defect the whole design avoids. */
.journey-stage__state {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
  margin: 0;
}

.journey-stage__state-word {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.journey-stage__reason {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* The gate of the act. It is information about a run and never a lock on the screen: the stage can be read and
   written with the door closed. */
.journey-stage__gate {
  margin: 0;
  font-size: var(--font-size-sm);
}

.journey-stage__gate-blocked {
  color: var(--color-accent);
}

.journey-stage__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.journey-stage__caption {
  padding-bottom: var(--space-2xs);
  color: var(--color-text-muted);
  text-align: left;
}

.journey-stage__table th,
.journey-stage__table td {
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: var(--border-default);
  text-align: left;
}

.journey-stage__row th {
  font-weight: var(--font-weight-semibold);
}

/* ---- The records of a stage (JourneyRecords.razor) ------------------- */
/* Two drawers over one list: what is accepted or discarded and what is answered. They are drawn as one region with
   a subtitle per drawer, which is what keeps a decided proposal and an unanswered gap from being read as the same
   kind of thing. */

.journey-records {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.journey-records__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
}

.journey-records__title {
  margin: 0;
  font-size: var(--font-size-md);
}

/* What the run read, in its own words: the proof that the whole reading happened. */
.journey-records__summary {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* What the model proposed and could not be stored, counted by reason. Nothing is filtered in silence. */
.journey-records__dropped {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-accent);
}

.journey-records__subtitle {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.journey-records__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-records__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}

/* ---- La misma lista, leída como tabla (la segunda vista del interruptor) ----
   Lleva la anatomía de las tablas de los artefactos (`collections.css`): la cabecera apagada, el mismo relleno, la
   misma línea de abajo, el mismo desplazamiento lateral cuando no cabe y el mismo realce de la fila al pasar el
   puntero. Lo que cambia es lo que dice cada columna: la propuesta, a qué artefacto va —con el destino que la persona
   puede cambiar antes de aceptar—, su porqué y los dos actos, que van en la última como en las demás tablas. */
.journey-records__table-wrap {
  overflow-x: auto;
}

.journey-records__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.journey-records__table th,
.journey-records__table td {
  padding: var(--space-sm);
  border-bottom: var(--border-default);
  text-align: left;
  vertical-align: top;
}

.journey-records__table thead th {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.journey-records__table tbody tr:hover {
  background: var(--color-surface-muted);
}

/* El texto de la propuesta es una frase: sin un suelo, el navegador la aprieta a una palabra por línea. */
.journey-records__table-text {
  min-width: 12rem;
  overflow-wrap: anywhere;
}

.journey-records__table-why {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.journey-records__text {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* The why of a proposal, which is what makes it judgeable: an unjudgeable proposal is the defect the walk removes. */
.journey-records__why {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* The line that says a record was deduced from something that has moved: it is drawn where the record is and it never
   hides it (REC-35). */
.journey-records__stale {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-accent);
}

.journey-records__where {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.journey-records__artifact {
  color: var(--color-text);
}

/* The word the server published for the record; it is painted, never interpreted. */
.journey-records__state {
  padding: 0 var(--space-2xs);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  font-size: var(--font-size-xs);
}

.journey-records__actions,
.journey-records__answer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.journey-records__input {
  flex: 1 1 20rem;
  min-width: 12rem;
  height: var(--button-height);
  padding: 0 var(--space-xs);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

/* The three exits of a money doubt, as the server published them. */
.journey-records__select {
  height: var(--button-height);
  padding: 0 var(--space-2xs);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

/* The label of a control of the record: it is read as the name of what the control changes. */
.journey-records__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.journey-records__answered {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-secondary-strong);
}

.journey-records__run {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

/* The gate of the act, said where the act is. */
.journey-records__gate {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-accent);
}

/* ---- La pantalla del analisis (JourneyRecords.razor) ------------------ */
/* **La estadistica ya no se dibuja**: el dueno la retiro el 2026-10-01 con las otras frases que solo anunciaban que no
   hay nada —«AI has suggested 0: 0 accepted, 0 discarded and 0 waiting for a decision. nada de esas leyendas las
   necesito»—. Lo que propuso la corrida se lee en la lista, lo descartado en su cuenta y lo aceptado en su artefacto,
   asi que la linea no decia nada que no estuviera ya a la vista. */
/* La leyenda de lo que impide pasar a las fases siguientes, con las cantidades del servidor, **y solo cuando hay algo
   en el camino**: la frase de que nada estorba se retiro con las demas el 2026-10-01. */
.journey-records__blockers {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: var(--space-xs) 0 0;
}

.journey-records__blockers-title {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.journey-records__blockers-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-records__blocker {
  display: flex;
  align-items: baseline;
  gap: var(--space-3xs);
  font-size: var(--font-size-sm);
}

/* El numero primero, que es lo que el dueno pidio: «hay que explicar pero en cantidades». */
.journey-records__blocker-count {
  min-width: 1.25rem;
  padding: 0 var(--space-3xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.journey-records__blocker-text {
  color: var(--color-text-muted);
}

/* Los descartes: cerrados al entrar, con su cuenta en el boton que los despliega. */
.journey-records__discards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: var(--border-default);
}

/* El mensaje de bloqueo de una etapa: «Fase 4 bloqueada por…» con las razones contadas por el servidor. */
.journey-stage__blocked {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: var(--space-xs) 0 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: var(--border-default);
  border-left: var(--border-width) solid var(--color-error-border);
  border-radius: var(--radius-lg);
}

.journey-stage__blocked-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.journey-stage__blocked-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-stage__blocker {
  display: flex;
  align-items: baseline;
  gap: var(--space-3xs);
  font-size: var(--font-size-sm);
}

.journey-stage__blocker-count {
  min-width: 1.25rem;
  padding: 0 var(--space-3xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.journey-stage__blocker-text {
  color: var(--color-text-muted);
}

/* **Un boton bloqueado**: se ve, dice por que no se puede —la razon del servidor, con su cuenta— y no es un enlace.
   Es lo que el dueno pidio para la barra 4 de una etapa bloqueada: los botones se despliegan y quedan bloqueados. */
.journey-artifacts__button--blocked {
  border-color: var(--color-border);
  border-style: dashed; background: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ---- Las dos columnas de una fase que analiza (JourneyAnalysisColumn) ---- */
/* **50/50, y el boton de cada columna arriba y a la derecha de la suya.** Es la instruccion del dueno del 2026-09-30
   para las fases 5 y 6: a la izquierda lo que la fase tiene —el alcance aceptado, el listado de inversion— y a la
   derecha su analisis. La columna del analisis es la misma pieza del listado que analiza, asi que no trae estilo propio
   de listado: solo su sitio. Se apila en pantallas estrechas, donde dos columnas no caben. */
.journey-analysis {
  min-width: 0;
}

.scope-page__columns,
.investment-page__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  min-width: 0;
}

@media (max-width: 1080px) {
  .scope-page__columns,
  .investment-page__columns {
    grid-template-columns: minmax(0, 1fr);
  }
}