/* Avlory Engine /engine/pulse: the chapter demos. Scoped to main.xp.eg; shared parts are in engine-core.css.
   Syntax colours are the page's own role tokens, built from explore-core's colour set. */
.eg{--syn-kw:var(--c-purple);--syn-str:var(--c-green);--syn-fn:var(--c-blue);--syn-ty:var(--c-amber);--syn-num:var(--c-coral);--syn-com:var(--faint);--code-bg:rgba(0,0,0,.42);--code-line:rgba(255,255,255,.035)}

.eg .demo2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:900px){.eg .demo2{grid-template-columns:1fr}}
.eg .demo-view{padding:20px;display:grid;gap:10px;place-items:center;align-content:center;background:radial-gradient(80% 80% at 50% 40%,rgba(185,140,255,.07),transparent 70%),var(--card-2);min-width:0}
.eg .demo-view svg{display:block;width:100%;max-width:440px;height:auto}
.eg .demo-view > .note{text-align:center;max-width:56ch}
.eg .demo-view.code{place-items:stretch;align-content:start}
.eg .demo-view.code > .note{justify-self:center}
.eg .demo-view.report{place-items:stretch;align-content:start;background:var(--card-2)}
.eg .demo-side{padding:20px;display:grid;gap:12px;align-content:start;border-left:1px solid var(--border);min-width:0}
@media (max-width:900px){.eg .demo-side{border-left:0;border-top:1px solid var(--border)}}
.eg .btnrow{display:flex;gap:8px;flex-wrap:wrap}
.eg .fchk{display:flex;gap:8px;align-items:center}
.eg input[type=checkbox]{accent-color:var(--acc)}
.eg .seg button[aria-pressed="true"]{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--text)}
.eg .okmsg{font-size:13px;color:var(--ok)}
.eg .okmsg:empty{display:none}
.eg .rp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);min-width:0}
.eg .rp-head .mono{overflow-wrap:anywhere}
.eg .conv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:12.5px}
.eg .conv dt{color:var(--faint);font-family:var(--f-mono)}
.eg .conv dd{margin:0;color:var(--text)}

/* ---------- 01 the editor ---------- */
.eg .ed,.eg .sec,.eg .pal{border:1px solid var(--border);border-radius:14px;background:var(--code-bg);overflow:hidden;min-width:0}
.eg .ed-tab{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted)}
.eg .ed-tab .mono{color:var(--text)}
.eg .ed-lang{font-size:11px;color:var(--faint)}
.eg .ed-body{display:grid;grid-template-columns:auto minmax(0,1fr);font:13px/1.7 var(--f-mono)}
.eg .ed-gut{list-style:none;margin:0;padding:10px 0;min-width:44px;text-align:right;color:var(--faint);border-right:1px solid var(--border);font-variant-numeric:tabular-nums;user-select:none}
.eg .ed-gut li{padding:0 10px 0 14px;position:relative}
.eg .ed-gut li.bad{color:var(--danger)}
.eg .ed-gut li.bad::before{content:"";position:absolute;left:5px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--danger)}
.eg .ed-gut li.warn::before{background:var(--warn)}
.eg .ed-gut li.warn{color:var(--warn)}
.eg .ed-code{position:relative;overflow:hidden;min-width:0}
.eg .ed-hl,.eg .ed-code textarea{margin:0;padding:10px 14px;font:inherit;white-space:pre;tab-size:4;letter-spacing:0;border:0}
.eg .ed-hl{color:var(--text);pointer-events:none;min-height:100%}
.eg .ed-code textarea{position:absolute;inset:0;width:100%;height:100%;resize:none;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--acc);overflow:auto;outline:none}
.eg .ed-code textarea::selection{background:color-mix(in srgb,var(--acc) 35%,transparent);-webkit-text-fill-color:transparent}
.eg .ed:focus-within{outline:2px solid var(--acc);outline-offset:2px}
.eg .ed-hl .ln{display:block;height:1.7em}
.eg .ed-hl .ln.bad{background:rgba(255,93,115,.07)}
.eg .ed-hl .ln.warn{background:rgba(242,184,75,.06)}
.eg .t-kw{color:var(--syn-kw)}
.eg .t-str{color:var(--syn-str)}
.eg .t-fn{color:var(--syn-fn)}
.eg .t-ty{color:var(--syn-ty)}
.eg .t-num{color:var(--syn-num)}
.eg .t-com{color:var(--syn-com);font-style:italic}
.eg .sq{text-decoration:underline wavy var(--danger);text-decoration-skip-ink:none;text-underline-offset:3px}
.eg .ln.warn .sq{text-decoration-color:var(--warn)}
.eg .inl{line-height:1;vertical-align:1px;margin-left:18px;padding:1px 7px;border-radius:5px;font:500 11px var(--f-body);color:var(--danger);background:rgba(255,93,115,.1);border:1px solid rgba(255,93,115,.3)}
.eg .ln.warn .inl{color:var(--warn);background:rgba(242,184,75,.08);border-color:rgba(242,184,75,.3)}
.eg .probs{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.eg .probs li{display:grid;gap:3px;padding:9px 11px;border-radius:10px;background:var(--surface-1);border-left:2px solid var(--danger);color:var(--text);overflow-wrap:anywhere}
.eg .probs li.warn{border-left-color:var(--warn)}
.eg .probs li.ok{border-left-color:var(--ok);color:var(--muted)}
.eg .probs li small{font:500 11px var(--f-mono);color:var(--faint)}

/* ---------- 02 the palette ---------- */
.eg .pal-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px 0;font:700 10.5px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.eg .pal-hint{text-transform:none;letter-spacing:0;font-weight:500;color:var(--faint)}
.eg .pal-in{display:block;margin:10px 12px}
.eg .pal-in input{width:100%;min-width:0;background:var(--field);border:1px solid var(--border-strong);border-radius:10px;padding:10px 12px;color:var(--text);font:14px var(--f-mono)}
.eg .pal-in input:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent}
.eg .pal-list{list-style:none;margin:0;padding:0 6px 8px;display:grid;gap:2px;max-height:300px;overflow:auto}
.eg .pal-list li{display:flex;align-items:baseline;gap:10px;padding:7px 10px;border-radius:8px;font:13px var(--f-mono);color:var(--text);cursor:pointer;min-width:0}
.eg .pal-list li[aria-selected="true"]{background:color-mix(in srgb,var(--acc) 16%,transparent)}
.eg .pal-list li .nm{white-space:nowrap}
.eg .pal-list li .dir{font:12px var(--f-body);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.eg .pal-list li .kd{margin-left:auto;font:11px var(--f-body);color:var(--faint);white-space:nowrap}
.eg .pal-list li b{color:var(--acc);font-weight:700}
.eg .pal-list li.empty{color:var(--faint);cursor:default;font-family:var(--f-body)}

/* ---------- 03 the map ---------- */
.eg .tree{list-style:none;margin:0;padding:0;display:grid;gap:2px;font:13px var(--f-mono)}
.eg .tree ul{list-style:none;margin:0;padding:0 0 0 18px;display:grid;gap:2px}
.eg .tree button{all:unset;box-sizing:border-box;display:flex;gap:8px;align-items:center;width:100%;padding:5px 8px;border-radius:8px;cursor:pointer;color:var(--text);min-height:30px}
.eg .tree button:hover{background:var(--surface-2)}
.eg .tree button:focus-visible{outline:2px solid var(--acc);outline-offset:0}
.eg .tree button[aria-current="true"]{background:color-mix(in srgb,var(--acc) 18%,transparent)}
.eg .tree .tw{width:10px;color:var(--faint)}
@media (prefers-reduced-motion:no-preference){.eg .tree .tw{transition:transform .2s var(--ease)}}
.eg .tree button[aria-expanded="true"] .tw{transform:rotate(90deg)}
.eg .tree .kind{margin-left:auto;font:600 10.5px var(--f-body);color:var(--faint)}
.eg .tree .file{color:var(--muted)}
@media (pointer:coarse){.eg .tree button{min-height:44px}}
.eg #pu-map-svg .lk{fill:none;stroke:var(--muted);stroke-width:1.6}
.eg #pu-map-svg .lk.inf{stroke:var(--warn);stroke-dasharray:5 4}
.eg #pu-map-svg .nd rect{fill:var(--card);stroke:var(--border-strong);stroke-width:1.2}
.eg #pu-map-svg .nd.me rect{stroke:var(--acc);stroke-width:2;fill:color-mix(in srgb,var(--acc) 12%,var(--card))}
.eg #pu-map-svg text{font:13px var(--f-mono);fill:var(--text)}
.eg #pu-map-svg text.k{font:600 9.5px var(--f-body);fill:var(--faint);letter-spacing:.06em}
.eg #pu-map-svg .nd{cursor:pointer}
.eg #pu-map-svg .nd[role="button"]:hover rect{stroke:var(--acc)}
.eg #pu-map-svg .nd:focus{outline:none}
.eg #pu-map-svg .nd:focus-visible rect{stroke:var(--acc);stroke-width:2.5}
.eg .lg{display:inline-block;width:20px;height:0;border-top:2px solid var(--muted);vertical-align:middle;margin:0 6px 0 4px}
.eg .lg.inf{border-top:2px dashed var(--warn);margin-left:12px}

/* ---------- 04 Spring Data ---------- */
.eg .jq{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.eg .jq input{flex:1 1 240px;min-width:0;background:var(--field);border:1px solid var(--border-strong);border-radius:10px;padding:9px 11px;color:var(--text);font:13px var(--f-mono)}
.eg .jq input:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent}
.eg .jq-out{display:grid;gap:8px;font-size:13px}
.eg .jq-out .q{padding:12px 14px;border-radius:12px;background:var(--code-bg);border:1px solid var(--border);font:13px/1.6 var(--f-mono);color:var(--text);overflow-wrap:anywhere}
.eg .jq-out .q .t-kw{font-weight:600}
.eg .jq-out .pm{color:var(--muted);font:12.5px var(--f-mono);overflow-wrap:anywhere}
.eg .jq-out .bad{padding:10px 12px;border-radius:10px;background:rgba(255,93,115,.07);border-left:3px solid var(--danger);color:var(--text)}

/* ---------- 05 secrets ---------- */
.eg .sec-line{display:block;padding:12px}
.eg .sec-line input{width:100%;min-width:0;background:transparent;border:1px solid var(--border);border-radius:8px;padding:9px 10px;color:var(--text);font:13px var(--f-mono)}
.eg .sec-line input:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.eg .sec-line input[aria-invalid="true"]{border-color:var(--warn)}
.eg .sec-msg{margin:0 12px 12px;font-size:12.5px;color:var(--muted)}
.eg .sec-msg.hit{color:var(--warn)}
.eg .sec-plan{border-top:1px solid var(--border);padding:12px;display:grid;gap:10px}
.eg .sec-diff{border-radius:8px;overflow:hidden;font-size:12.5px}
.eg .sec-diff div{padding:6px 10px;white-space:pre;overflow-x:auto}
.eg .sec-diff .del{background:rgba(255,93,115,.1)}
.eg .sec-diff .del::before{content:"- ";color:var(--danger)}
.eg .sec-diff .add{background:rgba(123,216,143,.1)}
.eg .sec-diff .add::before{content:"+ ";color:var(--ok)}
.eg .sec-gets{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.eg .sec-gets .warn{color:var(--warn)}

/* ---------- 06 AI ---------- */
.eg .ai-state{font:600 11px var(--f-body);padding:4px 9px;border-radius:999px;border:1px solid var(--border-strong);color:var(--muted)}
.eg .ai-state.on{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.eg .ai-log{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px;align-content:start}
@media (min-width:901px){.eg .ai-log{min-height:150px}}
.eg .ai-log li{display:grid;grid-template-columns:62px 1fr;gap:2px 10px;padding:8px 10px;border-radius:10px;background:var(--surface-1);color:var(--text)}
.eg .ai-log li i{font:700 10.5px/1.7 var(--f-body);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.eg .ai-log li i.ok{color:var(--ok)}
.eg .ai-log li i.no{color:var(--danger)}
.eg .ai-log li i.ask{color:var(--warn)}
.eg .ai-log li.empty{grid-template-columns:1fr;background:none;color:var(--faint);padding-left:0}
.eg .grants{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.eg .grants legend{font:700 12.5px var(--f-body);color:var(--text);padding:0;margin-bottom:4px}
.eg .grants .locked{color:var(--faint)}
.eg .grants:disabled .fchk{opacity:.55}