/* question_editor_html — the Edit tab's ordered MCQ editor.

   Anvil's server strips the text out of a <style> block in an HTML template,
   so this is a head-loaded asset (anvil.yaml native_deps.head_html). Every
   rule is scoped `:where(.qe-root)`, which adds no specificity. `.qe-root`
   itself is the wrapper root around the form's three top-level nodes and is
   a bare class.

   `.qe-root` declares no `display`: the Edit tab mounts this form into a flex
   column panel and `.qe-shell` neither grows nor sets a height, so a plain
   block between them changes no box.

   `.qe-confirm-overlay` keeps `position: fixed` — it is a modal overlay that
   deliberately takes the viewport, not a screen root, and this form's root is
   not a flex item in the layout scroller. `position: relative` on `.qe-root`
   is not a containing block for a fixed child, so the overlay still anchors to
   the viewport.

   No designer gate: every hiding rule here (`.qe-confirm-overlay`,
   `.qe-file-input`, `.qe-q-body.collapsed`) is that node's base state, and a
   leaf has no live class of its own to gate on.

   `.qe-` is this form's prefix and appears in no other form or asset, so
   loading these rules app-wide from the head reaches nothing else. */

.qe-root {
  position: relative;
}

:where(.qe-root) .qe-shell {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  color: #1e293b;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}
:where(.qe-root) .qe-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
}
:where(.qe-root) .qe-h3 { font-size: 1.05rem; font-weight: 700; margin: 0; color: #0f172a; }
:where(.qe-root) .qe-h3 .qe-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem; color: #94a3b8; text-transform: uppercase;
  letter-spacing: .08em; margin-left: 8px; font-weight: 500;
}
:where(.qe-root) .qe-spacer { flex: 1 1 auto; }
:where(.qe-root) .qe-btn {
  padding: 6px 14px; border: 1px solid #cbd5e1; border-radius: 8px;
  background: #ffffff; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: #334155;
}
:where(.qe-root) .qe-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }
:where(.qe-root) .qe-btn:disabled { opacity: 0.5; cursor: not-allowed; }
:where(.qe-root) .qe-btn-primary {
  padding: 7px 16px; border: 1px solid #1d4ed8; border-radius: 8px;
  background: #1d4ed8; cursor: pointer; font-size: 0.88rem; font-weight: 700; color: #ffffff;
}
:where(.qe-root) .qe-btn-primary:hover:not(:disabled) { background: #1e40af; border-color: #1e40af; }
:where(.qe-root) .qe-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
:where(.qe-root) .qe-btn-danger {
  padding: 6px 14px; border: 1px solid #dc2626; border-radius: 8px;
  background: #ffffff; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: #b91c1c;
}
:where(.qe-root) .qe-btn-danger:hover:not(:disabled) { background: #fef2f2; border-color: #b91c1c; }
:where(.qe-root) .qe-btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* Question card */
:where(.qe-root) .qe-q {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
/* Head-link tie. edit_tab_html's `.et-invalid { background: #fef2f2 }`
   (0,1,0) ties `.qe-q` (0,1,0), and link order would decide it.
   `applyViolationBorders`
   puts `et-invalid` on the `.qe-q` card whenever a violation field has no
   `[data-violation-field]` node of its own (e.g. `questions[N].answers`, from
   a question with no correct answer ticked), so the card would paint pink.
   The compound selector (0,2,0) wins on specificity instead and keeps it
   white. The red `border-color` is `!important` on et's side and applies. */
:where(.qe-root) .qe-q.et-invalid { background: #ffffff; }

:where(.qe-root) .qe-q.dragging { opacity: 0.4; }
:where(.qe-root) .qe-q.drag-over { border-color: #1d4ed8; box-shadow: 0 0 0 2px rgba(29,78,216,0.15); }

:where(.qe-root) .qe-q-head {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}
:where(.qe-root) .qe-q-head:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; border-radius: 6px; }
:where(.qe-root) .qe-q-preview {
  flex: 1 1 auto; min-width: 0;
  font-size: 0.95rem; color: #334155; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:where(.qe-root) .qe-q-preview.empty { color: #94a3b8; font-style: italic; }
:where(.qe-root) .qe-q-chevron {
  flex: 0 0 auto;
  color: #94a3b8; font-size: 0.95rem;
  transition: transform 0.15s ease;
}
:where(.qe-root) .qe-q-head[aria-expanded="true"] .qe-q-chevron { transform: rotate(180deg); }
:where(.qe-root) .qe-q-body { display: flex; flex-direction: column; gap: 12px; }
:where(.qe-root) .qe-q-body.collapsed { display: none; }
:where(.qe-root) .qe-drag {
  flex: 0 0 auto;
  padding: 4px 8px; cursor: grab;
  color: #94a3b8; font-size: 1.1rem; font-weight: 700;
  border-radius: 6px; user-select: none;
  background: #f8fafc; border: 1px solid #e2e8f0;
}
:where(.qe-root) .qe-drag:hover { color: #475569; background: #f1f5f9; }
:where(.qe-root) .qe-drag.disabled { cursor: not-allowed; opacity: 0.5; }
:where(.qe-root) .qe-q-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem; color: #64748b; font-weight: 700;
  background: #eff6ff; color: #1d4ed8;
  padding: 3px 8px; border-radius: 6px;
}
:where(.qe-root) .qe-q-actions {
  margin-left: auto;
  display: flex; gap: 6px;
}

:where(.qe-root) .qe-field { display: flex; flex-direction: column; gap: 4px; }
:where(.qe-root) .qe-field-label {
  font-size: 0.7rem; color: #64748b; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700;
}
:where(.qe-root) .qe-input, :where(.qe-root) .qe-textarea, :where(.qe-root) .qe-select {
  padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px;
  font-size: 0.95rem; background: #ffffff; box-sizing: border-box;
  width: 100%; font-family: inherit; color: #0f172a;
}
:where(.qe-root) .qe-input:focus, :where(.qe-root) .qe-textarea:focus, :where(.qe-root) .qe-select:focus {
  outline: none; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,0.12);
}
/* Same tie: et's `[data-violation-field].et-invalid { outline: 2px solid
   #dc2626 }` (0,2,0) ties the focus rule above (0,2,0), so without this rule
   a focused invalid prompt or type could keep a red outline.
   Both nodes always carry `data-violation-field`. */
:where(.qe-root) .qe-textarea.et-invalid:focus, :where(.qe-root) .qe-select.et-invalid:focus {
  outline: none;
}
:where(.qe-root) .qe-input:disabled, :where(.qe-root) .qe-textarea:disabled, :where(.qe-root) .qe-select:disabled {
  background: #f8fafc; color: #94a3b8; cursor: not-allowed;
}
:where(.qe-root) .qe-textarea { resize: vertical; min-height: 64px; }

:where(.qe-root) .qe-grid {
  display: grid; grid-template-columns: 1fr 200px; gap: 12px;
}

:where(.qe-root) .qe-type-changed-notice {
  padding: 6px 10px; border-radius: 6px;
  background: #fef3c7; color: #92400e;
  font-size: 0.82rem; font-weight: 600;
}

/* Image block */
:where(.qe-root) .qe-image-block {
  border: 1px dashed #cbd5e1; border-radius: 8px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; background: #fafafa;
}
:where(.qe-root) .qe-image-row { display: flex; align-items: center; gap: 10px; }
:where(.qe-root) .qe-image-thumb {
  max-width: 120px; max-height: 80px; border-radius: 6px;
  border: 1px solid #e2e8f0;
}
:where(.qe-root) .qe-image-info { flex: 1 1 auto; font-size: 0.85rem; color: #475569; }
:where(.qe-root) .qe-image-spinner { color: #64748b; font-size: 0.85rem; font-style: italic; }
:where(.qe-root) .qe-image-error { color: #b91c1c; font-size: 0.85rem; }
:where(.qe-root) .qe-file-input { display: none; }

/* Answer rows */
:where(.qe-root) .qe-answers { display: flex; flex-direction: column; gap: 6px; }
:where(.qe-root) .qe-ans {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: #ffffff;
}
:where(.qe-root) .qe-ans-correct {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.78rem; color: #475569; font-weight: 600;
  flex: 0 0 auto;
}
:where(.qe-root) .qe-ans-text { flex: 1 1 auto; padding: 4px 8px;
  border: 1px solid transparent; border-radius: 6px;
  font-size: 0.92rem; background: transparent;
  font-family: inherit; color: #0f172a;
}
:where(.qe-root) .qe-ans-text:focus { border-color: #cbd5e1; outline: none; background: #ffffff; }
/* Same tie as the prompt/type focus rule above. */
:where(.qe-root) .qe-ans-text.et-invalid:focus { outline: none; }
:where(.qe-root) .qe-ans-text:disabled { color: #94a3b8; }
:where(.qe-root) .qe-ans-del {
  flex: 0 0 auto; padding: 3px 8px;
  border: 1px solid #fecaca; border-radius: 6px;
  background: #ffffff; color: #b91c1c; cursor: pointer;
  font-size: 0.75rem; font-weight: 600;
}
:where(.qe-root) .qe-ans-del:hover:not(:disabled) { background: #fef2f2; }
:where(.qe-root) .qe-ans-del:disabled { opacity: 0.4; cursor: not-allowed; }
:where(.qe-root) .qe-ans-add {
  align-self: flex-start;
  padding: 5px 12px; border: 1px dashed #cbd5e1; border-radius: 6px;
  background: transparent; cursor: pointer; font-size: 0.85rem; color: #475569;
}
:where(.qe-root) .qe-ans-add:hover:not(:disabled) { background: #f8fafc; border-color: #94a3b8; }
:where(.qe-root) .qe-ans-add:disabled { opacity: 0.5; cursor: not-allowed; }

:where(.qe-root) .qe-empty {
  padding: 30px; text-align: center; color: #94a3b8;
  font-style: italic;
  background: #f8fafc; border-radius: 10px; border: 1px dashed #cbd5e1;
}

/* Confirm-delete inline overlay */
:where(.qe-root) .qe-confirm-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
  display: none; align-items: center; justify-content: center;
  padding: 20px; z-index: 9100;
}
:where(.qe-root) .qe-confirm-overlay.open { display: flex; }
:where(.qe-root) .qe-confirm-card {
  background: #ffffff; border-radius: 12px; padding: 18px 20px;
  width: min(420px, 100%); box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
:where(.qe-root) .qe-confirm-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; color: #0f172a; }
:where(.qe-root) .qe-confirm-body { font-size: 0.9rem; color: #475569; line-height: 1.5; margin-bottom: 14px; }
:where(.qe-root) .qe-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Mobile breakpoint — match PCS convention (email_management.css). */
@media (max-width: 768px) {
  :where(.qe-root) .qe-toolbar { flex-wrap: wrap; row-gap: 8px; }
  :where(.qe-root) .qe-toolbar .qe-btn,
  :where(.qe-root) .qe-toolbar .qe-btn-primary { min-height: 36px; }

  :where(.qe-root) .qe-q { padding: 12px; }

  /* Question header: drag + Q# + preview + chevron on top line,
     Duplicate/Delete wrap to second line under Q1/Q2 label. */
  :where(.qe-root) .qe-q-head { flex-wrap: wrap; row-gap: 8px; }
  :where(.qe-root) .qe-drag { order: 1; }
  :where(.qe-root) .qe-q-num { order: 2; }
  :where(.qe-root) .qe-q-preview { order: 3; flex: 1 1 0; min-width: 0; }
  :where(.qe-root) .qe-q-chevron { order: 4; }
  :where(.qe-root) .qe-q-actions {
    order: 5;
    margin-left: 0;
    width: 100%;
    flex-basis: 100%;
    gap: 8px;
    flex-wrap: wrap;
  }
  :where(.qe-root) .qe-q-actions .qe-btn,
  :where(.qe-root) .qe-q-actions .qe-btn-danger {
    min-height: 36px;
    padding: 8px 14px;
    flex: 0 1 auto;
  }

  /* Prompt + Type stack instead of sitting side-by-side. */
  :where(.qe-root) .qe-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Image block: thumb / actions stack vertically. */
  :where(.qe-root) .qe-image-row { flex-direction: column; align-items: stretch; }
  :where(.qe-root) .qe-image-thumb { max-width: 100%; max-height: 200px; align-self: flex-start; }
  :where(.qe-root) .qe-image-block .qe-btn,
  :where(.qe-root) .qe-image-block .qe-btn-danger { min-height: 36px; }

  /* Answers become cards; marker drops onto its own line under text. */
  :where(.qe-root) .qe-answers { gap: 0; }
  :where(.qe-root) .qe-ans {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    margin-bottom: 12px;
  }
  :where(.qe-root) .qe-ans-text {
    order: 1;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    padding: 10px 12px;
    font-size: 0.95rem;
    min-height: 40px;
  }
  :where(.qe-root) .qe-ans-correct {
    order: 2;
    align-self: flex-start;
    padding: 6px 0;
    font-size: 0.85rem;
  }
  :where(.qe-root) .qe-ans-correct input { transform: scale(1.2); margin-right: 6px; }
  :where(.qe-root) .qe-ans-del {
    order: 3;
    align-self: flex-end;
    min-height: 36px;
    min-width: 44px;
    padding: 8px 16px;
    font-size: 1rem;
  }
  :where(.qe-root) .qe-ans-add { min-height: 36px; padding: 10px 16px; align-self: stretch; text-align: center; }
}