/* ===================================
   Module 4 — Node.js Fundamentals
   Extra component styles
   =================================== */

/* =============================
   1. INTRO — Feature Grid
   ============================= */
.m4-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.85rem;
    margin: 1.5rem 0;
}

.m4-feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
}

.m4-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.m4-feature-card--green  { border-color: rgba(110, 231, 183, 0.3); }
.m4-feature-card--blue   { border-color: rgba(96, 165, 250, 0.3); }
.m4-feature-card--purple { border-color: rgba(167, 139, 250, 0.3); }
.m4-feature-card--yellow { border-color: rgba(250, 204, 21, 0.3); }

.m4-feature-card--green:hover  { border-color: #6ee7b7; }
.m4-feature-card--blue:hover   { border-color: #60a5fa; }
.m4-feature-card--purple:hover { border-color: #a78bfa; }
.m4-feature-card--yellow:hover { border-color: #facc15; }

.m4-feature-card--cta {
    background: linear-gradient(135deg, rgba(122, 162, 255, 0.12), rgba(110, 231, 183, 0.12));
    border-color: rgba(122, 162, 255, 0.3);
    position: relative;
    cursor: pointer;
}
.m4-feature-card--cta:hover { border-color: var(--accent-primary); }

.m4-feature-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.m4-feature-label { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.m4-feature-desc { font-size: 0.78rem; color: var(--text-tertiary); margin-top: 0.25rem; }
.m4-feature-arrow { font-size: 1.2rem; margin-top: 0.35rem; color: var(--accent-primary); font-weight: 700; }

[data-theme="light"] .m4-feature-card--green  { border-color: rgba(5, 150, 105, 0.25); }
[data-theme="light"] .m4-feature-card--blue   { border-color: rgba(37, 99, 235, 0.25); }
[data-theme="light"] .m4-feature-card--purple { border-color: rgba(124, 58, 237, 0.25); }
[data-theme="light"] .m4-feature-card--yellow { border-color: rgba(202, 138, 4, 0.25); }
[data-theme="light"] .m4-feature-card--green:hover  { border-color: #059669; }
[data-theme="light"] .m4-feature-card--blue:hover   { border-color: #2563eb; }
[data-theme="light"] .m4-feature-card--purple:hover { border-color: #7c3aed; }
[data-theme="light"] .m4-feature-card--yellow:hover { border-color: #ca8a04; }
/* feature-card CTA light override → moved to comprehensive section */

/* =============================
   2. INSTALLATION TIPS
   ============================= */
.m4-install-tips {
    padding: 1.15rem 1.35rem;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    margin: 1rem 0;
}
.m4-install-tips h4 { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--text-primary); }
.m4-install-tips ul { margin: 0; padding-left: 1.1rem; }
.m4-install-tips li { margin-bottom: 0.4rem; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; }

/* =============================
   3. CELEBRATION BOX
   ============================= */
.m4-celebration-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem;
    margin: 1.75rem 0;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(110, 231, 183, 0.08), rgba(122, 162, 255, 0.08));
    border: 1px solid rgba(110, 231, 183, 0.25);
}
.m4-celebration-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.m4-celebration-box h4 { margin: 0 0 0.5rem; font-size: 1.1rem; color: var(--accent-secondary); }
.m4-celebration-box p { margin: 0; font-size: 0.92rem; color: var(--text-secondary); max-width: 500px; }

[data-theme="light"] .m4-celebration-box h4 { color: #059669; }

/* =============================
   4. MODULE TYPES GRID
   ============================= */
.m4-module-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin: 1.25rem 0;
}

.m4-module-type-card {
    padding: 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    text-align: center;
    transition: border-color 0.2s;
}

.m4-module-type-card--green  { border-top: 3px solid #6ee7b7; }
.m4-module-type-card--blue   { border-top: 3px solid #60a5fa; }
.m4-module-type-card--purple { border-top: 3px solid #a78bfa; }

.m4-module-type-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.m4-module-type-card h4 { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--text-primary); }
.m4-module-type-card p { margin: 0; font-size: 0.85rem; color: var(--text-tertiary); }

[data-theme="light"] .m4-module-type-card--green  { border-top-color: #059669; }
[data-theme="light"] .m4-module-type-card--blue   { border-top-color: #2563eb; }
[data-theme="light"] .m4-module-type-card--purple { border-top-color: #7c3aed; }

/* =============================
   5. COLLAPSIBLE DETAILS BOX
   ============================= */
.m4-details-box {
    margin: 1.25rem 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    overflow: hidden;
}

.m4-details-box summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    list-style: none;
    color: var(--text-primary);
    transition: background 0.2s;
}

.m4-details-box summary::-webkit-details-marker { display: none; }
.m4-details-box summary::marker { display: none; content: ''; }
.m4-details-box summary:hover { background: rgba(122, 162, 255, 0.05); }

.m4-details-arrow {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--accent-primary);
    transition: transform 0.25s ease;
}

.m4-details-content {
    padding: 0.5rem 1.25rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.m4-details-box--green  { border-left: 3px solid #6ee7b7; }
.m4-details-box--blue   { border-left: 3px solid #60a5fa; }
.m4-details-box--purple { border-left: 3px solid #a78bfa; }
.m4-details-box--yellow { border-left: 3px solid #facc15; }

[data-theme="light"] .m4-details-box--green  { border-left-color: #059669; }
[data-theme="light"] .m4-details-box--blue   { border-left-color: #2563eb; }
[data-theme="light"] .m4-details-box--purple { border-left-color: #7c3aed; }
[data-theme="light"] .m4-details-box--yellow { border-left-color: #ca8a04; }
[data-theme="light"] .m4-details-box summary:hover {
    background: rgba(37, 99, 235, 0.04);
}
[data-theme="light"] .m4-details-content {
    border-top-color: rgba(0, 0, 0, 0.06);
}

/* =============================
   6. CJS vs ESM COMPARISON TABLE
   ============================= */
.m4-compare-table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.m4-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.m4-compare-table th,
.m4-compare-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.m4-compare-table th {
    background: var(--bg-tertiary);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.m4-compare-table tbody tr:nth-child(even) { background: rgba(122, 162, 255, 0.03); }
.m4-compare-table tbody tr:hover { background: rgba(122, 162, 255, 0.06); }

.m4-compare-table td:first-child { font-weight: 600; color: var(--text-primary); }
.m4-compare-table td:nth-child(2) { color: #f97316; }
.m4-compare-table td:nth-child(3) { color: #6ee7b7; }

[data-theme="light"] .m4-compare-table td:nth-child(2) { color: #ea580c; }
[data-theme="light"] .m4-compare-table td:nth-child(3) { color: #059669; }
[data-theme="light"] .m4-compare-table tbody tr:nth-child(even) { background: rgba(37, 99, 235, 0.02); }
[data-theme="light"] .m4-compare-table tbody tr:hover { background: rgba(37, 99, 235, 0.04); }

/* =============================
   7. FS — Three Versions Grid
   ============================= */
.m4-fs-versions {
    margin: 1.25rem 0;
}
.m4-fs-versions h4 { margin: 0 0 1rem; }

.m4-fs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}

.m4-fs-card {
    padding: 1.15rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    position: relative;
}

.m4-fs-badge {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.m4-fs-card--danger  { border-top: 3px solid #f87171; }
.m4-fs-card--warning { border-top: 3px solid #fbbf24; }
.m4-fs-card--success { border-top: 3px solid #6ee7b7; }

.m4-fs-card--danger  .m4-fs-badge { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.m4-fs-card--warning .m4-fs-badge { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.m4-fs-card--success .m4-fs-badge { background: rgba(110, 231, 183, 0.15); color: #6ee7b7; }

.m4-fs-card h5 { margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--text-primary); }
.m4-fs-card code { font-size: 0.78rem; display: block; margin-bottom: 0.5rem; word-break: break-all; }
.m4-fs-card p { margin: 0; font-size: 0.82rem; color: var(--text-tertiary); }

[data-theme="light"] .m4-fs-card--danger  { border-top-color: #dc2626; }
[data-theme="light"] .m4-fs-card--warning { border-top-color: #d97706; }
[data-theme="light"] .m4-fs-card--success { border-top-color: #059669; }
/* fs badge light overrides → moved to comprehensive section */

/* =============================
   8. HTTP — Server Components
   ============================= */
.m4-http-components {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.85rem;
    margin: 1.25rem 0;
}

.m4-http-component {
    padding: 1.15rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    transition: border-color 0.2s;
}

.m4-http-component--green  { border-left: 3px solid #6ee7b7; }
.m4-http-component--blue   { border-left: 3px solid #60a5fa; }
.m4-http-component--purple { border-left: 3px solid #a78bfa; }
.m4-http-component--yellow { border-left: 3px solid #facc15; }

.m4-http-component-icon { font-size: 1.5rem; margin-bottom: 0.4rem; }
.m4-http-component h4 { margin: 0 0 0.3rem; font-size: 0.9rem; color: var(--text-primary); }
.m4-http-component p { margin: 0; font-size: 0.82rem; color: var(--text-tertiary); }

[data-theme="light"] .m4-http-component--green  { border-left-color: #059669; }
[data-theme="light"] .m4-http-component--blue   { border-left-color: #2563eb; }
[data-theme="light"] .m4-http-component--purple { border-left-color: #7c3aed; }
[data-theme="light"] .m4-http-component--yellow { border-left-color: #ca8a04; }

/* Reference Grid (req/res deep dive) */
.m4-ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.65rem;
    margin: 1rem 0;
}

.m4-ref-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.m4-ref-card code { font-size: 0.82rem; color: var(--accent-primary); font-weight: 600; }
.m4-ref-card span { font-size: 0.8rem; color: var(--text-tertiary); }

.m4-status-codes {
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
.m4-status-codes h4 { margin: 0 0 0.5rem; font-size: 0.9rem; }
.m4-status-codes p { margin: 0.25rem 0; font-size: 0.85rem; color: var(--text-secondary); }

/* =============================
   9. NPM — Fields, Install, Commands, Packages
   ============================= */
.m4-npm-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.65rem;
    margin: 1.25rem 0;
}

.m4-npm-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}
.m4-npm-field code { font-size: 0.88rem; color: var(--accent-primary); font-weight: 700; }
.m4-npm-field span { font-size: 0.82rem; color: var(--text-tertiary); }

/* Install cards */
.m4-npm-install-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem;
    margin: 1.25rem 0;
}

.m4-npm-install-card {
    text-align: center;
    padding: 1.25rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}
.m4-npm-install-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.m4-npm-install-card h4 { margin: 0 0 0.3rem; font-size: 0.92rem; color: var(--text-primary); }
.m4-npm-install-card p { margin: 0; font-size: 0.82rem; color: var(--text-tertiary); }

.m4-text-danger { color: #f87171 !important; }
[data-theme="light"] .m4-text-danger { color: #dc2626 !important; }

/* Commands grid */
.m4-npm-commands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.55rem;
    margin: 1.25rem 0;
}

.m4-npm-cmd {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}
.m4-npm-cmd code { font-size: 0.82rem; color: var(--accent-primary); font-weight: 600; }
.m4-npm-cmd span { font-size: 0.8rem; color: var(--text-tertiary); }

/* Popular packages */
.m4-popular-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.m4-popular-pkg {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    padding: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    transition: border-color 0.2s;
}
.m4-popular-pkg:hover { border-color: var(--border-hover); }
.m4-popular-pkg span:first-child { font-size: 1.5rem; }
.m4-popular-pkg strong { font-size: 0.9rem; color: var(--text-primary); }
.m4-popular-pkg span:last-child { font-size: 0.8rem; color: var(--text-tertiary); }

/* =============================
   10. NODEMON — Problem/Solution
   ============================= */
.m4-problem-solution {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.25rem 0;
}

.m4-problem-box,
.m4-solution-box {
    padding: 1.25rem;
    border-radius: var(--radius-sm);
}

.m4-problem-box {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.25);
}
.m4-problem-box h3 { margin: 0 0 0.5rem; font-size: 1rem; color: #f87171; }
.m4-problem-box p { margin: 0; font-size: 0.88rem; color: var(--text-secondary); }

.m4-solution-box {
    background: rgba(110, 231, 183, 0.08);
    border: 1px solid rgba(110, 231, 183, 0.25);
}
.m4-solution-box h3 { margin: 0 0 0.5rem; font-size: 1rem; color: #6ee7b7; }
.m4-solution-box p { margin: 0; font-size: 0.88rem; color: var(--text-secondary); }

[data-theme="light"] .m4-problem-box h3 { color: #dc2626; }
[data-theme="light"] .m4-solution-box h3 { color: #059669; }

/* =============================
   11. ENVIRONMENT VARIABLES
   ============================= */
.m4-env-reasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem;
    margin: 1.25rem 0;
}

.m4-env-reason {
    text-align: center;
    padding: 1.25rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}
.m4-env-reason span:first-child { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
.m4-env-reason h4 { margin: 0 0 0.35rem; font-size: 0.92rem; color: var(--text-primary); }
.m4-env-reason p { margin: 0; font-size: 0.82rem; color: var(--text-tertiary); }

.m4-env-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.25rem 0;
}

.m4-env-method {
    padding: 1.15rem 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}
.m4-env-method h4 { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--text-primary); }

.m4-env-method--recommended {
    border-color: rgba(110, 231, 183, 0.3);
    background: rgba(110, 231, 183, 0.04);
}
/* env-method recommended light override → moved to comprehensive section */

/* Common env vars grid */
.m4-env-common-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.55rem;
    margin: 1.25rem 0;
}

.m4-env-var {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}
.m4-env-var code { font-size: 0.85rem; color: var(--accent-secondary); font-weight: 700; }
.m4-env-var span { font-size: 0.8rem; color: var(--text-tertiary); }

/* =============================
   12. POSSIBILITIES GRID
   ============================= */
.m4-possibilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin: 1.5rem 0;
}

.m4-possibility-card {
    padding: 1.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    text-align: center;
    transition: transform 0.2s, border-color 0.2s;
}
.m4-possibility-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-hover);
}
.m4-possibility-icon { font-size: 2.2rem; margin-bottom: 0.5rem; }
.m4-possibility-card h4 { margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--text-primary); }
.m4-possibility-card p { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--text-tertiary); }
.m4-possibility-card code { font-size: 0.78rem; }

/* Next Steps */
.m4-next-steps {
    margin: 1.75rem 0;
    padding: 1.5rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(122, 162, 255, 0.06), rgba(110, 231, 183, 0.06));
    border: 1px solid rgba(122, 162, 255, 0.2);
}
.m4-next-steps h3 { margin: 0 0 1rem; font-size: 1.05rem; color: var(--text-primary); }

/* next-steps light override → moved to comprehensive section */

.m4-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.m4-step {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}
.m4-step span { font-size: 1.1rem; flex-shrink: 0; }
.m4-step p { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }

/* =============================
   RESPONSIVE — 768px
   ============================= */
@media (max-width: 768px) {
    .m4-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .m4-module-types-grid { grid-template-columns: 1fr; }
    .m4-fs-grid { grid-template-columns: 1fr; }
    .m4-http-components { grid-template-columns: 1fr; }
    .m4-ref-grid { grid-template-columns: 1fr; }
    .m4-npm-install-grid { grid-template-columns: 1fr; }
    .m4-npm-commands-grid { grid-template-columns: 1fr; }
    .m4-popular-grid { grid-template-columns: repeat(2, 1fr); }
    .m4-problem-solution { grid-template-columns: 1fr; }
    .m4-env-reasons { grid-template-columns: 1fr; }
    .m4-possibilities-grid { grid-template-columns: repeat(2, 1fr); }
    .m4-steps-grid { grid-template-columns: 1fr; }
    .m4-compare-table { font-size: 0.82rem; }
    .m4-compare-table th,
    .m4-compare-table td { padding: 0.6rem 0.75rem; }
}

/* =============================
   RESPONSIVE — 480px
   ============================= */
@media (max-width: 480px) {
    .m4-feature-grid { grid-template-columns: 1fr; }
    .m4-popular-grid { grid-template-columns: 1fr; }
    .m4-possibilities-grid { grid-template-columns: 1fr; }
    .m4-npm-fields-grid { grid-template-columns: 1fr; }
    .m4-env-common-grid { grid-template-columns: 1fr; }
    .m4-celebration-box { padding: 1.25rem; }
    .m4-details-box summary { padding: 0.85rem 1rem; font-size: 0.88rem; }
    .m4-details-content { padding: 0.5rem 1rem 1.25rem; }
    .m4-chunk-reasons { gap: 0.75rem; }
    .m4-builtin-overview { gap: 0.5rem; }
}

/* =============================
   13. TEST BOX (cURL commands)
   ============================= */
.m4-test-box {
    padding: 1.25rem 1.35rem;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 3px solid #a78bfa;
    margin: 1.25rem 0;
}
.m4-test-box h4 {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

[data-theme="light"] .m4-test-box {
    border-left-color: #7c3aed;
}

/* =============================
   14. CHUNK REASONS
   ============================= */
.m4-chunk-reasons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.25rem 0;
}

.m4-chunk-reason {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.m4-chunk-reason-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
}
.m4-chunk-reason-num--blue { background: #3b82f6; }
.m4-chunk-reason-num--green { background: #22c55e; }
.m4-chunk-reason-num--purple { background: #a855f7; }

.m4-chunk-reason strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.m4-chunk-reason p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    line-height: 1.55;
}

[data-theme="light"] .m4-chunk-reason-num--blue { background: #2563eb; }
[data-theme="light"] .m4-chunk-reason-num--green { background: #059669; }
[data-theme="light"] .m4-chunk-reason-num--purple { background: #7c3aed; }

/* =============================
   15. BUILT-IN MODULE OVERVIEW PILLS
   ============================= */
.m4-builtin-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 1.25rem 0 1.75rem;
}

.m4-builtin-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    border-radius: 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: border-color 0.2s;
}
.m4-builtin-pill:hover { border-color: var(--accent-primary); }
.m4-builtin-pill code {
    font-weight: 700;
    color: var(--accent-primary);
    font-size: 0.88rem;
}
.m4-builtin-pill span {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

/* =============================
   16. MIME TABLE HIGHLIGHT
   ============================= */
.m4-mime-table td:nth-child(2) {
    color: var(--accent-primary) !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
}

/* =============================
   17. ENV BEST PRACTICES LIST
   ============================= */
.m4-env-bp-list {
    padding-left: 1.1rem;
    margin: 0;
}
.m4-env-bp-list li {
    margin-bottom: 0.55rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* =============================
   RESPONSIVE additions — 768px
   ============================= */
@media (max-width: 768px) {
    .m4-chunk-reasons { gap: 0.75rem; }
    .m4-chunk-reason { padding: 0.85rem 1rem; }
    .m4-builtin-overview { gap: 0.5rem; }
    .m4-builtin-pill { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
}

/* =========================================================
   ARCHITECTURE PIPELINE DIAGRAM
   ========================================================= */
.m4-pipeline-diagram {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    margin: 1.5rem 0;
}
.m4-pipeline-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    border-left: 4px solid var(--accent);
    transition: box-shadow 0.2s;
}
.m4-pipeline-step:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
.m4-pipeline-step--blue { border-left-color: #3b82f6; }
.m4-pipeline-step--green { border-left-color: #10b981; }
.m4-pipeline-step--purple { border-left-color: #8b5cf6; }
.m4-pipeline-icon { font-size: 1.6rem; min-width: 40px; text-align: center; padding-top: 2px; }
.m4-pipeline-content { flex: 1; min-width: 0; }
.m4-pipeline-content strong { font-size: 1.1rem; color: var(--text-primary); display: block; margin-bottom: 0.4rem; }
.m4-pipeline-content p { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.65; margin: 0; }
.m4-pipeline-content code { background: rgba(99,102,241,0.13); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; color: var(--accent); }
.m4-pipeline-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0;
    color: var(--accent);
    font-size: 0.85rem;
}
.m4-pipeline-arrow span { font-size: 1.1rem; }
.m4-pipeline-arrow em { font-style: italic; font-family: 'Fira Code', monospace; font-size: 0.8rem; opacity: 0.8; }

/* Light theme pipeline overrides */
[data-theme="light"] .m4-pipeline-diagram { background: #f1f5f9; }
[data-theme="light"] .m4-pipeline-step { background: #ffffff; }
[data-theme="light"] .m4-pipeline-content code { background: rgba(99,102,241,0.1); color: #4f46e5; }

/* =========================================================
   COMPREHENSIVE LIGHT THEME OVERRIDES
   =========================================================
   In dark mode, --bg-tertiary (#1a1f36) is lighter than
   --bg-card (#171a2b), so cards "pop up".
   In light mode, --bg-tertiary (#e2e8f0) is darker than
   --bg-card (#ffffff), so cards "sink in" and look heavy.
   Fix: make all card-type components white with subtle
   shadows in light mode.
   ========================================================= */

/* ---- Group A: Major card components → white + shadow ---- */
[data-theme="light"] .m4-feature-card,
[data-theme="light"] .m4-module-type-card,
[data-theme="light"] .m4-fs-card,
[data-theme="light"] .m4-http-component,
[data-theme="light"] .m4-npm-install-card,
[data-theme="light"] .m4-popular-pkg,
[data-theme="light"] .m4-possibility-card,
[data-theme="light"] .m4-env-reason,
[data-theme="light"] .m4-chunk-reason {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* ---- Group B: Smaller list/field items → white + minimal shadow ---- */
[data-theme="light"] .m4-npm-field,
[data-theme="light"] .m4-npm-cmd,
[data-theme="light"] .m4-env-var,
[data-theme="light"] .m4-ref-card,
[data-theme="light"] .m4-step {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* ---- Group C: Container boxes → white ---- */
[data-theme="light"] .m4-install-tips,
[data-theme="light"] .m4-env-method,
[data-theme="light"] .m4-test-box,
[data-theme="light"] .m4-status-codes {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ---- Group D: Pills → near-white ---- */
[data-theme="light"] .m4-builtin-pill {
    background: #f8fafc;
    border-color: rgba(0, 0, 0, 0.08);
}

/* ---- Table header → lighter background ---- */
[data-theme="light"] .m4-compare-table th {
    background: #f8fafc;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .m4-compare-table td {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .m4-compare-table-wrap {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ---- Celebration box refinement ---- */
[data-theme="light"] .m4-celebration-box {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.04), rgba(37, 99, 235, 0.04));
    border-color: rgba(5, 150, 105, 0.15);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

/* ---- Problem/Solution boxes ---- */
[data-theme="light"] .m4-problem-box {
    background: rgba(220, 38, 38, 0.04);
    border-color: rgba(220, 38, 38, 0.15);
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.04);
}
[data-theme="light"] .m4-solution-box {
    background: rgba(5, 150, 105, 0.04);
    border-color: rgba(5, 150, 105, 0.15);
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.04);
}

/* ---- Env recommended method ---- */
[data-theme="light"] .m4-env-method--recommended {
    background: rgba(5, 150, 105, 0.03);
    border-color: rgba(5, 150, 105, 0.15);
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.04);
}

/* ---- Feature card hover in light ---- */
[data-theme="light"] .m4-feature-card:hover,
[data-theme="light"] .m4-possibility-card:hover,
[data-theme="light"] .m4-popular-pkg:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ---- Badge/pill colors for light mode ---- */
[data-theme="light"] .m4-fs-card--danger .m4-fs-badge {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}
[data-theme="light"] .m4-fs-card--warning .m4-fs-badge {
    background: rgba(217, 119, 6, 0.08);
    color: #d97706;
}
[data-theme="light"] .m4-fs-card--success .m4-fs-badge {
    background: rgba(5, 150, 105, 0.08);
    color: #059669;
}

/* ---- CTA card for light mode ---- */
[data-theme="light"] .m4-feature-card--cta {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), rgba(5, 150, 105, 0.04));
    border-color: rgba(37, 99, 235, 0.2);
}

/* ---- Chunk reason number circles ---- */
[data-theme="light"] .m4-chunk-reason-num {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ---- Next steps refinement ---- */
[data-theme="light"] .m4-next-steps {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.03), rgba(5, 150, 105, 0.03));
    border-color: rgba(37, 99, 235, 0.12);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

/* ---- Details box refinement ---- */
[data-theme="light"] .m4-details-box {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}