/* J Online Classes 1.0.5 — rich lessons and auto-scored assessments */
.download-check {
  display: inline-flex !important;
  width: fit-content;
  align-items: center;
  gap: .55rem;
  color: #4b241c;
  font-size: .82rem !important;
  font-weight: 750 !important;
  cursor: pointer;
}
.download-check input { width: 17px; height: 17px; margin: 0; accent-color: #4b241c; }
.rich-editor-grid { align-items: start; }
.rich-editor { overflow: hidden; border: 1px solid #d9ccc2; border-radius: 13px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.rich-editor:focus-within { border-color: #c59629; box-shadow: 0 0 0 3px rgba(212,175,55,.14); }
.rich-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 7px; border-bottom: 1px solid #e8dfd8; background: #f7f3ef; }
.rich-toolbar button { display: grid; width: 34px; height: 32px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 7px; color: #4b241c; background: transparent; font-weight: 850; }
.rich-toolbar button:hover, .rich-toolbar button:focus-visible { border-color: #d9c7b9; background: #fff; outline: none; }
.rich-toolbar button:disabled { opacity: .45; cursor: not-allowed; }
.rich-surface { display: block; min-height: 270px; padding: 15px; color: #302a27; background: #fff; font-size: .94rem; font-weight: 450; line-height: 1.75; outline: none; overflow-wrap: anywhere; }
.rich-surface:empty::before { content: attr(data-placeholder); color: #9b918b; pointer-events: none; }
.rich-surface p { margin: 0 0 1em; }
.rich-surface ol, .rich-surface ul, .prose ol, .prose ul { padding-left: 1.5rem; margin: .7rem 0 1rem; }
.rich-surface li, .prose li { margin: .28rem 0; }

.answer-option-builder, .accepted-answer-builder { display: grid; gap: .7rem; padding: 1rem; border: 1px solid #e4d7ce; border-radius: 15px; background: #fbf8f5; }
.answer-option-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.answer-option-head > div { display: grid; gap: .15rem; }
.answer-option-head strong { color: #4b241c; font-size: .88rem; }
.answer-option-head small { color: #766860; font-size: .75rem; }
.answer-option-list, [data-accepted-list] { display: grid; gap: .55rem; }
.answer-option-row { display: grid; grid-template-columns: 28px 28px minmax(0,1fr) minmax(0,1fr) 34px; align-items: center; gap: .55rem; }
.answer-option-row > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #4b241c; background: #f3e7d8; font-size: .75rem; }
.answer-option-row input:not([type="radio"]), .accepted-answer-row input { min-width: 0; padding: .72rem .78rem; border: 1px solid #ddd1c8; border-radius: 9px; background: #fff; }
.answer-option-row > button, .accepted-answer-row > button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; color: #a72e2e; background: #f8eaea; font-size: 1.05rem; }
.answer-option-row > button:disabled, .accepted-answer-row > button:disabled { opacity: .28; cursor: not-allowed; }
.correct-answer-radio { display: grid !important; place-items: center; cursor: pointer; }
.correct-answer-radio input { position: absolute; opacity: 0; pointer-events: none; }
.correct-answer-radio span { display: block; width: 20px; height: 20px; border: 2px solid #baa99d; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #fff; }
.correct-answer-radio input:checked + span { border-color: #4b241c; background: #d4af37; }
.correct-answer-radio input:focus-visible + span { outline: 3px solid rgba(212,175,55,.25); outline-offset: 2px; }
.accepted-answer-row { display: grid; grid-template-columns: 30px minmax(0,1fr) minmax(0,1fr) 34px; align-items: center; gap: .55rem; }
.accepted-answer-row > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #fff; background: #187455; font-size: .75rem; }
.assignment-question-card { display: grid; gap: 1rem; padding: 1rem; border: 1px solid #e2d5cb; border-radius: 16px; background: linear-gradient(145deg,#fff,#fffaf4); }
.assignment-question-title { display: flex; align-items: center; gap: .7rem; }
.assignment-question-title span { padding: .35rem .5rem; border-radius: 6px; color: #4b241c; background: #f4b53f; font-size: .64rem; font-weight: 900; letter-spacing: .08em; }
.assignment-question-title strong { color: #412019; }

.assignment-stage.auto-scored { width: min(980px,calc(100% - 40px)); }
.assignment-stage .assignment-meta { grid-template-columns: repeat(3,minmax(0,1fr)); }
.assignment-introduction { padding-bottom: 1.4rem; border-bottom: 1px solid #e8dfd8; }
.assignment-answer-form { display: grid; gap: 1.2rem; margin-top: 1.5rem; }
.assignment-question-list { display: grid; gap: 1rem; }
.assignment-question-list fieldset { margin: 0; padding: 1.1rem; border: 1px solid #dfd4cb; border-radius: 14px; background: #fcfaf8; }
.assignment-question-list legend { display: flex; align-items: flex-start; gap: .7rem; width: 100%; padding: 0 .35rem; }
.assignment-question-list legend > span { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #fff; background: #4b241c; font-weight: 900; }
.assignment-question-list legend > div { display: grid; gap: .2rem; }
.assignment-question-list legend small { color: #8d681b; font-size: .72rem; }
.assignment-question-list fieldset > label:not(.quiz-option) { display: grid; gap: .4rem; margin-top: .8rem; color: #4b241c; font-size: .78rem; font-weight: 800; }
.assignment-question-list textarea { width: 100%; padding: .85rem; border: 1px solid #d8ccc2; border-radius: 10px; resize: vertical; background: #fff; }
.automatic-marking-note { margin: 0; padding: .8rem 1rem; border-left: 3px solid #d4af37; border-radius: 0 10px 10px 0; color: #655950; background: #fff7df; font-size: .78rem; }
.assessment-result { display: inline-flex; align-items: center; gap: .7rem; margin: .65rem 0 1rem; padding: .55rem .75rem; border-radius: 9px; font-size: .78rem; }
.assessment-result.passed { color: #126044; background: #e7f6ef; }
.assessment-result.retry { color: #8d3b24; background: #fff0e9; }
.assessment-result.large { display: flex; justify-content: space-between; margin: 1rem 0; padding: .85rem 1rem; }
.assessment-required { color: #8d681b; background: #fff5da; padding: .55rem .75rem; border-radius: 9px; }

@media (max-width: 780px) {
  .answer-option-head { align-items: stretch; flex-direction: column; }
  .answer-option-head .button { width: 100%; }
  .answer-option-row { grid-template-columns: 26px 26px 1fr 34px; }
  .answer-option-row input[name$="_sw[]"] { grid-column: 3 / 4; }
  .accepted-answer-row { grid-template-columns: 28px 1fr 34px; }
  .accepted-answer-row input[name$="_sw[]"] { grid-column: 2 / 3; }
  .assignment-stage .assignment-meta { grid-template-columns: 1fr; }
  .assessment-result.large { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  .rich-toolbar { gap: 2px; }
  .rich-toolbar button { width: 31px; }
  .rich-surface { min-height: 220px; }
  .answer-option-builder, .accepted-answer-builder, .assignment-question-card { padding: .75rem; }
}