/* live edit: a markdown file beside the site it draws. Press the button, a line types into the file and its branch appears on the site.
     <div class="live-edit" data-live-edit>
       <div class="file">…</div>                      the file card; the last line is <p class="le-line" data-text="…" hidden><span class="le-typed"></span><span class="le-caret"></span></p>
       <div class="win">…<div class="le-site">…       the site; the new branch is <li data-new-item hidden>
       <div class="le-foot"><button class="le-btn">…
   The page holds markup only; live-edit.js does the typing. */
.live-edit { display: flex; flex-direction: column; gap: var(--s-4); }
figure.demo:has(> .live-edit) { container-type: inline-size; }
/* side by side when the figure is wide enough (the page column is too narrow; figure.demo.wide widens it) */
@container (min-width: 720px) {
  .live-edit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .live-edit .le-foot { grid-column: 1 / -1; }
  .live-edit .file-body.lines p { font-size: 12px; }
}
.live-edit .file { margin: 0; }
.le-foot { display: flex; align-items: center; gap: var(--s-3); }
.le-btn { border: 0; border-radius: 6px; background: var(--gray-1200); color: var(--on-ink); padding: 8px 14px; font: var(--weight-medium) var(--text-ui)/1 var(--font); cursor: pointer; transition: transform 120ms cubic-bezier(.23, 1, .32, 1), background 150ms ease-out; }
.le-btn:hover { background: var(--ink-hover); }
.le-btn:active { transform: scale(.97); }
.le-btn:focus-visible { outline: 2px solid var(--kind-config); outline-offset: 2px; }
.le-btn:disabled { opacity: .4; cursor: default; transform: none; }
.le-hint { font-size: var(--text-sm); color: var(--gray-1000); }

.le-line { margin: 0; }
.le-line[hidden] { display: none; }
.le-l { color: var(--kind-config); }
.le-d { color: var(--gray-1000); }
.le-caret { display: inline-block; width: 7px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--gray-1200); animation: le-blink 1s steps(2) infinite; }
.le-line:not([data-typing]) .le-caret { display: none; }
@keyframes le-blink { 50% { opacity: 0; } }

/* the site, drawn the way bentossell.com's tree page looked */
.live-edit .win-view { height: auto; padding: 22px 26px 26px; background: var(--gray-100); overflow: hidden; }
.le-site { --le-line: #b3b6c4; font-family: var(--mono); font-size: 13px; line-height: 1.55; color: var(--gray-1200); }
.le-site h4 { margin: 0; font: 600 25px/1.2 "Shantell Sans", var(--font); letter-spacing: -.01em; }
.le-site h5 { margin: 18px 0 8px; font: 600 19px/1.2 "Shantell Sans", var(--font); }
.le-site .le-about { margin: 8px 0 0; color: var(--gray-1000); font-size: 12px; }
.le-site ul { list-style: none; margin: 0; padding: 0; }
.le-site li { position: relative; padding: 3px 0 3px 22px; }
.le-site li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1.5px solid var(--le-line); }
.le-site li:last-child::before { bottom: auto; height: 14px; }
.le-site li::after { content: ''; position: absolute; left: 0; top: 14px; width: 15px; border-top: 1.5px solid var(--le-line); }
.le-site a { color: var(--kind-config); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.le-site .le-d { font-size: 12px; }
.le-site .le-plus { color: var(--gray-1000); margin-left: 4px; }
.le-site li[data-new-item]:not([hidden]) { animation: le-pop 500ms cubic-bezier(.23, 1, .32, 1); }
@keyframes le-pop { from { opacity: 0; transform: translateY(-6px); background: #fff3d6; } to { opacity: 1; transform: none; background: transparent; } }

@media (max-width: 760px) { .live-edit .win-view { padding: 18px 16px 20px; } .le-site h4 { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .le-caret, .le-site li[data-new-item]:not([hidden]) { animation: none; } .le-btn { transition: none; } }
/* in the presentation panel the stage is already wide; .wide would push the figure out past its left edge */
.presentation-layout figure.demo.wide:has(> .live-edit) { margin-inline: 0; }