/* =========================================================================
   TradeKit Marketing — the homepage's product demos

   The four GSAP demos the kit section frames as HUD screens (.tk-screen,
   styles/home.css): js/agent-demo.js (a backtest in a chat with the AI
   trading agent), js/chart-demo.js (a trigger order on a trendline, which
   opens a reel of the blog's trigger demos: styles/blog-demos.css),
   js/replay-demo.js (a trade replay) and js/account-demo.js (the account
   page). They recreate the app's UI in the print voice: square, ruled in
   ink, hard offset shadows, every color a palette role or the kit's paper /
   ink names (styles/site.css), so every theme re-inks them. Text on a
   filled control picks black or white from --fill (see .tk-fill).

   Each draws on a fixed logical stage its script scales to fit the screen,
   so a phone shows the same picture as a desktop, only smaller: the chart
   and replay demos' .demo__stage is their SVG's 800×500 viewBox (the
   screen's 16:10), the agent demo's .agent is 800×500 too and the account
   demo's .acct is 800×450. Every size inside a stage is logical px.
   ========================================================================= */

.demo {
  position: relative;
  width: 100%;
  height: 100%;
}

.demo__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 800px;
  height: 500px;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

/* =========================================================================
   Chart demo — the SVG chart fills the stage; the context menu, tooltip
   and cursor are DOM overlays on it.
   ========================================================================= */
.demo__chart {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.demo__menu {
  position: absolute;
  z-index: 3;
  min-width: 130px;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  opacity: 0;
  transform-origin: 0 0;
  will-change: opacity, transform;
  pointer-events: none;
}

.demo__menu-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
}

.demo__menu-item:hover,
.demo__menu-item--active {
  --fill: var(--primary);
  background-color: var(--fill);
  color: var(--on-ink);
  color: oklch(from var(--fill) clamp(0, calc((0.6 - l) * 100000), 1) 0 0);
}

.demo__tooltip {
  position: absolute;
  z-index: 3;
  padding: 6px 12px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 3px 3px 0 0 var(--ink);
  opacity: 0;
  transform: translate(-60%, calc(-120% + 80px));
  will-change: opacity;
  pointer-events: none;
  white-space: nowrap;
}

/* The pointer: a translucent ink dot. */
.demo__cursor {
  position: absolute;
  z-index: 5;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ink) 60%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* =========================================================================
   Replay demo — play button, playback toolbar, markers, tooltips, PnL.
   ========================================================================= */
.demo__play-btn {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Square; the icon (45%) tracks the box. */
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* An ink block with a paper icon, so it pops against the chart like a
     video player's in every palette. */
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
}

.demo__play-btn svg {
  width: 45%;
  height: 45%;
}

/* Playback toolbar (bottom bar, ~50px) */
.demo__toolbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  background: var(--paper-2);
  border-top: 1px solid var(--border);
  pointer-events: none;
}

.demo__toolbar-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.demo__toolbar-speeds {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.demo__toolbar-speed {
  padding: 3px 6px;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  cursor: pointer;
}

.demo__toolbar-speed.active {
  --fill: var(--primary);
  background-color: var(--fill);
  color: var(--on-ink);
  color: oklch(from var(--fill) clamp(0, calc((0.6 - l) * 100000), 1) 0 0);
}

.demo__toolbar-scrubber {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.demo__toolbar-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border);
}

.demo__toolbar-fill {
  position: absolute;
  left: 0;
  height: 3px;
  background: var(--primary);
  width: 0;
}

.demo__toolbar-knob {
  position: absolute;
  width: 11px;
  height: 11px;
  background: var(--primary);
  left: 0;
  transform: translateX(-50%);
}

.demo__toolbar-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Entry/Exit markers (CSS triangles) */
.demo__marker {
  position: absolute;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

.demo__marker--entry {
  border-bottom: 8px solid var(--ink);
}

.demo__marker--exit {
  border-top: 8px solid var(--ink);
}

/* Entry/Exit tooltips (same as the chart demo's tooltip) */
.demo__entry-tooltip,
.demo__exit-tooltip {
  position: absolute;
  z-index: 3;
  padding: 6px 12px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 3px 3px 0 0 var(--ink);
  opacity: 0;
  transform: translate(-50%, -100%);
  pointer-events: none;
  white-space: nowrap;
}

/* PnL display (upper right) */
.demo__pnl {
  position: absolute;
  z-index: 3;
  top: 0.5rem;
  right: 0.75rem;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
}

/* =========================================================================
   Account demo — a scaled-down recreation of the app's account page,
   driven by js/account-demo.js. The stage is a fixed 800×450 logical
   canvas scaled to fit the screen (transform set by JS); every size below
   is logical px.
   ========================================================================= */
.acct {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 800px;
  height: 450px;
  transform-origin: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  background: var(--paper);
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Header — Account title, short wallet, Withdraw / Deposit buttons. */
.acct__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  flex-shrink: 0;
}

.acct__head-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.acct__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.acct__wallet {
  font-size: 10.5px;
  color: var(--ink-soft);
}

.acct__head-btns {
  display: flex;
  gap: 8px;
}

.acct__btn {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  padding: 5px 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  cursor: default;
}

/* The primary action: an ink block, like the site's buttons. */
.acct__btn--primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* Metric cards — Account Value / Withdrawable / Margin Used / Open Notional. */
.acct__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  height: 56px;
  flex-shrink: 0;
}

.acct__card {
  background: var(--paper-2);
  border: 1px solid var(--border);
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  overflow: hidden;
}

.acct__label {
  font-size: 10px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.acct__value {
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}

/* Chart card — mode toggle, TWR headline, window tabs, the chart itself. */
.acct__chart-card {
  height: 182px;
  flex-shrink: 0;
  background: var(--paper-2);
  border: 1px solid var(--border);
  padding: 10px 11px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acct__chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 54px;
}

.acct__chart-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.acct__toggle {
  display: flex;
  gap: 4px;
}

.acct__toggle-btn,
.acct__win,
.acct__tab {
  font-family: var(--font-mono);
  line-height: 1;
  padding: 4px 12px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: default;
  white-space: nowrap;
}

.acct__toggle-btn.is-active,
.acct__win.is-active,
.acct__tab.is-active {
  background: var(--border);
  color: var(--ink);
}

.acct__headline {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.acct__headline-main {
  font-size: 20px;
  font-weight: 600;
}

.acct__headline-sub {
  font-size: 11px;
  color: var(--ink-soft);
}

.acct__windows {
  display: flex;
  gap: 4px;
}

.acct__win {
  font-size: 10.5px;
}

/* The chart — fixed logical size: a success 1.5px line, a 10%-alpha area
   to the 0% baseline, a dot on the live point, data max/min labels at the
   plot edges. */
.acct__chart-wrap {
  width: 744px;
  height: 100px;
}

.acct__chart {
  display: block;
  width: 744px;
  height: 100px;
}

.acct__baseline {
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0.35;
}

.acct__area {
  fill: var(--success);
  fill-opacity: 0.1;
}

.acct__line {
  fill: none;
  stroke: var(--success);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.acct__dot {
  fill: var(--success);
}

.acct__axis {
  fill: var(--ink);
  opacity: 0.5;
  font-family: var(--font-mono);
  font-size: 9px;
}

/* Tab bar — Positions active. */
.acct__tabs {
  display: flex;
  gap: 6px;
  height: 22px;
  flex-shrink: 0;
}

.acct__tab {
  font-size: 11px;
}

/* Positions table — the card clips the last row (scrollable feel). */
.acct__table {
  flex: 1;
  min-height: 0;
  background: var(--paper-2);
  border: 1px solid var(--border);
  padding: 6px 11px;
  box-sizing: border-box;
  overflow: hidden;
}

.acct__row {
  display: grid;
  grid-template-columns: 50px 62px minmax(80px, 1fr) 42px 78px 58px 58px 62px 78px 52px 62px;
  gap: 5px;
  align-items: center;
  height: 22px;
  white-space: nowrap;
}

.acct__row--head {
  height: 16px;
}

.acct__row--head .acct__cell {
  font-size: 9.5px;
  color: var(--ink-soft);
  text-align: right;
}

.acct__row--head .acct__cell--coin {
  text-align: left;
}

.acct__cell {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
}

.acct__num {
  text-align: right;
}

.acct__cell--coin {
  display: flex;
  align-items: center;
  gap: 5px;
}

.acct__cell--coin img {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.acct__pos {
  color: var(--success);
}

.acct__neg {
  color: var(--danger);
}

/* Live-tick flash — a brief tint on cells whose number just moved (green
   when it ticked up, red when down). */
@keyframes acct-flash-pos {
  from {
    background-color: color-mix(in srgb, var(--success) 16%, transparent);
  }

  to {
    background-color: transparent;
  }
}

@keyframes acct-flash-neg {
  from {
    background-color: color-mix(in srgb, var(--danger) 16%, transparent);
  }

  to {
    background-color: transparent;
  }
}

.acct .is-ticked-pos {
  animation: acct-flash-pos 0.45s ease-out;
}

.acct .is-ticked-neg {
  animation: acct-flash-neg 0.45s ease-out;
}

/* =========================================================================
   Agent demo — a chat with the AI trading agent, driven by
   js/agent-demo.js: the empty chat, the thread (the prompt as an ink block,
   the agent's status line and its result card), the composer, and the
   question that takes the composer's place. The stage is a fixed 800×500
   logical canvas scaled to fit the screen (transform set by JS); every size
   below is logical px.
   ========================================================================= */
.agent {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 800px;
  height: 500px;
  transform-origin: center;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Offscreen, the stage's CSS loops (the spinner, the stripes, the caret)
   pause with its timeline. */
.agent.is-paused,
.agent.is-paused * {
  animation-play-state: paused;
}

/* HUD micro-labels in the app's voice, so the // separators stay quiet ink
   (red is for down). */
.agent__hud {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
}

.agent__hud--ink {
  color: var(--ink);
}

.agent__sep {
  padding-inline: 0.5em;
  letter-spacing: 0;
  color: var(--ink-soft);
}

/* The agent's mark: the site's logo mark at chat size, an ink block with
   the italic TK in paper and the pink plate printed a few px off. */
.agent__mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 10px;
  line-height: 1;
  letter-spacing: -0.04em;
  box-shadow: 2px 2px 0 0 var(--ink-3);
}

.agent__mark--lg {
  width: 40px;
  height: 40px;
  font-size: 18px;
  box-shadow: 4px 4px 0 0 var(--ink-3);
}

/* The empty chat: the mark, a display masthead and a hint, centered over
   the composer. */
.agent__empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}

.agent__hello {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 44px;
  line-height: 0.86;
  letter-spacing: -0.025em;
  word-spacing: 0.1em;
  text-transform: uppercase;
}

.agent__hint {
  font-size: 13px;
  color: var(--ink-soft);
}

/* The thread. */
.agent__thread {
  position: absolute;
  left: 32px;
  right: 32px;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The prompt: right-aligned, an ink block with paper type. */
.agent__prompt {
  align-self: flex-end;
  max-width: 440px;
  padding: 9px 14px;
  background: var(--ink);
  color: var(--paper);
}

.agent__turn {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The status line: the mark, the app's stepped spinner (a check once it's
   done), what the agent is doing and, for the backtest, its meter. */
.agent__status {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 22px;
  font-size: 13px;
  white-space: nowrap;
}

.agent__state {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.agent__state svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.agent__spin {
  animation: agent-spin 0.8s steps(8) infinite;
}

.agent__check {
  color: var(--success);
}

.agent__status:not(.is-done) .agent__check,
.agent__status.is-done .agent__spin {
  display: none;
}

@keyframes agent-spin {
  to {
    transform: rotate(360deg);
  }
}

.agent__meter {
  display: flex;
  gap: 2px;
}

.agent__meter i {
  width: 6px;
  height: 11px;
  background: var(--ink-faint);
}

.agent__meter i.is-lit {
  background: var(--ink);
}

.agent__pct {
  min-width: 4ch;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* The result card: a ruled panel on paper-2 (the app's Card) with a HUD
   header, the chart and a ruled row of stats. */
.agent__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--rule-soft);
  background: var(--paper-2);
}

.agent__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 14px;
}

.agent__legend {
  display: flex;
  gap: 16px;
}

.agent__legend i {
  display: inline-block;
  width: 16px;
  margin-right: 7px;
  vertical-align: middle;
  border-top: 2px solid var(--success);
}

.agent__legend i.is-bh {
  border-top: 2px dashed var(--ink-soft);
}

/* The chart — fixed logical size (the card's inner width): the strategy as
   a 2px success line over a 10%-alpha area to the 0% baseline, buy & hold
   dashed in soft ink, a dashed rule at each year. */
.agent__plot {
  position: relative;
  height: 118px;
}

.agent__chart {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.agent__grid {
  stroke: var(--rule-soft);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.agent__base {
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0.35;
}

.agent__area {
  fill: var(--success);
  fill-opacity: 0.1;
}

.agent__line {
  fill: none;
  stroke: var(--success);
  stroke-width: 2;
  stroke-linejoin: round;
}

.agent__bh {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.agent__dot {
  fill: var(--success);
}

/* The hero trigger's ripple ring, once, when the result lands. */
.agent__ring {
  fill: none;
  stroke: var(--ink-6);
  stroke-width: 2;
}

.agent__year {
  fill: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* The end chips on the axis, like the chart's price chips: the strategy's
   in go green, buy & hold's outlined. */
.agent__chip {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 18px;
  padding-inline: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.agent__chip--strat {
  --fill: var(--ink-6);
  background-color: var(--fill);
  color: var(--on-ink);
  color: oklch(from var(--fill) clamp(0, calc((0.6 - l) * 100000), 1) 0 0);
}

.agent__chip--bh {
  border: 1px solid var(--ink-soft);
  background: var(--paper-2);
  color: var(--ink-soft);
}

.agent__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule-soft);
}

.agent__stat {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 14px 0;
  border-left: 1px solid var(--rule-soft);
}

.agent__stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.agent__val {
  position: relative;
  height: 17px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.agent__up {
  color: var(--success);
}

.agent__down {
  color: var(--danger);
}

/* Loading: the app's skeleton, marching diagonal stripes (the armed motif;
   tk-march is home.css's, as the hero trigger marches). */
.agent__skel {
  position: absolute;
  inset: 0;
  background-color: var(--ink-faint);
  background-image: repeating-linear-gradient(-45deg, var(--ink-faint) 0 4px, transparent 4px 9px);
  background-size: 12.73px 100%;
  animation: tk-march 0.6s linear infinite;
  pointer-events: none;
}

.agent__val .agent__skel {
  right: auto;
  width: 76px;
}

/* The composer: a square field (the app's: a soft hairline at rest, ink
   with focus) that grows a line as the prompt wraps, and the send button. */
.agent__composer {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 18px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--rule-soft);
  background: var(--paper-2);
}

.agent__composer.is-focus {
  border-color: var(--ink);
}

.agent__input {
  flex: 1;
  min-width: 0;
  padding-block: 6px;
}

.agent__typed {
  white-space: pre-wrap;
}

.agent__placeholder {
  color: var(--ink-soft);
}

.agent__composer.is-typed .agent__placeholder {
  display: none;
}

/* The caret blinks in hard steps while the field has focus, and holds
   steady while it types. */
.agent__caret {
  display: none;
  width: 2px;
  height: 17px;
  margin-inline: 1px;
  vertical-align: -4px;
  background: var(--ink);
  animation: agent-caret 1s steps(1, end) infinite;
}

.agent__composer.is-focus .agent__caret {
  display: inline-block;
}

.agent__composer.is-typing .agent__caret {
  animation: none;
}

@keyframes agent-caret {
  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

/* Send: muted while the field is empty, an ink block with a prompt to
   send, sun ink as it's pressed, a stop square while the agent works. */
.agent__send {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  background: var(--ink-faint);
  color: var(--ink-soft);
}

.agent__send svg {
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
}

.agent__send.is-ready,
.agent__send.is-busy {
  --fill: var(--ink);
  background-color: var(--fill);
  color: var(--paper);
  color: oklch(from var(--fill) clamp(0, calc((0.6 - l) * 100000), 1) 0 0);
}

.agent__send.is-press {
  --fill: var(--ink-2);
  background-color: var(--fill);
  color: var(--on-ink);
  color: oklch(from var(--fill) clamp(0, calc((0.6 - l) * 100000), 1) 0 0);
}

.agent__send-stop,
.agent__send.is-busy .agent__send-go {
  display: none;
}

.agent__send.is-busy .agent__send-stop {
  display: block;
}

/* The question (the app's questionnaire): a framed panel in the composer's
   place, four lettered choices in a 2×2 grid, D the field for an answer of
   your own. Hover is the --ink-faint wash, the pick an ink fill. */
.agent__ask {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ink);
  background: var(--paper-2);
}

.agent__ask-title {
  font-weight: 600;
}

.agent__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.agent__choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 34px;
  padding-inline: 7px 12px;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  white-space: nowrap;
}

.agent__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent__choice--own .agent__label {
  color: var(--ink-soft);
}

/* A choice's letter key, the questionnaire's shortcut. */
.agent__key {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.agent__choice.is-hover {
  border-color: var(--ink);
  background: var(--ink-faint);
}

.agent__choice.is-picked {
  --fill: var(--ink);
  border-color: var(--fill);
  background-color: var(--fill);
  color: var(--paper);
  color: oklch(from var(--fill) clamp(0, calc((0.6 - l) * 100000), 1) 0 0);
}