#loginBtn:focus, #submitBtn:focus, #signupBtn:focus {
  box-shadow: 0 0 12px 0.5px #6666ff84, 0 1px 0 rgba(255,255,255,0.02) inset;
  border-color: var(--accent);
  transform: scale(0.97);
  transition: box-shadow 0.5s, border-color 0.5s, transform 0.5s;
}
#submitBtn:disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
  background: #333 !important;
  color: #8f8f95 !important;
  border: 0.5px solid rgba(128,128,128,0.4) !important;
  box-shadow: none !important;
}
/* Theme variables */
:root{
  --accent: #6699FF;
  --accent-strong: #00FF00;
  --card-bg: #2f3337;
  --surface: #2a2a2a; /* darker surface for inputs */
  --muted: #b0b0c0;
  /* Button theme variables (centralized) */
  --btn-bg: var(--card-bg);
  --btn-color: var(--muted);
  --btn-hover-bg: rgba(255,255,255,0.02);
  --btn-hover-color: var(--muted);
  --content-inset: 36px; /* horizontal inset used by inputs, divider, and button row */
  --side-col-width: 47.5%; /* shared metric for left/right column widths */
}
/* Input and form-input styling moved to inputFields/emailField/emailTheme.css to centralize field-specific themes */
/* See: inputFields/emailField/emailTheme.css */
/* Make prefix inputs behave like other .form-inputs and fill their table cell */
.prefix-input {
    background: var(--surface);
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 3px !important;
  margin: 0 !important;
  text-align: right !important;
}

.prefix-domain {
  position: relative;
  top: -6px;
  font-weight: normal !important;
 }
/* Button rules consolidated further down in the file to keep a single canonical
   definition for #submitBtn, #loginBtn and #signupBtn. Removed an early
   duplicate block to reduce confusion and ensure last-definition wins. */
/* Allow the button container inside the form row to show overflow (avoid clipping) */
.card-table tr.form-row td > div {
  overflow: visible !important;
}
#loginBtn {
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.12);
  transition: box-shadow 0.3s cubic-bezier(.4,0,.2,1), background 0.2s, border-color 1s ease;
}
#loginBtn:hover {
  box-shadow: 0 0 8px 2px #6699FF, 0 2px 8px rgba(25, 118, 210, 0.18);
  /* login hover: use signup blue */
  border-color: rgba(102,102,255,0.5) !important;
}
/* Disable browser default focus outline and selection color */
input:focus, button:focus, select:focus, textarea:focus {
  outline: none;
}
/* focus/selection rules above */
/*.form-input:focus,*/


.style1 {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  transition: color 220ms ease, opacity 220ms ease, transform 240ms ease;
}
/* Button theme from example index.php */
.btn-primary, .btn-secondary {
  background: #2f3337;
  color: #6699ff;
  border-radius: 6px;
  font-weight: 700;
  padding: 0.7rem 1.1rem;
  height: 44px;
  border: 0.5px solid rgba(102,153,255,0.5);
  box-sizing: border-box;
  min-width: 80px;
  white-space: nowrap;
  transition: background 0.2s;
}
.btn-primary:hover, .btn-secondary:hover {
  background: #2f3337;
}

/* Disabled visual state for toggle buttons (greyed out) */
.btn-toggle.disabled,
.btn-toggle[disabled],
button.btn-toggle.disabled,
button.btn-toggle[disabled] {
  opacity: 0.5 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  filter: grayscale(40%) !important;
}
/* Modern, high-quality login card and tidy layout */
 .card-table {
  background: #ac95df1a;
  color: #eee;
  box-shadow: 0 8px 30px rgba(0,0,0,0.55);
  border-radius: 12px;
  padding: 30px 30px 30px 30px; /* top right bottom left: bottom increased to 30px */
  margin: 0px auto;
  max-width: 430px;
  position: relative;
  /* ensure the card visually sits above fixed elements such as footers */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* moved up previously by 30px; moving back 10px to soften offset */
  /* lowered by 100px from previous -82px -> now 18px */
  transform: translateY(18px) scale(0.995);
  opacity: 0;
  transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 420ms ease-in-out, box-shadow 420ms ease;
  will-change: transform, opacity;
  margin-left: 0;
  margin-right: 0;
}
/* entrance animation: reveal card shortly after load */
@media (prefers-reduced-motion: no-preference) {
  .card-table[data-ready="true"] {
  /* moved up previously by 30px; moving back 10px so final is -20px */
  /* keep ready state same to avoid entrance animation */
  transform: translateY(18px) scale(1);
    opacity: 1;
    box-shadow: 0 18px 40px rgba(0,0,0,0.6);
  }
}
/* Lock table structure and column widths */
.card-table table {
  /* Use fixed layout to ensure column widths are stable and cell content doesn't resize the card */
  table-layout: fixed;
  width: 100%;
  max-width: 430px;
  margin-left: 0;
  margin-right: 0;
}
.card-table td {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  width: auto; /* allow cell to size to content */
  min-width: 0; /* allow cells to shrink so inputs with 100% fit responsively */
  overflow: hidden;
  white-space: nowrap;
}

/* Ensure inputs do not expand their cells; truncate overflow with ellipsis when necessary */
.card-table .form-input, .card-table input, .card-table textarea {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Highlight input cells with a 5px border */
/* .card-table td.input-cell moved to input-cell.css */
/* Remove fixed column/prompt widths so cells size to input content responsively */
.card-table tr td, .card-table tr th { width: auto; }
.card-table .prompt-cell { color: inherit !important; width: auto; }

/* Remove left padding from the prompt text field so it aligns with inputs */
.prompt-cell, #sitePrompt, [data-loc="promptCellStyle"] {
  padding-left: 0 !important;
  text-align: left !important;
}
.form-header {
  text-align: center;
  margin-bottom: 16px;
}
.prompt-cell #sitePromptText {
  font-size: 1.05em;
  font-weight: 600;
  color: var(--muted); /* use muted grey rather than pure white */
  margin-bottom: 4px;
  padding-left: 4px !important; /* indent prompt text from the left by 4px */
}
/* Prompt colourization classes (match FIELD_RULES_AND_PROMPTS.md):
   - neutral/info: #a9a9a9ff
   - error:       #cc0000ff
   - success:     #00cc00ff
   - white:       #ffffffff (for username availability/important notices)
*/
.prompt-info { color: #a9a9a9 !important; }
.prompt-error { color: #ff4b4b !important; text-shadow: 0 0 0px #000000, 0 0 0px #ffffff !important; }
.prompt-success { color: #00cc00 !important; }
.prompt-white { color: #ffffff !important; }
.home-prompt {
  font-size: 1.2em;
  color: var(--muted); /* muted grey for prompt headings */
  font-weight: 500;
}
.homepage-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  align-items: center;
}

.form-input {
  flex: 1 1 0;
  height: 34px;
  line-height: 34px;
  vertical-align: middle;
  padding: 0 12px;
  /* default idle border: blue */
  border: 0.5px solid rgba(102,153,255,0.5);
  border-radius: 6px;
  font-size: 1.1em;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--muted); /* switch input text to muted grey */
  margin: 0;
  text-align: left;
  width: 100%;
  max-width: none; /* remove cap so inputs fill cell width */
  position: relative;
  z-index: 1;
  transition: box-shadow 220ms ease, border-color 220ms ease, transform 220ms ease;
}

/* Small visual padding below each text input to improve focus/underline spacing */
.form-input,
.card-table .input-cell input,
.card-table .input-cell textarea,
.card-table .input-cell .form-input {
  padding-bottom: 1px !important;
}

/* Prevent browser autofill (yellow) from changing field background/text.
   This targets WebKit-based browsers (Chrome/Edge/Safari) and Firefox.
   Uses a large inset box-shadow trick to override the autofill background. */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
.form-input:-webkit-autofill,
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus,
.form-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--surface) inset !important;
  box-shadow: 0 0 0px 1000px #000 inset !important;
  -webkit-text-fill-color: var(--muted) !important; /* autofill text uses muted grey */
  background-clip: content-box !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Firefox autofill */
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill,
.form-input:-moz-autofill {
  box-shadow: 0 0 0px 1000px var(--surface) inset !important;
  -moz-text-fill-color: var(--muted) !important; /* Firefox autofill text muted */
}

/* ======================================================================
   BORDER COLOR SYSTEM - User Input State Management
   ====================================================================== */

/* Default state - Blue border */
.card-table input[name="email"],
.card-table input[name="password"], 
.card-table input[name="password_signup"],
.card-table input[name="username"],
.card-table input[name="confirm"],
.card-table input[name="optional"],
.card-table input[name="prefix"],
.card-table .form-input,
input[name="email"],
input[name="password"], 
input[name="password_signup"],
input[name="username"],
input[name="confirm"],
input[name="optional"],
input[name="prefix"],
.form-input {
  border: 0.5px solid rgba(102,153,255,0.5) !important;
  transition: border-color 220ms ease, box-shadow 220ms ease !important;
}

/* Focus state - Yellow border (when user selects field) */
.card-table input[name="email"]:focus,
.card-table input[name="password"]:focus,
.card-table input[name="password_signup"]:focus,
.card-table input[name="username"]:focus,
.card-table input[name="confirm"]:focus,
.card-table input[name="optional"]:focus,
.card-table input[name="prefix"]:focus,
.card-table .form-input:focus,
input[name="email"]:focus,
input[name="password"]:focus,
input[name="password_signup"]:focus,
input[name="username"]:focus,
input[name="confirm"]:focus,
input[name="optional"]:focus,
input[name="prefix"]:focus,
.form-input:focus,
/* Populated state - Yellow border (field has content) */
.card-table input[name="email"].field-populated,
.card-table input[name="password"].field-populated,
.card-table input[name="password_signup"].field-populated,
.card-table input[name="username"].field-populated,
.card-table input[name="confirm"].field-populated,
.card-table input[name="optional"].field-populated,
.card-table input[name="prefix"].field-populated,
.card-table .form-input.field-populated,
input[name="email"].field-populated,
input[name="password"].field-populated,
input[name="password_signup"].field-populated,
input[name="username"].field-populated,
input[name="confirm"].field-populated,
input[name="optional"].field-populated,
input[name="prefix"].field-populated,
.form-input.field-populated {
  border-color: rgba(255,204,51,0.5) !important;
  box-shadow: 0 0 6px rgba(255, 204, 51, 0.3) !important;
  outline: none !important;
}

/* Error state - Red border (invalid input) - highest priority */
.card-table input[name="email"].field-error,
.card-table input[name="password"].field-error,
.card-table input[name="password_signup"].field-error,
.card-table input[name="username"].field-error,
.card-table input[name="confirm"].field-error,
.card-table input[name="optional"].field-error,
.card-table input[name="prefix"].field-error,
.card-table .form-input.field-error,
.card-table input[name="email"].error,
.card-table input[name="password"].error,
.card-table input[name="password_signup"].error,
.card-table input[name="username"].error,
.card-table input[name="confirm"].error,
.card-table input[name="optional"].error,
.card-table input[name="prefix"].error,
.card-table .form-input.error,
input[name="email"].field-error,
input[name="password"].field-error,
input[name="password_signup"].field-error,
input[name="username"].field-error,
input[name="confirm"].field-error,
input[name="optional"].field-error,
input[name="prefix"].field-error,
.form-input.field-error,
input[name="email"].error,
input[name="password"].error,
input[name="password_signup"].error,
input[name="username"].error,
input[name="confirm"].error,
input[name="optional"].error,
input[name="prefix"].error,
.form-input.error {
  border-color: rgba(255,42,42,0.5) !important;
  box-shadow: 0 0 6px rgba(255, 42, 42, 0.3) !important;
}

/* Success state - Green border (rules fulfilled) - second highest priority */
.card-table input[name="email"].field-ok,
.card-table input[name="password"].field-ok,
.card-table input[name="password_signup"].field-ok,
.card-table input[name="username"].field-ok,
.card-table input[name="confirm"].field-ok,
.card-table input[name="optional"].field-ok,
.card-table input[name="prefix"].field-ok,
.card-table .form-input.field-ok,
.card-table input[name="email"].success,
.card-table input[name="password"].success,
.card-table input[name="password_signup"].success,
.card-table input[name="username"].success,
.card-table input[name="confirm"].success,
.card-table input[name="optional"].success,
.card-table input[name="prefix"].success,
.card-table .form-input.success,
input[name="email"].field-ok,
input[name="password"].field-ok,
input[name="password_signup"].field-ok,
input[name="username"].field-ok,
input[name="confirm"].field-ok,
input[name="optional"].field-ok,
input[name="prefix"].field-ok,
.form-input.field-ok,
input[name="email"].success,
input[name="password"].success,
input[name="password_signup"].success,
input[name="username"].success,
input[name="confirm"].success,
input[name="optional"].success,
input[name="prefix"].success,
.form-input.success {
  border-color: rgba(0,204,0,0.5) !important;
  box-shadow: 0 0 6px rgba(0, 204, 0, 0.3) !important;
}

/* Ensure error state overrides all other states */
input.field-error:focus,
input.error:focus,
.form-input.field-error:focus,
.form-input.error:focus {
  border-color: rgba(255,42,42,0.5) !important;
  box-shadow: 0 0 6px rgba(255, 42, 42, 0.3) !important;
}

/* Ensure success state overrides populated/focus when valid */
input.field-ok:focus,
input.success:focus,
input.field-ok.field-populated,
input.success.field-populated,
.form-input.field-ok:focus,
.form-input.success:focus,
.form-input.field-ok.field-populated,
.form-input.success.field-populated {
  border-color: rgba(0,204,0,0.5) !important;
  box-shadow: 0 0 6px rgba(0, 204, 0, 0.3) !important;
}

/* ====================================================================== */
/* SITE-WIDE: Make all .form-input backgrounds transparent
  User requested removing backgrounds from every .form-input (choice C).
  Placed here after the border color system so it overrides earlier rules. */
.card-table .form-input,
.form-input,
.card-table .input-cell .form-input,
input.form-input,
textarea.form-input {
  background: transparent !important;
  background-image: none !important;
}

/* Semantic validation visuals have been centralized in
  vMAX/inputFields/inputOutline.css to avoid duplication. */
.button-row {
  display: flex;
  gap: 0;
  width: 100%;
button {
    background: none;
    color: #6699ff;
      padding: 38px 24px 30px 24px;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 16px;
    margin: 8px 0;
    transition: background 0.2s;
}
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.collapsed-buttons, .expanded-buttons {
  display: inline-flex;
  gap: 0; /* spacing removed */
  align-items: center;
}

/* Unified button that matches Sign Up visual (useable across the site) */
.btn-unified {
  background: var(--card-bg, #2f3337);
  color: #6699ff;
  border: 0.5px solid rgba(102,102,255,0.5);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
}
.btn-unified .btn-label { font-size: 0.95em; }
.btn-unified:hover{ transform: scale(1.01); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.btn-primary {
  background: #2f3337;
  color: #6699ff;
}
.btn-primary:hover {
  background: #2f3337;
}
.btn-secondary {
  background: #2f3337;
  color: #6699ff;
}
.btn-secondary:hover {
  background: #2f3337;
}
.btn-google {
  background: #fff;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 0.5px solid rgba(66,133,244,0.5);
  box-shadow: 0 2px 8px rgba(66,133,244,0.15);
}
.btn-google:hover {
  background: #4285F4;
  color: #fff;
}
/* Ensure explicit Back button matches the card it sits on */
/* Back button styling for new ID */
#btnBack {
  /* exact card color to avoid variable resolution/inline conflicts */
  background: #2f3337 !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  color: #b0b0c0 !important;
  border: none !important;
  box-shadow: none !important;
  height: 34px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}

#loginBtn,
#submitBtn,
#signupBtn {
  background: #2f3337;
  color: #b0b0c0;
  border: 0.5px solid rgba(102,102,255,0.5) !important;
  z-index: 10;
  border-radius: 4px !important;
  transition: border-color 1s ease, transform 180ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease;
}
/* Reset button styling for new ID */
#btnReset {
  background: transparent !important;
  color: #b0b0c0 !important;
  border: 0.5px solid rgba(176,176,176,0.5) !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  height: 34px !important;
  font-size: 1em !important;
  display: inline-block !important;
  vertical-align: middle !important;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.10);
  transition: background 0.2s, box-shadow 0.2s, border-color 1s ease;
}
#btnReset:hover, #btnReset:focus {
  background: #444 !important;
  box-shadow: 0 0 8px 2px #6699FF33;
  /* show red border on hover/focus to indicate destructive/attention action */
  border-color: rgba(255,42,42,0.5) !important;
}
/* end placeholderB mapping */
#loginBtn:hover, #loginBtn:focus {
  box-shadow: 0 8px 28px rgba(102,153,255,0.12);
  /* login: hover/focus use signup blue */
  border-color: rgba(102,102,255,0.5) !important;
  transform: scale(1.01);
}
#submitBtn {
  background: transparent;
  color: #fff;
  padding-left: 5px;
  padding-right: 5px;
  border: 0.5px solid rgba(102,153,255,0.5) !important;
  border-radius: 4px !important;
  transition: border-color 1s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
#submitBtn:hover {
  transform: scale(1.01);
}
#signupBtn {
  background: #2f3337;
  color: #6699ff;
  border: 0.5px solid rgba(102,102,255,0.5) !important;
  z-index: 10;
  border-radius: 4px !important;
}
#signupBtn:hover {
  transform: scale(1.01);
  /* signup hover: yellow border */
  border-color: rgba(255,204,51,0.5) !important;
}

/* Make signup focus also use yellow for accessibility */
#signupBtn:focus { border-color: rgba(255,204,51,0.5) !important; }

/* Ensure Login and Sign Up button text is gray (visual only) */
#loginBtn,
#signupBtn {
  color: var(--muted) !important;
}

/* Make all card buttons use the same text color as the login button */
.card-table button,
.card-table .btn-google,
.card-table .btn-primary,
.card-table .btn-secondary,
.card-table .btn-unified,
.card-table #backBtn,
.card-table #btnBack {
  color: var(--muted) !important;
}

/* Ensure Login and Sign Up button borders use the accent blue */
#loginBtn,
#signupBtn {
  border-color: rgba(102,102,255,0.5) !important;
}

/* Stronger override for login button: gray text and consistent border on hover/focus */
#loginBtn {
  color: var(--muted) !important;
  border-color: rgba(102,102,255,0.5) !important;
}
#loginBtn:hover,
#loginBtn:focus {
  border-color: rgba(102,102,255,0.5) !important;
  color: var(--muted) !important;
}
/* Previously the submit button forced a "success" (green) border when enabled.
   Current behavior: keep the default blue border; use the success accent on
   hover/focus so the enabled state is discoverable but not permanent.
  Tip for newcomers: change the success color by editing the --accent-strong
  variable in the :root block near the top of this file. */
#submitBtn:not(:disabled) {
  box-shadow: 0 0 0 0.5px rgba(0,255,0,0.06), 0 6px 18px rgba(0,255,0,0.03) !important;
  /* keep text color adjusted when enabled if needed */
  color: var(--muted) !important;
}

/* Focus state for submit uses the success accent (see --accent-strong); hover
  will also transition to the same success accent. */
#submitBtn:focus {
  outline: none;
  box-shadow: 0 0 12px 0.5px rgba(0,255,0,0.12), 0 1px 0 rgba(255,255,255,0.02) inset !important;
  border-color: rgba(0,255,0,0.5) !important;
}

/* Make submit use the success accent on hover (visual cue for enabled action) */
#submitBtn:hover {
  border-color: rgba(0,255,0,0.5) !important;
}

/* floating top-right icon micro-interaction */
.card-table > div img { 
  transition: transform 520ms cubic-bezier(.2,.9,.2,1), box-shadow 420ms ease;
}
.card-table > div img:hover { 
  transform: rotate(-6deg) scale(1.03) translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

/* Fallback: ensure top-right icon is positioned 4px left of the previous default
   (keeps layout consistent even if JSON positioning isn't applied). */
.card-table > div[data-loc="topRightIcon"] {
  right: 28px !important;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card-table, .form-input, #loginBtn, #submitBtn, #signupBtn, .card-table > div img { transition: none !important; transform: none !important; }

  /* Button row alignment for compact/expanded states */
  .expanded-buttons{ display:inline-flex; gap:8px; align-items:center; }
  .collapsed-buttons{ display:inline-flex; gap:8px; align-items:center; }
  [data-loc="buttonRowInner"]{ display:flex; justify-content:flex-end; align-items:center; gap:10px; }
}

/* --- Expanded / Compact form state (affordances + transitions) --- */
/* Expect JS to toggle `expanded` class on the form container (e.g. .card-table or .form-container) */
.form-container {
  transition: max-height .28s ease, box-shadow .18s ease, background .18s ease;
  overflow: hidden;
  max-height: 220px; /* compact height (adjust to match markup) */
  border-radius: 12px;
}
.form-container.expanded {
  max-height: 900px; /* large enough for expanded content */
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  border: 0.5px solid rgba(102,153,255,0.08);
}

/* When card is expanded, increase padding so the card visually grows downward */
.card-table[data-expanded="true"] {
  padding-bottom: 10px; /* keep consistent 10px bottom padding when expanded */
}

/* Ensure table cells can expand naturally and inherit card insets */
.card-table table { width: 100%; margin: 0; box-sizing: border-box; }

/* Table layout & input sizing moved here from input-cell.css (project rules) */

.card-table, .card-table table {
  width: 100%;
  /* Let the table size columns based on content so the spacer column can
     shrink to its intrinsic/minimal size while side columns fill remaining space. */
  table-layout: auto;
}

/* Remove horizontal padding from inputs and make them fill their cells */

/* Keep inputs edge-aligned but allow them to size naturally inside cells */
.card-table .input-cell input,
.card-table .input-cell textarea,
.card-table .input-cell .form-input {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  display: block;
  width: 95%;
  max-width: 95%; /* inputs capped to 95% of the cell */
}

/* Small helper for simple inline content placed in middle spacer cells */
.midcell {
  text-align: center;
  color: inherit;
  padding: 0.25rem 0;
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: normal; /* allow wrapping if needed */
}

/* Remove forced column percentages so the middle column can shrink to content */
.card-table tr.form-row td.input-cell {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Strong global overrides to ensure simple percentage layout across the card.
   - Make each table column 1/3 of the row (simple percentage)
   - Ensure inputs fill their cell and remove any min/max/pixel constraints
   - These rules use !important to override inline styles applied by positionLoader.js
*/
/* Equal-thirds removed: set explicit target widths per request */
.card-table tr td, .card-table tr th {
  min-width: 0 !important;
  max-width: none !important;
}

/* Canonical column sizing: first & third columns (email/password) 45% each,
   middle spacer 10%. Inputs fill their cells completely. These use
   !important to override inline styles injected by positionLoader.js. */
/* Remove hard percentage sizing and allow natural table sizing. Make the middle
   spacer shrink to its minimal content while side columns adapt to fill space. */
.card-table tr.form-row td.input-cell {
  padding: 0 !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
}

/* Make the middle spacer column collapse to its minimal width so it becomes
   as small as possible; using width:1% encourages browsers to give it only
   enough room for its content. We also cap content via .midcell to avoid
   accidental expansion. */
.card-table tr.form-row td:nth-child(2) {
  width: 1% !important;
  max-width: 64px !important;
  white-space: nowrap !important;
  text-align: center;
  box-sizing: border-box !important;
  /* moved horizontal spacing to the inner .midcell via margin to avoid
     increasing the table cell's inner height */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Ensure the confirm/password container (right column) matches the left column's spacing and input sizing */
/* NOTE: confirmField display styles were moved to
  vMAX/inputFields/confirmField/display.css — edit that file to change
  confirm-specific visuals (keeps this global theme file focused on shared rules). */
/* Stationary column widths: keep left/middle/right column widths fixed so
   the collapsed layout doesn't change when the card expands. These rules
   intentionally use !important to override any inline sizing applied by
   scripts so the visual columns remain stable. */
.card-table tr.form-row td:nth-child(1) {
  /* give the side columns a stable percent so inputs don't jump */
  width: 45% !important;
  max-width: 45% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  /* remove internal padding so it doesn't add to cell height; use margin on inputs instead */
  padding-right: 0 !important;

}

.card-table tr.form-row td:nth-child(2) {
  width: 10% !important;
  max-width: 10% !important;
  box-sizing: border-box !important;
}

/* Also apply the same fixed widths when the card is expanded so column
   proportions remain identical and nothing shifts visually. */
.card-table[data-expanded="true"] tr.form-row td:nth-child(1),
.card-table[data-expanded="true"] tr.form-row td:nth-child(3) {
  width: 45% !important;
  max-width: 45% !important;
}
.card-table[data-expanded="true"] tr.form-row td:nth-child(2) {
  width: 10% !important;
  max-width: 10% !important;
}

/* Use a shared percent metric for the side columns so the optional field can
   use the exact same measurement (percent) rather than a px cap. */
.card-table tr.form-row td:nth-child(1),
.card-table tr.form-row td:nth-child(3) {
  /* allow side columns to size naturally so their inputs can fill 100% */
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Ensure side column inputs expand naturally to fill remaining space */
.card-table tr.form-row td:nth-child(1) .form-input,
.card-table tr.form-row td:nth-child(3) .form-input,
.card-table tr.form-row td:nth-child(1) input,
.card-table tr.form-row td:nth-child(3) input,
.card-table tr.form-row td:nth-child(1) textarea,
.card-table tr.form-row td:nth-child(3) textarea {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding-left: 6px !important; /* small inset to avoid touching edge */
  padding-right: 6px !important;
}

/* Prevent midcell content from expanding the spacer column */
.midcell {
  display: inline-block;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Make the optional field (which sits in a colspan=3 cell) visually match the
   width of the regular single-column inputs (email/password/username). Center it
   inside the full-width row. */
/* Target the optional container directly (robust against minor markup changes). */
/* Optional container now sits inside its table cell and contains only the optional input
   (prefix is in its own table cell). Ensure it behaves like a normal block and doesn't
   attempt special flex layout. */

/* NOTE: optionalField display styles were moved to
  vMAX/inputFields/optionalField/display.css — edit that file for optional-field
  layout/spacing adjustments. */


/* Ensure inputs/textarea/form-input elements fill the cell width */
.card-table .input-cell input,
.card-table .input-cell textarea,
.card-table .input-cell .form-input,
.form-input {
  width: 95% !important;
  max-width: 95% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  display: block !important;
}
/* Double character spacing for input fields (visual increase). */
.card-table .form-input,
.card-table .input-cell input,
.card-table .input-cell textarea,
.form-input,
input.form-input,
input[name="email"],
input[name="username"],
input[name="optional"],
input[name="prefix"] {
  letter-spacing: 0.12em !important;
}

/* Neutralize any field-specific pixel widths that might come from JSON */
.prefix-input, [data-loc="buttonRowInner"], .prefixInputWidth160, .inputWidth80, .inputWidth40, .inputWidth140, .inputWidth168 {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Fade/slide secondary controls (reset/back/extra fields) instead of abrupt display */
.secondary-controls {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.form-container.expanded .secondary-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Chevron / toggle affordance */
.toggle .chevron {
  display: inline-block;
  transition: transform .18s ease;
  transform-origin: center;
}
.form-container.expanded .toggle .chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .form-container, .secondary-controls, .toggle .chevron { transition: none; }
}

.card-bg {
  position: absolute;
  top: 0;
  /* Animate collapsed <-> expanded card size smoothly. We use max-height to
     allow a height transition without needing to know exact content height.
     Overflow hidden prevents inner content from popping during animation. */
  overflow: hidden;
  max-height: 360px; /* collapsed card height (visible area) */
  transition: max-height 420ms cubic-bezier(.2,.9,.2,1), padding 420ms ease, box-shadow 420ms ease, transform 420ms ease, opacity 300ms ease;
  left: 50%;
  transform: translateX(-50%);
  width: 820px;
  height: 100vh;
  background: linear-gradient(120deg, #222 60%, #6699ff22 100%);
  border-radius: 0;
  box-shadow: 0 18px 80px 0 rgba(0,0,0,0.45);
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
  /* When the card is expanded, smoothly grow max-height and increase padding
     so the card visually expands downward. Use a large max-height to ensure
     the content fits; the transition will animate to this value. */
  .card-table[data-expanded="true"] {
    max-height: 1200px; /* large enough for expanded content */
    padding-bottom: 0px; /* reduced to shrink bottom by 40px */
    box-shadow: 0 28px 60px rgba(0,0,0,0.6);
    transform: translateY(12px) scale(1);
  }
}
.card-table {
  position: relative;
  z-index: 2;
}

/* Etched site title inside the card */
.card-title {
  position: absolute;
  top: 27px; /* lowered by 4px to move the title down */
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  font-weight: 700;
  /* give the etched text a visible colored surface (gold) while preserving the etch */
  color: #FFCC33; /* primary fill color for the text */
  -webkit-text-fill-color: #FFCC33; /* ensure WebKit paints the fill */
  font-size: 34px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  pointer-events: none;
  z-index: 6;
  /* keep etched look but increase contrast slightly */
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.746), /* deeper inner cut */
    0 -1px 0 rgba(255,255,255,0.06); /* slightly stronger top highlight */
  -webkit-text-stroke: 0.2px rgba(158, 192, 255, 0.39); /* subtle edge to improve legibility */
  -webkit-font-smoothing: antialiased;
  filter: contrast(0.95) saturate(0.95);
}

/* alternative stronger etched effect when supporting browsers prefer */
@supports (text-shadow: 0 1px 0 rgba(255, 255, 255, 0.612)) {
  .card-title {
    /* keep the colored fill consistent in supporting browsers */
    color: #6666ff88;
    -webkit-text-fill-color: #aaaaff44;
    text-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 -1px 0 rgba(255,255,255,0.04);
    transform: translateX(-50%) translateY(0);
  }
}

/* Utility: hide all visible buttons but keep them in the DOM and usable by scripts.
   - Use an accessibility-friendly off-screen clip so elements remain focusable and discoverable
     by assistive tech and scripts, but are not visible or interactive to pointer users.
   - Toggle by adding the class `buttons-hidden-active` to the `body` element.
   - This intentionally avoids `display:none` and `visibility:hidden` so event listeners
     and programmatic `.click()` still operate. */
body.buttons-hidden-active button,
body.buttons-hidden-active .btn-primary,
body.buttons-hidden-active .btn-secondary,
body.buttons-hidden-active .btn-google,
body.buttons-hidden-active [role="button"],
body.buttons-hidden-active input[type="button"],
body.buttons-hidden-active input[type="submit"],
body.buttons-hidden-active .button-row > * {
  /* visually hide while keeping in DOM and focusable */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  pointer-events: none !important; /* prevent mouse interactions visually */
}

/* Divider: span the full inner content width (card provides horizontal padding via --content-inset) */
hr[data-loc="dividerHr"]{
  display: block;
  border: none;
  background-color: rgba(255,204,51,0.5) !important; /* hairline at 50% opacity */
  height: 0.5px;
  min-height: 0.5px;
  margin: 0 auto; /* center the divider inside the card inset */
  padding: 0;
  width: 100%; /* make divider span full width */
  box-sizing: border-box;
}

@media (max-width: 559px){
  hr[data-loc="dividerHr"]{ width: 100%; margin: 0; }
}

/* Ensure button row inner aligns to the same insets and right-aligns its contents */
[data-loc="buttonRowCell"] { padding: 0; }
[data-loc="buttonRowInner"] {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end; /* keep buttons right-aligned inside the inset */
  gap: 16px;
}

/* Make the visual button-row elements span full width inside the cell */
.button-row { width: 100%; padding: 0; box-sizing: border-box; }

/* Push buttons down so the hairline has ~20px breathing room below it. */
[data-loc="buttonRowInner"], .button-row {
  margin-top: 20px !important;
}

@media (max-width: 480px) {
  /* smaller gap on very narrow screens */
  [data-loc="buttonRowInner"], .button-row { margin-top: 12px !important; }
}

/* Slightly increase the first column width by 4px to nudge layout as requested */
.card-table tr.form-row td:nth-child(1) {
  width: calc(45% + 4px) !important;
  max-width: calc(45% + 4px) !important;
}

/* -------------------------------------------------------------
   Normalize button text formatting (use reset button's text
   format as canonical). This ensures all buttons in both the
   collapsed and expanded views display identical font metrics
   without changing colors or sizing semantics.
   ------------------------------------------------------------- */
#btnReset, #loginBtn, #signupBtn, #submitBtn,
.btn-reset, .btn-submit, .btn-login, .btn-signup, .btn-google, .btn-unified,
.btn-primary, .btn-secondary {
  /* match reset button text formatting */
  font-family: Geneva, Arial, Helvetica, sans-serif !important;
  font-size: 1em !important; /* canonical reset size */
  font-weight: 400 !important; /* normal weight to match reset */
  line-height: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  vertical-align: middle !important;
}

/* Add a small right padding to the first column so its contents have breathing room */
.card-table tr.form-row td:nth-child(1) .form-input,
.card-table tr.form-row td:nth-child(1) input,
.card-table tr.form-row td:nth-child(1) .prefix-input {
  margin-right: 5px !important;
}

/* Remove vertical margins on inputs to prevent extra row height */
.card-table tr.form-row td .form-input,
.card-table tr.form-row td input,
.card-table tr.form-row td textarea {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Move the middle spacer spacing into the midcell element so it doesn't
   contribute to the cell's inner padding (which affects height). */
.card-table tr.form-row td:nth-child(2) .midcell,
.card-table tr.form-row td:nth-child(2) div.midcell {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

/* NOTE: optionalField display styles were moved to
  vMAX/inputFields/optionalField/display.css (duplicate marker removed). */


/* Explicitly ensure prefix-input matches optional input exactly inside merged row */
.card-table tr.form-row.expanded-only td.input-cell[colspan="3"] .prefix-input {
  /* neutralize fixed width so field-level CSS or inline styles can control sizing */
  width: auto !important;
  max-width: none !important;
  padding-left: 12px !important;
  padding-right: 0 !important;
  height: 34px !important;
  line-height: 34px !important;
  box-sizing: border-box !important;
}

/* Ensure the right-hand static domain text doesn't add height to the row.
   Make it an inline-block with the same height/line-height as inputs and
   zero vertical padding/margin. Also force the containing td to have no
   extra vertical padding so the row height equals the inputs. */
#static-prefix-domain,
#prefix-container #static-prefix-domain {
  /* ensure domain sits inline with inputs inside the prefix container */
  display: inline-block !important;
  height: 34px !important;
  line-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-left: 8px !important; /* small gap between input and domain */
  vertical-align: middle !important;
  /* raise slightly and nudge left so it visually lines up with the prefix input */
  /* moved an additional 4px left per request (total -9px) */
  transform: translate(-9px, -8.5px) !important;
  box-sizing: border-box !important;
  font-size: 21px !important; /* slightly larger per request (+3px) */
}

/* Stronger fix for the expanded-only row (optional/prefix) to prevent any
   cell from forcing extra row height. This sets the row and its tds to the
   same height as other inputs and centers their inline content. */
.card-table tr.form-row[data-expanded-only],
.card-table tr.form-row.expanded-only {
  line-height: 34px !important;
}
.card-table tr.form-row[data-expanded-only] td,
.card-table tr.form-row.expanded-only td {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
  height: 34px !important;
  max-height: 34px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Make the optional container inline-level so it participates in the row's
   inline flow and vertically centers with other inline content instead of
   becoming a taller block. Keep its inputs sized to the canonical input metrics. */
[data-loc="optionalContainer"] {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Wrapper to allow prefix to overlay the optional input cleanly */
.optional-swap-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.optional-swap-wrapper .form-input[name="optional"],
.optional-swap-wrapper input[name="optional"] {
  position: relative;
  z-index: 1;
  width: 100% !important;
}
.optional-swap-wrapper #prefix-container {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  z-index: auto !important;
  display: none; /* shown by JS when needed */
}
.optional-swap-wrapper #prefix-container .prefix-input {
  /* allow field-level CSS to set prefix width (do not hard-enforce 24.5%) */
  width: auto !important;
  max-width: none !important;
  display: inline-block !important;
  transform: none !important;
}

[data-loc="optionalContainer"] .form-input {
  display: inline-block !important;
  vertical-align: middle !important;
  height: 34px !important;
  line-height: 34px !important;
  padding-left: 0 !important;
  padding-right: 12px !important;
  margin: 0 !important;
}

/* When the prefix appears (prefix-container), ensure it also is inline-block
   and vertically aligned so it doesn't create extra height. */
.card-table tr.form-row.expanded-only td[colspan="3"] #prefix-container,
.card-table tr.form-row.expanded-only td[colspan="3"] #prefix-inner,
.card-table tr.form-row[data-expanded-only] td[colspan="3"] #prefix-container,
.card-table tr.form-row[data-expanded-only] td[colspan="3"] #prefix-inner {
  display: inline-block !important;
  vertical-align: middle !important;
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Aggressive override: ensure the expanded-only row (optional/prefix) and
   its tds cannot exceed the canonical input height. This neutralizes any
   inline styles injected by scripts that add padding/height to tds. */
.card-table tr.form-row.expanded-only,
.card-table tr.form-row[data-expanded-only] {
  height: 34px !important;
  min-height: 34px !important;
  line-height: 34px !important;
}
.card-table tr.form-row.expanded-only td,
.card-table tr.form-row[data-expanded-only] td,
.card-table tr.form-row.expanded-only td[style],
.card-table tr.form-row[data-expanded-only] td[style] {
  height: 34px !important;
  min-height: 34px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* If positionLoader or other scripts write pixel heights to the table at
   runtime, neutralize them by forcing max-height as well. */
.card-table tr.form-row.expanded-only[style],
.card-table tr.form-row[data-expanded-only][style] {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
}

/* --------------------------------------------------------------
   Rules moved from css/debugSQ.css because they are global/theme
   styles and caused leaking when kept in the debug stylesheet.
   Kept here so behavior/appearance stays identical after cleanup.
   -------------------------------------------------------------- */

/* Field validation visual states and .hidden utility moved to
  vMAX/inputFields/inputOutline.css to avoid duplicated outline rules. */

/* Card/table adjustments originally placed in debugSQ.css */
.card-table table { border-collapse: collapse; margin-top: 50px !important; }

/* Row gap: create an 8px vertical space between table rows (cells).
   Use separate border model and vertical border-spacing so this works
   even when many other rules force cell padding to zero. */
.card-table {
  --card-row-vertical-gap: 14px;
}
.card-table table {
  border-collapse: separate !important;
  border-spacing: 0 var(--card-row-vertical-gap) !important;
}
.card-table table td,
.card-table table th {
  border: none !important; /* remove debug guide lines from the debug stylesheet */
  padding: 10px 6px !important; /* increase vertical padding for extra row spacing */
  box-shadow: none !important;
}

/* Force the middle spacer column to a fixed 25px width (from debug file) */
.card-table tr.form-row td:nth-child(2) {
  width: 25px !important;
  max-width: 25px !important;
  min-width: 25px !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Card bottom padding reduced by 40px */
.card-table { padding-bottom: 5px !important; }

/* Button-row cell: add a subtle horizontal rule above the buttons and vertical spacing */
.card-table .button-row-cell { padding-top: 8px !important; padding-bottom: 8px !important; margin-bottom: 0 !important; border-top: 0.5px solid #6699FF !important; }
/* Thin horizontal hairline immediately above the button row (0.5px) */
.card-table .button-row-cell {
  position: relative !important; /* anchor for pseudo */
  border-top: none !important; /* remove prior border to avoid duplicate lines */
}
.card-table .button-row-cell::before {
  content: "";
  position: absolute;
  /* reduce the inset by 35px on each side (wider than original; adds +40px over the prior change) */
  left: calc(var(--content-inset, 36px) - 35px) !important;
  right: calc(var(--content-inset, 36px) - 35px) !important;
  top: 6px; /* nudge the hairline down so there's extra space above it */
  height: 0.5px;
  background: #ffffff4f !important; /* gold hairline at 50% opacity */
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 4 !important; /* ensure it's visible above the card inner hairline */
}

/* Raise the card visually (override theme's translateY) */
.card-table[data-ready="true"], .card-table { transform: translateY(-32px) scale(1) !important; }

/* Button row: right-align buttons in their cell */
.button-row.button-row-inner { display: flex; justify-content: flex-end; gap: 0; align-items: center; }

/* Make Google button square and larger icon */
.btn-google { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; overflow: hidden; }
.btn-google { background: var(--card-bg, #ac95df1a) !important; color: #6699ff !important; border: 0.5px solid rgba(102,102,255,0.5) !important; }
.btn-google img {
  width: auto !important;
  height: 100% !important;
  object-fit: contain !important; /* preserve full logo without cropping */
  object-position: center center !important;
  display: block;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.btn-google:hover { background: var(--card-bg, #2f3337) !important; color: #6699ff !important; }


/* === Additional overrides: restore vertical spacing and ensure Reset border === */
/* Some earlier rules force padding:0 or set fixed heights for compact/expanded
   rows. The stronger final override at the end of this file now controls
   spacing; the lighter 8px overrides were removed to avoid conflicts. */

/* Strong explicit selector for the Reset button so its border appears gray.
   Covers both #resetBtn and #btnReset and scoped inside the card/button-row. */
.card-table .button-row button#resetBtn,
.card-table .button-row #resetBtn,
.card-table button#btnReset,
#resetBtn, #btnReset {
  border-color: rgba(176,176,176,0.5) !important;
  color: var(--muted) !important;
}

/* ----------------------- FINAL SPACING OVERRIDES ----------------------- */
/* Many earlier rules force a fixed 44px height and zero padding on certain
   rows/tds which prevents border-spacing from showing. The rules below run
   last in the file and use !important to allow natural row spacing. */

/* Increase the CSS variable used by border-spacing so browsers apply a larger
   gap between table rows. This overrides the earlier declaration by cascade. */
.card-table {
  --card-row-vertical-gap: 22px;
}

/* Ensure input cells vertically align to middle so left and right columns
   produce identical spacing between rows (email/username vs password/confirm). */
.card-table tr.form-row td.input-cell {
  vertical-align: middle !important;
}

/* Allow form rows to size naturally and give them breathing room. */
.card-table tr.form-row,
.card-table tr.form-row.expanded-only,
.card-table tr.form-row[data-expanded-only] {
  height: auto !important;
  min-height: 64px !important; /* ensure at least this height so inputs + spacing fit */
  line-height: normal !important;
}

/* Ensure table cells have vertical padding so border-spacing and min-height
   produce visible gaps even if other rules try to collapse them. */
.card-table table td,
.card-table table th,
.card-table tr.form-row td.input-cell,
.card-table tr.form-row td.input-cell > * {
  padding-top: 12px !important;
  padding-bottom: 0 !important; /* remove bottom padding so inputs sit closer to divider */
}

/* Final forced zero-gap rules to eliminate any remaining vertical spacing */
.card-table { --card-row-vertical-gap: 0 !important; }
.card-table table { border-spacing: 0 !important; }
.card-table table td, .card-table table th { padding-top: 0 !important; padding-bottom: 0 !important; }
.card-table tr.form-row td.input-cell { padding-top: 0 !important; padding-bottom: 0 !important; }
.card-table tr.form-row { min-height: 34px !important; height: auto !important; }

/* Collapsed card: make rows size to content (no forced min-height) */
.card-table:not([data-expanded="true"]) tr.form-row,
.card-table:not([data-expanded="true"]) tr.form-row.expanded-only,
.card-table:not([data-expanded="true"]) tr.form-row[data-expanded-only] {
  height: auto !important;
  min-height: 0 !important;
  line-height: normal !important;
}
.card-table:not([data-expanded="true"]) tr.form-row td.input-cell,
.card-table:not([data-expanded="true"]) tr.form-row td.input-cell > * {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure divider sits tight under rows */
hr[data-loc="dividerHr"] { margin-top: 0 !important; }

/* Remove top padding from actual input elements so text sits at canonical line-height */
.card-table .form-input,
.card-table .input-cell input,
.card-table .input-cell textarea,
.card-table .input-cell .form-input {
  padding-top: 0 !important;
}

/* Ensure the table cell itself has no top padding so inputs sit at the top edge */
.card-table tr.form-row td.input-cell,
.card-table tr.form-row td.input-cell:nth-child(1),
.card-table tr.form-row td.input-cell:nth-child(3) {
  padding-top: 0 !important;
}

/* Keep inputs their canonical size while allowing surrounding cells to grow. */
.card-table .form-input,
.card-table .input-cell input,
.card-table .input-cell textarea {
  height: 34px !important;
  line-height: 34px !important;
}

/* If scripts apply inline heights, neutralize them here so rows can expand. */
.card-table tr.form-row[style],
.card-table tr.form-row.expanded-only[style],
.card-table tr.form-row[data-expanded-only][style],
.card-table tr.form-row td[style] {
  height: auto !important;
  min-height: 34px !important;
}

/* Keep the button-row compact but visually separated from inputs */
.card-table .button-row-cell { padding-top: 8px !important; padding-bottom: 0 !important; }

/* Remove any top margin from the divider so it sits immediately below inputs */
hr[data-loc="dividerHr"] { margin-top: 0 !important; }

/* ---------------------------------------------------------------------- */

/* Ensure the right-hand column (password / confirm) gets identical vertical
   spacing to the left column. Some earlier rules aggressively reset padding
   for the third td; these stronger selectors restore it. */
/* NOTE: confirmField display rules were moved to
  vMAX/inputFields/confirmField/display.css — see that file for confirm-specific overrides. */

/* NOTE: usernameField display rules were moved to
  vMAX/inputFields/usernameField/display.css — update that file for username-specific visuals. */

[data-loc="optionalContainer"] {
  transform: none !important; /* neutralize the translateY(-2px) nudge */
  margin-top: 0 !important;
}

/* Align right-column (password/confirm) vertically with left-column inputs.
   Remove any top padding/margin and neutralize transforms that were nudging
   the inputs down. This is intentionally specific and runs last to override
   earlier rules. */
/* NOTE: confirmField display rules were moved to
  vMAX/inputFields/confirmField/display.css (duplicate marker consolidated). */

/* Make the Email input match the canonical input metrics and remove any
   vertical offset so its text is vertically centered and the box aligns
   with the other fields (password, username, etc.). */
/* NOTE: Email-field sizing and status visuals were moved to
  vMAX/inputFields/emailField/display.css — edit that file for email-specific layout. */

/* ---------------------------------------------------------------------------
   USER REQUEST: Normalize cells and inputs to match the Email field metrics.
   Enforce exact email box model so all fields in column 1 and 3 align
   identically inside their table cells.
   ------------------------------------------------------------------------ */
.card-table,
.card-table table {
  --card-row-vertical-gap: 0 !important;
  border-spacing: 0 !important;
}

/* Cells: collapse extra vertical spacing but keep cell height matching inputs */
.card-table table td,
.card-table table th,
.card-table tr.form-row td.input-cell,
.card-table tr.form-row td.input-cell > *,
.card-table .input-cell,
.card-table .input-cell > * {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* Rows: avoid forcing extra height but keep canonical input height */
.card-table tr.form-row,
.card-table tr.form-row.expanded-only,
.card-table tr.form-row[data-expanded-only] {
  min-height: 34px !important;
  height: auto !important;
}

/* Inline wrappers: no margins, match input height to keep content centered */
.cell-row {
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 34px !important;
  line-height: 34px !important;
}

/* Midcell: lateral spacing only, no vertical impact */
.midcell,
.card-table tr.form-row td:nth-child(2) .midcell {
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: 34px !important;
  line-height: 34px !important;
}

/* Inputs: enforce exact same box as Email field */
/* general input sizing left in hone.css; specific email sizing moved to vMAX/inputFields/emailField/display.css */

/* Confirm container: children match canonical input metrics */
/* NOTE: confirmField display rules were moved to
  vMAX/inputFields/confirmField/display.css — keep hone.css for shared/global rules. */

/* Button-row: keep compact but don't add vertical push on rows */
.card-table .button-row-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-top: none !important;
}

/* Neutralize debug stylesheet margins that affect vertical spacing */
.card-table input[type="text"],
.card-table input[type="email"],
.card-table input { margin-bottom: 0 !important; }
/* NOTE: Password/input auth visuals were centralized in vMAX/CSS/auth.css.
  Edit that file to change password-specific border/visibility/icon styles. */
.card-table .input-cell, .card-table td.input-cell { padding-bottom: 0 !important; }


/* ---------------------- CANONICAL INPUT DISPLAY ---------------------- */
/* Strong, final overrides for all input-like elements. This centralizes
   border, background, radius, box-shadow and focus visuals so no other
   scattered rules can produce inconsistent input appearance. */
/* canonical input visuals preserved in hone.css; email-specific sizing moved to vMAX/inputFields/emailField/display.css */

/* Focus state: gentle blue glow; explicit so scripts or other styles can't
   permanently override with different colors. Validation states live in
   vMAX/inputFields/inputOutline.css and will layer on top of these visuals. */
/* REMOVED: This was conflicting with our color border system above.
   The comprehensive border system handles all focus states now. */

/* Ensure prefix-domain and static helper elements don't add border-like
   visuals that conflict with the input box model. Keep them visually
   separate but neutral to avoid affecting input dimensions. */
#static-prefix-domain,
#prefix-container,
.prefix-domain {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* Remove any stray inset/outer shadows applied earlier for autofill hacks
   or focus states; inputOutline.css controls validation glows instead. */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
.form-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #000 inset !important;
  box-shadow: 0 0 0px 1000px #000 inset !important;
}

/* Prevent accidental transforms/translation from affecting visual alignment */
.form-input,
.prefix-input,
[data-loc="optionalContainer"] input,
#static-prefix-domain {
  transform: none !important;
}

/* ==================================================================== */

/* Pin the small prompt/status to the top of the card */
.card-table { position: relative; }
/* NOTE: Email status UI moved to
  vMAX/inputFields/emailField/display.css — change visual status (icons/labels) there. */

/* Ensure the main prompt has breathing room from the pinned status */
.prompt-cell #sitePromptText {
  margin-top: 44px !important;
}

/* FINAL: ensure cells are not force-sized so the 20px spacing can apply.
   This overrides previous hard rules (height/min-height/padding/overflow).
   Placed at the end of the file with high specificity and !important. */
.card-table tr.form-row,
.card-table tr.form-row.expanded-only,
.card-table tr.form-row[data-expanded-only],
.card-table tr.form-row[style],
.card-table tr.form-row.expanded-only[style],
.card-table tr.form-row[data-expanded-only][style] {
  height: auto !important;
  min-height: 0 !important;
  line-height: normal !important;
}
.card-table td,
.card-table tr.form-row td,
.card-table tr.form-row td.input-cell,
.card-table tr.form-row td.input-cell[style],
.card-table td[style] {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.card-table .input-cell > * {
  display: block !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* Disable hover/focus animations on all buttons but keep border-color changes */
.card-table button,
button,
.btn-primary,
.btn-secondary,
.btn-google,
.btn-unified,
#loginBtn,
#signupBtn,
#submitBtn,
#btnReset,
#btnBack {
  transition: none !important;
}

.card-table button:hover,
button:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-google:hover,
.btn-unified:hover,
#loginBtn:hover,
#signupBtn:hover,
#submitBtn:hover,
#btnReset:hover,
#btnBack:hover,
.card-table button:focus,
button:focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-google:focus,
.btn-unified:focus,
#loginBtn:focus,
#signupBtn:focus,
#submitBtn:focus,
#btnReset:focus,
#btnBack:focus {
  transform: none !important;
  box-shadow: none !important;
  /* keep border-color as defined elsewhere (no override) */
}

/* Re-apply immediate background color on hover for buttons (no animation) */
.card-table button:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-google:hover,
.btn-unified:hover,
#loginBtn:hover,
#signupBtn:hover,
#submitBtn:hover,
#btnReset:hover,
#btnBack:hover {
  background-color: inherit !important; /* preserve author-defined hover backgrounds */
}

/* Force Google, Reset, Back buttons to use the card background on hover/focus */
.btn-google:hover,
.btn-google:focus,
#btnReset:hover,
#btnReset:focus,
#btnBack:hover,
#btnBack:focus {
  background-color: var(--card-bg) !important;
  background-image: none !important;
  color: var(--muted) !important; /* keep text muted to match card buttons */
}

/* Ensure Back, Google and Reset buttons always match the card background
   on normal, hover and focus states, and remove any shadow/border changes. */
#btnBack,
#btnBack:hover,
#btnBack:focus,
.btn-google,
.btn-google:hover,
.btn-google:focus,
#btnReset,
#btnReset:hover,
#btnReset:focus {
  background: var(--card-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  color: var(--muted) !important;
}

/* User request: remove top padding for left and right column cells */
.card-table tr.form-row td:nth-child(1),
.card-table tr.form-row td:nth-child(3) {
  padding-top: 0 !important;
}

/* User request: also remove bottom padding for left and right column cells */
.card-table tr.form-row td:nth-child(1),
.card-table tr.form-row td:nth-child(3) {
  padding-bottom: 0 !important;
}

/* FINAL: ensure all card buttons keep the card background and no hover animation
   This runs last to override any earlier hover/background rules while leaving
   border-color rules in place. */
.card-table button,
.card-table .btn-primary,
.card-table .btn-secondary,
.card-table .btn-google,
.card-table .btn-unified,
.card-table #loginBtn,
.card-table #signupBtn,
.card-table #submitBtn,
.card-table #btnReset,
.card-table #btnBack {
  background: var(--card-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-transition: none !important;
  transition: none !important;
  color: var(--muted) !important;
}
.card-table button:hover,
.card-table .btn-primary:hover,
.card-table .btn-secondary:hover,
.card-table .btn-google:hover,
.card-table .btn-unified:hover,
.card-table #loginBtn:hover,
.card-table #signupBtn:hover,
.card-table #submitBtn:hover,
.card-table #btnReset:hover,
.card-table #btnBack:hover,
.card-table button:focus,
.card-table .btn-primary:focus,
.card-table .btn-secondary:focus,
.card-table .btn-google:focus,
.card-table .btn-unified:focus,
.card-table #loginBtn:focus,
.card-table #signupBtn:focus,
.card-table #submitBtn:focus,
.card-table #btnReset:focus,
.card-table #btnBack:focus {
  background: var(--card-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* CENTRAL BUTTON THEME (text, background, hover) - does NOT change borders */
.card-table button,
.card-table .btn-primary,
.card-table .btn-secondary,
.card-table .btn-google,
.card-table .btn-unified,
.card-table #loginBtn,
.card-table #signupBtn,
.card-table #submitBtn,
.card-table #btnReset,
.card-table #btnBack {
  background: var(--btn-bg) !important;
  color: var(--btn-color) !important;
}
.card-table button:hover,
.card-table .btn-primary:hover,
.card-table .btn-secondary:hover,
.card-table .btn-google:hover,
.card-table .btn-unified:hover,
.card-table #loginBtn:hover,
.card-table #signupBtn:hover,
.card-table #submitBtn:hover,
.card-table #btnReset:hover,
.card-table #btnBack:hover {
  background: var(--btn-hover-bg) !important;
  color: var(--btn-hover-color) !important;
}

/* FINAL: enforce 4px corner radius on all card buttons */
.card-table button,
.card-table .btn-primary,
.card-table .btn-secondary,
.card-table .btn-google,
.card-table .btn-unified,
.card-table #loginBtn,
.card-table #signupBtn,
.card-table #submitBtn,
.card-table #btnReset,
.card-table #btnBack {
  border-radius: 4px !important;
}

/* ================================================================
   FINAL: Make each table cell tightly fit its input field's intrinsic
   size. This overrides earlier "width:95%" and full-width rules so
   td size == input size (no extra padding/space).
   Keep this block last to ensure it wins.
   ================================================================ */
.card-table table {
  table-layout: auto !important; /* allow columns to size to their content */
  width: auto !important;
}

/* Remove padding/forced widths from cells so they wrap input sizes */
.card-table tr.form-row td,
.card-table tr.form-row td.input-cell,
.card-table tr.form-row th {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: content-box !important;
  vertical-align: middle !important;
}

/* Make inputs size to their intrinsic content and not stretch to cell width.
   Inputs remain block-level for predictable height but use auto width so
   the surrounding td will shrink-to-fit. */
.card-table .input-cell input,
.card-table .input-cell textarea,
.card-table .input-cell .form-input,
.card-table .form-input {
  display: inline-block !important;
  width: auto !important;      /* intrinsic width */
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  padding-bottom: 8px !important; /* keep requested bottom padding */
}

/* If you want certain inputs to still expand to full column, add a class
   like .fullwidth and override width:100% on those selectively. */


/* FINAL: enforce uniform button height = 30px (centralized standard) */
.card-table button,
.card-table .btn-primary,
.card-table .btn-secondary,
.card-table .btn-google,
.card-table .btn-unified,
.card-table #loginBtn,
.card-table #signupBtn,
.card-table #submitBtn,
.card-table #btnReset,
.card-table #btnBack {
  height: 30px !important;
  line-height: 30px !important;
  min-height: 30px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure icon/img inside Google button scales to fit the new height */
.card-table .btn-google img,
.btn-google img {
  height: 18px !important;
  max-height: 18px !important;
}

/* FINAL: Reset border enforcement (covers both ID spellings and button elements)
   Keep Reset's default border and red-on-hover behavior. Back button is intentionally
   excluded so it remains borderless. */
.card-table .button-row button#resetBtn,
.card-table .button-row button#btnReset,
#resetBtn, #btnReset {
  border: 0.5px solid rgba(176,176,176,0.5) !important;
  border-style: solid !important;
  border-width: 0.5px !important;
}
.card-table .button-row button#resetBtn:hover,
.card-table .button-row button#btnReset:hover,
#resetBtn:hover, #btnReset:hover,
.card-table .button-row button#resetBtn:focus,
.card-table .button-row button#btnReset:focus,
#resetBtn:focus, #btnReset:focus {
  border-color: rgba(255,42,42,0.5) !important; /* red on hover/focus */
  background: var(--card-bg) !important;
}

/* BUTTON HOVER ANIMATION: darken + sink (scale down) */
.card-table button,
.card-table .btn-primary,
.card-table .btn-secondary,
.card-table .btn-google,
.card-table .btn-unified,
.card-table #loginBtn,
.card-table #signupBtn,
.card-table #submitBtn,
.card-table #btnReset,
.card-table #btnBack {
  -webkit-transition: filter 180ms ease, background-color 180ms ease !important;
  transition: filter 180ms ease, background-color 180ms ease !important;
  transform: none !important;
  transform-origin: center center !important;
  will-change: filter !important;
}

.card-table button:hover,
.card-table .btn-primary:hover,
.card-table .btn-secondary:hover,
.card-table .btn-google:hover,
.card-table .btn-unified:hover,
.card-table #loginBtn:hover,
.card-table #signupBtn:hover,
.card-table #submitBtn:hover,
.card-table #btnReset:hover,
.card-table #btnBack:hover {
  transform: none !important; /* prevent movement */
  filter: none !important; /* prevent darken/dimming on hover */
  background-color: var(--btn-hover-bg) !important;
  box-shadow: none !important;
}

/* Small typographic nudge: raise only the Back button label by 3px so the
   text is visually higher without moving the button box. */
.card-table .button-row button#backBtn .btn-back-label,
.card-table .button-row button#btnBack .btn-back-label,
#backBtn .btn-back-label, #btnBack .btn-back-label {
  display: inline-block !important;
  transform: translateY(-6px) !important; /* raised earlier by 3px (now double-scale - keep intact) */
  line-height: 1 !important; /* keep label layout tidy */
}

/* Ensure Back button label has a 13px top padding to shift text downward */
.card-table .button-row button#backBtn .btn-back-label,
.card-table .button-row button#btnBack .btn-back-label,
#backBtn .btn-back-label, #btnBack .btn-back-label {
  padding-top: 13px !important;
}

.card-table .button-row button#resetBtn:hover,
.card-table .button-row button#btnReset:hover,
#resetBtn:hover, #btnReset:hover,
.card-table .button-row button#resetBtn:focus,
.card-table .button-row button#btnReset:focus,
#resetBtn:focus, #btnReset:focus {
  outline: 0.5px solid #FF2A2A !important;
  outline-offset: 0 !important;
}

/* Debug panel: make Copy and Reset controls smaller for compact debug UI */
#debugPanel .debug-controls button,
#debugCopyBtn,
#debugResetBtn {
  font-size: 12px !important;
  padding: 2px 8px !important; /* reduced top/bottom padding to tighten vertical spacing */
  height: 24px !important;
  line-height: 20px !important; /* slightly smaller line-height to nudge text up */
  color: #ffffff !important; /* make debug button text white */
  min-width: 40px !important;
  border-radius: 5px !important;
  box-sizing: border-box !important;
}

#debugPanel .debug-controls button img { /* if icons used, make them smaller */
  height: 14px !important;
  width: auto !important;
}

/* Debug button hover colors */
#debugCopyBtn:hover, #debugCopyBtn:focus {
  color: rgb(0, 255, 100) !important;
}
#debugOpenBtn:hover, #debugOpenBtn:focus {
  color: #ffcc33 !important;
}
#debugResetBtn:hover, #debugResetBtn:focus {
  color: red !important;
}


/* Higher-specificity fallbacks to ensure hover colors win over other rules */
#debugPanel .debug-controls button#debugCopyBtn:hover,
#debugPanel #debugCopyBtn:hover,
#debugPanel .debug-controls button#debugCopyBtn:focus,
#debugPanel #debugCopyBtn:focus {
  color: #00ff64 !important;
}
#debugPanel .debug-controls button#debugOpenBtn:hover,
#debugPanel #debugOpenBtn:hover,
#debugPanel .debug-controls button#debugOpenBtn:focus,
#debugPanel #debugOpenBtn:focus {
  color: #ffcc33 !important;
}
#debugPanel .debug-controls button#debugResetBtn:hover,
#debugPanel #debugResetBtn:hover,
#debugPanel .debug-controls button#debugResetBtn:focus,
#debugPanel #debugResetBtn:focus {
  color: red !important;
}

/* FINAL: Google button background and border -- match card background and use a thin gray border */
.card-table .btn-google,
.btn-google,
.card-table button.btn-google,
.card-table .button-row .btn-google {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  gap: 6px !important;
  padding: 0 8px !important; /* small lateral padding so it aligns with text buttons */
  min-width: 30px !important;
  height: 30px !important; /* enforce same height as other buttons */
  background: var(--card-bg) !important; /* same as card */
  background-image: none !important;
  border: 0.5px solid rgba(176,176,176,0.5) !important; /* thin gray border */
  color: var(--muted) !important; /* keep text/icon muted to match card buttons */
  box-shadow: none !important;
  /* stronger nudge using transform so the shift survives flex/justify behaviours */
  margin-left: -8px !important; /* keep a small margin fallback */
  transform: translateX(-12px) !important; /* reliably move the Google button left */
}
.card-table .btn-google:hover,
.card-table .btn-google:focus,
.btn-google:hover,
.btn-google:focus {
  background: var(--card-bg) !important;
  background-image: none !important;
  border-color: rgba(176,176,176,0.5) !important;
  color: var(--muted) !important;
}

/* Make Google button border turn white on hover/focus */
.card-table .btn-google:hover,
.card-table .btn-google:focus,
.btn-google:hover,
.btn-google:focus {
  border-color: rgba(255,255,255,0.5) !important;
}
.card-table .btn-google img,
.btn-google img { 
  background: transparent !important; /* ensure the img itself doesn't carry a separate background */
  background-color: transparent !important;
  background-image: none !important;
  display: inline-block !important;
  height: 18px !important;
  width: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  vertical-align: middle !important;
}

/* FINAL: ensure Back button is borderless (no border or outline) */
.card-table .button-row button#backBtn,
.card-table .button-row button#btnBack,
#backBtn, #btnBack {
  border: none !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Final override: make Back button fully background-transparent in all states */
.card-table .button-row button#backBtn,
.card-table .button-row button#btnBack,
#backBtn, #btnBack,
.card-table .button-row button#backBtn:hover,
.card-table .button-row button#btnBack:hover,
#backBtn:hover, #btnBack:hover,
.card-table .button-row button#backBtn:focus,
.card-table .button-row button#btnBack:focus,
#backBtn:focus, #btnBack:focus {
  background: transparent !important;
  background-image: none !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

/* FINAL: ensure Sign Up button borders are FFCC33 (canonical sign-up accent) */
.card-table #signupBtn,
.card-table button#signupBtn,
.card-table .btn-signup,
.btn-signup,
#signupBtn {
  /* Normal state: use original accent blue and slightly dimmer text */
  border: 0.5px solid rgba(102,102,255,0.5) !important;
  border-color: rgba(102,102,255,0.5) !important;
  color: #ffffff40 !important; /* dimmer than var(--muted) */
}
.card-table #signupBtn:hover,
.card-table button#signupBtn:hover,
.card-table .btn-signup:hover,
#signupBtn:hover {
  border-color: rgba(255,204,51,0.5) !important; /* yellow on hover */
}
.card-table #signupBtn:focus,
.card-table button#signupBtn:focus,
.card-table .btn-signup:focus,
#signupBtn:focus {
  border-color: rgba(255,204,51,0.5) !important;
  box-shadow: 0 0 8px 1px rgba(255,204,51,0.12) !important;
}
/* Sign-up toggle: keep normal state muted/blue, yellow only on hover/focus */
.card-table #modeSignup,
#modeSignup,
.card-table .btn-toggle#modeSignup,
.btn-toggle#modeSignup {
  border: 0.5px solid rgba(102,102,255,0.5) !important;
  border-color: rgba(102,102,255,0.5) !important;
  color: var(--muted) !important;
  background: var(--btn-bg) !important;
}
.card-table #modeSignup:hover,
#modeSignup:hover,
.card-table #modeSignup:focus,
#modeSignup:focus {
  border-color: rgba(255,204,51,0.5) !important;
  color: var(--muted) !important;
}
.card-table .button-row button#resetBtn:hover,
.card-table .button-row button#btnReset:hover,
#resetBtn:hover, #btnReset:hover,
.card-table .button-row button#resetBtn:focus,
.card-table .button-row button#btnReset:focus,
#resetBtn:focus, #btnReset:focus {
  outline: 0.5px solid #FF2A2A !important;
  outline-offset: 0 !important;
}

/* Inner hairline: replace static inset with a subtle, continuously shimmering light
   implemented via pseudo-elements so we can animate without affecting layout. */
.card-table {
  /* preserve the outer drop shadow; use pseudos for inner hairline + shimmer */
  /* softened blue glow: lower opacity and spread */
  box-shadow: 0 8px 28px #6666ff1e !important;
  border-radius: 12px !important;
  position: relative !important; /* ensure positioned ancestor for pseudos */
  overflow: hidden !important;   /* clip shimmer to rounded corners */
}

/* static, subtle hairline inset to define the card edge */
.card-table::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  /* gentler inset blue hairline */
  box-shadow: inset 0 0 0 0.5px rgba(0,0,255,0.06) !important;
  /* inner gold border placed ~7px inside the card edge */
  outline: 0.5px solid #ffcc333f !important;
  outline-offset: -7px !important;
  opacity: 0.95;
  z-index: 2;
}

/* animated shimmer: slow, continuous sweep across the inner edge */
.card-table::after {
  content: "";
  position: absolute;
  /* extend slightly outside so blur doesn't clip at edges */
  left: -30%; right: -30%; top: -30%; bottom: -30%;
  border-radius: 8px;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen; /* lighten underlying hairline subtly */
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(255,255,255,0.16) 50%,
    rgba(255,255,255,0.10) 60%,
    rgba(255,255,255,0) 100%);
  filter: blur(12px);
  transform: translateX(-150%);
  opacity: 0;
  animation: card-shimmer 15s ease-in-out infinite;
}

@keyframes card-shimmer {
  0% { transform: translateX(-150%); opacity: 0; }
  12% { opacity: 0.12; }
  50% { transform: translateX(0%); opacity: 0.25; }
  88% { opacity: 0.12; }
  100% { transform: translateX(150%); opacity: 0; }
}

/* Ensure there is 8px of space below the horizontal hairline above the buttons.
   This runs last and uses !important to override earlier conflicting rules. */
.card-table .button-row-cell {
  padding-top: 12px !important; /* increase space between hairline and buttons */
  padding-bottom: 12px !important; /* add space below the button row */
}



/* Make button border/outline color changes animate over 1 second
   This overrides earlier 'transition: none' rules by appearing later in the file. */
.card-table button,
.card-table .btn-primary,
.card-table .btn-secondary,
.card-table .btn-google,
.card-table .btn-unified,
.card-table #loginBtn,
.card-table #signupBtn,
.card-table #submitBtn,
.card-table #btnReset,
.card-table #btnBack {
  -webkit-transition: border-color 1s ease, outline-color 1s ease !important;
  transition: border-color 1s ease, outline-color 1s ease !important;
}

/* === USER ADJUSTMENTS: center side columns, consistent vertical spacing, input bottom padding === */
/* Keep this block last so it overrides earlier conflicting rules. */
.card-table {
  --card-row-vertical-gap: 12px !important; /* consistent vertical gap between rows */
  border-collapse: separate !important;
}
.card-table table {
  border-spacing: 0 12px !important; /* vertical gap only */
}

/* Centre-align first and third columns (horizontal + vertical centering) */
.card-table tr.form-row td:nth-child(1),
.card-table tr.form-row td:nth-child(3) {
  vertical-align: middle !important;
  text-align: center !important; /* center contents horizontally inside the cell */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure input cells are vertically centered and keep consistent height behavior */
.card-table tr.form-row td.input-cell,
.card-table tr.form-row td.input-cell > * {
  vertical-align: middle !important;
}

/* Give form inputs the requested 8px bottom padding and keep canonical box model */
.card-table .input-cell input,
.card-table .input-cell textarea,
.card-table .input-cell .form-input,
.card-table .form-input {
  padding-bottom: 8px !important;
  box-sizing: border-box !important;
}

/* Center the input element box itself inside side-column cells but keep text left-aligned
   so caret/typing remains natural. This centers the control while preserving input text flow. */
.card-table tr.form-row td:nth-child(1) .form-input,
.card-table tr.form-row td:nth-child(3) .form-input,
.card-table tr.form-row td:nth-child(1) input,
.card-table tr.form-row td:nth-child(3) input {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  text-align: left !important; /* keep text entry left-aligned inside the centered input box */
}

/* Neutralize any earlier transforms that nudge right-column helper elements out of vertical alignment */
#static-prefix-domain,
#prefix-container #static-prefix-domain {
  transform: none !important;
  vertical-align: middle !important;
}


.card-table button:focus,
.card-table .btn-primary:focus,
.card-table .btn-secondary:focus,
.card-table .btn-google:focus,
.card-table .btn-unified:focus,
.card-table #loginBtn:focus,
.card-table #signupBtn:focus,
.card-table #submitBtn:focus,
.card-table #btnReset:focus,
.card-table #btnBack:focus {
  /* also ensure outline-color transitions on focus changes */
  -webkit-transition: border-color 1s ease, outline-color 1s ease !important;
  transition: border-color 1s ease, outline-color 1s ease !important;
}

/* FINAL: ensure Login and Sign Up buttons smoothly transition their border-color
   over 1s even when other global rules disable transitions. */
.card-table #loginBtn,
.card-table #signupBtn,
.card-table button#loginBtn,
.card-table button#signupBtn {
  -webkit-transition: border-color 1s ease !important;
  transition: border-color 1s ease !important;
}

/* Also allow border-color to animate on hover/focus states */
.card-table #loginBtn:hover,
.card-table #signupBtn:hover,
.card-table #loginBtn:focus,
.card-table #signupBtn:focus {
  -webkit-transition: border-color 1s ease !important;
  transition: border-color 1s ease !important;
}

/* === FINAL: normalize all text-like inputs to identical box model/height/vertical alignment === */
/* This block runs last and uses !important to override field-specific rules (email/password/optional/username). */
.card-table input[type="text"],
.card-table input[type="email"],
.card-table input[type="password"],
.card-table input[type="search"],
.card-table input.form-input,
.card-table .form-input,
.card-table .input-cell input,
.card-table .input-cell textarea,
.card-table .input-cell .form-input {
  box-sizing: border-box !important;
  height: 34px !important;           /* canonical input height */
  line-height: 34px !important;      /* vertically center the text */
  padding-top: 0 !important;
  padding-bottom: 0 !important;      /* keep internal metrics consistent */
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-family: Geneva, Arial, Helvetica, sans-serif !important;
  font-size: 1.05em !important;
  color: var(--muted) !important;
  background: #00001dd1 !important; /* darker input background */
  border: 0.5px solid rgba(102,153,255,0.5) !important; /* default blue border on load */
  border-radius: 6px !important;
  display: inline-block !important;
  vertical-align: middle !important; /* align box vertically in table cells */
  width: auto !important;             /* don't force full-width unless a field opts in */
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Placeholder color consistency */
.card-table input::placeholder,
.card-table textarea::placeholder {
  color: #a9a9b3 !important;
  opacity: 1 !important;
}

/* Ensure table cells that contain inputs vertically center their content */
.card-table tr.form-row td,
.card-table tr.form-row td.input-cell {
  vertical-align: middle !important;
}

/* Provide a simple opt-in class for full-width inputs when needed. */
.card-table .form-input.fullwidth,
.card-table .input-cell .form-input.fullwidth,
.card-table input.fullwidth {
  display: block !important;
  width: 100% !important;
}

/* Keep textareas slightly taller by default but aligned to the same baseline */
.card-table textarea {
  min-height: 68px !important;
  height: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  line-height: 1.2 !important;
}

/* === Global: remove button shading/hover motion === */
button, .btn-primary, .btn-secondary, .btn-google, .btn-unified, .btn-reset, .btn-submit, .btn-login, .btn-signup {
  -webkit-transition: none !important;
  transition: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
button:hover, button:focus, .btn-primary:hover, .btn-secondary:hover, .btn-google:hover, .btn-unified:hover, .btn-reset:hover, .btn-submit:hover, .btn-login:hover, .btn-signup:hover,
.btn-primary:focus, .btn-secondary:focus, .btn-google:focus, .btn-unified:focus {
  box-shadow: none !important;
  transform: none !important;
  background: inherit !important;
  color: inherit !important;
}

/* Ensure buttons remain visually consistent when 'touched' or active */
button:active, .btn-primary:active, .btn-secondary:active, .btn-google:active { transform: none !important; }