.verbal-introspection {
  max-width: 980px; margin: 0 auto;

  .vi-main { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
  .vi-left { flex: auto; position: relative; }
  .vi-right { flex: 1; }
  .axis-label { font-size: var(--fs-small); }
  .fig-title {  
    margin-bottom: 10px; }

  .tok-hit { background: transparent; }
  /* extends shared .prompt-block */
  .vi-prompt { margin-bottom: 24px; }
  .vi-turn + .vi-turn { margin-top: 1.2em; }
  .vi-turn { white-space: normal; }

  .vi-cols { display: grid; grid-template-columns: 1fr;
    gap: 12px; align-items: start; }
  /* extends shared .bar-table — smaller mono, no row dividers */
  .vi-col h6 { margin: 0 0 4px; font-size: var(--fs-label);
    color: var(--text); font-weight: 400; line-height: 1.3;
    min-height: 2.6em; }
  .vi-col .bar-row { font-size: var(--fs-small); height: 1.45em; line-height: 1.45; }
  .vi-col .bar-row + .bar-row { border-top: none; }
  .vi-col .bar-row .bar { top: 1px; bottom: 1px; background: var(--gray-200); }

  /* mobile-first: stacked single column by default; side-by-side at 880px */
  @container (min-width: 880px) {
    .vi-cols { grid-template-columns: repeat(3, 1fr); }
    .vi-main { flex-direction: row; }
    .vi-left { flex: 0 0 600px; }
  }
}