/* Shared controls — the plain button and the plain field, used across the app
   and on the sign-in page. Moved out of style.css unchanged; style.css imports
   this file LAST among its imports, which is the place these rules always had
   in the cascade (after every page sheet, before the rest of style.css).
   DESIGN.md "Buttons and fields" is the contract; feature styles refine these
   rather than redefining them. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--field-border);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0.65rem;
  padding: 0.7rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.btn-block {
  display: flex;
  width: 100%;
}
.btn:hover { border-color: var(--muted); }
.btn:focus-visible {
  outline: 2px solid var(--accent-edge); outline-offset: 2px;
}
.input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.btn.primary {
  /* --accent-fill, not --clay: see tokens.css. Sage's clay is a mid-tone that
     fails AA under white text; the fill is darkened, the accent is not. */
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-accent);
}
.btn.primary:hover { background: color-mix(in srgb, var(--accent-fill) 88%, #000); }

.input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0.6rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
}
.input:focus {
  outline: none;
  border-color: var(--accent-edge);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 20%, transparent);
}