/* P2376 — styling for shared/bws-versions-ui.js's "Save a version" / "Version history"
   control. Theme tokens only (shared/theme.css); no new hex values. A page provides its
   own popover/disclosure chrome (position, show/hide, trigger button) around the
   container this file's classes render inside — .bws-ver never assumes it owns the page. */
.bws-ver { display: flex; flex-direction: column; gap: 10px; }
.bws-ver-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); font-weight: 700;
}
.bws-ver-save-row { display: flex; gap: var(--space-1, 8px); margin-top: 4px; }
.bws-ver-input {
  flex: 1 1 auto; min-width: 0; padding: var(--space-1, 8px) 10px;
  border-radius: var(--radius-sm, 8px); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.85rem;
}
.bws-ver-input:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--accent));
  outline-offset: 1px;
}
.bws-ver-save-btn {
  flex: 0 0 auto; padding: var(--space-1, 8px) 14px; border-radius: var(--radius-sm, 8px);
  border: 1px solid transparent; background: var(--accent-soft);
  /* --accent-soft stays a LIGHT fill in both themes (theme.css: "Soft/fill tokens ...
     stay LIGHT in both themes"), so its text must be --accent-ink (the fixed deep tone
     built for exactly this pairing), never --text — --text flips near-white in Midnight
     Oak and reads as barely-there white-on-pale-blue there. */
  color: var(--accent-ink, var(--accent-deep));
  font-weight: 700; font-size: 0.82rem; cursor: pointer; white-space: nowrap;
}
.bws-ver-save-btn:hover { filter: brightness(0.97); }
.bws-ver-save-btn:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--accent));
  outline-offset: 2px;
}
.bws-ver-save-btn:disabled, .bws-ver-input:disabled { opacity: 0.6; cursor: default; }

.bws-ver-msg { font-size: 0.8rem; color: var(--text-muted); min-height: 1.2em; }
.bws-ver-msg:empty { display: none; }
.bws-ver-msg.err { color: var(--danger-text); font-weight: 600; }
.bws-ver-msg:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--accent));
  outline-offset: 2px; border-radius: var(--radius-xs, 4px);
}

.bws-ver-history { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: var(--space-1, 8px); }
.bws-ver-heading {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); font-weight: 700;
}
.bws-ver-list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.bws-ver-row { padding: var(--space-1, 8px); border-radius: var(--radius-sm, 8px); display: flex; flex-direction: column; gap: 2px; }
.bws-ver-row:hover { background: var(--surface-hi); }
.bws-ver-name { font-size: 0.85rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.bws-ver-when { font-size: 0.72rem; color: var(--text-muted); }
.bws-ver-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bws-ver-act {
  padding: 6px 10px; border-radius: var(--radius-sm, 8px); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 0.76rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.bws-ver-act:hover { background: var(--surface-hi); border-color: var(--accent); }
.bws-ver-act:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--accent));
  outline-offset: 1px;
}
.bws-ver-act.bws-ver-primary { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink, var(--accent-deep)); font-weight: 700; }
.bws-ver-act.bws-ver-danger { color: var(--danger-text); }
.bws-ver-act.bws-ver-danger:hover { background: var(--surface-hi); border-color: var(--danger-text); }
.bws-ver-act:disabled { opacity: 0.6; cursor: default; }
.bws-ver-empty { margin: 2px 0 4px; font-size: 0.8rem; color: var(--text-muted); }