/* Avlory Engine /engine/language: a teaser for Avlory's programming language. Scoped to main.xp.eg; shared parts are
   in engine-core.css. Static content only: nothing is built, so there are no demos, only designed code samples. */

.eg ul.tgrid{list-style:none;margin:0;padding:0}
.eg .chap-head code,.eg .ti code,.eg .promises code,.eg .never code,.eg .honest code,.eg table.t code{font:500 .92em var(--f-mono);color:var(--text);background:var(--surface-2);border-radius:5px;padding:1px 5px;white-space:nowrap}

/* the label every sample carries */
.eg .lg-note{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:7px 12px;border-radius:999px;border:1px dashed var(--border-strong);font:600 12px var(--f-body);color:var(--muted)}
.eg .lg-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn);flex:none}

/* side-by-side samples: Java on the left, the new language on the right */
.eg .lg-pairs{display:grid;gap:22px}
.eg .lg-pair{display:grid;gap:10px}
.eg .lg-pair > h3{font:700 15px var(--f-body);letter-spacing:0;color:var(--text)}
.eg .lg-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media (max-width:760px){.eg .lg-cols{grid-template-columns:minmax(0,1fr)}}
.eg .lg-code{margin:0;display:grid;grid-template-rows:auto 1fr;min-width:0;border-radius:18px;border:1px solid var(--border);background:var(--card);overflow:hidden}
.eg .lg-code.new{border:1.5px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--p-base),var(--b-base)) border-box}
.eg .lg-code figcaption{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);font:700 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eg .lg-code.new figcaption{color:var(--accent-text)}
.eg .lg-code pre{margin:0;padding:14px 16px;overflow-x:auto;font:500 13px/1.65 var(--f-mono);color:var(--text);tab-size:4;background:var(--card-2)}
.eg .lg-code pre:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px}
@media (max-width:480px){.eg .lg-code pre{font-size:12px;padding:12px 13px}}
.eg .lg-code .k{color:var(--accent-text)}
.eg .lg-code .t{color:var(--accent-text-2)}
.eg .lg-code .c{color:var(--faint)}
.eg .lg-code .s{color:var(--c-teal)}

/* one sample on its own (memory chapter) */
.eg .lg-solo{max-width:760px}
.eg .lg-after{margin-top:16px}