/* ═══ Mosaic shared design system — used by the Palette Editor (/) and the
   Progression Editor (/progression). Tokens may be overridden at runtime
   (the Palette Editor applies its theme + accent onto :root). ═══ */
:root {
  --bg:#0c0c10; --surface:#14141c; --border:#252530; --text:#dddcf4;
  --muted:#64637e; --accent:#9d7fea; --accent2:#2fd4a0; --danger:#f06b6b;
  --warn:#f0b040; --node:#151520; --node-border:#2c2c40; --r:8px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font:14px/1.4 'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);}

/* buttons */
.btn{padding:5px 12px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  font:inherit;font-size:.78rem;font-weight:600;transition:opacity .12s;}
.btn:hover{opacity:.85;}
.btn-accent{background:var(--accent);color:#0c0c10;border-color:var(--accent);}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text);}
.btn-danger{background:transparent;border-color:var(--danger);color:var(--danger);}
.btn-sm{padding:3px 9px;font-size:.72rem;}
.btn-icon{padding:4px 8px;font-size:.9rem;border-radius:var(--r);background:transparent;
  border:1px solid var(--border);color:var(--text);cursor:pointer;transition:background .12s;}
.btn-icon:hover{background:var(--border);}
.btn-icon:disabled{opacity:.3;cursor:default;}
.btn-icon:disabled:hover{background:transparent;}
.btn-xs{padding:1px 6px;font-size:.64rem;border-radius:5px;}
.btn-row{display:flex;gap:6px;flex-wrap:wrap;}

/* fields */
input.f,textarea.f{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);
  border-radius:var(--r);padding:6px 8px;font:inherit;margin-bottom:8px;}
input.f:focus,textarea.f:focus{outline:none;border-color:var(--accent);}
textarea.f{resize:vertical;min-height:48px;font-size:.82rem;}

/* thin scrollbars */
.tscroll::-webkit-scrollbar{width:3px;}
.tscroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

/* app menu (hamburger) — shared by both editors */
.app-menu{position:absolute;top:54px;left:10px;z-index:60;min-width:236px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);padding:10px;display:none;flex-direction:column;gap:8px;}
.app-menu.on{display:flex;}
.am-sec{display:flex;flex-direction:column;gap:6px;}
.am-sec>label{color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;}
.am-sec select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:5px 8px;font:inherit;width:100%;}
.am-row{display:flex;gap:6px;}
.am-row .btn{flex:1;justify-content:center;}
.am-div{height:1px;background:var(--border);margin:1px 0;}

/* 38px floating icon button over the workspace */
.float-icon{width:38px;height:38px;font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--text);cursor:pointer;padding:0;}
.float-icon:hover{border-color:var(--accent);}

/* left panel with tabs — shared by both editors */
#sidebar{width:268px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;}
#sidebar.hidden{display:none;}
#sidebar-resize{width:6px;flex-shrink:0;cursor:col-resize;background:var(--border);opacity:.4;transition:opacity .15s;}
#sidebar-resize:hover{opacity:1;background:var(--accent);}
#sidebar-resize.hidden{display:none;}
#sidebar-show{position:absolute;left:10px;top:54px;z-index:30;display:none;width:38px;height:38px;border-radius:9px;
  text-align:center;line-height:36px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:1.4rem;padding:0;}
#sidebar-show.on{display:block;}
.stabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;align-items:stretch;}
.stabs button{flex:1;min-width:0;padding:7px 2px;background:none;border:none;color:var(--muted);
  cursor:pointer;font:inherit;font-size:.62rem;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
  border-bottom:2px solid transparent;border-right:1px solid var(--border);transition:color .12s;}
.stabs button:last-child{border-right:none;}
.stabs button.on{color:var(--accent);border-bottom-color:var(--accent);}
.stabs button:hover:not(.on){color:var(--text);background:var(--surface);}
.stabs .stab-hide{flex:0 0 auto;min-width:26px;font-size:.9rem;color:var(--muted);border-left:1px solid var(--border);}
.tpanel{display:none;flex-direction:column;flex:1;overflow:hidden;}
.tpanel.on{display:flex;}

/* normal app-menu items (left-aligned) + flyout submenu */
.menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 9px;border:none;background:none;
  color:var(--text);font:inherit;font-size:.8rem;text-align:left;border-radius:7px;cursor:pointer;position:relative;text-decoration:none;}
.menu-item:hover{background:var(--border);}
.menu-item .mi-caret{margin-left:auto;color:var(--muted);font-size:.7rem;}
.menu-sub{display:none;position:absolute;left:calc(100% - 4px);top:-7px;min-width:140px;z-index:70;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.5);padding:6px;flex-direction:column;gap:2px;}
.menu-item.has-sub:hover>.menu-sub,.menu-item.has-sub.open>.menu-sub{display:flex;}

/* menu toggle + workspace control cluster + status HUD — identical chrome in both editors */
#menuToggle{position:absolute;left:10px;top:10px;z-index:31;width:38px;height:38px;font-size:1.4rem;line-height:1;
  display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:9px;}
#work-controls,#cvs-controls-shared{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:6px;z-index:9;}

/* editor-window body idiom (groups, labels, underline inputs) — shared by both editors */
.ez{padding:17px 13px;border-bottom:1px solid var(--border);} .ez:last-child{border-bottom:none;}
.ezh{font-size:.58rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:5px;}
.einp{flex:1;min-width:0;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--text);font:inherit;padding:3px 0;}
.einp:focus{outline:none;border-bottom-color:var(--accent);}
.edesc{font-size:.72rem;line-height:1.35;resize:vertical;min-height:2.6em;font-family:inherit;color:var(--muted);opacity:.85;}

/* app tabs — the single way to move between the editors and shared settings */
.app-tabs{position:absolute;left:56px;top:10px;z-index:31;display:flex;align-items:stretch;height:38px;
  background:var(--surface);border:1px solid var(--border);border-radius:9px;overflow:hidden;}
.app-tabs a,.app-tabs button{display:flex;align-items:center;padding:0 13px;font:inherit;font-size:.74rem;font-weight:600;
  color:var(--muted);background:none;border:none;border-right:1px solid var(--border);cursor:pointer;text-decoration:none;}
.app-tabs>*:last-child{border-right:none;}
.app-tabs .on{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);}
.app-tabs a:hover:not(.on),.app-tabs button:hover{color:var(--text);background:#ffffff08;}
/* shared settings window */
#shwin-ov{position:fixed;inset:0;z-index:80;background:#0008;display:none;align-items:center;justify-content:center;}
#shwin-ov.on{display:flex;}
#shwin{width:330px;max-width:92vw;background:var(--surface);border:1px solid var(--accent);border-radius:13px;
  box-shadow:0 18px 56px #000b;overflow:hidden;display:flex;flex-direction:column;}
#shwin .swhead{display:flex;align-items:center;gap:8px;padding:10px 13px 6px;}
#shwin .swhead b{flex:1;font-size:.95rem;}
#shwin .swhead button{background:transparent;border:none;color:var(--muted);font-size:1rem;cursor:pointer;border-radius:6px;width:24px;height:24px;}
#shwin .swhead button:hover{color:var(--text);background:#ffffff14;}
#shwin .swbody{padding:6px 13px 15px;}
#shwin .swhint{color:var(--muted);font-size:.72rem;margin-bottom:10px;}
.swgroup{margin-bottom:10px;}
.swgroup>label{display:block;color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:4px;}
.swseg{display:inline-flex;border:1px solid var(--border);border-radius:7px;overflow:hidden;}
.swseg button{padding:4px 11px;font:inherit;font-size:.74rem;background:none;border:none;color:var(--muted);cursor:pointer;border-right:1px solid var(--border);}
.swseg button:last-child{border-right:none;}
.swseg button.on{background:var(--accent);color:#0c0c10;font-weight:700;}
.swrange{width:100%;accent-color:var(--accent);}