/* =====================================================================
   auth-v2.css · R32 "auth layout" (VSchat + VisionX, the same file in both repos)
   Spec: handoff/ux/R32-ux-auth-onboarding.md §2 / §7 · 2026-10-23
   - Tokens only (design-system/tokens): no hex, no rgb(), no colour names.
   - Mobile first: one column; card from 768; brand panel from 860.
   - Loaded only by pages behind UI_V2_AUTH (pre-login) or ui_v2 (after login).
   v4 visual language (2026-10-24, design-v4.html / DS v2): white (phone) and very light grey (tablet/desktop)
   surfaces, system blue as the only accent, one primary button per screen, hairline rings instead of shadows,
   quiet secondary text, generous whitespace. Ink capsule only on onboarding (G0).
   ===================================================================== */

.au-body { min-height: 100dvh; background: var(--color-bg); }
@media (min-width: 768px) { .au-body { background: var(--color-bg-secondary); } }
.au { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.au__main { display: flex; flex-direction: column; min-width: 0; padding: var(--space-2) var(--edge) var(--space-4); }
.au__top, .au__foot { width: 100%; max-width: 440px; margin: 0 auto; }
.au--wide .au__top, .au--wide .au__foot { max-width: 720px; }
.au__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.au__center { flex: 1; display: flex; align-items: center; justify-content: center; padding-block: var(--space-6) var(--space-8); }

/* brand mark (logo slot) */
.au-brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--hit); color: var(--color-text);
  font: var(--type-headline); text-decoration: none; border-radius: var(--radius-sm); }
.au-brand:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.au-mark { width: 28px; height: 28px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--color-surface-inverse); color: var(--color-text-inverse); font: var(--type-caption); font-weight: 700; letter-spacing: 0; }

/* language switch: each language in its own script, 44px hit areas, the current one bold (not colour only) */
.au-lang { display: flex; align-items: center; flex-wrap: wrap; margin-inline-end: calc(-1 * var(--space-2)); }
.au-lang a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hit); min-width: var(--hit);
  padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-text-secondary); font: var(--type-footnote); text-decoration: none; }
.au-lang a[aria-current="true"] { color: var(--color-text); font-weight: 600; }
@media (hover: hover) { .au-lang a:hover { color: var(--color-text); background: var(--color-veil); } }
.au-lang a:active { background: var(--color-fill-hover); }
.au-lang a:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* card: flat on mobile, elevated sheet from 768 (radius 20 → inputs 12 → show/hide 8) */
.au-card { width: 100%; max-width: 440px; }
.au--wide .au-card { max-width: 720px; }
@media (min-width: 768px) {
  .au-card { background: var(--color-surface); border-radius: var(--radius-sheet); box-shadow: var(--elev-1); padding: var(--space-10) var(--space-8); }
}
.au-h1 { font: var(--type-title1); letter-spacing: var(--track-title); margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.au-sub { font: var(--type-subhead); color: var(--color-text-secondary); margin: 0 0 var(--space-8); }
.au-form { display: grid; gap: var(--space-5); margin: 0; }
.au-stack { display: grid; gap: var(--space-4); }
.au-stack--sm { display: grid; gap: var(--space-2); }

/* full-width buttons wrap long Lao labels to 2 lines, never truncate */
.au .ds-btn--block { white-space: normal; text-align: center; line-height: 1.3; padding-block: var(--space-2); }
.au .ds-btn--lg { min-height: 48px; }
.au-gimg { width: 20px; height: 20px; flex: none; }

.au-or { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-secondary); font: var(--type-footnote); margin: 0; }
.au-or::before, .au-or::after { content: ""; flex: 1; border-top: 1px solid var(--color-separator); }

/* label row with a right-side link (Forgot?) */
.au-labelrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 24px; }
.au-inlink { position: relative; font: var(--type-footnote); font-weight: 600; color: var(--color-tint); text-decoration: none; border-radius: var(--radius-xs); }
.au-inlink::before { content: ""; position: absolute; inset: -12px -8px; }   /* 20px text + 24 = 44px hit (QA L3) */
@media (hover: hover) { .au-inlink:hover { color: var(--color-tint-hover); text-decoration: underline; } }
.au-inlink:active { color: var(--color-tint-pressed); }
.au-inlink:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* password field + show/hide (44px, in the Tab order) */
.au-pw { position: relative; }
.au-pw .ds-input { padding-inline-end: 52px; }
.au-pw__btn { appearance: none; border: 0; margin: 0; padding: 0; position: absolute; inset-inline-end: 2px; top: 50%; transform: translateY(-50%);
  width: var(--hit); height: var(--hit); border-radius: var(--radius-sm); display: grid; place-items: center; background: transparent;
  color: var(--color-text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.au-pw__btn .ds-icon { width: 20px; height: 20px; }
@media (hover: hover) { .au-pw__btn:hover { color: var(--color-text); background: var(--color-veil); } }
.au-pw__btn:active { background: var(--color-fill-hover); }
.au-pw__btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.au-pw__btn .au-ico-hide, .au-pw__btn[aria-pressed="true"] .au-ico-show { display: none; }
.au-pw__btn[aria-pressed="true"] .au-ico-hide { display: block; }

/* helpers: live rule, caps lock, offline */
.au-rule, .au-caps, .au-offline { font: var(--type-footnote); color: var(--color-text-secondary); display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; }
.au-rule .ds-icon, .au-caps .ds-icon, .au-offline .ds-icon { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.au-rule .au-ico-ok { display: none; }
.au-rule.is-met { color: var(--color-text); }
.au-rule.is-met .au-ico-ok { display: block; color: var(--color-success); }
.au-rule.is-met .au-ico-todo { display: none; }
.au-offline { color: var(--color-text); }

/* inline errors fade in, no shake */
.ds-error:not([hidden]) { animation: au-fade var(--dur-micro-out) var(--ease-out); }
.ds-error[hidden], .au-rule[hidden], .au-caps[hidden], .au-offline[hidden] { display: none; }

/* form-level message (stays until the next edit) */
.au-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-group); background: var(--color-danger-soft); color: var(--color-text); font: var(--type-subhead);
  animation: au-fade var(--dur-micro-out) var(--ease-out); }
.au-alert > .ds-icon { width: 20px; height: 20px; flex: none; color: var(--color-danger); margin-top: 1px; }
.au-alert p { margin: 0; }
.au-alert__hint { color: var(--color-text-secondary); margin-top: var(--space-1) !important; }
.au-alert--info { background: var(--color-bg-secondary); }
.au-alert--info > .ds-icon { color: var(--color-text-secondary); }
.au-alert--ok { background: var(--color-success-soft); }
.au-alert--ok > .ds-icon { color: var(--color-success); }
.au-alert--warn { background: var(--color-warning-soft); }
.au-alert--warn > .ds-icon { color: var(--color-warning); }
.au-alert .au-inlink { display: inline-block; margin-top: var(--space-2); }

.au-alt { text-align: center; font: var(--type-subhead); color: var(--color-text-secondary); margin: var(--space-6) 0 0; }
.au-alt a, .au-legal a, .au__foot a { color: var(--color-tint); font-weight: 600; text-decoration: none; border-radius: var(--radius-xs);
  display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--space-1); }
@media (hover: hover) { .au-alt a:hover, .au-legal a:hover, .au__foot a:hover { text-decoration: underline; color: var(--color-tint-hover); } }
.au-alt a:active, .au-legal a:active, .au__foot a:active { color: var(--color-tint-pressed); }
.au-alt a:focus-visible, .au-legal a:focus-visible, .au__foot a:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.au-value { text-align: center; font: var(--type-footnote); color: var(--color-text-secondary); margin: 0; }
.au-legal { font: var(--type-footnote); color: var(--color-text-secondary); margin: 0; text-align: center; }
.au-legal a { min-height: 32px; padding: 0; display: inline; }
.au__foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 var(--space-2); font: var(--type-footnote); color: var(--color-text-secondary); }
.au__foot a { font-weight: 500; color: var(--color-text-secondary); }

/* checkbox / remember / terms (24 visual · 44 hit via ds-check::before) */
.au-choice { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--hit); font: var(--type-subhead); color: var(--color-text); cursor: pointer; padding-top: 11px; }
.au-choice .ds-check { margin-top: -1px; }
.au-choice a { color: var(--color-tint); font-weight: 600; }
.au-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* segmented control on radios (works without JS; arrow keys native) */
.au-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; gap: 2px; border-radius: var(--radius-control); background: var(--color-fill); }
.au-seg label { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: calc(var(--hit) - 4px);
  padding: var(--space-1) var(--space-3); border-radius: calc(var(--radius-control) - 2px); font: var(--type-label-sm); color: var(--color-text-secondary); cursor: pointer;
  transition: background-color var(--dur-micro-in) var(--ease-out), color var(--dur-micro-in) linear; }
.au-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.au-seg label:has(input:checked) { background: var(--color-seg-thumb); color: var(--color-text); box-shadow: var(--elev-1); font-weight: 600; }
@media (hover: hover) { .au-seg label:hover:not(:has(input:checked)) { color: var(--color-text); background: var(--color-veil); } }
.au-seg label:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.au-seg label:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* result card (P5 state block inside the auth card) */
.au-result { text-align: center; display: grid; justify-items: center; gap: var(--space-2); }
.au-result .au-h1 { font: var(--type-title2); }
.au-result .au-sub { margin-bottom: var(--space-4); }
.au-result .au-stack { width: 100%; }
.au-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--color-bg-secondary); color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.au-ico .ds-icon { width: 28px; height: 28px; }
.au-ico--ok { background: var(--color-success-soft); color: var(--color-success); }
.au-ico--warn { background: var(--color-warning-soft); color: var(--color-warning); }
.au-ico--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.au-ico--tint { background: var(--color-tint-soft); color: var(--color-tint); }
.au-land { animation: au-land var(--dur-land) var(--ease-land) both; }

/* "Details" disclosure (Google / Meta codes for support) */
.au-details { width: 100%; text-align: start; font: var(--type-footnote); color: var(--color-text-secondary); }
.au-details summary { cursor: pointer; min-height: var(--hit); display: inline-flex; align-items: center; color: var(--color-tint); font-weight: 600; border-radius: var(--radius-xs); }
.au-details summary:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.au-details pre, .au-details code { font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

/* identity / consent rows */
.au-who { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-group); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-separator); text-align: start; }
.au-who__body { min-width: 0; flex: 1; }
.au-who__t { font: var(--type-body); font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.au-who__s { font: var(--type-footnote); color: var(--color-text-secondary); margin: 0; overflow-wrap: anywhere; }
.au-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); text-align: start; font: var(--type-subhead); }
.au-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.au-list .ds-icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--color-tint); }
.au-list .au-no .ds-icon { color: var(--color-text-secondary); }

/* mono code (Account ID) + copy */
.au-code { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-group); background: var(--color-bg-secondary); }
.au-code__v { flex: 1; min-width: 0; font: var(--type-numeral-sm); font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; overflow-wrap: anywhere; }

/* store list (AUT-7) */
.au-shops { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.au-shop { appearance: none; border: 0; margin: 0; width: 100%; display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-group); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-separator); color: var(--color-text);
  font: var(--type-body); text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-release) var(--ease-press-release), background-color var(--dur-micro-in) linear; }
@media (hover: hover) { .au-shop:hover { background: var(--color-veil); } }
.au-shop:active { transform: scale(var(--press-scale-row)); transition-duration: var(--dur-press); }
.au-shop:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.au-shop[aria-current="true"] { background: var(--color-tint-soft); box-shadow: inset 0 0 0 1.5px var(--color-tint); }
.au-shop__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.au-shop__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-shop__meta { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.au-shop .ds-chip { font: var(--type-caption); }
.au-shop[hidden] { display: none; }

/* CN01 channel cards (radio group): 72px rows on mobile, 2 × 2 grid from 768 */
.au-ch { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; border: 0; min-width: 0; }
@media (min-width: 768px) { .au-ch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.au-ch__opt { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 72px; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-group); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-separator);
  cursor: pointer; transition: transform var(--dur-release) var(--ease-press-release), box-shadow var(--dur-micro-in) var(--ease-out); }
.au-ch__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
@media (hover: hover) { .au-ch__opt:hover { box-shadow: inset 0 0 0 1px var(--color-separator-strong); } }
.au-ch__opt:active { transform: scale(var(--press-scale-row)); transition-duration: var(--dur-press); }
.au-ch__opt:has(input:checked) { background: var(--color-tint-soft); box-shadow: inset 0 0 0 1.5px var(--color-tint); }
.au-ch__opt:has(input:focus-visible) { box-shadow: var(--focus-ring), inset 0 0 0 1.5px var(--color-tint); }
.au-ch__logo { width: 44px; height: 44px; flex: none; border-radius: var(--radius-control); display: grid; place-items: center; }
.au-ch__logo .ds-icon { width: 26px; height: 26px; }
.au-ch__logo--facebook { background: var(--channel-facebook); color: var(--channel-on-facebook); }
.au-ch__logo--instagram { background: var(--channel-instagram); color: var(--channel-on-instagram); }
.au-ch__logo--whatsapp { background: var(--channel-whatsapp); color: var(--channel-on-whatsapp); }
.au-ch__logo--sandbox { background: var(--color-tint-soft); color: var(--color-tint); }
.au-ch__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.au-ch__t { font: var(--type-body); font-weight: 600; }
.au-ch__s { font: var(--type-footnote); color: var(--color-text-secondary); }
.au-ch__mark { width: 22px; height: 22px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-separator-strong); display: grid; place-items: center; color: transparent; }
.au-ch__mark .ds-icon { width: 14px; height: 14px; }
.au-ch__opt:has(input:checked) .au-ch__mark { background: var(--color-tint); box-shadow: none; color: var(--color-on-tint); }
.au-actions { display: flex; flex-direction: column-reverse; gap: var(--space-3); margin-top: var(--space-6); }
@media (min-width: 768px) { .au-actions { flex-direction: row; justify-content: flex-end; } .au-actions .ds-btn { min-width: 160px; } }

/* 5b "Origin" mini-conversation (MOTION_V2 §5): static at frame 0, plays once, any input skips */
.au-5b { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-bg-secondary); margin-bottom: var(--space-8); }
.au-5b__bubble { justify-self: start; max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: 18px 18px 18px 6px; background: var(--color-bubble-in); font: var(--type-subhead); }
.au-5b__card { justify-self: end; display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-surface); box-shadow: var(--elev-1); font: var(--type-footnote); }
.au-5b__card .ds-icon { width: 20px; height: 20px; color: var(--color-tint); }
.au-5b__chip { justify-self: end; }
.au-5b [data-au-beat] { opacity: 1; transform: none; }
.au-5b.is-playing [data-au-beat]:not(.is-in) { opacity: 0; transform: translateY(var(--land-shift)) scale(var(--land-scale)); }
.au-5b.is-playing [data-au-beat="customer"]:not(.is-in) { transform: translateX(calc(-1 * var(--land-shift))) scale(var(--land-scale)); }
.au-5b.is-playing [data-au-beat].is-in { transition: opacity var(--dur-land) linear, transform var(--dur-land) var(--ease-land); }
.au-5b.is-skip [data-au-beat] { transition: none !important; opacity: 1 !important; transform: none !important; }

/* brand panel: hidden below 860; glass wash over the brand ramp (no invented statistics) */
.au-panel { display: none; }
@media (min-width: 860px) {
  .au--panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .au-panel { display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); position: relative;
    padding: var(--space-16) var(--space-12); color: var(--color-text); background: var(--color-bg); box-shadow: inset 1px 0 0 var(--color-separator); }
  .au-panel > * { max-width: 30rem; }
  .au-panel h2 { font: var(--type-largetitle); letter-spacing: var(--track-large); margin: 0; }
  .au-panel p { font: var(--type-callout); color: var(--color-text-secondary); margin: 0; }
  .au-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); font: var(--type-body); }
  .au-panel li { display: flex; gap: var(--space-3); align-items: flex-start; }
  .au-panel li .ds-icon { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--color-tint); }
}

.au-hidden-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.au-noscript-only { display: none; }

@keyframes au-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes au-land { from { opacity: 0; transform: translateY(calc(-1 * var(--land-shift))) scale(var(--land-scale)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .au-land, .ds-error:not([hidden]), .au-alert { animation-duration: 120ms; animation-name: au-fade; }
  .au-5b.is-playing [data-au-beat]:not(.is-in) { opacity: 1; transform: none; }
}
:root.ds-rm .au-land, :root.ds-rm .au-alert { animation-name: au-fade; animation-duration: 120ms; }

/* small utilities + extras (2026-10-23) */
.au-mt { margin-top: var(--space-4); }
.au-ico--whatsapp { background: var(--channel-whatsapp); color: var(--channel-on-whatsapp); }
.au-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: au-spin 0.8s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .au-spin { animation-duration: 2.4s; } }
.au-impact li { justify-content: flex-start; }
.au-impact .ds-icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--color-danger); }
.au-dlg-actions { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
@media (min-width: 768px) { .au-dlg-actions { grid-template-columns: 1fr 1fr; } .au-dlg-actions .au-form { display: block; } }
.au-dz { padding: 0 var(--space-4) var(--space-4); }
.au-shop > .ds-icon { width: 18px; height: 18px; flex: none; color: var(--color-text-tertiary); }
/* hidden ต้องชนะ display ของคอมโพเนนต์ (segmented modes / reveal) · จุดคั่น footer กึ่งกลาง (2026-10-24) */
.au [hidden] { display: none !important; }
.au__foot { align-items: center; }