.lens-inline, .lens-inline-reasoning {
  width: max-content; max-width: 100%; margin: 0 auto;
  /* fitMount needs the natural (wider-row) width to scale; per-figure
     max-width:100% otherwise wins over shared .fit-scaled{max-width:none}. */
  &.fit-scaled { max-width: none; }
  .figgrid { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
  .figgrid + .figgrid { margin-top: 16px; }
  @container (min-width: 1000px) { .figgrid { flex-direction: row; justify-content: center; } .panel { width: var(--panel-w, auto); } }
  .panel { display: flex; flex-direction: column; gap: 0; min-width: 0; position: relative;
           flex: 0 0 auto; border: 1px solid var(--rule); border-radius: 6px;
           padding: 10px 12px 12px; box-sizing: content-box; }
  .panel .mlabel { margin: 0 0 6px; }
  .prompt-para { margin: 0; font-size: var(--fs-small); white-space: pre; overflow-x: hidden; text-overflow: ellipsis; background: var(--bg-soft); padding: 4px 8px; border-radius: 3px; }
  .prompt-para.wrap { white-space: pre-wrap; text-overflow: clip; }
  .prompt-para .prompt-gloss { font-style: italic; color: var(--text-light); }
  /* prompt text sits above the connector swoop; the thin bg-colored stroke
     (painted under the fill) breaks the line where it passes behind a word */
  .prompt-para .ptok, .prompt-para .prompt-gloss {
    position: relative; z-index: 1;
    paint-order: stroke fill; -webkit-text-stroke: 2px var(--tok-bg);
  }

  svg.swoop { position: absolute; left: 0; top: 0; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }

  .body-row { display: flex; gap: 18px; align-items: center; }
  .body-row .prompt-para { flex: 0 0 auto; }
  .body-row .stacks { margin-top: 0; flex: 0 0 auto; flex-direction: column;
                      gap: 6px; min-height: 0; }

  .stacks { display: flex; gap: 12px; align-items: flex-start; justify-content: center; margin-top: 20px; min-height: 62px; position: relative; z-index: 1; }
  .stack { display: flex; flex-direction: column; gap: 0; background: #fff; min-width: 0; border: 1px solid var(--text-faint); border-radius: 5px; padding: 6px 10px; box-sizing: border-box; }
  .layer-row { display: flex; gap: 6px; align-items: center; height: 12px; }
  .llabel { width: 3ch; flex-shrink: 0; text-align: right; color: var(--text-light); font-family: var(--font-mono); font-size: var(--fs-label); }
  .top1 { font-family: var(--font-mono); font-size: var(--fs-label); width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rank { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-light); margin-left: -1ch; }

  /* margin-top: auto pushes captions to the panel bottom so they line up
     along the bottom edge across a row (figgrid panels stretch to row height) */
  .cap { font-size: var(--fs-figure); line-height: 1.5; color: var(--text-light);
         padding-top: 12px; margin-top: auto; }
  .cap .ckey { font-family: var(--font-mono); }
  .cap a.explore { color: var(--text-light); font-weight: normal; }
  .cap a.explore:hover { color: var(--text); }
}

/* verse/sentence prompts: break only at word boundaries — never split "night,↵" off its word */
.lens-inline-reasoning .prompt-para.wrap { word-break: normal; }