/* ============================================================
   LEVER — estilos locales del módulo. Prefijo .lv-
   Cero overrides de .r-, cero valores crudos: todo sale de tokens.

   ------------------------------------------------------------
   EL PATRÓN DE COLUMNA — el mismo que `app/intel.css`
   ------------------------------------------------------------
   Estos dos módulos son los más angostos del OS (400/480 y
   360/440) y los dos son lo mismo: una lista de cosas que se
   juzgan, con su procedencia. Si cada uno resolviera la columna a
   su manera el OS se vería armado por dos manos, así que la
   resuelven igual, con tres reglas. Cambiar una aquí es cambiarla
   allá:

   1. MANDA EL PANEL, NO LA VENTANA. La raíz del módulo declara
      `container-type: inline-size` y toda decisión de ancho es
      `@container`. Ni un `@media (max-width)` — dentro de un panel
      la ventana miente: mide 1280 mientras el módulo mide 360.
      Y como el panel se arrastra, la consulta de contenedor
      reacciona en vivo; una de ventana no se enteraría nunca.

   2. LA COLUMNA ES EL ESTADO NORMAL; EL RENGLÓN SE GANA. Antes lo
      apilado era la excepción de móvil (`max-width: 720`). Hoy
      TODO ancho declarado del panel cae del lado angosto, así que
      lo apilado es la base y el renglón de dos columnas aparece
      solo cuando Robbie ensancha el panel a propósito (520 de
      contenedor, el mismo número en los dos archivos).

   3. LA TARJETA NO TIENE SEGUNDO LAYOUT. Título arriba, acciones
      en su propio renglón, siempre. El layout de escritorio
      —acciones al lado del título— servía a una página de 1240 que
      ya no existe; mantener dos formas de la misma tarjeta para un
      ancho que solo se alcanza arrastrando es pagar dos veces.

   ------------------------------------------------------------
   El único acento de la vista es la métrica de la cabeza (las
   oportunidades por juzgar, con `r-t-accent`). Aquí abajo no hay un
   segundo acento: los semánticos —el punto info de una nueva, el ok de
   una que interesa, el crit de un motor caído— son señal, no
   decoración.

   La idea de la tarjeta: el pie tiene alto reservado aunque esté
   vacío. Revelar la procedencia no cambia el alto de nada, así que
   la lista no brinca bajo el cursor.
   ============================================================ */

/* ------------------------------------------------------------
   4. LO QUE TIENE QUE CABER ES EL MARCO; LA LISTA SE RECORRE

   La cuarta regla del patrón, y nació de una medición: con cinco
   oportunidades en la pestaña visible el cuerpo del panel se pasaba
   **358 px a 1280×800, 258 a 1440×900 y 158 a 2560×1000** (el panel
   mide 580 en los tres, su techo). Con la semilla pelada —dos
   oportunidades sin juzgar— cabía justo, con 0 px de sobra en los tres
   anchos. O sea que el módulo no estaba roto: estaba **al borde**, y
   cualquier día con tres sueños encima lo tiraba.

   Y no hay recorte de tarjeta que lo arregle, porque la lista no tiene
   techo POR DISEÑO: `interesa` es inventario que se acumula y
   `descartada` es la memoria del deduplicador, que no se borra nunca
   (regla 3). Una lista sin techo dentro de una vista sin scroll es una
   promesa que se rompe el segundo mes.

   Así que la sección es **cabeza + barra**, que caben siempre, y la
   lista es el contenido de esa sección: se recorre en su propia pista.
   Es el mismo reparto que la línea de tiempo de Workspace
   (`.wk-tl__sc`) y las tres segundas páginas del OS: el marco mide el
   panel, y lo que no tiene techo scrollea por dentro. La barra de
   secciones que `CLAUDE.md` pide para esto **ya existe** aquí — es el
   segmentado Nuevas / Interesa / Descartadas.

   El recorte de la tarjeta se hizo igual, pero por otra razón: no para
   caber, sino para que en la pista quepan tres tarjetas en vez de dos.
   ------------------------------------------------------------ */

/* `height: 100%` es el eslabón que le dice a la vista cuánto mide, y no es
   decoración: el cuerpo del panel declara `flex-shrink: 0` en sus hijos cuando
   hay alta (`ron.css` § 33d) y con `flex-basis: auto` el tamaño hipotético sale
   de la propiedad `height`. Lever hoy no declara alta, así que la regla no le
   aplica y sin esto también funcionaría — se escribe igual porque el día que
   declare una, o que el hueco quede prendido por otro módulo, el módulo dejaría
   de caber sin que nada más cambiara. Es la misma línea, con el mismo comentario,
   que `#viewWork`. */
#viewLever {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* ---------- La raíz es el contenedor ----------
   `#lvRoot` es el `.os-page` del módulo, o sea la caja que el cuerpo
   del panel le da. Medirla a ella es medir el panel sin que el módulo
   tenga que saber que está en un panel.

   `container-type: inline-size` trae contención de layout, así que
   esta caja pasa a ser el bloque contenedor de cualquier absoluto de
   adentro. Adentro solo hay absolutos LOCALES (el marcador de
   `.r-seg`, anclado a su propia caja relativa), así que no mueve
   nada. */
.lv-root {
  container-type: inline-size;
  container-name: lever;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* En una columna flex TODO cede por omisión, y lo que cede se estruja sin
   avisar: un contenedor con `overflow` tiene mínimo automático 0 y se aplasta
   hasta desaparecer cuando la lista empuja. Se declara al revés —nada cede, y
   quien crece lo pide por su nombre— igual que en `#relRoot` y `#gwRoot`.
   `:where` deja la especificidad en cero para que la regla de cada pieza le
   gane sin pelear. */
:where(.lv-root) > * { flex: 0 0 auto; }

/* ---------- Cabeza ----------
   Base: la métrica arriba y lo que el módulo dice debajo, cada uno con
   el renglón completo. En una columna de 360 la métrica y un párrafo
   de 34ch lado a lado dejaban al numeral de matriz de puntos en 30px
   de ancho —y como el SVG trae `width`/`height` en atributos y el
   reset del sistema le pone `max-width: 100%`, no se encogía: se
   APLASTABA, con la altura intacta y los dígitos en vertical—. De ahí
   el `flex: 0 0 auto` de la métrica: la cifra que manda no cede ancho,
   ni un píxel. */

.lv-head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
/* El nombre del módulo ya no se dibuja aquí (vive en la cabecera del
   panel), así que el numeral no necesita separarse de nada arriba. */
.lv-metric { margin: 0; flex: 0 0 auto; }
.lv-head > :first-child { min-width: 0; }

/* Cuándo soñó: dato de fondo, en voz baja. */
.lv-when { margin: 0; }

/* Cuando el módulo NO puede trabajar (sin motor, sin nada que citar) el
   renglón se pone en palabras completas: es un estado, no clutter. */
.lv-say {
  margin: 0;
  color: var(--ink-3);
  line-height: var(--lh-snug);
}

/* El renglón se gana. 520 es el ancho de contenedor donde la métrica
   (≈120) y un párrafo de 34ch (≈240) caben lado a lado con aire de
   sobra en vez de justo; más apretado que eso, el párrafo se vuelve
   una tira de cinco renglones al lado de un numeral de dos, que es
   peor que apilarlos. El mismo número está en `app/intel.css`. */
@container lever (min-width: 520px) {
  .lv-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: var(--s-6);
    margin-bottom: var(--s-8);
  }
  .lv-say {
    justify-self: end;
    max-width: 34ch;
    text-align: right;
  }
  .lv-when { justify-self: end; white-space: nowrap; }
}

/* ---------- Barra ----------
   Envuelve en vez de scrollear: `.r-toolbar` resuelve el desborde con
   `overflow-x: auto` y barra oculta, que en una pantalla ancha es
   discreto y en una columna de 360 es una fila de botones cortada sin
   una sola pista de que siga. Envolver dice la verdad. */

.lv-bar {
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
/* LÁPIDA: `.lv-bar__grow`, el separador elástico entre el segmentado y el
   botón de soñar. Ver la nota gemela de `app/intel.css`: con la barra
   envolviendo, el que se iba al segundo renglón era él, y se llevaba el botón
   al canto derecho de un renglón vacío. La barra tiene dos piezas y las dos
   son de la misma lista: no había nada que separar. */

/* ---------- El sueño en vuelo ----------
   Canto punteado a la izquierda, como la propuesta de Growth: lo que
   está pasando aquí todavía no es dato. */

.lv-live {
  margin-bottom: var(--s-6);
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  border-left: var(--stroke-2) dashed var(--hairline-strong);
  display: grid;
  gap: var(--s-2);
  animation: os-slide-in var(--d-base) var(--ease-out) both;
}
.lv-live__h { display: flex; align-items: center; gap: var(--s-2); margin: 0; }

/* La cola del texto que va llegando: seña de vida, no lectura. Una sola
   línea recortada, para que el bloque no crezca a saltos mientras
   escribe. */
.lv-live__raw {
  margin: 0;
  min-height: var(--s-5);
  max-height: var(--s-10);
  overflow: hidden;
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

/* ---------- Error de motor ---------- */

.lv-err {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0 0 var(--s-6);
  color: var(--ink-2);
}
.lv-err .r-status { flex: 0 0 auto; align-self: center; }

/* ---------- Vacío ----------
   Sin `max-width` ni `margin-inline: auto`: el ancho lo da el panel y
   centrar dentro de una columna que ya es angosta no centra nada, solo
   deja al texto sin dónde caer. */

/* Ahora que el marco mide el panel, el vacío se queda con el alto que le sobra
   y se centra en él: antes colgaba del rótulo de la barra con media pantalla
   muerta debajo, porque el módulo medía su contenido. */
.lv-blank {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--s-10) var(--s-2);
  text-align: center;
  display: grid;
  align-content: center;
  gap: var(--s-3);
  justify-items: center;
}

/* ---------- La lista ----------
   La única pista que se recorre del módulo (regla 4, arriba). `contain` corta
   el encadenamiento: llegar al final de la lista no arrastra al panel ni a la
   conversación de atrás. No lleva `tabindex` —las tarjetas ya son enfocables,
   así que recorrer con el teclado es tabular y el navegador trae la enfocada a
   la vista solo. */
.lv-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  border-top: var(--stroke) solid var(--hairline);
}

.lv-o {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-2) var(--s-3);
  border-bottom: var(--stroke) solid var(--hairline);
  transition: background var(--d-fast) var(--ease);
  animation: os-slide-in var(--d-base) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
.lv-o:hover, .lv-o:focus-visible, .lv-o:focus-within { background: var(--surface-2); }
.lv-o:focus-visible { outline: var(--stroke) solid var(--ink-4); outline-offset: calc(var(--stroke) * -1); }

/* Una descartada sigue estando: es lo que evita que la idea vuelva. Se
   lee más callada, sin tacharla — no es un error, es un veredicto. */
.lv-o--descartada .lv-o__t,
.lv-o--descartada .lv-o__nt { color: var(--ink-3); }
.lv-o--descartada .lv-o__w { color: var(--ink-4); }

/* Renglón de título con rejilla explícita, y sin variante ancha (regla
   3 del patrón): punto · título · contador, en UN renglón. Con flex y
   `wrap` el punto se quedaba solo en la primera línea y el contador en
   una tercera: cuatro renglones para una cabeza.

   ACÁ VIVÍA UN SEGUNDO RENGLÓN, el de las acciones (`grid-area: 2 / 1 / 3 /
   4`), y se fue al pie. Costaba 38 px por tarjeta —30 de la fila más 8 de
   `row-gap`— reservados en TODA la lista para algo que en reposo no se ve, que
   es exactamente lo que el proyecto llama clutter: espacio que no dice nada.
   Con cinco tarjetas eran 190 px, o sea la mitad de lo que el módulo se pasaba.

   Y de paso se arregla el orden de lectura que el comentario anterior daba por
   perdido («se leen antes del argumento, que no es el orden ideal, pero moverlas
   al pie pedía otro contenedor»): el contenedor es `.lv-o__foot`, y ahí el
   veredicto queda después del porqué y del siguiente paso, que es lo que se lee
   para darlo. */
.lv-o__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--s-3);
  align-items: baseline;
  min-width: 0;
}
.lv-o__top > .r-status { align-self: center; }
.lv-o__c { align-self: center; }

.lv-o__t {
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--tr-tight);
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Cuántas filas del OS la sostienen. Es el número que dice si es humo, y
   por eso vive en la tarjeta y no en un title: cero no puede existir
   —una oportunidad sin citas no se guarda—, así que este número siempre
   dice algo. */
.lv-o__c { flex: 0 0 auto; }

.lv-o__w {
  margin: 0;
  color: var(--ink-2);
  line-height: var(--lh-body);
  /* Dos renglones: el porqué es un argumento corto, no un párrafo. El
     texto completo queda en el title. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Con las referencias adentro, el porqué se lee entero. El recorte de dos
   renglones tenía sentido cuando el argumento vivía solo y las citas
   estaban abajo; ahora recortar el párrafo es recortar la evidencia — y
   una referencia partida a la mitad por el clamp no se puede picar.

   No crece sin freno: `PORQUE_MAX` topa el campo en 180 caracteres, o sea
   dos renglones en el techo y cuatro en el peor ancho.

   Una oportunidad VIEJA no entra aquí —no tiene anclas, no lleva la
   clase— y conserva su recorte de dos renglones tal cual: sus citas
   siguen viviendo completas en la tira, así que ahí recortar no pierde
   nada. */
.lv-o__w--ancla {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* ---------- La referencia anclada en la frase ----------
   La hermana inline de `.lv-ref`, y a propósito NO se le parece: la
   pastilla es evidencia que se enumera, esto es una palabra de la propia
   oración. Un porqué salpicado de pastillas se lee como barra de
   herramientas y deja de leerse como explicación.

   El subrayado va con `text-decoration` y no con `border-bottom` porque la
   referencia puede partirse entre dos renglones y el borde solo subrayaría
   el último trozo. `--trace` es el token de TRAMA —algo que se mira, no
   que se lee—, que es justo lo que tiene que ser una marca que acompaña al
   texto sin competirle. */
.lv-in {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--trace);
  text-decoration-thickness: var(--stroke);
  text-underline-offset: 0.22em;
  border-radius: var(--r-xs);
  transition: color var(--d-fast) var(--ease),
              background-color var(--d-fast) var(--ease),
              text-decoration-color var(--d-fast) var(--ease);
}

/* Lo secundario se revela, y sin mover el texto: cambian color, fondo y
   punteado; la caja no. Nada de padding ni de sombra a propósito — el
   padding recompondría la frase bajo el cursor. */
.lv-in:hover,
.lv-in:focus-visible {
  color: var(--ink);
  background: var(--surface-sunk);
  text-decoration-style: solid;
  text-decoration-color: var(--ink-3);
}
.lv-in:focus-visible { outline: none; }

/* La fila citada ya no está. El nombre guardado se sigue leyendo —eso es
   el punto de guardarlo— y quien dice que es memoria es el trazo, a rayas.

   La tinta es `--ink-3` y NO `--ink-4`, que es lo que usa la pastilla de
   la tira: en una pastilla suelta ese contraste se tolera, dentro de una
   frase no —es texto que hay que leer, y el sistema separa la TRAMA
   (`--trace`, algo que se mira) de la TINTA de lo secundario (`--ink-3`,
   algo que se lee)—. El punteado sí se queda en `--trace`: ahí la trama es
   exactamente el trabajo. */
.lv-in--ido {
  color: var(--ink-3);
  text-decoration-style: dashed;
  text-decoration-color: var(--trace);
}
.lv-in--ido:hover,
.lv-in--ido:focus-visible {
  color: var(--ink-2);
  background: none;
  text-decoration-style: dashed;
  text-decoration-color: var(--ink-3);
}

/* Solo la que tiene puerta se ofrece. Hoy los cinco tipos la tienen, así que
   en la práctica quien se queda sin cursor es la referencia IDA —la fila que
   ya no está en el store— y la que apunta a un módulo cuyo archivo no cargó.
   El estado sigue existiendo por eso: se lee igual, pero no finge que lleva
   a algún lado. */
.lv-in--ir {
  /* La manita se queda AQUÍ a propósito, contra la regla general de que un
     control de macOS usa flecha. La regla vale cuando hay otra señal de que
     algo se pica —un hover, un borde, un fondo—; esto no la tiene, y era su
     única. Quitarla dejó un elemento clicable indistinguible de un rótulo.
     El arreglo de fondo es darle hover y entonces sí volver a la flecha. */
  cursor: pointer;
}

/* Una descartada se lee más callada, y sus anclas con ella: si la
   referencia conservara la tinta de una oportunidad viva, el renglón se
   leería más fuerte que el título que lo encabeza. */
.lv-o--descartada .lv-in { color: var(--ink-4); }

/* ---------- El pie: el siguiente paso y el veredicto ----------
   Un renglón, dos cosas, y la razón de que compartan es geométrica: el paso
   mide 21 px y las acciones 30, así que juntos miden 30 —lo que medían las
   acciones solas— y el paso viaja gratis. Separados costaban 59.

   El paso se lleva el ancho sobrante y el veredicto se queda con su caja: dos
   botones de icono son 92 px, así que en el ancho MÍNIMO declarado (400 de
   panel → 358 de caja) al paso le quedan 238, o sea sus dos renglones
   completos. Con «Reconsiderar» —el único que conserva la palabra, porque no
   tiene glifo— son ~105 px y al paso le quedan 225. */
.lv-o__foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.lv-o__foot > .lv-o__n { flex: 1 1 auto; }
.lv-o__foot > .lv-o__ops { flex: 0 0 auto; }

/* El siguiente paso. Va siempre a la vista porque es la carga útil del
   módulo —lo que se puede hacer—. Dos renglones y no una línea
   recortada: en 360px «Proponer agenda de 2 horas a Mar…» deja de ser
   un paso y se vuelve un acertijo. */
.lv-o__n {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: 0;
  min-width: 0;
  color: var(--ink-3);
}
.lv-o__n .r-ico { flex: 0 0 auto; align-self: center; }
.lv-o__nt {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Lo que se revela ----------
   Dos piezas con el mismo velo: las acciones (en el pie, compartiendo renglón
   con el siguiente paso) y la procedencia (su propio renglón). Las dos ocupan
   su lugar aunque estén invisibles, así que la tarjeta mide lo mismo abierta
   que cerrada y la lista no brinca bajo el cursor.

   Lo que cambió es CUÁNTO se reserva, no si se reserva: las acciones ya no
   estrenan un renglón, se meten en uno que ya existía. Reservar sigue siendo
   la regla; reservar un renglón entero para eso era el desperdicio. */

.lv-veil {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-fast) var(--ease);
}
.lv-o:hover .lv-veil,
.lv-o:focus-within .lv-veil,
.lv-o:focus-visible .lv-veil { opacity: 1; pointer-events: auto; }

/* ---------- Procedencia: el corazón del módulo ----------
   Renglón propio y completo. El alto se reserva con el de la pastilla para
   que revelarla no mueva nada. */

.lv-from {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-1) 0 0;
  min-width: 0;
  min-height: 24px;
}

/* No es un `.r-chip`, a propósito, y no es capricho: un chip en este sistema
   es una etiqueta —dice qué ES algo—, y esto es evidencia, que tiene que
   leerse más callado que el título que sostiene. Además lleva icono y se
   recorta con puntos suspensivos, dos cosas que un chip no hace. Se le da
   el alto de la pastilla más chica del sistema (`.r-index`, 24px) para que
   no aparezca una cuarta altura de pastilla en el OS.

   El techo es `min(34ch, 100%)` y no `34ch` a secas: 34ch de `--t-micro`
   son ~187px, o sea que en una columna de 340 la pastilla se recortaba a
   media evidencia teniendo el renglón entero libre. El `100%` deja que use
   lo que hay; el `34ch` sigue evitando que una sola cita se coma un
   renglón de 900 cuando el panel está arrastrado. */
.lv-ref {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: min(34ch, 100%);
  min-width: 0;
  height: 24px;
  padding-inline: var(--s-2);
  border: var(--stroke) solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
}
.lv-ref .r-ico { flex: 0 0 auto; color: var(--ink-3); }
.lv-ref__t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La fila citada ya no existe en el OS. El label guardado sigue siendo
   legible —eso es el punto de guardarlo— pero el punteado dice que es
   memoria, no un renglón vivo. Una procedencia que miente es peor que
   una que envejece. */
.lv-ref--ido {
  border-style: dashed;
  color: var(--ink-4);
}
.lv-ref--ido .r-ico { color: var(--ink-4); }

/* La cita que sí se puede abrir. Solo el cursor y el aro de foco: la
   pastilla ya se ve, y darle un fondo propio la volvería un botón dentro
   de un renglón de evidencia. La que no tiene puerta —hoy, cualquier fila
   ida— se queda exactamente como estaba. */
.lv-ref--ir:hover { border-color: var(--hairline-strong); color: var(--ink); }
.lv-ref--ir:focus-visible {
  outline: var(--stroke) solid var(--ink-4);
  outline-offset: var(--stroke);
}

/* ---------- Acciones ---------- */

.lv-o__ops {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  min-width: 0;
}

/* ---------- Movimiento reducido ----------
   La animación se apaga completa, no se acorta: el retardo en cascada no
   lo toca la regla global de ron.css y los renglones se quedarían
   invisibles su turno. Y con el movimiento apagado lo revelado deja de
   desvanecerse: aparece de golpe, que es lo correcto — no se queda
   escondido. */
@media (prefers-reduced-motion: reduce) {
  .lv-o, .lv-live { animation: none; }
  .lv-o, .lv-veil, .lv-in { transition: none; }
}

/* Sin hover no hay revelación: en táctil lo secundario se queda visible. */
@media (hover: none) {
  .lv-veil { opacity: 1; pointer-events: auto; }
}