/* ----------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ----------------------------------------------------------------------- */

/* Base button styling is wrapped in :where() so the selector group lands
   at specificity (0,0,0,0). Two reasons:
     1. `[hidden]` (UA + reset.css, specificity 0,0,1,0) naturally beats
        it, so `<input type="submit" hidden>` actually hides instead of
        rendering as the inline-flex value below — without this, author
        origin trumps UA `[hidden]` regardless of selector specificity.
     2. Modifier classes (`.quiet`, `.button--primary`, etc.) override
        these defaults trivially with their own (0,0,1,0) selectors —
        no specificity escalation. The :hover / :active / :focus-visible
        / :disabled rules below intentionally keep their natural
        specificity since they don't override `display` and need to win
        against ad-hoc class-based color tweaks. */
:where(button, input[type="submit"], input[type="button"], .button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.05s;
  white-space: nowrap;
}

/* Strip the underline that the UA stylesheet adds to <a> elements when
   they're styled as buttons (`<%= link_to "Export", path, class: "button"
   %>`). The base rule above is :where()-wrapped at zero specificity so
   `[hidden]` can win, but that also makes `text-decoration: none` lose
   to UA's `a { text-decoration: underline }` (specificity 0,0,0,1).
   The `color` override is the same situation vs the author-defined
   `a { color: var(--accent) }` rule in typography.css at (0,0,0,1) —
   without this, `<a class="button">` shows orange text on the orange
   button background (invisible). Class-level (0,0,1,0) wins both.
   `.button-quiet` / `.button-danger` rules later in the file still
   override us — they have the same specificity but appear later in
   the cascade. */
.button {
  color: var(--accent-ink);
  text-decoration: none;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, .button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
  text-decoration: none;
}
button:active, input[type="submit"]:active, .button:active { transform: translateY(1px); }
button:focus-visible, input[type="submit"]:focus-visible,
input[type="button"]:focus-visible, .button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:disabled, input[type="submit"]:disabled,
input[type="button"]:disabled, .button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
button:disabled:hover, input[type="submit"]:disabled:hover,
input[type="button"]:disabled:hover {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}

/* Quiet button — outline, ink text */
.button-quiet, button.quiet, input[type="submit"].quiet {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--rule-strong);
}
.button-quiet:hover, button.quiet:hover {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--accent);
}

/* Danger button */
.button-danger, button.danger, input[type="submit"].danger {
  background: var(--err);
  border-color: var(--err);
  color: var(--accent-ink);
}
.button-danger:hover, button.danger:hover {
  background: var(--err-hover);
  border-color: var(--err-hover);
}

/* Use when a button sits beside an input or styled dropdown trigger
   in the same flex row. The dropdown trigger renders at ~2.43rem
   (0.95rem font · line-height 1.4 · 0.55rem padding); the default
   .button is 0.92rem · 1.2 — about 0.2rem shorter, which reads as
   "the button is higher" when bottom-aligned. This modifier matches
   the trigger's internal metrics so they share both top and bottom. */
.button--match-input,
input[type="submit"].button--match-input {
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Full-width button — used on standalone forms (login, sign-up) where
   the submit should span the form's content column. Replaces inline
   style="width: 100%" which CSP style-src without 'unsafe-inline'
   would strip. */
.button--block,
input[type="submit"].button--block {
  width: 100%;
}

/* Plain text-button (e.g. "Cancel" beside a submit) */
.button-link, button.link, input[type="submit"].link {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
  padding: 0.55rem 0.4rem;
  font-weight: 500;
}
.button-link:hover, button.link:hover {
  background: transparent;
  color: var(--accent-hover);
  border-color: transparent;
  text-decoration: underline;
}

/* Red-tinted text-link variant — used for inline destructive actions
   where a full button-danger would be too loud (e.g. "Unlink" on a
   product row beside a product name). Without this rule, the .danger
   combo class wins on specificity and forces the filled red button
   styling; this restores the transparent text-link shape with err
   color. */
.button-link.danger, button.link.danger, input[type="submit"].link.danger {
  background: transparent;
  border-color: transparent;
  color: var(--err);
}
.button-link.danger:hover, button.link.danger:hover {
  background: transparent;
  border-color: transparent;
  color: var(--err-hover);
  text-decoration: underline;
}

/* Small icon-only "remove" button — used inside editor cards (e.g.
   the address rows on /organizations/:slug/edit). Subtle by default
   so the editor surface stays calm; lights up red on hover/focus to
   telegraph the destructive action before the click confirm fires. */
.btn-icon-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-icon-remove:hover,
.btn-icon-remove:focus-visible {
  background: var(--err-soft);
  border-color: var(--err);
  color: var(--err);
}

.actions {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  flex-wrap: wrap;
  margin-top: var(--gap-4);
}
.actions--end { justify-content: flex-end; }
/* Sticky form-action bar — pins to the bottom of the viewport while
   the user scrolls a long form, so Save is always reachable. Backed
   by surface + a soft top rule + a small shadow so it reads as a
   distinct layer over whatever's beneath it. */
.actions--sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: var(--gap-5);
  padding: var(--gap-3) 0;
  background: var(--bg);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -8px 16px -10px rgba(0, 0, 0, 0.08);
}