/* auth.css (PORTAUTH, hand-written, NOT generated): sign-in, forgot-password and reset-password on the ported storefront.
   Source of the look: design/mock/components/auth.css (da6c2fe). The mock rules are repeated here only for what these three Magento templates print;
   when the mock auth component enters bundles.json, regenerate and delete this file's duplicated block (see PORTAUTH README, "mock change").
   Tokens only (--c-*, --s-*, --p-*, --t-*): no literal colours. Loaded after the bundles by the devir_ported_auth handle. */
@layer components {
  /* ---- Layout (mock .dv-auth) ---- */
  .dv-auth { padding-block: var(--s-sp-5) var(--s-sp-8); }
  .dv-auth__grid { display: grid; gap: var(--s-sp-5); align-items: start; }
  .dv-auth__intro { position: relative; display: grid; gap: var(--s-sp-3); padding-block-end: var(--s-sp-4); border-block-end: var(--s-rule-w) solid var(--s-rule-strong); }
  .dv-auth__intro::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: calc(-1 * var(--c-tick-h)); width: var(--c-tick-w); height: var(--c-tick-h); background: var(--s-accent); }
  .dv-auth__eyebrow { font: var(--t-label); letter-spacing: var(--p-track-label); text-transform: uppercase; color: var(--s-text-muted); }
  .dv-auth__perks { display: none; }
  .dv-auth__perks li { display: flex; align-items: flex-start; gap: var(--s-sp-3); min-height: var(--s-target); padding-block: var(--s-sp-2); border-block-start: var(--s-rule-w) solid var(--p-white-a24); font: var(--t-body); }
  .dv-auth__perks .dv-icon { margin-block-start: var(--p-2); }
  .dv-auth__panel { display: grid; gap: var(--s-sp-5); min-width: 0; }
  .dv-auth__form { display: grid; gap: var(--s-sp-5); margin: 0; }
  .dv-auth__fields { display: grid; gap: var(--s-sp-4); }
  .dv-auth__actions { display: grid; gap: var(--s-sp-3); }
  .dv-auth__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-sp-1) var(--s-sp-4); }
  .dv-auth__links.is-end { justify-content: flex-end; }
  .dv-auth__links a, .dv-auth__alt a { display: inline-flex; align-items: center; min-height: var(--s-target); }
  .dv-auth__alt { display: grid; gap: var(--s-sp-1); padding-block-start: var(--s-sp-4); border-block-start: var(--s-rule-w) solid var(--s-rule); font: var(--t-small); }
  .dv-auth__alt .dv-t-heading-sm { font: var(--t-heading-sm); }
  .dv-auth__extra:empty { display: none; }
  .dv-auth [data-comp="form-field"] { min-width: 0; align-content: start; }

  /* ---- Password control with the eye toggle ---- */
  .dv-pass { position: relative; }
  .dv-pass .dv-field__input { padding-inline-end: calc(var(--s-target) + var(--s-sp-1)); }
  .dv-pass__toggle { position: absolute; inset-block-start: 50%; inset-inline-end: var(--p-2); transform: translateY(-50%); }
  .dv-pass__toggle:active { transform: translateY(-50%); }

  /* ---- Core Magento children printed inside form_additional_info (remember me, captcha, reCAPTCHA) ---- */
  .dv-auth__extra { display: grid; gap: var(--s-sp-4); }
  .dv-auth__extra .field { display: grid; gap: var(--s-sp-2); }
  .dv-auth__extra .field.choice { display: flex; align-items: center; gap: var(--s-sp-3); min-height: var(--s-target); }
  .dv-auth__extra .field.choice input[type="checkbox"] { width: var(--p-20); height: var(--p-20); margin: 0; accent-color: var(--c-btn-bg); border-radius: var(--s-radius); }
  .dv-auth__extra .label, .dv-auth__extra label { font: var(--t-small); }
  .dv-auth__extra input[type="text"], .dv-auth__extra input.input-text { width: 100%; height: var(--c-field-h); padding-inline: var(--s-sp-3); border: var(--s-rule-w) solid var(--c-field-edge); border-radius: var(--s-radius); background: var(--s-surface); color: var(--s-text); font: var(--t-body); }
  .dv-auth__extra .captcha-image { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sp-3); }
  .dv-auth__extra .captcha-img { border: var(--s-rule-w) solid var(--s-rule); border-radius: var(--s-radius); }
  .dv-auth__extra .captcha-reload { min-height: var(--s-target); padding-inline: var(--s-sp-4); border: var(--s-rule-w) solid var(--s-text); border-radius: var(--s-radius); background: transparent; color: var(--s-text); font: var(--t-small); cursor: pointer; }
  .dv-auth__extra .captcha-reload:hover { background: var(--s-text); color: var(--s-surface); }
  .dv-auth__extra img { max-width: 100%; height: auto; border-radius: var(--s-radius); }
  /* G-17: the core CAPTCHA reads as one more form field: label, input, then the image with a quiet text-link reload. */
  .dv-auth__extra .field.captcha > .label { display: block; }
  .dv-auth__extra .field.captcha.required > .label > span::after { content: none; }
  .dv-auth__extra .control.captcha { display: grid; gap: var(--s-sp-3); margin: 0; padding: 0; }
  .dv-auth__extra .control.captcha .nested { margin: 0; padding: 0; }
  .dv-auth__extra .field.captcha.no-label { display: block; margin: 0; padding: 0; }
  .dv-auth__extra .captcha-image { margin: 0; }
  .dv-auth__extra .captcha-img { display: block; background: var(--s-surface); }
  .dv-auth__extra .captcha-reload { border-color: transparent; padding-inline: 0; min-width: var(--s-target); text-decoration: underline; text-underline-offset: var(--p-4); }
  .dv-auth__extra .captcha-reload::before, .dv-auth__extra .captcha-reload::after { content: none; }
  .dv-auth__extra .captcha-reload:hover { background: transparent; color: var(--s-text); text-decoration-thickness: var(--s-rule-w-2); }

  /* ---- Validation (jQuery validate): inline error under the field, red border on the control ---- */
  .dv-auth .mage-error:not(input) { display: block; font: var(--t-small); color: var(--s-text-error); }
  .dv-auth input.mage-error, .dv-auth input[aria-invalid="true"] { border-color: var(--s-text-error); border-width: var(--s-rule-w-2); }
  .dv-auth .field-error { font: var(--t-small); color: var(--s-text-error); }

  /* ---- Password strength + rules (reset) ---- */
  /* The Magento strength meter stays in the DOM (the widget writes to it and it is a live region) but is read, not drawn: the mock shows the rules list instead. */
  .dv-auth #password-strength-meter-container { position: absolute; width: var(--p-1); height: var(--p-1); margin: calc(-1 * var(--p-1)); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .dv-rules { display: grid; gap: var(--p-2); padding: var(--s-sp-3) var(--s-sp-4); border: var(--s-rule-w) solid var(--s-rule); border-radius: var(--s-radius); background: var(--dv-well); }
  .dv-rules > p { font: var(--t-small); }
  .dv-rules ul { display: grid; gap: var(--p-2); margin: 0; padding: 0; list-style: none; }
  .dv-rules li { display: flex; align-items: center; gap: var(--s-sp-2); min-height: var(--p-24); font: var(--t-small); color: var(--s-text-muted); }
  .dv-rules li .dv-icon { width: var(--p-16); height: var(--p-16); }
  .dv-rules li .dv-rules__ok { display: none; }
  .dv-rules li.is-met { color: var(--s-text); }
  .dv-rules li.is-met .dv-rules__ok { display: block; }
  .dv-rules li.is-met .dv-rules__no { display: none; }
  .dv-rules__no { flex: none; border: var(--s-rule-w-2) solid currentColor; border-radius: var(--s-radius-dot); width: var(--p-12); height: var(--p-12); margin-inline: var(--p-2); }

  /* ---- Page messages (error after a wrong password, "account locked", success after reset): same look as the mock notices ---- */
  .dv-auth-page .page.messages { width: min(100% - 2 * var(--s-gutter), var(--s-wrap)); margin-inline: auto; padding-block-start: var(--s-sp-5); }
  .dv-auth-page .page.messages .messages { display: grid; gap: var(--s-sp-3); }
  .dv-auth-page .message { display: flex; align-items: flex-start; gap: var(--s-sp-3); padding: var(--s-sp-3) var(--s-sp-4); border: var(--s-rule-w) solid var(--s-edge); border-radius: var(--s-radius); background: var(--c-chip-info); color: var(--s-text); font: var(--t-body); }
  .dv-auth-page .message-error { background: var(--c-chip-out); }
  .dv-auth-page .message-success { background: var(--c-chip-in); }
  .dv-auth-page .message-warning, .dv-auth-page .message-notice { background: var(--c-chip-warn); }
  .dv-auth-page .message > * { margin: 0; }
  .dv-auth-page .message a { text-underline-offset: var(--p-4); }

  /* ---- Tablet and up: navy intro panel next to a bordered form panel ---- */
  @media (min-width: 768px) {
    .dv-auth { padding-block: var(--s-sp-7) var(--s-sp-9); }
    .dv-auth__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-sp-7); }
    .dv-auth__intro { align-content: start; padding: var(--s-sp-6); border: 0; background: var(--s-surface-navy); color: var(--s-text-on-dark); border-radius: var(--s-radius); }
    .dv-auth__intro::after { inset-inline-start: var(--s-sp-6); inset-block-end: auto; inset-block-start: 0; }
    .dv-auth__eyebrow { color: var(--s-text-on-dark-muted); }
    .dv-auth__perks { display: grid; margin: 0; padding: 0; list-style: none; }
    .dv-auth__intro :focus-visible { outline-color: var(--s-focus-on-dark); }
    .dv-auth__intro a { color: inherit; }
    .dv-auth__panel { padding: var(--s-sp-6); border: var(--s-rule-w) solid var(--s-rule); border-radius: var(--s-radius); background: var(--s-surface); }
  }
}