/* blarg-ui.css — Save + Back top-right action bar, theme-shared.
   Activated by /assets/blarg-ui.js when a page declares a data-page-id.
   Adopt by adding:
     <link rel="stylesheet" href="/assets/blarg-ui.css">
     <script src="/assets/blarg-ui.js" data-page-id="my-page"
             data-mode="admin"
             data-state-block="my-state"
             data-back-href="/hub.html"></script>
   data-mode: "admin" (Save+Back) | "public" (Back-only) | "admin-no-save" (Back-only)
   data-state-block: required for Save semantics; page sets window.blargUiSerialize().
   data-back-href: explicit override; otherwise mode picks (admin→/hub.html, public→/).
*/
.blarg-ui-actions {
  position: fixed; top: 18px; right: 18px; display: flex; gap: 10px; z-index: 50;
  font-family: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.blarg-ui-actions button {
  appearance: none; border: 1px solid #0c1411; background: #f4f1e8; color: #0c1411;
  padding: 9px 16px; border-radius: 30px; font-family: inherit; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.blarg-ui-actions button:hover { background: #0c1411; color: #f4f1e8; transform: translateY(-1px); }
.blarg-ui-actions .save { background: #2f5d4f; color: #f4f1e8; border-color: #1d3a30; }
.blarg-ui-actions .save:hover { background: #1d3a30; }
.blarg-ui-actions .save.saving { opacity: .6; cursor: wait; }
.blarg-ui-actions .save.saved { background: #c98a3a; border-color: #c98a3a; }
.blarg-ui-toast {
  position: fixed; bottom: 24px; right: 24px; background: #0c1411; color: #f4f1e8;
  padding: 10px 18px; border-radius: 24px; font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .12em; opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease; pointer-events: none; z-index: 60;
}
.blarg-ui-toast.show { opacity: 1; transform: translateY(0); }
/* dark-bg pages (V4 Hub aesthetic): inverted colors */
[data-theme="dark"] .blarg-ui-actions button,
.blarg-ui-actions[data-invert] button { background: #15151C; color: #ECECEC; border-color: #ECECEC; }
[data-theme="dark"] .blarg-ui-actions .save,
.blarg-ui-actions[data-invert] .save { background: #14B8A6; border-color: #0E8F82; color: #0B0B0F; }