/* The auth area in the dark UI of 15 October 2026: sign-in, the profile, the unsubscribe page, the campaign
   unsubscribe page the server writes (/u/<token>) and the hosted chat page's own frame.

   Sign-in is the reference package's page: its shell (.auth, .bar, .back), card (.card), progress bar
   (.prog), steps (.stepv), six code boxes (.otp) and links (.link) come from pages.css, and its fields and
   buttons from brand.css. This file adds what the reference does not show, in the same design: the logo in
   the bar, the steps' forms and their reserved error lines, the code boxes as one real input, the staging
   code, two-step sign-in, the enrolment, the recovery codes, single sign-on, the profile and its account
   card, the unsubscribe card, and .auth-card, the same card for the hosted page, which loads neither file.

   Every size and colour is a token from tokens.css. No rule here reaches an element by its tag alone: the
   hosted page carries the customer's own chat in its light DOM, and only bidi's own classes are styled. */

[hidden] { display: none !important; }

/* ---- The skip link: the first stop for a keyboard, the reference's white pill ---- */
.skip-link {
  position: absolute; inset-inline-start: var(--sp-12); top: calc(-1 * (var(--h-md) + var(--sp-24))); z-index: 1000;
  display: inline-flex; align-items: center; min-height: var(--h-md); padding: 0 var(--sp-16);
  border-radius: var(--r-pill); background: var(--pill); color: var(--pill-ink);
  font: var(--type-small); font-weight: 600; text-decoration: none; transition: top var(--dur-press) var(--ease-fade);
}
.skip-link:focus { top: var(--sp-12); }

/* ---- The bar (pages.css .auth .bar): the mark and its name at the inline start; the way back, and the
   language switch where Arabic is on, at the inline end. i18n.js mounts the switch into .topnav-inner. ---- */
.auth .bar { gap: var(--sp-16); }
.auth .logo {
  display: inline-flex; flex: none; align-items: center; gap: var(--sp-8); height: var(--h-md); margin-inline-end: auto;
  border-radius: var(--r-sm); color: var(--text); font: var(--type-wordmark); letter-spacing: var(--track-wordmark);
}
/* The official mark cropped to its ink (viewBox 8 12 112 104), 20 tall: the reference's visible size */
.auth .logo-mark { display: block; width: calc(20px * 112 / 104); height: 20px; flex: none; color: var(--text); }
.auth .back .arr { display: inline-block; }
/* A bar with no mark (a white-labelled page) keeps its link at the inline end. */
.auth .bar > .back:first-child { margin-inline-start: auto; }
html[dir="rtl"] .auth .back .arr { transform: scaleX(-1); }

/* The card sits in the shell's second row, centred (pages.css .card), under the header landmark. */
.auth-main { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }

/* ---- Inside the card ---- */
/* A step's own form keeps the reference's rhythm: heading 24 field, the error line, 12 button. */
.card .step-form { display: grid; }
.card .sub b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
/* "Wrong email? Change it" and the other quiet lines under a step's button */
.card .sub.aside-line { margin-top: var(--stack); font: var(--type-small); }
/* "Send a new code" while the last code is under a minute old: there, in the quiet colour, not pressable. */
.card .link:disabled { color: var(--text-2); cursor: default; text-decoration: none; }
.card #resend-status:empty { display: none; }
/* A field's error line: 4 under the control and one line (20) tall, kept even while it is empty (the
   reference's slot), so a one-line error moves nothing under it. A two-line one, such as the code step's
   "That code didn't work..." in the card's width, moves what follows down by its second line. The words
   inside come and go with [hidden]. */
.card .err-slot { margin-top: var(--pair); min-height: 20px; }
.card .err-slot > .err { margin-top: 0; min-height: 0; }
.card .err { margin: 0; color: var(--err); font: var(--type-caption); }
.card .note { margin-top: var(--pair); color: var(--text-2); font: var(--type-caption); }
.card .btn:disabled { opacity: .7; cursor: default; pointer-events: none; }
.card .btn:disabled::before { opacity: 0; }
/* The captcha keeps its own white or dark box; it sits between the field and the button. */
.card .captcha { margin-top: var(--stack); min-height: 0; }

/* A field's label row (brand.css .field): the label at the inline start and, for a required field, the red
   star at the inline end (Notion note 7), with the word "Required" for a screen reader; "Optional" there too. */
.card .field > label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--stack); }
.card .field > label .req { margin: 0; color: inherit; }
.card .field .req-star { color: var(--err); font: var(--type-small); font-weight: 600; }
.card .field .requirement { flex: none; color: var(--text-2); font: var(--type-caption); }
/* A select in the reference's input: its own chevron, on the inline end */
.card select.input {
  padding-inline-end: calc(var(--in-s) + var(--sp-24)); cursor: pointer; -webkit-appearance: none; appearance: none;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--in-s) center / 14px;
}
html[dir="rtl"] .card select.input { background-position: left var(--in-s) center; }
.card .input[dir="ltr"] { text-align: start; }

/* ---- The six code boxes (pages.css .otp): one real input over six drawn boxes ----
   One input carries the code, so a pasted code, typing, Backspace and the phone's one-time-code fill work
   as they do in any field, and a screen reader hears one field. It lies over the boxes, its own text and
   caret see-through; signin.js draws each digit in its box and marks the box the next digit goes to. */
/* A code reads left to right in every language, as the field under the boxes does (dir="ltr"). */
.otp { position: relative; direction: ltr; }
/* The boxes' label is for a screen reader only (the heading over them says what goes in), as in the reference. */
#code-form > .field-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.otp .otp-box {
  display: grid; place-items: center; min-width: 0; height: var(--h-xl); border-radius: var(--r-md);
  background: var(--ground); border: 1px solid var(--text-3); color: var(--text);
  font: 600 24px/28px var(--display); font-variant-numeric: tabular-nums;
  transition: scale var(--dur-press) var(--spring), border-color var(--dur-fade) var(--ease-fade);
}
.otp.is-focused .otp-box.is-next { border-color: var(--cobalt-2); scale: 1.04; box-shadow: 0 0 0 4px rgba(42,91,224,.28); }
/* The caret in the box the next digit goes to */
.otp.is-focused .otp-box.is-next:empty::after {
  content: ""; width: 2px; height: 28px; border-radius: 1px; background: var(--text);
  animation: otp-caret 1s steps(1) infinite;
}
@keyframes otp-caret { 50% { opacity: 0; } }
.otp:has(.otp-input[aria-invalid="true"]) .otp-box { border-color: var(--err-line); }
.otp .otp-input, .otp .otp-input:focus {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; border-radius: var(--r-md); outline: 0; background: transparent; box-shadow: none; scale: none;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent;
  font: var(--type-body); letter-spacing: 0; text-align: start; cursor: text; transition: none;
}
.otp .otp-input::selection { background: transparent; color: transparent; }
/* A browser that fills the code paints its own background: it stays see-through here. */
.otp .otp-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px transparent inset; transition: background-color 9999s; }
/* Windows high contrast: the field's own text stays unseen (the boxes show the digits) and the box the next
   digit goes to is outlined in the system's highlight. */
@media (forced-colors: active) {
  .otp .otp-input { forced-color-adjust: none; color: transparent; }
  .otp.is-focused .otp-box.is-next { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* ---- The staging code (STAGE-1, staging only, never production): the kit's warning callout ---- */
.card .staging-code { margin-top: var(--block); text-align: start; }
.card .staging-code .ui-callout-body { display: grid; gap: var(--row); justify-items: start; }
.staging-code-value {
  display: inline-block; padding: 0 var(--sp-8); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--raised); color: var(--text); font: var(--type-body); font-family: var(--mono); font-weight: 600;
  letter-spacing: .18em; unicode-bidi: isolate;
}
.card .staging-code .btn { width: auto; height: var(--h-md); margin-top: 0; padding: 0 var(--sp-16); font: var(--type-small); font-weight: 600; }
.card .staging-code-filled { color: var(--text); font: var(--type-small); font-weight: 600; }
.card .staging-code-filled:empty { display: none; }

/* ---- Two-step sign-in (P-45) ---- */
/* The authenticator's code and a recovery code: one field, in the code face, centred */
.card .input.code-field { font: var(--type-lede); font-family: var(--mono); letter-spacing: var(--track-caps); text-align: center; }
/* The enrolment's two numbered steps (pages.css .howto) */
.card .howto { margin-top: var(--block); }
.card .howto li > div { display: grid; min-width: 0; }
.card .howto p:not(.note) { color: var(--text); font: var(--type-body); }
.card .howto .field { margin-top: 0; }
/* The code to scan stays black on white, whatever the page around it: that is what a camera reads. */
.two-step-qr {
  width: 184px; margin: var(--stack) 0 0; padding: var(--sp-12); border-radius: var(--r-md);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line-2);
}
.two-step-qr-code { display: block; width: 100%; height: auto; }
.card .enroll-key { margin-top: var(--row); }
.card .enroll-key code {
  display: inline-block; max-width: 100%; padding: var(--sp-4) var(--sp-8); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--raised); color: var(--text); font: var(--type-caption); font-family: var(--mono); font-weight: 600;
  overflow-wrap: anywhere;
}
/* The recovery codes: two columns of codes, left to right inside Arabic too (two-step.js) */
.card .two-step-codes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--row) var(--block);
  margin: var(--block) 0 0; padding: var(--in-s); padding-inline-start: calc(var(--in-s) + var(--sp-24));
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--ground);
  color: var(--text-2); font: var(--type-small); font-variant-numeric: tabular-nums;
}
.card .two-step-codes code { color: var(--text); font: var(--type-small); font-family: var(--mono); font-weight: 600; letter-spacing: .04em; }
#saved-page { display: grid; padding: 0; }
#saved-page:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: var(--sp-4); border-radius: var(--r-md); }
/* Print and Download, side by side under the codes */
.card .row-actions { display: flex; flex-wrap: wrap; gap: var(--row); margin-top: var(--stack); }
.card .row-actions .btn { width: auto; height: var(--h-md); margin-top: 0; padding: 0 var(--sp-16); font: var(--type-small); font-weight: 600; }
/* Printing the codes: only the codes page, in ink on paper. The card clips what leaves it on screen
   (pages.css .card), and the codes page leaves the flow here, so the card lets it show. */
@media print {
  html.two-step-printing { color-scheme: light; }
  html.two-step-printing, html.two-step-printing body { background: Canvas !important; }
  html.two-step-printing .card { overflow: visible !important; }
  html.two-step-printing body * { visibility: hidden !important; }
  html.two-step-printing .two-step-print, html.two-step-printing .two-step-print * {
    visibility: visible !important; color: CanvasText !important; background: Canvas !important;
    border-color: CanvasText !important; box-shadow: none !important; -webkit-text-fill-color: CanvasText !important;
  }
  html.two-step-printing .two-step-print { position: absolute; inset-block-start: 0; inset-inline: 0; }
}

/* ---- Single sign-on: a quiet way in under the email step, and the way on when a workspace insists ---- */
.card .sso { display: grid; justify-items: start; margin-top: var(--block); padding-top: var(--split); border-top: 1px solid var(--line); }
.card .sso .link { font: var(--type-small); }
.card .sso .step-form { justify-self: stretch; margin-top: var(--stack); }
.card .sso .field { margin-top: 0; }

/* ---- Words over a whole form: a refusal from the server, and an action's status ---- */
.card .form-error {
  margin: 0 0 var(--stack); padding: var(--sp-12) var(--in-s); border: 1px solid var(--err-line); border-radius: var(--r-md);
  background: var(--err-soft); color: var(--err); font: var(--type-small); font-weight: 600;
}
.card .status { margin-top: var(--stack); color: var(--text-2); font: var(--type-small); }

/* ---- The profile: the reference's last sign-in step (its name) with every field the account keeps ----
   Wider than the sign-in card: six of the grid's columns at XL (600) and the card's 32 each side. */
.card.profile-card { max-width: calc(600px + 2 * var(--in-l)); }
/* The profile and the account card stack in one column, a gutter apart. */
.auth-main.stack { row-gap: var(--gutter); padding-block: var(--head-top) var(--sec); }
.auth-main.stack > .card { margin-block: 0; }
.card .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--stack); margin-top: var(--block); }
.card .field-grid .field { margin-top: 0; align-content: start; }
.card .field-grid .field-wide { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .card .field-grid { grid-template-columns: minmax(0, 1fr); } }
.card .profile-form { display: grid; }
.card .profile-form > .note { margin-top: var(--stack); }
.card .skip { justify-self: center; margin-top: var(--stack); font: var(--type-small); }
/* The account and its data: rows on hairlines, each with its own button */
.card .data-card-head { font: var(--type-title); letter-spacing: var(--track-title); }
.card .data-rows { display: grid; margin-top: var(--block); }
.card .data-row { display: flex; align-items: center; justify-content: space-between; gap: var(--split); padding-block: var(--split); border-top: 1px solid var(--line); }
.card .data-row:first-child { padding-top: 0; border-top: 0; }
.card .data-row strong { display: block; color: var(--text); font: var(--type-body); font-weight: 600; }
.card .data-row p { margin-top: var(--pair); color: var(--text-2); font: var(--type-small); }
.card .data-row .btn, .card .delete-actions .btn {
  flex: none; width: auto; height: var(--h-md); margin-top: 0; padding: 0 var(--sp-16); font: var(--type-small); font-weight: 600;
}
@media (max-width: 767.98px) {
  .card .data-row { flex-direction: column; align-items: stretch; gap: var(--stack); }
  .card .data-row .btn { justify-self: start; align-self: flex-start; }
  .card .delete-actions .btn { flex: 1 1 100%; }
}
/* The invoices this account paid in workspaces it handed over: a list under its row's words. */
.card .data-row.data-row-list { display: block; }
.card .my-invoices { display: grid; gap: var(--pair); margin: var(--row) 0 0; padding: 0; list-style: none; }
.card .my-invoices li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pair) var(--row);
  padding: var(--pair) 0; border-top: 1px solid var(--line); color: var(--text-2); font: var(--type-small);
}
.card .my-invoices li span { min-width: 0; overflow-wrap: anywhere; }
.card .my-invoices li strong { display: inline; color: var(--text); font: var(--type-small); font-weight: 600; }
.card .my-invoices a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.card .data-row-list .btn { margin-top: var(--row); }
/* A button that removes something for good speaks in the error colour. */
.btn.danger { color: var(--err); }
.btn.danger::before { background: var(--err-soft); box-shadow: inset 0 0 0 1px var(--err-line); }
.card .delete-confirm {
  display: grid; gap: var(--stack); margin-top: var(--split); padding: var(--in-s);
  border: 1px solid var(--err-line); border-radius: var(--r-lg); background: var(--err-soft);
}
.card .delete-confirm .field { margin-top: 0; }
.card .delete-confirm .form-error { margin: 0; }
/* The sweep, B14: changing the sign-in email is not a deletion: the same form, in the page's own colours. */
.card .email-change { border-color: var(--line); background: transparent; }
.card .delete-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--row); }

/* ---- The unsubscribe card: what the link is about, the question, one button ---- */
.card .eyebrow { margin-bottom: var(--row); color: var(--text-2); }
.card .lone-btn { margin-top: var(--block); }
.card .lone-err { margin-top: var(--row); }

/* ---- .auth-card: the same card for the hosted chat page's "not active" state. That page loads neither
   brand.css nor pages.css (their rules by tag would reach the customer's chat), so the card is drawn here. ---- */
.auth-card {
  position: relative; overflow: hidden; box-sizing: border-box; width: min(100%, 424px); display: grid; align-content: start;
  padding: var(--in-l); border-radius: var(--r-xl); background: var(--panel); border: 1px solid var(--line-2);
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.9); color: var(--text); font: var(--type-body);
}
.auth-card .auth-eyebrow { margin: 0 0 var(--row); color: var(--text-2); font: var(--type-micro); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
.auth-card h1 { margin: 0; color: var(--text); font: var(--type-title); letter-spacing: var(--track-title); text-wrap: balance; }
.auth-card .auth-lead { margin: var(--row) 0 0; color: var(--text-2); font: var(--type-body); text-wrap: pretty; }
html[dir="rtl"] .auth-card { font-family: var(--font-arabic), var(--body); }
html[dir="rtl"] .auth-card :is(h1, .auth-eyebrow, .auth-lead) { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }

/* ===== Arabic: html[dir="rtl"], set by assets/i18n.js before the first paint. The flex and grid layouts
   mirror on their own; this is the Arabic face (no negative tracking). ===== */
html[dir="rtl"] .auth { font-family: var(--font-arabic), var(--body); }
/* The page's form fields keep their own face (Manrope first, Arabic letters from the fallback), as across the
   site: only the kit's own surfaces take the Arabic face. */
html[dir="rtl"] .auth :is(.bar, .card) :is(h1, h2, p, label, button, a, li, strong, b, span) { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }
html[dir="rtl"] .auth .bar .logo, html[dir="rtl"] .auth .bar .logo span { font-family: var(--display); letter-spacing: var(--track-wordmark); }
html[dir="rtl"] .auth .card h1 { line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .otp.is-focused .otp-box.is-next:empty::after { animation: none; }
}