/**
 * ctxr-share.css (cdn/css) — de "bewaar in je account"-knop, herkenbaar over
 * álle spaces (thema-neutraal). Layout: ctxr-mark | label | share-2.
 * De ctxr-mark (fill) = accent, het share-2-teken (stroke) = muted. Een thema
 * kan de knop restylen via de --ctxr-save-*-vars. Zie cdn/js/ctxr-share.js +
 * the_save_button() (system/use/template.php).
 */
.ctxr-save {
  --ctxr-save-bg: #ffffff;
  --ctxr-save-ink: #1a1a1a;
  --ctxr-save-line: #e6e6e6;
  --ctxr-save-accent: #0056ff;
  --ctxr-save-muted: #6b6b6b;

  display: inline-flex;
  align-items: center;
  gap: 8px; /* bewuste uitzondering: standalone thema-neutraal component, geen tokens-root (8px-wet) */
  height: 40px;
  padding: 0 14px; /* bewuste uitzondering: vaste save-button-maat, off-ladder, geen tokens-root */
  font: 600 14px/1 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ctxr-save-ink);
  background: var(--ctxr-save-bg);
  border: 1px solid var(--ctxr-save-line);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .12s ease, background .12s ease;
}
.ctxr-save:hover { border-color: var(--ctxr-save-ink); }
.ctxr-save:active { transform: translateY(1px); }
.ctxr-save:focus-visible { outline: 2px solid var(--ctxr-save-accent); outline-offset: 2px; }

.ctxr-save-mark,
.ctxr-save-share { flex: none; display: inline-flex; }

/* ctxr-mark = het merk-teken (fill) in het accent */
.ctxr-save-mark svg { width: 16px; height: 16px; display: block; fill: var(--ctxr-save-accent); }

.ctxr-save-label { flex: 0 1 auto; white-space: nowrap; }

/* share-2 = het deel-teken (stroke) in muted, rechts */
.ctxr-save-share svg {
  width: 16px; height: 16px; display: block;
  fill: none; stroke: var(--ctxr-save-muted);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}