/* /create surround: the editor sits in the sky, clouds drift behind all of it. Site chrome, not editor
   styles, so it lives outside css/editor.css. The editor pane reads the custom properties below through
   inheritance. Step 43: no frame. The canvas paints its own dark grid fill (editor.js render), so the canvas
   is the one dark surface; everything around it is sky. Tune the look here. */
.ed-shell {
  --ed-sky: #bfe0f1;        /* surround fill */
  --ed-gap: 24px;           /* sky between the pane and the window edge */
  --ed-tb-room: 76px;       /* sky band under the canvas that holds the bottom toolbar */
  --ed-glass: rgba(255, 255, 255, 0.5);   /* light backing for text that sits over cloud */
  --ed-glass-ink: #1d2a5a;  /* text on that backing */
  background: var(--ed-sky);
}
/* cloud layer: decoration only, behind #editor-root (z-index 21), never takes input */
.ed-sky { position: fixed; top: 0; right: 0; bottom: 0; left: var(--side); z-index: 0; overflow: hidden; pointer-events: none; }
.ed-sky .cloud { position: absolute; left: 0; will-change: transform; animation: drift linear infinite; }
.ed-sky .cloud svg { width: 100%; overflow: visible; }
.ed-sky .doodle { position: absolute; opacity: .5; }
@media (max-width: 820px) {
  .ed-shell { --ed-gap: 8px; }
  .ed-sky { left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ed-sky .cloud { animation: none; transform: translateX(20vw); } }

/* step 135: the minimum site chrome on the editor page. Copied from style.css (not edited there), scoped to .ed-shell.
   Wallet button: the crayon pill from the home page topbar. Wordmark: same .brand-word / .brand-tag as the home page
   (rules already in style.css). Footer: grass and dirt on the config screens only, see DECISIONS.md. */
.ed-shell .ed-wallet { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ed-shell #wallet-btn { background: var(--crayon-ink); color: #ffd84a; font-family: var(--marker); font-weight: 400; font-size: 16px; padding: 9px 18px; border-radius: 8px 4px 10px 5px; transform: rotate(1deg); transition: transform .15s; box-shadow: none; }
.ed-shell #wallet-btn:hover { background: var(--crayon-ink); transform: rotate(1deg) translateY(-2px); }
.ed-shell #wallet-btn .ink { filter: url(#wob) url(#crayon); }
.ed-shell #wallet-btn .ink > i { inset: 4px; border: 3px solid var(--crayon-ink); }
.ed-shell #wallet-btn.connected { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; min-width: 160px; }
.ed-shell .wallet-msg { max-width: 200px; }
.ed-shell .ed-foot { margin: 96px calc(-1 * clamp(16px, 3vw, 40px)) -40px; padding: 28px clamp(16px, 3vw, 40px) 36px; }
.ed-shell .ed-foot .grass { position: absolute; left: 0; right: 0; top: -69px; height: 70px; width: 100%; }
.ed-shell .ed-foot .foot-in a { color: inherit; }
@media (max-width: 820px) {
  /* the fixed wallet button lives in .side, so .side must stack above the editor (z-index 21) for it to take clicks */
  .ed-shell .side { z-index: 22; }
  .ed-shell #wallet-btn { position: fixed; top: calc(var(--nl-h, 0px) + 4px); right: 8px; z-index: 30; font-size: 13px; padding: 5px 10px; }
  .ed-shell .wallet-msg { position: fixed; top: calc(var(--nl-h, 0px) + 40px); right: 8px; z-index: 30; background: #fff; padding: 4px 8px; border-radius: 8px; }
  .ed-shell .wallet-msg[hidden] { display: none; }
  #editor-root #grip-hint { max-width: calc(100% - 118px); }
  .ed-shell .ed-foot { padding-bottom: 96px; margin-bottom: -90px; }
  /* audit 7.11: the shell is only as tall as the window under the banner, so the page never scrolls into empty sky */
  .ed-shell { min-height: calc(100vh - var(--nl-h, 0px)); }
  /* audit 7.10: while the form is open the wallet button sits in the page flow above the card (config.js seatWallet) */
  #config-root > .ed-wallet { position: relative; z-index: 2; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 auto 10px; max-width: 760px; }
  #config-root > .ed-wallet #wallet-btn { position: relative; top: auto; right: auto; }
  #config-root > .ed-wallet .wallet-msg { position: static; max-width: none; flex: 1 1 auto; min-width: 0; }
}

/* step 135: on phones the editor's bottom nav also holds the prompt link and Continue; the nav must shrink instead of taking 100% and pushing Continue past the right edge */
@media (max-width: 820px) {
  .ed-shell .side .nav { width: auto; flex: 1 1 auto; min-width: 0; }
  .ed-shell .side #continue-btn { flex: none; }
  /* audit 7.14: six labels do not fit one row beside the prompt link and Continue. The nav gets the full first row and the link and Continue share a second, labels wrap instead of overlapping. */
  .ed-shell .side { flex-wrap: wrap; row-gap: 4px; align-items: center; }
  .ed-shell .side .nav { flex: 1 0 100%; width: 100%; }
  .ed-shell .side .nav a { padding: 4px 1px; }
  .ed-shell .side .nav a span { white-space: normal; line-height: 1.05; overflow-wrap: normal; text-align: center; }
  .ed-shell .side .ed-prompt-link { margin-top: 0; flex: 1 1 0; min-width: 0; }
  .ed-shell .side #continue-btn { margin-top: 0; }
}

/* footer parity with the home page: the contract pill and the X link */
.ed-shell .ed-foot .ft-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(30,20,12,.55);border:1.6px solid rgba(255,243,218,.35);font-size:13px;color:#eadcc3;white-space:nowrap}
.ed-shell .ed-foot .ft-pill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.ed-shell .ed-foot .ft-social{display:flex;gap:16px;margin-left:auto}
.ed-shell .ed-foot .ft-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#fff3da}
.ed-shell .ed-foot .ft-social svg{width:22px;height:22px}
.ed-shell .ed-foot .ft-social .xf{fill:currentColor}
@media (max-width:640px){.ed-shell .ed-foot .ft-social{margin-left:0}}

/* UX sweep 2026-10-15, items 136 and 140: the same footer as the home page (css/sections.css .ft is not loaded here) */
.ed-shell .ed-foot.ft{padding-top:34px;padding-bottom:30px}
.ed-shell .ed-foot .ft-top{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.ed-shell .ed-foot .ft-brand{display:flex;flex-direction:column;line-height:1;color:inherit;text-decoration:none}
.ed-shell .ed-foot .foot-brand{font-size:38px}
.ed-shell .ed-foot .ft-chain{font-size:13px;color:#eadcc3;margin-top:2px}
.ed-shell .ed-foot .ft-nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px;font-weight:600;color:#f3e7d1}
.ed-shell .ed-foot .ft-nav a{color:inherit;text-decoration:none}
.ed-shell .ed-foot .ft-nav a:hover{color:#fff;text-decoration:underline}
.ed-shell .ed-foot .ft-bottom{margin-top:22px;padding-top:14px;border-top:1.5px dashed rgba(234,220,195,.3)}
.ed-shell .ed-foot .disclaimer{font-size:13px;opacity:.85}
@media (max-width:820px){.ed-shell .ed-foot.ft{padding-bottom:96px}}
@media (max-width:640px){.ed-shell .ed-foot .ft-top{flex-direction:column;align-items:flex-start;gap:16px}}
/* item 54: the cream sidebar always fills the window height while the launch screens scroll */
@media (min-width: 821px) { .ed-shell > .side { position: sticky; top: 0; align-self: flex-start; height: 100vh; } }
/* UX sweep round 4 item 151: the not-live banner sits above the page, so the sidebar starts under it */
@media (min-width: 821px) { .ed-shell > .side { top: var(--nl-h, 0px); height: calc(100vh - var(--nl-h, 0px)); } }
/* item 57: on a phone the balance sits under the wallet button, not in the bottom bar */
@media (max-width: 820px) {
  .ed-shell .side #wallet-balance { position: fixed; top: calc(var(--nl-h, 0px) + 38px); right: 8px; z-index: 30; margin: 0 !important; padding: 2px 8px; border-radius: 8px; background: #fffdf5; border: 1.4px solid var(--crayon-ink); font-size: 12px !important; }
  .ed-shell .side #wallet-balance[hidden] { display: none; }
  .ed-shell .wallet-msg { top: calc(var(--nl-h, 0px) + 64px); }
  #config-root > .ed-wallet #wallet-balance { position: static; }
}
/* UX sweep 2026-10-15 item 113: on a phone the wizard link and Continue sit above the bottom nav, Continue at the
   44px tap height */
@media (max-width: 820px) {
  .ed-shell .side .ed-prompt-link, .ed-shell .side #continue-btn { order: -1; }
  .ed-shell .side #continue-btn { min-height: 44px; }
}
/* UX sweep 2026-10-15 item 113: on a phone the wallet button and the balance share one row in a band of their own at
   the top, above the editor, so they never cover the handle hint, the handles or the help button, and they sit under
   the editor's own overlays instead of over them */
@media (max-width: 820px) {
  /* UX sweep round 4 items 71 and 151: /create has the not-live banner and no wallet button, so the editor starts
     below the banner (--nl-h from js/editor/phone-fit.js) and no wallet band is kept free */
  .ed-shell .side > .ed-wallet { position: fixed; top: 5px; left: 8px; right: 8px; z-index: 21; display: flex; flex-direction: row-reverse; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px; pointer-events: none; }
  .ed-shell .side > .ed-wallet > * { pointer-events: auto; }
  .ed-shell .side > .ed-wallet #wallet-btn, .ed-shell .side > .ed-wallet #wallet-balance { position: relative; top: auto; right: auto; flex: none; }
  .ed-shell .side > .ed-wallet .wallet-msg { top: 44px; }
  #editor-root #grip-hint { max-width: none; }
}