/* ═══════════════════════════════════════════════════
   Module 6 — Authentication & Security extra styles
   ═══════════════════════════════════════════════════ */

/* ── Callout Boxes ── */
.callout-box{border-radius:12px;padding:1.2rem 1.5rem;margin:1.5rem 0;border-left:4px solid;line-height:1.6}
.callout-box--warning{background:rgba(245,158,11,.08);border-color:#f59e0b;color:var(--text)}
.callout-box--tip{background:rgba(34,197,94,.08);border-color:#22c55e;color:var(--text)}
.callout-box p{margin:0}
.callout-box ul{margin:.5rem 0 0;padding-left:1.4rem}
[data-theme="light"] .callout-box--warning{background:rgba(245,158,11,.06)}
[data-theme="light"] .callout-box--tip{background:rgba(34,197,94,.06)}

/* ── Diagram / Step-Flow ── */
.diagram-box{background:var(--card-bg,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:14px;padding:1.5rem;margin:1.5rem 0}
.diagram-title{margin:0 0 1rem;font-size:1.05rem;font-weight:600}
.steps-flow{display:flex;flex-direction:column;gap:1rem}
.step-item{display:flex;gap:1rem;align-items:flex-start}
.step-number{width:36px;height:36px;border-radius:50%;background:var(--accent,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}
.step-content{flex:1}
.step-content strong{font-size:.95rem}
.step-content p{margin:.25rem 0 0;font-size:.88rem;color:var(--text-muted,rgba(255,255,255,.7))}

/* ── Comparison Grid ── */
.comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1.5rem 0}

/* ── When to Use Box ── */
.m6-when-box{background:var(--card-bg,rgba(255,255,255,.03));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:14px;padding:1.5rem;margin:1.5rem 0}
.m6-when-box h3{margin:0 0 1.2rem;font-size:1.15rem}
.m6-when-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-bottom:1rem}
.m6-when-card{border-radius:12px;padding:1.2rem;border-left:4px solid}
.m6-when-card h4{margin:0 0 .6rem;font-size:1rem}
.m6-when-card p{margin:0 0 .5rem;font-size:.88rem;line-height:1.5}
.m6-when-card--sessions{background:rgba(59,130,246,.06);border-color:#3b82f6}
.m6-when-card--jwt{background:rgba(34,197,94,.06);border-color:#22c55e}
.m6-when-card--oauth{background:rgba(245,158,11,.06);border-color:#f59e0b}
.m6-when-pros{color:#22c55e}
.m6-when-cons{color:#ef4444}

/* ── Cookie Attributes Grid ── */
.m6-cookie-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.5rem 0}
.m6-cookie-attr{background:var(--card-bg,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:12px;padding:1rem}
.m6-cookie-attr h4{margin:0 0 .4rem;color:var(--accent,#8b5cf6)}
.m6-cookie-attr p{margin:0;font-size:.85rem;line-height:1.5}

/* ── JWT Claims Grid ── */
.m6-claims-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem;margin:1rem 0}
.m6-claim{background:var(--card-bg,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:8px;padding:.6rem .8rem;font-size:.85rem}
.m6-claim code{color:var(--accent,#8b5cf6);font-weight:600;margin-right:.3rem}

/* ── Algorithm Grid ── */
.m6-algo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1rem 0}

/* ── Pitfalls / Best Practices ── */
.m6-pitfalls-list,.m6-bp-list{display:flex;flex-direction:column;gap:.8rem;margin:1rem 0}
.m6-pitfall,.m6-bp-item{display:flex;gap:1rem;align-items:flex-start;background:var(--card-bg,rgba(255,255,255,.03));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:10px;padding:1rem}
.m6-pitfall-num,.m6-bp-num{width:28px;height:28px;border-radius:50%;background:#ef4444;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0}
.m6-bp-num{background:var(--accent,#8b5cf6)}
.m6-pitfall div,.m6-bp-item div{flex:1}
.m6-pitfall strong,.m6-bp-item strong{font-size:.9rem}
.m6-pitfall p,.m6-bp-item p{margin:.2rem 0 0;font-size:.85rem;line-height:1.5;color:var(--text-muted,rgba(255,255,255,.7))}

/* ── OAuth Benefits Grid ── */
.m6-benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.5rem 0}

/* ── Terms Grid ── */
.m6-terms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.5rem;margin:1rem 0}
.m6-term{background:var(--card-bg,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:8px;padding:.6rem .8rem;font-size:.85rem}
.m6-term strong{color:var(--accent,#8b5cf6);margin-right:.3rem}

/* ── Compare Section ── */
.m6-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:1.5rem 0}
.m6-compare-col{background:var(--card-bg,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:14px;padding:1.2rem;border-top:4px solid}
.m6-compare-col--sessions{border-top-color:#3b82f6}
.m6-compare-col--jwt{border-top-color:#22c55e}
.m6-compare-col--oauth{border-top-color:#f59e0b}
.m6-compare-col h3{margin:0 0 .8rem;font-size:1.05rem}
.m6-compare-pros,.m6-compare-cons{font-size:.85rem;line-height:1.5;margin:.5rem 0}

/* ── Decision Tree ── */
.m6-decision-tree{display:flex;flex-direction:column;gap:.8rem;margin:1rem 0}
.m6-decision-q{background:var(--card-bg,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:10px;padding:1rem;border-left:4px solid var(--accent,#8b5cf6)}
.m6-decision-q strong{font-size:.95rem}
.m6-decision-q p{margin:.3rem 0 0;font-size:.88rem;color:var(--text-muted,rgba(255,255,255,.7))}

/* ── Combos Grid ── */
.m6-combos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1rem 0}

/* ── Vulnerability Cards ── */
.m6-vuln-card{background:var(--card-bg,rgba(255,255,255,.03));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:14px;margin:2rem 0;overflow:hidden}
.m6-vuln-header{display:flex;align-items:center;gap:.8rem;padding:1rem 1.5rem;border-bottom:1px solid var(--border,rgba(255,255,255,.06));background:rgba(0,0,0,.1)}
.m6-vuln-header h3{margin:0;font-size:1.1rem}
.m6-vuln-badge{font-size:.7rem;font-weight:700;padding:.25rem .6rem;border-radius:6px;letter-spacing:.05em;flex-shrink:0}
.m6-vuln-badge--critical{background:#ef4444;color:#fff}
.m6-vuln-badge--high{background:#f59e0b;color:#000}
.m6-vuln-badge--medium{background:#3b82f6;color:#fff}
.m6-vuln-content{padding:1.5rem}
.m6-vuln-content h4{margin:1.5rem 0 .8rem;font-size:.95rem}
.m6-vuln-content h4:first-child{margin-top:0}
.m6-vuln-content p{font-size:.9rem;line-height:1.6}

[data-theme="light"] .m6-vuln-header{background:rgba(0,0,0,.03)}

/* ── Defense List ── */
.m6-defense-list{display:flex;flex-direction:column;gap:.6rem;margin:.8rem 0}
.m6-defense-item{display:flex;gap:.8rem;align-items:flex-start;font-size:.88rem;line-height:1.5}
.m6-defense-num{width:24px;height:24px;border-radius:50%;background:#22c55e;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;flex-shrink:0}
.m6-defense-item div{flex:1}

/* ── Helmet Section ── */
.m6-helmet-box{background:var(--card-bg,rgba(255,255,255,.03));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:14px;padding:1.5rem;margin:2rem 0}
.m6-helmet-box h3{margin:0 0 .5rem;font-size:1.1rem}
.m6-helmet-box p{font-size:.9rem;line-height:1.5;margin-bottom:1rem}
.m6-helmet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem;margin:1rem 0}
.m6-helmet-item{background:var(--card-bg,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.06));border-radius:8px;padding:.6rem .8rem;font-size:.85rem}
.m6-helmet-item code{color:var(--accent,#8b5cf6);font-weight:600;display:block;margin-bottom:.2rem;font-size:.82rem}

/* ── Security Checklist ── */
.m6-checklist-box{background:var(--card-bg,rgba(255,255,255,.03));border:2px solid var(--accent,#8b5cf6);border-radius:14px;padding:1.5rem;margin:2rem 0}
.m6-checklist-box h3{margin:0 0 1rem;font-size:1.1rem}
.m6-checklist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.6rem}
.m6-checklist-item{display:flex;align-items:center;gap:.6rem;font-size:.88rem;cursor:pointer;padding:.4rem .6rem;border-radius:8px;transition:background .2s}
.m6-checklist-item:hover{background:rgba(139,92,246,.08)}
.m6-checklist-item input[type="checkbox"]{width:18px;height:18px;accent-color:#22c55e;cursor:pointer}
.m6-checklist-item span{flex:1}

/* ── Congrats Box ── */
.congrats-box{border:2px solid rgba(34,197,94,.3);border-radius:16px;padding:2rem;margin:2rem 0;text-align:center;background:rgba(34,197,94,.04)}
.congrats-badge{font-size:3rem;margin-bottom:1rem}
.congrats-content h3{margin:.5rem 0;font-size:1.3rem}
.congrats-content p{color:var(--text-muted,rgba(255,255,255,.7));margin:.5rem 0 1rem}
.congrats-link{display:inline-block;padding:.6rem 1.2rem;background:var(--accent,#8b5cf6);color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:opacity .2s}
.congrats-link:hover{opacity:.85}

/* ── Summary Grid ── */
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:1.5rem 0}
.summary-item{background:var(--card-bg,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:12px;padding:1.2rem}
.summary-item h4{margin:0 0 .4rem;font-size:.95rem}
.summary-item p{margin:0;font-size:.85rem;line-height:1.5;color:var(--text-muted,rgba(255,255,255,.7))}

/* ── Mobile Responsiveness ── */
@media(max-width:768px){
  .m6-when-grid,.m6-compare-grid,.m6-benefits-grid,.m6-combos-grid,.comparison-grid,.m6-algo-grid{grid-template-columns:1fr}
  .m6-cookie-grid,.m6-claims-grid,.m6-helmet-grid,.m6-terms-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .m6-checklist-grid{grid-template-columns:1fr}
  .summary-grid{grid-template-columns:1fr}
  .m6-pipeline-step{flex-direction:column;gap:.6rem}
  .m6-pipeline-icon{min-width:auto;text-align:left}
}

/* =============================
   PIPELINE DIAGRAM (Module 6)
   ============================= */
.m6-pipeline-diagram {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--card-bg, rgba(255,255,255,.03));
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 14px;
    padding: 2rem 1.5rem;
    margin: 1.5rem 0;
}
.m6-pipeline-title {
    margin: 0 0 1.2rem;
    font-size: 1.1rem;
    font-weight: 600;
}
.m6-pipeline-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--card-bg, rgba(255,255,255,.04));
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 10px;
    border-left: 4px solid var(--accent, #8b5cf6);
    transition: box-shadow 0.2s;
}
.m6-pipeline-step:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
.m6-pipeline-step--red    { border-left-color: #ef4444; }
.m6-pipeline-step--amber  { border-left-color: #f59e0b; }
.m6-pipeline-step--green  { border-left-color: #22c55e; }
.m6-pipeline-step--blue   { border-left-color: #3b82f6; }
.m6-pipeline-step--purple { border-left-color: #a855f7; }
.m6-pipeline-icon {
    font-size: 1.6rem;
    min-width: 40px;
    text-align: center;
    padding-top: 2px;
}
.m6-pipeline-content { flex: 1; min-width: 0; }
.m6-pipeline-content strong {
    font-size: 1.05rem;
    color: var(--text, #fff);
    display: block;
    margin-bottom: 0.4rem;
}
.m6-pipeline-content p {
    font-size: 0.9rem;
    color: var(--text-muted, rgba(255,255,255,.7));
    line-height: 1.65;
    margin: 0;
}
.m6-pipeline-content code {
    background: rgba(139,92,246,0.13);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.85em;
    color: var(--accent, #8b5cf6);
}
.m6-pipeline-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0;
    color: var(--accent, #8b5cf6);
    font-size: 0.85rem;
}
.m6-pipeline-arrow span { font-size: 1.1rem; }
.m6-pipeline-arrow em {
    font-style: italic;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Light theme pipeline overrides */
[data-theme="light"] .m6-pipeline-diagram { background: #f1f5f9; border-color: #cbd5e1; }
[data-theme="light"] .m6-pipeline-step { background: #ffffff; border-color: #e2e8f0; }
[data-theme="light"] .m6-pipeline-content code { background: rgba(139,92,246,0.1); color: #6d28d9; }
[data-theme="light"] .m6-pipeline-content strong { color: #1e293b; }
[data-theme="light"] .m6-pipeline-content p { color: #475569; }
[data-theme="light"] .m6-pipeline-arrow { color: #6d28d9; }
[data-theme="light"] .m6-pipeline-step:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

/* ═══════════════════════════════════════════
   COMPREHENSIVE LIGHT THEME OVERRIDES
   ═══════════════════════════════════════════ */

/* Callout Boxes */
[data-theme="light"] .callout-box--warning { color: #1e293b; }
[data-theme="light"] .callout-box--tip { color: #1e293b; }

/* Diagram / Step-Flow (legacy) */
[data-theme="light"] .diagram-box { background: #f1f5f9; border-color: #cbd5e1; }
[data-theme="light"] .step-content p { color: #475569; }

/* When-to-Use Box */
[data-theme="light"] .m6-when-box { background: #f8fafc; border-color: #cbd5e1; }
[data-theme="light"] .m6-when-card { background: rgba(255,255,255,0.8); }
[data-theme="light"] .m6-when-card p { color: #334155; }

/* Cookie Attributes Grid */
[data-theme="light"] .m6-cookie-attr { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .m6-cookie-attr h4 { color: #6d28d9; }
[data-theme="light"] .m6-cookie-attr p { color: #334155; }

/* JWT Claims Grid */
[data-theme="light"] .m6-claim { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .m6-claim code { color: #6d28d9; }

/* Pitfalls / Best Practices */
[data-theme="light"] .m6-pitfall,
[data-theme="light"] .m6-bp-item { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .m6-pitfall p,
[data-theme="light"] .m6-bp-item p { color: #475569; }
[data-theme="light"] .m6-bp-num { background: #6d28d9; }

/* Terms Grid */
[data-theme="light"] .m6-term { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .m6-term strong { color: #6d28d9; }

/* Compare Section */
[data-theme="light"] .m6-compare-col { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .m6-compare-pros,
[data-theme="light"] .m6-compare-cons { color: #334155; }

/* Decision Tree */
[data-theme="light"] .m6-decision-q { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .m6-decision-q p { color: #475569; }

/* Vulnerability Cards */
[data-theme="light"] .m6-vuln-card { background: #ffffff; border-color: #e2e8f0; }
[data-theme="light"] .m6-vuln-content p { color: #334155; }

/* Helmet Section */
[data-theme="light"] .m6-helmet-box { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .m6-helmet-box p { color: #334155; }
[data-theme="light"] .m6-helmet-item { background: #ffffff; border-color: #e2e8f0; }
[data-theme="light"] .m6-helmet-item code { color: #6d28d9; }

/* Security Checklist */
[data-theme="light"] .m6-checklist-box { background: #f8fafc; border-color: #6d28d9; }
[data-theme="light"] .m6-checklist-item:hover { background: rgba(109,40,217,0.06); }

/* Congrats Box */
[data-theme="light"] .congrats-content p { color: #475569; }
[data-theme="light"] .congrats-link { background: #6d28d9; }

/* Summary Grid */
[data-theme="light"] .summary-item { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .summary-item p { color: #475569; }