/* Avlory Engine /engine/sprout: the chapter demos. Scoped to main.xp.eg; shared parts are in engine-core.css.
   Sprout's own look is dark and earthy, about growth: the page keeps the site's palette and lets the green accent
   (--acc, the hub's --c-green) carry the growth. */
.eg{--code-bg:rgba(0,0,0,.42);--add-bg:rgba(123,216,143,.1);--del-bg:rgba(255,93,115,.1)}

.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(123,216,143,.06),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 .rng{display:grid;gap:6px;font-size:12.5px;color:var(--muted)}
.eg .rng > span{display:flex;justify-content:space-between;gap:10px}
.eg .rng b{color:var(--text);font-weight:600}
.eg input[type=range]{width:100%;accent-color:var(--acc)}
.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)}
.eg .conv dd{margin:0;color:var(--text);font-variant-numeric:tabular-nums}
.eg .fld{display:grid;gap:6px;font-size:12.5px;color:var(--muted)}
.eg .fld input{width:100%;min-width:0;background:var(--field);border:1px solid var(--border-strong);border-radius:10px;padding:9px 11px;color:var(--text);font:14px var(--f-body)}
.eg .fld input:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent}
.eg .diag{display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:rgba(255,93,115,.07);border-left:3px solid var(--danger)}
.eg .diag h3{font:700 14px var(--f-body);letter-spacing:0;color:var(--text)}
.eg .diag p{font-size:13px;color:var(--text);text-wrap:pretty}

/* ---------- diffs (01, 02) ---------- */
.eg .dv{border:1px solid var(--border);border-radius:14px;background:var(--code-bg);overflow:hidden;min-width:0}
.eg .dv-head{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted)}
.eg .dv-head .mono{color:var(--text)}
.eg .dv-lines,.eg .pk{list-style:none;margin:0;padding:8px 0;font-size:12.5px;line-height:1.75;overflow-x:auto}
.eg .dv-lines li,.eg .pk li{display:grid;grid-template-columns:28px 16px minmax(0,1fr);padding-right:14px;white-space:pre;color:var(--text)}
.eg .dv-lines li .n,.eg .pk li .n{color:var(--faint);text-align:right;padding-right:6px;font-variant-numeric:tabular-nums;user-select:none}
.eg .dv-lines li .s,.eg .pk li .s{color:var(--faint);text-align:center;user-select:none}
.eg .dv-lines li.add,.eg .pk li.add{background:var(--add-bg)}
.eg .dv-lines li.add .s,.eg .pk li.add .s{color:var(--ok)}
.eg .dv-lines li.del,.eg .pk li.del{background:var(--del-bg)}
.eg .dv-lines li.del .s,.eg .pk li.del .s{color:var(--danger)}
.eg .dv-lines li.same{color:var(--muted)}
.eg .dv-lines li.note{grid-template-columns:1fr;padding:6px 14px;white-space:normal;color:var(--faint);font-family:var(--f-body)}
.eg .ops{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px}
.eg .ops li{display:flex;justify-content:space-between;gap:10px;padding:6px 9px;border-radius:8px;background:var(--surface-1);color:var(--text)}
.eg .ops li span{font:500 11px var(--f-mono);color:var(--faint);white-space:nowrap}
.eg .ops li.now{background:color-mix(in srgb,var(--acc) 16%,transparent)}
/* Dimmed by colour, not opacity, so the steps still read at 4.5:1 */
.eg .ops li.later{color:var(--muted)}
.eg .ops li.undone{color:var(--faint);text-decoration:line-through}
.eg .ops li.empty{background:none;color:var(--faint);padding-left:0}

/* save part: each changed line is an option you pick */
.eg .pk{outline:none}
.eg .pk:focus-visible{box-shadow:inset 0 0 0 2px var(--acc)}
.eg .pk li{grid-template-columns:30px 28px 16px minmax(0,1fr);cursor:default}
.eg .pk li[role="option"]{cursor:pointer}
.eg .pk li[role="option"]:hover{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--acc) 50%,transparent)}
.eg .pk li .box{display:grid;place-items:center}
.eg .pk li .box::before{content:"";width:13px;height:13px;border-radius:4px;border:1.5px solid var(--border-strong)}
.eg .pk li[aria-selected="true"] .box::before{background:var(--acc);border-color:var(--acc);box-shadow:inset 0 0 0 2.5px var(--card-2)}
.eg .pk li.cur{box-shadow:inset 3px 0 0 var(--acc)}
.eg .pk li.ctx{color:var(--muted)}
.eg .pk li.ctx .box::before{visibility:hidden}

/* ---------- growth (03) ---------- */
.eg #sp-grow .stem{fill:none;stroke:var(--acc);stroke-width:4;stroke-linecap:round}
.eg #sp-grow .shoot{fill:none;stroke:var(--c-teal);stroke-width:3;stroke-linecap:round}
.eg #sp-grow .save{fill:var(--card-2);stroke:var(--acc);stroke-width:2.5}
.eg #sp-grow .save.idea{stroke:var(--c-teal)}
.eg #sp-grow .save.join{fill:var(--acc)}
.eg #sp-grow .save.check{fill:var(--warn);stroke:var(--warn)}
.eg #sp-grow .save.conflict{fill:var(--danger);stroke:var(--danger)}
.eg #sp-grow text{font:13.5px var(--f-body);fill:var(--muted)}
.eg #sp-grow text.lane{font:700 11px var(--f-body);letter-spacing:.06em;fill:var(--faint)}
.eg #sp-grow text.hot{fill:var(--text)}

/* ---------- GitHub in tandem (04) ---------- */
.eg .sync-pill{font:600 11px var(--f-body);padding:4px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ok) 50%,transparent);color:var(--ok)}
.eg .sync-pill.held{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent)}
.eg .sync-pill.off{color:var(--faint);border-color:var(--border-strong)}
.eg .gh{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.eg .gh-col{border:1px solid var(--border);border-radius:12px;padding:10px;min-width:0;background:var(--surface-1)}
.eg .gh-col h3{font:700 11px var(--f-body);letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.eg .gh-col ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px}
.eg .gh-col li{display:flex;justify-content:space-between;gap:8px;padding:4px 6px;border-radius:6px;color:var(--text);min-width:0}
.eg .gh-col li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.eg .gh-col li small{font:500 10.5px var(--f-mono);color:var(--faint);flex:none}
.eg .gh-col li.held{background:rgba(242,184,75,.1);color:var(--warn)}
.eg .gh-col li.new{background:color-mix(in srgb,var(--acc) 14%,transparent)}
.eg .gh-log{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px;color:var(--muted)}
.eg .gh-log li{padding:6px 9px;border-radius:8px;border-left:2px solid var(--border-strong);background:var(--surface-1)}
.eg .gh-log li.ok{border-left-color:var(--ok)}
.eg .gh-log li.wait{border-left-color:var(--warn)}
@media (max-width:480px){.eg .gh{grid-template-columns:1fr}}

/* ---------- big files (05) ---------- */
.eg .lockst{font:600 11px var(--f-body);color:var(--faint)}
.eg .lockst.on{color:var(--warn)}
.eg .chunks{display:grid;grid-template-columns:repeat(50,1fr);gap:2px;width:100%}
@media (max-width:600px){.eg .chunks{grid-template-columns:repeat(25,1fr)}}
.eg .chunks i{display:block;aspect-ratio:1;border-radius:2px;background:color-mix(in srgb,var(--acc) 26%,var(--card))}
.eg .chunks i.chg{background:var(--warn)}
.eg .chunks i.sent{background:var(--acc)}

/* ---------- checks (06) ---------- */
.eg .gr{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.eg .gr li{display:grid;grid-template-columns:64px 1fr;gap:2px 10px;padding:8px 10px;border-radius:10px;background:var(--surface-1)}
.eg .gr li i{font:700 10.5px/1.6 var(--f-body);font-style:normal;text-transform:uppercase;letter-spacing:.06em;grid-row:span 2;color:var(--faint)}
.eg .gr li i.pass{color:var(--ok)}
.eg .gr li i.warn{color:var(--warn)}
.eg .gr li i.fail{color:var(--danger)}
.eg .gr li span{color:var(--text)}
.eg .gr li small{color:var(--muted);font-size:12px}
.eg .trailer{margin:0;padding:12px 14px;border-radius:12px;background:var(--code-bg);border:1px solid var(--border);font-size:12px;line-height:1.7;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.eg .shots2{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px;align-items:start}
.eg .shot.phone img{max-width:240px;margin-inline:auto}
@media (max-width:700px){.eg .shots2{grid-template-columns:1fr}.eg .shot.phone{justify-items:center}}

/* ---------- commands (07) ---------- */
.eg .term{width:100%;min-width:0;display:grid;border:1px solid var(--border);border-radius:14px;background:var(--code-bg);overflow:hidden}
.eg .term-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted)}
.eg .rec-badge{font:600 11px var(--f-body);padding:3px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);color:var(--acc)}
.eg .term-out{list-style:none;margin:0;padding:10px 12px;height:340px;overflow:auto;font-size:12.5px;line-height:1.6;outline:none;overscroll-behavior:contain}
.eg .term-out:focus-visible{box-shadow:inset 0 0 0 2px var(--acc)}
.eg .term-out li{white-space:pre;color:var(--text);min-height:1.6em}
.eg .term-out li.cmd{color:var(--acc);margin-top:6px}
.eg .term-out li.cmd:first-child{margin-top:0}
.eg .term-out li.cmt{white-space:normal;color:var(--faint)}
.eg .term-out li.se{color:color-mix(in srgb,var(--text) 82%,var(--muted))}
.eg .demo-side .faint{color:var(--faint)}
.eg .keys .btn.sm[aria-pressed="true"]{background:color-mix(in srgb,var(--acc) 22%,transparent);border-color:color-mix(in srgb,var(--acc) 55%,transparent);color:var(--text)}
.eg .cmds-h{font:700 18px var(--f-body);letter-spacing:0;margin:30px 0 12px}
.eg .cheat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.eg .cheat li{display:grid;gap:4px;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--card)}
.eg .cheat code{font:600 13px var(--f-mono);color:var(--acc);overflow-wrap:anywhere}
.eg .cheat li > span{font-size:12.5px;color:var(--muted)}
.eg .cmds table.t{min-width:720px}
.eg .cmds table.t td{color:var(--muted)}
.eg .cmds table.t td:first-child{min-width:230px}
.eg .cmds code{font:500 12px var(--f-mono);color:var(--text)}
.eg .cmds tr.grp th{padding-top:18px;color:var(--acc);background:color-mix(in srgb,var(--acc) 6%,transparent)}
.eg .cmds-note{margin-top:8px}
.eg .also{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 14px;font-size:12.5px;color:var(--muted)}
.eg .also code{font:500 12px var(--f-mono);color:var(--text);margin-right:2px}