/* Air Market - store-v7-auth.css
 * ==========================================================================
 * Styles the sign-in / sign-up dialog built by assets/js/session.js.
 *
 * Deliberately small: the dialog itself, its label/input rows and its submit
 * button are window.UI's existing Dialog, Field and Button component classes
 * (assets/css/components.css) - this file only adds the handful of rules
 * that component kit does not already carry:
 *
 *   1. Hides Field's ownership badge ("authored"/"measured"/...) inside this
 *      form. That badge is a studio concept - is this value typed by a
 *      creator or measured by the store (10.1)? - and does not apply to an
 *      email address or a password, so showing it here would be exactly the
 *      unexplained jargon REDESIGN.md §10 rules out.
 *   2. Recolors Field's warning line/icon from amber to the critical
 *      (red) status tokens when it is carrying a validation error rather
 *      than a warning - the component kit has a warning state, not an error
 *      state, and a wrong password is an error.
 *   3. Lays out the form itself (the field stack, the submit button, the
 *      mode-switch line) and a small alert banner for a failure that is not
 *      about one field (wrong password, rate limited, no server).
 *
 * Every colour, spacing and radius value below is a custom property from
 * assets/css/tokens.css - none of them is a new value invented here.
 * Loaded after assets/css/store-v6-studio.css and before links.css, exactly
 * where index.html's own comment says the v6 sheets sit (amendment A2's "one
 * feature, one CSS file" - this is that file for the auth feature).
 * ========================================================================== */

.v7-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.v7-auth-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Rule 1: no ownership badge on an email or a password field. */
.v7-auth-form .ui-field-own { display: none; }
.v7-auth-form .ui-field-head { justify-content: flex-start; }

/* A field carrying a validation error: the input's own border goes critical,
   in step with the message below it. */
.v7-auth-form .ui-field-input[aria-invalid="true"] {
  border-color: var(--color-status-critical-border);
}
.v7-auth-form .ui-field-input[aria-invalid="true"]:focus-visible {
  border-color: var(--color-status-critical);
}

/* Rule 2: Field's warning line, recoloured critical. Selector specificity
   matches assets/css/components.css's .ui-field-warn .ic rule; the extra
   .v7-auth-form ancestor keeps this from leaking into the studio's own use
   of the same warning line, where amber is the right colour. */
.v7-auth-form .ui-field-warn {
  color: var(--color-status-critical-fg-strong);
}
.v7-auth-form .ui-field-warn .ic {
  color: var(--color-status-critical);
}

.v7-auth-submit {
  width: 100%;
}

/* "Continue with Google". An anchor wearing the button class, so it needs the
   centring a <button> gets for free. The mark keeps its own colours - Google's
   branding guidance does not permit recolouring it - which is why nothing here
   sets a fill. */
.v7-auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
  text-decoration: none;
}

.v7-auth-google-mark {
  flex: none;
}

/* The "or" between the two ways in. The rules are drawn with a border on a
   pseudo-element either side rather than a background gradient so they follow
   the theme's border token in both light and dark. */
.v7-auth-or {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  color: var(--color-text-secondary);
}

.v7-auth-or::before,
.v7-auth-or::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--color-border-subtle);
}

.v7-auth-switch {
  margin: 0;
  text-align: center;
  font-family: var(--font-main);
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  color: var(--color-text-secondary);
}

.v7-auth-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--color-text-link);
  cursor: pointer;
}
.v7-auth-link:hover { text-decoration: underline; }
.v7-auth-link:focus-visible {
  outline: none;
  text-decoration: underline;
  border-radius: var(--radius-xs);
}

/* The one banner this dialog can show: a failure that does not belong beside
   a single field (wrong password, too many attempts, no server reachable).
   role="alert" on the element (assets/js/session.js) makes this an assertive
   live region, so a screen reader announces it the moment it is inserted. */
.v7-auth-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12);
  border: 1px solid var(--color-status-critical-border);
  border-radius: var(--radius-sm);
  background: var(--color-status-critical-bg);
  color: var(--color-status-critical-fg-strong);
  font-family: var(--font-main);
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
}
.v7-auth-banner p { margin: 0; }
.v7-auth-banner:focus-visible,
.v7-auth-banner:focus { outline: none; }

/* The request id (server/src/lib/errors.js `instance`): the one string a
   person can hand over that finds the log line. Quieter than the message
   above it, and monospace so it reads as an identifier, not prose. */
.v7-auth-ref {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  opacity: 0.85;
}

/* What a destructive mode says before it asks for the password. Deliberately
   NOT the critical banner treatment above: that red box means "something went
   wrong just now", and reusing it for text that is merely serious would spend
   the one colour this dialog has for real failures. Prose, at reading weight,
   with the consequence in the first sentence. */
.v7-auth-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  font-family: var(--font-main);
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  color: var(--color-text-secondary);
}
.v7-auth-note p { margin: 0; }
.v7-auth-note p:first-child { color: var(--color-text-primary); }