.lens-callout {
  font-family: var(--font-sans);

  .editbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: var(--fs-small); }
  .editbar label { display: flex; gap: 4px; align-items: center; color: var(--text-light); }
  .editbar input[type=number] { width: 5ch; font: inherit; }
  .editbar button { font: inherit; padding: 2px 8px; cursor: pointer; }
  .editbar .help { margin-left: auto; color: var(--text-faint); font-size: var(--fs-label); }

  textarea.cfg { width: 100%; box-sizing: border-box; font-family: var(--font-mono); font-size: var(--fs-label); margin-bottom: 10px; resize: vertical; }

  .stage { position: relative; }

  svg.lines { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
  svg.lines line { stroke: #999; stroke-width: 1; }

  .txt {
    font-family: var(--font-mono); font-size: var(--fs-body); line-height: 1.7;
    .src-line { display: block; position: relative; white-space: pre-wrap; word-break: break-word; }
    .line-toggle { position: absolute; left: 0; top: 0; width: 12px; text-align: center;
                   color: var(--text-faint); cursor: pointer; user-select: none; font-family: var(--font-sans); }
    .line-toggle:hover { color: var(--text); }
    .ptok { padding: 1px 0; border-radius: 2px; }
    .ptok.empty { color: var(--text-faint); }
    /* outline/bg come from the shared .tok-hit rule; re-assert its padding here
       because .ptok's `padding: 1px 0` outranks it */
    .ptok.tok-hit { padding: 0 2px; }
    .placeholder { color: var(--series-blue); display: inline-block; padding: 2px 0; outline: none; min-width: 1ch; }
    .gap-expand { color: var(--text-faint); cursor: pointer; padding: 0 4px; user-select: none; }
    .gap-expand:hover { color: var(--text); }
  }
  &.editing .txt .src-line { padding-left: 16px; }
  &.editing .txt .src-line:hover { background: #fafafa; }
  &.editing .txt .ptok { cursor: pointer; }
  &.editing .txt .ptok:hover { outline: 1px solid var(--text-light); outline-offset: -1px; }
  &.editing .txt .ptok.tok-hit:hover { outline: 1px solid var(--tok-hit-outline); }
  &.editing .txt .placeholder { padding-left: 16px; }

  .callout {
    position: absolute; background: #fff; border: 1px solid var(--text-faint);
    padding: 4px 6px; font-size: var(--fs-label); z-index: 2;
    .co-hdr { display: flex; gap: 4px; align-items: center; margin-bottom: 3px; cursor: move;
              padding-bottom: 3px; border-bottom: 1px solid var(--rule); user-select: none; }
    .co-hdr .co-ctx { color: var(--text-light); font-family: var(--font-mono); }
    .co-hdr input { width: 5ch; font: inherit; font-family: var(--font-mono); padding: 1px 3px; -moz-appearance: textfield; }
    .co-hdr input::-webkit-inner-spin-button, .co-hdr input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    .co-hdr .del { margin-left: auto; cursor: pointer; color: var(--text-light); padding: 0 4px; }
    .co-hdr .del:hover { color: var(--text); }
    /* width:0 + min-width:100% so the caption wraps at whatever width the
       (nowrap) chip rows establish, instead of widening the box itself */
    .co-caption { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--text-light);
                  font-style: italic; margin: -2px 0 5px; line-height: 1.3;
                  white-space: normal; width: 0; min-width: 100%; box-sizing: border-box; }
    .co-row { display: flex; gap: 6px; align-items: center; height: 16px; white-space: nowrap; }
    .co-row .row-label { width: 3ch; text-align: right; color: var(--text-light);
                         font-family: var(--font-mono); font-variant-numeric: tabular-nums; flex-shrink: 0; }
    .co-row .lens-topk { flex: 1; min-width: 0; }
    .co-row .lenstk { font-size: var(--fs-label); padding: 0 4px; line-height: 14px; }
  }
  &.editing .callout { cursor: move; box-shadow: 0 1px 3px rgba(0,0,0,.1); }

  .note {
    position: absolute; font-size: var(--fs-small); z-index: 2;
    display: flex; gap: 4px; align-items: flex-start;
    .drag-handle { cursor: move; color: var(--text-faint); user-select: none; }
    .note-text { outline: none; min-width: 2ch; }
    .del { cursor: pointer; color: var(--text-faint); padding: 0 3px; }
    .del:hover { color: var(--text); }
  }

  &:not(.editing) .edit-only { display: none !important; }
}

.lens-callout-main {
  svg.lines { z-index: 0; }
  .txt {
    position: relative; z-index: 1;
    font-size: var(--fs-small); line-height: 1.4;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff;
    .ln { display: block; white-space: pre-wrap; word-break: break-word; }
    em { display: block; font-style: normal; color: var(--series-blue); }
    b.tok-hit { font-weight: normal; outline-color: #d62728; }
  }
  .callout { padding: 2px 4px; box-sizing: border-box; }
  .callout .co-row { overflow: hidden; height: 17px; }
  .callout .co-row .row-label { font-size: calc(var(--fs-label) + 1px); }
  .callout .co-row .lenstk { font-size: calc(var(--fs-label) + 1px); line-height: 15px; }
  &.editing .callout { cursor: move; }
}