/* P3 rich study notes — layout for the HTML edition inside Summary.
   Scoped to .summaryBody.richNotes so P1/P2/P4 Markdown notes stay untouched.
   Visual language matches the rest of the app: dark body text, bold keywords
   (never blanket-coloured), gold ★ Key Result badges, amber pitfall cards. */

.summaryBody.richNotes{color:#1f2937;line-height:1.78;font-size:15px}
.summaryBody.richNotes strong{color:#111827;font-weight:700}

/* ---------- chapter header ---------- */
.summaryBody.richNotes .ch-head{
  padding:20px 22px;margin:0 0 22px;border-radius:16px;
  background:linear-gradient(135deg,#f5f3ff,#faf9ff);
  border:1px solid #ede9fe;border-left:4px solid #7c3aed;
}
.summaryBody.richNotes .ch-label{
  font-size:11px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:#7c3aed;margin-bottom:5px;
}
.summaryBody.richNotes .ch-head h1{
  margin:0 0 5px;font-size:22px;font-weight:800;color:#0f172a;letter-spacing:-.015em;
}
.summaryBody.richNotes .ch-sub{margin:0;font-size:13px;color:#6b7280;line-height:1.6}

/* ---------- section headings ---------- */
.summaryBody.richNotes h2{
  display:flex;align-items:center;gap:10px;
  margin:26px 0 12px;font-size:15.5px;font-weight:800;color:#0f172a;
}
.summaryBody.richNotes h2 .section-num{
  display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:7px;
  background:#ede9fe;color:#7c3aed;font-size:11px;font-weight:800;
}

/* ---------- generic card ---------- */
.summaryBody.richNotes .card{
  background:#fff;border:1px solid #e8ecf3;border-left:3px solid #cbd5e1;
  border-radius:12px;padding:14px 16px;margin:0 0 14px;
}
.summaryBody.richNotes .card h3{margin:0 0 8px;font-size:14.5px;font-weight:800;color:#0f172a}
.summaryBody.richNotes .card p{margin:0 0 8px}
.summaryBody.richNotes .card p:last-child{margin-bottom:0}

/* ---------- key result (gold) ---------- */
.summaryBody.richNotes .card.key-result{
  border-left-color:#d97706;background:linear-gradient(180deg,#fffdf5,#fff);
}
.summaryBody.richNotes .badge{
  display:inline-block;margin-bottom:8px;padding:2px 9px;border-radius:999px;
  background:#fef3c7;color:#92400e;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}

/* ---------- formula rows ---------- */
.summaryBody.richNotes .formula-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:12px 0;
}
.summaryBody.richNotes .formula-item{
  background:#f8fafc;border:1px solid #e6ecf5;border-radius:10px;padding:10px 12px;
  text-align:center;font-size:14px;overflow-x:auto;
}
.summaryBody.richNotes .formula-card{
  background:#f8fafc;border:1px solid #e6ecf5;border-radius:10px;
  padding:12px 14px;margin:12px 0;overflow-x:auto;
}
.summaryBody.richNotes .inline-math{display:inline-block}

/* ---------- problem types ---------- */
.summaryBody.richNotes .problem-type{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 14px;margin:0 0 9px;background:#fff;
  border:1px solid #e8ecf3;border-radius:11px;font-size:14px;line-height:1.65;
}
.summaryBody.richNotes .problem-type .tag{
  flex:none;padding:2px 9px;border-radius:999px;background:#ede9fe;color:#6d28d9;
  font-size:10.5px;font-weight:800;white-space:nowrap;letter-spacing:.03em;
}

/* ---------- worked examples ---------- */
.summaryBody.richNotes .example{
  background:#fff;border:1px solid #e8ecf3;border-radius:12px;padding:0 0 12px;margin:0 0 14px;overflow:hidden;
}
.summaryBody.richNotes .example-header{
  display:flex;align-items:center;gap:9px;padding:11px 15px;
  background:#f8fafc;border-bottom:1px solid #eef2f7;font-weight:700;font-size:14px;color:#0f172a;
}
.summaryBody.richNotes .example-header .dot{
  width:8px;height:8px;border-radius:50%;background:#7c3aed;flex:none;
}
.summaryBody.richNotes .steps{padding:12px 15px 0;margin:0;list-style:none}
.summaryBody.richNotes .step{
  position:relative;padding:6px 0 6px 22px;font-size:14px;line-height:1.7;border-bottom:1px dashed #eef2f7;
}
.summaryBody.richNotes .step:last-child{border-bottom:0}
.summaryBody.richNotes .step::before{
  content:'';position:absolute;left:4px;top:14px;width:6px;height:6px;border-radius:50%;background:#c4b5fd;
}
.summaryBody.richNotes .example p{padding:10px 15px 0;margin:0;font-weight:700;color:#0f172a}

/* ---------- pitfalls (amber) ---------- */
.summaryBody.richNotes .pitfall-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;
}
.summaryBody.richNotes .pitfall-card{
  background:#fffbeb;border:1px solid #fde68a;border-radius:11px;padding:11px 13px;
}
.summaryBody.richNotes .pitfall-card h4{margin:0 0 5px;font-size:13px;font-weight:800;color:#92400e}
.summaryBody.richNotes .pitfall-card p{margin:0;font-size:13px;color:#78350f;line-height:1.6}

.summaryBody.richNotes .note-green{
  background:#ecfdf5;border:1px solid #a7f3d0;border-left:3px solid #10b981;
  border-radius:10px;padding:10px 13px;margin:12px 0;font-size:13.5px;color:#065f46;
}

/* ---------- hint block ---------- */
.summaryBody.richNotes .hint{
  background:#fff7ed;border:1px solid #fed7aa;border-left:3px solid #f59e0b;
  border-radius:10px;padding:11px 14px;margin:12px 0;font-size:13.5px;color:#7c2d12;
}

/* ---------- diagrams ---------- */
.summaryBody.richNotes svg{
  display:block;max-width:100%;height:auto;margin:12px auto;background:#fff;
  border:1px solid #eef2f7;border-radius:12px;padding:8px;
}
.summaryBody.richNotes .cmp{width:100%;overflow-x:auto}

/* ---------- mobile ---------- */
@media(max-width:600px){
  .summaryBody.richNotes{font-size:14.5px}
  .summaryBody.richNotes .ch-head{padding:16px 16px;border-radius:14px}
  .summaryBody.richNotes .ch-head h1{font-size:19px}
  .summaryBody.richNotes h2{font-size:14.5px}
  .summaryBody.richNotes .formula-row{grid-template-columns:1fr}
  .summaryBody.richNotes .pitfall-grid{grid-template-columns:1fr}
  .summaryBody.richNotes .problem-type{flex-direction:column;gap:6px}
  .summaryBody.richNotes .card,.summaryBody.richNotes .example{border-radius:11px}
}