/* AGENTS WORKING ON THIS NOW (card redesign step 4, Steven's sketch 16 and
   screenshot 23, COO hands 2026-10-12). Rows under the probability card:
   the agent's moving picture, name, pitch, a live line, odds, price, Get
   this. templates/feed/_step4_agents_now.html, _agent_now_row.html. */
.agents-now {
  --an-card: var(--surface-primary);
  --an-ink: var(--text-primary);
  --an-soft: var(--text-secondary);
  --an-purple: var(--highlight-purple);
  --an-live: var(--color-cyan-600);
  --an-line: var(--color-gray-200);
  --an-go: var(--accent-neon);
  margin: var(--space-4) 0 var(--space-2);
  font-family: 'Plus Jakarta Sans', var(--interface-font, var(--font-sans));
}
.agents-now__head { padding: 0 var(--space-1) var(--space-3); }
.agents-now__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--an-ink);
}
.agents-now__line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--text-base);
  line-height: 1.35;
  color: var(--an-soft);
}
.agents-now__pulse,
.an-row__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--an-live);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--an-live) 50%, transparent);
  animation: an-pulse 1.6s ease-out infinite;
}
@keyframes an-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--an-live) 50%, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
.agents-now__line.is-fresh span:last-child { animation: an-fresh .9s ease-out; }
@keyframes an-fresh { 0% { color: var(--an-purple); } 100% { color: inherit; } }

.agents-now__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.an-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  background: var(--an-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--border-hair);
}
.an-row.is-new { animation: an-in .45s ease-out; }
@keyframes an-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.an-row__art {
  display: block;
  width: var(--size-16);
  height: var(--size-16);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-dark-900);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.an-row__body { min-width: 0; }
.an-row__name {
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1.2;
  color: var(--an-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.an-row__pitch {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--an-purple);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.an-row__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--an-soft);
}
.an-row__status .an-row__dot { width: 6px; height: 6px; animation: none; background: var(--color-gray-400); }
.an-row__status--working .an-row__dot { background: var(--an-live); animation: an-pulse 1.6s ease-out infinite; }
.an-row__status--working span:last-child::after {
  content: '…';
  display: inline-block;
  animation: an-dots 1.4s steps(4, end) infinite;
  overflow: hidden;
  vertical-align: bottom;
  width: 0;
}
@keyframes an-dots { to { width: 1.1em; } }

.an-row__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  text-align: right;
}
.an-row__odds {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--an-purple);
}
.an-row__odds small { font-size: var(--text-base); font-weight: 800; margin-left: var(--tb-hair); }
.an-row__price { font-size: var(--text-base); font-weight: 700; color: var(--an-ink); }
/* "+ fees" beside a paid price (Steven 2026-10-14 ~12:50, "like they do
   with plus tax"; deal_funding.FEES_WORD): small and quiet. */
.an-row__fees { color: var(--an-soft); font-size: var(--text-xs); font-weight: var(--font-semibold); white-space: nowrap; }
.an-row__form { margin: var(--space-2) 0 0; }
.an-row__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--an-go);
  color: var(--color-gray-800);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.an-row__form .an-row__go { margin-top: 0; }
.an-row__go:hover { filter: brightness(.96); }
.an-row__go:focus-visible { outline: 3px solid var(--an-purple); outline-offset: 2px; }
.an-row__go[disabled] { background: var(--surface-sunken); color: var(--text-muted); cursor: default; filter: none; }
.an-row--passed { opacity: .55; }

@media (max-width: 360px) {
  .an-row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--space-3); }
  .an-row__art { width: 52px; height: 52px; border-radius: var(--radius-md); }
  .an-row__odds { font-size: var(--text-2xl); }
}

@media (prefers-reduced-motion: reduce) {
  .agents-now__pulse, .an-row__dot, .an-row.is-new,
  .an-row__status--working span:last-child::after { animation: none !important; }
  .an-row__status--working span:last-child::after { width: auto; }
}


/* THE DRAFT PREVIEW (Steven, COO hands 2026-10-12): a visitor's want is not
   sent to agents, so the rows are a preview. Agents flash in one after
   another top to bottom (agents-now.js), the top card's art spins. */
.agents-now__note { margin: var(--space-2) 0 0; font-size: var(--text-base); line-height: 1.35; color: var(--an-soft); }
.agents-now__sub { margin: var(--space-6) var(--space-1) var(--space-3); font-size: var(--text-base); font-weight: 800; color: var(--an-ink); }
.an-flash { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.an-row--preview { grid-template-columns: 64px minmax(0, 1fr) auto; }
.an-flash > .an-row:first-child { box-shadow: 0 6px 20px color-mix(in srgb, var(--an-purple) 16%, transparent), 0 0 0 2px color-mix(in srgb, var(--an-purple) 18%, transparent); }
.an-flash > .an-row:first-child .an-row__art { border-radius: 50%; }
.an-flash > .an-row:first-child .an-row__art .aa { animation: an-spin 7s linear infinite; }
.an-row.is-flash { animation: an-flash .55s ease-out; }
@keyframes an-spin { to { transform: rotate(360deg); } }
@keyframes an-flash {
  0% { opacity: 0; transform: translateY(-8px) scale(.98); filter: brightness(1.25); }
  100% { opacity: 1; transform: none; filter: none; }
}
.an-send {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-4) 0 0;
  min-height: 52px;
  border-radius: var(--radius-full);
  background: var(--an-go);
  color: var(--color-gray-800);
  font-size: var(--text-lg);
  font-weight: 800;
  text-decoration: none;
}
.an-send:focus-visible { outline: 3px solid var(--an-purple); outline-offset: 2px; }
.an-row--compact { grid-template-columns: 44px minmax(0, 1fr) auto; padding: var(--space-3) var(--space-3); border-radius: var(--radius-lg); }
.an-row--compact .an-row__art { width: 44px; height: 44px; border-radius: var(--radius-md); }
.an-row--compact .an-row__name { font-size: var(--text-base); }
.an-row--compact .an-row__pitch { font-size: var(--text-sm); -webkit-line-clamp: 1; }
.an-row--compact .an-row__odds { font-size: var(--text-xl); }
.an-row--compact .an-row__odds small { font-size: var(--text-xs); }
.an-row--compact .an-row__price { font-size: var(--text-sm); }
.an-list { gap: var(--space-2); }
.agents-now__ideas { margin-top: var(--space-6); }
@media (prefers-reduced-motion: reduce) {
  .an-flash > .an-row:first-child .an-row__art .aa, .an-row.is-flash { animation: none !important; }
}


/* PROPOSAL MINI CARDS (LAYOUT_CARDS step 5; Steven 2026-10-12, COO hands):
   on a posted want each bid is a mini card in the step 4 row's shape (the
   .an-row rules above); a tap opens its full card in an overlay over the
   page, and the chosen agent's filed plan is a full card inline whose
   Details opens the plan sheet. templates/feed/_proposal_cards.html,
   static/cards/proposal-cards.js. The rows here sit outside .agents-now, so
   .pcards carries the same names for the page's tokens. */
.pcards {
  --an-card: var(--surface-primary);
  --an-ink: var(--text-primary);
  --an-soft: var(--text-secondary);
  --an-purple: var(--highlight-purple);
  --an-live: var(--color-cyan-600);
  --an-line: var(--color-gray-200);
  --an-go: var(--accent-neon);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-family: var(--font-heading);
}
.pcards__writing, .pcards__minis { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.pcards__item { position: relative; }

/* The mini card: one button over the whole row opens the full card; the
   Choose button sits above it. */
.pcard-mini { position: relative; }
.pcard-mini__open {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pcard-mini__open:focus-visible { outline: 3px solid var(--an-purple); outline-offset: 2px; }
.pcard-mini__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pcard-mini:hover { box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--an-purple) 18%, transparent); }
/* THE ROW NEVER TURNS BLACK UNDER THE POINTER (Steven 2026-10-13 night: the
   mouse over a proposal row turned it black). The row's open button lies
   over the whole row, and the walk's button treatment
   (components/walk-buttons.css: black, !important, every button under
   .want-detail) painted it black on hover, focus and press: here it wears
   the hover surface token, --bg-hover (the interactive hover tint), and
   never moves; seven classes deep so it outranks that rule. */
.pcards .an-row.pcard-mini > .pcard-mini__open:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]),
.pcards .an-row.pcard-mini > .pcard-mini__open:is(:active, .walk-pressed):not(:disabled):not([aria-disabled="true"]) {
  background: var(--bg-hover) !important;
  color: inherit !important;
  border-color: transparent !important;
  transform: none !important;
}
.pcard-mini .an-row__art { pointer-events: none; }
.pcard-mini__go { position: relative; z-index: 2; }
.pcard-mini__odds--words { font-size: var(--text-base); letter-spacing: 0; }
.pcard-mini--chosen { box-shadow: 0 0 0 2px color-mix(in srgb, var(--an-purple) 28%, transparent); }

/* The full card over the page: the X top left, the card fills the rest.
   proposal-cards.js moves it to the page's top level while it is open, out
   of a turned card's frame (the deck card's Proposals back), so it always
   covers the screen; it carries the rows' names for its own controls.
   OVER THE DETAILS SHEET (Steven 2026-10-14, the Details sheet open on "I
   want a new car.": "I clicked on Theo and the plan actually popped up
   behind the details"): 2500, a step over the deck's Details sheet
   (.sc-sheet[data-hc-sheet], step-cards.css 2400), a belt under
   home-cards.js, which closes the sheet when a card comes up. Nothing
   opens a sheet over a popped card: its Select closes it first
   (proposal-cards.js choose), its Details is the agent's page. */
.pcard-full {
  --an-go: var(--accent-neon);
  --an-purple: var(--highlight-purple);
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--color-dark-900) 94%, transparent);
  animation: pcard-full-in .26s cubic-bezier(.2, .7, .2, 1);
}
.pcard-full[hidden] { display: none; }
@keyframes pcard-full-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.pcard-full__bar {
  flex: none;
  display: flex;
  align-items: center;
  height: var(--space-12);
  padding-top: env(safe-area-inset-top);
}
.pcard-full__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-10);
  height: var(--size-10);
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-dark-900) 45%, transparent);
  color: var(--text-inverse);
  cursor: pointer;
}
.pcard-full__x svg { width: 22px; height: 22px; }
.pcard-full__x:focus-visible { outline: 3px solid var(--an-go); outline-offset: 2px; }
/* FLIP THROUGH THE PLANS (Steven 2026-10-13 night): one card per plan, a
   horizontal swipe (or the arrow keys) to the next, small dots for the
   count, the one on screen lit. */
.pcard-full__dots {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 auto;
  padding-right: var(--size-10);
}
.pcard-full__dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.32);
}
.pcard-full__dot.is-on { background: var(--text-inverse); }
.pcard-full.is-from-next .pcard-full__card { animation: pcard-from-next .24s cubic-bezier(.2, .7, .2, 1); }
.pcard-full.is-from-prev .pcard-full__card { animation: pcard-from-prev .24s cubic-bezier(.2, .7, .2, 1); }
@keyframes pcard-from-next { from { opacity: .4; transform: translateX(32%); } to { opacity: 1; transform: none; } }
@keyframes pcard-from-prev { from { opacity: .4; transform: translateX(-32%); } to { opacity: 1; transform: none; } }
.pcard-full__card {
  flex: 1 0 auto;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  transition: transform .2s ease-out;
  --tb-card-full-h: calc(100vh - var(--space-12) - var(--space-3) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
@supports (height: 100dvh) {
  .pcard-full__card { --tb-card-full-h: calc(100dvh - var(--space-12) - var(--space-3) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
.pcard-full__card .tb-card--full { min-height: 0; }
body.pcards-lock { overflow: hidden; }

/* The plan, back from the agent: the full card inline, then its sheet
   (the step cards' Details sheet frame, css/pages/step-cards.css). */
.pcards__plan { max-width: 520px; width: 100%; margin: 0 auto; }
.pcards__plan .tb-card--full { --tb-card-full-h: calc(100svh - var(--tb-card-top, 64px) - var(--space-4)); }
.pcards-sheet__title {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xl);
  line-height: 1.25;
  font-weight: 800;
  color: var(--text-primary);
}
.pcards-sheet__mark { color: var(--text-primary); }
/* The money marks on the plan's rows (Steven 2026-10-13): step 1 "$11.50
   held"; each release its amount in green over "pay when you approve", so
   the person knows which approvals pay. Two classes deep, so the step
   cards' .sc-plan__state (loaded after this file) never outranks them. */
.sc-plan .pcards-sheet__mark { color: var(--text-primary); }
.sc-plan .pcards-sheet__mark--release {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 8.5em;
  text-align: right;
  white-space: normal;
  color: var(--color-green-600);
}
.pcards-sheet__amt { font-weight: 700; }
.pcards-sheet__when { font-size: var(--text-xs); line-height: 1.3; letter-spacing: 0; }
.pcards-sheet__money { margin: var(--space-3) var(--space-1) 0; }
/* The breakdown under the steps: for the agent, the fee, the total. */
.pcards-sheet__sum {
  margin: 0 calc(-1 * var(--space-1)) var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-primary);
}
.pcards-sheet__sumrow {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}
.pcards-sheet__sumrow dt, .pcards-sheet__sumrow dd { margin: 0; }
.pcards-sheet__sumrow dd { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pcards-sheet__sumrow--total {
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--an-line);
  font-weight: 700;
  color: var(--text-primary);
}
.pcards-sheet__money p {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}
.pcards-sheet__by { margin: var(--space-1) 0 0; font-size: var(--text-base); color: var(--text-secondary); }
.pcards-sheet__approve {
  display: block;
  width: 100%;
  height: 54px;
  margin-top: var(--space-5);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--an-go);
  color: var(--color-gray-800);
  font-family: inherit;
  font-size: var(--text-lg);
  font-weight: 700;
  cursor: pointer;
}
.pcards-sheet__approve:focus-visible { outline: 3px solid var(--an-purple); outline-offset: 2px; }

/* The plan's steps under the plan card (and in the /home deck's Details
   sheet under it), one line each, the money lines, and Approve after them
   (Steven 2026-10-13). The rows are the step cards' plan list
   (.sc-plan, css/pages/step-cards.css). */
.pcards-steps { gap: 0; }
.pcards__plan .pcards-steps { margin-top: var(--space-4); padding: 0 var(--space-1); }
.pcards-steps .sc-sheet__label { margin-top: 0; }

/* The step dashes on the proposal and plan cards: one per step of the walk,
   evenly spaced edge to edge with equal gaps, the done ones filled. */
.pcards .tb-card__dashes { display: flex; width: 100%; gap: var(--space-2); }
.pcards .tb-card__dashes > span { flex: 1 1 0; min-width: 0; }

/* The flip is THE agent card, the dark one every flip to an agent draws
   (cards/_agent_side.html agent_card, static/cards/agent-side.css): the
   proposal cards keep no profile rules of their own. */

/* THE ROWS ON A CARD'S BACK (the deck card's Proposals back, cards/_card.html
   _proposals_back): the same rows, a step tighter, on the card's sheet. */
.tb-card__back--proposals .pcards__minis { gap: var(--space-2); }
.tb-card__back--proposals .an-row { box-shadow: 0 0 0 1px var(--border-default); }

@media (prefers-reduced-motion: reduce) {
  .pcard-full, .pcard-full__card,
  .pcard-full.is-from-next .pcard-full__card,
  .pcard-full.is-from-prev .pcard-full__card { animation: none; transition: none; }
}

/* ---- THE PROPOSAL CARD, 2026-10-14 MORNING (Steven, his phone shots of a
   bidding want) -----------------------------------------------------------
   SWIPE UP FOR THE NEXT PLAN ("those three dots make me think I should be
   able to swipe up to see the next proposals just like on the deck, but I
   can't"): a plan a swipe up opens comes up from below, one a swipe down
   opens comes down from above (proposal-cards.js, is-from-below /
   is-from-above), the way the deck moves. THE PITCH ("the text is supposed
   to be a little bit longer explaining what they're going to do in short"):
   up to PITCH_CHARS of the agent's own words on the white panel, a step
   quieter than a heading's body so the picture keeps its room. */
.pcard-full.is-from-below .pcard-full__card { animation: pcard-from-below .24s cubic-bezier(.2, .7, .2, 1); }
.pcard-full.is-from-above .pcard-full__card { animation: pcard-from-above .24s cubic-bezier(.2, .7, .2, 1); }
@keyframes pcard-from-below { from { opacity: .4; transform: translateY(24%); } to { opacity: 1; transform: none; } }
@keyframes pcard-from-above { from { opacity: .4; transform: translateY(-24%); } to { opacity: 1; transform: none; } }
.pcard-full .tb-card__front .tb-card__body { font-size: var(--text-base); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .pcard-full.is-from-below .pcard-full__card,
  .pcard-full.is-from-above .pcard-full__card { animation: none; }
}