/* ============================================================================
   SPICA · css/demos/sol-call.css · ESCENA sol-call (r15, punto 16)
   La cola de llamadas SALIENTES de la fila 5 de 1.1 Lead Generation.

   Por que hoja propia y no dentro de css/demos/sol.css: sol.css la cargan las
   CUATRO hojas estandar (1.1, 1.2, 1.3 y 3.1) y esta escena vive en una sola.
   Se enlaza solo en solutions/lead-generation/index.html, justo despues de
   sol.css, de la que hereda el chasis entero (.demo--sol, .sol-sheet,
   .sol-head, .sol-foot, .sol-in, los tokens --ss-* y los chips del motor).
   Aqui dentro solo esta lo propio de la escena, con el prefijo .scl-.

   Reglas que se cumplen aqui dentro, las mismas de sol.css:
   · cero animaciones CSS en bucle. La fila que esta llamando es un ESTADO
     QUIETO con el auricular ya dibujado, nunca un latido: insinuar un
     marcador automatico rompe el hallazgo rojo C2 y ademas late.
   · geometria en cqw contra el container inline-size de .sol-sheet. Ni un
     getBoundingClientRect.
   · ningun token se redefine; lo local hereda --ss-* de sol.css.
   · la celda de estado apila sus hijos en la MISMA celda de grid, asi el
     relevo "Calling" por "Callback Thu" no mueve un pixel de la fila.
   · estado compuesto: seccion 6 de esta hoja.
   ========================================================================== */

/* ============================================================================
   1 · LA HOJA Y SU CABECERA
   ========================================================================== */
/* 600 y no 560 como sus hermanas: la segunda linea de la fila mas larga
   ("Property manager, Alder Grove Properties · La Jolla, CA") mide 387 px en
   mono a 11,2 px, y a 560 se cortaba en "LA J...", que es justo la ciudad, o
   sea la prueba de que la llamada es de Estados Unidos. Medido, no supuesto. */
.demo--sol-call .scl-sheet { width: min(600px, 100%); }

/* rotulo mono a la izquierda, ranura del chip arriba a la derecha */
.demo--sol-call .scl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 1.5rem;
}
.demo--sol-call .scl-slot {
  display: flex;
  align-items: center;
  flex: none;
}

/* ============================================================================
   2 · LA COLA
   ========================================================================== */
.demo--sol-call .scl-list {
  display: grid;
  gap: clamp(0.18rem, 0.9cqw, 0.34rem);
  align-content: start;
}

.demo--sol-call .scl-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.4rem, 1.5cqw, 0.6rem);
  padding: 0.3rem 0.5rem;
  border-radius: 9px;
  transition:
    opacity 0.34s var(--ease-out) var(--ss-d, 0ms),
    transform 0.4s var(--ease-scene) var(--ss-d, 0ms),
    background 0.4s var(--ease);
}

/* la inicial. El anillo del "al telefono" entra y sale en 220 ms, que es la
   salida corta que pide el guion. */
.demo--sol-call .scl-row__dot {
  width: clamp(20px, 5.2cqw, 25px);
  height: clamp(20px, 5.2cqw, 25px);
  border-radius: 50%;
  background: var(--ss-ghost);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--ss-micro);
  font-weight: 620;
  color: var(--ss-soft);
  flex: none;
  transition:
    background 0.34s var(--ease),
    color 0.34s var(--ease),
    box-shadow 0.22s var(--ease);
}

.demo--sol-call .scl-row__id {
  display: grid;
  line-height: 1.3;
  min-width: 0;
}
.demo--sol-call .scl-row__id b {
  font-size: var(--ss-small);
  font-weight: 560;
  color: var(--ss-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.34s var(--ease);
}
.demo--sol-call .scl-row__id small {
  font-family: var(--font-mono);
  font-size: var(--ss-micro);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ss-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* hoja estrecha (telefono): la segunda linea se parte en vez de cortarse, para
   que no se pierda ni el cargo ni la ciudad, que es lo que dice que la llamada
   sirve a los dos modelos */
@container (max-width: 520px) {
  .demo--sol-call .scl-row__id small { white-space: normal; }
}

/* la celda de estado: todos sus hijos comparten celda de grid, asi el relevo
   de un rotulo por un chip no reflowea la fila ni empuja a las hermanas */
.demo--sol-call .scl-row__state {
  display: grid;
  justify-items: end;
  align-items: center;
  min-height: 1.45rem;
  min-width: clamp(70px, 18cqw, 92px);
}
.demo--sol-call .scl-row__state > * { grid-area: 1 / 1; }
/* el chip de la fila no hereda el stagger de la lista: entra cuando lo dice el
   guion, no 560 ms mas tarde por estar en la quinta fila */
.demo--sol-call .scl-row .dm-chip { transition-delay: 0ms; }

/* ---- los dos estados de fila ------------------------------------------------ */

/* al telefono: anillo del acento en la inicial */
.demo--sol-call .scl-row.is-live .scl-row__dot {
  background: var(--ss-accent-soft);
  color: var(--ss-accent-text);
  box-shadow: 0 0 0 2px var(--ss-accent);
}

/* resuelta: la fila entera pasa a tinta y la inicial se llena del acento */
.demo--sol-call .scl-row.is-done { background: var(--ss-accent-soft); }
.demo--sol-call .scl-row.is-done .scl-row__dot {
  background: var(--ss-accent);
  color: #fff;
}
.demo--sol-call .scl-row.is-done .scl-row__id b {
  color: var(--ss-ink);
  font-weight: 600;
}
/* la fila resuelta pasa a tinta ENTERA, tambien la segunda linea. No es solo
   estetica: medido componiendo los alfas en canvas, --ink-faint sobre el tinte
   del acento cae a 4,42:1 y no pasa AA. Con --ink-soft sube a 6,57:1. */
.demo--sol-call .scl-row.is-done .scl-row__id small { color: var(--ss-soft); }

/* ============================================================================
   3 · EL ROTULO "CALLING" Y EL AURICULAR
   La flecha va hacia AFUERA: es una llamada saliente hecha por una persona.
   Ni onda de audio, ni transcripcion, ni campana de llamada entrante.
   ========================================================================== */
.demo--sol-call .scl-call {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-family: var(--font-mono);
  font-size: var(--ss-micro);
  font-weight: 560;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ss-accent-text);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.28s var(--ease-out),
    transform 0.32s var(--ease-scene);
}
.demo--sol-call .scl-call.is-on { opacity: 1; transform: none; }

.demo--sol-call .scl-ico {
  width: clamp(13px, 3.4cqw, 16px);
  height: clamp(13px, 3.4cqw, 16px);
  flex: none;
}
.demo--sol-call .scl-ico svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* cada trazo se dibuja UNA vez al entrar: el auricular primero, la flecha
   despues. Al terminar se queda quieto para siempre. */
.demo--sol-call .scl-ico path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.5s var(--ease-out);
}
.demo--sol-call .scl-ico path:nth-child(2) { transition-delay: 0.16s; }
.demo--sol-call .scl-ico path:nth-child(3) { transition-delay: 0.26s; }
.demo--sol-call .scl-call.is-on .scl-ico path { stroke-dashoffset: 0; }

/* ============================================================================
   4 · LOS CHIPS DE RESULTADO
   ========================================================================== */
/* "Booked" es el resultado que la escena viene a contar: acento de la hoja.
   El texto va oscurecido un paso hacia --slate, que es el precedente literal de
   la casa para un chip sobre su propio tinte (.dm-chip--go, sol.css). Medido:
   el violeta desnudo sobre la fila resuelta da 4,22:1 y no pasa AA (son DOS
   tintes del 12 % apilados, el de la fila y el del chip); oscurecido da 5,55:1.
   Sin --violet-vivid, que SPEC-UXUI-R14 8.3 prohibe dentro de escena. */
.demo--sol-call .scl-booked {
  --dm-accent: var(--ss-accent);
  color: color-mix(in srgb, var(--ss-accent-text) 70%, var(--slate));
}
/* devolucion y turno son estados de tramite: la misma tinta apagada del motor */
.demo--sol-call .scl-callback,
.demo--sol-call .scl-next {
  --dm-accent: var(--ss-faint);
  color: var(--ss-soft);
}

.demo--sol-call .scl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 1.6rem;
  align-items: center;
}

/* ============================================================================
   5 · TELEFONO
   ========================================================================== */
@container (max-width: 380px) {
  .demo--sol-call .scl-row { padding: 0.28rem 0.36rem; }
  .demo--sol-call .scl-row__state { min-width: 64px; }
}

/* ============================================================================
   6 · ESTADO COMPUESTO (?static y reduced-motion)
   El motor congela TODAS las transiciones con .is-instant, asi que un trazo
   que se dibuja por stroke-dashoffset se quedaria invisible: hay que dejarlo
   escrito, igual que sol.css hace con .ss-check. La fila 4 queda en "Calling"
   con el auricular ya dibujado y quieto, que es el entregable.
   ========================================================================== */
.demo--sol-call.is-instant .scl-call.is-on .scl-ico path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .demo--sol-call .scl-row,
  .demo--sol-call .scl-call { transition: none; }
}