/* Practiceful chrome around the shared int_auth screen (int_auth/base.html).
   The package's auth.css is self-contained; this only puts it under the marketing
   top bar and in Practiceful's palette. */
:root {
  --ia-bg: #f4f5f7;
  /* The ONE action on an auth screen (Log in, Create account, Confirm, Check my
     status) is the sand btn-secondary of UI.md, not a third near-black colour
     (design QA round 1). Dark ink on sand is 11:1. */
  --ia-accent: #F7DEB6;
  --ia-accent-ink: #1F2937;
  --ia-info: #1b4f72;
  /* App greys rather than the package's warm brown-greys. */
  --ia-ink: #1F2937;
  --ia-muted: #4B5563;
  --ia-border: #D1D5DB;
}
/* The app's typeface (Inter, via volt's --bs-body-font-family), not the package's
   system-ui stack: the door and the house were set in two faces. */
.ia-body, .ia-body .ia-button, .ia-body .ia-link-button, .ia-body input, .ia-body button {
  font-family: var(--bs-body-font-family, Inter, system-ui, sans-serif);
}
.ia-button:hover:not([disabled]) { background: #F0CF9A; }
/* The active tab underline is drawn in ink: sand on white is ~1.3:1 as a state mark. */
.ia-tab.is-active { border-bottom-color: #1F2937; }
/* Links inside the card are read, so they need >= 4.5:1 (the volt slate was 2.5:1). */
.ia-card a:not(.ia-button):not(.ia-secondary):not(.ia-tab) { color: #374151; text-decoration: underline; }
.ia-link-button { color: #374151; min-height: 44px; padding: .5rem .25rem; }
/* volt draws `.navbar-main` absolutely over whatever comes first; on this page the
   first thing is the card, so the bar is put back into normal flow. */
.pf-auth-topbar .navbar-main { position: static; }
.pf-auth-main { min-height: calc(100vh - 5rem); align-items: flex-start; }
.pf-auth-column { width: 100%; max-width: 28rem; }
.pf-auth-messages .ia-alert { margin-bottom: .75rem; }
.ia-extra { margin-top: 1rem; }
.ia-extra .ia-or { text-align: center; color: var(--ia-muted); font-size: .85rem; margin: .75rem 0; }
.ia-extra .ia-secondary { display: block; width: 100%; text-align: center; padding: .65rem 1rem;
  border: 1px solid var(--ia-border); border-radius: .4rem; color: var(--ia-ink);
  text-decoration: none; font-weight: 600; background: #fff; }
.ia-extra .ia-secondary:focus-visible { outline: 3px solid var(--ia-info); outline-offset: 2px; }
.ia-forgot { margin: .5rem 0 0; text-align: right; font-size: .9rem; }
.pf-qa-logins { margin-top: 1.25rem; border: 1px solid #d4a72c; border-radius: .4rem; padding: .75rem; }
.pf-qa-logins p { margin: 0 0 .5rem; font-size: .8rem; color: var(--ia-muted); }
.pf-qa-logins button { display: block; width: 100%; text-align: left; background: #fff;
  border: 1px solid var(--ia-border); border-radius: .3rem; padding: .4rem .6rem; margin: 0 0 .3rem;
  font: inherit; font-size: .85rem; cursor: pointer; }
/* The alpha welcome page in Practiceful chrome (int_alpha/welcome.html). */
.pf-welcome-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.25rem; }
.pf-welcome-actions form { margin: 0; }
.pf-welcome-actions .ia-button { width: auto; }
/* The Alpha terms page (int_alpha/terms.html): a reading measure, a type scale in
   which the title rules the clauses, and a way back at both ends. */
.pf-auth-column:has(.pf-terms-card) { max-width: 44rem; }
.pf-terms-card h1.pf-terms-title { font-size: 1.75rem; font-weight: 700; text-wrap: balance; margin-bottom: .25rem; }
.pf-terms-version { color: var(--ia-muted); font-size: .875rem; margin-bottom: 1.5rem; }
.pf-terms-card h2.pf-terms-clause { font-size: 1.125rem; font-weight: 600; margin: 1.75rem 0 .5rem; text-wrap: balance; }
.pf-terms-card p { line-height: 1.6; }
.pf-terms-back-row { margin: 0 0 .75rem; }
.pf-terms-back { display: inline-flex; align-items: center; min-height: 44px; color: #374151; text-decoration: underline; }
.pf-terms-end { margin-top: 2rem; }
.pf-terms-end .ia-button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; text-decoration: none; }
/* ---- Design QA round 1, area schedule_b (login / register / MFA) ---- */
/* "Send code" was an outline sand-text button (~1.8:1) that read as disabled. It is a
   supporting action, so it takes the slate role, at the input's height. */
.ia-body [data-phone-step] .btn-outline-secondary {
  background: #C7CBD9; border-color: #C7CBD9; color: #1F2937; font-weight: 600; min-height: 44px; }
.ia-body [data-phone-step] .btn-outline-secondary:hover { background: #B4B9CB; border-color: #B4B9CB; color: #1F2937; }
.ia-body [data-phone-step] .form-control { min-height: 44px; }
/* Every field label in one weight and ink ("Mobile number" rendered lighter). */
.ia-body [data-phone-step] .form-label { font-weight: 600; color: var(--ia-ink); }
/* The dev/qa test-number hint in the card's own info style, not a fourth blue. */
.ia-body [data-phone-test-hint] { background: #EEF4FA; border: 0; border-left: 4px solid var(--ia-info); color: var(--ia-ink); }
/* Agreement checkboxes: a real box in the app's ink, aligned to the first text line,
   the whole row a 44px target, and room above the first one. */
.ia-body .ia-check { min-height: 44px; align-items: flex-start; margin-top: .25rem; }
.ia-body .ia-check input[type="checkbox"] { width: 1.125rem; height: 1.125rem; margin-top: .2rem; accent-color: #4B5563; flex: 0 0 auto; }
.ia-body .ia-check label { cursor: pointer; padding-bottom: .25rem; }
.ia-body .ia-extra + .ia-check, .ia-body .ia-extra .ia-hint { margin-bottom: 1rem; }
/* The security check spans the column like the fields around it. */
.ia-body .ia-altcha altcha-widget { --altcha-max-width: 100%; display: block; width: 100%; }
/* The "or" divider gets its hairlines. */
.ia-extra .ia-or { display: flex; align-items: center; gap: .75rem; }
.ia-extra .ia-or::before, .ia-extra .ia-or::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--ia-border); }
/* MFA: the one value the person types is the largest thing on the card. */
.ia-body .int-otp-code { font-size: 1.5rem; min-height: 3rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* An address must not break at its hyphen: it becomes one unit, wrapping only if it is
   longer than the line. */
.ia-body #mfa-address, .ia-body #alpha-welcome-email { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
/* Both exits under the MFA form share one link style and a 44px target. */
.ia-body .ia-switch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; color: #374151; text-decoration: underline; }
/* Dev/QA persona buttons: one line each at 390, the full address in the tooltip. */
.pf-qa-logins button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 44px; }
/* The welcome page's reduced bar drew the light wordmark on the pale page ground
   (invisible at 1440). It carries the marketing bar's dark ground. */
.pf-welcome-bar { background-color: #3D4357; }
.pf-terms-index { border: 1px solid var(--ia-border); border-radius: .5rem; padding: .75rem 1rem; margin: 1rem 0 .5rem; }
.pf-terms-index ol { list-style: none; margin: 0; padding: 0; columns: 2 14rem; column-gap: 1.5rem; }
.pf-terms-index li { break-inside: avoid; }
.pf-terms-index a { display: inline-flex; align-items: center; min-height: 36px; color: #374151; }
.pf-terms-card section { scroll-margin-top: 1rem; }
/* The package caps every .ia-card at 28rem; the terms card is a reading page and gets
   the same 44rem as its column, which the :has() rule above already widens. */
.ia-card.pf-terms-card { max-width: none; }
/* ---- Design QA round 2 (staff batch C: login / register / MFA) ---- */
/* ONE sand button per screen. The marketing bar's sand "Sign up for the alpha" sat
   beside the card's own sand action (Log in / Create account / Confirm). On the auth
   screens it is drawn as one of the bar's text links: still there, still the way to
   sign up, no longer competing with the button the page exists for. */
.pf-auth-topbar [data-signup-cta] {
  background: transparent; border-color: transparent; box-shadow: none;
  color: #fff; font-size: 1rem; font-weight: 500; padding: .5rem 0;
  text-decoration: underline; text-underline-offset: .2em; }
.pf-auth-topbar [data-signup-cta]:hover,
.pf-auth-topbar [data-signup-cta]:focus { background: transparent; border-color: transparent; color: #F7DEB6; }
/* The bot check in the card's own language: the input border and radius, and the
   app's slate instead of the browser's stock blue (#0d6efd, the one off-palette
   colour on the form). It solves by itself, so it is quiet. */
.ia-body altcha-widget {
  --altcha-border-radius: .4rem; --altcha-color-border: var(--ia-border);
  --altcha-color-border-focus: #4B5563; --altcha-color-text: var(--ia-ink);
  --altcha-color-active: #4B5563; accent-color: #4B5563; font-size: .9375rem; }
/* The two links under Log in share one alignment (they were centred and right). */
.ia-body .ia-forgot { text-align: center; margin-top: 0; }
/* Google's sign-in button carries the "G" mark (Google branding), in the neutral
   variant: white, a hairline in the input border colour, the mark left of the label. */
.ia-extra .ia-secondary { display: flex; align-items: center; justify-content: center; gap: .625rem; min-height: 44px; }
.ia-extra .ia-secondary .pf-google-g { width: 18px; height: 18px; flex: 0 0 auto; }
.ia-extra .ia-secondary:hover { background: #F9FAFB; }
/* Dev / QA only surfaces look deliberately foreign: dashed, tagged, never a product
   component. The persona rows put the role over the address, so nothing truncates. */
.pf-qa-logins { border-style: dashed; }
.pf-dev-only { border: 1px dashed var(--ia-info); background: #F3F7FB; }
.pf-dev-only-tag, .pf-qa-logins .pf-dev-only-tag { display: inline-block; margin-right: .5rem; padding: .1rem .4rem;
  border-radius: .25rem; background: #FDF3D7; color: #6B4E00; font-size: .6875rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: .1em; }
.pf-qa-logins button { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.pf-qa-logins button .pf-qa-role { display: block; font-weight: 700; }
.pf-qa-logins button .pf-qa-email { display: block; color: var(--ia-muted); font-size: .8125rem; overflow-wrap: anywhere; }
/* Hover darkens the sand only where there is a pointer to hover with. On a touch
   screen the state stuck after a tap and the 390 capture showed a "pressed" button. */
@media (hover: none) { .ia-button:hover:not([disabled]) { background: var(--ia-accent); } }
.ia-button:focus-visible { outline: 3px solid #4B5563; outline-offset: 2px; }
/* MFA: the code field spans the column like the Confirm button under it, digits
   centred and tracked. */
.ia-body .int-otp-code { max-width: none; width: 100%; text-align: center; letter-spacing: .3em; }
.ia-body .ia-title { font-size: 1.5rem; font-weight: 600; }
/* "Resend code" is a recovery, "Back to log in" an exit: they were two identical
   centred links. The exit sits at the card foot, smaller. */
.ia-body #mfa-resend-form { text-align: center; margin-bottom: .25rem; }
.ia-body #mfa-back { font-size: .875rem; }
/* The MFA card stands in the middle of the page rather than pinned to its top. */
.pf-auth--int_auth_mfa .pf-auth-main { align-items: center; }
/* The consent lines read as legal small print, not as headings; a link never breaks
   across lines ("Privacy / Policy."). */
.ia-body .ia-check label { font-weight: 400; font-size: .9375rem; text-wrap: pretty; }
.ia-body .ia-check label a { white-space: nowrap; }
/* The dev/qa test-number hint: deliberately foreign (dashed), body digits, not mono. */
.ia-body [data-phone-test-hint] { border: 1px dashed var(--ia-info); border-left-width: 1px; }
.ia-body [data-phone-test-hint] code, .ia-body [data-phone-test-hint] kbd { font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 600; color: inherit; font-size: inherit; padding: 0; background: none; }
/* The tab strip's hairline in the card border colour, the active rule sitting on it. */
.ia-body .ia-tabs { border-bottom-color: var(--ia-border); }
.ia-body .ia-tab.is-active { margin-bottom: -1px; }
/* One quiet legal line under every auth screen. */
.pf-auth-footer { padding: 1.5rem 1rem 2rem; text-align: center; font-size: .875rem; }
.pf-auth-footer nav { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 .5rem; }
.pf-auth-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; color: #374151; text-decoration: underline; text-underline-offset: .15em; }
.pf-auth-footer span { color: var(--ia-muted); }
.pf-auth-main { min-height: calc(100vh - 11rem); }
/* The two consent rows sit as one group (they were ~52px apart). */
.ia-body .ia-check { margin-bottom: .25rem; }
/* ---- Design QA round 2 (staff batch A: alpha terms / alpha welcome) ---- */
/* The agreement carries the brand's navy as a top rule and names itself as a legal
   document above its title, so it reads as the company's own paper. */
.ia-card.pf-terms-card { border-top: 4px solid #3D4357; }
.pf-terms-card p.pf-terms-eyebrow { margin: 0 0 .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #4B5563; }
/* One type scale: lead and clause text at body size, clause headings ABOVE it (they
   were 17px against 19px paragraphs, so each paragraph out-shouted its own title). */
.pf-terms-card p, .pf-terms-card .pf-terms-lead { font-size: 1rem; line-height: 1.65; }
.pf-terms-card h2.pf-terms-clause { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 .5rem; }
.pf-terms-card p.pf-terms-version { color: #4B5563; font-size: .875rem; margin: .5rem 0 1.5rem; }
/* The index: ONE column of quiet entries (two columns wrapped mid-phrase and did not
   share a top line), a hanging indent so a wrapped entry clears its numeral, no
   underline until hover/focus, and the box's radius inside the card's. */
.pf-terms-index { border-radius: .375rem; background: #F9FAFB; }
.pf-terms-index ol { columns: auto; }
.ia-card.pf-terms-card .pf-terms-index a:not(.ia-button):not(.ia-secondary):not(.ia-tab) {
  display: block; min-height: 0; padding: .3125rem 0 .3125rem 1.25em; text-indent: -1.25em;
  font-size: .9375rem; color: #1F2937; text-decoration: none; }
.ia-card.pf-terms-card .pf-terms-index a:not(.ia-button):not(.ia-secondary):not(.ia-tab):hover,
.ia-card.pf-terms-card .pf-terms-index a:not(.ia-button):not(.ia-secondary):not(.ia-tab):focus-visible {
  text-decoration: underline; text-underline-offset: .15em; }
/* The liability capitals (kept as capitals in the source) on their own line with a rule. */
.pf-terms-conspicuous { display: block; margin: .5rem 0; padding-left: .75rem; border-left: 3px solid #3D4357;
  font-weight: 600; color: #1F2937; }
@media (max-width: 575.98px) {
  .pf-terms-card h1.pf-terms-title { font-size: 1.5rem; }
  .ia-card.pf-terms-card .pf-terms-index a:not(.ia-button):not(.ia-secondary):not(.ia-tab) {
    min-height: 44px; padding-top: .625rem; padding-bottom: .625rem; }
  .pf-terms-end .ia-button { width: 100%; }
}
/* The welcome page: the navy top rule of the brand's own documents, the one fact (the
   status) as a chip above the title, next steps as a short list, the card centred in
   the page rather than pinned to its top over an empty field. */
.ia-card.pf-welcome-card { border-top: 4px solid #3D4357; }
.pf-welcome-status { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .75rem;
  padding: .25rem .65rem; border-radius: 999px; background: #E4E7F0; color: #2E3650;
  font-size: .8125rem; font-weight: 600; }
.pf-welcome-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #B07D2B; flex: 0 0 auto; }
.pf-welcome-card h2.pf-welcome-subhead { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.pf-welcome-steps { margin: 0; padding-left: 1.25rem; }
.pf-welcome-steps li { margin-bottom: .4rem; line-height: 1.55; }
.pf-welcome-steps li::marker { color: #4B5563; font-weight: 600; }
.pf-welcome-out { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.pf-welcome-out form { margin: 0; }
.pf-welcome-actions .pf-welcome-notyou { color: var(--ia-muted); }
.pf-welcome-card .pf-welcome-help { margin: 1.25rem 0 0; padding-top: .75rem; border-top: 1px solid var(--ia-border); }
.pf-auth-main:has(#alpha-welcome) { align-items: center; }