/* Editor chrome. The canvas itself is course.css, so what is being written
 * looks like what will be taken. */
:root{--e-line:#e2e8ec;--e-mute:#5c6f7c;--e-primary:#005475;--e-teal:#0088A8;--e-gold:#F9CF2B}
body.ed{background:#eef2f5;font:400 15px/1.5 Inter,system-ui,sans-serif;margin:0;color:#13202a}
.ed-top{position:sticky;top:0;z-index:40;height:60px;display:flex;align-items:center;gap:12px;padding:0 14px;
  background:linear-gradient(90deg,var(--e-primary),var(--e-teal),var(--e-primary));
  border-bottom:3px solid var(--e-gold);color:#fff}
.ed-top a.home{color:#fff;text-decoration:none;font:700 14px "Plus Jakarta Sans",sans-serif;opacity:.9}
.ed-top input.title{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;
  border-radius:8px;padding:8px 12px;font:600 16px Inter,sans-serif;min-width:280px}
.ed-top input.title::placeholder{color:rgba(255,255,255,.6)}
.ed-top .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.ed-state{font:500 13px Inter,sans-serif;opacity:.85;min-width:92px;text-align:right}
.ed-btn{background:#fff;color:var(--e-primary);border:0;border-radius:8px;padding:9px 15px;
  font:600 14px Inter,sans-serif;cursor:pointer;text-decoration:none;display:inline-block}
.ed-btn.ghost{background:rgba(255,255,255,.15);color:#fff}
.ed-btn:disabled{opacity:.45;cursor:default}

.ed-wrap{display:flex;align-items:flex-start}
.ed-rail{width:260px;flex:none;background:#fff;border-right:1px solid var(--e-line);
  position:sticky;top:60px;height:calc(100vh - 60px);overflow:auto;padding:12px 0}
.ed-rail h4{font:600 11px Inter,sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--e-mute);
  margin:4px 14px 8px}
.ed-sec{display:flex;align-items:center;gap:6px;padding:7px 10px 7px 14px;cursor:pointer;border-left:3px solid transparent}
.ed-sec:hover{background:#f4f7f9}
.ed-sec.on{background:#f4f7f9;border-left-color:var(--e-gold);font-weight:600;color:var(--e-primary)}
.ed-sec span.nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.ed-sec button{background:0;border:0;cursor:pointer;color:var(--e-mute);font-size:13px;padding:2px 3px;opacity:0}
.ed-sec:hover button{opacity:1}
.ed-sec button:hover{color:#8c2222}
.ed-add{margin:10px 14px 0;width:calc(100% - 28px);background:#f4f7f9;border:1px dashed var(--e-line);
  border-radius:8px;padding:9px;cursor:pointer;color:var(--e-primary);font:600 13px Inter,sans-serif}

.ed-canvas{flex:1;min-width:0;padding:22px 0 120px;display:flex;justify-content:center}
.ed-paper{width:100%;max-width:860px;background:#fff;border:1px solid var(--e-line);border-radius:14px;
  overflow:hidden;box-shadow:0 1px 3px rgba(19,32,42,.06)}

/* hero editor */
.ed-hero{position:relative;min-height:190px;background:#dde5ea center/cover no-repeat;display:flex;
  align-items:center;justify-content:center;text-align:center;padding:22px}
.ed-hero.has:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45))}
.ed-hero .in{position:relative;z-index:2;width:100%;max-width:560px}
.ed-hero.has .in input{color:#fff}
.ed-hero input{background:rgba(255,255,255,.55);border:1px dashed rgba(0,0,0,.18);border-radius:8px;
  text-align:center;width:100%;padding:7px 10px;margin:3px 0;font:600 15px Inter,sans-serif}
.ed-hero input.big{font:700 26px Merriweather,Georgia,serif;text-transform:uppercase}
.ed-hero .pick{position:absolute;right:10px;top:10px;z-index:3}

/* blocks in edit mode */
.ed-blocks{padding:26px 34px 40px}
.ed-blk{position:relative;border:1px solid transparent;border-radius:10px;padding:4px 8px;margin:2px -8px}
.ed-blk:hover{border-color:#dbe4ea;background:#fcfdfe}
.ed-blk.sel{border-color:var(--e-teal);background:#fbfdff}
.ed-tools{position:absolute;right:6px;top:-13px;display:none;gap:3px;background:#fff;border:1px solid var(--e-line);
  border-radius:8px;padding:3px;box-shadow:0 2px 6px rgba(19,32,42,.08);z-index:5}
.ed-blk:hover .ed-tools,.ed-blk.sel .ed-tools{display:flex}
.ed-tools button{background:0;border:0;cursor:pointer;padding:3px 7px;border-radius:6px;font-size:13px;color:var(--e-mute)}
.ed-tools button:hover{background:#f0f4f7;color:var(--e-primary)}
.ed-tools button.del:hover{color:#8c2222}
.ed-blk [contenteditable]{outline:0}
.ed-blk [contenteditable]:focus{box-shadow:0 0 0 2px rgba(0,136,168,.22);border-radius:6px}
.ed-slot{display:flex;justify-content:center;margin:6px 0}
.ed-slot button{background:0;border:1px dashed transparent;color:#9fb0ba;border-radius:8px;
  padding:3px 14px;cursor:pointer;font:600 13px Inter,sans-serif}
.ed-slot:hover button{border-color:var(--e-line);color:var(--e-primary);background:#f8fafb}

/* block settings panels */
.ed-set{background:#f6f9fb;border:1px solid var(--e-line);border-radius:10px;padding:12px 14px;margin-top:8px}
.ed-set label{display:block;font:600 11px Inter,sans-serif;text-transform:uppercase;letter-spacing:.05em;
  color:var(--e-mute);margin:8px 0 4px}
.ed-set input[type=text],.ed-set select,.ed-set input[type=number]{width:100%;padding:8px 10px;
  border:1px solid var(--e-line);border-radius:7px;font:400 14px Inter,sans-serif;background:#fff}
.ed-set .row{display:flex;gap:10px;align-items:center}
.ed-opt{display:flex;gap:8px;align-items:center;margin-bottom:7px}
.ed-opt input[type=text]{flex:1}
.ed-opt .rm{background:0;border:0;color:var(--e-mute);cursor:pointer;font-size:15px}
.ed-opt .rm:hover{color:#8c2222}
.ed-mini{background:var(--e-primary);color:#fff;border:0;border-radius:7px;padding:7px 13px;
  font:600 13px Inter,sans-serif;cursor:pointer;margin-top:6px}
.ed-mini.ghost{background:#fff;color:var(--e-primary);border:1px solid var(--e-line)}
.ed-up{border:1px dashed var(--e-line);border-radius:10px;padding:20px;text-align:center;color:var(--e-mute);
  font-size:14px;cursor:pointer;background:#fff}
.ed-up.drag{border-color:var(--e-teal);background:#f2fafc;color:var(--e-primary)}
.ed-bar{width:100%;height:5px;background:#e7eef2;border-radius:999px;overflow:hidden;margin-top:9px}
.ed-bar i{display:block;height:100%;width:0;background:var(--e-teal);transition:width .2s}

/* pickers and dialogs */
.ed-mask{position:fixed;inset:0;background:rgba(10,22,30,.42);display:flex;align-items:center;
  justify-content:center;z-index:60;padding:20px}
.ed-card{background:#fff;border-radius:14px;padding:22px;width:100%;max-width:520px;max-height:84vh;overflow:auto}
.ed-card h3{font:700 19px "Plus Jakarta Sans",sans-serif;margin:0 0 4px}
.ed-card p.sub{color:var(--e-mute);margin:0 0 16px;font-size:14px}
.ed-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.ed-pick button{background:#f6f9fb;border:1px solid var(--e-line);border-radius:10px;padding:14px 8px;
  cursor:pointer;font:600 13px Inter,sans-serif;color:#13202a}
.ed-pick button:hover{border-color:var(--e-teal);background:#f2fafc}
.ed-pick .ic{display:block;font-size:19px;margin-bottom:5px;color:var(--e-primary)}
.ed-card label{display:block;font:600 11px Inter,sans-serif;text-transform:uppercase;letter-spacing:.05em;
  color:var(--e-mute);margin:12px 0 4px}
.ed-card input,.ed-card select{width:100%;padding:10px 12px;border:1px solid var(--e-line);border-radius:8px;
  font:400 15px Inter,sans-serif}
.ed-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.ed-note{color:var(--e-mute);font-size:13px;margin-top:10px}

/* Resize handles. Media is dragged by its right edge, the header image by its
 * bottom edge, and both show the number they are producing while you drag. */
.ed-blk .cb-fig{position:relative}
.ed-rs{position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:14px;height:56px;
  border-radius:7px;background:var(--e-teal);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);
  cursor:ew-resize;opacity:0;transition:opacity .12s;z-index:4}
.ed-blk:hover .ed-rs,.ed-blk.sel .ed-rs,.ed-rs.on{opacity:1}
.ed-size{position:absolute;right:10px;top:10px;background:rgba(10,22,30,.82);color:#fff;border-radius:6px;
  padding:3px 9px;font:600 12px Inter,sans-serif;z-index:5;display:none}
.ed-size.on{display:block}
.ed-hero{position:relative}
.ed-hdrag{position:absolute;left:0;right:0;bottom:0;height:16px;cursor:ns-resize;z-index:4;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,transparent,rgba(0,0,0,.14))}
.ed-hdrag:after{content:"";width:46px;height:4px;border-radius:999px;background:rgba(255,255,255,.85);
  box-shadow:0 1px 3px rgba(0,0,0,.3)}
.ed-hdrag:hover:after{background:var(--e-gold)}
body.ed.resizing{user-select:none;cursor:ew-resize}
body.ed.resizing-v{user-select:none;cursor:ns-resize}

/* Section reordering */
.ed-sec{user-select:none}
.ed-sec .grip{color:#b6c3cb;font-size:12px;letter-spacing:-3px;cursor:grab;flex:none;margin-right:2px}
.ed-sec:hover .grip{color:var(--e-teal)}
.ed-sec.dragging{opacity:.4}
.ed-sec.over{box-shadow:inset 0 2px 0 var(--e-gold)}
.ed-blk .cb-embed{pointer-events:none}

/* Export menu */
.ed-exp{position:relative;display:inline-block}
.ed-expmenu{position:absolute;right:0;top:40px;background:#fff;border:1px solid var(--e-line);
  border-radius:9px;box-shadow:0 4px 14px rgba(19,32,42,.14);padding:5px;min-width:190px;z-index:50}
.ed-expmenu button{display:block;width:100%;text-align:left;background:0;border:0;cursor:pointer;
  padding:9px 12px;border-radius:7px;font:500 14px Inter,sans-serif;color:#13202a}
.ed-expmenu button:hover{background:#f0f4f7;color:var(--e-primary)}