/* Desktop /invite of the account v2 wave — В43, mockup Invite.dc.html
   (frames 01, 03–06), PRC-1005.

   The page is a technical page of the shared view, so it wears
   css/search.css (tokens, the capsule .searchbar, the state inks) and this file
   only carries what the capsule does not already draw: the seat where the
   services circle would be, the «Войти» circle, the line under the row and the
   heading's own seat on the page. Loaded by templates/invite_account.html only;
   the pre-wave invite.html (flag off) keeps loading css/perecle.css alone and is
   untouched.

   Every number below is the mockup's own, and the two mechanisms that place the
   row and the heading are the mockup's too — it pins the row with an absolute
   header at `50% − 4px` under a 10px padding, and centres the heading in the
   page with `margin: 0 auto 66px`. Both track the window height, so the 22px
   between the heading and the row holds at any size. */

/* The mockup's placeholder ink (Invite.dc.html `--fa`). It is deliberately NOT
   one of search.css's steps — the light value is that file's --text-muted, the
   dark one its --text-faint — so the page carries its own value instead of
   borrowing the nearest neighbour. */
body.invite { --iv-ph: #8a857a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.invite { --iv-ph: #7f8695; }
}
:root[data-theme="dark"] body.invite { --iv-ph: #7f8695; }

.iv-main {
  position: relative;
  box-sizing: border-box;
  min-height: 100dvh;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.iv-head { position: absolute; top: calc(50% - 4px); left: 0; right: 0; z-index: 5; }
/* 538px wide with 24px fields, then the −14px on each side of the stack: the
   518px pill the mockup draws. */
.iv-bar {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 538px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px 24px 16px;
}
.iv-stack { position: relative; flex: 1 1 auto; min-width: 0; margin: 0 -14px; }
/* The seat the mockup leaves empty in place of the capsule's services circle. */
.iv-seat { flex: none; width: 10px; }

.iv-field {
  font-size: 15px;
  text-overflow: ellipsis;
  /* Focus is the caret, as on the phone page and in the capsule: the field
     carries no outline of its own. */
  caret-color: var(--spark);
}
.iv-field::placeholder { color: var(--iv-ph); opacity: 1; }

.iv-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cap-circle-bg);
  color: var(--text-strong);
  cursor: pointer;
}
.iv-go .spark { width: 18px; height: 18px; }
/* Dimmed while the field is empty (45 %, Invite.dc.html frame 01) — the class
   is invite.js's, which also swallows the submit while it is on. */
.iv-go.is-off { opacity: .45; cursor: default; }
.iv-go[aria-busy="true"] .spark path {
  transform-box: fill-box;
  transform-origin: center;
  animation: sparkTwinkle 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .iv-go[aria-busy="true"] .spark path { animation: none; }
}

/* The line under the row: 12px below it, on the row's own width, centred
   (Invite.dc.html; the 503 line is this element's other text). */
.iv-hint {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--state-text);
  text-wrap: pretty;
}

/* The heading: the technical page's own type (--state-title, 27px/1.25 serif),
   centred on the page and lifted by the 66px bottom margin the mockup gives
   the block, which is what leaves the row its place below. */
.iv-title {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 66px;
  font-family: var(--brand-font);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--state-title);
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}