/* Escenas de Impuestos. Calcan src/index.css (.vat-quarter, .irpf-q,
   .provision-card, .asst-*, BreakdownInfo y la carita de Kaperu) con la
   escala del marco (--t-*): la de escritorio en la ventana, la del móvil en
   el iPhone. Todo lleva el prefijo tx- para no depender de lo que quede en
   demos.css. */

/* La raíz de cada escena: los marcos se colocan contra ella como contra la
   escena, y el «Copiado» vive dentro. */
.tx-scene { position: absolute; inset: 0; }

/* ── Tarjetas (project-card) ──────────────────────────────────────────── */
.tx-page { display: flex; flex-direction: column; gap: 16px; }
.tx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
/* Como en la app, el IVA se estira al alto del IRPF de al lado */
.tx-two--stretch { align-items: stretch; }
.tx-two--stretch .tx-vat { display: flex; flex-direction: column; }
.tx-two--stretch .tx-vqs { flex: 1; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.phone .tx-page { gap: 12px; }
.tx-card { min-width: 0; padding: 24px; border-radius: var(--radius-lg); background: var(--surface); color: var(--text); }
.phone .tx-card { padding: 16px; }
.tx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; margin-bottom: 16px; }
.tx-card-head--fig { margin-bottom: 8px; }
.phone .tx-card-head { flex-wrap: wrap; row-gap: 2px; margin-bottom: 8px; }
.tx-card-title { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-base); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--text); }
/* La hacienda y el año bajo el título, como la app en estrecho: a su lado,
   «IRPF · A pagar (estimado)» se partía en dos líneas. */
.tx-card-title { white-space: nowrap; }
/* La cifra de tarjeta (--figure-*), con su «€» más pequeño */
.tx-figure { display: block; font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); transition: color var(--spring-moderate); }
.tx-unit { font-size: 0.6em; font-weight: 600; letter-spacing: 0; }
.tx-pay { color: var(--red); }
.tx-refund { color: var(--green); }
/* Una cifra que se puede copiar: al pasar, un velo gris detrás */
.tx-copy { cursor: copy; border-radius: 4px; transition: background-color var(--spring-fast); }
.tx-copy:is(:hover, [data-hover]) { background: color-mix(in srgb, var(--control-fill-hover) 70%, transparent); }
/* Relleno: lo que no hace falta leer */
.tx-filler { display: flex; flex-direction: column; gap: 14px; }
.tx-filler .a-bar { height: 0.7em; }
.tx-filler-fig { width: 46%; height: 1.4em !important; border-radius: 8px !important; }

/* ── El punto de presentado (TickDot) y su acuse ──────────────────────── */
.tx-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: background-color var(--spring-moderate); }
.tx-dot--paid { background: var(--green); }
.tx-dot.pop { animation: tx-tick 0.42s cubic-bezier(0.25, 0.8, 0.25, 1) both; }
@keyframes tx-tick { 0% { transform: scale(0.3); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.tx-flag { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--green); white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.tx-flag.on { opacity: 1; transform: none; transition: opacity var(--spring-slow), transform var(--spring-slow); }

/* ── IVA trimestral: cuatro módulos en dos columnas ───────────────────── */
.tx-vqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tx-vq {
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0;
  padding: 16px; border-radius: var(--radius); background: var(--control-fill); cursor: pointer;
  transition: background-color var(--spring-fast), transform var(--spring-fast);
}
.tx-vq:is(:hover, [data-hover]) { background: var(--control-fill-hover); }
.tx-vq:active { transform: scale(0.98); }
.tx-qhead { display: flex; align-items: center; gap: 6px; min-height: 16px; }
.tx-qlabel { font-size: var(--t-xs); font-weight: 600; color: var(--text-muted); }
.tx-qinfo { margin-left: auto; display: inline-flex; }
.tx-vq-value { display: block; overflow: hidden; font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.tx-vq-value > span { border-radius: 4px; }
.tx-vq-value.is-due { color: var(--yellow); }

/* ── IRPF del año: cifra, barra de lo adelantado y los trimestres ─────── */
.tx-progress { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.tx-track { display: flex; height: 4px; border-radius: var(--radius-pill); background: var(--control-fill); overflow: hidden; }
.tx-fill { display: block; height: 100%; background: var(--green); transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); }
.tx-lead { margin: 0 0 4px; font-size: var(--t-sm); font-weight: 500; line-height: 1.25; color: var(--text-muted); text-wrap: pretty; }
.tx-account { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.tx-account-item { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; min-width: 0; }
.tx-account-item:last-child { align-items: flex-end; text-align: right; }
.tx-account-label { font-size: var(--t-sm); line-height: 1.25; color: var(--text-muted); text-wrap: balance; }
.tx-account-value { font-size: var(--t-base); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-account-value .tx-unit { font-size: inherit; }
.tx-dot[hidden] { display: none; }
.tx-qs { display: flex; flex-direction: column; margin: 20px -8px 0; }
.tx-qs-title { margin: 0 8px 6px; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.tx-q {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 8px;
  border: none; border-radius: var(--radius-sm); background: none; color: var(--text);
  font: inherit; font-size: var(--t-base); text-align: left; cursor: pointer;
  transition: background-color var(--spring-fast);
}
/* La línea fina de las listas de iOS: entre filas, sin llegar al borde */
.tx-q + .tx-q { border-top: 0.5px solid var(--border); border-top-left-radius: 0; border-top-right-radius: 0; }
.tx-q:is(:hover, [data-hover]) { background: var(--surface-hover); }
.tx-q-label { flex: 1; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text); }
.tx-rate { padding: 1px 6px; border-radius: var(--radius-xs); background: var(--surface-hover); color: var(--text-subtle); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color var(--spring-fast); }
.tx-q:is(:hover, [data-hover]) .tx-rate { background: var(--surface); }
.tx-q-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* El trimestre en curso no lo dice una etiqueta: su cifra respira */
.tx-q-value.is-live { animation: tx-breathe 3.4s ease-in-out infinite; }
@keyframes tx-breathe { 50% { opacity: 0.55; } }

/* ── Provisión fiscal: la cifra y, debajo, de qué plazo es cada euro ───── */
/* Como en la app, es la tarjeta oscura del Resumen (--statement-*). El desglose
   de la «i» flota fuera con los colores de la página. */
.tx-prov { display: flex; flex-direction: column; gap: 20px; background: var(--statement-bg); color: var(--statement-text); }
.tx-prov .tx-card-title { font-size: var(--t-sm); font-weight: 500; color: var(--statement-muted); }
.tx-prov .tx-figure { color: var(--statement-text); }
.tx-prov .tx-info-btn { color: var(--statement-muted); }
.tx-prov .tx-info-btn:is(:hover, [data-hover]), .tx-prov .tx-info-btn[aria-expanded="true"] { color: var(--statement-text); }
.tx-prov .tx-copy:is(:hover, [data-hover]) { background-color: rgba(255, 255, 255, 0.08); }
.tx-prov-hint { margin: 8px 0 0; font-size: var(--t-sm); line-height: 1.4; color: var(--statement-muted); text-wrap: pretty; }
.tx-ag { display: flex; flex-direction: column; font-size: var(--t-sm); }
/* Lo que sale de la lista cierra su hueco: en rejilla, para no medir su alto */
.tx-ag-group, .tx-ag-row { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--spring-moderate), opacity var(--spring-moderate); }
.tx-ag-group.is-gone, .tx-ag-row.is-gone { grid-template-rows: 0fr; opacity: 0; }
.tx-ag-group-in, .tx-ag-row-in { min-height: 0; overflow: hidden; }
.tx-ag-group-in { padding: 8px 0; border-top: 0.5px solid var(--statement-line); }
.tx-ag-group.is-gone .tx-ag-group-in { padding-block: 0; border-top: none; }
.tx-ag-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 2px; color: var(--statement-muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-ag-head .is-soon { color: var(--yellow); font-weight: 600; }
.tx-ag-row-in { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 1px; }
.tx-ag-label { display: inline-flex; align-items: baseline; gap: 6px; color: var(--statement-text); text-wrap: balance; }
.tx-ag-label .tx-dot { align-self: center; }
.tx-dot--vat { background: var(--yellow); }
.tx-dot--irpf { background: var(--red); }
.tx-ag-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-ag-row--empty .tx-ag-label { color: var(--statement-muted); }

/* ── La «i» y su desglose (BreakdownInfo) ─────────────────────────────── */
.tx-info { position: relative; display: inline-flex; }
.tx-info-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: var(--text-subtle); cursor: pointer; transition: color var(--spring-fast); }
.tx-info-btn:is(:hover, [data-hover]), .tx-info-btn[aria-expanded="true"] { color: var(--text); }
.phone .tx-info-btn svg { width: 14px; height: 14px; }
.tx-pop {
  position: absolute; z-index: 30; min-width: 210px; width: max-content;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--float-ring, 0 0 0 1px var(--border));
  text-align: left; font-weight: 400; letter-spacing: normal; text-transform: none;
  visibility: hidden; opacity: 0; transform: scale(0.96); pointer-events: none;
  transition: opacity var(--spring-moderate-exit), transform var(--spring-moderate-exit), visibility 0s linear 0.12s;
}
.tx-pop.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity var(--spring-moderate), transform var(--spring-moderate), visibility 0s; }
.tx-pop[data-v="down"] { top: calc(100% + 8px); }
.tx-pop[data-v="up"] { bottom: calc(100% + 8px); }
.tx-pop-text { display: block; width: 250px; max-width: 100%; font-size: var(--t-sm); line-height: 1.4; color: var(--text-muted); white-space: normal; }
.tx-pop-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.tx-pop-row--muted { opacity: 0.65; }
.tx-pop-label { min-width: 0; font-size: var(--t-sm); line-height: 1.3; color: var(--text-muted); white-space: normal; }
.tx-pop-value { flex-shrink: 0; font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.tx-pop-row--strong .tx-pop-label { color: var(--text); }
.tx-pop-row--strong .tx-pop-value { font-weight: 700; }
.tx-pop-value--vat { color: var(--yellow); }
.tx-pop-value--bad { color: var(--red); }
.tx-pop-sep { display: block; border-top: 1px solid var(--border); }

/* ── Kaperu: la carita (BotFace) ──────────────────────────────────────── */
.tx-face { display: block; flex-shrink: 0; overflow: visible; }
.tx-face-bg { fill: var(--brand); transform-box: fill-box; transform-origin: center; }
.tx-eyes { transform-box: view-box; transform-origin: 16px 16px; transition: opacity var(--spring-moderate); }
.tx-eyes--happy { opacity: 0; }
.tx-face--happy .tx-eyes--open { opacity: 0; }
.tx-face--happy .tx-eyes--happy { opacity: 1; }
.tx-eye-wrap { transform-box: fill-box; transform-origin: center; }
.tx-eye { fill: var(--brand-fg); transform-box: fill-box; transform-origin: center; animation: tx-blink 5.2s ease-in-out infinite; }
.tx-eye-line { fill: none; stroke: var(--brand-fg); stroke-width: 2.4; stroke-linecap: round; }
.tx-face--thinking .tx-eyes--open { animation: tx-look 1.5s ease-in-out infinite; }
.tx-face--bored .tx-eyes--open { animation: tx-glance 7s ease-in-out infinite; }
@keyframes tx-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } }
@keyframes tx-look { 0%, 100% { transform: translateX(-2.2px); } 50% { transform: translateX(2.2px); } }
@keyframes tx-glance { 0%, 28%, 88%, 100% { transform: translateX(0); } 36%, 50% { transform: translateX(-2.4px); } 58%, 76% { transform: translateX(2.4px); } }

/* El botón de la esquina, con su punto rojo cuando hay algo que presentar */
.tx-launcher { position: absolute; right: 20px; z-index: 6; width: 44px; height: 44px; padding: 0; border: none; border-radius: var(--radius-pill); background: none; cursor: pointer; transition: transform var(--spring-moderate), opacity var(--spring-moderate); }
.tx-launcher:is(:hover, [data-hover]) { transform: scale(1.06); }
.tx-launcher:active { transform: scale(0.94); }
.phone .tx-launcher { right: 16px; }
.phone .tx-launcher.hide { opacity: 0; transform: scale(0.8); pointer-events: none; }
.tx-launcher-dot { position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); transition: opacity var(--spring-fast), transform var(--spring-fast); }
.tx-launcher-dot.off { opacity: 0; transform: scale(0.4); }

/* ── Kaperu: la ventana (en el iPhone, una hoja desde abajo) ──────────── */
.tx-k {
  --k-bg: color-mix(in srgb, var(--surface) 55%, var(--bg));
  position: absolute; z-index: 7; right: 20px; width: 400px; max-width: calc(100% - 40px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--k-bg); border: 1px solid var(--border); border-radius: var(--radius-xl);
  transform-origin: bottom right;
  visibility: hidden; opacity: 0; transform: translateY(12px) scale(0.96); pointer-events: none;
  transition: opacity var(--spring-slow-exit), transform var(--spring-slow-exit), visibility 0s linear 0.16s;
}
.tx-k.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity var(--spring-slow), transform var(--spring-slow), visibility 0s; }
.phone .tx-k { left: 0; right: 0; bottom: 0; width: auto; max-width: none; border-bottom: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; transform: translateY(40%); transform-origin: bottom center; }
.phone .tx-k.open { transform: none; }
.tx-k-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 66px; display: flex; align-items: center; gap: 12px; padding: 8px 16px 0 20px; }
/* Desenfoque de la cabecera: el informe pasa por detrás y se sigue leyendo */
.tx-k-blur {
  position: absolute; inset: 0 0 -24px 0; z-index: -1; pointer-events: none;
  /* Chrome no recorta el desenfoque con la esquina de la ventana */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--k-bg) 96%, transparent), color-mix(in srgb, var(--k-bg) 84%, transparent) 70%, transparent);
}
.tx-k-headtext { flex: 1; min-width: 0; }
.tx-k-title { margin: 0; font-size: var(--t-base); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--text); }
.tx-k-sub { margin: 0; font-size: var(--t-xs); color: var(--text-subtle); }
.tx-k-close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: var(--radius-pill); background: var(--control-fill); color: var(--text-muted); font-size: var(--t-sm); cursor: pointer; transition: background-color var(--spring-fast), color var(--spring-fast); }
.tx-k-close:is(:hover, [data-hover]) { background: var(--control-fill-hover); color: var(--text); }
.tx-k-body { flex: 1; min-height: 0; overflow-y: auto; padding: 98px 20px 24px; scrollbar-width: none; overscroll-behavior: contain; }
.tx-k-body::-webkit-scrollbar { display: none; }
.phone .tx-k-body { padding-left: 16px; padding-right: 16px; }
.tx-k-report { display: flex; flex-direction: column; gap: 16px; }
.tx-k-in { animation: tx-k-in var(--spring-moderate) both; }
@keyframes tx-k-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tx-k-thinking { display: flex; align-items: center; min-height: 1.55em; font-size: var(--t-sm); color: var(--text); }
.tx-k-text { margin: 0; font-size: var(--t-base); line-height: 1.55; color: var(--text); }
.tx-k-word { animation: tx-word 0.32s cubic-bezier(0.25, 0.8, 0.25, 1) both; }
@keyframes tx-word { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }
.tx-k-hero { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tx-k-hero-label { font-size: var(--t-sm); font-weight: 600; color: var(--text-muted); }
.tx-k-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius); background: var(--control-fill); }
.tx-k-card-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-bottom: 4px; }
.tx-k-card-number { flex-shrink: 0; font-size: var(--t-base); font-weight: 700; font-variant-numeric: tabular-nums; }
.tx-k-card-name { min-width: 0; font-size: var(--t-sm); color: var(--text-muted); }
.tx-k-card-meta { margin-left: auto; flex-shrink: 0; font-size: var(--t-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.tx-k-rows { display: flex; flex-direction: column; }
.tx-k-group { margin: 12px 0 4px; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.tx-k-group:first-child { margin-top: 0; }
.tx-k-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 0; }
.tx-k-box { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--surface); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.tx-k-box--none { background: none; }
.tx-k-label { min-width: 0; font-size: var(--t-sm); line-height: 1.4; color: var(--text-muted); }
.tx-k-value { justify-self: end; font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.tx-k-value--off { color: var(--text-subtle); }
.tx-k-row--total { margin-top: 8px; }
.tx-k-row--total .tx-k-label { font-weight: 600; color: var(--text); }
.tx-k-row--total .tx-k-value { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.03em; }
/* Solo cuando el informe se escribe a la vista: pintado de golpe (el final
   de la escena), la animación arrancaría al quitarse data-instant. */
.tx-k-anim .tx-k-row .tx-k-value { animation: tx-materialize 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0.12s both; }
@keyframes tx-materialize { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
.tone-income .tx-k-value { color: var(--green); }
.tone-expense .tx-k-value, .tone-irpf .tx-k-value { color: var(--red); }
.tone-vat .tx-k-value { color: var(--yellow); }
.tx-k-clear { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--t-sm); color: var(--text-muted); }
.tx-k-clear .tx-dot { width: 6px; height: 6px; }

/* La franja de luz gris de lo que piensa (Loading.jsx) */
@property --tx-shimmer-at { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@keyframes tx-shimmer { from { --tx-shimmer-at: 100%; } to { --tx-shimmer-at: 0%; } }
.tx-shimmer {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, color-mix(in srgb, currentColor 50%, transparent) 40%, currentColor 50%, color-mix(in srgb, currentColor 50%, transparent) 60%);
  background-size: 300% 100%; background-position: var(--tx-shimmer-at) 0;
  -webkit-background-clip: text; background-clip: text;
  animation: tx-shimmer 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* «Copiado», junto al dedo o al cursor */
.tx-tip { position: absolute; z-index: 45; padding: 4px 9px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--float-ring, 0 0 0 1px var(--border)); font-size: 12px; font-weight: 500; color: var(--text); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity var(--spring-fast), transform var(--spring-fast); }
.tx-tip.show { opacity: 1; transform: none; }

/* La hacienda, junto al pie de la escena (no es de la app) */
.tx-hac { -webkit-appearance: none; appearance: none; height: 28px; padding: 0 28px 0 12px; border: none; border-radius: var(--radius-pill); background: var(--control-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E") no-repeat right 11px center; color: var(--text); font: inherit; font-size: var(--fs-caption, 12px); font-weight: 500; cursor: pointer; transition: background-color var(--spring-fast); }
.tx-hac:hover { background-color: var(--control-fill-hover); }
.tx-hac:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (prefers-reduced-motion: reduce) {
  .tx-eye, .tx-face--thinking .tx-eyes--open, .tx-face--bored .tx-eyes--open, .tx-q-value.is-live, .tx-shimmer, .tx-k-word, .tx-k-in, .tx-k-anim .tx-k-row .tx-k-value { animation: none; }
  .tx-shimmer { background: none; -webkit-text-fill-color: currentColor; }
}