/**
 * Small, Stable CSS fundation for public pages
 */
:root {
  --font-heading: 'Safiro', system-ui, sans-serif;
  --font-sans: 'Onest', system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, monospace;

  --spacing: 0.25rem;

  --text-branded-primary:#093F46;
  --text-branded-secondary:#11727E;
  --button-background-primary-default:#11727E;
  --button-background-primary-hover: #093F46;
  --button-background-secondary-hover: #EEF8F9;
  --button-background-primary-disabled: #D3D3DF;
  --button-border-secondary-default: #B8DDE0;
  --button-border-secondary-hover: #63B8C3;
  --button-border-secondary-disabled: #D3D3DF;
  --text-primary: #2E2E33;
  --text-secondary: #505057;
  --text-tertiary: #81818B;
  --text-ghost: #FFF;
  --text-disabled: #D3D3D3;
  --forms-border-click-on:#63B8C3;
  --forms-border-default: #EBEBF5;
  --forms-background-neutral: #FFFFFF99;
  --forms-border-hover: #D3D3DF;
  --attention-text-error: #C50F1F;
  --link-default: #2960E2;
  --surface-attention-components: #2E2E33;
  --surface-content-secondary: #f9f9ff;
  --corner-md: 12px;
  --corner-md-large: 16px;
  --corner-lg: 24px;
  --surface-neutral-default: #ffffff;
  --color-green-200: #BFEED4;
  --radius-pill: 999px;
  --color-background: #EEF8F9;
  --forms-background-neutral: #FFFFFF99;
;
  /* Align with app/assets/stylesheets/tailwind/globals.css --shadow-modal (Dialog / Modal surfaces) */
  --shadow-modal: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

/*#region ---------- Base & Reset - Rewiewed block ---------- */

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

html {
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;

  background: var(--color-background);
  background: linear-gradient(27deg, var(--color-background) 7.06%, var(--text-ghost) 76.34%);
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  /* https://peerlist.io/designerdada/articles/why-fonts-look-bolder-in-browsers-compared-to-figma */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--text-tertiary) transparent !important;
}
::-webkit-scrollbar-track { background:  transparent; }
::-webkit-scrollbar-thumb { background-color: var(--text-tertiary); }

input, button, select, textarea { font: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: 3rem;     line-height: 3.25rem; font-weight: 600; letter-spacing: -0.03em; } /* heading-l */
h2 { font-size: 2.25rem;  line-height: 2.5rem;  font-weight: 600; letter-spacing: -0.03em; } /* heading-m */
h3,
h4,
h5,
h6 { font-size: 1.375rem; line-height: 1.5rem;  font-weight: 600; letter-spacing: -0.02em; } /* heading-s */

a {
  color: var(--link-default);
  font-style: normal;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

a:hover {
  text-decoration: underline;
}

*:focus-visible {
  outline: 2px solid var(--button-border-secondary-default);
}

img {
  max-width: 100%;
  height: auto;
  border-style: none;
}

figure {
  display: block;
  margin: 0;
  padding: 0;
}
figure figcaption {
  padding: calc(var(--pico-spacing) * 0.5) 0;
  color: var(--pico-muted-color);
}

[x-cloak] { display: none !important; }

p {
  margin-top: 0;
}

b,
strong {
  font-weight: 700;
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* --- Buttons --- */

/* Base — structure only. Requires .btn class; does not apply color. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 14px 24px;
  min-width: 120px;
  border-radius: var(--radius-pill);
  border: none;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Primary */
.btn-primary {
  background-color: var(--button-background-primary-default);
  color: var(--text-ghost);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--button-background-primary-hover);
  text-decoration: none;
}
.btn-primary:disabled {
  background-color: var(--button-background-primary-disabled);
  cursor: not-allowed;
}

/* Secondary */
.btn-secondary {
  background-color: transparent;
  color: var(--text-branded-secondary);
  box-shadow: inset 0 0 0 2px var(--button-border-secondary-default);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  box-shadow: inset 0 0 0 2px var(--button-border-secondary-hover);
  text-decoration: none;
}
.btn-secondary:disabled {
  color: var(--button-border-secondary-disabled);
  box-shadow: inset 0 0 0 2px var(--button-border-secondary-disabled);
  cursor: not-allowed;
}

/* Like a link */
.btn-link {
  color: var(--link-default);
  font-style: normal;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.btn-link:hover,
.btn-link:focus-visible {
  text-decoration: underline;
}

/*#endregion*/

/*#region  ---------- Layout Components - Reviewed block ---------- */

/* Stack Layout https://every-layout.dev/layouts/stack/ */

.o-stack { }

.o-stack > * + * {
  margin-top: 1.5rem;
}

.o-flow {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5rem;
}

.container--main {
  display: grid;
  justify-items: center;
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  gap:2rem;
}

.header__logo {
  height: 40px;
}

/*#endregion*/

/* --- Forms & Inputs --- */

label {
  font-weight: 500;
  color: var(--text-tertiary);
  text-align: left;
}


.login-card form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  padding-right: 44px;
  font-size: 0.875rem;
  height: 48px;

  border: 2px solid var(--forms-border-default);
  border-radius: var(--corner-md-large);
  background-color: white;
  color: var(--text-primary);

  display: flex;
  flex-shrink: 0;
  gap: 10px;
  align-items: center;
  align-self: stretch;

  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover {
    border-color: var(--forms-border-hover);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: var(--forms-border-click-on);
    background: var(--forms-background-neutral);
    outline: none;
}

input::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
}

input:focus::placeholder {
  color: var(--text-disabled);
}

.input-error.input-error.input-error,
input:not(:placeholder-shown):invalid,
input[aria-invalid="true"] {
  background-color: var(--forms-background-neutral);
  border-color: var(--attention-text-error);
  color: var(--attention-text-error);
}

.input-error.input-error.input-error::placeholder,
input:not(:placeholder-shown):invalid::placeholder,
input[aria-invalid="true"]::placeholder {
  color: var(--attention-text-error);
}

input:not(:placeholder-shown):invalid:hover,
input:not(:placeholder-shown):invalid:focus,
input[aria-invalid="true"]:hover,
input[aria-invalid="true"]:focus {
  outline: none;
  border-color: var(--attention-text-error);
}

input:-moz-autofill {
  box-shadow: 0 0 0px 1000px #fff inset;
  -moz-text-fill-color: var(--text-primary);
  transition: background-color 999999s ease-in-out 0s;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  box-shadow: 0 0 0px 1000px #fff inset;
  -webkit-text-fill-color: var(--text-primary);
  transition: background-color 999999s ease-in-out 0s;
}

input:-webkit-autofill.input-error,
input:-webkit-autofill:invalid,
input:-webkit-autofill[aria-invalid="true"],
input:-webkit-autofill:not(:placeholder-shown):invalid {
  -webkit-text-fill-color: var(--attention-text-error) !important;
  box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
}

input:-moz-autofill.input-error,
input:-moz-autofill:invalid,
input:-moz-autofill[aria-invalid="true"] {
    color: var(--attention-text-error) !important;
    box-shadow: 0 0 0px 1000px #fff inset !important;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--button-background-primary-default);
  vertical-align: middle;
  cursor: pointer;
  height: 1.25rem;
  width: 1.25rem;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--forms-border-hover);
  border-radius: 4px; /* optional */

  cursor: pointer;
  background: transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="checkbox"]:checked {
  background-color: var(--button-background-primary-default);
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5L5 9L13 1' stroke='white' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}


input[type="radio"][type="radio"]:hover,
input[type="radio"][type="radio"]:focus-visible,
input[type="checkbox"][type="checkbox"]:hover,
input[type="checkbox"][type="checkbox"]:focus-visible {
  outline: 2px solid var(--button-border-secondary-default);
}

/*correct an ugly red on checboxes while not changin specifity in the invalid selectors*/
input[type="checkbox"]:invalid,
input[type="checkbox"]:invalid:hover,
input[type="checkbox"]:invalid:focus {
  border-color: var(--forms-border-hover);
}

select,
input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  padding-right: 44px;
  font-size: 0.875rem;
  height: 48px;

  border: 2px solid var(--forms-border-default);
  border-radius: var(--corner-md-large);
  background-color: white;
  color: var(--text-primary);

  display: flex;
  flex-shrink: 0;
  gap: 10px;
  align-items: center;
  align-self: stretch;

  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

select {
  appearance: none;
  background-color: var(--forms-background-neutral);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%3E%3Cpath%20d%3D'M6%209l6%206%206-6'%20stroke%3D'%23505057'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
  padding-right: 44px;
  cursor: pointer;
}

select:hover {
  border-color: var(--forms-border-hover);
}

select:focus {
  border-color: var(--forms-border-click-on);
  outline: none;
}

select:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%3E%3Cpath%20d%3D'M6%209l6%206%206-6'%20stroke%3D'%23D3D3DF'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E");
}

select:has(option:checked[value=""]) {
  color: var(--text-tertiary);
}

option {
  color: var(--text-primary);
}

@supports (appearance: base-select) {
  /* Custom select */
  select,
  select::picker(select) {
    appearance: base-select;
  }

  select::picker-icon {
    display: none;
  }

  select:open {
    border-color: var(--forms-border-click-on);
    background-color: var(--surface-neutral-default);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%3E%3Cpath%20d%3D'M6%2015l6-6%206%206'%20stroke%3D'%23505057'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E");
  }

  select::picker(select) {
    margin-top: 0.5rem;
    border: 1px solid var(--forms-border-default);
    border-radius: var(--corner-md-large);
    box-shadow: 0px 32px 60px -20px rgba(0, 0, 0, 0.08);
    padding: 0.75rem 0;
    background: white;
    overflow: hidden;
  }

  option {
    padding: 0.75rem;
    border-bottom: 1px solid var(--surface-content-secondary);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface-neutral-default);
    cursor: pointer;
  }

  option:last-child {
    border-bottom: none;
  }

  option:focus,
  option:hover {
    background: var(--surface-content-secondary);
    outline: none;
  }

  option:checked {
    background: var(--surface-neutral-default);
  }
}

.input-error-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
  display: none;
}

.input-error + .input-error-icon,
input:not(:placeholder-shown):invalid + .input-error-icon,
input[aria-invalid="true"] + .input-error-icon {
  display: block;
}

.input-error ~ .input-error-icon,
input:not(:placeholder-shown):invalid ~ .input-error-icon,
input[aria-invalid="true"] ~ .input-error-icon {
  display: block;
}

.input__inline-error {
  color: var(--attention-text-error);
  margin: 0.25rem 0 0;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.autocomplete-input-wrap {
  position: relative;
}

.autocomplete-search-input {
  width: 100%;
  position: relative;
}

.autocomplete-search-input input {
  padding-left: 42px;
  padding-right: 42px;
  border-radius: var(--radius-pill);
  height: 48px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete-selected-box {
  width: 100%;
  height: 80px;
  border: 2px solid var(--forms-border-default);
  border-radius: var(--corner-md-large);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 20px 20px;
}

.autocomplete-selected-name {
  flex: 1;
  min-width: 0;
  max-width: 70%;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
  color: var(--text-tertiary);
  z-index: 3;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;
  background: var(--text-disabled);

  color: #fff;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  z-index: 4;
  padding: 0;
}

.search-clear:hover,
.search-clear:focus-visible {
  background: var(--button-background-primary-default);
  text-decoration: none;
}

.autocomplete-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  z-index: 100;
  border: 1px solid var(--forms-border-default);
  border-radius: var(--corner-md-large);
  background: #fff;
  box-shadow: 0 32px 60px -20px rgba(0, 0, 0, 0.08);
  max-height: 360px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.autocomplete-panel__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.autocomplete-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: #fff;
  cursor: pointer;
  padding: 20px;
  min-height: 84px;
  border-radius: 0px;
}

.autocomplete-row:hover,
.autocomplete-row:focus-visible {
  background: var(--surface-content-secondary);
  text-decoration: none;
}

.autocomplete-row:last-child {
  border-bottom: 0;
}

.autocomplete-row__title {
  font-size: 0.875rem;
  line-height: 20px;
  color: var(--text-primary);
  font-weight: 500;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.autocomplete-row__meta {
  font-size: 0.875rem;
  line-height: 20px;
  color: var(--text-tertiary);
  display: block;
  text-align: left;
}

.autocomplete-row__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #d7f0f2;
  color: var(--text-branded-secondary);
  font-weight: 600;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  flex: 0 0 40px;
}

img.autocomplete-row__avatar-img {
  line-height: 0;
  padding: 0;
  display: block;
  object-fit: cover;
  flex-shrink: 0;
}

.autocomplete-row__avatar--verified {
  background: #f9f9ff;
}

.autocomplete-row__content {
  display: block;
  flex: 1;
  min-width: 0;
}

.autocomplete-empty {
  padding: 16px;
  color: var(--text-tertiary);
  font-size: 0.875rem;
  line-height: 20px;
}

.autocomplete-footer {
  border-top: 1px solid #ebebf5;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 20px;
  color: var(--text-branded-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: right;
}

.input__label {
  display: block;
  font-weight: 500;
  color: var(--text-tertiary);
  text-align: left;
  margin-bottom: 0.5rem;
}

/*#region  ---------- Cards & Login Specifics - Reviewed block ---------- */

/* --- Cards & Login Specifics --- */

.login-card {
  background: #FFF;
  padding: 84px;
  padding-top: 120px;
  border-radius: 24px;
  box-shadow: 0 20px 40px -10px rgba(184, 221, 224, 0.20);
  width: 520px;
  max-width: 90vw;
  min-height: 600px;
  text-align: center;
  display: grid;
  align-items: center;
  justify-items: stretch;
}

@media (max-width: 520px) {
  .login-card {
    padding: 5rem 2.5rem;
  }
}

.login-card {
  color: var(--text-secondary);
}

.login-card p {
  text-wrap: wrap;
}

.login-card h1 {
  color: var(--text-branded-primary);
  text-align: center;
  text-wrap: wrap;
}

.login-card .subtitle {
  color: var(--text-tertiary);
  text-align: center;
  text-wrap: balance;
}

.login-card__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.login-card__links > * {
  margin: 0;
}

/*#endregion*/

/*#region  ---------- Form Elements - Reviewed block ---------- */

.choice-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin: 0;
  text-align: left;
}

.choice-row input[type="radio"],
.choice-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--button-background-primary-default);
}

.choice-row__label {
  flex: 1;
  min-width: 0;
}

.choice-row__label--truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.choice-panel {
  background: var(--surface-content-secondary);
  border-radius: var(--corner-md-large);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1rem;
}

.choice-panel > .choice-row {
  padding: 0.625rem 0.75rem;
}

.choice-row--remember {
  justify-content: flex-start;
  align-self: stretch;
}

.toast {
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;

  width: 360px;
  width: min(360px, calc(100vw - 32px));
  padding: 20px 16px;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 20px;

  color: var(--text-ghost);
  border-radius: var(--corner-md);
  background: var(--surface-attention-components);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10), 0 16px 16px 0 rgba(0, 0, 0, 0.08);
}

.toast-message {
  flex: 1;
  min-width: 0;
  text-wrap: balance;
}

.toast-icon {
  flex-shrink: 0;
  color: var(--attention-text-error);
}

.toast-icon img {
  width: 27px;
  height: 27px;
}

.toast-close {
  background: transparent;
  color: white;
  border: none;
  font-size: 16px;
  cursor: pointer;
  margin-left: auto;
  font-weight: 700;
  width: 24px;
  height: 24px;
  padding: 0;
  flex-shrink: 0;
  flex-grow: 0;
  aspect-ratio: 1/1;
  min-width: auto;
  min-height: auto;
}

.toast-close:hover, .toast-close:focus {
  background: #FFFFFF33;
}

.register_required { display: none !important; }

/*#endregion*/

/* ─── Page transitions ───────────────────────────────────────────── */

@view-transition {
  navigation: auto;
}

.login-card {
  /* Tells the browser: "This element is the same one on the next page" */
  view-transition-name: login-card;
}

/* Custom animation for the card specifically */
::view-transition-group(login-card) {
  animation-duration: 0.4s;
}

/**
 * background lines
 */

:root{
  --bg-grid-color: #D7F0F2;
  --bg-grid-size-x: 368px;
  --bg-grid-offset-y: 132px;
  --bg-spacing-edge: 3.125%;
  --bg-line-width: 1px;
  --bg-special: linear-gradient(to bottom, rgba(215, 240, 242, 0.20) 0px, rgba(215,240,242,1) 1350px, rgba(215, 240, 242, 0.20) 4365px, rgba(215, 240, 242, 0.80) 100%);
  --bg-solid: linear-gradient(to bottom, rgba(215,240,242,1), rgba(215,240,242,1));
  --bg-horiz: linear-gradient(to bottom, rgba(215,240,242,1) 1px, transparent 1px );
}

html::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: multiply;

  background-image:    var(--bg-images);
  background-position: var(--bg-positions);
  background-size:     var(--bg-sizes);
  background-repeat:   var(--bg-repeats);
}

@media (max-width: 840px) {
  :root {
    --bg-images:
      var(--bg-horiz),
      var(--bg-special), /* Line 1 (Special) */
      var(--bg-solid),   /* Line 2 */
      var(--bg-solid);   /* Line 3 */

    --bg-sizes:
      100% var(--bg-grid-size-x),
      var(--bg-line-width) 100%,
      var(--bg-line-width) 100%,
      var(--bg-line-width) 100%;

    --bg-repeats: repeat, no-repeat, no-repeat, no-repeat;

    /* Positions: Left Edge | Center | Right Edge */
    --bg-positions:
      0 var(--bg-grid-offset-y),
      var(--bg-spacing-edge) 0,
      50% 0,
      calc(100% - var(--bg-spacing-edge)) 0;
  }
}

@media (min-width: 841px) and (max-width: 1440px) {
  :root {
    /* Math: Split available space into 3 gaps */
    --bg-gap: calc((100% - (2 * var(--bg-spacing-edge))) / 3);

    --bg-images:
      var(--bg-horiz),
      var(--bg-special),
      var(--bg-solid),
      var(--bg-solid),
      var(--bg-solid);

    --bg-sizes:
      100% var(--bg-grid-size-x),
      var(--bg-line-width) 100%,
      var(--bg-line-width) 100%,
      var(--bg-line-width) 100%,
      var(--bg-line-width) 100%;

    --bg-repeats: repeat, no-repeat, no-repeat, no-repeat, no-repeat;

    --bg-positions:
      0 var(--bg-grid-offset-y),
      var(--bg-spacing-edge) 0,                           /* Line 1 */
      calc(var(--bg-spacing-edge) + var(--bg-gap)) 0,        /* Line 2 */
      calc(var(--bg-spacing-edge) + (var(--bg-gap) * 2)) 0,  /* Line 3 */
      calc(100% - var(--bg-spacing-edge)) 0;              /* Line 4 */
  }
}

@media (min-width: 1441px) {
  :root {
    /* Math: Split available space into 4 gaps */
    --bg-gap: calc((100% - (2 * var(--bg-spacing-edge))) / 4);

    --bg-images:
      var(--bg-horiz),
      var(--bg-special),
      var(--bg-solid),
      var(--bg-solid),
      var(--bg-solid),
      var(--bg-solid);

    --bg-sizes:
      100% var(--bg-grid-size-x),
      var(--bg-line-width) 100%,
      var(--bg-line-width) 100%,
      var(--bg-line-width) 100%,
      var(--bg-line-width) 100%,
      var(--bg-line-width) 100%;

    --bg-repeats: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

    --bg-positions:
      0 var(--bg-grid-offset-y),
      var(--bg-spacing-edge) 0,                           /* Line 1 */
      calc(var(--bg-spacing-edge) + var(--bg-gap)) 0,        /* Line 2 */
      50% 0,                                           /* Line 3 (Center) */
      calc(var(--bg-spacing-edge) + (var(--bg-gap) * 3)) 0,  /* Line 4 */
      calc(100% - var(--bg-spacing-edge)) 0;              /* Line 5 */
  }
}

/* --- Password toggle --- */

.password-toggle {
  position: relative;
  width: 100%;
}

.password-toggle__btn.password-toggle__btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  opacity: 0;
  border-radius: 50%;
  transition: opacity 0.2s ease;
  min-width: auto;
  width: auto;
}

.password-toggle__btn:hover,
.password-toggle__btn:focus-visible {
  opacity: 1;
  background-color: transparent;
}

.password-toggle__btn img {
  display: block;
  width: 20px;
  height: 20px;
}

.password-toggle > input:focus ~ .password-toggle__btn {
  opacity: 1;
}

.password-toggle > input.input-error,
.password-toggle > input[aria-invalid="true"] {
  padding-right: 72px;
}

.password-toggle > input.input-error ~ .password-toggle__btn,
.password-toggle > input[aria-invalid="true"] ~ .password-toggle__btn {
  right: 40px;
}

/* --- /Password toggle --- */

/* ------------------------------------------------- REVIEW BELOW, unneccesarily speciffic --------------------------------------------------------------------------------------------------- */

/* Preview HCP signup — org search + outcome modals */
.login-card.login-card--signup-flow {
  position: relative;
  align-items: start;
  /* Do not clip overflow on any axis: non-visible overflow-x forces overflow-y to compute
     to "auto" (CSS 2.1), which cuts off the autocomplete panel below the fixed-height card. */
  overflow: visible;
  box-sizing: border-box;
}

.login-card.login-card--signup-flow .login-card__content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* Reserve the absolute back button row (top 28px + 48px control + gap) so layout
     does not shift when the button is shown or hidden. */
  padding-top: 80px;
}

.login-card.login-card--signup-flow form.form--welcome {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.login-card.login-card--signup-flow .autocomplete-input-wrap {
  max-width: 100%;
  min-width: 0;
}

/* Preview HCP signup — post-continue outcome (verified / unverified / no org) */
.login-card.login-card--signup-flow.login-card--signup-outcome {
  height: auto;
  min-height: 520px;
  max-height: none;
}

.login-card.login-card--signup-flow.login-card--signup-outcome .login-card__content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.signup-outcome__figure {
  margin: 0 auto 8px;
  max-width: 240px;
  width: 100%;
}

.signup-outcome__illustration {
  display: block;
  width: 100%;
  height: auto;
}

/* Verified-org explainer — text CTA in dropdown footer (teal link; not global button / .link blue) */
.autocomplete-footer .autocomplete-footer__info-btn {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--text-branded-secondary);
  cursor: pointer;
  text-align: right;
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.autocomplete-footer .autocomplete-footer__info-btn:hover,
.autocomplete-footer .autocomplete-footer__info-btn:focus-visible {
  background: none;
  box-shadow: none;
  color: var(--text-branded-primary);
  text-decoration: none;
  opacity: 1;
}

.autocomplete-footer .autocomplete-footer__info-btn:focus-visible {
  outline: 2px solid var(--button-border-secondary-default);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Preview HCP — invitation signup (/preview/sign_up) */
.login-card.login-card--preview-registration {
  overflow: visible;
}

/* Preview HCP — multi-step signup wizard (/preview/sign_up/wizard/*) */
.signup-wizard .signup-wizard__back a {
  font-weight: 600;
}

.signup-verified-info-modal {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.signup-verified-info-modal__backdrop {
  position: absolute;
  inset: 0;
  /* DialogOverlay: bg-translucent-dark-50 (tokens.css) */
  background: #2e2e3380;
  backdrop-filter: blur(2px);
}

.signup-verified-info-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 356px;
  max-height: min(600px, 95dvh);
  overflow-y: auto;
  padding: 28px 28px 16px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-modal);
  text-align: left;
}

.signup-verified-info-modal__icon-wrap {
  width: 80px;
  height: 80px;
  margin-bottom: 12px;
  border-radius: 24px;
  background: linear-gradient(to bottom left, #ffffff 0%, var(--button-background-secondary-hover) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-verified-info-modal__icon {
  display: block;
  width: 40px;
  height: 40px;
}

.signup-verified-info-modal__body {
  margin: 0;
  padding-bottom: 80px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--text-secondary);
  text-align: left;
}

.signup-verified-info-modal__body p {
  margin: 0 0 16px;
}

.signup-verified-info-modal__body p:last-child {
  margin-bottom: 0;
}

/* DialogFooter: py-4 after body (see dialog.tsx) */
.signup-verified-info-modal__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
}

/*
 * Modal dismiss action: right-aligned primary round button.
 */
.signup-verified-info-modal__dialog .signup-verified-info-modal__close.btn {
  width: auto;
  min-width: 0;
  border-radius: var(--radius-pill);
  min-height: 40px;
  padding: 10px 42px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}



/* Preview HCP wizard fidelity refinements */
.signup-wizard {
  position: relative;
}

.login-card--back {
  position: relative;
}

.signup-wizard__back-button {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  width: 48px;
  height: 48px;
  min-width: 0;
  padding: 0;
  gap: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--forms-border-default);
  background: var(--surface-neutral-default);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}

.signup-wizard__back-button:hover,
.signup-wizard__back-button:focus {
  text-decoration: none;
  border-color: var(--button-border-secondary-hover);
}

.signup-wizard:has(.signup-wizard__back-button) .login-card__content {
  padding-top: 88px;
}

.signup-wizard.signup-wizard--email .login-card__content,
.signup-wizard.signup-wizard--password:has(.signup-wizard__back-button) .login-card__content {
  /* Figma: title starts at 120px from card top (84 card padding + 36 content offset). */
  padding-top: 36px;
}

.signup-wizard.signup-wizard--email input[type="email"],
.signup-wizard.signup-wizard--password input[type="password"],
.signup-wizard.signup-wizard--about-you input[type="text"] {
  background-color: var(--forms-background-neutral);
}

.signup-wizard.signup-wizard--password .login-card__content {
  /* Keep deterministic spacing for step 8 regardless of :has() support. */
  padding-top: 36px;
}

.signup-wizard.signup-wizard--role .login-card__content {
  padding-top: 36px;
}

.signup-wizard.signup-wizard--role .btn.btn-primary {
  font-size: 0.875rem;
}

.signup-wizard.signup-wizard--about-you .login-card__content {
  padding-top: 36px;
}

.signup-wizard.signup-wizard--about-you.login-card {
  min-height: 660px;
}

.signup-wizard.signup-wizard--success.login-card {
  min-height: 660px;
  padding-top: 44px;
}

.signup-wizard.signup-wizard--success .login-card__content {
  padding-top: 0;
}

/* Step 9 — org card + role (Figma 9001:67642) */
.signup-wizard__org-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 350px;
  min-height: 80px;
  margin: 0 auto 24px;
  padding: 20px 16px 20px 20px;
  box-sizing: border-box;
  border-radius: var(--corner-md-large);
  border: 2px solid var(--forms-border-default);
  background: rgba(255, 255, 255, 0.6);
  text-align: left;
}

.signup-wizard__org-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-content-secondary);
  color: var(--text-branded-secondary);
  font-size: 1rem;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
}

img.signup-wizard__org-avatar-img {
  display: block;
  object-fit: cover;
  line-height: 0;
  padding: 0;
}

.signup-wizard__org-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.signup-wizard__org-card .signup-wizard__org-label {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.signup-wizard__org-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1rem;
  color: var(--text-primary);
  word-break: break-word;
}

/* Step 10 — name stack + photo panel (Figma 9031:74602) */

.signup-wizard__photo-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 352px;
  min-height: 80px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
  border-radius: var(--corner-md-large);
  border: 0;
  background: var(--surface-content-secondary);
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.signup-wizard__photo-panel:hover,
.signup-wizard__photo-panel:focus-within {
  box-shadow: inset 0 0 0 2px var(--forms-border-hover);
}

.signup-wizard__photo-avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-green-200);
  object-fit: cover;
}

.signup-wizard__photo-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.signup-wizard__photo-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-branded-secondary);
}

.signup-wizard__photo-upload-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-branded-secondary);
}

.signup-wizard__photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*#region Utils - Rewiewed block */

/* ─── Typography utilities ───────────────────────────────────────────────── */

.heading-xxl { font-family: var(--font-heading); font-weight: 600; font-size: 6.25rem;  line-height: 6.75rem;  letter-spacing: -0.04em; }
.heading-xl  { font-family: var(--font-heading); font-weight: 600; font-size: 4rem;     line-height: 4.25rem;  letter-spacing: -0.04em; }
.heading-l   { font-family: var(--font-heading); font-weight: 600; font-size: 3rem;     line-height: 3.25rem;  letter-spacing: -0.03em; }
.heading-m   { font-family: var(--font-heading); font-weight: 600; font-size: 2.25rem;  line-height: 2.5rem;   letter-spacing: -0.03em; }
.heading-s   { font-family: var(--font-heading); font-weight: 600; font-size: 1.375rem; line-height: 1.5rem;   letter-spacing: -0.02em; }

.body-l   { font-family: var(--font-sans); font-weight: 500; font-size: 1.25rem;  line-height: 1.75rem;  letter-spacing: -0.01em; }
.body-m   { font-family: var(--font-sans); font-weight: 400; font-size: 1rem;     line-height: 1.5rem;   letter-spacing: -0.01em; }
.body-s   { font-family: var(--font-sans); font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; }
.body-xs  { font-family: var(--font-sans); font-weight: 400; font-size: 0.75rem;  line-height: 1rem; }
.body-xxs { font-family: var(--font-sans); font-weight: 400; font-size: 0.625rem; line-height: 0.875rem; }

.hairline-m  { font-family: var(--font-sans); font-weight: 700; font-size: 0.875rem; line-height: 1;       letter-spacing: 0.015em; text-transform: uppercase; }
.hairline-s  { font-family: var(--font-sans); font-weight: 800; font-size: 0.75rem;  line-height: 1;       letter-spacing: 0.01em;  text-transform: uppercase; }
.hairline-xs { font-family: var(--font-sans); font-weight: 700; font-size: 0.625rem; line-height: 0.75rem;                          text-transform: uppercase; }


.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text-start { text-align: start; }
.text-end { text-align: end; }


.text-wrap { text-wrap: wrap; }
.text-nowrap { text-wrap: nowrap; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* ─── Margin ─────────────────────────────────────────────────────────────── */

/* All sides */
.m-0    { margin: 0; }
.m-1    { margin: calc(var(--spacing) * 1); }
.m-2    { margin: calc(var(--spacing) * 2); }
.m-3    { margin: calc(var(--spacing) * 3); }
.m-4    { margin: calc(var(--spacing) * 4); }
.m-5    { margin: calc(var(--spacing) * 5); }
.m-6    { margin: calc(var(--spacing) * 6); }
.m-7    { margin: calc(var(--spacing) * 7); }
.m-8    { margin: calc(var(--spacing) * 8); }
.m-9    { margin: calc(var(--spacing) * 9); }
.m-10   { margin: calc(var(--spacing) * 10); }
.m-11   { margin: calc(var(--spacing) * 11); }
.m-12   { margin: calc(var(--spacing) * 12); }
.m-14   { margin: calc(var(--spacing) * 14); }
.m-16   { margin: calc(var(--spacing) * 16); }
.m-20   { margin: calc(var(--spacing) * 20); }
.m-24   { margin: calc(var(--spacing) * 24); }
.m-auto { margin: auto; }

/* Horizontal axis */
.mx-0    { margin-left: 0; margin-right: 0; }
.mx-1    { margin-left: calc(var(--spacing) * 1);  margin-right: calc(var(--spacing) * 1); }
.mx-2    { margin-left: calc(var(--spacing) * 2);  margin-right: calc(var(--spacing) * 2); }
.mx-3    { margin-left: calc(var(--spacing) * 3);  margin-right: calc(var(--spacing) * 3); }
.mx-4    { margin-left: calc(var(--spacing) * 4);  margin-right: calc(var(--spacing) * 4); }
.mx-5    { margin-left: calc(var(--spacing) * 5);  margin-right: calc(var(--spacing) * 5); }
.mx-6    { margin-left: calc(var(--spacing) * 6);  margin-right: calc(var(--spacing) * 6); }
.mx-7    { margin-left: calc(var(--spacing) * 7);  margin-right: calc(var(--spacing) * 7); }
.mx-8    { margin-left: calc(var(--spacing) * 8);  margin-right: calc(var(--spacing) * 8); }
.mx-9    { margin-left: calc(var(--spacing) * 9);  margin-right: calc(var(--spacing) * 9); }
.mx-10   { margin-left: calc(var(--spacing) * 10); margin-right: calc(var(--spacing) * 10); }
.mx-11   { margin-left: calc(var(--spacing) * 11); margin-right: calc(var(--spacing) * 11); }
.mx-12   { margin-left: calc(var(--spacing) * 12); margin-right: calc(var(--spacing) * 12); }
.mx-14   { margin-left: calc(var(--spacing) * 14); margin-right: calc(var(--spacing) * 14); }
.mx-16   { margin-left: calc(var(--spacing) * 16); margin-right: calc(var(--spacing) * 16); }
.mx-20   { margin-left: calc(var(--spacing) * 20); margin-right: calc(var(--spacing) * 20); }
.mx-24   { margin-left: calc(var(--spacing) * 24); margin-right: calc(var(--spacing) * 24); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Vertical axis */
.my-0    { margin-top: 0; margin-bottom: 0; }
.my-1    { margin-top: calc(var(--spacing) * 1);  margin-bottom: calc(var(--spacing) * 1); }
.my-2    { margin-top: calc(var(--spacing) * 2);  margin-bottom: calc(var(--spacing) * 2); }
.my-3    { margin-top: calc(var(--spacing) * 3);  margin-bottom: calc(var(--spacing) * 3); }
.my-4    { margin-top: calc(var(--spacing) * 4);  margin-bottom: calc(var(--spacing) * 4); }
.my-5    { margin-top: calc(var(--spacing) * 5);  margin-bottom: calc(var(--spacing) * 5); }
.my-6    { margin-top: calc(var(--spacing) * 6);  margin-bottom: calc(var(--spacing) * 6); }
.my-7    { margin-top: calc(var(--spacing) * 7);  margin-bottom: calc(var(--spacing) * 7); }
.my-8    { margin-top: calc(var(--spacing) * 8);  margin-bottom: calc(var(--spacing) * 8); }
.my-9    { margin-top: calc(var(--spacing) * 9);  margin-bottom: calc(var(--spacing) * 9); }
.my-10   { margin-top: calc(var(--spacing) * 10); margin-bottom: calc(var(--spacing) * 10); }
.my-11   { margin-top: calc(var(--spacing) * 11); margin-bottom: calc(var(--spacing) * 11); }
.my-12   { margin-top: calc(var(--spacing) * 12); margin-bottom: calc(var(--spacing) * 12); }
.my-14   { margin-top: calc(var(--spacing) * 14); margin-bottom: calc(var(--spacing) * 14); }
.my-16   { margin-top: calc(var(--spacing) * 16); margin-bottom: calc(var(--spacing) * 16); }
.my-20   { margin-top: calc(var(--spacing) * 20); margin-bottom: calc(var(--spacing) * 20); }
.my-24   { margin-top: calc(var(--spacing) * 24); margin-bottom: calc(var(--spacing) * 24); }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* Top */
.mt-0    { margin-top: 0; }
.mt-1    { margin-top: calc(var(--spacing) * 1); }
.mt-2    { margin-top: calc(var(--spacing) * 2); }
.mt-3    { margin-top: calc(var(--spacing) * 3); }
.mt-4    { margin-top: calc(var(--spacing) * 4); }
.mt-5    { margin-top: calc(var(--spacing) * 5); }
.mt-6    { margin-top: calc(var(--spacing) * 6); }
.mt-7    { margin-top: calc(var(--spacing) * 7); }
.mt-8    { margin-top: calc(var(--spacing) * 8); }
.mt-9    { margin-top: calc(var(--spacing) * 9); }
.mt-10   { margin-top: calc(var(--spacing) * 10); }
.mt-11   { margin-top: calc(var(--spacing) * 11); }
.mt-12   { margin-top: calc(var(--spacing) * 12); }
.mt-14   { margin-top: calc(var(--spacing) * 14); }
.mt-16   { margin-top: calc(var(--spacing) * 16); }
.mt-20   { margin-top: calc(var(--spacing) * 20); }
.mt-24   { margin-top: calc(var(--spacing) * 24); }
.mt-auto { margin-top: auto; }

/* Right */
.mr-0    { margin-right: 0; }
.mr-1    { margin-right: calc(var(--spacing) * 1); }
.mr-2    { margin-right: calc(var(--spacing) * 2); }
.mr-3    { margin-right: calc(var(--spacing) * 3); }
.mr-4    { margin-right: calc(var(--spacing) * 4); }
.mr-5    { margin-right: calc(var(--spacing) * 5); }
.mr-6    { margin-right: calc(var(--spacing) * 6); }
.mr-7    { margin-right: calc(var(--spacing) * 7); }
.mr-8    { margin-right: calc(var(--spacing) * 8); }
.mr-9    { margin-right: calc(var(--spacing) * 9); }
.mr-10   { margin-right: calc(var(--spacing) * 10); }
.mr-11   { margin-right: calc(var(--spacing) * 11); }
.mr-12   { margin-right: calc(var(--spacing) * 12); }
.mr-14   { margin-right: calc(var(--spacing) * 14); }
.mr-16   { margin-right: calc(var(--spacing) * 16); }
.mr-20   { margin-right: calc(var(--spacing) * 20); }
.mr-24   { margin-right: calc(var(--spacing) * 24); }
.mr-auto { margin-right: auto; }

/* Bottom */
.mb-0    { margin-bottom: 0; }
.mb-1    { margin-bottom: calc(var(--spacing) * 1); }
.mb-2    { margin-bottom: calc(var(--spacing) * 2); }
.mb-3    { margin-bottom: calc(var(--spacing) * 3); }
.mb-4    { margin-bottom: calc(var(--spacing) * 4); }
.mb-5    { margin-bottom: calc(var(--spacing) * 5); }
.mb-6    { margin-bottom: calc(var(--spacing) * 6); }
.mb-7    { margin-bottom: calc(var(--spacing) * 7); }
.mb-8    { margin-bottom: calc(var(--spacing) * 8); }
.mb-9    { margin-bottom: calc(var(--spacing) * 9); }
.mb-10   { margin-bottom: calc(var(--spacing) * 10); }
.mb-11   { margin-bottom: calc(var(--spacing) * 11); }
.mb-12   { margin-bottom: calc(var(--spacing) * 12); }
.mb-14   { margin-bottom: calc(var(--spacing) * 14); }
.mb-16   { margin-bottom: calc(var(--spacing) * 16); }
.mb-20   { margin-bottom: calc(var(--spacing) * 20); }
.mb-24   { margin-bottom: calc(var(--spacing) * 24); }
.mb-auto { margin-bottom: auto; }

/* Left */
.ml-0    { margin-left: 0; }
.ml-1    { margin-left: calc(var(--spacing) * 1); }
.ml-2    { margin-left: calc(var(--spacing) * 2); }
.ml-3    { margin-left: calc(var(--spacing) * 3); }
.ml-4    { margin-left: calc(var(--spacing) * 4); }
.ml-5    { margin-left: calc(var(--spacing) * 5); }
.ml-6    { margin-left: calc(var(--spacing) * 6); }
.ml-7    { margin-left: calc(var(--spacing) * 7); }
.ml-8    { margin-left: calc(var(--spacing) * 8); }
.ml-9    { margin-left: calc(var(--spacing) * 9); }
.ml-10   { margin-left: calc(var(--spacing) * 10); }
.ml-11   { margin-left: calc(var(--spacing) * 11); }
.ml-12   { margin-left: calc(var(--spacing) * 12); }
.ml-14   { margin-left: calc(var(--spacing) * 14); }
.ml-16   { margin-left: calc(var(--spacing) * 16); }
.ml-20   { margin-left: calc(var(--spacing) * 20); }
.ml-24   { margin-left: calc(var(--spacing) * 24); }
.ml-auto { margin-left: auto; }

/* Negative margin  (scale 1–12) */
.-m-1  { margin: calc(var(--spacing) * -1); }   .-m-2  { margin: calc(var(--spacing) * -2); }
.-m-3  { margin: calc(var(--spacing) * -3); }   .-m-4  { margin: calc(var(--spacing) * -4); }
.-m-5  { margin: calc(var(--spacing) * -5); }   .-m-6  { margin: calc(var(--spacing) * -6); }
.-m-7  { margin: calc(var(--spacing) * -7); }   .-m-8  { margin: calc(var(--spacing) * -8); }
.-m-9  { margin: calc(var(--spacing) * -9); }   .-m-10 { margin: calc(var(--spacing) * -10); }
.-m-11 { margin: calc(var(--spacing) * -11); }  .-m-12 { margin: calc(var(--spacing) * -12); }

.-mx-1  { margin-left: calc(var(--spacing) * -1);  margin-right: calc(var(--spacing) * -1); }
.-mx-2  { margin-left: calc(var(--spacing) * -2);  margin-right: calc(var(--spacing) * -2); }
.-mx-3  { margin-left: calc(var(--spacing) * -3);  margin-right: calc(var(--spacing) * -3); }
.-mx-4  { margin-left: calc(var(--spacing) * -4);  margin-right: calc(var(--spacing) * -4); }
.-mx-5  { margin-left: calc(var(--spacing) * -5);  margin-right: calc(var(--spacing) * -5); }
.-mx-6  { margin-left: calc(var(--spacing) * -6);  margin-right: calc(var(--spacing) * -6); }
.-mx-7  { margin-left: calc(var(--spacing) * -7);  margin-right: calc(var(--spacing) * -7); }
.-mx-8  { margin-left: calc(var(--spacing) * -8);  margin-right: calc(var(--spacing) * -8); }
.-mx-9  { margin-left: calc(var(--spacing) * -9);  margin-right: calc(var(--spacing) * -9); }
.-mx-10 { margin-left: calc(var(--spacing) * -10); margin-right: calc(var(--spacing) * -10); }
.-mx-11 { margin-left: calc(var(--spacing) * -11); margin-right: calc(var(--spacing) * -11); }
.-mx-12 { margin-left: calc(var(--spacing) * -12); margin-right: calc(var(--spacing) * -12); }

.-my-1  { margin-top: calc(var(--spacing) * -1);  margin-bottom: calc(var(--spacing) * -1); }
.-my-2  { margin-top: calc(var(--spacing) * -2);  margin-bottom: calc(var(--spacing) * -2); }
.-my-3  { margin-top: calc(var(--spacing) * -3);  margin-bottom: calc(var(--spacing) * -3); }
.-my-4  { margin-top: calc(var(--spacing) * -4);  margin-bottom: calc(var(--spacing) * -4); }
.-my-5  { margin-top: calc(var(--spacing) * -5);  margin-bottom: calc(var(--spacing) * -5); }
.-my-6  { margin-top: calc(var(--spacing) * -6);  margin-bottom: calc(var(--spacing) * -6); }
.-my-7  { margin-top: calc(var(--spacing) * -7);  margin-bottom: calc(var(--spacing) * -7); }
.-my-8  { margin-top: calc(var(--spacing) * -8);  margin-bottom: calc(var(--spacing) * -8); }
.-my-9  { margin-top: calc(var(--spacing) * -9);  margin-bottom: calc(var(--spacing) * -9); }
.-my-10 { margin-top: calc(var(--spacing) * -10); margin-bottom: calc(var(--spacing) * -10); }
.-my-11 { margin-top: calc(var(--spacing) * -11); margin-bottom: calc(var(--spacing) * -11); }
.-my-12 { margin-top: calc(var(--spacing) * -12); margin-bottom: calc(var(--spacing) * -12); }

.-mt-1  { margin-top: calc(var(--spacing) * -1); }   .-mt-2  { margin-top: calc(var(--spacing) * -2); }
.-mt-3  { margin-top: calc(var(--spacing) * -3); }   .-mt-4  { margin-top: calc(var(--spacing) * -4); }
.-mt-5  { margin-top: calc(var(--spacing) * -5); }   .-mt-6  { margin-top: calc(var(--spacing) * -6); }
.-mt-7  { margin-top: calc(var(--spacing) * -7); }   .-mt-8  { margin-top: calc(var(--spacing) * -8); }
.-mt-9  { margin-top: calc(var(--spacing) * -9); }   .-mt-10 { margin-top: calc(var(--spacing) * -10); }
.-mt-11 { margin-top: calc(var(--spacing) * -11); }  .-mt-12 { margin-top: calc(var(--spacing) * -12); }

.-mr-1  { margin-right: calc(var(--spacing) * -1); }  .-mr-2  { margin-right: calc(var(--spacing) * -2); }
.-mr-3  { margin-right: calc(var(--spacing) * -3); }  .-mr-4  { margin-right: calc(var(--spacing) * -4); }
.-mr-5  { margin-right: calc(var(--spacing) * -5); }  .-mr-6  { margin-right: calc(var(--spacing) * -6); }
.-mr-7  { margin-right: calc(var(--spacing) * -7); }  .-mr-8  { margin-right: calc(var(--spacing) * -8); }
.-mr-9  { margin-right: calc(var(--spacing) * -9); }  .-mr-10 { margin-right: calc(var(--spacing) * -10); }
.-mr-11 { margin-right: calc(var(--spacing) * -11); } .-mr-12 { margin-right: calc(var(--spacing) * -12); }

.-mb-1  { margin-bottom: calc(var(--spacing) * -1); }  .-mb-2  { margin-bottom: calc(var(--spacing) * -2); }
.-mb-3  { margin-bottom: calc(var(--spacing) * -3); }  .-mb-4  { margin-bottom: calc(var(--spacing) * -4); }
.-mb-5  { margin-bottom: calc(var(--spacing) * -5); }  .-mb-6  { margin-bottom: calc(var(--spacing) * -6); }
.-mb-7  { margin-bottom: calc(var(--spacing) * -7); }  .-mb-8  { margin-bottom: calc(var(--spacing) * -8); }
.-mb-9  { margin-bottom: calc(var(--spacing) * -9); }  .-mb-10 { margin-bottom: calc(var(--spacing) * -10); }
.-mb-11 { margin-bottom: calc(var(--spacing) * -11); } .-mb-12 { margin-bottom: calc(var(--spacing) * -12); }

.-ml-1  { margin-left: calc(var(--spacing) * -1); }  .-ml-2  { margin-left: calc(var(--spacing) * -2); }
.-ml-3  { margin-left: calc(var(--spacing) * -3); }  .-ml-4  { margin-left: calc(var(--spacing) * -4); }
.-ml-5  { margin-left: calc(var(--spacing) * -5); }  .-ml-6  { margin-left: calc(var(--spacing) * -6); }
.-ml-7  { margin-left: calc(var(--spacing) * -7); }  .-ml-8  { margin-left: calc(var(--spacing) * -8); }
.-ml-9  { margin-left: calc(var(--spacing) * -9); }  .-ml-10 { margin-left: calc(var(--spacing) * -10); }
.-ml-11 { margin-left: calc(var(--spacing) * -11); } .-ml-12 { margin-left: calc(var(--spacing) * -12); }

/* ─── Padding ────────────────────────────────────────────────────────────── */

/* All sides */
.p-0  { padding: 0; }
.p-1  { padding: calc(var(--spacing) * 1); }
.p-2  { padding: calc(var(--spacing) * 2); }
.p-3  { padding: calc(var(--spacing) * 3); }
.p-4  { padding: calc(var(--spacing) * 4); }
.p-5  { padding: calc(var(--spacing) * 5); }
.p-6  { padding: calc(var(--spacing) * 6); }
.p-7  { padding: calc(var(--spacing) * 7); }
.p-8  { padding: calc(var(--spacing) * 8); }
.p-9  { padding: calc(var(--spacing) * 9); }
.p-10 { padding: calc(var(--spacing) * 10); }
.p-11 { padding: calc(var(--spacing) * 11); }
.p-12 { padding: calc(var(--spacing) * 12); }
.p-14 { padding: calc(var(--spacing) * 14); }
.p-16 { padding: calc(var(--spacing) * 16); }
.p-20 { padding: calc(var(--spacing) * 20); }
.p-24 { padding: calc(var(--spacing) * 24); }

/* Horizontal axis */
.px-0  { padding-left: 0; padding-right: 0; }
.px-1  { padding-left: calc(var(--spacing) * 1);  padding-right: calc(var(--spacing) * 1); }
.px-2  { padding-left: calc(var(--spacing) * 2);  padding-right: calc(var(--spacing) * 2); }
.px-3  { padding-left: calc(var(--spacing) * 3);  padding-right: calc(var(--spacing) * 3); }
.px-4  { padding-left: calc(var(--spacing) * 4);  padding-right: calc(var(--spacing) * 4); }
.px-5  { padding-left: calc(var(--spacing) * 5);  padding-right: calc(var(--spacing) * 5); }
.px-6  { padding-left: calc(var(--spacing) * 6);  padding-right: calc(var(--spacing) * 6); }
.px-7  { padding-left: calc(var(--spacing) * 7);  padding-right: calc(var(--spacing) * 7); }
.px-8  { padding-left: calc(var(--spacing) * 8);  padding-right: calc(var(--spacing) * 8); }
.px-9  { padding-left: calc(var(--spacing) * 9);  padding-right: calc(var(--spacing) * 9); }
.px-10 { padding-left: calc(var(--spacing) * 10); padding-right: calc(var(--spacing) * 10); }
.px-11 { padding-left: calc(var(--spacing) * 11); padding-right: calc(var(--spacing) * 11); }
.px-12 { padding-left: calc(var(--spacing) * 12); padding-right: calc(var(--spacing) * 12); }
.px-14 { padding-left: calc(var(--spacing) * 14); padding-right: calc(var(--spacing) * 14); }
.px-16 { padding-left: calc(var(--spacing) * 16); padding-right: calc(var(--spacing) * 16); }
.px-20 { padding-left: calc(var(--spacing) * 20); padding-right: calc(var(--spacing) * 20); }
.px-24 { padding-left: calc(var(--spacing) * 24); padding-right: calc(var(--spacing) * 24); }

/* Vertical axis */
.py-0  { padding-top: 0; padding-bottom: 0; }
.py-1  { padding-top: calc(var(--spacing) * 1);  padding-bottom: calc(var(--spacing) * 1); }
.py-2  { padding-top: calc(var(--spacing) * 2);  padding-bottom: calc(var(--spacing) * 2); }
.py-3  { padding-top: calc(var(--spacing) * 3);  padding-bottom: calc(var(--spacing) * 3); }
.py-4  { padding-top: calc(var(--spacing) * 4);  padding-bottom: calc(var(--spacing) * 4); }
.py-5  { padding-top: calc(var(--spacing) * 5);  padding-bottom: calc(var(--spacing) * 5); }
.py-6  { padding-top: calc(var(--spacing) * 6);  padding-bottom: calc(var(--spacing) * 6); }
.py-7  { padding-top: calc(var(--spacing) * 7);  padding-bottom: calc(var(--spacing) * 7); }
.py-8  { padding-top: calc(var(--spacing) * 8);  padding-bottom: calc(var(--spacing) * 8); }
.py-9  { padding-top: calc(var(--spacing) * 9);  padding-bottom: calc(var(--spacing) * 9); }
.py-10 { padding-top: calc(var(--spacing) * 10); padding-bottom: calc(var(--spacing) * 10); }
.py-11 { padding-top: calc(var(--spacing) * 11); padding-bottom: calc(var(--spacing) * 11); }
.py-12 { padding-top: calc(var(--spacing) * 12); padding-bottom: calc(var(--spacing) * 12); }
.py-14 { padding-top: calc(var(--spacing) * 14); padding-bottom: calc(var(--spacing) * 14); }
.py-16 { padding-top: calc(var(--spacing) * 16); padding-bottom: calc(var(--spacing) * 16); }
.py-20 { padding-top: calc(var(--spacing) * 20); padding-bottom: calc(var(--spacing) * 20); }
.py-24 { padding-top: calc(var(--spacing) * 24); padding-bottom: calc(var(--spacing) * 24); }

/* Top */
.pt-0  { padding-top: 0; }
.pt-1  { padding-top: calc(var(--spacing) * 1); }
.pt-2  { padding-top: calc(var(--spacing) * 2); }
.pt-3  { padding-top: calc(var(--spacing) * 3); }
.pt-4  { padding-top: calc(var(--spacing) * 4); }
.pt-5  { padding-top: calc(var(--spacing) * 5); }
.pt-6  { padding-top: calc(var(--spacing) * 6); }
.pt-7  { padding-top: calc(var(--spacing) * 7); }
.pt-8  { padding-top: calc(var(--spacing) * 8); }
.pt-9  { padding-top: calc(var(--spacing) * 9); }
.pt-10 { padding-top: calc(var(--spacing) * 10); }
.pt-11 { padding-top: calc(var(--spacing) * 11); }
.pt-12 { padding-top: calc(var(--spacing) * 12); }
.pt-14 { padding-top: calc(var(--spacing) * 14); }
.pt-16 { padding-top: calc(var(--spacing) * 16); }
.pt-20 { padding-top: calc(var(--spacing) * 20); }
.pt-24 { padding-top: calc(var(--spacing) * 24); }

/* Right */
.pr-0  { padding-right: 0; }
.pr-1  { padding-right: calc(var(--spacing) * 1); }
.pr-2  { padding-right: calc(var(--spacing) * 2); }
.pr-3  { padding-right: calc(var(--spacing) * 3); }
.pr-4  { padding-right: calc(var(--spacing) * 4); }
.pr-5  { padding-right: calc(var(--spacing) * 5); }
.pr-6  { padding-right: calc(var(--spacing) * 6); }
.pr-7  { padding-right: calc(var(--spacing) * 7); }
.pr-8  { padding-right: calc(var(--spacing) * 8); }
.pr-9  { padding-right: calc(var(--spacing) * 9); }
.pr-10 { padding-right: calc(var(--spacing) * 10); }
.pr-11 { padding-right: calc(var(--spacing) * 11); }
.pr-12 { padding-right: calc(var(--spacing) * 12); }
.pr-14 { padding-right: calc(var(--spacing) * 14); }
.pr-16 { padding-right: calc(var(--spacing) * 16); }
.pr-20 { padding-right: calc(var(--spacing) * 20); }
.pr-24 { padding-right: calc(var(--spacing) * 24); }

/* Bottom */
.pb-0  { padding-bottom: 0; }
.pb-1  { padding-bottom: calc(var(--spacing) * 1); }
.pb-2  { padding-bottom: calc(var(--spacing) * 2); }
.pb-3  { padding-bottom: calc(var(--spacing) * 3); }
.pb-4  { padding-bottom: calc(var(--spacing) * 4); }
.pb-5  { padding-bottom: calc(var(--spacing) * 5); }
.pb-6  { padding-bottom: calc(var(--spacing) * 6); }
.pb-7  { padding-bottom: calc(var(--spacing) * 7); }
.pb-8  { padding-bottom: calc(var(--spacing) * 8); }
.pb-9  { padding-bottom: calc(var(--spacing) * 9); }
.pb-10 { padding-bottom: calc(var(--spacing) * 10); }
.pb-11 { padding-bottom: calc(var(--spacing) * 11); }
.pb-12 { padding-bottom: calc(var(--spacing) * 12); }
.pb-14 { padding-bottom: calc(var(--spacing) * 14); }
.pb-16 { padding-bottom: calc(var(--spacing) * 16); }
.pb-20 { padding-bottom: calc(var(--spacing) * 20); }
.pb-24 { padding-bottom: calc(var(--spacing) * 24); }

/* Left */
.pl-0  { padding-left: 0; }
.pl-1  { padding-left: calc(var(--spacing) * 1); }
.pl-2  { padding-left: calc(var(--spacing) * 2); }
.pl-3  { padding-left: calc(var(--spacing) * 3); }
.pl-4  { padding-left: calc(var(--spacing) * 4); }
.pl-5  { padding-left: calc(var(--spacing) * 5); }
.pl-6  { padding-left: calc(var(--spacing) * 6); }
.pl-7  { padding-left: calc(var(--spacing) * 7); }
.pl-8  { padding-left: calc(var(--spacing) * 8); }
.pl-9  { padding-left: calc(var(--spacing) * 9); }
.pl-10 { padding-left: calc(var(--spacing) * 10); }
.pl-11 { padding-left: calc(var(--spacing) * 11); }
.pl-12 { padding-left: calc(var(--spacing) * 12); }
.pl-14 { padding-left: calc(var(--spacing) * 14); }
.pl-16 { padding-left: calc(var(--spacing) * 16); }
.pl-20 { padding-left: calc(var(--spacing) * 20); }
.pl-24 { padding-left: calc(var(--spacing) * 24); }

/* ─── Width ──────────────────────────────────────────────────────────────── */
.w-0      { width: 0; }
.w-1      { width: calc(var(--spacing) * 1); }
.w-2      { width: calc(var(--spacing) * 2); }
.w-3      { width: calc(var(--spacing) * 3); }
.w-4      { width: calc(var(--spacing) * 4); }
.w-5      { width: calc(var(--spacing) * 5); }
.w-6      { width: calc(var(--spacing) * 6); }
.w-7      { width: calc(var(--spacing) * 7); }
.w-8      { width: calc(var(--spacing) * 8); }
.w-9      { width: calc(var(--spacing) * 9); }
.w-10     { width: calc(var(--spacing) * 10); }
.w-11     { width: calc(var(--spacing) * 11); }
.w-12     { width: calc(var(--spacing) * 12); }
.w-14     { width: calc(var(--spacing) * 14); }
.w-16     { width: calc(var(--spacing) * 16); }
.w-20     { width: calc(var(--spacing) * 20); }
.w-24     { width: calc(var(--spacing) * 24); }
.w-32     { width: calc(var(--spacing) * 32); }
.w-40     { width: calc(var(--spacing) * 40); }
.w-48     { width: calc(var(--spacing) * 48); }
.w-64     { width: calc(var(--spacing) * 64); }
.w-auto   { width: auto; }
.w-full   { width: 100%; }
.w-screen { width: 100vw; }
.w-fit    { width: fit-content; }
.w-min    { width: min-content; }
.w-max    { width: max-content; }
.w-1\/2   { width: 50%; }
.w-1\/3   { width: 33.333333%; }
.w-2\/3   { width: 66.666667%; }
.w-1\/4   { width: 25%; }
.w-3\/4   { width: 75%; }

/* ─── Height ─────────────────────────────────────────────────────────────── */
.h-0      { height: 0; }
.h-1      { height: calc(var(--spacing) * 1); }
.h-2      { height: calc(var(--spacing) * 2); }
.h-3      { height: calc(var(--spacing) * 3); }
.h-4      { height: calc(var(--spacing) * 4); }
.h-5      { height: calc(var(--spacing) * 5); }
.h-6      { height: calc(var(--spacing) * 6); }
.h-7      { height: calc(var(--spacing) * 7); }
.h-8      { height: calc(var(--spacing) * 8); }
.h-9      { height: calc(var(--spacing) * 9); }
.h-10     { height: calc(var(--spacing) * 10); }
.h-11     { height: calc(var(--spacing) * 11); }
.h-12     { height: calc(var(--spacing) * 12); }
.h-14     { height: calc(var(--spacing) * 14); }
.h-16     { height: calc(var(--spacing) * 16); }
.h-20     { height: calc(var(--spacing) * 20); }
.h-24     { height: calc(var(--spacing) * 24); }
.h-32     { height: calc(var(--spacing) * 32); }
.h-40     { height: calc(var(--spacing) * 40); }
.h-48     { height: calc(var(--spacing) * 48); }
.h-64     { height: calc(var(--spacing) * 64); }
.h-auto   { height: auto; }
.h-full   { height: 100%; }
.h-screen { height: 100vh; }
.h-fit    { height: fit-content; }
.h-min    { height: min-content; }
.h-max    { height: max-content; }

/* ─── Radius ─────────────────────────────────────────────────────────────── */

.rounded-input { border-radius: var(--corner-md-large); }
.rounded-pill { border-radius: 50%; }
.rounded-full { border-radius: var(--radius-pill); }
.rounded-none { border-radius: 0 }

/*#endregion*/