/* Account pages (/Account/RequestLink, /Account/Verify) -- restyled to
   match the design system. The _Layout redesign (8e2a812) matched the
   shell but deliberately left these two pages' own bodies on Bootstrap so
   their markup kept working; this closes that gap. Consumes
   owner-shell.css's tokens/.owner-h1/.owner-label/.owner-btn/.owner-alert
   -- this file only adds what's specific to these two screens: the field
   stack/input styling (same values as owner-salon-details.css's own,
   duplicated rather than shared across sibling screen stylesheets, same
   precedent that file's own comment already establishes).

   .panel/.panel-shell themselves (site.css) are deliberately NOT touched
   here -- the centred white card stays exactly as it was, the one place
   in the product where a card is right. Only what sits inside it changed. */

.owner-heading {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

/* Same top-spacing utility as every other redesigned screen's own
   .owner-mt (owner-stylists.css, owner-salon-details.css,
   owner-create-salon.css) -- duplicated rather than moved into
   owner-shell.css, same reasoning as those files' own comments on this
   exact class. */
.owner-mt {
  margin-top: 1.375rem;
}

.owner-field-stack {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.owner-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.owner-field input {
  display: block;
  width: 100%;
  padding: 0 0.9375rem;
  height: 3rem;
  background: var(--owner-surface);
  border: 1px solid var(--owner-border-input);
  font-family: var(--owner-font-sans);
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--owner-text);
  box-sizing: border-box;
}

.owner-field input:focus {
  outline: none;
  border-color: var(--owner-accent);
}

.owner-field__hint {
  margin: 0;
  font-size: 0.71875rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--owner-text-faint);
}

.owner-save-btn {
  margin-top: 0.5rem;
}

/* Story 54: the quiet links under the sign-in and owner set-up buttons
   ("Setting up a new salon? Use your invite code." / "Already have an
   account? Sign in."). Centred and small, with a tap target of at least
   44px so it is never crowded by the button above it at 375px. */
.owner-quiet-links {
  margin: 0.75rem 0 0;
  text-align: center;
}

.owner-quiet-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--owner-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.owner-quiet-link:hover,
.owner-quiet-link:focus-visible {
  color: var(--owner-accent);
}