/* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
   LMS LESSON DESIGN SYSTEM â v2 (CANONICAL STANDARD)
   Pro Cloud Training Center · lms.ahmedhussein.org

   Append to public/css/ and link AFTER style.css in the layout.
   Replaces lms-lesson-components.css (v1) â superset of it.

   ASSUMES these variables exist in style.css (your LMS shell):
     --c  : #00d4ff  (cyan accent)      --t  : body text
     --c2 : #00ff88  (green accent)     --tw : white/heading text
     --c3 : #ff6b35  (orange accent)    --bg : page background
     --c4 : #ffd700  (gold/amber)

   RULE: lesson snippets contain NO <style> blocks. Only classes
   defined here or in the shell CSS may be used.
   âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */

/* ---------- Utility text colors (NEVER use inline color styles) ---------- */
.tc { color: var(--c); }   /* cyan  */
.tg { color: var(--c2); }  /* green */
.ta { color: var(--c4); }  /* amber */
.tr { color: #ff6464; }    /* red   */

/* ---------- Paragraph spacing inside panels (no <br> hacks) ---------- */
.info-panel p + p, .scenario-box p + p, .example-box p + p,
.critical-section p + p, .rw-example p + p, .analogy-box p + p { margin-top: .75rem; }

/* âââââââââââââââ GENERATION-2 COMPONENTS (Lesson 27 reference) âââââââââââââââ */

.analogy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.analogy-card { background: rgba(0,212,255,.04); border: 1px solid rgba(0,212,255,.15); border-radius: 10px; padding: 1.5rem; text-align: center; }
.analogy-icon { font-size: 2rem; margin-bottom: .75rem; }
.analogy-card h4 { color: var(--c); font-weight: 700; margin-bottom: .5rem; }
.analogy-card p { color: var(--t); font-size: .9rem; }

.term-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin: 1.5rem 0; }
.term-card { background: rgba(255,255,255,.03); border: 1px solid rgba(0,212,255,.12); border-radius: 8px; padding: 1.2rem; }
.term-card .term-name { color: var(--c); font-weight: 700; font-size: 1rem; margin-bottom: .4rem; }
.term-card p { font-size: .9rem; color: var(--t); line-height: 1.6; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.5rem 0; }
.info-panel { background: rgba(0,212,255,.04); border: 1px solid rgba(0,212,255,.2); border-left: 4px solid var(--c); border-radius: 8px; padding: 1.25rem; }
.info-panel h4 { color: var(--c); font-weight: 700; margin-bottom: .6rem; }
.info-panel.green { border-color: rgba(0,255,136,.2); border-left-color: var(--c2); }
.info-panel.green h4 { color: var(--c2); }
.info-panel ul { margin-left: 1.2rem; margin-top: .5rem; }
.info-panel li { margin-bottom: .4rem; font-size: .95rem; }

.attack-flow { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 1.5rem; margin: 1.5rem 0; }
.flow-step { display: flex; align-items: flex-start; margin-bottom: 1rem; }
.flow-step:last-child { margin-bottom: 0; }
.step-number { background: var(--c); color: var(--bg); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; margin-right: 1rem; margin-top: 2px; }
.step-content { flex: 1; }
.step-content strong { color: var(--tw); }

.critical-section { background: rgba(255,100,100,.05); border: 1px solid rgba(255,100,100,.2); border-radius: 10px; padding: 1.5rem; margin: 1.5rem 0; border-left: 4px solid #ff6464; }
.critical-label { color: #ff6464; font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }

.scenario-box { background: rgba(255,200,50,.04); border: 1px solid rgba(255,200,50,.2); border-left: 4px solid #ffcc33; border-radius: 8px; padding: 1.5rem; margin: 1.5rem 0; }
.scenario-label { color: #ffcc33; font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.scenario-title { color: var(--tw); font-weight: 700; font-size: 1.1rem; margin-bottom: .75rem; }
.scenario-box p, .scenario-box li { color: var(--t); font-size: .92rem; line-height: 1.65; }
.scenario-box strong { color: var(--tw); }

.example-box { background: rgba(0,212,255,.03); border-left: 4px solid var(--c); padding: 1.5rem; margin: 1.5rem 0; border-radius: 6px; }
.example-label { color: var(--c); font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.example-title { color: var(--tw); font-weight: 600; font-size: 1.1rem; margin-bottom: .75rem; }

/* âââââââââââââââ GENERATION-1 COMPONENTS (early lesson library) âââââââââââââââ */

.concept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; margin: 1.2rem 0; }
.concept-card { background: rgba(255,255,255,.03); border: 1px solid rgba(0,212,255,.12); border-left: 3px solid rgba(0,212,255,.3); border-radius: 8px; padding: 1rem 1.1rem; transition: border-color .2s; }
.concept-card:hover { border-left-color: var(--c); }
.concept-card h4 { font-size: .92rem; font-weight: 700; color: var(--tw); margin-bottom: .5rem; }
.concept-card p { color: var(--t); font-size: .86rem; line-height: 1.6; }

.analogy-box { background: rgba(255,215,0,.06); border: 1px solid rgba(255,215,0,.22); border-left: 4px solid var(--c4); border-radius: 8px; padding: 1.1rem 1.3rem; margin: 1.2rem 0; }
.analogy-label { font-size: .74rem; font-weight: 700; color: var(--c4); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.analogy-box p { color: var(--t); font-size: .9rem; line-height: 1.65; }
.analogy-box strong { color: var(--c4); }

.rw-example { background: rgba(0,212,255,.06); border: 1px solid rgba(0,212,255,.22); border-left: 4px solid var(--c); border-radius: 8px; padding: 1.1rem 1.3rem; margin: 1.2rem 0; }
.rw-label { font-size: .74rem; font-weight: 700; color: var(--c); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .4rem; }
.rw-title { font-size: .96rem; font-weight: 700; color: var(--tw); margin-bottom: .65rem; }
.rw-example p, .rw-example li { color: var(--t); font-size: .89rem; line-height: 1.65; }
.rw-example strong { color: var(--tw); }

.attacker-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; margin: 1.2rem 0; }
.attacker-card { background: rgba(255,255,255,.03); border: 1px solid rgba(0,212,255,.12); border-radius: 10px; padding: 1.2rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; transition: border-color .2s, transform .2s; }
.attacker-card:hover { border-color: rgba(0,212,255,.35); transform: translateY(-2px); }
.attacker-card .icon { font-size: 1.9rem; line-height: 1; display: block; }
.attacker-card h4 { font-size: .94rem; font-weight: 700; color: var(--tw); }
.motive { display: inline-block; font-size: .72rem; padding: .18rem .55rem; border-radius: 4px; background: rgba(0,212,255,.1); color: var(--c); border: 1px solid rgba(0,212,255,.25); width: fit-content; }
.attacker-card p { color: var(--t); font-size: .85rem; line-height: 1.6; flex: 1; }
.real-eg { margin-top: .2rem; font-size: .8rem; color: var(--t); opacity: .85; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: .55rem .7rem; line-height: 1.5; }

.vector-section { display: flex; flex-direction: column; gap: 1.2rem; margin: 1.2rem 0; }
.vector-group-label { display: inline-block; font-size: .74rem; font-weight: 700; color: var(--c); text-transform: uppercase; letter-spacing: .08em; background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.2); border-radius: 5px; padding: .22rem .7rem; margin-bottom: .75rem; }

.cia-visual { display: flex; gap: .85rem; margin: 1.2rem 0; flex-wrap: wrap; }
.cia-pillar { flex: 1; min-width: 160px; background: rgba(255,255,255,.03); border: 1px solid rgba(0,212,255,.12); border-radius: 10px; padding: 1.3rem 1rem; text-align: center; }
.cia-c { border-top: 3px solid var(--c); }
.cia-i { border-top: 3px solid var(--c2); }
.cia-a { border-top: 3px solid var(--c4); }
.cia-o { border-top: 3px solid var(--c3); }   /* orange variant (L4-type tiers) */
.cia-r { border-top: 3px solid #ff6464; }     /* red variant (L5-type tiers)    */
.cia-icon { font-size: 1.8rem; line-height: 1; display: block; margin-bottom: .6rem; }
.cia-name { font-weight: 700; color: var(--tw); font-size: .94rem; margin-bottom: .35rem; }
.cia-desc { color: var(--t); font-size: .84rem; line-height: 1.55; margin-bottom: .65rem; }
.cia-example { font-size: .78rem; color: var(--t); opacity: .85; background: rgba(255,255,255,.04); border-radius: 6px; padding: .5rem .7rem; line-height: 1.5; text-align: left; }

.aaa-flow { display: flex; gap: .85rem; margin: 1.2rem 0; flex-wrap: wrap; }
.aaa-step { flex: 1; min-width: 180px; background: rgba(255,255,255,.03); border: 1px solid rgba(0,212,255,.12); border-radius: 8px; padding: 1.1rem 1rem; }
.aaa-num { font-size: .72rem; font-weight: 700; color: var(--c); letter-spacing: .1em; margin-bottom: .4rem; }
.aaa-name { font-weight: 700; color: var(--tw); font-size: .94rem; margin-bottom: .3rem; }
.aaa-q { font-size: .88rem; color: var(--c4); font-style: italic; margin-bottom: .5rem; }
.aaa-ex { font-size: .84rem; color: var(--t); line-height: 1.55; }

.mfa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; margin: 1.2rem 0; }
.mfa-card { background: rgba(255,255,255,.03); border: 1px solid rgba(0,212,255,.12); border-radius: 10px; padding: 1.3rem 1.1rem; text-align: center; transition: border-color .2s, transform .2s; }
.mfa-card:hover { border-color: rgba(0,212,255,.35); transform: translateY(-2px); }
.mfa-icon { font-size: 2rem; line-height: 1; display: block; margin-bottom: .6rem; }
.mfa-label { font-weight: 700; color: var(--tw); font-size: .93rem; margin-bottom: .45rem; }
.mfa-desc { font-size: .85rem; color: var(--t); line-height: 1.55; margin-bottom: .55rem; }
.mfa-eg { font-size: .78rem; color: var(--t); opacity: .85; background: rgba(255,255,255,.04); border-radius: 6px; padding: .45rem .65rem; line-height: 1.5; text-align: left; }

.check-box { background: rgba(0,255,136,.05); border: 1px solid rgba(0,255,136,.22); border-left: 4px solid var(--c2); border-radius: 8px; padding: 1.1rem 1.3rem; margin: 1.2rem 0; }
.check-label { font-size: .74rem; font-weight: 700; color: var(--c2); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .6rem; }
.check-box ol { margin-left: 1.2rem; }
.check-box li { color: var(--t); font-size: .9rem; line-height: 1.6; margin-bottom: .5rem; }

.course-badge { display: inline-block; background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.25); border-radius: 6px; padding: .25rem .8rem; font-size: .76rem; color: var(--c); letter-spacing: .06em; margin-bottom: .9rem; }

/* âââââââââââââââ RISK MATRIX (Topic 4.x) âââââââââââââââ */

.risk-matrix { width: 100%; border-collapse: collapse; font-size: .8rem; margin: 1.2rem 0; border-radius: 8px; overflow: hidden; }
.risk-matrix th, .risk-matrix td { padding: .5rem .65rem; text-align: center; border: 1px solid rgba(0,212,255,.15); }
.risk-matrix th { background: rgba(0,212,255,.07); color: var(--t); font-weight: 600; font-size: .74rem; }
.risk-matrix .rl { background: rgba(0,212,255,.07); color: var(--t); font-size: .72rem; text-align: right; white-space: nowrap; }
.rm-low  { background: rgba(0,255,136,.12);  color: #34d399; font-weight: 600; }
.rm-med  { background: rgba(255,215,0,.12);  color: #fbbf24; font-weight: 600; }
.rm-high { background: rgba(255,107,53,.14); color: #fb923c; font-weight: 600; }
.rm-crit { background: rgba(255,100,100,.16); color: #f87171; font-weight: 600; }

/* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
   LIGHT MODE â every component above, no exceptions
   âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */

[data-theme="light"] .tc { color: #0062cc; }
[data-theme="light"] .tg { color: #007a3d; }
[data-theme="light"] .ta { color: #996600; }
[data-theme="light"] .tr { color: #cc3333; }

[data-theme="light"] .analogy-card { background: #f8fbff; border-color: rgba(0,98,204,.2); }
[data-theme="light"] .analogy-card h4 { color: #0062cc; }
[data-theme="light"] .analogy-card p { color: #4a6080; }

[data-theme="light"] .term-card { background: #ffffff; border-color: rgba(0,98,204,.15); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
[data-theme="light"] .term-card .term-name { color: #0062cc; }
[data-theme="light"] .term-card p { color: #4a6080; }

[data-theme="light"] .info-panel { background: #f0f7ff; border-color: rgba(0,98,204,.25); border-left-color: #0062cc; }
[data-theme="light"] .info-panel h4 { color: #0062cc; }
[data-theme="light"] .info-panel.green { background: #f0fff8; border-color: rgba(0,160,80,.25); border-left-color: #007a3d; }
[data-theme="light"] .info-panel.green h4 { color: #007a3d; }

[data-theme="light"] .attack-flow { background: #f8fbff; border-color: rgba(0,98,204,.1); }
[data-theme="light"] .step-number { background: #0062cc; color: #ffffff; }
[data-theme="light"] .step-content strong { color: #1e293b; }

[data-theme="light"] .critical-section { background: #fff5f5; border-color: rgba(200,50,50,.25); border-left-color: #cc3333; }
[data-theme="light"] .critical-label { color: #cc3333; }

[data-theme="light"] .scenario-box { background: #fffdf0; border-color: rgba(180,140,0,.25); border-left-color: #cc9900; }
[data-theme="light"] .scenario-label { color: #996600; }
[data-theme="light"] .scenario-title { color: #1e293b; }
[data-theme="light"] .scenario-box p, [data-theme="light"] .scenario-box li { color: #4a6080; }
[data-theme="light"] .scenario-box strong { color: #1e293b; }

[data-theme="light"] .example-box { background: #f0f7ff; border-left-color: #0062cc; }
[data-theme="light"] .example-label { color: #0062cc; }
[data-theme="light"] .example-title { color: #1e293b; }

[data-theme="light"] .concept-card { background: #ffffff; border-color: rgba(0,98,204,.15); border-left-color: rgba(0,98,204,.4); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
[data-theme="light"] .concept-card:hover { border-left-color: #0062cc; }
[data-theme="light"] .concept-card h4 { color: #1e293b; }
[data-theme="light"] .concept-card p { color: #4a6080; }

[data-theme="light"] .analogy-box { background: #fffdf0; border-color: rgba(180,140,0,.25); border-left-color: #cc9900; }
[data-theme="light"] .analogy-label { color: #996600; }
[data-theme="light"] .analogy-box p { color: #4a6080; }
[data-theme="light"] .analogy-box strong { color: #996600; }

[data-theme="light"] .rw-example { background: #f0f7ff; border-color: rgba(0,98,204,.25); border-left-color: #0062cc; }
[data-theme="light"] .rw-label { color: #0062cc; }
[data-theme="light"] .rw-title { color: #1e293b; }
[data-theme="light"] .rw-example p, [data-theme="light"] .rw-example li { color: #4a6080; }
[data-theme="light"] .rw-example strong { color: #1e293b; }

[data-theme="light"] .attacker-card { background: #ffffff; border-color: rgba(0,98,204,.15); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
[data-theme="light"] .attacker-card:hover { border-color: rgba(0,98,204,.4); }
[data-theme="light"] .attacker-card h4 { color: #1e293b; }
[data-theme="light"] .motive { background: #e8f3ff; color: #0062cc; border-color: rgba(0,98,204,.3); }
[data-theme="light"] .attacker-card p { color: #4a6080; }
[data-theme="light"] .real-eg { color: #4a6080; background: #f5f8fc; border-color: rgba(0,0,0,.07); opacity: 1; }

[data-theme="light"] .vector-group-label { color: #0062cc; background: #e8f3ff; border-color: rgba(0,98,204,.25); }

[data-theme="light"] .cia-pillar { background: #ffffff; border-color: rgba(0,98,204,.15); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
[data-theme="light"] .cia-c { border-top-color: #0062cc; }
[data-theme="light"] .cia-i { border-top-color: #007a3d; }
[data-theme="light"] .cia-a { border-top-color: #cc9900; }
[data-theme="light"] .cia-o { border-top-color: #cc5500; }
[data-theme="light"] .cia-r { border-top-color: #cc3333; }
[data-theme="light"] .cia-name { color: #1e293b; }
[data-theme="light"] .cia-desc { color: #4a6080; }
[data-theme="light"] .cia-example { color: #4a6080; background: #f5f8fc; opacity: 1; }

[data-theme="light"] .aaa-step { background: #ffffff; border-color: rgba(0,98,204,.15); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
[data-theme="light"] .aaa-num { color: #0062cc; }
[data-theme="light"] .aaa-name { color: #1e293b; }
[data-theme="light"] .aaa-q { color: #996600; }
[data-theme="light"] .aaa-ex { color: #4a6080; }

[data-theme="light"] .mfa-card { background: #ffffff; border-color: rgba(0,98,204,.15); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
[data-theme="light"] .mfa-card:hover { border-color: rgba(0,98,204,.4); }
[data-theme="light"] .mfa-label { color: #1e293b; }
[data-theme="light"] .mfa-desc { color: #4a6080; }
[data-theme="light"] .mfa-eg { color: #4a6080; background: #f5f8fc; opacity: 1; }

[data-theme="light"] .check-box { background: #f0fff8; border-color: rgba(0,160,80,.25); border-left-color: #007a3d; }
[data-theme="light"] .check-label { color: #007a3d; }
[data-theme="light"] .check-box li { color: #4a6080; }

[data-theme="light"] .course-badge { background: #e8f3ff; border-color: rgba(0,98,204,.3); color: #0062cc; }

[data-theme="light"] .risk-matrix th, [data-theme="light"] .risk-matrix td { border-color: rgba(0,98,204,.2); }
[data-theme="light"] .risk-matrix th, [data-theme="light"] .risk-matrix .rl { background: #f0f7ff; color: #4a6080; }
[data-theme="light"] .rm-low  { background: #e6f9ef; color: #0a7a45; }
[data-theme="light"] .rm-med  { background: #fdf6df; color: #8a6d00; }
[data-theme="light"] .rm-high { background: #ffeede; color: #b35400; }
[data-theme="light"] .rm-crit { background: #ffe5e5; color: #b32424; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; }
  .cia-visual, .aaa-flow { flex-direction: column; }
  .risk-matrix { font-size: .68rem; }
}