/*
 * TendWorks public layout (A3). Used by templates/tw_public_base.html.
 * Layout only: page canvas, auth split layout, brand column, auth card and
 * footer links. Controls (.tw-btn, .tw-field, .tw-input, .tw-alert, .tw-link)
 * come from tw-components.css. Tokens only (tw-tokens.css). Mobile first,
 * min-width breakpoints at 640 / 1024.
 */

/* ── Page canvas ─────────────────────────────────────────────────── */
.tw-public {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--tw-bg);
  color: var(--tw-fg);
  font-family: var(--tw-font-body);
  font-size: var(--tw-text-md);
  line-height: var(--tw-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.tw-public *,
.tw-public *::before,
.tw-public *::after {
  box-sizing: border-box;
}

.tw-public__main {
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
}

/* The skip link moves focus here programmatically; keyboard focus on
   controls still uses the global ring from tw-tokens.css. */
.tw-public__main:focus:not(:focus-visible) {
  outline: none;
}

.tw-public__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tw-space-1) var(--tw-space-4);
  padding: var(--tw-space-4) var(--tw-gutter);
  color: var(--tw-fg-muted);
  font-size: var(--tw-text-sm);
}

.tw-public__footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tw-target);
}

/* The sign-in and account security screens are styled by tw-auth.css
   (wave 4). The password field and one-time code rules below are still
   used by other public pages (candidate sign-in, onboarding). */

/* ── Password field with reveal button ───────────────────────────── */
.tw-password {
  position: relative;
}

.tw-password > input {
  width: 100%;
  padding-right: calc(var(--tw-target) + var(--tw-space-2));
}

.tw-password__toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tw-target);
  height: var(--tw-target);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--tw-radius-md);
  color: var(--tw-fg-muted);
  cursor: pointer;
  transition: color var(--tw-duration-fast) var(--tw-ease-out),
    background-color var(--tw-duration-fast) var(--tw-ease-out);
}

.tw-password__toggle:hover {
  color: var(--tw-fg);
  background: var(--tw-bg-well);
}

.tw-password__toggle svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.tw-password__toggle .tw-password__icon-hide,
.tw-password__toggle[aria-pressed="true"] .tw-password__icon-show {
  display: none;
}

.tw-password__toggle[aria-pressed="true"] .tw-password__icon-hide {
  display: block;
}

/* One-time code: digits spaced for reading back from the email. */
.tw-otp-input {
  font-family: var(--tw-font-mono);
  font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
}

.tw-otp-timer {
  margin: 0;
  color: var(--tw-fg-muted);
  font-size: var(--tw-text-sm);
}

.tw-otp-timer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tw-target);
  font-size: var(--tw-text-md);
}

/* Authenticator setup (base/auth/mfa_setup.html). */

.tw-auth__steps {
  margin: 0 0 var(--tw-space-4);
  padding-left: var(--tw-space-5);
  color: var(--tw-fg-muted);
}

.tw-auth__steps li + li {
  margin-top: var(--tw-space-1);
}

.tw-auth__qr {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--tw-space-3);
  padding: var(--tw-space-3);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
  background: var(--tw-bg-raised);
}

.tw-auth__secret {
  margin: 0 0 var(--tw-space-5);
  text-align: center;
}

.tw-auth__secret code {
  display: inline-block;
  margin-top: var(--tw-space-1);
  padding: var(--tw-space-1) var(--tw-space-2);
  border-radius: var(--tw-radius-sm);
  background: var(--tw-accent-bg);
  color: var(--tw-fg);
  user-select: all;
  overflow-wrap: anywhere;
}