/* Styles for the <evme-button> custom element (see evme-button.js). Shared
   across all four BOTB frontends the same way tokens.css is -- canonically
   hosted here, loaded via an absolute cross-origin <link>.

   Scope: the one outlined-accent "primary" button recipe that was
   independently copy-pasted three times (evme-present's #start-btn,
   evme-ingest's Upload button, evme-admin's .refresh-btn -- reused verbatim
   by evme-ingest/gallery). Admin's filled-background action buttons
   (.approve/.reject/.hide/etc.) and Present's icon-only .attribution-btn are
   different visual/interaction families and are deliberately not covered
   here. */
/* Unknown elements default to display:inline, which ignores width/height.
   inline-flex (rather than inline-block) is the base here specifically so
   the real inner <button> (flex: 1 1 auto below) reliably fills whatever box
   this element ends up with -- when a host page overrides this to
   `display: flex; width: 100%` (as evme-ingest does for its Upload button),
   flexbox's own stretch/grow behavior fills that width correctly, avoiding
   the classic "percentage width inside a shrink-to-fit parent" ambiguity a
   plain inline-block+width:100% child would hit. When left at the default
   (a small button sitting inline in a header row), inline-flex shrink-wraps
   to the button's own content exactly like inline-block would. */
evme-button {
  display: inline-flex;
}

.evme-btn {
  flex: 1 1 auto;
  font-family: var(--font-display);
  text-transform: uppercase;
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  cursor: pointer;
}
.evme-btn:hover:not(:disabled) {
  background: var(--accent-tint);
}
.evme-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Layout placement (width, margins) is deliberately not set here -- that's
   the host page's own choice for how the element sits in its layout, not an
   intrinsic property of the button. Style the <evme-button> tag itself for
   that, the same way you'd style any other element. */

.evme-btn--small {
  padding: 6px 16px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
.evme-btn--large {
  padding: 14px;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}
.evme-btn--hero {
  padding: 24px 48px;
  font-size: 2rem;
  letter-spacing: 0.05em;
  border-width: 2px;
  border-radius: 12px;
}