/* ===========================================================================
   Codes.Live — yourinput.css
   The "Your input" button in a lesson's toolbar and its small form
   (core/yourinput.js): a popover under the button, a bottom sheet on phones.
   ========================================================================== */
.yi-btn { position: relative; }
.yi-btn.is-custom::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--indigo); box-shadow: 0 0 0 2px var(--bg);
}

.yi-pop {
  position: fixed; z-index: 80; width: min(380px, calc(100vw - 24px));
  max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border-strong); background: var(--elevated); color: var(--text);
  box-shadow: 0 24px 60px -26px rgba(0,0,0,.6), 0 2px 8px -4px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(-4px); transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.yi-pop.is-on { opacity: 1; transform: none; }
.yi-pop--sheet {
  left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 85vh;
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateY(8px);
}
.yi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.yi-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.yi-x {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--muted);
  transition: background var(--dur), color var(--dur);
}
.yi-x:hover { background: var(--surface-2); color: var(--text); }
.yi-x svg { width: 14px; height: 14px; }
.yi-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

.yi-fields { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.yi-field { display: flex; flex-direction: column; gap: 5px; }
.yi-label { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-dim); }
.yi-input { width: 100%; font-size: 13.5px; line-height: 1.5; }
textarea.yi-input { resize: vertical; min-height: 64px; white-space: pre; overflow-x: auto; }
.yi-hint { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.yi-field.is-bad .yi-input { border-color: var(--c-swap); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-swap) 18%, transparent); }
.yi-field.is-bad .yi-hint { display: none; }
.yi-err { font-size: 12.5px; line-height: 1.4; color: var(--c-swap); font-weight: 600; }
.yi-err:empty { display: none; }
.yi-err--form { margin-top: 10px; }
.yi-foot { margin-top: 14px; display: flex; justify-content: flex-end; gap: 8px; }

@media (prefers-reduced-motion: reduce) { .yi-pop { transition: none; } }