/* Button vocabulary: the bundled app (base.css) and static landing page (templates/landing.html) use this
   same file. .btn handles shape only. Adding colors here makes combinations such as .btn.btn-ghost
   override only the secondary action's text color while retaining the primary background, producing black
   text on burgundy. For the same reason, every variant explicitly sets both background and text color on
   hover. In React, use the kit's <Button>/buttonClass() rather than writing markup directly. */

.btn,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-height);
  padding: 0 16px;
  /* Always use a 1px border (including transparent borders) so every button has the same box height. */
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--btn-font);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.btn-solid {
  background: var(--accent);
  box-shadow: var(--btn-solid-shadow);
  color: #fff;
}
.btn-solid:hover:not(:disabled) {
  background: var(--accent-dark);
  box-shadow: var(--btn-solid-shadow-hover);
  color: #fff;
}
.btn-ghost {
  border-color: transparent;
  background: var(--field-bg);
  box-shadow: var(--field-shadow);
  color: var(--ink);
}
.btn-ghost:hover:not(:disabled) {
  border-color: transparent;
  background: var(--field-bg-hover);
  box-shadow: var(--field-shadow-hover);
  color: var(--ink);
}
.btn:focus-visible,
.btn-ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn:disabled,
.btn-ghost:disabled {
  background: var(--bg-elev);
  color: var(--ink-3);
  border-color: transparent;
  cursor: default;
  opacity: 0.7;
  box-shadow: none;
}
/* Disabled secondary buttons share the hatched disabled-field surface. */
.btn-ghost:disabled {
  background: var(--field-disabled-bg);
  border-color: transparent;
  box-shadow: none;
}
/* Keep display:inline-flex from overriding the hidden attribute; conditional rendering is preferred, but this is a safeguard. */
.btn[hidden],
.btn-ghost[hidden] {
  display: none;
}
.btn svg,
.btn-ghost svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}
/* Tone variants: apply only one on top of .btn. */
.btn-danger {
  background: color-mix(in srgb, var(--bad), transparent 94%);
  color: var(--bad);
  border-color: transparent;
  box-shadow: var(--field-shadow);
}
.btn-danger:hover:not(:disabled) {
  box-shadow: var(--field-shadow-hover);
  background: color-mix(in srgb, var(--bad), transparent 88%);
  color: var(--bad);
}
.btn-warning {
  background: color-mix(in srgb, var(--warn), transparent 90%);
  color: var(--warn);
  border-color: transparent;
  box-shadow: var(--field-shadow);
}
.btn-warning:hover:not(:disabled) {
  box-shadow: var(--field-shadow-hover);
  background: color-mix(in srgb, var(--warn), transparent 84%);
  color: var(--warn);
}
.btn-success {
  background: color-mix(in srgb, var(--ok), transparent 92%);
  color: var(--ok);
  border-color: transparent;
  box-shadow: var(--field-shadow);
}
.btn-success:hover:not(:disabled) {
  box-shadow: var(--field-shadow-hover);
  background: color-mix(in srgb, var(--ok), transparent 86%);
  color: var(--ok);
}
/* Secondary action on the dark hero (landing page). */
.btn-inv {
  border-color: color-mix(in srgb, #fff, transparent 55%);
  background: transparent;
  color: #fff;
}
.btn-inv:hover:not(:disabled) {
  border-color: #fff;
  background: color-mix(in srgb, #fff, transparent 92%);
  color: #fff;
}
.btn-lg {
  min-height: 56px;
  padding: 0 32px;
  font-size: 16px;
}
.btn-lg svg {
  width: 16px;
  height: 16px;
}
/* Size modifiers. */
.btn-sm {
  min-height: var(--btn-sm-height);
  padding: 0 12px;
  font-size: var(--btn-sm-font);
}
.btn-xs {
  min-height: 26px;
  padding: 0 8px;
  font-size: 11.5px;
}
.btn-sm svg,
.btn-xs svg {
  width: 12px;
  height: 12px;
}
.btn-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

button:is(:hover,:focus-visible),.btn:is(:hover,:focus-visible),.btn-ghost:is(:hover,:focus-visible){text-decoration:none}