/* Editor styles, all scoped under #editor-root. Copied from the standalone editor. */
#editor-root, #editor-root * { margin:0; padding:0; box-sizing:border-box; }
#editor-root { background:#131722; font-family:'Courier New',monospace; height:100%; overflow:hidden; }
#editor-root #canvas-wrap { position:fixed; left:0; right:0; top:0; bottom:0; overflow:hidden; }
#editor-root #canvas-wrap { display:flex; flex-direction:column; }
#editor-root #c { display:block; width:100%; flex:1 1 0; min-height:0; cursor:crosshair; touch-action:none; -webkit-user-select:none; user-select:none; }
#editor-root #side-btn.is-on { outline: 2px solid currentColor; outline-offset: -2px; }
/* step 41: the grip hint, its own band directly above the grip strip; wraps instead of clipping; the help button sits below it, in the grip strip */
#editor-root #grip-hint { flex:none; box-sizing:border-box; padding:3px 10px; background:#0d1220; color:#6f8db8; font:10px/12px 'Courier New',monospace; white-space:normal; overflow-wrap:anywhere; }
#editor-root button.btn { font-family:'Courier New',monospace; font-size:12px; color:#e8f4ff; background:linear-gradient(#232b40,#1a2033); border:1px solid #3a4a6a; border-radius:5px; padding:7px 10px; cursor:pointer; box-shadow: 0 2px 0 #0d1120, inset 0 1px 0 rgba(255,255,255,0.06); transition: all 0.08s; text-align:center; white-space:nowrap; }
#editor-root button.btn:hover { border-color:#5a7ab0; color:#fff; }
#editor-root button.btn:active, #editor-root button.btn.active { background:linear-gradient(#1a2033,#232b40); box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); transform: translateY(1px); border-color:#4488ff; color:#7fc4ff; }
#editor-root .row2 { display:flex; gap:4px; }
#editor-root .row2 button.btn { flex:1; }
#editor-root #bottombar { --acc-border:#3a4a6a; --acc-hover:#5a7ab0; --acc-icon:#e8f4ff; --acc-line:#2a3550; position:fixed; left:50%; transform:translateX(-50%); bottom:10px; height:56px; background:#181d2b; border:1px solid var(--acc-line); border-radius:12px; display:flex; align-items:center; gap:0; padding:0 10px; white-space:nowrap; z-index:30; box-shadow:0 8px 26px rgba(0,0,0,0.6); }
#editor-root .tb-cluster { display:flex; align-items:center; gap:3px; }
#editor-root .tb-gap { width:15px; flex:0 0 15px; }
#editor-root .tb-bigsep { width:44px; flex:0 0 44px; }
#editor-root .tb-item { position:relative; display:flex; align-items:center; }
#editor-root button.btn.tb-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:5px 8px; font-size:10px; line-height:1; min-width:50px; height:44px; }
#editor-root button.btn.tb-btn svg { width:18px; height:18px; display:block; }
#editor-root #bottombar button.btn { border-color:var(--acc-border); }
#editor-root #bottombar button.btn svg { color:var(--acc-icon); }
#editor-root #bottombar button.btn:hover { border-color:var(--acc-hover); }
#editor-root #bottombar button.btn:active, #editor-root #bottombar button.btn.active { border-color:var(--acc-hover); color:var(--acc-icon); }
#editor-root #size-readout, #editor-root #candle-count-readout, #editor-root #cursor-readout { font-size:10px; color:#8fb4d8; padding:0 8px 0 4px; white-space:nowrap; letter-spacing:0.3px; }
#editor-root .popout { position:absolute; bottom:calc(100% + 12px); left:0; background:#12172a; border:1px solid #3a4a6a; border-radius:7px; padding:8px; display:none; flex-direction:column; gap:5px; min-width:180px; max-height:220px; overflow:auto; box-shadow:0 6px 18px rgba(0,0,0,0.55); z-index:40; }
#editor-root .popout.right-align { left:auto; right:0; }
#editor-root .popout.open { display:flex; }
#editor-root .popout button.btn { text-align:left; }
#editor-root #curve-actions { position:fixed; display:none; gap:6px; z-index:35; background:rgba(10,14,26,0.85); border:1px solid #3a4a6a; border-radius:7px; padding:4px; box-shadow:0 6px 18px rgba(0,0,0,0.6); }
#editor-root #curve-actions.open { display:flex; }
#editor-root #curve-actions button.btn { padding:5px 10px; }
#editor-root #layersbar { position:fixed; left:50%; transform:translateX(-50%); top:42px; background:#181d2b; border:1px solid #2a3550; border-radius:12px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:7px 10px; white-space:nowrap; z-index:30; box-shadow:0 8px 26px rgba(0,0,0,0.6); }
#editor-root .lb-row { display:flex; align-items:center; justify-content:center; gap:5px; }
#editor-root .lb-item { display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:0; padding:2px; margin:0; cursor:pointer; user-select:none; font-family:'Courier New',monospace; transition:opacity 0.1s; }
#editor-root .lb-sw { width:22px; height:22px; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.45); }
#editor-root .lb-key { font-size:10px; line-height:1; color:#8fb4d8; }
#editor-root .lb-item.unset { opacity:0.26; }
#editor-root .lb-item.set { opacity:0.55; }
#editor-root .lb-item:hover { opacity:0.85; }
#editor-root .lb-item.sel, #editor-root .lb-item.sel:hover { opacity:1; }
#editor-root .lb-item.sel .lb-sw { box-shadow:0 0 0 2px #ffffff, 0 0 9px rgba(255,255,255,0.55), inset 0 0 0 1px rgba(0,0,0,0.45); }
#editor-root .lb-item.sel .lb-key { color:#ffffff; }
#editor-root .lb-tooltip { position:fixed; z-index:40; display:none; pointer-events:none; background:#12172a; border:1px solid #3a4a6a; border-radius:6px; padding:6px 9px; font-size:11px; font-family:'Courier New',monospace; color:#cfe0f0; line-height:1.4; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,0.55); }
#editor-root .lb-tooltip.show { display:block; }
#editor-root .lb-tooltip .dot { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; vertical-align:middle; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.45); }
#editor-root #layer-draft { position:fixed; top:98px; left:50%; transform:translateX(-50%); width:250px; z-index:29; }
#editor-root .draft-box { background:#12172a; border:1px solid #3a4a6a; border-radius:7px; padding:8px; display:flex; flex-direction:column; gap:6px; box-shadow:0 6px 18px rgba(0,0,0,0.55); }
#editor-root .draft-box .dz-hint { font-size:11px; color:#9fc4e8; line-height:1.35; }
#editor-root .dz-stepper { display:flex; align-items:center; gap:6px; font-size:11px; color:#cfe0f0; }
#editor-root .dz-stepper .dz-lbl { width:24px; }
#editor-root .dz-stepper .dz-val { min-width:22px; text-align:center; font-weight:bold; }
#editor-root .dz-stepper button.btn { padding:2px 8px; }
#editor-root .tg-wrap { display:flex; align-items:center; gap:6px; }
#editor-root button.btn.tg-btn { font-size:12px; padding:7px 14px; letter-spacing:0.4px; display:flex; align-items:center; gap:6px; }
#editor-root button.btn.tg-btn.on { background:linear-gradient(#2b5c48,#1d3f31); border-color:#3fd39a; color:#bdf5dd; box-shadow:0 0 0 1px rgba(63,211,154,0.35), 0 0 10px rgba(63,211,154,0.25); }
#editor-root button.btn.tg-btn.on#toggle-wicks-btn { background:linear-gradient(#2a4a6e,#1c3049); border-color:#5fa8ff; color:#cfe8ff; box-shadow:0 0 0 1px rgba(95,168,255,0.35), 0 0 10px rgba(95,168,255,0.25); }
#editor-root #lb-layers { display:none; }
#editor-root #layersbar.wicks-on #lb-layers { display:flex; }
#editor-root .kk { font-style:normal; font-size:9px; line-height:1; color:#6f8fb4; border:1px solid #33415e; border-radius:3px; padding:2px 3px; margin-left:6px; opacity:0.85; }
#editor-root button.btn.tb-btn .kk { margin-left:4px; }
#editor-root .popout button.btn { display:flex; align-items:center; justify-content:space-between; }
#editor-root .popout button.btn .kk { margin-left:10px; }
#editor-root #help-btn { position:fixed; top:44px; right:12px; z-index:60; width:30px; height:30px; border-radius:50%; background:#181d2b; border:1px solid #3a4a6a; color:#9fc4e8; font-family:'Courier New',monospace; font-size:15px; font-weight:bold; cursor:pointer; line-height:1; padding:0; box-shadow:0 4px 14px rgba(0,0,0,0.5); }
#editor-root #help-btn:hover { border-color:#5fa8ff; color:#fff; }
#editor-root #help-panel { position:fixed; top:82px; right:12px; z-index:60; width:330px; max-height:calc(100vh - 102px); overflow:auto; background:#12172a; border:1px solid #3a4a6a; border-radius:9px; padding:12px; display:none; box-shadow:0 10px 30px rgba(0,0,0,0.65); color:#cfe0f0; font-size:11px; line-height:1.5; }
#editor-root #help-panel.open { display:block; }
#editor-root #help-panel h3 { font-size:11px; color:#7fc4ff; letter-spacing:1px; text-transform:uppercase; margin:12px 0 5px; font-weight:bold; }
#editor-root #help-panel h3:first-child { margin-top:0; }
#editor-root #help-panel p { margin:0 0 6px; color:#9fb8d0; }
#editor-root #help-panel .hp-line { display:flex; gap:8px; margin:2px 0; }
#editor-root #help-panel .hp-line b { color:#e8f4ff; min-width:74px; font-weight:bold; }
#editor-root #help-panel table { width:100%; border-collapse:collapse; }
#editor-root #help-panel td { padding:2px 4px; vertical-align:top; }
#editor-root #help-panel td.k { width:86px; color:#ffd76a; white-space:nowrap; font-weight:bold; }
#editor-root #help-panel .hp-big { margin-top:10px; padding:8px; border-radius:6px; background:rgba(63,211,154,0.09); border:1px solid rgba(63,211,154,0.3); color:#bdf5dd; }
#editor-root #help-panel button.btn { width:100%; }
#editor-root #tut { position:fixed; inset:0; z-index:80; display:none; }
#editor-root #tut.open { display:block; }
#editor-root .tut-mask { position:fixed; background:rgba(4,7,14,0.80); cursor:pointer; }
#editor-root #tut-ring { position:fixed; border-radius:10px; pointer-events:none; box-shadow:0 0 0 3px rgba(127,196,255,0.9), 0 0 26px 6px rgba(127,196,255,0.45); display:none; }
#editor-root #tut-card { position:fixed; width:290px; display:none; background:#12172a; border:1px solid #4a6a9a; border-radius:9px; padding:13px; color:#dce9f6; font-size:12px; line-height:1.5; box-shadow:0 12px 34px rgba(0,0,0,0.7); }
#editor-root #tut-card.wide { width:360px; }
#editor-root #tut-card h4 { font-size:13px; color:#7fc4ff; margin-bottom:6px; letter-spacing:0.5px; }
#editor-root #tut-card .tut-body { margin-bottom:11px; color:#c3d6e8; }
#editor-root #tut-card .tut-foot { display:flex; align-items:center; gap:6px; }
#editor-root #tut-card .tut-count { font-size:10px; color:#7a97b5; margin-right:auto; }
#editor-root #tut-welcome { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:400px; max-width:calc(100vw - 32px); background:#12172a; border:1px solid #4a6a9a; border-radius:11px; padding:22px; color:#dce9f6; text-align:center; display:none; box-shadow:0 16px 46px rgba(0,0,0,0.75); }
#editor-root #tut-welcome h2 { font-size:26px; color:#7fc4ff; letter-spacing:3px; margin-bottom:12px; }
#editor-root #tut-welcome p { font-size:12.5px; line-height:1.6; color:#c3d6e8; margin-bottom:18px; }
#editor-root #tut-welcome .row2 { justify-content:center; }
#editor-root #tut-welcome .row2 button.btn { flex:0 0 auto; padding:9px 18px; font-size:12px; }
#editor-root #hint { position:fixed; bottom:74px; left:10px; color:#6a9abb; font-size:11px; background:rgba(10,14,24,0.72); padding:5px 9px; border-radius:5px; pointer-events:none; z-index:25; max-width:70vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#editor-root #hint.flash { color:#ffd76a; background:rgba(60,40,10,0.9); }
#editor-root .onb-bubble { position:fixed; z-index:50; display:none; pointer-events:none; background:rgba(10,14,24,0.95); border:1px solid #2a3a4f; border-radius:6px; color:#c3d6e8; font-size:11.5px; line-height:1.55; padding:9px 12px; max-width:240px; box-shadow:0 4px 14px rgba(0,0,0,0.5); }
#editor-root .onb-bubble.onb-open { display:block; }
#editor-root .onb-bubble.onb-above::after, #editor-root .onb-bubble.onb-below::after { content:''; position:absolute; width:0; height:0; left:var(--onb-arrow-left, 50%); margin-left:-7px; }
#editor-root .onb-bubble.onb-above::after { top:100%; border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid #10192a; }
#editor-root .onb-bubble.onb-below::after { bottom:100%; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid #10192a; }
#editor-root .onb-bubble.onb-final { text-align:center; }
#editor-root .onb-bubble .onb-foot { margin-top:8px; }
#editor-root .onb-bubble .onb-gotit-btn { pointer-events:auto; font-size:11px; padding:4px 10px; }
/* Intro coach mark (step 23): the first message, blocks the canvas until its button is clicked. Bordered and bright, not a dialog that owns the screen. z-index 29 sits under the toolbar (30) so an open Chop popout draws over it; only its button takes clicks. */
#editor-root .onb-bubble.onb-intro { z-index:29; width:300px; max-width:calc(100vw - 16px); border:2px solid #7fc4ff; border-radius:9px; background:#10192a; color:#eaf4ff; font-size:13.5px; font-weight:bold; padding:12px 14px; box-shadow:0 0 0 4px rgba(127,196,255,0.18), 0 8px 24px rgba(0,0,0,0.6); }
#editor-root .onb-bubble.onb-intro.onb-above::after { margin-left:-9px; border-left-width:9px; border-right-width:9px; border-top:10px solid #7fc4ff; }
#editor-root .onb-bubble.onb-intro .onb-foot { text-align:right; }
#editor-root .onb-bubble .onb-intro-btn::before { content:'Got it'; }
/* First run: the intro is a blocking centred card over a full-screen backdrop. Nothing behind it is visible or clickable until Got it. Backdrop z 70 sits over the toolbar (30) and help (60); the card is 71; its button takes the only click. */
#editor-root .onb-backdrop { position:absolute; inset:0; z-index:70; display:none; background:rgba(8,11,20,0.94); }
#editor-root .onb-backdrop.onb-open { display:block; }
#editor-root .onb-bubble.onb-intro.onb-center { z-index:71; left:50%; top:50%; transform:translate(-50%,-50%); width:min(380px, calc(100vw - 32px)); max-width:calc(100vw - 32px); text-align:left; }
#editor-root .onb-bubble.onb-intro.onb-center::after { display:none; }
#editor-root .onb-bubble.onb-intro.onb-center .onb-foot { text-align:center; margin-top:14px; }
#editor-root .onb-bubble.onb-intro.onb-center .onb-gotit-btn { font-size:13px; padding:7px 22px; }
/* Placement inside the site shell. Fixed elements stay viewport-based so the editor's own pointer maths is untouched; they are shifted past the sidebar here. */
#editor-root { --ed-left: var(--side); position: relative; flex: 1 1 auto; min-width: 0; height: calc(100vh - var(--nl-h, 0px)); }
#editor-root #canvas-wrap { left: var(--ed-left); }
/* Surround (step 22, step 43): the pane is inset by --ed-gap and has no frame; the custom properties come from .ed-shell (css/surround.css). The wrap is transparent so the sky and clouds show around the canvas; the canvas alone keeps the dark grid fill. A band of sky under the canvas (--ed-tb-room) holds the bottom toolbar. The canvas maps pointers from its own bounding rect, so the inset needs no change to the drawing code. */
#editor-root { z-index: 21; background: transparent; }
/* Prompt 16: on desktop the editor page is exactly one window tall under the banner, so nothing scrolls the banner over the editor. */
@media (min-width: 821px) { .ed-shell { min-height: calc(100vh - var(--nl-h, 0px)); } .ed-shell > .side { height: calc(100vh - var(--nl-h, 0px)); } }
/* Prompt 16 (audit 7.3): every fixed top offset starts below the not-live banner (--nl-h, its live height from js/editor/phone-fit.js), so the banner covers no grip strip, hint or ? button at any width. */
#editor-root #canvas-wrap { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px)); right: var(--ed-gap, 0px); bottom: calc(var(--ed-gap, 0px) + var(--ed-tb-room, 0px)); left: calc(var(--ed-left) + var(--ed-gap, 0px)); background: transparent; border: 0; gap: 6px; }
#editor-root #c { background: #131722; border-radius: 10px; box-shadow: 0 6px 22px rgba(20, 40, 70, .18); }
#editor-root #grip-hint { align-self: flex-start; max-width: 100%; background: var(--ed-glass); color: var(--ed-glass-ink); border-radius: 6px; font-weight: bold; }
#editor-root #bottombar { bottom: calc(var(--ed-gap, 0px) + 10px); background: var(--ed-glass); border-color: rgba(255, 255, 255, .6); box-shadow: 0 4px 16px rgba(20, 40, 70, .12); }
#editor-root #bottombar #size-readout, #editor-root #bottombar #candle-count-readout, #editor-root #bottombar #cursor-readout { color: var(--ed-glass-ink); font-weight: bold; }
/* editor.js colours #size-readout inline (#8fb4d8 for all candles, #7fc4ff when some are chosen), light blue meant for a dark bar. Over the light backing both become dark ink; the chosen state stays a distinct blue. */
#editor-root #bottombar #size-readout { color: var(--ed-glass-ink) !important; }
#editor-root #bottombar #size-readout[style*="7fc4ff"] { color: #0b4aa8 !important; }
/* step 41: below the hint band and the 32px grip strip, so it covers neither */
#editor-root #layersbar { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px + 32px + 8px); }
#editor-root #layer-draft { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px + 32px + 64px); }
#editor-root #help-btn { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px + 1px); right: calc(var(--ed-gap, 0px) + 12px); }
#editor-root #help-panel { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px + 38px); right: calc(var(--ed-gap, 0px) + 12px); }
#editor-root #bottombar, #editor-root #layersbar, #editor-root #layer-draft { left: calc(50% + var(--ed-left) / 2); }
#editor-root #hint { left: calc(var(--ed-left) + var(--ed-gap, 0px) + 10px); bottom: calc(var(--ed-gap, 0px) + var(--ed-tb-room, 0px) + 10px); }
#editor-root button.btn { font-weight: 400; }
@media (max-width: 820px) {
  #editor-root { --ed-left: 0px; }
  #editor-root #canvas-wrap { bottom: calc(62px + var(--ed-gap, 0px) + var(--ed-tb-room, 0px)); }
  #editor-root #bottombar { bottom: calc(var(--side-h, 62px) + 10px + var(--ed-gap, 0px)); }
  #editor-root #hint { bottom: calc(62px + var(--ed-gap, 0px) + var(--ed-tb-room, 0px) + 10px); }
}

/* step 130: on narrow viewports the bottom bar WRAPS onto extra rows (see DECISIONS.md). A sideways scroll clipped every popout, because overflow-x:auto forces overflow-y to clip too. --tb-h, --nl-h and --side-h (step 135) are the live heights of the bar and the not-live banner, set by js/editor/phone-fit.js. */
@media (max-width: 900px) {
  #editor-root #bottombar { width: max-content; max-width: calc(100vw - 16px); box-sizing: border-box; height: auto; flex-wrap: wrap; justify-content: center; row-gap: 4px; padding: 5px 8px; white-space: normal; overflow: visible; }
  #editor-root .tb-cluster { flex-wrap: wrap; justify-content: center; }
  #editor-root .tb-bigsep { width: 10px; flex-basis: 10px; }
  #editor-root .tb-gap { width: 6px; flex-basis: 6px; }
  #editor-root button.btn.tb-btn .kk { display: none; }
  #editor-root #canvas-wrap { bottom: calc(var(--ed-gap, 0px) + var(--tb-h, 56px) + 20px); }
  #editor-root #hint { bottom: calc(var(--ed-gap, 0px) + var(--tb-h, 56px) + 30px); }
}
/* step 130: phones. The editor box ends above the bottom nav, so Continue is never under it, and everything starts below the not-live banner. */
@media (max-width: 820px) {
  #editor-root { position: fixed; top: var(--nl-h, 0px); left: 0; right: 0; bottom: var(--side-h, 62px); height: auto; }
  #editor-root #canvas-wrap { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px)); bottom: calc(var(--side-h, 62px) + var(--ed-gap, 0px) + var(--tb-h, 56px) + 20px); }
  #editor-root #hint { bottom: calc(var(--side-h, 62px) + var(--ed-gap, 0px) + var(--tb-h, 56px) + 30px); }
  #editor-root #layersbar { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px + 32px + 8px); }
  #editor-root #layer-draft { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px + 32px + 64px); }
  #editor-root #help-btn { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px + 1px); }
  #editor-root #help-panel { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px + 38px); }
}
/* step 134: small route to the prompt page from the editor entry, in the sidebar above Continue */
.side .ed-prompt-link { margin-top: auto; padding: 6px 4px; font-size: 13px; color: #44484e; text-decoration: underline; text-align: center; }
.side .ed-prompt-link + #continue-btn { margin-top: 6px; }

/* coach marks step aside while a tool is in use (audit 7.12) */
#editor-root.tool-busy .onb-bubble { visibility:hidden; }

/* the site's own confirm box, in place of the native dialog (audit 7.21) */
#editor-root #ask-mask { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(4,7,14,0.72); }
#editor-root #ask-box { width:320px; max-width:100%; background:#12172a; border:1px solid #4a6a9a; border-radius:9px; padding:16px; color:#dce9f6; font-size:13px; line-height:1.5; box-shadow:0 12px 34px rgba(0,0,0,0.7); }
#editor-root #ask-box p { margin:0 0 14px; }
#editor-root #ask-box .ask-row { display:flex; gap:8px; justify-content:flex-end; }
/* Prompt 4: at mid widths the bottom toolbar stays right of the sidebar instead of running under it. */
@media (min-width: 821px) and (max-width: 900px) {
  #editor-root #bottombar { max-width: calc(100vw - var(--ed-left, 0px) - 16px); }
}

/* UX sweep 2026-10-15, item 46: the designer chrome uses the site sans, 12px at the smallest. The canvas keeps its own drawing. */
#editor-root { --ed-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
#editor-root, #editor-root button.btn, #editor-root .lb-item, #editor-root .lb-tooltip, #editor-root #help-btn, #editor-root #grip-hint, #editor-root #hint, #editor-root .onb-bubble, #editor-root #tut-card, #editor-root #tut-welcome, #editor-root #help-panel, #editor-root #ask-box { font-family: var(--ed-font); }
#editor-root button.btn { font-size: 13px; }
#editor-root button.btn.tb-btn { font-size: 12px; min-width: 54px; }
#editor-root .kk { font-size: 11px; }
#editor-root #size-readout, #editor-root #candle-count-readout, #editor-root #cursor-readout { font-size: 12px; }
#editor-root .lb-key, #editor-root .lb-tooltip, #editor-root #tut-card .tut-count { font-size: 12px; }
#editor-root #help-panel, #editor-root #help-panel h3 { font-size: 12px; }
/* item 57: the hint wraps instead of an ellipsis, the handle hint is 12px on an opaque strip */
#editor-root #hint { font-size: 12px; white-space: normal; overflow: visible; text-overflow: clip; max-width: min(70vw, 560px); line-height: 1.35; }
#editor-root #grip-hint { font: bold 12px/15px var(--ed-font); background: #fffdf5; color: #1d2a5a; }
/* item 39: the coach marks use the site card and button */
#editor-root .onb-bubble { background: #fffdf5; color: #13224f; border: 2px solid #2b3550; border-radius: 12px; font-size: 14px; line-height: 1.45; box-shadow: 3px 4px 0 rgba(30,70,110,.2); }
#editor-root .onb-bubble.onb-intro { background: #fffdf5; color: #13224f; border: 2px solid #2b3550; font-size: 15px; font-weight: 600; box-shadow: 5px 7px 0 rgba(30,70,110,.2); }
#editor-root .onb-bubble.onb-above::after { border-top-color: #2b3550; }
#editor-root .onb-bubble.onb-below::after { border-bottom-color: #2b3550; }
#editor-root .onb-bubble.onb-intro.onb-above::after { border-top-color: #2b3550; }
#editor-root .onb-bubble button.btn.onb-gotit-btn { font-family: var(--ed-font); font-size: 14px; font-weight: 700; color: #ffd84a; background: #2b3550; border: 2px solid #2b3550; border-radius: 10px; padding: 7px 18px; min-height: 36px; box-shadow: 3px 4px 0 rgba(30,70,110,.16); }
#editor-root .onb-bubble button.btn.onb-gotit-btn:hover { background: #3a4669; color: #ffd84a; }
#editor-root .onb-bubble.onb-intro.onb-center .onb-gotit-btn { font-size: 15px; padding: 8px 24px; }
#editor-root #onb-b .onb-foot { text-align: right; }
/* item 56: no keyboard table on a touch screen, the right words for the top cut, and the panel ends above the toolbar */
#editor-root #help-panel .hp-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  #editor-root #help-panel .hp-keys { display: none; }
  #editor-root #help-panel .hp-touch { display: inline; }
  #editor-root #help-panel .hp-mouse { display: none; }
}
#editor-root #help-panel { max-height: calc(100vh - var(--nl-h, 0px) - var(--ed-gap, 0px) - var(--grip-hint-h, 18px) - 44px - var(--ed-gap, 0px) - var(--tb-h, 56px) - 40px); }
@media (max-width: 820px) {
  #editor-root #help-panel { max-height: calc(100vh - var(--nl-h, 0px) - var(--ed-gap, 0px) - var(--grip-hint-h, 18px) - 44px - var(--side-h, 62px) - var(--tb-h, 56px) - 40px); width: min(330px, calc(100vw - 24px)); }
}
/* item 58: Start over sits apart from the fills, in the danger colour */
#editor-root .popout .pop-sep { border: 0; border-top: 1px solid #3a4a6a; margin: 3px 0; }
#editor-root .popout button.btn.pop-danger { color: #ff8f88; border-color: #7a3a3a; }
#editor-root .popout button.btn.pop-danger:hover { color: #fff; border-color: #ff6b62; }
/* ---------- UX sweep 2026-10-15, round 2 (create group) ---------- */
/* item 112: one label column for both help tables */
#editor-root #help-panel .hp-line b { flex: 0 0 92px; min-width: 0; }
#editor-root #help-panel td.k { width: 92px; padding: 2px 0; }
#editor-root #help-panel td.k + td { padding-left: 8px; }
/* item 112: the picture buttons are visibly off until a picture is loaded */
#editor-root .popout button.btn:disabled { opacity: .45; cursor: not-allowed; }
/* item 108: on a phone the Size menu opens to the left of its button, so it stays on screen */
@media (max-width: 820px) { #editor-root #pop-size { left: auto; right: 0; } }
/* item 113: the pointer readout keeps one width, so the toolbar never shifts as the pointer moves */
#editor-root #cursor-readout, #editor-root #candle-count-readout, #editor-root #size-readout { font-variant-numeric: tabular-nums; display: inline-block; }
#editor-root #cursor-readout { min-width: 20ch; }   /* fits "Pointer: candle 900" so hover never reflows the bar */
/* item 113: no key chips and no pointer readout on a touch screen */
@media (hover: none) and (pointer: coarse) {
  #editor-root .kk, #editor-root #cursor-readout { display: none !important; }
}
/* ---------- UX sweep 2026-10-15, round 4 (create group) ---------- */
/* item 66: from the wizard the start-over link is hidden from the first paint (js/drawing-handoff.js sets html.from-wizard in the head) */
html.from-wizard .side #prompt-link { display: none; }
/* item 70: with the link hidden, the button keeps its place at the foot of the side menu */
@media (min-width: 821px) {
  html.from-wizard .side #prompt-link + #continue-btn, .side #prompt-link[hidden] + #continue-btn { margin-top: auto; }
}
/* item 73: with the side menu tucked away, the editor starts below the menu button, so the button covers no part of
   the handle hint, and Continue (or Back to the wizard) stays on screen beside the menu button. The side menu is
   moved off screen by position, not by a transform or a filter, so its fixed button is placed against the window. */
@media (min-width: 821px) {
  html.nav-collapsed .ed-shell > .side { transform: none; left: -262px; filter: none; transition: none; }
  html.nav-collapsed .ed-shell .side #continue-btn { position: fixed; top: calc(var(--banner-h, 0px) + 26px); left: 66px; width: auto; min-height: 40px; margin: 0; padding: 6px 16px; z-index: 30; }
  html.nav-collapsed .ed-shell #editor-root #canvas-wrap { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + 52px); }
  html.nav-collapsed .ed-shell #editor-root #layersbar { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + 52px + var(--grip-hint-h, 18px) + 6px + 32px + 8px); }
  html.nav-collapsed .ed-shell #editor-root #layer-draft { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + 52px + var(--grip-hint-h, 18px) + 6px + 32px + 64px); }
  html.nav-collapsed .ed-shell #editor-root #help-btn { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + 52px + var(--grip-hint-h, 18px) + 6px + 1px); }
  html.nav-collapsed .ed-shell #editor-root #help-panel { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + 52px + var(--grip-hint-h, 18px) + 6px + 38px); }
}
/* item 74: on a phone the Candles/Wicks bar gets its own strip between the handle hint and the chart, so it never
   covers the drawing; --lb-h is the bar's live height (js/editor/phone-fit.js), and the ? button moves down with the chart */
@media (max-width: 820px) {
  #editor-root #c { margin-top: calc(var(--lb-h, 48px) + 6px); }
  #editor-root #layersbar { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px); }
  #editor-root #help-btn { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px + var(--lb-h, 48px) + 6px + 1px); }
  #editor-root #help-panel { top: calc(var(--nl-h, 0px) + var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px + var(--lb-h, 48px) + 6px + 38px); }
}
/* item 75: the Chop coach mark steps aside while the Chop menu is open, so it never covers Flat */
#editor-root:has(#pop-draw.open) #onb-b.onb-above { visibility: hidden; }
#editor-root #trim-count { white-space:nowrap; margin-left:4px; }
/* 2026-10-17, fix: the bottom bar WRAPS at desktop widths too, inside the width of the chart pane, so every button
   stays on screen and the bar never slides over the side menu (Continue in the wizard). --tb-h is the bar's live
   height (js/editor/phone-fit.js): a bar on two rows pushes the chart up instead of covering it. One row is 56px,
   the same 76px band as before. */
@media (min-width: 901px) {
  #editor-root #bottombar { width: max-content; max-width: calc(100vw - var(--ed-left, 0px) - 2 * var(--ed-gap, 0px)); box-sizing: border-box; height: auto; min-height: 56px; flex-wrap: wrap; justify-content: center; row-gap: 4px; padding: 5px 10px; white-space: normal; overflow: visible; }
  #editor-root .tb-cluster { flex-wrap: wrap; justify-content: center; }
  #editor-root #canvas-wrap { bottom: calc(var(--ed-gap, 0px) + max(var(--ed-tb-room, 0px), var(--tb-h, 56px) + 20px)); }
  #editor-root #hint { bottom: calc(var(--ed-gap, 0px) + max(var(--ed-tb-room, 0px), var(--tb-h, 56px) + 20px) + 10px); }
}
/* 2026-10-17, fix: a short phone or small window. Fixed to the window, the chart was squeezed to a sliver (or to
   nothing at 320x568) between the bars. Here the editor scrolls instead: the Candles/Wicks bar, the chart at a
   usable height, the toolbar and the hint stack in the page, and the page scrolls past them. */
@media (max-width: 820px) and (max-height: 700px) {
  #editor-root { overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; }
  #editor-root #layersbar { position: relative; top: auto; left: auto; transform: none; align-self: center; flex: none; order: 1; margin-top: 6px; }
  #editor-root #canvas-wrap { position: relative; top: auto; right: auto; bottom: auto; left: auto; flex: none; order: 2; height: max(280px, 62vh); margin: 6px var(--ed-gap, 8px) 0; }
  #editor-root #c { margin-top: 0; }
  #editor-root #bottombar { position: relative; left: auto; bottom: auto; transform: none; align-self: center; flex: none; order: 3; margin: 8px auto; }
  #editor-root #hint { position: relative; left: auto; bottom: auto; align-self: flex-start; flex: none; order: 4; margin: 0 var(--ed-gap, 8px) 8px; max-width: none; }
}
/* 2026-10-17, fix: touch targets at least 40px on a touch screen (the toggles, the ? button, the colour squares) */
@media (hover: none) and (pointer: coarse) {
  #editor-root button.btn.tg-btn { min-height: 40px; }
  #editor-root #help-btn { width: 40px; height: 40px; }
  #editor-root .lb-row { flex-wrap: wrap; }
  #editor-root .lb-item { min-width: 40px; min-height: 40px; justify-content: center; }
}
/* 2026-10-17: the rows readout in the Size menu, and room for the menu's two extra buttons */
#editor-root .popout .pop-label { font-size: 12px; color: #9fc4e8; padding: 2px 4px; }
#editor-root #pop-size { max-height: min(360px, 70vh); }