/*! © 2026 Nuvira Technologies, LLC. All rights reserved. WonderWise, its tutors, artwork, voices, lessons and software may not be copied, scraped or reused. See /terms. */
/* Circle the problem: freehand capture layer and the confirm chip. Colours come from brand.css. */
.circle-problem-host { position: relative; }
.circle-capture {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; cursor: crosshair; z-index: 3;
}
.circle-capture.is-off { pointer-events: none; cursor: default; }
.circle-capture-stroke {
  fill: none; stroke: var(--coral, #EF8A6F); stroke-width: 6px; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .9;
}
.circle-chip {
  position: absolute; z-index: 5; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center;
  max-width: min(92%, 360px); padding: 8px; border-radius: 999px;
  background: var(--paper, #fff); box-shadow: 0 6px 20px rgba(23, 50, 77, .18);
  font-family: var(--font, system-ui, sans-serif); line-height: 1.2;
}
.circle-chip button {
  min-height: 44px; padding: 0 18px; border-radius: var(--action-radius); border: 2px solid var(--action-border);
  font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer;
}
.circle-chip-go { background: var(--action-primary); color: #fff; }
.circle-chip-go:hover:not(:disabled) { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
.circle-chip-go:active:not(:disabled) { background: var(--action-primary-pressed); }
.circle-chip-cancel { background: var(--action-secondary-bg); color: var(--ink); }
.circle-chip-cancel:hover:not(:disabled) { background: var(--action-selected); }
.circle-chip-cancel:active:not(:disabled) { background: var(--sage); }
.circle-chip button:focus-visible { outline: 3px solid var(--focus, #F2B544); outline-offset: 2px; }
.circle-chip-note { margin: 0 8px; color: var(--ink, #17324D); font-size: 1rem; line-height: 1.35; }
.circle-chip:has(.circle-chip-note) { border-radius: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .circle-chip { animation: circle-chip-in .16s ease-out; }
  @keyframes circle-chip-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translateX(-50%); } }
}