/* ==========================================================================
   Generointi-indikaattori — mitä Suunta.ai tekee juuri nyt

   Viivainkielioppi pienimmässä mittakaavassaan (STYLEGUIDE §11.3): aika on
   ruutuja, ei koskaan jatkuva palkki. Mitat ovat ilmekirjasta eivätkä
   arvattuja — `.typing`-merkki on 7×7 px, radius 1, --green, opacity
   1 → .25 → 1, 1,4 s.

   Ilmekirja piirtää tähän kohtaan yhden rivin ("Suunta.ai kirjoittaa"). Tämä
   piirtää monta, koska yksi rivi ei kerro käyttäjälle mitä hänen aikansa
   kuluu (Kare 28.8.2026). Ristiriita on kirjattu:
   docs/tasks/generointi-indikaattori.md.
   ========================================================================== */

.gen-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gen-steps__step {
    display: grid;
    /* Ruutu · lause · kesto. Keskisarake joustaa, reunat eivät: kesto ei saa
       liikkua vaakasuunnassa kun luku vaihtuu, ja ruutusarake pitää lauseet
       samassa linjassa riippumatta siitä onko kestoa. */
    grid-template-columns: 7px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0 10px;
    /* CHATIKKUNA §7 sanoo 13 px, ja STYLEGUIDE §6.2 asettaa sansin
       alarajaksi 13 px. Aiempi 12,5 px alitti molemmat. */
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-3);
}

.gen-steps__cell {
    width: 7px;
    height: 7px;
    /* CHATIKKUNA §7: 7 px nelio, `--radius-cell`. Token eika 1px, jotta
       kaikki kolme merkkia (kirjoittaa, askel, puhujarivi) ovat sama
       muoto — ne ovat sama asia eri hetkella. */
    border-radius: var(--radius-cell);
    /* Poikkeama ilmekirjasta, tietoinen: `.kulku` maalaa kuluneen ruudun
       `--past`-värillä, mutta se on mitoitettu 18 px ruuduille joiden vieressä
       on isompaa tekstiä. Tässä mittakaavassa (7 px ruutu, 12.5 px teksti
       `--ink-3`) `--past` on vaaleassa teemassa `--ink-2` eli TUMMEMPI kuin
       sana, ja painotus kääntyy ylösalaisin: koriste huutaa ja teksti
       kuiskaa. Tehty askel on kuitti, ja kuitti on hiljainen. */
    background: var(--ink-4);
    /* Ruutu keskitetään riviin. Aiempi `translateY(-1px)` teki saman mutta
       luki lintille hover-nostoksi (§13.2) — sama tulos ilman väärää signaalia. */
    align-self: center;
}

.gen-steps__step--now .gen-steps__cell {
    background: var(--green);
    animation: genStepPulse 1.4s infinite;
}

@keyframes genStepPulse {
    50% { opacity: 0.25; }
}

.gen-steps__step--now {
    color: var(--ink-2);
}

.gen-steps__text {
    /* Askel on AINA yksi rivi. Katkaisu tehdään lauseen ja artefaktin
       yhdistelmälle, ei artefaktille erikseen: `max-width: 100%` inline-blockina
       ei katkaise vaan pudottaa artefaktin omalle rivilleen, jolloin rivi
       kaksinkertaistuu ja lista nykii pituutta joka askeleella (mitattu:
       19 px → 38 px pitkällä hakukyselyllä). */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gen-steps__detail {
    color: var(--ink-3);
}

.gen-steps__detail::before {
    content: " · ";
    /* Erotin on typografiaa, ei geometriaa: --ink-4 ei ole tekstiväri. */
    color: var(--ink-3);
}

.gen-steps__time {
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .gen-steps__step--now .gen-steps__cell {
        animation: none;
        /* Ilman sykettä käynnissä oleva ruutu erottuu yhä väristä. */
        opacity: 1;
    }
}