/* FinPartners — auth pages (phone / code / finish) + legal docs. Prefix au-.
   Source: DESIGN/boards/Auth.dc.html (1440×900 split: form panel 720 | gate stage 720). */

/* ── page frame: the split replaces the floating header (board has its own brand row) ── */
body.au-page .p-head { display: none; }
body.au-page .p-main { padding-top: 0; }
.au-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* ── left: form panel ── */
.au-left { position: relative; z-index: 1; display: flex; background: var(--deck); border-right: 1px solid var(--wire);
  padding: 64px clamp(24px, 6.667vw, 96px); }
.au-left::after { content: ''; position: absolute; right: -1px; top: 0; width: 1px; height: 100%; pointer-events: none;
  background: linear-gradient(transparent 8%, rgba(203,255,58,.35) 50%, transparent 92%); opacity: .25; }
.au-inner { width: 100%; max-width: 528px; margin-inline: auto; display: flex; flex-direction: column; gap: 24px; min-height: 100%; }
.au-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.au-head .g-wordmark { text-decoration: none; }
.au-home { margin-right: -12px; }
.au-flip { display: inline-flex; transform: scaleX(-1); }
.au-scr { display: flex; flex-direction: column; gap: 24px; animation: g-rise .24s var(--ease-hud) both; }
.au-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.au-row > .g-cap { flex: none; }
.au-stack { display: flex; flex-direction: column; gap: 8px; }
.au-left .au-h1 { font-size: 40px; line-height: 1; font-stretch: 68%; letter-spacing: 0; overflow-wrap: normal; }
.au-form { display: flex; flex-direction: column; gap: 24px; }
.au-fields { display: flex; flex-direction: column; gap: 16px; }
.au-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.au-pair .g-input { min-height: 56px; }
.au-sm { display: flex; flex-direction: column; gap: 8px; }
.au-sm .g-key svg { flex: none; }
.au-foot { display: flex; align-items: center; gap: 4px; margin: 0; white-space: nowrap; color: var(--ink-2); }
.au-foot .g-key--quiet { padding: 0 8px; margin-right: -8px; }
.au-back { margin-right: -12px; }
.au-lfoot { margin-top: auto; justify-content: flex-end; }

/* tabs are links here (two real pages), styled like the kit's selected tab */
.au-tabs .g-tab { display: inline-flex; align-items: center; text-decoration: none; }
.au-tabs .g-tab[aria-current=page] { color: var(--volt); background: var(--volt-chip); box-shadow: inset 0 -2px 0 var(--volt); }
.au-tabs .g-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--volt); }

/* phone: kit .g-phone; invalid edge like .g-input */
.au-phone--bad { --edge: var(--bad); }
.au-phone .g-phone__pre { min-width: 56px; justify-content: center; padding: 0 12px; }

/* form-level alert (core / network errors) */
.au-alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; color: var(--ink);
  background: var(--bad-chip); box-shadow: inset 3px 0 0 var(--bad), inset 0 0 0 1px rgba(255,82,104,.35); }
.au-alert svg { flex: none; color: var(--bad); margin-top: 1px; }
.au-alert p { margin: 0; }
.g-err span { min-width: 0; }

/* trust block at the bottom of the panel */
.au-trust { margin-top: auto; display: flex; flex-direction: column; gap: 16px; padding-top: 20px; border-top: 1px solid var(--wire); }
.au-lfoot + .au-trust { margin-top: 0; }
.au-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.au-fact { display: flex; gap: 10px; align-items: flex-start; }
.au-fact > span:first-child { display: inline-flex; flex: none; margin-top: 1px; }
.au-fact .g-cap { display: flex; flex-direction: column; }
.au-fact .g-cap b { font: 600 13px/19px var(--f-text); color: var(--ink); }
.au-op { align-self: stretch; white-space: normal; min-height: 28px; padding: 4px 8px; line-height: 18px; }

/* ── OTP: one real input over six decorative cells (kit .g-otp, cell width as a var) ── */
.au-otpbox { display: flex; flex-direction: column; gap: 12px; }
/* cells fill the column (same width as the button): --cw from the box's inline size */
.au-otpbox { container-type: inline-size; }
.au-otp { --cw: calc((100cqw - 40px) / 6); width: 100%; overflow: clip; }
.au-otp .g-otp__cell { position: relative; }
/* the chamfer cuts away the border on the diagonals: redraw a 1px edge there */
.au-otp .g-otp__cell::after { content: ''; position: absolute; inset: -1px; pointer-events: none;
  background: linear-gradient(135deg, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1px), transparent calc(50% + 1px)) top left / 8px 8px no-repeat,
    linear-gradient(135deg, transparent calc(50% - 1px), var(--edge) calc(50% - 1px), var(--edge) 50%, transparent 50%) bottom right / 8px 8px no-repeat; }
.au-otp input { width: calc(100% + 68px); clip-path: inset(0 68px 0 0);
  letter-spacing: calc(var(--cw) + 8px - 1ch); padding: 0 0 0 calc((var(--cw) - 1ch) / 2); }
.au-otp input:focus, .au-otp input:focus-visible { outline: none; box-shadow: none; }
.au-otp { outline-offset: 6px; }
.au-otp:focus-within { outline: 1px dashed var(--ink-3); }
.au-otp.is-err:focus-within { outline-color: var(--bad); }
.au-resend { justify-content: flex-start; margin-top: -16px; }
.au-resend form { margin: 0; }
.au-resend .g-key--quiet { margin-left: -12px; }

/* «Не приходить SMS?» */
.au-help { border-top: 1px solid var(--wire); padding-top: 4px; }
.au-help summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
  list-style: none; font: 600 14px/21px var(--f-text); color: var(--ink); }
.au-help summary::-webkit-details-marker { display: none; }
.au-help summary svg { transition: transform .16s var(--ease-hud); color: var(--ink-2); }
.au-help[open] summary svg { transform: rotate(180deg); }
.au-help summary:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.au-help p { margin: 0 0 4px; }

/* ── right: gate stage ── */
.au-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 640px; overflow: hidden; container-type: size; }
.au-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 48%, rgba(20,26,30,0), rgba(6,8,10,.55) 100%); }
.au-track { position: absolute; z-index: 2; top: 64px; left: 50%; transform: translateX(-50%); width: min(528px, 100% - 64px);
  display: flex; align-items: center; gap: 12px; }
.au-track__n { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.au-track__n .g-small { color: var(--ink-3); }
.au-track__n.is-cur .g-small, .au-track__n.is-done .g-small { color: var(--ink); }
.au-track .g-glyph { width: 24px; height: 24px; }
.au-track .g-glyph svg { width: 14px; height: 14px; }
.au-track__line { flex: 1; max-width: 120px; height: 2px; position: relative; overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--wire-hi) 0 4px, transparent 4px 8px); }
.au-track__line > i { position: absolute; inset: 0; background: var(--volt); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-hud); }
.au-track__line.is-on > i { transform: scaleX(1); }
.au-stage__gate { position: absolute; z-index: 1; left: 50%; top: 47.78%; width: min(100cqw, 80cqh); aspect-ratio: 1;
  transform: translate(-50%, -50%) perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .5s var(--ease-hud); }
.au-stage__gate svg { display: block; width: 100%; height: 100%; overflow: visible; }
.au-stage__foot { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 48px; text-align: center; }

/* ── gate SVG states (phone: chase; code: sectors per digit; finish: all lit) ── */
.au-seg { stroke: #CBFF3A; opacity: .25; animation: g-chase 2.4s linear infinite; }
.au-seg-1 { animation-delay: .3s; } .au-seg-2 { animation-delay: .6s; } .au-seg-3 { animation-delay: .9s; } .au-seg-4 { animation-delay: 1.2s; }
.au-seg-5 { animation-delay: 1.5s; } .au-seg-6 { animation-delay: 1.8s; } .au-seg-7 { animation-delay: 2.1s; }
.au-gate--code .au-seg { animation: none; stroke: #3A4750; opacity: 1; }
.au-gate--finish .au-seg { animation: none; stroke: #CBFF3A; opacity: 1; filter: drop-shadow(0 0 6px rgba(203,255,58,.55)); }
.au-band { animation: au-band 2.4s linear infinite; }
.au-gate--finish .au-band, .au-gate.is-bad .au-band { animation: none; opacity: 0; }
@keyframes au-band { from { transform: translateY(-100px); } to { transform: translateY(100px); } }
.au-sector { opacity: 0; transition: opacity .3s var(--ease-hud); }
.au-sector.is-on { opacity: 1; }
.au-gate.is-bad .au-sector { opacity: 0; }
.au-tick { stroke: #5C6B65; transition: stroke .2s var(--ease-hud), filter .2s; }
.au-tick.is-on { stroke: #CBFF3A; filter: drop-shadow(0 0 5px rgba(203,255,58,.7)); }
.au-gate.is-bad .au-tick { stroke: #FF5268; filter: none; }
.au-core { fill: #0D1114; stroke: #3A4750; transition: fill .4s var(--ease-hud), stroke .4s; }
.au-gate.is-typing .au-core { fill: #243310; stroke: #CBFF3A; }
.au-gate--finish .au-core { stroke: #CBFF3A; }
.au-gate.is-bad .au-core { fill: #2A1116; stroke: #FF5268; }
.au-coreico { color: var(--ink-3); }
.au-ico-ok, .au-ico-num { display: none; }
.au-gate--finish .au-ico-lock { display: none; }
.au-gate--finish .au-ico-ok { display: inline; color: var(--volt); }
.au-gate.is-typing .au-ico-lock { display: none; }
.au-gate.is-typing .au-ico-num { display: inline; }
.au-ico-num { font: 600 22px/1 var(--f-mono); font-stretch: 87.5%; fill: var(--volt); }
.au-idx { font: 600 11px/16px var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; fill: var(--ink-3); transition: fill .2s; }
.au-idx.is-on { fill: var(--volt); }
.au-cap { font: 600 12px/1.2 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; fill: var(--ink-2); }
.au-telem { font: 400 12px/16px var(--f-mono); font-stretch: 87.5%; letter-spacing: .04em; fill: var(--ink-2); }
.au-gate.is-bad .au-cap { fill: var(--bad); }
@media (prefers-reduced-motion: reduce) {
  .au-seg, .au-band, .au-scr { animation: none !important; }
  .au-stage__gate { transition: none; transform: translate(-50%, -50%); }
}

/* ── responsive: stage only on wide screens; below it the panel is the page ── */
@media (max-width: 1099px) {
  .au-split { display: block; min-height: 0; }
  .au-stage { display: none; }
  .au-left { border-right: 0; min-height: 100vh; min-height: 100dvh; padding: 48px clamp(16px, 5vw, 48px); }
  .au-left::after { display: none; }
}
@media (max-width: 720px) {
  .au-left { padding: 16px 16px 32px; }
  .au-inner { gap: 20px; }
  .au-scr, .au-form { gap: 20px; }
  .au-left .au-h1 { font-size: 32px; }
  .au-pair { grid-template-columns: minmax(0, 1fr); }
  .au-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .au-row > .g-cap { flex: 1 1 100%; }
  .au-foot { white-space: normal; flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .au-otp input { font-size: 26px; }
}
.au-left .g-check input[aria-invalid=true] + .g-check__box { box-shadow: inset 0 0 0 1.5px var(--bad); }
@media (max-width: 720px) {
  .au-left { min-height: 0; }
  .au-trust { margin-top: 8px; }
  .au-lfoot { margin-top: 0; justify-content: flex-start; }
}

/* ══ legal documents (/terms, /privacy) in the public shell ══ */
.au-doc { padding: 56px 0 96px; display: flex; flex-direction: column; gap: 48px; }
.au-doc__head { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.au-doc__head .g-label { color: var(--volt); }
.au-doc__h1 { font-size: clamp(36px, 4.4vw, 56px); }
.au-doc__grid { display: grid; grid-template-columns: 280px minmax(0, 760px); gap: 64px; align-items: start; }
.au-doc__toc { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 12px; padding: 20px;
  background: var(--deck); box-shadow: inset 0 0 0 1px var(--wire);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.au-doc__toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.au-doc__toc a { display: flex; gap: 12px; align-items: baseline; min-height: 44px; padding: 11px 0; text-decoration: none;
  font: 400 14px/20px var(--f-text); color: var(--ink-2); border-top: 1px solid var(--wire); }
.au-doc__toc li:first-child a { border-top: 0; }
.au-doc__toc a:hover { color: var(--ink); }
.au-doc__toc a:hover .au-doc__ix { color: var(--volt); }
.au-doc__ix { flex: none; font: 600 12px/20px var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; color: var(--ink-3); }
.au-doc__body { display: flex; flex-direction: column; }
.au-doc__sec { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 28px 0; border-top: 1px solid var(--wire);
  scroll-margin-top: 104px; }
.au-doc__sec:first-child { padding-top: 0; border-top: 0; }
.au-doc__sec .au-doc__ix { font-size: 14px; line-height: 24px; color: var(--volt); }
.au-doc__sec h2 { margin: 0 0 8px; }
.au-doc__sec p { margin: 0; }
.au-doc__sec a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--wire-input); text-underline-offset: 3px; }
.au-doc__sec a:hover { text-decoration-color: var(--volt); }
.au-doc__next { margin: 16px 0 0; padding-top: 32px; border-top: 1px solid var(--wire); }
@media (max-width: 1099px) {
  .au-doc__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .au-doc__toc { position: static; }
}
@media (max-width: 720px) {
  .au-doc { padding: 24px 0 64px; gap: 32px; }
  .au-doc__toc { display: none; }
  .au-doc__sec { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 24px 0; }
  .au-doc__next .g-key { width: 100%; }
}

/* ── review pass 23.09 ── */
/* the step track inside the panel: tablets only (≥1100 it lives on the stage) */
.au-tabtrack { display: none; }
/* 1100–1279: give the form the wider half, keep the H1 on one line */
@media (min-width: 1100px) and (max-width: 1279px) {
  .au-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .au-left { padding-inline: 48px; }
  .au-left .au-h1 { font-size: clamp(32px, 2.8vw, 40px); }
  .au-track { width: calc(100% - 48px); gap: 8px; }
  /* the gate is drawn at ~0.7 here: mono labels stay ≥ 11px on screen */
  .au-idx, .au-cap, .au-telem { font-size: 16px; }
}
/* short laptop screens: the gate shrinks with the height */
@media (min-width: 1280px) and (max-height: 860px) {
  .au-idx, .au-cap, .au-telem { font-size: 14px; }
}
@media (max-width: 1099px) {
  .au-op { display: none; }                 /* the site footer carries the operator here */
}
@media (min-width: 721px) and (max-width: 1099px) {
  .au-left { background: transparent; }    /* let the page HUD grid show through */
  .au-tabtrack { display: block; padding-bottom: 20px; border-bottom: 1px solid var(--wire); }
  .au-tabtrack .au-track { position: static; transform: none; width: 100%; }
  .au-tabtrack .au-track__line { max-width: none; }
}