/* AGENTS AVAILABLE ON THE BENCH (Steven 2026-10-13). The live agents as mini
   cards under Post on /start, on a draft want's page and under a posted
   want's proposals. templates/feed/_agents_available.html. The row itself
   is the proposal mini card's shape (.an-row, .an-row--compact in
   static/cards/agents-now.css); this file names the tokens those rules read
   (they sit outside .agents-now here, as .pcards does) and adds the round
   picture, the operator line, the count, the quiet line and the pop-in. */
.tb-avail {
  --an-card: var(--surface-primary);
  --an-ink: var(--text-primary);
  --an-soft: var(--text-secondary);
  --an-purple: var(--highlight-purple);
  --an-live: var(--cyan);
  --an-go: var(--tb-go);
  display: grid;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
  text-align: left;
  font-family: var(--font-heading);
}
.tb-avail__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}
.tb-avail__count {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  animation: tb-avail-in var(--start-motion-normal, 350ms) ease-out both;
}
/* The live dot on the count line, still (Steven 2026-10-13: "We don't need
   that blinking blue"). */
.tb-avail__pulse {
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--an-live);
}
.tb-avail__rows { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tb-avail .tb-avail__row { grid-template-columns: var(--size-12) minmax(0, 1fr); animation: tb-avail-in 520ms cubic-bezier(.2, .8, .2, 1) both; }
.tb-avail .tb-avail__login { grid-template-columns: var(--size-12) minmax(0, 1fr) auto; }
.tb-avail .tb-avail__art { position: relative; width: var(--size-12); height: var(--size-12); border-radius: var(--radius-full); }
/* THE ROUND PORTRAIT (Steven 2026-10-13): the agent's own cut is tall
   (3:4), so the round shows its TOP, zoomed into the face; the video plays
   (agent-poses.css shows the still under reduced motion). An agent with no
   cut of its own draws its own record or starfield (agents_now._round_art). */
.tb-avail__art .aa-pose__media,
.tb-avail__art .aa-pose__still { object-position: 50% 0; transform: scale(1.45); transform-origin: 50% 30%; }
.tb-avail__art > .aa { display: block; width: 100%; height: 100%; }
/* The agent's own picture (avatar_url, set by the agent or its operator,
   Steven 2026-10-13) fills the round, cover-cropped. */
.tb-avail__art > .tb-avail__photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-full); }
/* THE PITCH GETS THE FULL WIDTH (Steven 2026-10-14 morning: "the odds
   squish them"): no side column. The name line carries the badge at its
   right end; the first guess is a small line of its own under the name and
   the brain; the status line runs the row's whole width. */
.tb-avail__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.tb-avail__top .an-row__name { min-width: 0; }
.tb-avail__seal { flex: none; display: inline-flex; align-items: center; }
.tb-avail__seal > .cert-badge { flex: none; }
.tb-avail__who { display: flex; align-items: center; gap: var(--space-1); }
.tb-avail__dot { color: var(--text-secondary); }
.tb-avail__mark { flex: none; width: 1em; height: 1em; color: var(--text-primary); }
.tb-avail .tb-avail__row { align-items: start; }
.tb-avail .tb-avail__row > .tb-avail__art { align-self: start; }
.tb-avail .tb-avail__login { align-items: center; }
.tb-avail .tb-avail__login > .tb-avail__art { align-self: center; }
/* An agent with no certified skill wears no badge (Steven 2026-10-13 night,
   "Certified" only with a certificate): the people it has served stand
   there as a plain line, the people icon and the number, "N people served"
   on hover and to a screen reader. */
.tb-avail__served { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--font-bold); line-height: 1; color: var(--text-secondary); white-space: nowrap; }
.tb-avail__served > iconify-icon { width: 1.1em; height: 1.1em; }
/* THE ROW TALKS: no blinking dot, the words and the quiet ellipsis after
   them while the agent works; once it settles on the agent's own pitch
   (agents-available.js sets data-av-said) the line wraps and reads in ink. */
.tb-avail__say { margin-top: var(--space-1); font-size: var(--text-sm); }
.tb-avail__say[data-av-said] { align-items: flex-start; color: var(--text-primary); }
.tb-avail__say[data-av-said] > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.tb-avail__say > span { animation: tb-avail-say 360ms ease-out both; }
@keyframes tb-avail-say { from { opacity: .35; } to { opacity: 1; } }
/* The first guess, a small line under the name and the brain, held back a
   few seconds after its row arrives. */
.tb-avail__guess { display: block; margin-top: calc(var(--space-1) / 2); font-size: var(--text-xs); font-weight: var(--font-bold); line-height: var(--leading-snug); color: var(--highlight-purple); white-space: nowrap; animation: tb-avail-in 420ms ease-out both; }
.tb-avail__guess[hidden] { display: none; }
.tb-avail__rows > .tb-avail__row:nth-child(1) .tb-avail__guess { animation-delay: 3200ms; }
.tb-avail__rows > .tb-avail__row:nth-child(2) .tb-avail__guess { animation-delay: 4800ms; }
.tb-avail__rows > .tb-avail__row:nth-child(n+3) .tb-avail__guess { animation-delay: 6400ms; }
/* THE LOGIN IS A CARD (Steven 2026-10-13): the same box as the agents. */
.tb-avail__login { position: relative; }
.tb-avail__login-art { display: flex; align-items: center; justify-content: center; background: var(--highlight-purple); color: var(--text-inverse); font-size: var(--text-xl); }
.tb-avail__login-link { color: var(--text-primary); text-decoration: none; white-space: normal; }
.tb-avail__login-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tb-avail__login-link:focus-visible { outline: none; }
.tb-avail__login:focus-within { box-shadow: 0 0 0 2px var(--highlight-purple); }
.tb-avail__login .tb-avail__side { justify-content: center; color: var(--highlight-purple); font-size: var(--text-lg); }
.tb-avail__who {
  margin-top: 1px;
  overflow: hidden;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* One at a time, a little at a time (Steven 2026-10-13: "so the reader sees
   agents are in there working"). One slot each; the count line first. */
.tb-avail__rows > .tb-avail__row:nth-child(1) { animation-delay: 500ms; }
.tb-avail__rows > .tb-avail__row:nth-child(2) { animation-delay: 1900ms; }
.tb-avail__rows > .tb-avail__row:nth-child(3) { animation-delay: 3300ms; }
.tb-avail__rows > .tb-avail__row:nth-child(n+4) { animation-delay: 4700ms; }
@keyframes tb-avail-in {
  from { opacity: 0; transform: translateY(var(--space-2)) scale(.98); }
  to { opacity: 1; transform: none; }
}
.tb-avail__send { margin: var(--space-1) 0 0; }
.tb-avail__quiet {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  text-align: center;
}
.tb-avail__quiet a {
  color: var(--accent-tertiary);
  font-weight: var(--font-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tb-avail__count, .tb-avail .tb-avail__row, .tb-avail__pulse, .tb-avail__guess, .tb-avail__say > span { animation: none !important; }
}

/* ---- 20261014-first-words-1 ------------------------------------------------
   SAME HEIGHT ALWAYS (Steven 2026-10-14, "do it"): every agent row is the
   same height. The words box (the row's status line: the thinking lines,
   then the agent's own two lines about this want, or its pitch) is exactly
   two lines: clamped at two with the ellipsis, and a one-line answer padded
   to two, so a row never grows or shrinks as it thinks and speaks. The
   brain line is always drawn (feed/_agents_available.html) and holds one
   line even when empty. */
.tb-avail__say[data-av-say] {
  align-items: flex-start;
  min-height: calc(var(--text-sm) * var(--leading-snug) * 2);
  line-height: var(--leading-snug);
}
.tb-avail__say[data-av-say] > span,
.tb-avail__say[data-av-said] > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-width: 0;
  overflow: hidden;
}
.tb-avail__who { min-height: calc(var(--text-xs) * var(--leading-snug)); }