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

   Tres piezas viven aquí, y las tres ocupan EL MISMO CANTO DE ABAJO
   del centro —el hueco entre la conversación y la caja de prompt—,
   en este orden de cercanía al prompt:

     · EL BRIEFING (`.hm-brief`)  — lo que el agente notó hoy. Solo
       existe con la conversación vacía; es lo primero que se ve al
       abrir el OS.
     · LA BANDEJA DEL TURNO (`.hm-turn`) — lo que el agente acaba de
       pedir (abrir un panel) y lo que acaba de escribir en disco,
       con su bote para deshacerlo.
     · EL LIENZO VIVO (`.hm-canvas`) — lo que el OS reconoce de lo
       que estás escribiendo, y una propuesta de captura.

   Que compartan canto no es casualidad y es lo que explica sus
   reglas de exclusión: el briefing se calla mientras el lienzo
   habla, y la bandeja se limpia al empezar otro turno. El hueco es
   uno solo, así que quien tenga algo más urgente que decir se lo
   queda.

   El resto de Home (la columna, el log, el composer) sigue en
   `os.css` con prefijo `.os-`: esto son piezas nuevas, no un
   rediseño de las que ya estaban.

   ------------------------------------------------------------
   POR QUÉ NADA DE ESTO SUBIÓ AL DESIGN SYSTEM
   ------------------------------------------------------------
   El criterio de `CLAUDE.md` es «sube lo que más de una superficie
   necesita o va a necesitar», y hoy el OS tiene UNA sola superficie
   que conversa: el centro. El invocador se fue con el rediseño, y
   LEVER y Growth le piden al motor un JSON de una pasada — no
   negocian permisos ni capturan por inferencia. Subir la tarjeta de
   permiso al sistema con un solo consumidor ensucia la
   especificación tanto como no subir la que sí hace falta.

   La señal para subirla está escrita y es concreta: el día que una
   segunda superficie tenga que pedirle permiso a Robbie —o mostrar
   qué escribió en disco—, `.hm-ask` y `.hm-did` se vuelven `.r-ask`
   y `.r-did` en ron.css, y aquí se quedan solo sus huecos. Lo que sí
   sale ya del sistema es todo lo que estas piezas usan por dentro:
   `.r-status`, `.r-confirm`, `.r-engine`, `.r-label`, `.r-btn`.

   ------------------------------------------------------------
   POR QUÉ EL LIENZO VIVE DENTRO DEL LOG Y NO DEBAJO DE ÉL
   ------------------------------------------------------------
   El invariante duro del encargo es que el lienzo NO puede mover la
   caja de prompt: si crece y empuja el compositor, escribir se
   vuelve marear.

   Un hermano entre `#chatLog` y `.os-composer` cumple eso en Home
   —la columna tiene alto definido y el log encoge— pero NO dentro
   del invocador, donde `.iv-guest` es `height: auto` con un techo:
   ahí un hermano nuevo estira el recuadro, que está centrado, y el
   compositor se mueve medio alto de la tira.

   Dentro del log no hay ese caso. El log es un contenedor de scroll
   en las dos casas, así que una ficha del lienzo pesa exactamente
   lo mismo que un mensaje más: en Home el compositor no se mueve un
   píxel, y en el invocador el lienzo no estrena una clase de
   movimiento que la conversación no tuviera ya.

   El lugar visual es el mismo que señaló Robbie —el hueco entre el
   log y la caja— porque `.os-empty` lleva `margin: auto` y las
   márgenes automáticas se comen todo el espacio libre: el saludo se
   centra arriba y el lienzo queda pegado al canto de abajo.
   ============================================================ */

/* La tira. `flex: 0 0 auto` dentro del log, que es una columna flex: el
   lienzo mide lo que miden sus fichas y nunca pelea por el hueco. */
.hm-canvas {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s-2);
  /* Ancho de arranque de una ficha. Va como custom property y no como
     literal en el `flex-basis` para que las tres fichas repartan el
     renglón sin media queries: con 200px caben tres en la columna de Home
     (~900px) y dos en el recuadro del invocador (720px). */
  --hm-w: 200px;
}

/* ---------- La ficha ----------
   Papel translúcido mate y hairline, como `.r-card`, pero en geometría
   compacta: radio medio y `--s-3` de relleno. No es `.r-card` con el
   relleno pisado —eso sería un override de `.r-`— sino una pieza local
   con las mismas declaraciones de superficie, igual que `.rel-p` o
   `.os-msg` resuelven su propia caja.

   Es un `<button>` cuando la ficha ES un atajo (una persona, una tarea,
   una nota, una iniciativa: picarla te lleva ahí) y un `<div>` cuando
   lleva controles adentro, que es el caso de la propuesta. */
.hm-card {
  flex: 1 1 var(--hm-w);
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  border: var(--stroke) solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-frost);
  backdrop-filter: blur(var(--frost-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(120%);
  font-family: inherit;
  text-align: left;
  color: inherit;
  animation: os-rise var(--d-base) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
  transition: border-color var(--d-fast) var(--ease),
              background var(--d-fast) var(--ease);
}

button.hm-card:hover,
button.hm-card:focus-visible { border-color: var(--hairline-strong); }

/* El renglón que se lee: icono de tipo + nombre. El icono dice QUÉ es; a
   dónde lleva la ficha vive en el `title`, no impreso. */
.hm-card__t {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  margin: 0;
}
.hm-card__t > .r-ico { flex: 0 0 auto; color: var(--ink-3); }
.hm-card__n {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-body-sm);
  line-height: var(--lh-snug);
  color: var(--ink);
}

/* Metadata: una línea, atenuada y recortada. Va puesta y no revelada al
   hover —al contrario que en la lista de Relaciones— porque aquí ES el
   dato: media línea de contexto es justo lo que se vino a ver, y una
   ficha que hay que apuntarle para leerla no sirve mientras escribes.
   La línea completa sigue en el `title`.

   El tipo y el color los pone `.r-label` del sistema; aquí solo va la
   geometría del recorte, así que no hay nada de `.r-` que corregir. */
.hm-card__m {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* `<mark>` del fragmento de una nota: lo pinta `OS.ai.snippet`, el mismo
   que usa la lista de Intelligence. */
.hm-card__m mark { background: none; color: var(--ink); }

/* ---------- La propuesta ----------
   Canto PUNTEADO, que es la firma de "provisional" que el sistema ya usa
   en `.r-stream`: esta ficha no es algo que exista, es algo que podría
   existir si Robbie lo acepta. Nada se guarda al pintarla. */
.hm-card--ask {
  border-style: dashed;
  border-color: var(--hairline-strong);
}
.hm-card--ask .hm-card__t { align-items: flex-start; }
/* La pregunta SÍ va con palabras completas y puede ocupar dos renglones:
   es la excepción de claridad del sistema —se está pidiendo un dato— y
   recortarla con elipsis dejaría una pregunta a medias. */
.hm-card--ask .hm-card__n {
  white-space: normal;
  overflow: visible;
  color: var(--ink-2);
}
.hm-card__do {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--s-6);
}
/* Descartar es lo secundario: se revela al hover y al foco. Con
   `pointer-events` en la misma regla que la opacidad —invisible y
   clicable es el peor de los dos mundos. */
.hm-card__no {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-fast) var(--ease);
}
.hm-card--ask:hover .hm-card__no,
.hm-card--ask:focus-within .hm-card__no { opacity: 1; pointer-events: auto; }

/* Ya se ejecutó: la ficha se queda diciéndolo hasta que el texto cambie,
   así que un mismo dato no se captura dos veces sin darse cuenta. */
.hm-card--done { border-style: solid; }

/* ---------- El motor está pensando ----------
   `.r-caret` del sistema y nada más: un cuadrito de 7px al final de la
   tira, en el sitio donde va a aterrizar la propuesta. No hay leyenda,
   no hay esqueleto que late, y solo aparece si el lienzo YA está en
   pantalla por otra razón — un lienzo que se abre para avisar que está
   pensando es el ruido que esto vino a quitar. */
.hm-canvas__work {
  flex: 0 0 auto;
  align-self: center;
  margin-inline: var(--s-2);
}

/* ---------- Sin motor, con palabras ----------
   `.r-engine` es el componente del sistema para esto y trae su punto de
   estado, su frase y su salida. Ocupa el renglón completo de la tira:
   no compite con las fichas, las acompaña. */
.hm-canvas__gap { flex: 1 1 100%; }

/* ---------- Angosto ----------
   En pantalla angosta la columna deja de tener alto definido (os.css, 720px)
   y la página entera scrollea: ahí el lienzo SÍ empuja al compositor, igual
   que lo empuja un mensaje nuevo. Lo que se puede hacer es que empuje menos,
   y se hace bajando el ancho de arranque de la ficha para que quepan dos por
   renglón en vez de una: con tres fichas son dos renglones (~136px) en vez de
   tres (~208px), medido a 375. El nombre se recorta con elipsis y sigue
   entero en el `title`, que es donde el sistema pone la explicación. */
@media (max-width: 720px) {
  .hm-canvas { --hm-w: 130px; }
}

/* ============================================================
   LA LÍNEA DE INICIO — el mensaje que abre el OS
   ============================================================
   UN renglón, y es el estado vacío entero. Antes eran tres apilados
   —la marca «RPH», el saludo enorme y la frase de abajo— y Robbie los
   rechazó viéndolos: «no deberían de salir tres columnas que digan
   RPH o la, sino solo el mensaje de inicio» (2026-08-23). La marca se
   fue por la regla de siempre (si se puede quitar sin perder
   claridad, se quita: es su propio OS, ya sabe de quién es) y las dos
   mitades se juntaron en una sola frase que las dice a la vez.

   ---------- EL TAMAÑO, y salió de una MEDICIÓN ----------
   Era `--t-h1` porque el renglón decía «Hola.» — cinco caracteres.
   Una FRASE a ese tamaño no cabe. La caja del estado vacío mide 367
   px (`.os-empty`, `max-width: 44ch` en os.css) y medido dentro de
   ella, con esta misma fuente:

     · `--t-h1` (43.5 px a 1280) envuelve desde 24 caracteres
     · `--t-h2` aguanta 34 a 1280 (343 px)… y a 1600 envuelve hasta
       una de 33, porque ahí el clamp ya topó en 28 px
     · `--t-h3` mete 43 caracteres en 290 px, IGUAL en 900, 1280,
       1600, 1920 y 2560

   Dejar el tamaño viejo habría reconstruido los dos renglones que
   este cambio vino a quitar, ahora como un salto de línea. Y la
   alternativa razonable —`--t-h2` con el tope apretado— está
   descartada por una razón estructural y no por gusto: `--t-h1` y
   `--t-h2` son `clamp(…, vw, …)`, o sea que CRECEN con la ventana,
   mientras que `44ch` cuelga del tamaño de texto heredado, que es
   fijo. Los dos se separan, así que siempre hay una ventana donde
   envuelven; para que `--t-h2` aguantara en todas habría que bajar el
   tope a ~30 caracteres, menos que el del saludo VIEJO (34), y en 30
   no cabe una frase que haga los dos trabajos. `--t-h3` es fijo y su
   relación con la caja es constante — es el escalón más grande de la
   escala que se puede afirmar en un renglón en cualquier ventana.

   Y coincide con la regla, que es la otra mitad del argumento: el
   tamaño se gana, y solo crece la métrica principal de la vista. El
   centro NO tiene métrica (app/README.md lo dice con esas palabras),
   así que un saludo nunca había ganado `--t-h1`. La jerarquía la
   sostienen la familia y el tracking —display, `--fw-light`,
   `--tr-display`— contra el cuerpo del briefing de abajo, no el
   tamaño.

   ---------- LA SEÑA DE QUE EL MODELO ESCRIBE ----------
   La línea la escribe el modelo (`frase` en home.js), y esperarlo es
   la parte que había que diseñar: el OS entero ya está puesto, así que
   lo único que puede decir «esto sigue llegando» es este renglón.

   Lo que se ve es del design system y NADA más: el `.r-caret` (§32b),
   más el aura de la caja de prompt en `data-beam-busy` y el botón de
   enviar vuelto «Detener», que los pone `setSending()` y no este
   archivo. Aquí solo va la GEOMETRÍA del caret, igual que
   `.hm-canvas__work` hace con el mismo componente unas líneas arriba:
   cero color, cero tamaño, cero animación — eso es del sistema.

   Dos decisiones, y hacen dos cosas distintas — vale separarlas
   porque es fácil creer que una sola las cubre:

   VA FUERA DEL FLUJO para que no cuente en el centrado. El párrafo es
   un item de grid con `justify-items: center`, así que su caja mide lo
   que mide su contenido: un caret en el flujo ensancharía el renglón y
   correría el TEXTO media anchura de caret a la izquierda — medido, 8
   px— y con el renglón centrado eso es el texto moviéndose bajo el ojo
   cada vez que la seña se prende. Colgado en `inset-inline-start: 100%`
   cuelga después del texto sin entrar en la cuenta.

   Y SE APAGA CON VISIBILIDAD para que encender la seña no reflúya
   nada. Ésta es la mitad que sostiene el invariante del encargo —la
   espera no mueve la caja— y las dos alternativas obvias están
   descartadas por medición, no por gusto:

     · `[hidden]` no sirve. `.r-caret` declara `display: inline-block`
       y una declaración de autor le gana al `[hidden]` de la hoja del
       navegador: el caret se quedaría encendido para siempre.
     · `opacity: 0` tampoco. El caret late con `@keyframes r-pulse`,
       que anima justamente `opacity`, y una animación le gana a una
       declaración normal — se vería latir igual.

   `visibility` no la toca nadie y, al estar la pieza fuera del flujo,
   no cuesta un pixel de reflujo. */
/* Casa voz-primero: con la criatura en el centro, el saludo no se sienta
   encima. Sube al canto de arriba del log; el companion ocupa el medio. */
.os-center:has(#voz[data-comp][data-comp-sitio="centro"]) .os-empty {
  margin-top: var(--s-8);
  margin-bottom: auto;
}

.hm-linea {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--tr-display);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
  /* El tope del validador garantiza un renglón; esto es para el caso que
     el validador no acota, que es el NOMBRE: «Avanza la mañana, » más un
     nombre larguísimo sí envuelve, y ahí vale que envuelva parejo. */
  text-wrap: balance;
}

.hm-linea__caret {
  position: absolute;
  inset-inline-start: 100%;
  margin-inline-start: var(--s-2);
  top: 50%;
  translate: 0 -50%;
  visibility: hidden;
}
.hm-linea[data-trabaja] .hm-linea__caret { visibility: visible; }

/* ============================================================
   EL BRIEFING — lo que el agente notó hoy
   ============================================================
   El bloque que abre el centro cuando todavía no hay conversación.
   Va de HERMANO de `.os-empty`, no adentro, y las dos razones son de
   caja: `.os-empty` se topa en 44ch y centra a sus hijos —correcto
   para un saludo, estrecho y mal alineado para un renglón de
   hallazgo— y su `margin: auto` se come todo el espacio libre de la
   columna, así que el saludo flota en medio y esto queda pegado al
   canto de abajo. Que es donde se pidió: encima de la caja de
   prompt. */
.hm-brief {
  flex: 0 0 auto;
  display: grid;
  gap: var(--s-3);
  width: 100%;
  min-width: 0;
}

/* El aviso de que falta el motor NO tiene regla propia, y esa es la
   nota: `.r-engine` ya trae su punto, su frase, su salida al final del
   renglón y su tope en `--measure`. La primera versión de este archivo
   le ponía `max-width: none` — un override de `.r-` disfrazado de clase
   local, y encima inerte: la columna del centro mide 526px y el tope del
   componente son 534. La regla se borró y el hueco se queda dicho para
   que nadie la vuelva a escribir.

   La lista. Sin gap: los renglones se separan con hairline, que es lo
   que el sistema pide antes que sombra o que aire. */
.hm-notes {
  display: grid;
  border-top: var(--stroke) solid var(--hairline);
}

/* Un hallazgo. Es un <button> porque ES una entrada: picarlo abre el
   módulo que lo opera. La superficie sale transparente y solo se
   levanta al hover — un renglón de briefing no compite con la
   conversación cuando no lo estás señalando. */
.hm-note {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-bottom: var(--stroke) solid var(--hairline);
  border-radius: var(--r-sm);
  background: none;
  font-family: inherit;
  font-size: var(--t-body-sm);
  text-align: left;
  color: inherit;
  animation: os-rise var(--d-base) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
  transition: background var(--d-fast) var(--ease);
}
.hm-note:hover,
.hm-note:focus-visible { background: var(--surface-2); }
.hm-note > .r-status,
.hm-note > .r-ico { flex: 0 0 auto; }
.hm-note > .r-ico { color: var(--ink-3); }

/* Lo que pasó. Cifras tabulares porque el renglón SIEMPRE empieza con
   una cuenta —«3 tareas vencidas»— y una columna de hallazgos con
   dígitos de ancho variable baila. */
.hm-note__t {
  /* `flex-basis: auto` con el detalle en `0`: el reparto le da al titular su
     ancho de contenido ANTES de que el detalle pida nada, así que «6 tareas
     vencidas» nunca sale recortado a «6 tareas v…». Al revés —los dos en
     `auto`— el detalle, que siempre es más largo, se lleva el renglón y deja
     ilegible la única mitad que no se puede adivinar. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Los nombres. Van PUESTOS y no revelados al hover, por el mismo
   argumento que `.hm-card__m` de aquí abajo: «3 tareas vencidas» sin
   los nombres no es accionable, y un renglón al que hay que apuntarle
   para saber si te importa no sirve como briefing. El tipo y el color
   los pone `.r-label`; aquí solo va la geometría del recorte. */
.hm-note__m {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

/* ============================================================
   LA BANDEJA DEL TURNO — lo que el agente pide y lo que ya hizo
   ============================================================ */
.hm-turn {
  flex: 0 0 auto;
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

/* Sin motor: `.r-engine` con DOS salidas en vez de una. `.r-engine__a`
   ya se va al final del renglón con su margen automático, así que el
   envoltorio lo hereda y aquí solo se reparte el par. */
.hm-turn__acts {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* ---------- La propuesta de panel ----------
   Canto PUNTEADO: la misma firma de "provisional" que `.hm-card--ask` y
   que `.r-stream` en el sistema. Nada ha pasado todavía; el panel no se
   abrió y no se va a abrir hasta que Robbie lo diga. */
.hm-ask {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-3);
  border: var(--stroke) dashed var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--surface-frost);
  backdrop-filter: blur(var(--frost-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(120%);
  animation: os-rise var(--d-base) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
.hm-ask > .r-ico { flex: 0 0 auto; color: var(--ink-3); }
.hm-ask__t {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: var(--s-1);
  font-size: var(--t-body-sm);
  line-height: var(--lh-snug);
  color: var(--ink);
}
/* El "para qué", en el renglón de abajo. Puede envolver: es la razón por
   la que estás decidiendo y recortarla con elipsis deja media razón. */
.hm-ask__w { white-space: normal; }

/* Aprobar y negar van CON PALABRAS y no con iconos, y es la excepción de
   claridad del sistema, no un descuido de «si puede ser un icono, es un
   icono»: se está concediendo un permiso, y un permiso que se otorga
   picando un símbolo no es un permiso, es un accidente. */
.hm-ask__act {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Ya se decidió. El canto se vuelve sólido —dejó de ser provisional— y
   lo NEGADO se tacha en su lugar en vez de desaparecer: que se vea lo
   que dijiste que no es parte de la conversación, igual que se ve lo que
   dijiste que sí. */
.hm-ask--si,
.hm-ask--no { border-style: solid; border-color: var(--hairline); }
.hm-ask--no .hm-ask__t { color: var(--ink-3); text-decoration: line-through; }
.hm-ask__done { flex: 0 0 auto; color: var(--ink-3); }

/* ---------- El recibo de una captura ----------
   Una fila que el agente escribió en disco durante este turno. */
.hm-did {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  border: var(--stroke) solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-frost);
  backdrop-filter: blur(var(--frost-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(120%);
  font-size: var(--t-body-sm);
  animation: os-rise var(--d-base) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
.hm-did > .r-status,
.hm-did > .r-ico { flex: 0 0 auto; }
.hm-did > .r-ico { color: var(--ink-3); }
.hm-did__t {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

/* El bote de deshacer va PUESTO, no revelado al hover, y es la única
   excepción deliberada a «lo secundario se revela» de todo este archivo.
   La razón: el recibo no tiene otra función. Lo que ya pasó lo dijo el
   toast en su momento; esta fila existe para que corregir una intención
   mal leída cueste un gesto, y un gesto que hay que descubrir apuntándole
   ya no cuesta uno. Sigue siendo `.r-confirm` —deshacer es borrar una
   fila— así que pregunta con palabras antes de proceder. */
.hm-did__x { flex: 0 0 auto; }

.hm-did--fuera { border-style: dashed; }
.hm-did--fuera .hm-did__t { color: var(--ink-3); text-decoration: line-through; }
.hm-did__s { flex: 0 0 auto; color: var(--ink-3); }

/* ---------- Angosto ----------
   En columna estrecha el renglón de hallazgo se parte en dos: la cuenta
   arriba y los nombres abajo, alineados a la izquierda. Meterlos en un
   renglón a 380px deja las dos mitades recortadas y ninguna se lee. */
@media (max-width: 560px) {
  .hm-note { flex-wrap: wrap; }
  .hm-note__t { flex: 1 1 100%; }
  .hm-note__m { flex: 1 1 100%; text-align: left; }
  .hm-ask { flex-wrap: wrap; }
  .hm-ask__act { flex: 1 1 100%; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-card,
  .hm-note,
  .hm-ask,
  .hm-did { animation: none; }
}