/* Стили входа: рамка страниц до пространства (shared/auth-page.js), шаги входа, приглашение, вход гостя, документы и
   отписка. Спецификация вида — docs/reviews/2026-11-07-ui/login-design (вариант B «Сцена»). Цвета — только токены
   theme.css; производные — color-mix от них; цвета знаков Яндекса и Google живут в самих знаках (auth/providers.js). */

/* ---------- Лист: документы и отписка ---------- */

/* A page of the day behind one sheet: a fine grid of hours, lit from above by the accent, and the line of «Сейчас»
   across it. The grid is drawn by the page itself: nothing to download. */
.auth-page {
  --auth-glow: color-mix(in srgb, var(--accent) 11%, var(--raised));
  --auth-glow-far: color-mix(in srgb, var(--accent-ink) 5%, transparent);
  --auth-grid: color-mix(in srgb, var(--foreground) 5.5%, transparent);
  --auth-now: color-mix(in srgb, var(--accent-ink) 55%, transparent);
  --auth-ring: var(--accent-ink);
  --auth-halo: var(--accent-soft);
  --auth-field-h: 48px;
  --auth-radius: 12px;
  /* The mark in front of an error: a circle with «!». */
  --auth-mark-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E");
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  padding: 56px 24px 10vh;
  overflow: hidden;
  background: radial-gradient(56% 44% at 50% -4%, var(--auth-glow), transparent 74%), radial-gradient(90% 70% at 50% 112%, var(--auth-glow-far), transparent 70%), var(--panel);
  color: var(--foreground);
  letter-spacing: -.006em;
}
html[data-theme=dark] .auth-page {
  --auth-glow: color-mix(in srgb, var(--accent-ink) 13%, transparent);
  --auth-glow-far: color-mix(in srgb, var(--accent-ink) 3%, transparent);
  --auth-grid: color-mix(in srgb, var(--foreground) 4.5%, transparent);
  --auth-now: color-mix(in srgb, var(--accent-ink) 45%, transparent);
}
/* The hours of a day: columns of a week, rows of half an hour, fading out from the middle. */
.auth-page::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, var(--auth-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--auth-grid) 1px, transparent 1px); background-size: 168px 48px; background-position: calc(50% - 84px) calc(50% - 24px); -webkit-mask: radial-gradient(ellipse 64% 62% at 50% 42%, black 10%, transparent 80%); mask: radial-gradient(ellipse 64% 62% at 50% 42%, black 10%, transparent 80%); pointer-events: none; }
.auth-page::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% + 24px); z-index: -1; height: 1px; background: linear-gradient(to right, transparent 4%, var(--auth-now) 26%, var(--auth-now) 74%, transparent 96%); pointer-events: none; }

/* The logo alone, the one place where Meetvo shows it large. On the stage it is white, the stage being dark in both
   themes (.call-surface takes the dark --brand-*); on the sheet it follows the theme. */
.auth-page .w-login-brand { position: relative; gap: 12px; margin: 0 0 28px; }
.auth-page .w-login-brand .w-brand-mark { width: 36px; height: 36px; }
.auth-page .w-login-brand .w-brand-word { height: 20px; }

/* The sheet: a little glass over the grid, a hairline of light on its upper edge. */
.auth-page .w-login-col { position: relative; width: 440px; max-width: 100%; padding: 40px 40px 32px; border: 1px solid var(--border); border-radius: 22px; background: color-mix(in srgb, var(--raised) 90%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: var(--edge), var(--lift), var(--popover-shadow); }
.auth-page .w-login-col::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: linear-gradient(180deg, color-mix(in srgb, var(--accent-ink) 42%, transparent), transparent 34%); -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor; mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0); pointer-events: none; }
/* The one moment of motion: the page settles once when its route opens (.is-arriving, shared/auth-page.js). A repaint
   while it settles goes on from where the motion is: --auth-since is the time gone, a negative delay. */
@media (prefers-reduced-motion: no-preference) {
  .auth-page.is-arriving .w-login-col { animation: auth-settle .5s var(--auth-since, 0ms) cubic-bezier(.2, .7, .2, 1) both; }
  .auth-page.is-arriving:not(.auth-page-stage) .w-login-brand { animation: auth-settle .5s calc(var(--auth-since, 0ms) + 40ms) cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes auth-settle { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Текст ---------- */

.auth-page .w-h2 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -.024em; font-variation-settings: "opsz" 32; text-wrap: balance; overflow-wrap: anywhere; }
.auth-page .w-h2 + .w-note { margin: 8px 0 0; font-size: 14px; line-height: 22px; text-wrap: pretty; }
.auth-page .w-note b { font-weight: 560; color: var(--foreground); overflow-wrap: anywhere; }
/* A link in a sentence keeps the sentence; its target grows to 44 px around it without moving the text. */
.auth-page .w-link { position: relative; font-size: inherit; font-weight: 500; color: var(--foreground); border-radius: 4px; }
.auth-page .w-link::before { content: ""; position: absolute; inset: -12px -4px; }
.auth-page :is(.w-link, a):focus-visible { outline: 2px solid var(--auth-ring); outline-offset: 2px; }
/* «Отправили на …» and «Изменить» right after the address. */
.auth-sent .w-link { margin-left: 4px; white-space: nowrap; }

/* ---------- Поле и кнопка ---------- */

/* One field and one button, both full width and of one height. The form of the name of an organization is also the
   window «Создать организацию» of the profile menu (org/choice.js): the rules outside .auth-page are its look there. */
.auth-form { display: flex; flex-direction: column; margin-top: 28px; }
.org-dialog-body .auth-form { margin-top: 16px; }
.auth-form .auth-input { height: 44px; font-size: 15px; }
.auth-form .auth-submit { width: 100%; height: 44px; margin-top: 16px; }
.auth-form .w-field-error { margin: 8px 0 0; }
.auth-form .w-input[aria-invalid="true"], .auth-form .w-input[aria-invalid="true"]:hover:not(:disabled, :focus-visible) { border-color: var(--danger); }
.auth-form .w-input[aria-invalid="true"]:focus-visible { border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); }
.auth-page .auth-form .auth-input { height: var(--auth-field-h); padding: 0 14px; border-radius: var(--auth-radius); box-shadow: var(--control-edge); }
.auth-page .auth-form .auth-input:focus-visible:not([aria-invalid="true"]) { border-color: var(--auth-ring); box-shadow: 0 0 0 4px var(--auth-halo); }
/* The error under the field: a small mark in front, so it is not only the colour that says it. */
.auth-page .w-field-error { display: flex; gap: 8px; margin: 10px 0 0; font-size: 13px; line-height: 20px; color: var(--danger); }
.auth-page .w-field-error::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor; -webkit-mask: var(--auth-mark-alert) center / contain no-repeat; mask: var(--auth-mark-alert) center / contain no-repeat; }

/* The one solid button of the page; a button that waits for a countdown is plain and still readable. */
.auth-page .w-btn-primary { height: var(--auth-field-h); border-radius: var(--auth-radius); font-size: 15px; font-weight: 560; letter-spacing: -.008em; font-variant-numeric: tabular-nums; transition: filter .14s, transform .08s; }
.auth-page .w-btn-primary:hover:not(:disabled) { opacity: 1; filter: brightness(1.06) saturate(1.04); }
.auth-page .w-btn-primary:not(:disabled):active { transform: translateY(.5px); filter: brightness(.97); }
.auth-page .w-btn:focus-visible { outline: 2px solid var(--auth-ring); outline-offset: 3px; }
.auth-page .w-btn-primary:disabled { opacity: 1; background: var(--secondary); color: var(--muted-foreground); box-shadow: none; border-color: var(--border); }
/* «Отправляем…», «Сохраняем…», «Создаём…», «Принимаем…»: the button keeps its colour and full contrast, a small ring
   turns in front of its words; without motion the ring stands and the words say it. The ring is ::after put first:
   ::before of a button is its finger target on a phone (app.css). */
.auth-submit[aria-busy="true"]:disabled, .auth-page .auth-submit[aria-busy="true"]:disabled { opacity: 1; background: var(--primary-fill); background-clip: padding-box; color: var(--accent-fg); border-color: transparent; box-shadow: var(--primary-edge); cursor: progress; }
.auth-submit[aria-busy="true"] { gap: 10px; }
.auth-submit[aria-busy="true"]::after, .auth-row-busy::before { content: ""; order: -1; flex: none; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .auth-submit[aria-busy="true"]::after, .auth-row-busy::before, .auth-checking::before { animation: auth-spin .8s linear infinite; }
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ---------- Код: шесть клеток поверх одного поля ---------- */

/* One real field (paste, the keyboard's code suggestion, autofill of one-time-code), drawn as six cells under it: the
   field lies on top, its text transparent; the cells show its digits, three and three. */
.auth-code-box { position: relative; }
.auth-page .auth-form .auth-code-box .auth-code { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--auth-radius); background: transparent; box-shadow: none; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: 16px; cursor: text; }
.auth-page .auth-form .auth-code-box .auth-code:focus-visible { box-shadow: none; outline: none; }
.auth-code-box .auth-code::selection { background: transparent; }
.auth-code-box .auth-code:-webkit-autofill { -webkit-text-fill-color: transparent; -webkit-box-shadow: 0 0 0 100px transparent inset; transition: background-color 9999s; }
/* Forced colours (Windows high contrast) make every text visible: the cells step aside and the field is the field. */
@media (forced-colors: active) {
  .auth-cells { display: none; }
  .auth-page .auth-form .auth-code-box .auth-code { position: static; height: 52px; border: 1px solid CanvasText; color: CanvasText; -webkit-text-fill-color: CanvasText; caret-color: CanvasText; font-size: 24px; letter-spacing: .3em; text-align: center; }
}
.auth-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 12px repeat(3, minmax(0, 1fr)); gap: 8px; }
.auth-cells > i { align-self: center; justify-self: center; width: 8px; height: 2px; border-radius: 1px; background: var(--border-strong); }
.auth-cell { display: flex; align-items: center; justify-content: center; height: 60px; border: 1px solid var(--input-border); border-radius: var(--auth-radius); background: var(--input); box-shadow: var(--control-edge); font-size: 26px; line-height: 1; font-weight: 560; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 32; color: var(--foreground); transition: border-color .14s, box-shadow .14s; }
.auth-cell.is-filled { border-color: var(--border-strong); }
/* The cell the next digit goes to, while the field has the focus: the ring and a caret; all six typed — all ringed. */
.auth-code-box:focus-within .auth-cell.is-next { border-color: var(--auth-ring); box-shadow: 0 0 0 4px var(--auth-halo); }
.auth-code-box:focus-within .auth-cell.is-next::after { content: ""; width: 2px; height: 26px; border-radius: 1px; background: var(--auth-ring); }
.auth-code-box:focus-within .auth-cells.is-full .auth-cell { border-color: var(--auth-ring); }
@media (prefers-reduced-motion: no-preference) {
  .auth-code-box:focus-within .auth-cell.is-next::after { animation: auth-caret 1.1s steps(1) infinite; }
}
@keyframes auth-caret { 50% { opacity: 0; } }
/* «Проверяем…»: the cells hold the digits, a light runs over them; without motion they only dim. */
.auth-code-box[aria-busy="true"] .auth-cell { color: var(--muted-foreground); background-image: linear-gradient(100deg, transparent 30%, var(--auth-halo) 50%, transparent 70%); background-size: 300% 100%; background-position: 100% 0; }
@media (prefers-reduced-motion: no-preference) {
  .auth-code-box[aria-busy="true"] .auth-cell { animation: auth-sheen 1.2s ease-in-out infinite; }
}
@keyframes auth-sheen { to { background-position: -50% 0; } }
/* A wrong or spent code: the cells in the colour of the error, one short shake when it is said. */
.auth-cells.is-wrong .auth-cell, .auth-code-box:focus-within .auth-cells.is-wrong .auth-cell { border-color: var(--danger); }
.auth-code-box:focus-within .auth-cells.is-wrong .auth-cell.is-next { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .auth-cells.is-wrong { animation: auth-shake .32s cubic-bezier(.36, .07, .19, .97) both; }
}
@keyframes auth-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.auth-checking { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.auth-checking::before { content: ""; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--auth-ring); }
.auth-form .auth-again { margin: 16px 0 0; font-variant-numeric: tabular-nums; }

/* ---------- Тени того, что ещё грузится ---------- */

/* What has not come yet holds its place at its own height: when it comes, nothing under it moves. */
.auth-ghost { display: block; width: 100%; height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--foreground) 6.5%, transparent); background-image: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--foreground) 5%, transparent) 50%, transparent 70%); background-size: 300% 100%; background-position: 100% 0; }
@media (prefers-reduced-motion: no-preference) {
  .auth-ghost { animation: auth-sheen 1.6s ease-in-out infinite; }
}
.auth-ghost.auth-ghost-btn { height: var(--auth-field-h); border-radius: var(--auth-radius); }
.auth-providers.is-ghost .auth-providers-or { gap: 0; }
.auth-providers.is-ghost .auth-providers-or span { visibility: hidden; width: 0; overflow: hidden; }
/* Two lines of the documents' note, 19 px each: the height of the note. */
.auth-page .auth-ghost-lines { display: flex; margin: 0; flex-direction: column; gap: 9px; padding: 4.5px 0; }
.auth-ghost-lines .auth-ghost:first-child { width: 96%; }
.auth-ghost.auth-ghost-short { width: 58%; }

/* ---------- Яндекс ID и Google ---------- */

/* «или» between two hairlines, then a neutral button for each provider with its own mark, as their rules ask. */
.auth-providers { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.auth-providers .auth-providers-or { display: flex; align-items: center; gap: 14px; margin: 0 0 2px; font-size: 13px; color: var(--muted-foreground); }
.auth-providers .auth-providers-or::before, .auth-providers .auth-providers-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-page .auth-provider { width: 100%; height: var(--auth-field-h); gap: 10px; border-radius: var(--auth-radius); border-color: var(--border-strong); background: var(--raised); color: var(--foreground); font-size: 15px; font-weight: 500; text-decoration: none; }
.auth-page .auth-provider:hover { background: color-mix(in srgb, var(--foreground) 3%, var(--raised)); }
.auth-page .auth-provider-mark { flex: none; width: 20px; height: 20px; stroke: none; }
/* A failed return of a link in «Профиль → Способы входа» (settings/my/signin.js) is the same failure, under its rows. */
.auth-provider-error { margin: 12px 0 0; }

/* ---------- Ошибка шага ---------- */

/* An error of the step that has no field of its own is a plate under the subtitle (shared/auth-form.js). */
.auth-page .auth-alert { margin: 20px 0 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent); border-radius: var(--auth-radius); background: var(--danger-bg); font-size: 13.5px; line-height: 20px; overflow-wrap: anywhere; }
.auth-page .auth-alert + :is(.auth-form, .w-login-list) { margin-top: 16px; }

/* ---------- Подвал шага ---------- */

/* The one place of the quiet, a hairline above it: the documents on the steps of the address and the code, then who
   signs in and the way out. */
.auth-foot { margin: 32px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); }
.auth-page .auth-foot .w-note { margin: 0; }
.auth-page .auth-terms { margin: 0; font-size: 12.5px; line-height: 19px; color: var(--muted-foreground); text-wrap: pretty; overflow-wrap: anywhere; }
/* The links of the note are as quiet as the note (the owner's word of 07.11.2026: «оферта и политика не должны сильно
   выделяться»): its colour and weight, a thin pale underline so a link is not told by colour alone; brighter under
   the pointer; the ring of the keyboard focus stays. */
.auth-page .auth-terms .w-link { font-weight: inherit; color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--muted-foreground) 40%, transparent); text-underline-offset: 3px; }
.auth-page .auth-terms .w-link:hover { color: var(--foreground); text-decoration-color: currentColor; }
.auth-page .auth-who { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; font-size: 13px; line-height: 20px; }
.auth-who-mail { display: inline-flex; gap: 8px; min-width: 0; color: var(--muted-foreground); }
.auth-who-mail .w-i { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.auth-who-mail > span { min-width: 0; overflow-wrap: anywhere; }
.auth-page .auth-who .w-link { flex: none; }

/* ---------- Знак в поле и плитка организации ---------- */

/* What the typed name becomes, at the start of its field (shared/auth-sign.js); it never takes the pointer. */
.auth-field { position: relative; }
.auth-field > .auth-sign { position: absolute; top: 50%; left: 8px; z-index: 1; transform: translateY(-50%); pointer-events: none; }
.auth-form .auth-field > .auth-input, .auth-page .auth-form .auth-field > .auth-input { width: 100%; padding-left: 50px; }
.auth-sign.w-av { --av: 32px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; }
.auth-sign.is-empty { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--muted-foreground); }
.auth-sign .w-i { width: 16px; height: 16px; }
.auth-tile { flex: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--secondary); box-shadow: inset 0 0 0 1px var(--border); color: var(--foreground); font-size: 16px; line-height: 1; font-weight: 600; letter-spacing: -.01em; }
.auth-tile .w-i { width: 18px; height: 18px; color: var(--muted-foreground); }
.auth-tile.auth-sign { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
.auth-tile.is-offer { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-ink) 16%, transparent); color: var(--accent-ink); }
.auth-tile.is-ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.auth-tile.is-ghost .w-i { color: var(--foreground); }
.auth-tile.is-large { width: 60px; height: 60px; border-radius: 17px; font-size: 26px; }

/* ---------- Организация ---------- */

/* The rows in one group, hairlines between them: the name large, under it why the row is here; a long name wraps
   within its row; «Принять» and «Вступить» stay on one line at the end. The page scrolls when the rows are many: one
   scroll, never a list scrolling inside the page. */
.auth-page .w-login-list { margin: 24px 0 0; border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: var(--control-edge); overflow: hidden; }
.auth-page .w-login-row { width: 100%; min-height: 68px; margin: 0; padding: 12px 16px 12px 14px; gap: 14px; border-radius: 0; border-bottom: 1px solid var(--border); font-size: 14.5px; line-height: 20px; transition: background-color .14s, opacity .14s; }
.auth-page .w-login-list > .w-login-row:last-child { border-bottom: 0; }
.auth-page .w-login-row:hover:not(:disabled) { background: var(--hover); }
.auth-page .w-login-row:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--auth-ring); outline-offset: -2px; }
.auth-page .w-login-row .w-grow { min-width: 0; overflow-wrap: anywhere; }
.auth-page .w-login-row b { font-weight: 560; letter-spacing: -.008em; }
.auth-page .w-login-row small { margin-top: 1px; font-size: 12.5px; line-height: 18px; }
.auth-page .w-login-row > .w-i:last-child { flex: none; width: 18px; height: 18px; }
/* While one press is on its way: that row keeps its light and says it waits; the others step back. */
.auth-page .w-login-row:disabled { opacity: .5; cursor: default; }
.auth-page .w-login-row[aria-busy="true"] { opacity: 1; background: var(--hover); cursor: progress; }
.auth-row-busy { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; font-size: 13px; font-weight: 560; color: var(--accent-ink); }
.auth-org-take { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.auth-page .w-login-row:hover:not(:disabled) .auth-org-take { background: color-mix(in srgb, var(--accent-ink) 16%, transparent); }
.auth-org-make { margin-top: 12px; }
.auth-page .auth-org-make > .w-login-row { min-height: 60px; border: 1px dashed var(--border-strong); border-radius: 16px; }
.auth-page .auth-org-make > .w-login-row:focus-visible { outline-offset: 2px; }
.auth-org-make > .auth-form { margin-top: 16px; }
/* The form opened from the list: a card in the place of the row, so the list above stays one group. */
.auth-org-make.is-open { padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: var(--control-edge); }
.auth-org-make.is-open > .auth-form { margin-top: 0; }

/* ---------- Приглашение и страницы-случаи ---------- */

/* The sign above the title: the tile of the organization of the invitation, or the mark of the case. The person who
   invites is a card: their face, name and position. */
.auth-hero { position: relative; display: inline-flex; margin: 0 0 22px; }
.auth-hero-badge { position: absolute; right: -6px; bottom: -6px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary-fill); color: var(--accent-fg); box-shadow: 0 0 0 3px var(--raised); }
.auth-hero-badge .w-i { width: 13px; height: 13px; stroke-width: 2.6; }
.auth-status-ic { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 17px; background: var(--secondary); box-shadow: inset 0 0 0 1px var(--border); color: var(--body); }
.auth-status-ic .w-i { width: 24px; height: 24px; }
.auth-status-ic.is-danger { background: var(--danger-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); }
.auth-person { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); box-shadow: var(--control-edge); }
.auth-person .w-av { background: var(--secondary); color: var(--foreground); }
.auth-person .w-grow { min-width: 0; }
.auth-person b { display: block; font-size: 14px; line-height: 20px; font-weight: 560; overflow-wrap: anywhere; }
.auth-person small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 18px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.auth-page .w-note + .w-note { margin: 12px 0 0; }
.auth-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.auth-actions .auth-submit, .auth-page .auth-wide { width: 100%; height: var(--auth-field-h); border-radius: var(--auth-radius); font-size: 15px; font-weight: 560; text-decoration: none; }
.auth-page .auth-wide { border-color: var(--border-strong); background: var(--raised); color: var(--foreground); }
.auth-skeleton { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.auth-skeleton .auth-hero { margin: 0 0 8px; }
.auth-ghost.auth-ghost-tile { width: 60px; height: 60px; border-radius: 17px; }
.auth-ghost.auth-ghost-title { width: 78%; height: 28px; border-radius: 8px; }
.auth-ghost.auth-ghost-card { height: 66px; border-radius: 14px; }
.auth-skeleton .auth-ghost-btn { margin-top: 14px; }
.auth-page .auth-skeleton-note { margin: 16px 0 0; }
/* The cases the sheet still draws with stateView (the documents, the unsubscribe). */
.auth-page .w-state { padding: 0; }
.auth-page .w-state-ic { background: var(--accent-soft); color: var(--accent-ink); }
.auth-page .w-state-actions .w-btn { height: 44px; }

/* A document of #/legal/:doc on a sheet wide enough to read. */
.legal-page .w-login-col { width: 720px; }
.legal-doc section { margin-top: 20px; }
.legal-doc h2 { margin: 0 0 8px; }
.legal-doc p { margin: 0 0 8px; color: var(--body); overflow-wrap: anywhere; }

/* #/unsubscribe/:token: a name of an organization of any length wraps within the sheet. */
.unsub-page .unsub-title { overflow-wrap: anywhere; }
.unsub-page .unsub-actions { margin-top: 16px; }

/* ---------- Сцена: вход, приглашение, вход гостя ---------- */

/* On the left the dark stage of a call (dark in both themes, as the call itself), on the right the form on the page. */
.auth-page.auth-page-stage { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: stretch; justify-content: stretch; padding: 0; overflow: visible; background: var(--background); }
html[data-theme=dark] .auth-page.auth-page-stage { background: var(--sunken); }
.auth-page.auth-page-stage::before, .auth-page.auth-page-stage::after { display: none; }
.auth-stage { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 100dvh; padding: 40px 56px 56px; overflow: hidden; border-right: 1px solid var(--border); color: var(--foreground); background: radial-gradient(70% 55% at 30% 0%, color-mix(in srgb, var(--accent-ink) 12%, transparent), transparent 70%), var(--call-stage); }
.auth-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, color-mix(in srgb, var(--foreground) 4%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--foreground) 4%, transparent) 1px, transparent 1px); background-size: 96px 48px; -webkit-mask: radial-gradient(ellipse 80% 70% at 40% 40%, black, transparent 80%); mask: radial-gradient(ellipse 80% 70% at 40% 40%, black, transparent 80%); }
.auth-stage .w-login-brand { margin: 0; }
/* The voices of a meeting as lanes over time: who spoke when, and the one who speaks now. */
.auth-lanes { position: relative; display: flex; flex-direction: column; gap: 18px; max-width: 520px; padding: 8px 0; }
.auth-lane { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(to right, color-mix(in srgb, var(--foreground) 6%, transparent) 64%, transparent 64%, transparent calc(64% + 4px), color-mix(in srgb, var(--foreground) 2.5%, transparent) 0); }
.auth-lane > i { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); border-radius: 4px; background: color-mix(in srgb, var(--foreground) 22%, transparent); }
.auth-lane > i.is-now { background: var(--primary-fill); box-shadow: 0 0 18px color-mix(in srgb, var(--accent-ink) 45%, transparent); }
.auth-playhead { position: absolute; top: -6px; bottom: -6px; left: 64%; width: 1px; background: color-mix(in srgb, var(--accent-ink) 70%, transparent); }
.auth-playhead::before { content: ""; position: absolute; top: -4px; left: -3.5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-ink); }
.auth-wave { position: absolute; left: calc(64% + 12px); top: 50%; display: flex; align-items: center; gap: 3px; height: 28px; transform: translateY(-50%); }
.auth-wave > b { width: 3px; height: var(--h); border-radius: 2px; background: var(--accent-ink); opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .auth-wave > b { animation: auth-voice 1.6s var(--d) ease-in-out infinite alternate; }
}
@keyframes auth-voice { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.auth-stage-copy { max-width: 460px; }
.auth-stage-title { margin: 0; font-size: 36px; line-height: 42px; font-weight: 600; letter-spacing: -.03em; font-variation-settings: "opsz" 32; text-wrap: balance; color: var(--foreground); }
/* The form on the page itself, no sheet; the groups on it stand one step above it, in both themes. */
.auth-page-stage .auth-side { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; padding: 56px 40px 10vh; }
.auth-page-stage .auth-side .w-login-col { width: 400px; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.auth-page-stage .auth-side .w-login-col::before { display: none; }
.auth-page-stage :is(.w-login-list, .auth-org-make.is-open, .auth-person) { background: var(--raised); }
/* The stage stays put while a long form scrolls (many organizations): only the right half moves. */
@media (min-width: 761px) {
  .auth-stage { position: sticky; top: 0; align-self: start; height: 100dvh; min-height: 0; }
  .auth-page-stage .auth-side { min-height: 100dvh; }
}
@media (max-width: 1040px) {
  .auth-stage { padding: 32px 36px 40px; }
  .auth-stage-title { font-size: 30px; line-height: 36px; }
}

/* ---------- Телефон ---------- */

/* No sheet: the page itself. What matters stands high, so the keyboard does not cover it: the brand is one small row
   (on the stage — one dark strip), the title and the field right under it. Fields of 16 px: iOS does not zoom. */
@media (max-width: 760px) {
  .auth-page { --auth-field-h: 52px; justify-content: flex-start; align-items: stretch; padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(120% 34% at 50% -4%, var(--auth-glow), transparent 75%), var(--background); }
  .auth-page::before { background-size: 112px 40px; background-position: -1px -1px; -webkit-mask: linear-gradient(to bottom, black, transparent 112px); mask: linear-gradient(to bottom, black, transparent 112px); }
  .auth-page::after { display: none; }
  .auth-page .w-login-brand { align-self: flex-start; gap: 10px; margin: 0 0 36px; }
  .auth-page .w-login-brand .w-brand-mark { width: 32px; height: 32px; }
  .auth-page .w-login-brand .w-brand-word { height: 18px; }
  .auth-page .w-login-col { width: 100%; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .auth-page .w-login-col::before { display: none; }
  .auth-form { margin-top: 24px; }
  .auth-page .auth-form .auth-input, .auth-page .w-btn-primary, .auth-page .auth-provider, .auth-page .auth-wide, .auth-actions .auth-submit { font-size: 16px; }
  .auth-cells { gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)) 10px repeat(3, minmax(0, 1fr)); }
  .auth-cell { height: 58px; font-size: 24px; }
  .auth-tile.is-large, .auth-status-ic { width: 52px; height: 52px; border-radius: 15px; }
  .auth-page.auth-page-stage { display: flex; flex-direction: column; padding: 0; }
  .auth-stage { min-height: 0; padding: max(16px, env(safe-area-inset-top)) 20px 16px; gap: 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .auth-stage .w-login-brand { margin: 0; }
  .auth-lanes, .auth-stage-copy { display: none; }
  .auth-page-stage .auth-side { justify-content: flex-start; align-items: stretch; padding: 32px 20px 24px; }
  .auth-page-stage .auth-side .w-login-col { width: 100%; }
}
@media (max-width: 370px) {
  .auth-page, .auth-page-stage .auth-side { padding-inline: 16px; }
  .auth-page.auth-page-stage { padding-inline: 0; }
  .auth-page .w-h2 { font-size: 24px; line-height: 30px; }
  .auth-cell { height: 54px; font-size: 22px; }
}
/* A short window (a phone on its side, the keyboard up): no air above the brand. */
@media (max-height: 560px) {
  .auth-page:not(.auth-page-stage) { justify-content: flex-start; padding-top: 20px; }
}