/* ============================================================
   g2n-drill.css — gross → net teaching: the drill dialog
   (js/retinoscopy/learn/g2n-drill/, hosted in the ranked-exam
   overlay card, so .rx-sheet__head / .rx-btn / .rx-h3 come from
   ranked-exam-mode.css) and the motion-ring legend in free practice.
   Calm palette only (--ret-ok/with/against/info + ink/tint,
   neutrals). Logical properties; ≥ 44px targets; no horizontal
   scroll at 360px; numbers sit in LTR islands.
   ============================================================ */

.g2n { inline-size: min(100%, 600px); }
.g2n-sub { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-soft); }
.g2n-step {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--text-soft);
}
.g2n-dots { display: inline-flex; gap: 4px; }
.g2n-dots i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--border); }
.g2n-dots i[data-state="done"] { background: var(--accent); }
.g2n-dots i[data-state="now"] { background: var(--accent-strong); box-shadow: 0 0 0 2px var(--accent-tint); }

.g2n-card, .g2n-q, .g2n-result {
  padding: 14px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface-sunken);
  min-inline-size: 0; overflow-wrap: anywhere;
}
.g2n-card__p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--text); }
.g2n-card__p:last-child { margin-block-end: 0; }
.g2n-card__p code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; }
.g2n-last { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--text-soft); }
.g2n-last svg { flex: none; }

.g2n-facts { display: grid; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 15px; font-weight: 600; }
.g2n-facts__on { display: flex; align-items: flex-start; gap: 6px; color: var(--ret-info-ink); font-weight: 600; }
.g2n-facts__on svg { flex: none; margin-block-start: 3px; }

.g2n-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.g2n-opt {
  display: flex; align-items: center; gap: 10px;
  inline-size: 100%; min-block-size: 48px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text);
  font: inherit; text-align: start; cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.g2n-opt:hover:not([aria-disabled="true"]) { border-color: var(--accent); }
.g2n-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g2n-opt[aria-disabled="true"] { cursor: default; }
.g2n-opt__key {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 26px; block-size: 26px; border-radius: 8px;
  background: var(--surface-sunken); color: var(--text-soft); font-size: 12px; font-weight: 800;
}
.g2n-opt__rx { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 15px; white-space: nowrap; min-inline-size: 0; }
.g2n-opt svg { flex: none; margin-inline-start: auto; }
.g2n-opt[data-state="right"] { border-color: var(--ret-ok); background: var(--ret-ok-tint); color: var(--ret-ok-ink); }
.g2n-opt[data-state="right"] .g2n-opt__key { background: var(--ret-ok); color: #fff; }
.g2n-opt[data-state="wrong"] { border-color: var(--ret-against); background: var(--ret-against-tint); color: var(--ret-against-ink); }
.g2n-opt[data-state="wrong"] .g2n-opt__key { background: var(--ret-against); color: #fff; }

.g2n-live:empty { display: none; }
.g2n-fb {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  font-size: 14px; line-height: 1.55;
}
.g2n-fb svg { flex: none; margin-block-start: 3px; }
.g2n-fb[data-ok="true"] { background: var(--ret-ok-tint); color: var(--ret-ok-ink); }
.g2n-fb[data-ok="false"] { background: var(--ret-with-tint); color: var(--ret-with-ink); }
.g2n-result .rx-h3 { font-size: 18px; }
.g2n-traps__h { margin: 12px 0 4px; font-size: 13px; font-weight: 700; color: var(--text-soft); }
.g2n-traps { margin: 0; padding-inline-start: 20px; font-size: 14px; line-height: 1.55; }
.g2n-actions .rx-btn { flex: 1 1 150px; }

@media (max-width: 480px) {
  .g2n-opts { grid-template-columns: minmax(0, 1fr); }
  .g2n-card, .g2n-q, .g2n-result { padding: 12px; }
}

/* ── Motion-ring legend (free practice; data-ret-modes="!exam") ───────── */
.ret-ring-legend .ret-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ret-ring-legend__keys { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--text-soft); }
.ret-ring-legend__keys li { display: inline-flex; align-items: center; gap: 6px; }
.ret-ring-legend__keys i { inline-size: 12px; block-size: 12px; border-radius: 50%; border: 3px solid currentColor; flex: none; }
.ret-ring-legend__keys [data-k="with"] i { color: var(--ret-with); }
.ret-ring-legend__keys [data-k="against"] i { color: var(--ret-against); }
.ret-ring-legend__keys [data-k="neutral"] i { color: var(--ret-ok); }
html[data-ret-exam="on"] .ret-ring-legend { display: none !important; }

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