/* Canonical geometry for action pills across public and administrative shells.
   Later compact tenant, header and workspace controls retain their own sizing. */
:root { --pill-height: 48px; --pill-padding-x: 24px; --pill-font-size: 14px; }
:is(a,button):is(.button,.studio-button,.admin-button),
:is(.record-editor,.saw-dialog) footer > button {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--pill-height);
  height: auto;
  max-width: 100%;
  padding: 11px var(--pill-padding-x);
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: 999px;
  background-clip: border-box;
  background-origin: border-box;
  font-size: var(--pill-font-size);
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
  transform: none;
}
:is(a,button):is(.button.outline,.studio-button.clear,.studio-button.outline,.admin-button.secondary) {
  border-color: currentColor;
}
:is(.record-editor,.saw-dialog) footer > button:first-child:not(.admin-button):not(.danger) {
  background: transparent; color: inherit; border-color: currentColor;
}
/* A filled pill needs no second edge; outlined variants keep their theme color. */
:is(a,button):is(.button.primary,.studio-button.accent,.admin-button:not(.secondary)) {
  border-width: 0;
  padding-block: 12px;
}
:is(a,button):is(.button,.studio-button,.admin-button):focus:not(:focus-visible) {
  outline: none;
}
:is(a,button):is(.button,.studio-button,.admin-button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
:is(.record-editor,.saw-dialog) footer > button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
:is(a,button):is(.button,.studio-button,.admin-button) > svg {
  width: 18px; height: 18px; flex: 0 0 18px;
}
/* Shared action rows use equal tracks, including different text lengths. */
:is(.button-row,.hero-actions),
:is(.record-editor,.saw-dialog) footer {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,1fr);
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  gap: 12px;
}
.button-row { margin-inline: auto; }

:is(.button-row,.hero-actions) > :is(a,button),
:is(.record-editor,.saw-dialog) footer > button {
  width: 100%; min-width: 0; margin: 0;
}
@media (max-width: 600px) {
  :is(.button-row,.hero-actions), :is(.record-editor,.saw-dialog) footer {
    grid-auto-flow: row;
    grid-template-columns: minmax(0,1fr);
    width: 100%;
  }
}