/*!
 * components.css — the shared operational component families (DESIGN.md
 * Components, operational pointer-first column). Linked after tokens.css and
 * before the page stylesheet; every value is a token — no raw brand hexes.
 *
 * The interface is deliberately small: a page opts into a family by using its
 * class (and `.vumo-form` for field styling); everything else — states,
 * focus, disabled, motion, reduced-motion — comes with it. Page stylesheets
 * keep only layout and page-specific structure.
 *
 * Contracts baked in here (one per codebase):
 *  - modal show/hide = the [hidden] attribute on .modal-overlay
 *  - focus = 2px accent outline, 2px offset, on :focus-visible
 *  - hierarchy by lines and surfaces — no shadows, no blur, no gradients
 */

/* ---- focus + reduced motion (global grammar) ---- */
:focus-visible { outline: 2px solid var(--vumo-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;  /* stop infinite spinners/pulses repainting */
  }
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 2px 20px 0;  /* 2px top: Space Grotesk sits optically high */
  border: 1px solid transparent; border-radius: var(--vumo-radius);
  font-family: var(--vumo-font); font-size: 14px; font-weight: 500;
  letter-spacing: -0.012em; line-height: 1; text-decoration: none;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--vumo-t-micro) var(--vumo-ease),
              color var(--vumo-t-micro) var(--vumo-ease),
              border-color var(--vumo-t-micro) var(--vumo-ease);
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* primary — the default filled action: ink, answers hover with accent */
.btn-primary { background: var(--vumo-ink); color: var(--vumo-white); }
.btn-primary:hover:not(:disabled) { background: var(--vumo-accent); }

/* accent — the single hero action; max one per screen */
.btn-accent { background: var(--vumo-accent); color: var(--vumo-white); }
.btn-accent:hover:not(:disabled) { background: var(--vumo-ink); }

/* gray — filled secondary */
.btn-gray { background: var(--vumo-gray); color: var(--vumo-ink); }
.btn-gray:hover:not(:disabled) { background: var(--vumo-line); }

/* danger — outline until hover */
.btn-danger { background: var(--vumo-surface); color: var(--vumo-error); border-color: var(--vumo-error); }
.btn-danger:hover:not(:disabled) { background: var(--vumo-error); color: var(--vumo-white); }

/* ghost — 1px line border: filters, toolbars, pagination */
.btn-ghost { background: var(--vumo-bg); color: var(--vumo-muted); border-color: var(--vumo-line); }
.btn-ghost:hover:not(:disabled) { color: var(--vumo-ink); border-color: var(--vumo-ink); }
.btn-ghost.active, .btn-ghost[aria-pressed="true"] { background: var(--vumo-ink); color: var(--vumo-white); border-color: var(--vumo-ink); }

/* on-dark — inside midnight panels */
.btn-on-dark { background: var(--vumo-white); color: var(--vumo-ink); }
.btn-on-dark:hover:not(:disabled) { background: var(--vumo-accent); color: var(--vumo-white); }

.btn-sm { height: 32px; padding: 2px 12px 0; font-size: 12px; letter-spacing: -0.006em; }

/* ---- inputs — filled gray, no resting border, square ---- */
.vumo-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]),
.vumo-form select, .vumo-form textarea, .input, .select {
  width: 100%; height: 42px; padding: 2px 14px 0;
  background: var(--vumo-gray); color: var(--vumo-ink);
  border: 1px solid transparent; border-radius: var(--vumo-radius);
  font-family: var(--vumo-font); font-size: 14px; font-weight: 500;
  letter-spacing: -0.012em; outline: none;
  transition: border-color var(--vumo-t-fast) var(--vumo-ease),
              background var(--vumo-t-fast) var(--vumo-ease);
}
.vumo-form textarea, textarea.input { height: auto; min-height: 84px; padding-top: 10px; line-height: 1.5; }
.vumo-form input:focus, .vumo-form select:focus, .vumo-form textarea:focus, .input:focus, .select:focus {
  border-color: var(--vumo-ink); outline: none;
}
/* Disabled form controls. DESIGN.md: "Disabled = opacity 0.4–0.5 only" — .btn, the checkbox,
   the radio, the range and .vumo-select-trigger all carried it; text/number/select .input did
   not, so a disabled field was indistinguishable from a live one except by trying to type in
   it. Matches .btn's .45 rather than inventing a third value. */
.vumo-form input:disabled, .vumo-form select:disabled, .vumo-form textarea:disabled,
.input:disabled, .select:disabled { opacity: .45; cursor: not-allowed; }
.vumo-form ::placeholder, .input::placeholder { color: var(--vumo-muted); font-weight: 400; }
.vumo-form label, .label-caps {
  display: block; font-size: 11px; font-weight: 600; line-height: 1.25;
  letter-spacing: 0.105em; text-transform: uppercase; color: var(--vumo-muted);
}
.vumo-form label { margin-bottom: 6px; }
/* .plain opts a label out of label-caps (e.g. checkbox rows with sentence text) */
.vumo-form label.plain {
  text-transform: none; letter-spacing: -0.012em;
  font-size: 14px; font-weight: 400; color: var(--vumo-ink);
}
.field-error { border-color: var(--vumo-error) !important; }
.field-msg { min-height: 18px; font-size: 12px; color: var(--vumo-error); } /* reserved — no layout shift */

/* ---- checkbox + radio — the box is ours, never the OS's ----
   Global on the type, not opt-in via a class: a native checkbox draws its box AND
   its tick with the operating system (shape, size, and tick colour all vary per
   platform), so — exactly like the dropdown — a native checkbox can never match
   the app. appearance:none hands us the box; every checkbox/radio in the app
   converges here with zero per-page wiring. A toggle opts out with role="switch"
   (styled just below). accent is the checked/interaction state. */
input[type="checkbox"]:not([role="switch"]),
input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  flex: none; display: inline-grid; place-content: center;
  width: 16px; height: 16px; margin: 0; vertical-align: -3px;
  background: var(--vumo-surface);
  border: 1px solid var(--vumo-line); border-radius: var(--vumo-radius);
  cursor: pointer;
  transition: background var(--vumo-t-fast) var(--vumo-ease),
              border-color var(--vumo-t-fast) var(--vumo-ease);
}
input[type="radio"] { border-radius: var(--vumo-radius-full); }
input[type="checkbox"]:not([role="switch"]):hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) { border-color: var(--vumo-ink); }
input[type="checkbox"]:not([role="switch"]):checked,
input[type="radio"]:checked { background: var(--vumo-accent); border-color: var(--vumo-accent); }
/* checkmark — the classic rotated-border tick, scaled in on check (no image, no hex) */
input[type="checkbox"]:not([role="switch"])::after {
  content: ""; width: 4px; height: 8px; margin-bottom: 2px;
  border: solid var(--vumo-white); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--vumo-t-fast) var(--vumo-ease);
}
input[type="checkbox"]:not([role="switch"]):checked::after { transform: rotate(45deg) scale(1); }
/* radio dot */
input[type="radio"]::after {
  content: ""; width: 6px; height: 6px; border-radius: var(--vumo-radius-full);
  background: var(--vumo-white); transform: scale(0);
  transition: transform var(--vumo-t-fast) var(--vumo-ease);
}
input[type="radio"]:checked::after { transform: scale(1); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }

/* ---- toggle switch — a checkbox that reads on/off; opt in with role="switch" ----
   Knob is a circular exception (DESIGN.md). One size everywhere (the consent
   banner keeps a self-contained twin at the same pixels — it ships without this
   stylesheet). */
.vumo-switch {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: 0 0 auto; width: 42px; height: 24px; margin: 0;
  background: var(--vumo-line); border: none; border-radius: var(--vumo-radius-full);
  cursor: pointer; transition: background var(--vumo-t-fast) var(--vumo-ease);
}
.vumo-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  background: var(--vumo-white); border-radius: var(--vumo-radius-full);
  transition: transform var(--vumo-t-fast) var(--vumo-ease);
}
.vumo-switch:checked { background: var(--vumo-accent); }
.vumo-switch:checked::after { transform: translateX(18px); }
.vumo-switch:disabled { opacity: .6; cursor: not-allowed; }

/* ---- range slider — flat track, round accent thumb (knob = circular exception) ---- */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: 8px 0;
  background: var(--vumo-line); border-radius: var(--vumo-radius-full);
  outline: none; cursor: pointer;
}
/* restore the global focus ring — the base rule's outline:none outspecifies :focus-visible */
input[type="range"]:focus-visible { outline: 2px solid var(--vumo-accent); outline-offset: 2px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; background: var(--vumo-accent);
  border: none; border-radius: var(--vumo-radius-full); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; background: var(--vumo-accent);
  border: none; border-radius: var(--vumo-radius-full); cursor: pointer;
}
input[type="range"]:disabled { opacity: .5; cursor: not-allowed; }

/* ---- file input — style the OS "Choose file" button as a gray button ----
   Pages that hide the input behind a custom trigger are unaffected (the button
   never renders); this catches the raw ones so no OS control ever ships. */
input[type="file"] { font-family: var(--vumo-font); font-size: 13px; color: var(--vumo-muted); }
input[type="file"]::file-selector-button {
  margin-right: 12px; height: 32px; padding: 2px 12px 0;
  background: var(--vumo-gray); color: var(--vumo-ink);
  border: 1px solid transparent; border-radius: var(--vumo-radius);
  font-family: var(--vumo-font); font-size: 12px; font-weight: 500; letter-spacing: -0.006em;
  cursor: pointer; transition: background var(--vumo-t-micro) var(--vumo-ease);
}
input[type="file"]::file-selector-button:hover { background: var(--vumo-line); }

/* ---- number — drop the OS spinner so number fields match text fields ---- */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- disclosure — no OS triangle; pages supply their own affordance ---- */
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* ---- select — the ONE VUMO dropdown, everywhere ----
   A native <select> draws its open option list with the OS, which no CSS can
   style — so it can never match the app's custom pickers. lib/select.ts enhances
   every native <select> into this widget: the native element stays in the DOM as
   the value/form/change source of truth, visually hidden, and the trigger + menu
   render in its place. The 42px filled-gray trigger mirrors .input exactly, so a
   closed .vumo-select is indistinguishable from an unenhanced field. */
.vumo-select { position: relative; display: block; }
/* Text for assistive tech only. Shared with the native <select> the picker replaces —
   the same six properties were already written out there, and a third copy was the next
   thing to happen. */
.vumo-sr-only,
.vumo-select > select {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.vumo-select-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 42px;
  padding: 2px 12px 0 14px; text-align: left;
  background: var(--vumo-gray); color: var(--vumo-ink);
  border: 1px solid transparent; border-radius: var(--vumo-radius);
  font-family: var(--vumo-font); font-size: 14px; font-weight: 500; letter-spacing: -0.012em;
  cursor: pointer; outline: none;
  transition: border-color var(--vumo-t-fast) var(--vumo-ease);
}
.vumo-select-trigger:hover:not(:disabled),
.vumo-select-trigger[aria-expanded="true"] { border-color: var(--vumo-ink); }
.vumo-select-trigger:focus-visible {
  border-color: var(--vumo-ink); outline: 2px solid var(--vumo-accent); outline-offset: 2px;
}
.vumo-select-trigger:disabled { opacity: .5; cursor: not-allowed; }
.vumo-select-value { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vumo-select-value.is-placeholder { color: var(--vumo-muted); font-weight: 400; }
.vumo-select-caret {
  flex: 0 0 auto; width: 12px; height: 12px; color: var(--vumo-muted);
  transition: transform var(--vumo-t-fast) var(--vumo-ease);
}
.vumo-select-trigger[aria-expanded="true"] .vumo-select-caret { transform: rotate(180deg); }
.vumo-select-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  min-width: 100%; max-height: 264px; overflow-y: auto;
  background: var(--vumo-white); border: 1px solid var(--vumo-line); font-size: 14px;
}
.vumo-select-menu[hidden] { display: none; }
.vumo-select-menu.drop-up { top: auto; bottom: calc(100% + 4px); }
.vumo-select-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: inherit; color: var(--vumo-ink);
  cursor: pointer; white-space: nowrap;
  transition: background var(--vumo-t-fast) var(--vumo-ease);
}
.vumo-select-item:hover, .vumo-select-item.is-active { background: var(--vumo-bg); }
.vumo-select-item[aria-selected="true"] { font-weight: 600; }
.vumo-select-item.is-disabled { color: var(--vumo-muted); cursor: not-allowed; }
.vumo-select-optgroup {
  padding: 10px 12px 4px; font-size: 11px; font-weight: 600;
  letter-spacing: .105em; text-transform: uppercase; color: var(--vumo-muted);
}

/* ---- cards ---- */
.card {
  background: var(--vumo-surface); color: var(--vumo-ink);
  border: 1px solid var(--vumo-separator); border-radius: var(--vumo-radius);
  padding: 32px;
}

/* ---- modals — glass dimmer, square surface card, [hidden] contract ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--vumo-glass); padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--vumo-surface); color: var(--vumo-ink);
  border-radius: var(--vumo-radius); padding: 24px;
  width: 100%; max-width: 700px; max-height: 86vh; overflow-y: auto;
}
.modal-compact { max-width: 356px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 2px solid var(--vumo-separator);
}
.modal-head h3 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -0.03em; }
.modal-close {
  /* 44px is DESIGN.md's hard floor for a target, and this is the control every modal is
     dismissed by. The glyph stays its old size; only the box it sits in grows. */
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vumo-gray); color: var(--vumo-ink);
  border: none; border-radius: var(--vumo-radius);
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: background var(--vumo-t-micro) var(--vumo-ease), color var(--vumo-t-micro) var(--vumo-ease);
}
.modal-close:hover { background: var(--vumo-accent); color: var(--vumo-white); }

/* ---- chips (static fact) — label-caps, semantic tint or neutral gray ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: var(--vumo-radius);
  font-size: 11px; font-weight: 600; line-height: 1.25;
  letter-spacing: 0.105em; text-transform: uppercase;
  background: var(--vumo-gray); color: var(--vumo-ink);
}
.chip-success { background: color-mix(in srgb, var(--vumo-success) 13%, transparent); color: var(--vumo-success); }
.chip-warning { background: color-mix(in srgb, var(--vumo-warning) 13%, transparent); color: var(--vumo-warning); }
.chip-error   { background: color-mix(in srgb, var(--vumo-error) 12%, transparent); color: var(--vumo-error); }
.chip-accent  { background: color-mix(in srgb, var(--vumo-accent) 12%, transparent); color: var(--vumo-accent); } /* live/AI only */

/* ---- tables ---- */
.vumo-table { width: 100%; border-collapse: collapse; background: var(--vumo-surface); }
.vumo-table th {
  padding: 10px 12px; text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: 0.105em; text-transform: uppercase;
  color: var(--vumo-muted); border-bottom: 2px solid var(--vumo-separator);
}
.vumo-table td { padding: 10px 12px; font-size: 12px; border-bottom: 1px solid var(--vumo-separator); }
.vumo-table tbody tr:hover { background: var(--vumo-bg); }
.num { font-variant-numeric: tabular-nums; }

/* ---- tabs — slate inactive, ink active, 4px accent indicator ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--vumo-line); }
.tab {
  padding: 10px 14px 8px; border: none; border-bottom: 4px solid transparent;
  background: none; color: var(--vumo-muted); font-family: var(--vumo-font);
  font-size: 14px; font-weight: 500; letter-spacing: -0.012em; cursor: pointer;
  transition: color var(--vumo-t-micro) var(--vumo-ease);
}
.tab:hover { color: var(--vumo-ink); }
.tab.active { color: var(--vumo-ink); border-bottom-color: var(--vumo-accent); }

/* ---- pills (live process) — square outline + status dot ---- */
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--vumo-line); border-radius: var(--vumo-radius);
  font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--vumo-muted);
  white-space: nowrap;
}
.status-pill .dot { width: 6px; height: 6px; }
.status-pill.busy .dot { background: var(--vumo-warning); animation: vumo-pulse 1.2s var(--vumo-ease) infinite; }
.status-pill.ok .dot   { background: var(--vumo-success-fill); }
.status-pill.err .dot  { background: var(--vumo-error); }
.status-pill.busy  { color: var(--vumo-ink); border-color: var(--vumo-ink); }
.status-pill.ok    { color: var(--vumo-success); border-color: var(--vumo-success); }
.status-pill.err   { color: var(--vumo-error); border-color: var(--vumo-error); }
.status-pill.muted { color: var(--vumo-muted); border-color: var(--vumo-line); }

/* ---- spinner (circular exception) ---- */
.spinner {
  width: 18px; height: 18px; flex: none;
  border: 2px solid var(--vumo-line); border-top-color: var(--vumo-accent);
  border-radius: var(--vumo-radius-full);
  animation: vumo-spin .8s linear infinite;
}
@keyframes vumo-spin { to { transform: rotate(360deg); } }

/* ---- status dot (circular exception) ---- */
.dot { width: 8px; height: 8px; flex: none; border-radius: var(--vumo-radius-full); background: var(--vumo-muted); }
.dot-success { background: var(--vumo-success-fill); }
.dot-warning { background: var(--vumo-warning); }
.dot-error   { background: var(--vumo-error); }
.dot-busy    { background: var(--vumo-accent); animation: vumo-pulse 1.2s var(--vumo-ease) infinite; }
@keyframes vumo-pulse { 50% { opacity: .35; } }

/* ---- shared top navigation (the persistent shell) ----------------------------
   Loaded render-blocking in <head> so the server-rendered bar (app.py:_render_topbar,
   hydrated by topbar.ts) is fully styled at first paint — no flash, no layout shift. */
.vumo-topbar { background: var(--vumo-white,#fff); border-bottom: 1px solid var(--border,#e6e6e6);
  padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  font-family: inherit; position: relative; z-index: 40; }
.vumo-topbar .logo { display: inline-flex; align-items: center; text-decoration: none; }
.vumo-topbar .logo img { height: 22px; width: auto; display: block; }
.vumo-topbar .right-group { display: flex; align-items: center; gap: 16px; position: relative; }
.vumo-topbar nav a { margin-left: 16px; font-size: 13px; color: var(--vumo-muted,#6b6c72); text-decoration: none; font-weight: 500; }
.vumo-topbar nav a:first-child { margin-left: 0; }
.vumo-topbar nav a:hover { color: var(--vumo-ink,#1a1b21); }
.vumo-topbar nav a.active { color: var(--vumo-ink,#1a1b21); font-weight: 700; }
.vumo-topbar nav a[data-admin-only] { display: none; }
.vumo-topbar .header-edit { display: flex; gap: 8px; align-items: center; }
.vumo-topbar .status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: transparent;
  border: 1px solid var(--border,#e6e6e6); font-size: 11px; color: var(--vumo-muted,#6b6c72); text-transform: uppercase; letter-spacing: .06em; }
.vumo-topbar .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vumo-muted,#6b6c72); }
.vumo-topbar .status-pill.busy .dot { background: var(--vumo-accent,#ff4417); animation: vumo-pulse 1.2s infinite; }
.vumo-topbar .status-pill.ok .dot,
.vumo-topbar .status-pill.err .dot { background: var(--vumo-accent,#ff4417); }
.vumo-topbar .status-pill.ok,
.vumo-topbar .status-pill.err { color: var(--vumo-accent,#ff4417); border-color: var(--vumo-accent,#ff4417); }
.vumo-topbar .status-pill.busy { color: var(--vumo-ink,#1a1b21); border-color: var(--vumo-ink,#1a1b21); }
.vumo-topbar .header-gear { width: 32px; height: 32px; border-radius: 50%; background: var(--vumo-ink,#1a1b21); border: 1px solid var(--vumo-ink,#1a1b21);
  color: var(--vumo-white,#fff); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase;
  transition: border-color .15s, color .15s, background .15s; }
.vumo-topbar .header-gear:hover, .vumo-topbar .header-gear.open { background: var(--vumo-accent,#ff4417); border-color: var(--vumo-accent,#ff4417); color: var(--vumo-white,#fff); }
.vumo-topbar .header-popover { position: absolute; top: calc(100% + 10px); right: 0; background: var(--vumo-white,#fff);
  border: 1px solid var(--vumo-ink,#1a1b21); padding: 14px 16px; min-width: 220px; display: flex; flex-direction: column; gap: 6px; z-index: 50; }
.vumo-topbar .header-popover[hidden] { display: none; }
.vumo-topbar .header-popover .popover-user { font-size: 13px; font-weight: 600; color: var(--vumo-ink,#1a1b21); word-break: break-all; padding-bottom: 8px; border-bottom: 1px solid var(--border,#e6e6e6); }
.vumo-topbar .header-popover .popover-label { font-size: 10px; color: var(--vumo-muted,#6b6c72); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; margin-top: 4px; }
.vumo-topbar .header-popover input { width: 100%; border: 1px solid var(--border,#e6e6e6); background: var(--vumo-white,#fff); padding: 7px 10px; font-size: 13px; font-family: inherit; color: inherit; }
.vumo-topbar .header-popover input:focus { border-color: var(--vumo-accent,#ff4417); outline: none; }
.vumo-topbar .popover-logout { display: block; width: 100%; margin-top: 12px; padding: 8px; background: transparent;
  border: 1px solid var(--vumo-accent,#ff4417); color: var(--vumo-accent,#ff4417); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; }
.vumo-topbar .popover-logout:hover { background: var(--vumo-accent,#ff4417); color: var(--vumo-white,#fff); }

/* Subtle, always-visible publish chip: same shape as the status pill so it reads as
   a nav-bar affordance, amber to flag "unpublished". Clicking it publishes in place
   (same endpoint as the composer buttons) — it never navigates. */
.vumo-topbar .publish-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  background: transparent; border: 1px solid #e0a200; color: #8a6100; font-size: 11px; font-family: inherit;
  font-weight: 500; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s; }
.vumo-topbar .publish-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: #e0a200; flex-shrink: 0; }
.vumo-topbar .publish-chip:hover:not([disabled]) { background: #e0a200; color: var(--vumo-white,#fff); }
.vumo-topbar .publish-chip:hover:not([disabled]) .dot { background: var(--vumo-white,#fff); }
.vumo-topbar .publish-chip[disabled] { cursor: default; }
.vumo-topbar .publish-chip.done { border-color: #2e7d32; color: #2e7d32; }
.vumo-topbar .publish-chip.done .dot { background: #2e7d32; }
.vumo-topbar .publish-chip.failed { border-color: #c62828; color: #c62828; }
.vumo-topbar .publish-chip.failed .dot { background: #c62828; }