/* =============================================================================
   A1-A7 · Auth screens
   Ports to: app/assets/stylesheets/marketing/auth.css

   layouts/auth.html.erb loads BOTH the marketing bundle AND the app's Tailwind
   build, so these screens already consume the app's component classes. This file
   re-declares those SAME names in v2 rather than inventing an auth-only set, per
   brief §5.2: .card, .form-group, .form-control, .btn-secondary, .btn-expanded,
   .email-chip, .step-dots, .role-pick, .alert.

   On port, most of this file becomes unnecessary: the Tailwind build supplies
   the components and broker-v2.css supplies the v2 shape. What must survive is
   the .auth-* chrome and the additions marked NEW below.

   TYPE: compact product scale (--text-*), not the editorial one. These screens
   sit beside the dashboards, and a visitor moving from /explore to sign-in must
   not feel a type jump.
   ============================================================================= */

/* ═══ CHROME ════════════════════════════════════════════════════════════════
   Logo-only top bar, centred card, toast host. No nav, no footer. */
.auth-body { min-height: 100vh; background: var(--surface-quiet); display: flex; flex-direction: column; }
.auth-top { display: flex; align-items: center; padding: var(--sp-5) var(--sp-8); }
.auth-top__logo { display: inline-flex; }
/* Width-driven, and the FULL lockup with its tagline: this is the brand's front
   door and .auth-top's height is set by its own padding, so there is room. Was
   `height: 24px`, sized for the old two-line logo, which rendered the new
   three-line lockup's tagline at about 4px. See shared/_wordmark.html.erb. */
.auth-top__logo .da-wordmark { width: 190px; }
/* Centring via `align-items: center` cannot be corrected by padding: when the
   card outgrows the padded content box the overflow is symmetric, so the bottom
   padding stops reserving anything and content lands under the fixed state bar.
   Body padding does not help either, because .auth-body is min-height:100vh and
   the centring box is that, not the document.
   Auto margins on the ITEM resolve against the content box and cannot overflow
   the start edge, so the card centres when there is room and sticks to the top
   when there is not, with padding-bottom reliably reserved either way. */
.auth-main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: var(--sp-4) var(--sp-4) var(--sp-16); }
.auth-col { width: 100%; max-width: 28rem; margin: auto; }
.auth-col--wide { max-width: 32rem; }
@media (max-width: 640px) {
  .auth-top { padding: var(--sp-4) var(--sp-5); }
  .auth-top__logo .da-wordmark { width: 165px; }
  .auth-main { padding: 0 var(--sp-4) var(--sp-10); }
  .auth-col { margin-top: 0; }
}

/* ═══ CARD ══════════════════════════════════════════════════════════════════ */
.card { background: var(--surface); border: none; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--sp-8); }
@media (min-width: 641px) { .card { padding: var(--sp-10); } }
@media (max-width: 480px) { .card { padding: var(--sp-6); } }

.auth-head { margin-bottom: var(--sp-6); }
.auth-head h2 { margin: 0 0 5px; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tk-tight); color: var(--text); }
.auth-head p { margin: 0; font-size: var(--text-md); line-height: var(--lh-body); color: var(--text-tertiary); }
.auth-head--center { text-align: center; }
.auth-foot { margin: var(--sp-5) 0 0; text-align: center; font-size: var(--text-md); color: var(--text-tertiary); }
.auth-foot a { font-weight: var(--fw-semibold); color: var(--text); }
.auth-foot a:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }

/* The "not you?" escape from an invited signup posts, so it cannot be an anchor.
   Scoped to its own form: an unscoped `.auth-foot button` would strip the
   border, padding and background off any button dropped into any auth footer. */
.auth-foot__inline { display: inline; }
.auth-foot__inline button { border: 0; padding: 0; background: none; font-family: inherit; font-size: inherit; line-height: inherit; font-weight: var(--fw-semibold); color: var(--text); cursor: pointer; }
.auth-foot__inline button:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.auth-step { margin: var(--sp-5) 0 0; text-align: center; font-size: var(--text-sm); color: var(--text-tertiary); }

/* Icon tile / circle above the heading (forgot + reset password). */
.auth-icon-tile { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-input); background: var(--gray-50); color: var(--text); margin-bottom: var(--sp-5); }
.auth-icon-tile .ico { --ico: 21px; }
.auth-icon-circle { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto var(--sp-5); border-radius: var(--radius-pill); background: var(--brand-50); }
.auth-icon-circle__icon { --ico: 26px; color: var(--brand-700); }

/* ═══ BACK LINK ═════════════════════════════════════════════════════════════ */
.auth-back { display: inline-flex; align-items: center; gap: 5px; margin-bottom: var(--sp-3); font-size: var(--text-base); color: var(--text-tertiary); }
.auth-back:hover { color: var(--text-secondary); }
.auth-back .ico { --ico: 16px; }

/* ═══ FORM COMPONENTS — app names, v2 values ════════════════════════════════ */
.form-group { margin-bottom: var(--sp-4); }
.form-group:last-child { margin-bottom: 0; }
.form-group > label { display: block; margin-bottom: 6px; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.form-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: 6px; }
.form-label-row > label { margin: 0; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.form-label-row a { font-size: var(--text-sm); color: var(--text-secondary); }
.form-label-row a:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }

.form-control {
  display: block; width: 100%; height: 46px; padding: 0 14px;
  background: var(--surface); color: var(--text);
  border: var(--border-input) solid var(--hairline); border-radius: var(--radius-input);
  font-family: var(--font-sans); font-size: var(--text-md);
  transition: border-color var(--dur-menu) var(--ease-out), box-shadow var(--dur-menu) var(--ease-out);
}
.form-control::placeholder { color: var(--text-tertiary); }
.form-control:focus { outline: none; border-color: var(--focus-border); box-shadow: var(--focus-ring); }
.form-control:read-only { background: var(--gray-50); color: var(--text-secondary); }
.form-control--pr { padding-right: 44px; }
.form-hint { margin: 7px 0 0; font-size: var(--text-sm); line-height: var(--lh-body); color: var(--text-tertiary); }

/* Invalid state. NEW: the app has .form-control but no error treatment on it. */
.form-group.is-invalid .form-control { border-color: var(--status-danger-text); }
.form-group.is-invalid .form-control:focus { box-shadow: 0 0 0 3px var(--status-danger-bg); }
.form-error { display: none; align-items: center; gap: 5px; margin: 7px 0 0; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--status-danger-text); }
.form-group.is-invalid .form-error { display: flex; }
.form-error .ico { --ico: 15px; flex: 0 0 auto; }

/* Reveal toggle inside a password field. */
.form-reveal { position: relative; }
.form-reveal__btn { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; padding: 0 13px; border: 0; background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: 0 var(--radius-input) var(--radius-input) 0; }
.form-reveal__btn:hover { color: var(--text-secondary); }
.form-reveal__btn .ico { --ico: 19px; }

/* Password-match indicator. */
.pw-match { display: none; align-items: center; gap: 5px; margin: 7px 0 0; font-size: var(--text-sm); }
.pw-match.is-on { display: flex; }
.pw-match .ico { --ico: 14px; }
.pw-match--yes { color: var(--status-success-text); font-weight: var(--fw-medium); }
.pw-match--no { color: var(--text-tertiary); }

/* ═══ BUTTONS — app names ═══════════════════════════════════════════════════ */
.btn-expanded { width: 100%; }
.btn-secondary { background: var(--action-quiet-bg); color: var(--text); }
.btn-secondary:hover { background: var(--action-quiet-hover); color: var(--text); }
.btn-secondary .gmark { width: 18px; height: 18px; flex: 0 0 auto; }

/* ═══ "OR CONTINUE WITH EMAIL" RULE ═════════════════════════════════════════ */
.auth-rule { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-4) 0; }
.auth-rule::before, .auth-rule::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.auth-rule span { flex: 0 0 auto; font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tk-eyebrow); text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; }

/* ═══ EMAIL CHIP ════════════════════════════════════════════════════════════ */
/* ── Invitation summary ─────────────────────────────────────────────────
   Read-back of what the inviting broker already supplied. Label/value rows
   rather than form fields: accepting an invitation is a yes/no. */
.auth-summary { border-radius: var(--radius-tile); background: var(--gray-50); padding: var(--sp-2) 0; margin-bottom: var(--sp-4); }
.auth-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: 9px 14px; }
.auth-summary__label { flex: 0 0 auto; font-size: var(--text-sm); color: var(--text-tertiary); }
.auth-summary__value { min-width: 0; text-align: right; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text); overflow-wrap: anywhere; }
.auth-summary__note { margin: 0 0 var(--sp-5); font-size: var(--text-sm); color: var(--text-tertiary); }

.email-chip { display: flex; align-items: center; gap: var(--sp-2); max-width: 100%; padding: 6px 6px 6px 13px; border-radius: var(--radius-pill); background: var(--gray-50); font-size: var(--text-base); color: var(--text); margin-bottom: var(--sp-5); }
.email-chip .ico { --ico: 16px; color: var(--text-tertiary); flex: 0 0 auto; }
.email-chip__email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-chip__change { flex: 0 0 auto; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-card); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text); }
.email-chip__change:hover { background: var(--gray-50); color: var(--text); }

/* ═══ STEP DOTS ═════════════════════════════════════════════════════════════ */
.step-dots { display: flex; gap: 6px; margin-bottom: var(--sp-6); }
.step-dots__dot { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--gray-200); }
.step-dots__dot--active { background: var(--brand-500); }
.step-dots__dot--done { background: var(--brand-700); }

/* ═══ ROLE PICKER ═══════════════════════════════════════════════════════════ */
.role-label { margin: 0 0 var(--sp-2); font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.role-grid { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.role-pick { display: block; cursor: pointer; }
.role-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.role-pick__inner { display: flex; align-items: center; gap: var(--sp-3); padding: 13px 14px; border-radius: var(--radius-tile); background: var(--gray-50); transition: background-color var(--dur-hover-out) linear, box-shadow var(--dur-lift) var(--ease-out); }
.role-pick:hover .role-pick__inner { background: var(--gray-100); }
.role-pick__icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: var(--surface); color: var(--text-secondary); }
.role-pick__icon .ico { --ico: 18px; }
.role-pick__body { flex: 1; min-width: 0; }
.role-pick__title { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text); }
.role-pick__sub { display: block; margin-top: 1px; font-size: var(--text-sm); color: var(--text-tertiary); }
.role-pick__check { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--action-bg); color: var(--white); opacity: 0; transition: opacity var(--dur-menu) var(--ease-out); }
.role-pick__check .ico { --ico: 12px; }
.role-pick:has(:checked) .role-pick__inner, .role-pick--locked .role-pick__inner { background: var(--surface-tint); }
.role-pick:has(:checked) .role-pick__icon, .role-pick--locked .role-pick__icon { background: var(--action-bg); color: var(--white); }
.role-pick:has(:checked) .role-pick__title, .role-pick--locked .role-pick__title { color: var(--brand-900); }
.role-pick:has(:checked) .role-pick__sub, .role-pick--locked .role-pick__sub { color: var(--brand-700); }
.role-pick:has(:checked) .role-pick__check, .role-pick--locked .role-pick__check { opacity: 1; }
.role-pick:has(:focus-visible) .role-pick__inner { box-shadow: var(--focus-ring); }
.role-pick--locked { cursor: default; }

/* ═══ ALERT — app name, v2 values. No left-accent stripe. ═══════════════════ */
.alert { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 13px 15px; border-radius: var(--radius-tile); margin-bottom: var(--sp-4); font-size: var(--text-base); line-height: var(--lh-body); }
.alert .ico { --ico: 17px; flex: 0 0 auto; margin-top: 1px; }
.alert strong { display: block; font-weight: var(--fw-semibold); }
.alert-danger { background: var(--status-danger-bg); color: var(--status-danger-text); }
.alert-warning { background: var(--status-warning-bg); color: var(--status-warning-text); }
.alert-info { background: var(--status-info-bg); color: var(--status-info-text); }
.alert-success { background: var(--status-success-bg); color: var(--status-success-text); }

/* ═══ TERMS ACCEPTANCE ══════════════════════════════════════════════════════ */
.tos-accept { display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.tos-accept input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; border: var(--border-input) solid var(--gray-300); border-radius: 5px; background: var(--surface); cursor: pointer; position: relative; }
.tos-accept input[type="checkbox"]:checked { background: var(--action-bg); border-color: var(--action-bg); }
.tos-accept input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tos-accept input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tos-accept label { margin: 0; font-size: var(--text-base); line-height: var(--lh-body); color: var(--text-secondary); cursor: pointer; }
.tos-accept a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.tos-accept.is-invalid input[type="checkbox"] { border-color: var(--status-danger-text); }

.form-picker-group { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.form-picker-group input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 17px; height: 17px; border: var(--border-input) solid var(--gray-300); border-radius: 5px; background: var(--surface); cursor: pointer; position: relative; }
.form-picker-group input[type="checkbox"]:checked { background: var(--action-bg); border-color: var(--action-bg); }
.form-picker-group input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.form-picker-group label { margin: 0; font-size: var(--text-base); color: var(--text-secondary); cursor: pointer; }

.auth-legal { margin: var(--sp-5) 0 0; text-align: center; font-size: var(--text-sm); line-height: var(--lh-body); color: var(--text-tertiary); }
.auth-legal a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }

/* ═══ A7 · OTP CODE ENTRY — NEW ═════════════════════════════════════════════
   No view exists for this today (the 2FA challenge is wired in
   users/sessions_controller#authenticate_and_start_two_factor but never got a
   template), so the whole screen is new. Six single-character boxes rather than
   one text field: it is the pattern a 6-digit code implies, and it makes
   paste-and-fill and per-character error state possible. */
.otp-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.otp-cell {
  flex: 1; min-width: 0; height: 58px; padding: 0; text-align: center;
  background: var(--surface); color: var(--text);
  border: var(--border-input) solid var(--hairline); border-radius: var(--radius-input);
  font-family: var(--font-display); font-size: var(--e-stat); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-menu) var(--ease-out), box-shadow var(--dur-menu) var(--ease-out);
}
.otp-cell::-webkit-outer-spin-button, .otp-cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.otp-cell:focus { outline: none; border-color: var(--focus-border); box-shadow: var(--focus-ring); }
.otp-cell[data-filled="true"] { border-color: var(--brand-200); }
.otp-row.is-invalid .otp-cell { border-color: var(--status-danger-text); }
@media (max-width: 400px) { .otp-cell { height: 50px; font-size: var(--e-card-title); } }

.otp-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); font-size: var(--text-sm); color: var(--text-tertiary); }
.otp-meta button { border: 0; background: transparent; padding: 0; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--brand-700); cursor: pointer; }
.otp-meta button:disabled { color: var(--text-quaternary); cursor: default; }
.otp-escape { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: var(--border-hairline) solid var(--hairline); }
.otp-escape summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--brand-700); cursor: pointer; }
.otp-escape summary::-webkit-details-marker { display: none; }
.otp-escape summary::marker { content: ""; }
.otp-escape summary .ico { --ico: 15px; transition: transform var(--dur-menu) var(--ease-out); }
.otp-escape[open] summary .ico { transform: rotate(180deg); }
.otp-escape__body { margin-top: var(--sp-4); }
.otp-escape__body p { margin: 0 0 var(--sp-3); font-size: var(--text-base); line-height: var(--lh-body); color: var(--text-tertiary); }

/* ═══ SUCCESS PANEL ════════════════════════════════════════════════════════ */
.auth-sent { text-align: center; }
.auth-sent__body { margin: 0 auto var(--sp-6); max-width: 320px; font-size: var(--text-md); line-height: var(--lh-body); color: var(--text-tertiary); }
.auth-sent__body strong { color: var(--text); font-weight: var(--fw-semibold); }

/* ═══════════════════════════════════════════════════════════════════════════
   TOKEN RE-ASSERTION — load order, not a design decision.

   layouts/auth.html.erb loads the Tailwind build AFTER the marketing bundle,
   because the devise views use Tailwind utilities for layout. Tailwind's
   themes/light.css declares --bg-primary: #205E3A and the rest of the pre-v2
   role tokens at :root, so it silently reverts every brand token the marketing
   token file had already set, and the sign-in button rendered forest green.

   Re-stated here on .auth-body, which this file is only ever loaded beside, so
   the override is scoped to auth and cannot reach a dashboard.
   ═══════════════════════════════════════════════════════════════════════════ */
.auth-body {
  --bg-primary:         var(--action-bg);
  --bg-primary-hover:   var(--action-bg-hover);
  --text-on-primary:    var(--white);
  --border-primary:     var(--action-bg);
  --text-primary:       var(--brand-700);
  --text-primary-hover: var(--brand-600);
  --base-border-focus:  var(--brand-500);
  --color-brand-green:  var(--brand-500);
  --bg-secondary:       var(--surface);
  --bg-secondary-hover: var(--gray-50);
  --text-on-secondary:  var(--text);
  --border-secondary:   var(--hairline);
  --base-text:           var(--text);
  --base-text-secondary: var(--text-secondary);
  --base-text-tertiary:  var(--text-tertiary);
  --base-bg-low:         var(--surface);
  --divider-color:       var(--hairline);
}