/* ---------- toolbar ---------- */
.bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--chrome);
  border-bottom:1px solid var(--stroke);position:relative;z-index:30;flex:none}
.brand{display:flex;align-items:center;gap:10px;margin-left:20px;margin-right:4px;font-weight:600;
  font-size:13.5px;letter-spacing:-.005em;white-space:nowrap;color:var(--brand-ink)}
.brand .blogo{height:21px;width:auto;display:block;flex:none}
.sep{width:1px;height:22px;background:var(--stroke);margin:0 3px;flex:none}
.spacer{flex:1}
button.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;background:var(--surface);
  color:var(--text);border:1px solid var(--stroke);border-radius:9px;font:inherit;font-size:13px;
  cursor:pointer;white-space:nowrap}
button.btn:hover:not(:disabled){background:var(--surface-hi);border-color:var(--stroke-hi)}
button.btn:active:not(:disabled){transform:translateY(1px)}
button.btn:disabled{opacity:.32;cursor:default}
button.btn.icon{padding:0;width:32px;justify-content:center}
button.btn.primary{background:linear-gradient(160deg,var(--brand),var(--brand-2));border-color:transparent;
  color:var(--brand-fg);font-weight:600}
button.btn.on{border-color:var(--brand);color:var(--brand)}
button.btn.danger:hover:not(:disabled){border-color:#7f1d1d;color:#fca5a5}

.menuwrap{position:relative}
.menu{position:absolute;top:38px;left:0;width:252px;padding:6px;z-index:40;background:var(--panel);
  border:1px solid var(--stroke-hi);border-radius:12px;box-shadow:var(--pop-shadow)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:9px;
  background:transparent;color:var(--text);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.menu button:hover{background:var(--panel-hi)}
.sizemenu{width:236px;left:auto;right:0;padding:12px}
.smrow{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:9px}
.smrow b{font-variant-numeric:tabular-nums;color:var(--brand)}
.sizemenu input[type=range]{width:100%;appearance:none;-webkit-appearance:none;background:transparent;margin:0 0 10px}
.sizemenu input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--stroke-hi)}
.sizemenu input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border:0;
  border-radius:50%;background:var(--brand);margin-top:-5px;cursor:pointer}
.sizemenu input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--stroke-hi)}
.sizemenu input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;
  background:var(--brand);cursor:pointer}
.smhint{font-size:10.5px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.sizemenu > button.btn{width:100%;justify-content:center}
.menu .mtile{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:linear-gradient(160deg,var(--accent),var(--accent-2));color:var(--tile-fg)}
.menu .msub{color:var(--muted);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase}

/* The single toolbar menu at the top right: view + file actions in one place. */
.menu.right{left:auto;right:0}
.actmenu{width:214px}
.actmenu button{gap:9px;padding:7px 8px;color:var(--text)}
.actmenu button svg{flex:none;color:var(--muted)}
.actmenu button:hover svg{color:var(--text)}
.actmenu .mlab{flex:1;min-width:0}
.actmenu .mnote{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.actmenu button.danger:hover{background:rgba(220,38,38,.12);color:#fca5a5}
.actmenu button.danger:hover svg{color:#fca5a5}
.mdiv{height:1px;background:var(--stroke);margin:5px 6px}

/* Theme picker: one row per theme, with four dots for the page, the panels, the
   text and the brand green that is the same in all of them. The dots take their
   colour from the theme's own variables, set on .tsw[data-th] in 00-tokens.css,
   so the row shows the theme without the page having to switch to it. */
.thememenu{width:272px}
.thememenu button{gap:10px;padding:7px 8px}
.thememenu .tsw{display:flex;gap:3px;flex:none}
.thememenu .tsw i{width:11px;height:11px;border-radius:50%;border:1px solid var(--stroke-hi)}
.thememenu .tsw i:nth-child(1){background:var(--bg)}
.thememenu .tsw i:nth-child(2){background:var(--surface)}
.thememenu .tsw i:nth-child(3){background:var(--text)}
.thememenu .tsw i:nth-child(4){background:var(--brand)}
.thememenu .tlab{flex:1;min-width:0;display:flex;flex-direction:column}
.thememenu .tlab b{font-size:12.5px;font-weight:600}
.thememenu .tlab span{font-size:10.5px;color:var(--muted);line-height:1.5}
.thememenu svg{flex:none;color:var(--brand)}
.thememenu button.sel .tlab b{color:var(--brand)}

/* Scenario picker: name over a one-line description of what the flow shows. */
.scenmenu{width:296px;max-height:min(74vh,560px);overflow-y:auto}
.scenmenu button{flex-direction:column;align-items:stretch;gap:2px;padding:9px 10px}
.scenmenu .sname{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.scenmenu .sname svg{margin-left:auto;color:var(--brand)}
.scenmenu .shint{font-size:11.5px;color:var(--muted);line-height:1.45}
.scenmenu button.sel .sname{color:var(--brand)}