/*
 * ACCOUNT, SECURITY, DELETE ACCOUNT, DELETE BUSINESS (remy-hq design/vettar-signin-v3.html). The screens use the ported
 * mockup classes (v3-*, ../_ported.css). This file holds only what that port leaves out: the stand-in fingerprint sheet
 * the prototype draws (a real phone draws its own), the inline row on the Owners Home, and the notice toast.
 * Every animation is a transform or opacity.
 */

/* the prototype's stand-in for the phone's own fingerprint sheet (mockup ".sys") */
.v3a-sys .v3-bs {
  background: #f8f9fc;
  color: #1b1b1f;
  text-align: center;
  padding: 26px 22px 14px;
  font-family: Roboto, "Inter", system-ui, sans-serif;
}
.v3[data-app="owners"] .v3a-sys .v3-bs {
  background: #202124;
  color: #e3e3e3;
}
.v3a-sys .v3a-app {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #5f6368;
}
.v3[data-app="owners"] .v3a-sys .v3a-app {
  color: #9aa0a6;
}
.v3a-sys .v3a-app .v3-orb {
  --s: 22px;
  box-shadow: none;
}
.v3a-sys h3 {
  margin: 14px 0 4px;
  font: 400 22px Roboto, "Inter", sans-serif;
  letter-spacing: 0;
}
.v3a-sys .v3a-sub {
  font-size: 14px;
  color: #5f6368;
}
.v3[data-app="owners"] .v3a-sys .v3a-sub {
  color: #9aa0a6;
}
.v3a-sys .v3a-fpc {
  margin: 26px auto 10px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #0b57d0;
  box-shadow: inset 0 0 0 1.5px #c4c7c5;
  cursor: pointer;
  border: 0;
  background: none;
  transition: background 0.25s, color 0.25s;
}
.v3[data-app="owners"] .v3a-sys .v3a-fpc {
  color: #a8c7fa;
  box-shadow: inset 0 0 0 1.5px #5f6368;
}
.v3a-sys .v3a-fpc svg {
  width: 38px;
  height: 38px;
}
.v3a-sys.v3a-ok .v3a-fpc {
  background: #0b57d0;
  color: #fff;
  box-shadow: none;
}
.v3[data-app="owners"] .v3a-sys.v3a-ok .v3a-fpc {
  background: #a8c7fa;
  color: #062e6f;
}
.v3a-sys .v3a-hint {
  font-size: 14px;
  color: #5f6368;
  min-height: 20px;
}
.v3[data-app="owners"] .v3a-sys .v3a-hint {
  color: #9aa0a6;
}
.v3a-sys .v3a-sbtns {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
}
.v3a-sys .v3a-sbtns button {
  border: 0;
  background: none;
  color: #0b57d0;
  font: 500 14.5px Roboto, "Inter", sans-serif;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.v3[data-app="owners"] .v3a-sys .v3a-sbtns button {
  color: #a8c7fa;
}

/* a notice that is not good news (the toast's tick becomes a warning) */
.v3-toast.v3a-bad,
.v3-toast.v3a-long {
  white-space: normal;
  width: max-content;
  max-width: calc(100% - 32px);
  text-align: left;
  border-radius: 18px;
}
.v3-toast.v3a-bad svg {
  flex: none;
  color: #f0c060;
}
.v3[data-app="owners"] .v3-toast.v3a-bad svg {
  color: #b26b07;
}

/* the Owners Home row for a business that is being deleted: the same card, drawn in place in the page */
.v3.v3a-inline {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  background: transparent;
  color: var(--tx);
  font-size: 16px;
  padding-top: 10px;
}
.v3.v3a-toastlayer {
  background: transparent;
  pointer-events: none;
  z-index: 95;
}

/* the list of copies of the business (Business settings): quiet rows, no tap */
.v3a-ex .v3-rt small {
  white-space: normal;
}

/* an empty list says so in the mockup's own quiet line */
.v3a-empty {
  margin: 4px 20px 14px;
}

/* the full-screen layers open over the page; the page underneath stays still */
body:has(.v3.v3-layer) {
  overscroll-behavior: none;
}

/* over the app's own drawer too (its shadow sits at z-index 1001) */
.v3.v3a-top {
  z-index: 1200;
}

/* the slim "deletes on" line on the Home: swiped left or right, it hides for 3 days (Deleting.tsx) */
.noticed.slim .notice.notice-swipe {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
/* "Hidden for 3 days. Undo": the one toast with a button, so it takes taps */
.v3-toast.v3a-undo {
  pointer-events: auto;
}
.v3a-undo-go {
  margin-left: 6px;
  min-height: 32px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* the business logo (20 Oct 2026): the logo in place of the two letters, the Business settings row and its sheet */
.v3-av.v3-logo {
  background: #fff;
  overflow: hidden;
  padding: 0;
}
.v3-av.v3-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v3a-logo-row .v3-av {
  font-size: 14px;
}
.v3a-logo-acts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 6px;
}
.v3a-gallery {
  position: relative;
}
.v3a-gallery[aria-disabled] {
  opacity: 0.35;
  pointer-events: none;
}

/* Change password, inside the app (flow.tsx ChangePassword) */
.v3-pwform {
  margin: 0 20px;
}
.v3-pwforgot {
  display: block;
  margin: 14px auto 0;
  padding: 10px;
  border: 0;
  background: none;
  font: 600 14px var(--sans);
  color: var(--tx2);
  cursor: pointer;
}
.v3-pwnote {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}
.v3-pwnote p {
  margin: 0;
  font: 500 15px/1.45 var(--sans);
  color: var(--tx);
}

/* Change email, step one (flow.tsx NewEmail), the founder's picture of 27 Oct 2026 in the business colours: forest #0B3D2E,
   lime #D4E85C. No shadows on buttons. */
.ce-form {
  display: flex;
  flex-direction: column;
  padding: 4px 20px 28px;
}
.ce-hero {
  position: relative;
  display: grid;
  place-items: center;
  height: 200px;
  margin: 0 0 6px;
}
.ce-hero::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212, 232, 92, 0.32), rgba(212, 232, 92, 0.12) 62%, rgba(212, 232, 92, 0));
}
.ce-hero img {
  position: relative;
  width: 160px;
  height: auto;
}
.ce-title {
  margin: 0 0 18px;
  font: 750 28px/1.15 var(--sans);
  letter-spacing: -0.02em;
  color: #0b3d2e;
}
/* the security note: small and soft, as the founder's picture (27 Oct 2026: "too big as compared to the mockup") */
.ce-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(212, 232, 92, 0.14);
  margin-bottom: 20px;
}
.ce-note-i {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #d4e85c;
  color: #0b3d2e;
  display: grid;
  place-items: center;
  font: 800 12px/1 var(--sans);
}
.ce-note b {
  display: block;
  font: 650 13.5px/1.3 var(--sans);
  color: #0b3d2e;
}
.ce-note p {
  margin: 2px 0 0;
  font: 500 12.5px/1.4 var(--sans);
  color: var(--tx2);
}
.ce-label {
  font: 650 14px/1.3 var(--sans);
  color: var(--tx);
  margin: 0 0 8px;
}
.ce-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 8px 0 14px;
  border-radius: 14px;
  background: var(--card, #fff);
  border: 1px solid #e5e5e0;
}
/* a soft grey edge, a shade darker while typing (founder: "ought to be somehow grey and soft like the mockup") */
.ce-field:focus-within {
  border-color: #cfd2cb;
}
.ce-field.ce-err,
.ce-field.ce-err:focus-within {
  border-color: #d92d20;
  border-width: 1.5px;
}
/* the error card under a field (flow.tsx ErrCard), the founder's picture */
.ce-err-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fdecec;
}
.ce-err-i {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f8d4d1;
  color: #d92d20;
  display: grid;
  place-items: center;
  font: 800 15px/1 var(--sans);
}
.ce-err-card b {
  display: block;
  font: 700 14px/1.3 var(--sans);
  color: #c4331b;
}
.ce-err-card p {
  margin: 2px 0 0;
  font: 500 13px/1.4 var(--sans);
  color: var(--tx2);
}
.ce-fi {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--tx2);
}
.ce-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  outline: none;
  font: 500 16px/1 var(--sans);
  color: var(--tx);
}
.ce-field input:focus,
.ce-field input:focus-visible {
  outline: none;
  box-shadow: none;
}
.ce-field input::placeholder {
  color: var(--tx3, #8a8f89);
}
.ce-clear {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tx2);
  display: grid;
  place-items: center;
  padding: 0;
}
.ce-clear svg {
  width: 20px;
  height: 20px;
}
.ce-next {
  margin-top: 22px;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: #0b3d2e;
  color: #fff;
  font: 700 17px/1 var(--sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ce-next svg {
  width: 22px;
  height: 22px;
}

/* Change email, the code (flow.tsx EmailCode), the founder's picture of 27 Oct 2026: white boxes with a soft edge, the box
   being typed in a light lime with a forest edge, Resend code, Verify at the foot. */
.ce-code {
  min-height: 100%;
}
.ce-code .ce-hero {
  height: 190px;
}
.ce-code .ce-hero img {
  width: 170px;
}
.ce-code .ce-title {
  margin-bottom: 0;
}
.ce-code .v3-cells b {
  background: #fff;
  box-shadow: inset 0 0 0 1px #e5e5e0;
  color: #0b3d2e;
}
.ce-code .v3-otp.v3-focus .v3-cells b.v3-on {
  background: rgba(212, 232, 92, 0.16);
  box-shadow: inset 0 0 0 1.5px #0b3d2e;
}
.ce-code .v3-otp.v3-focus .v3-cells b.v3-on::after {
  background: #0b3d2e;
}
/* two lines as the founder's picture: the address sentence, then how long it works; a long address may still wrap */
.ce-code .ce-lead-code {
  margin-left: -8px;
  margin-right: -8px;
  font-size: 13.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ce-code .ce-lead-code span:first-child {
  overflow-wrap: anywhere;
}
/* the question small and grey, Resend code bigger and bold (founder: "didnt get code and resend code sizes are different") */
.ce-resend {
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ce-resend-q {
  font: 500 13.5px/1.4 var(--sans);
  color: var(--tx2);
}
.ce-resend-go {
  border: 0;
  background: none;
  padding: 6px 10px;
  font: 700 16.5px/1.2 var(--sans);
  color: #0b3d2e;
}
.ce-resend-wait {
  padding: 6px 10px;
  font: 700 16.5px/1.2 var(--sans);
  color: var(--tx3, #8a8f89);
}
.ce-fill {
  flex: 1;
  min-height: 28px;
}
.ce-verify {
  margin-top: 0;
}
.ce-next:disabled {
  background: #9db3a8;
  color: #fff;
}

/* Email changed (flow.tsx EmailChanged) */
.ce-done {
  min-height: 100%;
  padding-top: 28px;
}
.ce-hero-big {
  height: 240px;
}
.ce-hero-big::before {
  width: 250px;
  height: 250px;
}
.ce-hero-big img {
  width: 190px;
}
.ce-center {
  text-align: center;
  margin-bottom: 0;
}
.ce-lead {
  margin: 10px 8px 24px;
  text-align: center;
  font: 500 15px/1.45 var(--sans);
  color: var(--tx2);
}
.ce-pair {
  border-radius: 16px;
  background: var(--card, #fff);
  border: 1px solid #e5e5e0;
  padding: 0 16px;
}
.ce-pair-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}
.ce-pair-row + .ce-pair-row {
  border-top: 1px solid #e5e5e0;
}
.ce-pair-row > div {
  min-width: 0;
}
.ce-pair-row small {
  display: block;
  font: 500 13px/1.3 var(--sans);
  color: var(--tx2);
}
.ce-pair-row b {
  display: block;
  margin-top: 3px;
  font: 650 16px/1.3 var(--sans);
  color: var(--tx);
  overflow-wrap: anywhere;
}
.ce-pair-i {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.ce-pair-i .ico,
.ce-pair-i svg {
  width: 20px;
  height: 20px;
}
.ce-pair-old {
  background: #efefea;
  color: var(--tx2);
}
.ce-pair-new {
  background: #d4e85c;
  color: #0b3d2e;
}
.ce-continue {
  margin-top: 32px;
}

/* Change email (flow.tsx NewEmail, EmailCode) */
.v3-emailnote {
  margin: 0 0 6px;
  font: 500 15px/1.45 var(--sans);
  color: var(--tx2);
}
.v3-pwform .v3-cells b {
  background: var(--card, #fff);
  box-shadow: inset 0 0 0 1px var(--ln);
}

/* Change password and Set a password (flow.tsx ChangePassword), the founder's picture of 27 Oct 2026: the back arrow with the title and
   a grey line beside it, the lock, two fields in the Change email look, "Password must have:" (parts.tsx PwRules), Save password. */
.pw-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 20px 0 8px;
  flex: none;
}
.pw-head .v3-ib {
  margin-top: 2px;
}
.pw-head-t {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.pw-title {
  margin: 0;
  font: 750 24px/1.2 var(--sans);
  letter-spacing: -0.02em;
  color: #0b3d2e;
}
.pw-lead {
  margin: 4px 0 0;
  font: 500 15px/1.4 var(--sans);
  color: var(--tx2);
}
.pw-form {
  min-height: 100%;
  padding-top: 0;
}
.pw-hero {
  height: 176px;
  margin: 2px 0 8px;
}
.pw-hero::before {
  width: 190px;
  height: 190px;
}
.pw-hero img {
  width: 180px;
}
.pw-form .ce-field {
  margin-top: 10px;
}
.pw-form .pw-hero + .ce-field {
  margin-top: 0;
}
.pw-form .v3-msg {
  margin: 6px 2px 0;
}
.pw-form .v3-pwr {
  margin-top: 16px;
}
.ce-eye svg {
  width: 22px;
  height: 22px;
}
.pw-form .v3-pwforgot {
  margin-top: 6px;
}
.pw-form .ce-err-card {
  margin-top: 8px;
}
.pw-stale .ce-err-card {
  margin-top: 6px;
}