/* ============================================
   LESSON 20 — SPECIFIC STYLES
   Identifying Attitudes & Opinions
   ============================================ */

/* ── Part 1: Legend ── */
.l20-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--bg-card-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
}
.l20-legend-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.l20-legend-letter {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1.5px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
  text-transform: lowercase;
}
.l20-legend-text {
  font-size: 1rem;
  color: var(--text-muted);
}

/* ── Part 1: Question rows ── */
.l20-p1-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.l20-p1-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--bg-card-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
}
.l20-p1-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
}
.l20-abc-row { display: flex; gap: 8px; }
.l20-abc-row-full { flex-direction: column; gap: 6px; }

.l20-abc {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, background .15s;
}

/* Full-label variant — override circular style */
.l20-abc-row-full .l20-abc {
  width: auto;
  height: auto;
  border-radius: var(--radius);
  padding: 9px 14px;
  font-size: 1rem;
  font-weight: 400;
  justify-content: flex-start;
  gap: 10px;
}
.l20-abc-letter {
  font-weight: 700;
  color: var(--gold);
  min-width: 16px;
}
.l20-abc:hover:not(:disabled) { border-color: var(--gold); }
.l20-abc-sel     { border-color: var(--gold)    !important; background: rgba(201,168,76,.15) !important; color: var(--gold); }
.l20-abc-correct { border-color: var(--success) !important; background: rgba(74,222,128,.1)  !important; color: var(--success); }
.l20-abc-wrong   { border-color: var(--error)   !important; background: rgba(248,113,113,.1) !important; color: var(--error); }
.l20-abc:disabled { cursor: not-allowed; opacity: .75; }

/* ── Part 2: Fill-in-the-blank ── */
.l20-p2-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}
.l20-p2-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.l20-p2-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 6px;
}
.l20-p2-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  padding-top: 4px;
}
.l20-p2-ctx { color: var(--text-muted); }

.l20-p2inp {
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: .97rem;
  font-family: inherit;
  font-weight: 600;
  width: 200px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.l20-p2inp:focus      { border-color: var(--gold); }
.l20-p2inp.l20-correct{ border-color: var(--success); background: rgba(74,222,128,.07); color: var(--success); }
.l20-p2inp.l20-wrong  { border-color: var(--error);   background: rgba(248,113,113,.07); }

/* ── Explanation ── */
/* ── Part 1 inline explanation panels ── */
.l20-p1-exp {
  margin: 4px 0 10px 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: .97rem;
  line-height: 1.6;
  border: 1px solid var(--border);
}
.l20-p1-exp-ok  { background: rgba(72,199,116,.08); border-color: var(--success); }
.l20-p1-exp-err { background: rgba(255,100,100,.07); border-color: var(--error); }

.l20-exp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.l20-exp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.l20-exp-phrase  { font-weight: 700; color: var(--text); font-size: 1rem; }
.l20-exp-arrow   { color: var(--gold); font-size: .97rem; }
.l20-exp-meaning { color: var(--text-muted); font-size: 1rem; }

/* ── Study Tip ── */
.l20-tip-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.l20-tip-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--bg-card-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
}
.l20-tip-icon  { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.l20-tip-title { font-weight: 700; color: var(--gold); margin-bottom: 6px; font-size: 1rem; }
.l20-tip-body  { color: var(--text-muted); font-size: .97rem; line-height: 1.55; margin: 0; }

.l20-phrase-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.l20-chip {
  padding: 5px 12px;
  border-radius: 14px;
  font-size: .8rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
}
.l20-chip-agree   { border-color: rgba(74,222,128,.4);  color: var(--success); background: rgba(74,222,128,.07);  }
.l20-chip-disagree{ border-color: rgba(248,113,113,.4); color: var(--error);   background: rgba(248,113,113,.07); }
.l20-chip-neutral { border-color: rgba(201,168,76,.35); color: var(--gold);    background: rgba(201,168,76,.07);  }

/* ── Shake animation ── */
@keyframes l20-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
.l20-shake { animation: l20-shake .4s ease; }