/* ===================================
   Module 1 — JavaScript Language Core
   Extra component styles
   =================================== */

/* =============================
   1. TYPE BADGES (typeof row)
   ============================= */
.m1-type-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}

.m1-type-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.m1-type-badge--number    { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.25); }
.m1-type-badge--string    { background: rgba(34,197,94,0.15);  color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.m1-type-badge--boolean   { background: rgba(168,85,247,0.15); color: #c084fc; border: 1px solid rgba(168,85,247,0.25); }
.m1-type-badge--undefined { background: rgba(156,163,175,0.15); color: #9ca3af; border: 1px solid rgba(156,163,175,0.25); }
.m1-type-badge--object    { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
.m1-type-badge--function  { background: rgba(236,72,153,0.15); color: #f472b6; border: 1px solid rgba(236,72,153,0.25); }
.m1-type-badge--bigint    { background: rgba(14,165,233,0.15); color: #38bdf8; border: 1px solid rgba(14,165,233,0.25); }
.m1-type-badge--symbol    { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }

/* =============================
   2. OPERATOR CARDS (conditionals)
   ============================= */
.m1-operator-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}

.m1-op-card {
    text-align: center;
    padding: 1.25rem 0.75rem;
    border-radius: 12px;
    background: var(--card-bg, rgba(30,41,59,0.5));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    transition: transform 0.2s, box-shadow 0.2s;
}

.m1-op-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.m1-op-card__symbol {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.m1-op-card--and  .m1-op-card__symbol { color: #60a5fa; }
.m1-op-card--or   .m1-op-card__symbol { color: #4ade80; }
.m1-op-card--not  .m1-op-card__symbol { color: #f472b6; }
.m1-op-card--ternary .m1-op-card__symbol { color: #fbbf24; }

.m1-op-card__name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary, #cbd5e1);
    margin-bottom: 0.25rem;
}

.m1-op-card__desc {
    font-size: 0.78rem;
    color: var(--text-tertiary, #94a3b8);
}

/* =============================
   3. EQUALITY COMPARISON BOX
   ============================= */
.m1-equality-box {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m1-equality-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--text-primary, #e2e8f0);
}

.m1-equality-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.m1-equality-card {
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.m1-equality-card--loose {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
}

.m1-equality-card--strict {
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.25);
}

.m1-equality-op {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 0.3rem;
}

.m1-equality-card--loose .m1-equality-op { color: #ef4444; }
.m1-equality-card--strict .m1-equality-op { color: #22c55e; }

.m1-equality-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-secondary, #cbd5e1);
}

.m1-equality-example {
    font-size: 0.85rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-tertiary, #94a3b8);
}

.m1-equality-result--true  { color: #22c55e; font-weight: 600; }
.m1-equality-result--false { color: #ef4444; font-weight: 600; }

/* =============================
   3b. TRUTHY / FALSY GRID
   ============================= */
.m1-truthy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.m1-truthy-card {
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
}

.m1-truthy-card--falsy {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
}

.m1-truthy-card--truthy {
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.25);
}

.m1-truthy-card__header {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #e2e8f0);
}

.m1-truthy-card__items {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    color: var(--text-secondary, #cbd5e1);
    letter-spacing: 0.02em;
}

/* =============================
   3c. NULLISH / OPTIONAL CHAINING
   ============================= */
.m1-nullish-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.m1-nullish-card {
    text-align: center;
    padding: 1.25rem 0.75rem;
    border-radius: 12px;
    background: var(--card-bg, rgba(30,41,59,0.5));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    transition: transform 0.2s, box-shadow 0.2s;
}

.m1-nullish-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.m1-nullish-card__symbol {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 0.4rem;
}

.m1-nullish-card--coalescing .m1-nullish-card__symbol { color: #a78bfa; }
.m1-nullish-card--chaining .m1-nullish-card__symbol   { color: #fbbf24; }

.m1-nullish-card__name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.3rem;
}

.m1-nullish-card__desc {
    font-size: 0.8rem;
    color: var(--text-secondary, #94a3b8);
}

/* =============================
   4. LOOP CARDS
   ============================= */
.m1-loop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}

.m1-loop-card {
    padding: 1rem;
    border-radius: 10px;
    background: var(--card-bg, rgba(30,41,59,0.5));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    transition: transform 0.2s;
}

.m1-loop-card:hover {
    transform: translateY(-2px);
}

.m1-loop-card--for     { border-left: 3px solid #60a5fa; }
.m1-loop-card--forof   { border-left: 3px solid #3b82f6; }
.m1-loop-card--forin   { border-left: 3px solid #f59e0b; }
.m1-loop-card--while   { border-left: 3px solid #a78bfa; }
.m1-loop-card--dowhile { border-left: 3px solid #c084fc; }

.m1-loop-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.m1-loop-card__icon {
    font-size: 1.2rem;
}

.m1-loop-card__keyword {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-js, #f7df1e);
}

.m1-loop-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.m1-loop-badge--blue {
    background: rgba(59,130,246,0.2);
    color: #60a5fa;
}

.m1-loop-badge--orange {
    background: rgba(245,158,11,0.2);
    color: #f59e0b;
}

.m1-loop-card__desc {
    font-size: 0.82rem;
    color: var(--text-secondary, #cbd5e1);
    margin-bottom: 0.5rem;
}

.m1-loop-card__syntax {
    display: block;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-tertiary, #94a3b8);
}

/* Loop tip bar */
.m1-loop-tip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--card-bg, rgba(15,23,42,0.7));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    margin: 1rem 0;
    font-size: 0.88rem;
}

.m1-loop-tip__icon { font-size: 1.1rem; }
.m1-loop-tip__text { color: var(--text-secondary, #cbd5e1); }
.m1-text-blue   { color: #60a5fa; }
.m1-text-orange { color: #f59e0b; }
.m1-text-green  { color: #4ade80; }
.m1-text-purple { color: #c084fc; }

/* Info callout */
.m1-info-callout {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border: 1px solid rgba(59,130,246,0.2);
    border-left: 3px solid #60a5fa;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-secondary, #cbd5e1);
}

/* =============================
   5. ARROW FUNCTION COMPONENTS
   ============================= */

/* Syntax formula */
.m1-arrow-syntax {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem;
    margin: 1rem 0 1.5rem;
    border-radius: 12px;
    background: var(--card-bg, rgba(15,23,42,0.7));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
}

.m1-arrow-syntax__params { color: #60a5fa; font-weight: 600; }
.m1-arrow-syntax__arrow  { color: #f7df1e; font-weight: 700; font-size: 1.5rem; }
.m1-arrow-syntax__body   { color: #4ade80; font-weight: 600; }

/* Variation cards */
.m1-arrow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 0.75rem 0 1.5rem;
}

.m1-arrow-card {
    padding: 1rem;
    border-radius: 10px;
    background: var(--card-bg, rgba(30,41,59,0.5));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    text-align: center;
}

.m1-arrow-card__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-tertiary, #94a3b8);
    margin-bottom: 0.5rem;
}

.m1-arrow-card__code {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
}

/* Features grid */
.m1-features-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}

.m1-feature {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
}

.m1-feature--good {
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.2);
}

.m1-feature--bad {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.2);
}

.m1-feature--good .m1-feature__icon { color: #22c55e; }
.m1-feature--bad  .m1-feature__icon { color: #ef4444; }
.m1-feature__text { color: var(--text-secondary, #cbd5e1); }

/* Return rules box */
.m1-rules-box {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m1-rules-title {
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary, #e2e8f0);
}

.m1-rules-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.m1-rules-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.m1-rules-item__label {
    font-size: 0.82rem;
    color: var(--text-tertiary, #94a3b8);
    min-width: 180px;
}

.m1-rules-item__code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 500;
}

.m1-rules-item__code--green  { color: #4ade80; }
.m1-rules-item__code--orange { color: #fbbf24; }
.m1-rules-item__code--purple { color: #c084fc; }

/* =============================
   6. CALLBACK COMPONENTS
   ============================= */

/* Key concept dark box */
.m1-key-concept {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border: 1px solid rgba(251,191,36,0.2);
    border-left: 3px solid #fbbf24;
}

.m1-key-concept__title {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #fbbf24;
}

.m1-key-concept__text {
    font-size: 0.92rem;
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.6;
}

/* Comparison grid (hardcoded vs callback) */
.m1-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

.m1-comparison-card {
    padding: 1.25rem;
    border-radius: 12px;
    text-align: center;
}

.m1-comparison-card--bad {
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.2);
}

.m1-comparison-card--good {
    background: rgba(34,197,94,0.06);
    border: 1px solid rgba(34,197,94,0.2);
}

.m1-comparison-card__title {
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 0.75rem;
}

.m1-comparison-card--bad .m1-comparison-card__title  { color: #ef4444; }
.m1-comparison-card--good .m1-comparison-card__title { color: #22c55e; }

.m1-comparison-card__code {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    text-align: left;
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(0,0,0,0.2);
    margin-bottom: 0.75rem;
    line-height: 1.6;
    color: var(--text-primary, #e2e8f0);
}

.m1-comparison-card__desc {
    font-size: 0.8rem;
    color: var(--text-tertiary, #94a3b8);
}

/* =============================
   7. OBJECT CREATION GRID
   ============================= */
.m1-obj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}

.m1-obj-card {
    padding: 1.25rem;
    border-radius: 12px;
    background: var(--card-bg, rgba(30,41,59,0.5));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    transition: transform 0.2s;
}

.m1-obj-card:hover { transform: translateY(-2px); }

.m1-obj-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.m1-obj-card__icon {
    font-size: 1.3rem;
    font-weight: 600;
}

.m1-obj-card--literal    .m1-obj-card__icon { color: #fbbf24; }
.m1-obj-card--constructor .m1-obj-card__icon { color: #60a5fa; }
.m1-obj-card--class      .m1-obj-card__icon { color: #c084fc; }

.m1-obj-card__title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary, #e2e8f0);
}

.m1-obj-card__badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.m1-obj-card__badge--common {
    background: rgba(34,197,94,0.2);
    color: #4ade80;
}

.m1-obj-card__badge--modern {
    background: rgba(168,85,247,0.2);
    color: #c084fc;
}

.m1-obj-card__code {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-secondary, #cbd5e1);
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(0,0,0,0.2);
}

/* Object operations dark box */
.m1-ops-box {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m1-ops-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #e2e8f0);
}

.m1-ops-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.m1-ops-item {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

.m1-ops-item--add    { color: #4ade80; background: rgba(34,197,94,0.08); }
.m1-ops-item--remove { color: #f87171; background: rgba(239,68,68,0.08); }
.m1-ops-item--check  { color: #60a5fa; background: rgba(59,130,246,0.08); }

.m1-ops-comment {
    color: var(--text-tertiary, #64748b);
}

/* =============================
   7b. OBJECT UTILITY METHODS GRID
   ============================= */
.m1-obj-utils-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}

.m1-obj-util-card {
    text-align: center;
    padding: 1rem 0.5rem;
    border-radius: 10px;
    background: var(--card-bg, rgba(30,41,59,0.5));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    transition: transform 0.2s;
}

.m1-obj-util-card:hover { transform: translateY(-2px); }

.m1-obj-util-card__method {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.m1-obj-util-card--assign  .m1-obj-util-card__method { color: #60a5fa; }
.m1-obj-util-card--freeze  .m1-obj-util-card__method { color: #38bdf8; }
.m1-obj-util-card--entries .m1-obj-util-card__method { color: #4ade80; }
.m1-obj-util-card--create  .m1-obj-util-card__method { color: #a78bfa; }

.m1-obj-util-card__desc {
    font-size: 0.78rem;
    color: var(--text-secondary, #94a3b8);
}

/* =============================
   8. THIS COMPARISON GRID
   ============================= */
.m1-this-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

.m1-this-card {
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-bg, rgba(30,41,59,0.5));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m1-this-card--regular { border-top: 3px solid #fbbf24; }
.m1-this-card--arrow   { border-top: 3px solid #22c55e; }

.m1-this-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(0,0,0,0.15);
}

.m1-this-card__icon { font-size: 1.1rem; }

.m1-this-card__title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary, #e2e8f0);
}

.m1-this-card__body {
    padding: 1rem;
}

.m1-this-card__label {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.m1-this-card__label--dynamic { color: #fbbf24; }
.m1-this-card__label--lexical { color: #22c55e; }

.m1-this-card__desc {
    font-size: 0.82rem;
    color: var(--text-secondary, #cbd5e1);
}

.m1-this-card__examples {
    padding: 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.m1-this-example--good,
.m1-this-example--bad {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
}

.m1-this-example--good {
    color: #4ade80;
    background: rgba(34,197,94,0.08);
}

.m1-this-example--bad {
    color: #f87171;
    background: rgba(239,68,68,0.08);
}

/* Arguments comparison grid */
.m1-args-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.m1-args-item {
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
}

.m1-args-item--yes {
    background: rgba(34,197,94,0.06);
    border: 1px solid rgba(34,197,94,0.2);
}

.m1-args-item--no {
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.2);
}

.m1-args-item__title {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    color: var(--text-primary, #e2e8f0);
}

.m1-args-item__code {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

.m1-args-item--yes .m1-args-item__code { color: #4ade80; }
.m1-args-item--no  .m1-args-item__code { color: #f87171; }

.m1-args-item__note {
    font-size: 0.78rem;
    color: var(--text-tertiary, #94a3b8);
}

/* =============================
   8b. CALL / BIND / APPLY GRID
   ============================= */
.m1-cba-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}

.m1-cba-card {
    padding: 1rem;
    border-radius: 10px;
    background: var(--card-bg, rgba(30,41,59,0.5));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    text-align: center;
    transition: transform 0.2s;
}

.m1-cba-card:hover { transform: translateY(-2px); }

.m1-cba-card__method {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.m1-cba-card--call  .m1-cba-card__method { color: #60a5fa; }
.m1-cba-card--apply .m1-cba-card__method { color: #4ade80; }
.m1-cba-card--bind  .m1-cba-card__method { color: #fbbf24; }

.m1-cba-card__desc {
    font-size: 0.8rem;
    color: var(--text-secondary, #94a3b8);
}

/* =============================
   9. SPREAD / REST COMPONENTS
   ============================= */
.m1-spread-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.m1-spread-card {
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m1-spread-card--rest {
    background: rgba(59,130,246,0.06);
    border-color: rgba(59,130,246,0.2);
}

.m1-spread-card--spread {
    background: rgba(168,85,247,0.06);
    border-color: rgba(168,85,247,0.2);
}

.m1-spread-card__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.m1-spread-card__icon { font-size: 1.3rem; }

.m1-spread-card__title {
    font-weight: 700;
    font-size: 1rem;
}

.m1-spread-card--rest  .m1-spread-card__title { color: #60a5fa; }
.m1-spread-card--spread .m1-spread-card__title { color: #c084fc; }

.m1-spread-card__visual {
    padding: 1rem;
    border-radius: 10px;
    background: var(--card-bg, rgba(15,23,42,0.6));
    margin-bottom: 1rem;
}

.m1-spread-card__items {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.m1-spread-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 1rem;
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #e2e8f0);
}

.m1-spread-card__arrow {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.m1-spread-card__arrow--rest  { color: #60a5fa; }
.m1-spread-card__arrow--spread { color: #c084fc; }

.m1-spread-card__result {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    display: inline-block;
}

.m1-spread-card__result--rest {
    color: #60a5fa;
    background: rgba(59,130,246,0.12);
}

.m1-spread-card__result--spread {
    color: #c084fc;
    background: rgba(168,85,247,0.12);
}

.m1-spread-card__code {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary, #cbd5e1);
    margin-bottom: 0.5rem;
}

.m1-spread-card__desc {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-tertiary, #94a3b8);
}

/* Highlight text in spread/rest code */
.m1-rest-hl   { color: #60a5fa; font-weight: 700; }
.m1-spread-hl { color: #c084fc; font-weight: 700; }

/* Quick reference box */
.m1-quickref-box {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m1-quickref-title {
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #e2e8f0);
}

.m1-quickref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.m1-quickref-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

.m1-quickref-label--rest   { color: #60a5fa; }
.m1-quickref-label--spread { color: #c084fc; }

.m1-quickref-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary, #cbd5e1);
}

/* =============================
   10. TEMPLATE LITERAL COMPONENTS
   ============================= */
.m1-template-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

.m1-template-card {
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
}

.m1-template-card--old {
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.2);
}

.m1-template-card--new {
    background: rgba(34,197,94,0.06);
    border: 1px solid rgba(34,197,94,0.2);
}

.m1-template-card__title {
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 1rem;
}

.m1-template-card--old .m1-template-card__title { color: #ef4444; }
.m1-template-card--new .m1-template-card__title { color: #22c55e; }

.m1-template-preview {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    color: var(--text-primary, #e2e8f0);
}

.m1-tpl-string        { color: #4ade80; }
.m1-tpl-operator      { color: #94a3b8; font-weight: 700; }
.m1-tpl-backtick      { color: #4ade80; font-weight: 700; }
.m1-tpl-interpolation { color: #fbbf24; font-weight: 700; }

/* Feature badges */
.m1-tpl-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
    justify-content: center;
}

.m1-tpl-feature {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    text-align: center;
    min-width: 160px;
    background: var(--card-bg, rgba(30,41,59,0.5));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m1-tpl-feature__icon {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}

.m1-tpl-feature__title {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary, #e2e8f0);
}

.m1-tpl-feature--multiline .m1-tpl-feature__title     { color: #60a5fa; }
.m1-tpl-feature--interpolation .m1-tpl-feature__title  { color: #fbbf24; }
.m1-tpl-feature--tagged .m1-tpl-feature__title         { color: #c084fc; }

.m1-tpl-feature__desc {
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-tertiary, #94a3b8);
}

/* =============================
   11. LIGHT THEME OVERRIDES
   ============================= */
[data-theme="light"] .m1-type-badge--number    { background: rgba(59,130,246,0.1); color: #2563eb; border-color: rgba(59,130,246,0.2); }
[data-theme="light"] .m1-type-badge--string    { background: rgba(34,197,94,0.1);  color: #059669; border-color: rgba(34,197,94,0.2); }
[data-theme="light"] .m1-type-badge--boolean   { background: rgba(168,85,247,0.1); color: #7c3aed; border-color: rgba(168,85,247,0.2); }
[data-theme="light"] .m1-type-badge--undefined { background: rgba(156,163,175,0.1); color: #6b7280; border-color: rgba(156,163,175,0.2); }
[data-theme="light"] .m1-type-badge--object    { background: rgba(251,191,36,0.1); color: #b45309; border-color: rgba(251,191,36,0.2); }
[data-theme="light"] .m1-type-badge--function  { background: rgba(236,72,153,0.1); color: #be185d; border-color: rgba(236,72,153,0.2); }
[data-theme="light"] .m1-type-badge--bigint    { background: rgba(14,165,233,0.1); color: #0369a1; border-color: rgba(14,165,233,0.2); }
[data-theme="light"] .m1-type-badge--symbol    { background: rgba(245,158,11,0.1); color: #b45309; border-color: rgba(245,158,11,0.2); }

[data-theme="light"] .m1-op-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[data-theme="light"] .m1-op-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
[data-theme="light"] .m1-op-card--and  .m1-op-card__symbol { color: #2563eb; }
[data-theme="light"] .m1-op-card--or   .m1-op-card__symbol { color: #059669; }
[data-theme="light"] .m1-op-card--not  .m1-op-card__symbol { color: #be185d; }
[data-theme="light"] .m1-op-card--ternary .m1-op-card__symbol { color: #b45309; }
[data-theme="light"] .m1-op-card__name { color: #475569; }
[data-theme="light"] .m1-op-card__desc { color: #64748b; }

[data-theme="light"] .m1-equality-box {
    background: #ffffff;
    border-color: #e2e8f0;
}
[data-theme="light"] .m1-equality-title { color: #1e293b; }
[data-theme="light"] .m1-equality-label { color: #475569; }
[data-theme="light"] .m1-equality-example { color: #64748b; }
[data-theme="light"] .m1-equality-card--loose .m1-equality-op { color: #dc2626; }
[data-theme="light"] .m1-equality-card--strict .m1-equality-op { color: #15803d; }
[data-theme="light"] .m1-equality-card--loose  { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.18); }
[data-theme="light"] .m1-equality-card--strict { background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.18); }
[data-theme="light"] .m1-equality-result--true  { color: #15803d; }
[data-theme="light"] .m1-equality-result--false { color: #dc2626; }

[data-theme="light"] .m1-truthy-card--falsy  { background: rgba(239,68,68,0.06);  border-color: rgba(239,68,68,0.18); }
[data-theme="light"] .m1-truthy-card--truthy { background: rgba(34,197,94,0.06);  border-color: rgba(34,197,94,0.18); }
[data-theme="light"] .m1-truthy-card__header { color: #1e293b; }
[data-theme="light"] .m1-truthy-card__items  { color: #475569; }

[data-theme="light"] .m1-nullish-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[data-theme="light"] .m1-nullish-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
[data-theme="light"] .m1-nullish-card--coalescing .m1-nullish-card__symbol { color: #7c3aed; }
[data-theme="light"] .m1-nullish-card--chaining .m1-nullish-card__symbol   { color: #b45309; }
[data-theme="light"] .m1-nullish-card__name { color: #1e293b; }
[data-theme="light"] .m1-nullish-card__desc { color: #64748b; }

[data-theme="light"] .m1-loop-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="light"] .m1-loop-card__keyword { color: #b45309; }
[data-theme="light"] .m1-loop-card__desc { color: #475569; }
[data-theme="light"] .m1-loop-card__syntax { color: #64748b; }
[data-theme="light"] .m1-loop-badge--blue { background: rgba(59,130,246,0.12); color: #2563eb; }
[data-theme="light"] .m1-loop-badge--orange { background: rgba(245,158,11,0.12); color: #b45309; }
[data-theme="light"] .m1-loop-tip { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .m1-loop-tip__text { color: #475569; }
[data-theme="light"] .m1-text-blue   { color: #2563eb; }
[data-theme="light"] .m1-text-orange { color: #b45309; }
[data-theme="light"] .m1-text-green  { color: #059669; }
[data-theme="light"] .m1-text-purple { color: #7c3aed; }

[data-theme="light"] .m1-arrow-syntax {
    background: #f8fafc;
    border-color: #e2e8f0;
}
[data-theme="light"] .m1-arrow-syntax__params { color: #2563eb; }
[data-theme="light"] .m1-arrow-syntax__arrow  { color: #b45309; }
[data-theme="light"] .m1-arrow-syntax__body   { color: #059669; }

[data-theme="light"] .m1-arrow-card {
    background: #ffffff;
    border-color: #e2e8f0;
}
[data-theme="light"] .m1-arrow-card__label { color: #64748b; }
[data-theme="light"] .m1-arrow-card__code { color: #1e293b; }

[data-theme="light"] .m1-feature--good { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.15); }
[data-theme="light"] .m1-feature--bad  { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.15); }
[data-theme="light"] .m1-feature--good .m1-feature__icon { color: #059669; }
[data-theme="light"] .m1-feature--bad  .m1-feature__icon { color: #dc2626; }
[data-theme="light"] .m1-feature__text { color: #475569; }

[data-theme="light"] .m1-rules-box {
    background: #f8fafc;
    border-color: #e2e8f0;
}
[data-theme="light"] .m1-rules-title { color: #1e293b; }
[data-theme="light"] .m1-rules-item__label { color: #64748b; }
[data-theme="light"] .m1-rules-item__code--green  { color: #059669; }
[data-theme="light"] .m1-rules-item__code--orange { color: #b45309; }
[data-theme="light"] .m1-rules-item__code--purple { color: #7c3aed; }

[data-theme="light"] .m1-key-concept {
    background: #fffbeb;
    border-color: rgba(251,191,36,0.3);
}
[data-theme="light"] .m1-key-concept__title { color: #b45309; }
[data-theme="light"] .m1-key-concept__text { color: #475569; }

[data-theme="light"] .m1-comparison-card--bad  { background: rgba(239,68,68,0.04); }
[data-theme="light"] .m1-comparison-card--good { background: rgba(34,197,94,0.04); }
[data-theme="light"] .m1-comparison-card--bad  .m1-comparison-card__title { color: #dc2626; }
[data-theme="light"] .m1-comparison-card--good .m1-comparison-card__title { color: #15803d; }
[data-theme="light"] .m1-comparison-card__code { background: rgba(0,0,0,0.04); color: #1e293b; }
[data-theme="light"] .m1-comparison-card__desc { color: #64748b; }

[data-theme="light"] .m1-obj-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="light"] .m1-obj-card__title { color: #1e293b; }
[data-theme="light"] .m1-obj-card--literal     .m1-obj-card__icon { color: #d97706; }
[data-theme="light"] .m1-obj-card--constructor .m1-obj-card__icon { color: #2563eb; }
[data-theme="light"] .m1-obj-card--class       .m1-obj-card__icon { color: #7e22ce; }
[data-theme="light"] .m1-obj-card__badge--common { background: rgba(34,197,94,0.12); color: #059669; }
[data-theme="light"] .m1-obj-card__badge--modern { background: rgba(168,85,247,0.12); color: #7c3aed; }
[data-theme="light"] .m1-obj-card__code { background: rgba(0,0,0,0.04); color: #475569; }

[data-theme="light"] .m1-ops-box {
    background: #f8fafc;
    border-color: #e2e8f0;
}
[data-theme="light"] .m1-ops-title { color: #1e293b; }
[data-theme="light"] .m1-ops-item--add    { color: #059669; background: rgba(34,197,94,0.06); }
[data-theme="light"] .m1-ops-item--remove { color: #dc2626; background: rgba(239,68,68,0.06); }
[data-theme="light"] .m1-ops-item--check  { color: #2563eb; background: rgba(59,130,246,0.06); }
[data-theme="light"] .m1-ops-comment { color: #94a3b8; }

[data-theme="light"] .m1-obj-util-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="light"] .m1-obj-util-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
[data-theme="light"] .m1-obj-util-card--assign  .m1-obj-util-card__method { color: #2563eb; }
[data-theme="light"] .m1-obj-util-card--freeze  .m1-obj-util-card__method { color: #0284c7; }
[data-theme="light"] .m1-obj-util-card--entries .m1-obj-util-card__method { color: #059669; }
[data-theme="light"] .m1-obj-util-card--create  .m1-obj-util-card__method { color: #7c3aed; }
[data-theme="light"] .m1-obj-util-card__desc { color: #64748b; }

[data-theme="light"] .m1-this-card {
    background: #ffffff;
    border-color: #e2e8f0;
}
[data-theme="light"] .m1-this-card__header { background: rgba(0,0,0,0.03); }
[data-theme="light"] .m1-this-card__title { color: #1e293b; }
[data-theme="light"] .m1-this-card__label--dynamic { color: #b45309; }
[data-theme="light"] .m1-this-card__label--lexical { color: #059669; }
[data-theme="light"] .m1-this-card__desc { color: #475569; }
[data-theme="light"] .m1-this-example--good { color: #059669; background: rgba(34,197,94,0.06); }
[data-theme="light"] .m1-this-example--bad  { color: #dc2626; background: rgba(239,68,68,0.06); }

[data-theme="light"] .m1-args-item--yes { background: rgba(34,197,94,0.04); }
[data-theme="light"] .m1-args-item--no  { background: rgba(239,68,68,0.04); }
[data-theme="light"] .m1-args-item__title { color: #1e293b; }
[data-theme="light"] .m1-args-item--yes .m1-args-item__code { color: #059669; }
[data-theme="light"] .m1-args-item--no  .m1-args-item__code { color: #dc2626; }
[data-theme="light"] .m1-args-item__note { color: #64748b; }

[data-theme="light"] .m1-cba-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="light"] .m1-cba-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
[data-theme="light"] .m1-cba-card--call  .m1-cba-card__method { color: #2563eb; }
[data-theme="light"] .m1-cba-card--apply .m1-cba-card__method { color: #059669; }
[data-theme="light"] .m1-cba-card--bind  .m1-cba-card__method { color: #b45309; }
[data-theme="light"] .m1-cba-card__desc { color: #64748b; }

[data-theme="light"] .m1-spread-card--rest {
    background: rgba(59,130,246,0.04);
    border-color: rgba(59,130,246,0.15);
}
[data-theme="light"] .m1-spread-card--spread {
    background: rgba(168,85,247,0.04);
    border-color: rgba(168,85,247,0.15);
}
[data-theme="light"] .m1-spread-card--rest  .m1-spread-card__title { color: #2563eb; }
[data-theme="light"] .m1-spread-card--spread .m1-spread-card__title { color: #7c3aed; }
[data-theme="light"] .m1-spread-card__visual { background: #f8fafc; }
[data-theme="light"] .m1-spread-item { background: rgba(0,0,0,0.05); color: #1e293b; }
[data-theme="light"] .m1-spread-card__arrow--rest  { color: #2563eb; }
[data-theme="light"] .m1-spread-card__arrow--spread { color: #7c3aed; }
[data-theme="light"] .m1-spread-card__result--rest   { color: #2563eb; background: rgba(59,130,246,0.08); }
[data-theme="light"] .m1-spread-card__result--spread { color: #7c3aed; background: rgba(168,85,247,0.08); }
[data-theme="light"] .m1-spread-card__code { color: #475569; }
[data-theme="light"] .m1-spread-card__desc { color: #64748b; }
[data-theme="light"] .m1-rest-hl   { color: #2563eb; }
[data-theme="light"] .m1-spread-hl { color: #7c3aed; }

[data-theme="light"] .m1-quickref-box {
    background: #f8fafc;
    border-color: #e2e8f0;
}
[data-theme="light"] .m1-quickref-title { color: #1e293b; }
[data-theme="light"] .m1-quickref-label--rest   { color: #2563eb; }
[data-theme="light"] .m1-quickref-label--spread { color: #7c3aed; }
[data-theme="light"] .m1-quickref-code { color: #475569; }

[data-theme="light"] .m1-template-card--old { background: rgba(239,68,68,0.03); }
[data-theme="light"] .m1-template-card--new { background: rgba(34,197,94,0.03); }
[data-theme="light"] .m1-template-card--old .m1-template-card__title { color: #dc2626; }
[data-theme="light"] .m1-template-card--new .m1-template-card__title { color: #059669; }
[data-theme="light"] .m1-template-preview { color: #1e293b; }
[data-theme="light"] .m1-tpl-string { color: #059669; }
[data-theme="light"] .m1-tpl-operator { color: #64748b; }
[data-theme="light"] .m1-tpl-backtick { color: #059669; }
[data-theme="light"] .m1-tpl-interpolation { color: #b45309; }

[data-theme="light"] .m1-tpl-feature {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="light"] .m1-tpl-feature__title { color: #1e293b; }
[data-theme="light"] .m1-tpl-feature--multiline .m1-tpl-feature__title     { color: #2563eb; }
[data-theme="light"] .m1-tpl-feature--interpolation .m1-tpl-feature__title  { color: #b45309; }
[data-theme="light"] .m1-tpl-feature--tagged .m1-tpl-feature__title         { color: #7c3aed; }
[data-theme="light"] .m1-tpl-feature__desc { color: #64748b; }

[data-theme="light"] .m1-info-callout {
    background: #eff6ff;
    border-color: rgba(59,130,246,0.2);
    border-left-color: #2563eb;
    color: #475569;
}

[data-theme="light"] .m1-loop-card--for     { border-left-color: #2563eb; }
[data-theme="light"] .m1-loop-card--forof   { border-left-color: #1d4ed8; }
[data-theme="light"] .m1-loop-card--forin   { border-left-color: #b45309; }
[data-theme="light"] .m1-loop-card--while   { border-left-color: #7c3aed; }
[data-theme="light"] .m1-loop-card--dowhile { border-left-color: #9333ea; }

[data-theme="light"] .m1-this-card--regular { border-top-color: #b45309; }
[data-theme="light"] .m1-this-card--arrow   { border-top-color: #059669; }

/* =============================
   12. RESPONSIVE
   ============================= */
@media (max-width: 768px) {
    .m1-operator-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .m1-equality-grid {
        grid-template-columns: 1fr;
    }

    .m1-loop-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .m1-arrow-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .m1-arrow-syntax {
        flex-direction: column;
        gap: 0.5rem;
        font-size: 0.95rem;
    }

    .m1-comparison-grid,
    .m1-this-grid,
    .m1-args-grid,
    .m1-spread-grid,
    .m1-template-grid,
    .m1-truthy-grid,
    .m1-nullish-grid,
    .m1-cba-grid {
        grid-template-columns: 1fr;
    }

    .m1-obj-utils-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .m1-quickref-grid {
        grid-template-columns: 1fr;
    }

    .m1-rules-item {
        flex-direction: column;
        gap: 0.25rem;
    }

    .m1-rules-item__label {
        min-width: auto;
    }

    .m1-obj-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .m1-operator-grid {
        grid-template-columns: 1fr 1fr;
    }

    .m1-loop-grid {
        grid-template-columns: 1fr;
    }

    .m1-arrow-grid {
        grid-template-columns: 1fr;
    }

    .m1-features-grid {
        flex-direction: column;
    }

    .m1-tpl-features {
        flex-direction: column;
    }

    .m1-obj-utils-grid {
        grid-template-columns: 1fr;
    }
}