/* Admin visual lesson editor — pencils, popovers, undo toast. See editor.js */

/* ── page chrome ───────────────────────────────────────── */
.ve-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ve-title { font-weight: 700; font-size: 16px; }
.ve-title span { font-weight: 500; color: var(--accent); }
.ve-hint { font-size: 12px; color: var(--text3); flex-basis: 100%; }
.ve-body { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.ve-pages { position: sticky; top: 68px; display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 90px); overflow-y: auto; }
.ve-page-btn { text-align: left; padding: 8px 10px; border-radius: var(--r); border: 1.5px solid transparent; background: transparent; cursor: pointer; font-size: 13px; color: var(--text2); display: flex; gap: 8px; }
.ve-page-btn:hover { background: var(--bg2); }
.ve-page-btn.active { background: var(--accent-s); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.ve-page-btn .n { color: var(--text4); min-width: 18px; }
.ve-canvas { min-width: 0; max-width: 900px; }
@media (max-width: 900px) { .ve-body { grid-template-columns: 1fr; } .ve-pages { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; } }

/* ── pencils and editable elements ─────────────────────── */
.ed-pencil { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0 3px; padding: 0; vertical-align: middle; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--accent); font-size: 11px; line-height: 1; cursor: pointer; opacity: .6; transition: var(--t); }
.ed-pencil:hover { opacity: 1; background: var(--accent); color: #fff; border-color: var(--accent); }
.ed-pencil-lbl { width: auto; height: auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.ed-el { border-radius: 3px; transition: background var(--t); }
.ed-el:hover { background: var(--accent-m); }
.ed-empty { display: inline-block; padding: 0 6px; border: 1px dashed var(--border2); border-radius: 4px; color: var(--text4); font-size: 11px; font-style: italic; }
.ed-tools { display: flex; gap: 6px; margin-top: 4px; }
.ed-answer { display: inline-block; margin: 0 4px; padding: 1px 7px; border-radius: 999px; background: var(--green-s); color: var(--green); border: 1px solid rgba(5,150,105,.25); font-size: 11px; font-weight: 600; vertical-align: middle; }
.ed-answer-missing { background: var(--amber-s); color: var(--amber); border-color: rgba(217,119,6,.3); }
.ed-correct { border-color: var(--green) !important; background: var(--green-s) !important; }
.ed-exbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--border); font-size: 11px; }
.ed-exbar-type { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); }
.ed-exbar-note { color: var(--amber); }
.ed-exbar-tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ed-btn { padding: 3px 9px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text2); font-size: 11px; cursor: pointer; }
.ed-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── popover ───────────────────────────────────────────── */
.ed-pop { position: absolute; z-index: 1000; width: 380px; max-width: calc(100vw - 16px); background: var(--surface); border: 1.5px solid var(--border2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 14px; }
.ed-pop-wide { width: 480px; }
.ed-pop-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin-bottom: 10px; }
.ed-pop-body .label { margin-top: 10px; }
.ed-pop-body .label:first-child { margin-top: 0; }
.ed-pop-err { margin-top: 10px; padding: 7px 10px; border-radius: var(--r); background: var(--red-s); color: var(--red); font-size: 12px; }
.ed-pop-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.ed-fmt { display: flex; gap: 4px; margin-bottom: 6px; }
.ed-fmt button { width: 28px; height: 26px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); cursor: pointer; }
.ed-fmt button:hover { border-color: var(--accent); }
.ed-help { margin-top: 6px; font-size: 11px; color: var(--text4); }
.ed-ta { font-size: 13px; min-height: 0; }
.ed-list-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ed-list-row .input { flex: 1; }
.ed-list-row input[type=radio] { flex-shrink: 0; }
.ed-list-row .ed-x { border: none; background: transparent; color: var(--text4); cursor: pointer; font-size: 14px; }
.ed-list-row .ed-x:hover { color: var(--red); }
.ed-or { text-align: center; font-size: 11px; color: var(--text4); margin: 8px 0; }
.ed-media-preview { margin-bottom: 10px; }
.ed-media-preview img { max-width: 100%; max-height: 160px; border-radius: 6px; display: block; }
.ed-media-preview audio, .ed-media-preview video { width: 100%; max-height: 180px; }
.ed-progress { height: 6px; margin-top: 10px; background: var(--bg2); border-radius: 3px; overflow: hidden; }
.ed-progress > div { height: 100%; width: 0; background: var(--accent); transition: width .15s; }
.ed-pair-row { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.ed-pair-row select { width: 100%; }

/* ── undo toast and history ────────────────────────────── */
.ed-undo { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1100; display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #111827; color: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); font-size: 13px; }
.ed-undo button { border: none; background: transparent; color: #93c5fd; font-weight: 700; font-size: 13px; cursor: pointer; }
.ed-undo button:hover { text-decoration: underline; }
.ed-hist { display: flex; flex-direction: column; gap: 8px; }
.ed-hist-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); }
.ed-hist-row > div:first-child { flex: 1; min-width: 0; }
.ed-hist-label { font-size: 13px; font-weight: 500; }
.ed-hist-meta { font-size: 11px; color: var(--text4); }

/* ── layout touch-ups while editing ────────────────────── */
.ed-exbar + .exercise-type-label { display: none; }          /* the bar already names the type */
.ed-pencil svg { display: block; }
.exercise-item:has(.ed-exbar) .choice-opt { flex-wrap: nowrap; }
.exercise-item:has(.ed-exbar) .choice-opt > span { display: inline-flex; align-items: center; white-space: nowrap; }
.exercise-item:has(.ed-exbar) .choice-list-options { align-items: flex-start; }
.ed-tools .ed-pencil-lbl, .choice-list-options > .ed-pencil-lbl, .mc-options + .ed-pencil-lbl { margin-top: 4px; align-self: flex-start; }

/* ── delete buttons, whole-exercise tools, type picker ─── */
.ed-del { color: var(--red); }
.ed-del:hover { background: var(--red); border-color: var(--red); color: #fff; }
.ed-btn-del { color: var(--red); }
.ed-btn-del:hover { border-color: var(--red); color: var(--red); background: var(--red-s); }
.ed-danger { color: var(--red); }
.ed-addbar { display: flex; gap: 10px; align-items: center; margin: 4px 0 40px; }
.ed-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ed-type { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1.5px solid var(--border); border-radius: var(--r); background: var(--surface); cursor: pointer; font-size: 12.5px; text-align: left; color: var(--text2); }
.ed-type:hover { border-color: var(--accent); background: var(--accent-s); color: var(--accent); }
.ed-type-ico { font-size: 16px; }
.ed-mv { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); cursor: pointer; flex-shrink: 0; }
.ed-mv:hover { border-color: var(--accent); color: var(--accent); }
.ed-check { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 13px; }
.ed-flash { animation: ed-flash 2.2s ease; }
@keyframes ed-flash { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); background: var(--accent-s); } 100% { box-shadow: 0 0 0 0 transparent; } }
.ed-list-row select { flex: 0 0 150px; }
@media (max-width: 700px) { .ed-types { grid-template-columns: repeat(2, 1fr); } }