/* ACE Community Question Bank — matches the dark/terracotta system
   used across Feed, practice, and the lecture pages. */

.ace-cq{ max-width: 680px; margin: 0 auto; }

.ace-cq-login-notice{
  padding: 16px;
  border-radius: 10px;
  background: var(--rc-surface, #30302e);
  border: 1px solid var(--rc-line, rgba(255,255,255,.08));
  color: var(--rc-muted, #a39e93);
  font-size: .86rem;
  text-align: center;
}

/* ---------------- Tabs ---------------- */

.ace-cq-tabs{
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 16px;
}
.ace-cq-tab{
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--rc-muted, #a39e93);
  font-family: inherit;
  font-size: .86rem;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.ace-cq-tab:hover{ color: var(--rc-text, #e8e6dc); }
.ace-cq-tab.is-active{
  color: var(--rc-primary, #cc785c);
  border-bottom-color: var(--rc-primary, #cc785c);
}

/* ---------------- Course picker ---------------- */

.ace-cq-course-picker{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.ace-cq-course-pill{
  background: rgba(0,0,0,.2);
  border: 1px solid var(--rc-line, rgba(255,255,255,.1));
  border-radius: 20px;
  color: var(--rc-muted, #a39e93);
  font-size: .76rem;
  font-weight: 600;
  padding: 7px 13px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ace-cq-course-pill:hover{ color: var(--rc-text, #e8e6dc); border-color: rgba(255,255,255,.25); }
.ace-cq-course-pill.is-selected{
  background: var(--rc-primary, #cc785c);
  border-color: var(--rc-primary, #cc785c);
  color: #fff;
}

/* ---------------- Panels ---------------- */

.ace-cq-panel{ display: none; }
.ace-cq-panel.is-active{ display: block; }

.ace-cq-empty{
  padding: 20px;
  text-align: center;
  color: var(--rc-muted, #a39e93);
  font-size: .85rem;
}

/* ---------------- Browse cards ---------------- */

.ace-cq-list{ display: flex; flex-direction: column; gap: 12px; }

.ace-cq-card{
  background: var(--rc-surface, #30302e);
  border: 1px solid var(--rc-line, rgba(255,255,255,.08));
  border-radius: 12px;
  padding: 16px;
}

.ace-cq-card-question{
  font-size: .92rem;
  line-height: 1.6;
  color: var(--rc-text, #e8e6dc);
  margin-bottom: 12px;
}

.ace-cq-card-options{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ace-cq-option{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--rc-line, rgba(255,255,255,.08));
  border-radius: 8px;
  color: var(--rc-text, #e8e6dc);
  font-size: .84rem;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ace-cq-option:hover{ border-color: rgba(255,255,255,.25); }

.ace-cq-option-letter{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  font-size: .68rem;
  font-weight: 700;
  color: var(--rc-muted, #a39e93);
}

/* Correct answer only shows itself once ANY option has been clicked —
   revealing it immediately would make the card pointless to interact with. */
.ace-cq-option.is-correct-answer.is-revealed{
  border-color: rgba(111,168,125,.5);
  background: rgba(111,168,125,.1);
}
.ace-cq-option.is-correct-answer.is-revealed .ace-cq-option-letter{
  background: #6fa87d;
  color: #16241a;
}

.ace-cq-explanation{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(204,120,92,.08);
  border: 1px solid rgba(204,120,92,.25);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--rc-text, #e8e6dc);
}

.ace-cq-card-foot{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rc-line, rgba(255,255,255,.06));
  font-size: .72rem;
  color: var(--rc-muted, #a39e93);
}

.ace-cq-load-more{
  display: block;
  margin: 16px auto 0;
  background: transparent;
  border: 1px solid var(--rc-line, rgba(255,255,255,.12));
  color: var(--rc-muted, #a39e93);
  font-size: .8rem;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 20px;
  cursor: pointer;
}
.ace-cq-load-more:hover{ color: var(--rc-text, #e8e6dc); border-color: rgba(255,255,255,.25); }

/* ---------------- Contribute form ---------------- */

.ace-cq-form{
  background: var(--rc-surface, #30302e);
  border: 1px solid var(--rc-line, rgba(255,255,255,.08));
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ace-cq-field{ display: flex; flex-direction: column; gap: 6px; }
.ace-cq-field-label{
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rc-muted, #a39e93);
}
.ace-cq-optional{ text-transform: none; font-weight: 500; }

.ace-cq-field textarea{
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--rc-line, rgba(255,255,255,.1));
  border-radius: 9px;
  color: var(--rc-text, #e8e6dc);
  font-size: .88rem;
  font-family: inherit;
  padding: 11px 13px;
  resize: vertical;
}
.ace-cq-field textarea:focus{ outline: none; border-color: var(--rc-primary, #cc785c); }

.ace-cq-answer-rows{ display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ace-cq-answer-row{
  display: flex;
  align-items: center;
  gap: 9px;
}
.ace-cq-correct-radio{
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  accent-color: #6fa87d;
  cursor: pointer;
}
.ace-cq-answer-input{
  flex: 1;
  box-sizing: border-box;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--rc-line, rgba(255,255,255,.1));
  border-radius: 8px;
  color: var(--rc-text, #e8e6dc);
  font-size: .84rem;
  padding: 8px 11px;
}
.ace-cq-answer-input:focus{ outline: none; border-color: var(--rc-primary, #cc785c); }

.ace-cq-remove-answer{
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--rc-line, rgba(255,255,255,.1));
  color: var(--rc-muted, #a39e93);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.ace-cq-remove-answer:hover{ color: #e04b4b; border-color: rgba(224,75,75,.4); }

.ace-cq-add-answer{
  align-self: flex-start;
  margin-top: 6px;
  background: transparent;
  border: 1px dashed var(--rc-line, rgba(255,255,255,.15));
  border-radius: 8px;
  color: var(--rc-muted, #a39e93);
  font-size: .78rem;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
}
.ace-cq-add-answer:hover{ color: var(--rc-primary, #cc785c); border-color: var(--rc-primary, #cc785c); }

.ace-cq-submit-btn{
  background: var(--rc-primary, #cc785c);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: .88rem;
  font-weight: 700;
  padding: 11px 22px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.ace-cq-submit-btn:hover{ opacity: .9; }
.ace-cq-submit-btn:disabled{ opacity: .5; cursor: not-allowed; }

.ace-cq-submit-note{
  margin: 0;
  font-size: .74rem;
  color: var(--rc-muted, #a39e93);
  text-align: center;
}

@media (max-width: 480px){
  .ace-cq-form{ padding: 14px; }
}

/* ---------------- Image upload (contribute form) ---------------- */

.ace-cq-image-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--rc-line, rgba(255,255,255,.1));
  color: var(--rc-muted, #a39e93);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.ace-cq-image-btn:hover{ color: var(--rc-text, #e8e6dc); border-color: rgba(255,255,255,.25); }

.ace-cq-image-name{
  display: block;
  margin-top: 6px;
  font-size: .74rem;
  color: var(--rc-muted, #a39e93);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------- Image on a browse card ---------------- */

.ace-cq-card-image{
  margin: 4px 0 12px;
  border-radius: 8px;
  overflow: hidden;
}
.ace-cq-card-image img{
  width: 100%;
  height: auto;
  display: block;
}