/*
 * UI v2 — sign-in and account screens (issue #1014; design-v3 03-Belepes,
 * 04-Sajat-nevre, 05-Jelszo). Served and injected only with QQ_UI_V2; every
 * selector is scoped under html.ui-v2 (tools/ui-v2-flag-contract_test).
 *
 * Style only: the established DOM keeps its ids, form names, handlers and
 * auth logic (login, registration, invite code, password reset, the guest's
 * "save under your own name" sheet at send, the paywall cards). Values come
 * from the mg- tokens in mg.css and follow decisions D1–D17: 48px targets,
 * screen title 28/800, selection = ink, green = do / done, clay never a status.
 */

/* ---------- shared form parts (login, registration, reset, guest save) ---------- */
html.ui-v2 #view-auth, html.ui-v2 #phase2-overlay { font-family: var(--font-mg-sans); color: var(--mg-text-primary); -webkit-font-smoothing: antialiased; }
html.ui-v2 #view-auth label, html.ui-v2 #phase2-overlay label { margin: var(--mg-space-14) 0 5px; font-size: 13px; font-weight: 600; color: var(--mg-text-secondary); }
html.ui-v2 #view-auth label .muted, html.ui-v2 #phase2-overlay label .muted { font-size: 13px; font-weight: 400; color: var(--mg-text-muted); }
html.ui-v2 #view-auth input:not([type="checkbox"]), html.ui-v2 #view-auth select, html.ui-v2 #view-auth textarea, html.ui-v2 #phase2-overlay input:not([type="checkbox"]), html.ui-v2 #phase2-overlay select, html.ui-v2 #phase2-overlay textarea {
  min-height: var(--mg-touch-min); padding: 0 var(--mg-space-14); border: 1.5px solid var(--mg-border-control);
  border-radius: var(--mg-radius-input); background-color: var(--mg-bg-card); color: var(--mg-text-primary);
  font-family: inherit; font-size: 16px;
}
html.ui-v2 #view-auth textarea, html.ui-v2 #phase2-overlay textarea { padding: var(--mg-space-12) var(--mg-space-14); min-height: 96px; }
html.ui-v2 #view-auth select, html.ui-v2 #phase2-overlay select { padding-right: 40px; }
html.ui-v2 #view-auth input::placeholder, html.ui-v2 #view-auth select::placeholder, html.ui-v2 #view-auth textarea::placeholder, html.ui-v2 #phase2-overlay input::placeholder, html.ui-v2 #phase2-overlay select::placeholder, html.ui-v2 #phase2-overlay textarea::placeholder { color: var(--mg-text-muted); opacity: 1; }
html.ui-v2 #view-auth input:focus, html.ui-v2 #view-auth select:focus, html.ui-v2 #view-auth textarea:focus, html.ui-v2 #phase2-overlay input:focus, html.ui-v2 #phase2-overlay select:focus, html.ui-v2 #phase2-overlay textarea:focus { outline: 3px solid var(--mg-focus-ring); outline-offset: 1px; border-color: var(--mg-border-control); }
html.ui-v2 #view-auth input[readonly], html.ui-v2 #phase2-overlay input[readonly] { background-color: var(--mg-bg-sunken); color: var(--mg-text-secondary); }
html.ui-v2 #view-auth .row, html.ui-v2 #phase2-overlay .row { gap: 0 var(--mg-space-12); }
html.ui-v2 #view-auth .tax-hint, html.ui-v2 #phase2-overlay .tax-hint { display: block; margin-top: var(--mg-space-4); font-size: 14px; font-weight: 600; color: var(--mg-danger); }
html.ui-v2 #view-auth .tax-hint:empty, html.ui-v2 #phase2-overlay .tax-hint:empty { display: none; }

/* Checkbox rows (terms): the whole row is the 48px target; checked = ink (D1). */
html.ui-v2 #view-auth label.check, html.ui-v2 #phase2-overlay label.check { display: flex; align-items: flex-start; gap: var(--mg-space-12); min-height: var(--mg-touch-min); margin: var(--mg-space-14) 0 0; padding: var(--mg-space-12) 0; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--mg-text-on-tint); cursor: pointer; }
html.ui-v2 #view-auth label.check input[type="checkbox"], html.ui-v2 #phase2-overlay label.check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; min-height: 24px; flex: none; margin: 0;
  border: 1.5px solid var(--mg-border-control); border-radius: 6px; background: var(--mg-bg-card); cursor: pointer;
}
html.ui-v2 #view-auth label.check input[type="checkbox"]:checked, html.ui-v2 #phase2-overlay label.check input[type="checkbox"]:checked {
  border-color: var(--mg-selected);
  background: var(--mg-selected) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
html.ui-v2 #view-auth label.check input[type="checkbox"]:focus-visible, html.ui-v2 #phase2-overlay label.check input[type="checkbox"]:focus-visible { outline: 3px solid var(--mg-focus-ring); outline-offset: 2px; }
html.ui-v2 #view-auth label.check a, html.ui-v2 #phase2-overlay label.check a { color: var(--mg-action); font-weight: 600; }

/* Buttons: primary = mg-btn (green, "do"), ghost = mg-btn-sec, text = mg-link. */
html.ui-v2 #view-auth .btn-row, html.ui-v2 #phase2-overlay .btn-row { gap: var(--mg-space-8); margin-top: var(--mg-space-16); }
html.ui-v2 #view-auth button.btn, html.ui-v2 #phase2-overlay button.btn {
  min-height: var(--mg-cta-height); width: 100%; padding: 0 var(--mg-space-16); border: none; border-radius: var(--mg-radius-control);
  background: var(--mg-action); color: var(--mg-on-action); font-family: inherit; font-size: 17px; font-weight: 700; box-shadow: var(--mg-shadow-cta);
  transition: transform var(--mg-motion-fast) var(--mg-ease-standard), background-color var(--mg-motion-fast) var(--mg-ease-standard);
}
html.ui-v2 #view-auth button.btn.ghost, html.ui-v2 #phase2-overlay button.btn.ghost {
  min-height: 52px; border: 1.5px solid var(--mg-border-control); background: var(--mg-bg-card); color: var(--mg-text-primary);
  font-size: 15px; font-weight: 600; box-shadow: none;
}
html.ui-v2 #view-auth button.btn[disabled], html.ui-v2 #phase2-overlay button.btn[disabled] { opacity: 1; background: var(--mg-action-disabled); color: var(--mg-on-action-disabled); box-shadow: none; cursor: not-allowed; }
html.ui-v2 #view-auth button.btn:active:not([disabled]), html.ui-v2 #phase2-overlay button.btn:active:not([disabled]) { transform: scale(.98); }
html.ui-v2 #view-auth button.btn:focus-visible, html.ui-v2 #phase2-overlay button.btn:focus-visible { outline: 3px solid var(--mg-focus-ring); outline-offset: 2px; }
html.ui-v2 #view-auth .linkbtn, html.ui-v2 #phase2-overlay .linkbtn {
  min-height: var(--mg-touch-min); padding: 0 var(--mg-space-6); border-radius: var(--mg-radius-input); color: var(--mg-action);
  font-family: inherit; font-size: 15px; font-weight: 600; text-decoration: none;
  transition: transform var(--mg-motion-fast) var(--mg-ease-standard), background-color var(--mg-motion-fast) var(--mg-ease-standard);
}
html.ui-v2 #view-auth .linkbtn:active, html.ui-v2 #phase2-overlay .linkbtn:active { transform: scale(.98); }
html.ui-v2 #view-auth .linkbtn:focus-visible, html.ui-v2 #phase2-overlay .linkbtn:focus-visible { outline: 3px solid var(--mg-focus-ring); outline-offset: 2px; }
@media (hover: hover) {
  html.ui-v2 #view-auth button.btn:hover:not([disabled]):not(.ghost), html.ui-v2 #phase2-overlay button.btn:hover:not([disabled]):not(.ghost) { background: color-mix(in srgb, var(--mg-action), var(--mg-ink-950) 6%); }
  html.ui-v2 #view-auth button.btn.ghost:hover:not([disabled]), html.ui-v2 #phase2-overlay button.btn.ghost:hover:not([disabled]) { background: var(--mg-bg-subtle); border-color: var(--mg-ink-700); }
  html.ui-v2 #view-auth .linkbtn:hover, html.ui-v2 #phase2-overlay .linkbtn:hover { background: var(--mg-bg-subtle); text-decoration: underline; }
}

/* Form messages next to a field (showAccountFieldErrors) and the sheet's banner. */
html.ui-v2 #view-auth .msg, html.ui-v2 #phase2-overlay .msg { border-radius: var(--mg-radius-input); font-size: 14px; font-weight: 600; }
html.ui-v2 #view-auth .msg.err, html.ui-v2 #phase2-overlay .msg.err { background: var(--mg-danger-tint); color: var(--mg-danger); }
html.ui-v2 #view-auth .msg.ok, html.ui-v2 #phase2-overlay .msg.ok { background: var(--mg-own-tint); color: var(--mg-own-text); border: 1px solid var(--mg-green-200); }

/* ---------- 03 Belépés: wordmark and promise on the page, the form in one card ---------- */
html.ui-v2 #view-auth.auth-shell {
  display: flex; flex-direction: column; gap: var(--mg-space-24); max-width: var(--mg-content-max); min-height: 0;
  margin: 0 auto; padding: var(--mg-space-24) var(--mg-space-16) var(--mg-space-24); overflow: visible;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
html.ui-v2 #view-auth.auth-shell.hidden { display: none; }
html.ui-v2 #view-auth .auth-story {
  display: flex; flex-direction: column; gap: var(--mg-space-12); min-height: 0; padding: var(--mg-space-16) var(--mg-space-8) 0;
  background: transparent; color: var(--mg-text-primary); isolation: auto;
}
html.ui-v2 #view-auth .auth-story::after { content: none; }
/* Signed out there is no account to show: the page's own wordmark replaces the header. */
html.ui-v2 body:has(#view-auth:not(.hidden)) header.top { display: none; }
html.ui-v2 #view-auth .auth-wordmark { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
html.ui-v2 #view-auth .auth-wordmark .go { color: var(--mg-done); }
/* The design's promise has no kicker and no lead line; the steps say it. */
html.ui-v2 #view-auth .auth-kicker, html.ui-v2 #view-auth .auth-story > p { display: none; }
html.ui-v2 #view-auth .auth-story h1 { margin: 0; max-width: none; font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
/* Three steps, as on 03: said (clay = what you said), check (review), send (do). */
html.ui-v2 #view-auth .auth-steps { display: flex; flex-direction: column; gap: var(--mg-space-10); margin: var(--mg-space-4) 0 0; padding: 0; list-style: none; }
html.ui-v2 #view-auth .auth-steps li { display: flex; flex-direction: row; align-items: center; gap: var(--mg-space-12); color: var(--mg-text-primary); font-size: 15px; font-weight: 600; line-height: 1.35; }
html.ui-v2 #view-auth .auth-steps li > span:last-child { display: inline; width: auto; height: auto; flex: 1 1 auto; border-radius: 0; background: none; color: inherit; font-weight: 600; }
html.ui-v2 #view-auth .auth-steps li > span:first-child {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; position: relative; font-size: 0; color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
html.ui-v2 #view-auth .auth-steps li > span:first-child::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--v2-auth-icon) center / 20px 20px no-repeat; mask: var(--v2-auth-icon) center / 20px 20px no-repeat;
}
html.ui-v2 #view-auth .auth-steps li:nth-child(1) > span:first-child { background: var(--mg-source-tint); color: var(--mg-source-text);
  --v2-auth-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='12' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0'/%3E%3C/svg%3E"); }
html.ui-v2 #view-auth .auth-steps li:nth-child(2) > span:first-child { background: var(--mg-review-tint); color: var(--mg-review-text);
  --v2-auth-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
html.ui-v2 #view-auth .auth-steps li:nth-child(3) > span:first-child { background: var(--mg-done-tint); color: var(--mg-own-text);
  --v2-auth-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E"); }

/* The form card: login, registration, forgot and reset share it. */
html.ui-v2 #view-auth .auth-form {
  display: flex; flex-direction: column; justify-content: flex-start; padding: var(--mg-space-20) var(--mg-space-16) var(--mg-space-16);
  background: var(--mg-bg-card); border: 1px solid var(--mg-border-card); border-radius: var(--mg-radius-card);
  box-shadow: 0 10px 28px rgba(16,32,56,.08);
}
html.ui-v2 #view-auth .auth-form .auth-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mg-text-secondary); }
html.ui-v2 #view-auth .auth-form h1 { margin: var(--mg-space-6) 0 var(--mg-space-6); font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
html.ui-v2 #view-auth .auth-form > .muted { margin: 0 0 var(--mg-space-4); font-size: 15px; line-height: 1.45; color: var(--mg-text-secondary); }
html.ui-v2 #view-auth .auth-form form > .muted, html.ui-v2 #view-auth #auth-forgot > p.muted { font-size: 15px; line-height: 1.45; color: var(--mg-text-secondary); }
/* Language: a small segmented control; the chosen one is ink (D1). */
html.ui-v2 #view-auth .auth-form .auth-lang { align-self: flex-end; display: inline-grid; grid-auto-flow: column; gap: var(--mg-space-4); margin: 0 0 var(--mg-space-8); padding: var(--mg-space-4); border-radius: var(--mg-radius-control); background: var(--mg-bg-segment); }
html.ui-v2 #view-auth .auth-form .auth-lang.hidden { display: none; }
html.ui-v2 #view-auth .auth-form .auth-lang .linkbtn { min-height: 40px; padding: 0 var(--mg-space-12); border-radius: 11px; color: var(--mg-text-on-tint); font-size: 14px; }
html.ui-v2 #view-auth .auth-form .auth-lang .linkbtn[aria-pressed="true"] { background: var(--mg-selected); color: var(--mg-on-selected); font-weight: 700; }
html.ui-v2 #view-auth .auth-form .auth-lang { min-height: var(--mg-touch-min); }
/* "Elfelejtettem a jelszavam" sits right under the password, as on 03. */
html.ui-v2 #view-auth #auth-login > .auth-links:first-of-type { justify-content: flex-end; margin: var(--mg-space-2) 0 0; }
html.ui-v2 #view-auth .auth-links { margin: var(--mg-space-8) 0 0; gap: var(--mg-space-8); }
html.ui-v2 #view-auth .auth-links .linkbtn { font-size: 15px; }
html.ui-v2 #view-auth .auth-divider { margin: var(--mg-space-16) 0 0; gap: var(--mg-space-12); color: var(--mg-text-muted); font-size: 13px; }
html.ui-v2 #view-auth .auth-divider::before, html.ui-v2 #view-auth .auth-divider::after { background: var(--mg-sand-200); }
html.ui-v2 #view-auth .auth-divider + .btn-row { margin-top: var(--mg-space-12); }
html.ui-v2 #view-auth .auth-trial-note { margin: var(--mg-space-8) 0 0; font-size: 14px; color: var(--mg-text-muted); }
/* Reset link sent: done (green), like the confirmation on 05. */
html.ui-v2 #view-auth .auth-sent {
  margin-top: var(--mg-space-14); padding: var(--mg-space-14) var(--mg-space-16); border-radius: var(--mg-radius-card);
  background: var(--mg-own-tint); border: 1px solid var(--mg-green-200); color: var(--mg-text-primary); font-size: 15px; font-weight: 400; line-height: 1.5;
}
html.ui-v2 #view-auth .auth-sent.hidden { display: none; }
html.ui-v2 #view-auth .auth-sent:focus { outline: 3px solid var(--mg-focus-ring); outline-offset: 2px; }

/* Desktop: the same single column in the middle of the page. */
@media (min-width: 900px) {
  html.ui-v2 #view-auth.auth-shell { max-width: 480px; padding-top: var(--mg-space-32); }
}

/* ---------- 04 Mentés a saját nevedre: the guest-save bottom sheet ---------- */
html.ui-v2 #phase2-overlay { background: var(--mg-backdrop) !important; }
html.ui-v2 #phase2-overlay.hidden { display: none !important; }
html.ui-v2 #phase2-overlay > section.card {
  position: relative; max-width: var(--mg-content-max) !important; padding: var(--mg-space-24) var(--mg-space-20) calc(var(--mg-space-20) + env(safe-area-inset-bottom, 0px));
  background: var(--mg-bg-card); border: 0; border-radius: var(--mg-radius-sheet) var(--mg-radius-sheet) 0 0 !important;
  box-shadow: var(--mg-shadow-sheet); max-height: 92vh !important; max-height: 92dvh !important;
}
/* The grip of the sheet. */
html.ui-v2 #phase2-overlay > section.card::before { content: ""; position: absolute; top: var(--mg-space-8); left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--mg-ink-200); }
html.ui-v2 #phase2-overlay #phase2-title { margin: var(--mg-space-4) 0 var(--mg-space-6); font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
html.ui-v2 #phase2-overlay #phase2-title + .msg { margin-top: var(--mg-space-8); }
html.ui-v2 #phase2-overlay section.card > p.muted { margin: 0; font-size: 14px; line-height: 1.45; color: var(--mg-text-secondary); }
html.ui-v2 #phase2-overlay details { margin-top: var(--mg-space-14) !important; border-top: 1px solid var(--mg-divider); border-bottom: 1px solid var(--mg-divider); }
html.ui-v2 #phase2-overlay details > summary { min-height: var(--mg-touch-min) !important; font-size: 15px; color: var(--mg-text-primary); }
html.ui-v2 #phase2-overlay details > summary .muted { font-size: 14px; color: var(--mg-text-muted); }
html.ui-v2 #phase2-overlay details[open] { padding-bottom: var(--mg-space-14); }
/* Save = do (green); "Majd később" is a plain text action under it, as on 04. */
html.ui-v2 #phase2-overlay .btn-row { margin-top: var(--mg-space-16); padding-top: var(--mg-space-10); border-top: 1px solid var(--mg-bg-sunken); gap: var(--mg-space-2); grid-auto-flow: row; }
html.ui-v2 #phase2-overlay .btn-row button.btn.ghost { min-height: var(--mg-touch-min); border: 0; background: transparent; color: var(--mg-action); font-size: 15px; font-weight: 600; }

/* ---------- Paywall and access cards over the new-quote flow ---------- */
html.ui-v2 #paywall-box:empty { display: none; }
html.ui-v2 #paywall-box .paywall {
  margin: var(--mg-space-12) var(--mg-space-16); padding: var(--mg-space-14) var(--mg-space-16);
  background: var(--mg-bg-card) !important; border: 1px solid var(--mg-border-card); border-radius: var(--mg-radius-card);
  box-shadow: var(--mg-shadow-card); color: var(--mg-text-primary); font-family: var(--font-mg-sans); font-size: 15px; line-height: 1.45;
}
/* The free quotes are spent: the professional has to act, so it reads as a to-do
   (review, D2/D6), never clay and never red. The counter before it is neutral. */
html.ui-v2 #paywall-box .paywall:not([style]) { border: 2px solid var(--mg-review); box-shadow: var(--mg-shadow-question); }
html.ui-v2 #paywall-box .paywall strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
html.ui-v2 #paywall-box .paywall .muted { font-size: 14px; color: var(--mg-text-secondary); }
html.ui-v2 #paywall-box .paywall .btn-row { gap: var(--mg-space-8); margin-top: var(--mg-space-12); }
html.ui-v2 #paywall-box .paywall button.btn {
  min-height: var(--mg-cta-height); width: 100%; margin-top: var(--mg-space-8); padding: 0 var(--mg-space-16); border: none; border-radius: var(--mg-radius-control);
  background: var(--mg-action); color: var(--mg-on-action); font-family: inherit; font-size: 17px; font-weight: 700; box-shadow: var(--mg-shadow-cta);
  transition: transform var(--mg-motion-fast) var(--mg-ease-standard), background-color var(--mg-motion-fast) var(--mg-ease-standard);
}
html.ui-v2 #paywall-box .paywall .btn-row button.btn { margin-top: 0; }
html.ui-v2 #paywall-box .paywall button.btn.ghost { min-height: var(--mg-touch-min); border: 1.5px solid var(--mg-border-control); background: var(--mg-bg-card); color: var(--mg-text-primary); font-size: 15px; font-weight: 600; box-shadow: none; }
html.ui-v2 #paywall-box .paywall button.btn:active { transform: scale(.98); }
html.ui-v2 #paywall-box .paywall button.btn:focus-visible { outline: 3px solid var(--mg-focus-ring); outline-offset: 2px; }
@media (hover: hover) {
  html.ui-v2 #paywall-box .paywall button.btn:hover:not(.ghost) { background: color-mix(in srgb, var(--mg-action), var(--mg-ink-950) 6%); }
  html.ui-v2 #paywall-box .paywall button.btn.ghost:hover { background: var(--mg-bg-subtle); border-color: var(--mg-ink-700); }
}

@media (prefers-reduced-motion: reduce) {
  html.ui-v2 #view-auth *, html.ui-v2 #phase2-overlay *, html.ui-v2 #paywall-box * { transition: none !important; animation: none !important; }
  html.ui-v2 #view-auth :active, html.ui-v2 #phase2-overlay :active, html.ui-v2 #paywall-box :active { transform: none !important; }
}