/* Opt-in public form primitives. Pages outside .tvc-form keep their existing
   foundation controls and visual rules untouched. */
body.tvc-public-shell .tvc-form {
  --form-text: var(--tvc-public-text, #26231f);
  --form-muted: var(--tvc-public-muted, #706b64);
  --form-faint: var(--tvc-public-faint, #948f87);
  --form-rule: var(--tvc-public-border, rgba(45, 39, 33, .18));
  --form-surface: var(--tvc-public-surface-2, #f1f0eb);
  --form-control-height: 52px;
  --form-control-padding-x: 15px;
  --form-control-radius: 5px;
  --form-label-size: 11px;
  --form-label-color: var(--form-text);
  --form-label-gap: 7px;
  --form-input-size: 15px;
  --form-input-padding-x: var(--form-control-padding-x);
  --form-field-gap: 19px;
  --form-accent: var(--tvc-public-text, #26231f);
  --form-focus-ring: color-mix(in srgb, var(--form-accent) 16%, transparent);
  --form-focus-width: 3px;
  --form-focus-offset: 1px;
  --form-checkbox-size: 17px;
  --form-checkbox-gap: 11px;
  --form-error: #87382e;
  --form-error-border: rgba(135, 56, 46, .3);
  --form-error-surface: #f8eeeb;
  --form-primary: var(--tvc-public-text, #26231f);
  --form-primary-ink: var(--tvc-site-background, #f8f7f3);
  --form-button-height: var(--form-control-height);
  --form-button-padding: 13px 20px;
  --form-button-radius: var(--form-control-radius);
  --form-button-size: 13px;
  --form-link-color: var(--form-text);
  --form-link-hover: var(--form-muted);
  --form-error-size: 12px;
  --form-error-line-height: 1.45;
  width: 100%;
  color: var(--form-label-color);
}

/* State visibility is part of the component contract, not presentation.
   Never let a checkbox/link layout rule expose a hidden auth control. */
body.tvc-public-shell .tvc-form .hidden,
body.tvc-public-shell .tvc-form [hidden] {
  display: none !important;
}

body.tvc-public-shell .tvc-form .password-wrap {
  margin-bottom: var(--form-field-gap);
}

body.tvc-public-shell .tvc-form .password-wrap .text-input {
  margin-bottom: 0;
}

/* Labels and fields */
body.tvc-public-shell .tvc-form .field-label {
  display: block;
  margin: 0 0 var(--form-label-gap);
  color: var(--form-text);
  font-size: var(--form-label-size);
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1.4;
  text-transform: none;
}

body.tvc-public-shell .tvc-form :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select
) {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--form-control-height);
  margin: 0 0 var(--form-field-gap);
  padding: 0 var(--form-input-padding-x);
  border: 1px solid var(--form-rule);
  border-radius: var(--form-control-radius);
  background: var(--form-surface);
  color: var(--form-text);
  font: 400 var(--form-input-size)/1.4 var(--tvc-font-sans, "DM Sans", sans-serif);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

body.tvc-public-shell .tvc-form textarea {
  min-height: 112px;
  padding-block: 12px;
  resize: vertical;
}

body.tvc-public-shell .tvc-form select {
  cursor: pointer;
}

body.tvc-public-shell .tvc-form :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select
)::placeholder {
  color: var(--form-muted);
  opacity: 1;
}

body.tvc-public-shell .tvc-form :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select
):focus-visible {
  border-color: var(--form-accent);
  outline: var(--form-focus-width) solid var(--form-focus-ring);
  outline-offset: var(--form-focus-offset);
  box-shadow: none;
}

body.tvc-public-shell .tvc-form :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select
)[aria-invalid="true"] {
  border-color: var(--form-error);
}

body.tvc-public-shell .tvc-form .password-wrap {
  position: relative;
}

body.tvc-public-shell .tvc-form .password-wrap input {
  padding-right: 68px;
}

body.tvc-public-shell .tvc-form .password-toggle {
  position: absolute;
  top: 0;
  right: 14px;
  height: var(--form-control-height);
  min-width: 44px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--form-muted);
  font: 500 11px/1.3 var(--tvc-font-sans, "DM Sans", sans-serif);
  cursor: pointer;
}

/* Check rows */
body.tvc-public-shell .tvc-form :is(.check-row, .remember-label) {
  display: flex;
  align-items: flex-start;
  gap: var(--form-checkbox-gap);
  margin: 0 0 13px;
  padding: 5px 0;
  color: var(--form-muted);
  cursor: pointer;
}

body.tvc-public-shell .tvc-form :is(.check-row, .remember-label) input[type="checkbox"] {
  width: var(--form-checkbox-size);
  height: var(--form-checkbox-size);
  min-height: var(--form-checkbox-size);
  margin: 1px 0 0;
  padding: 0;
  flex: 0 0 var(--form-checkbox-size);
  accent-color: var(--form-accent);
  cursor: pointer;
}

body.tvc-public-shell .tvc-form :is(.check-row, .remember-label) span {
  color: var(--form-muted);
  font-size: 13px;
  line-height: 1.45;
}

body.tvc-public-shell .tvc-form :is(.check-row, .remember-label) span small {
  display: block;
  margin-top: 4px;
  color: var(--form-faint);
  font-size: 12px;
  line-height: 1.5;
}

/* Actions, text links, and validation */
body.tvc-public-shell .tvc-form .primary-btn {
  display: block;
  width: 100%;
  min-height: var(--form-button-height);
  margin: 13px 0 0;
  padding: var(--form-button-padding);
  border: 1px solid var(--form-primary) !important;
  border-radius: var(--form-button-radius) !important;
  background: var(--form-primary) !important;
  color: var(--form-primary-ink) !important;
  font: 500 var(--form-button-size)/1.2 var(--tvc-font-sans, "DM Sans", sans-serif) !important;
  letter-spacing: .015em;
  text-transform: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

body.tvc-public-shell .tvc-form .primary-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--form-primary) 84%, var(--form-muted)) !important;
  border-color: color-mix(in srgb, var(--form-primary) 84%, var(--form-muted)) !important;
}

body.tvc-public-shell .tvc-form .primary-btn:active:not(:disabled) {
  transform: translateY(1px);
}

body.tvc-public-shell .tvc-form .primary-btn:disabled {
  opacity: .56;
  cursor: not-allowed;
}

body.tvc-public-shell .tvc-form a,
body.tvc-public-shell .tvc-form .form-link,
body.tvc-public-shell .tvc-form .switch-copy button {
  color: var(--form-link-color);
  text-underline-offset: 3px;
}

body.tvc-public-shell .tvc-form a:hover,
body.tvc-public-shell .tvc-form .form-link:hover,
body.tvc-public-shell .tvc-form .switch-copy button:hover {
  color: var(--form-link-hover);
}

body.tvc-public-shell .tvc-form .field-error {
  display: none;
  margin: -12px 0 16px;
  color: var(--form-error);
  font-size: var(--form-error-size);
  line-height: var(--form-error-line-height);
}

body.tvc-public-shell .tvc-form .field-error.visible {
  display: block;
}

body.tvc-public-shell .tvc-form :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select
)[aria-invalid="true"] {
  outline-color: var(--form-error-border);
}

body.tvc-public-shell .tvc-form #error-msg,
body.tvc-public-shell .tvc-form .form-error {
  margin-top: 15px;
  padding: 12px 14px;
  border: 1px solid var(--form-error-border);
  border-radius: var(--form-control-radius);
  background: var(--form-error-surface);
  color: var(--form-error);
  font-size: 13px;
  line-height: 1.5;
}

body.tvc-public-shell .tvc-form #error-msg.hidden {
  display: none;
}

/* Authentication-specific composition; primitives above remain reusable. */
body.tvc-auth-page .tvc-form .auth-tabs {
  display: none;
}

body.tvc-auth-page .tvc-form .step {
  display: flex;
  flex-direction: column;
  width: 100%;
}

body.tvc-auth-page .tvc-form .step.hidden {
  display: none;
}

body.tvc-auth-page .tvc-form .field-label {
  margin-bottom: var(--form-label-gap);
}

body.tvc-auth-page .tvc-form .text-input {
  height: var(--form-control-height);
  padding-inline: var(--form-input-padding-x);
  background: var(--form-surface);
  color: var(--form-text);
  font-size: var(--form-input-size);
}

body.tvc-auth-page .tvc-form .text-input:focus,
body.tvc-auth-page .tvc-form .text-input:focus-visible {
  background: var(--tvc-site-background, #f8f7f3);
  border-color: var(--form-accent);
  outline: var(--form-focus-width) solid var(--form-focus-ring) !important;
  outline-offset: var(--form-focus-offset) !important;
  box-shadow: none;
}

body.tvc-auth-page .tvc-form .forgot-btn {
  width: auto;
  align-self: flex-end;
  margin: -12px 0 18px;
  padding: 3px 0;
  color: var(--form-muted);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

body.tvc-auth-page .tvc-form .forgot-btn:hover {
  color: var(--form-text);
  text-decoration: underline;
}

body.tvc-auth-page .tvc-form .account-consent {
  margin: 0 0 5px;
  color: var(--form-muted);
  font-size: 12px;
  line-height: 1.55;
}

body.tvc-auth-page .tvc-form .account-consent a {
  color: var(--form-text);
}

body.tvc-auth-page .tvc-form #legal-links {
  display: none;
}

body.tvc-auth-page .tvc-form .switch-copy {
  margin: 20px 0 0;
  color: var(--form-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

body.tvc-auth-page .tvc-form .switch-copy button {
  margin-left: 3px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 13px/1.5 var(--tvc-font-sans, "DM Sans", sans-serif);
  cursor: pointer;
}

body.tvc-auth-page .tvc-form .divider {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 23px 0 14px;
  color: var(--form-faint);
  font-size: 10px;
  line-height: 1.4;
  text-transform: none;
}

body.tvc-auth-page .tvc-form .divider::before,
body.tvc-auth-page .tvc-form .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--form-rule);
}

body.tvc-auth-page .tvc-form .auth-icons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}

body.tvc-auth-page .tvc-form .auth-icons .social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0 12px;
  gap: 9px;
  border: 1px solid var(--form-rule);
  border-radius: var(--form-control-radius);
  background: transparent;
  color: var(--form-text);
  font: 500 12px/1.2 var(--tvc-font-sans, "DM Sans", sans-serif);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}

body.tvc-auth-page .tvc-form .auth-icons .social-btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

body.tvc-auth-page .tvc-form .auth-icons .social-btn:hover {
  border-color: color-mix(in srgb, var(--form-text) 34%, transparent);
  background: var(--form-surface);
}

body.tvc-auth-page .tvc-form .otp-hint,
body.tvc-auth-page .tvc-form .step-sub {
  margin: 0 0 22px;
  color: var(--form-muted);
  font-size: 14px;
  line-height: 1.6;
}

body.tvc-auth-page .tvc-form .otp-hint strong {
  color: var(--form-text);
  font-weight: 500;
}

body.tvc-auth-page .tvc-form :is(#otp-input, #recovery-code-input) {
  font-size: 21px;
  letter-spacing: .24em;
}

body.tvc-auth-page .tvc-form :is(.ghost-btn, .resend-btn) {
  color: var(--form-muted);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

body.tvc-auth-page .tvc-form :is(.ghost-btn, .resend-btn):hover {
  color: var(--form-text);
}

body.tvc-auth-page .tvc-form .spinner {
  border-color: var(--form-rule);
  border-top-color: var(--form-accent);
}

@media (max-width: 700px) {
  body.tvc-public-shell .tvc-form {
    --form-control-height: 52px;
    --form-control-padding-x: 14px;
  }

  body.tvc-auth-page .tvc-form .text-input {
    font-size: 16px;
  }

  body.tvc-auth-page .tvc-form .auth-icons {
    grid-template-columns: 1fr;
  }

  body.tvc-auth-page .tvc-form .auth-icons .social-btn {
    height: 48px;
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tvc-public-shell .tvc-form .primary-btn,
  body.tvc-auth-page .tvc-form .auth-icons .social-btn {
    transition: none;
  }
}