/* ==========================================================================
   TradeInfra — login and registration
   Split screen: a brand panel that carries the positioning, and a form panel
   that does the work. Everything degrades to a plain stacked form without JS.
   ========================================================================== */

.ti-auth{
	display:grid;
	grid-template-columns:1fr;
	min-height:min(100vh,900px);
	margin:0 auto;
	background:#fff;
	border:1px solid var(--ti-gray-200);
	border-radius:18px;
	overflow:hidden;
	box-shadow:0 18px 44px rgba(10,42,74,.12),0 6px 14px rgba(10,42,74,.06);
}
@media (min-width:940px){
	.ti-auth{grid-template-columns:minmax(320px,.85fr) 1.15fr}
}

/* ----------------------------------------------------------- Brand side -- */

/* Matches the public site: navy plane, faint grid, the same mark and strapline
   as the header, and the same drawn artwork as the page that sent the visitor
   here. Previously a stock photograph behind a heavy scrim, which read as a
   different product from the site it belongs to. */

.ti-auth__brand{
	position:relative;
	display:flex;flex-direction:column;justify-content:space-between;
	padding:clamp(1.75rem,3.5vw,2.75rem);
	color:rgba(255,255,255,.82);
	isolation:isolate;
	overflow:hidden;
	background:linear-gradient(155deg,var(--ti-navy-700,#113A63) 0%,var(--ti-navy-900,#04182E) 58%,var(--ti-navy-800,#0A2A4A) 100%);
}
.ti-auth__grid{
	position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
	opacity:.55;
	background-image:
		linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
		linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
	background-size:44px 44px;
	-webkit-mask-image:radial-gradient(75% 65% at 40% 30%,#000,transparent);
	mask-image:radial-gradient(75% 65% at 40% 30%,#000,transparent);
}
.ti-auth__grid i{display:block;height:100%}

.ti-auth__logo{display:inline-flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none}
.ti-auth__logo:hover,.ti-auth__logo:focus-visible{color:#fff}
.ti-auth__logo svg{width:40px;height:40px;flex:0 0 40px}
.ti-auth__logo .custom-logo{max-height:40px;width:auto}
.ti-auth__logo-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ti-auth__logo-name{font-size:1.35rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.ti-auth__logo-name span{color:var(--ti-gold-400)}
.ti-auth__logo-tag{
	font-size:.64rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
	color:rgba(255,255,255,.46);line-height:1;
}

.ti-auth__pitch{margin:clamp(1.75rem,4vw,3rem) 0}
.ti-auth__eyebrow{
	margin:0 0 .75rem;color:var(--ti-gold-400);
	font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.ti-auth__headline{
	margin:0 0 .85rem;color:#fff;
	font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;line-height:1.2;letter-spacing:-.025em;
}
.ti-auth__sub{margin:0;font-size:.95rem;line-height:1.65;color:rgba(255,255,255,.72)}

.ti-auth__points{list-style:none;margin:1.5rem 0 0;padding:0}
.ti-auth__points li{display:flex;gap:.65rem;align-items:flex-start;margin-bottom:.85rem;font-size:.88rem;line-height:1.5}
.ti-auth__points svg{flex:0 0 18px;margin-top:2px;color:var(--ti-gold-400)}

/* The artwork already carries its own navy panel, so it is set back into the
   plane with a soft edge rather than framed on top of it. */
.ti-auth__art{margin-top:clamp(1.5rem,3vw,2.25rem);opacity:.94}
.ti-auth__art .ti-art{
	display:block;width:100%;height:auto;
	border-radius:16px;
	box-shadow:0 20px 44px rgba(0,0,0,.32);
}

.ti-auth__foot{font-size:.78rem;color:rgba(255,255,255,.5)}
.ti-auth__foot a{color:rgba(255,255,255,.72)}
.ti-auth__foot a:hover{color:var(--ti-gold-400)}

@media (max-width:939px){
	.ti-auth__brand{min-height:0}
	.ti-auth__points,.ti-auth__art{display:none}
	.ti-auth__pitch{margin:1.25rem 0 0}
}
/* Tall enough for the artwork to be worth showing, but not so tall that the
   form is pushed off a laptop screen. */
@media (min-width:940px) and (max-height:760px){
	.ti-auth__art{display:none}
}

/* ------------------------------------------------------------ Form side -- */

.ti-auth__form{
	display:flex;flex-direction:column;justify-content:center;
	padding:clamp(1.75rem,4vw,3rem);
}
.ti-auth__inner{width:100%;max-width:34rem;margin-inline:auto}
.ti-auth__title{margin:0 0 .4rem;font-size:clamp(1.4rem,2.4vw,1.85rem);color:var(--ti-navy-800);letter-spacing:-.02em}
.ti-auth__lede{margin:0 0 1.75rem;color:var(--ti-slate);font-size:.95rem;line-height:1.6}

.ti-auth__switch{margin:1.5rem 0 0;text-align:center;color:var(--ti-slate);font-size:.88rem}

/* --------------------------------------------------------------- Steps -- */

.ti-steps-bar{display:flex;gap:.5rem;margin:0 0 1.75rem;padding:0;list-style:none;counter-reset:tistep}
.ti-steps-bar li{
	flex:1 1 0;display:flex;flex-direction:column;gap:.4rem;
	color:var(--ti-mute);font-size:.72rem;font-weight:600;letter-spacing:.02em;
}
.ti-steps-bar li::before{content:"";height:4px;border-radius:99px;background:var(--ti-gray-200)}
.ti-steps-bar li.is-active{color:var(--ti-navy-800)}
.ti-steps-bar li.is-active::before{background:var(--ti-gold-500)}
.ti-steps-bar li.is-done{color:var(--ti-slate)}
.ti-steps-bar li.is-done::before{background:var(--ti-navy-600)}

.ti-step[hidden]{display:none}
.ti-step__legend{
	margin:0 0 1.15rem;color:var(--ti-gold-600);
	font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.ti-step__nav{display:flex;gap:.75rem;align-items:center;margin-top:1.5rem}
.ti-step__nav .ti-btn{flex:1 1 auto}
.ti-step__nav .ti-btn--quiet{flex:0 0 auto}

/* ---------------------------------------------------------- Validation -- */

.ti-field.has-error .ti-input{border-color:#B4232A;box-shadow:0 0 0 3px rgba(180,35,42,.12)}
.ti-field.is-valid .ti-input{border-color:#1B7C46}
.ti-field__error{
	display:none;margin:.35rem 0 0;color:#B4232A;font-size:.78rem;line-height:1.45;
}
.ti-field.has-error .ti-field__error{display:block}

/* Password strength */
.ti-pwmeter{margin-top:.5rem}
.ti-pwmeter__track{display:flex;gap:4px}
.ti-pwmeter__track span{flex:1 1 0;height:4px;border-radius:99px;background:var(--ti-gray-200);transition:background .2s ease}
.ti-pwmeter__label{display:block;margin-top:.3rem;color:var(--ti-mute);font-size:.75rem}
.ti-pwmeter[data-score="1"] .ti-pwmeter__track span:nth-child(-n+1){background:#D14343}
.ti-pwmeter[data-score="2"] .ti-pwmeter__track span:nth-child(-n+2){background:#E08A2E}
.ti-pwmeter[data-score="3"] .ti-pwmeter__track span:nth-child(-n+3){background:#C8942A}
.ti-pwmeter[data-score="4"] .ti-pwmeter__track span{background:#1B7C46}

/* Busy state on submit */
.ti-btn.is-busy{position:relative;color:transparent!important;pointer-events:none}
.ti-btn.is-busy::after{
	content:"";position:absolute;inset:0;margin:auto;
	width:18px;height:18px;border-radius:50%;
	border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
	animation:ti-spin .6s linear infinite;
}
.ti-btn--accent.is-busy::after{border-color:rgba(4,24,46,.3);border-top-color:var(--ti-navy-900)}
@keyframes ti-spin{to{transform:rotate(360deg)}}

/* File input, styled as a drop target */
.ti-filefield{
	display:flex;gap:.85rem;align-items:center;
	padding:.9rem 1rem;
	background:var(--ti-gray-100);
	border:1.5px dashed var(--ti-gray-300);border-radius:10px;
	cursor:pointer;transition:border-color .16s ease,background .16s ease;
}
.ti-filefield:hover{border-color:var(--ti-navy-600);background:var(--ti-blue-100)}
.ti-filefield input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.ti-filefield__icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:40px;height:40px;flex:0 0 40px;
	background:#fff;color:var(--ti-navy-700);border-radius:9px;
}
.ti-filefield__text{min-width:0}
.ti-filefield__text strong{display:block;color:var(--ti-navy-800);font-size:.88rem;overflow-wrap:anywhere}
.ti-filefield__text span{color:var(--ti-mute);font-size:.76rem}

/* Review list on the final step */
.ti-review{
	margin:0 0 1.25rem;padding:1rem 1.15rem;
	background:var(--ti-gray-100);border-radius:10px;
	list-style:none;
}
.ti-review li{display:flex;gap:.75rem;justify-content:space-between;padding:.35rem 0;font-size:.85rem}
.ti-review li+li{border-top:1px solid var(--ti-gray-200)}
.ti-review dt,.ti-review__k{color:var(--ti-mute)}
.ti-review__v{color:var(--ti-navy-800);font-weight:600;text-align:right;overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
	.ti-btn.is-busy::after{animation:none}
}

/* ---------------------------------------- Registration acceptance block -- */

/* Terms & Conditions section 33: one checkbox, four confirmations, with both
   documents reachable without leaving the wizard. */

.ti-accept{
	margin:1.5rem 0 0;padding:1.15rem 1.25rem;
	background:var(--ti-gray-100, #F4F6F9);
	border:1px solid var(--ti-gray-300, #D3DAE5);
	border-radius:12px;
}

.ti-accept__docs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.ti-accept__doc{
	display:inline-flex;align-items:center;gap:.45rem;
	padding:.5rem .85rem;
	background:#fff;
	border:1px solid var(--ti-gray-300, #D3DAE5);
	border-radius:999px;
	color:var(--ti-navy-700, #113A63);
	font-size:.8rem;font-weight:700;text-decoration:none;
	transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.ti-accept__doc:hover,.ti-accept__doc:focus-visible{
	border-color:var(--ti-gold-400, #E0AC46);
	background:var(--ti-gold-100, #FBF3E2);
	color:var(--ti-navy-800, #0A2A4A);
}
.ti-accept__doc svg{flex:0 0 18px;color:var(--ti-gold-600, #A8791D)}

.ti-check--accept{align-items:flex-start}
.ti-accept__lead{
	display:block;margin-bottom:.5rem;
	color:var(--ti-navy-800, #0A2A4A);font-size:.87rem;font-weight:700;line-height:1.45;
}
.ti-accept__points{
	margin:0;padding-left:1.15rem;
	color:var(--ti-slate, #55637A);
}
.ti-accept__points li{margin-bottom:.4rem;font-size:.82rem;line-height:1.6}
.ti-accept__points li:last-child{margin-bottom:0}

.ti-accept__notice{
	margin:1rem 0 0;padding-top:.9rem;
	border-top:1px solid var(--ti-gray-300, #D3DAE5);
	color:var(--ti-mute, #7A8699);
	font-size:.74rem;line-height:1.6;
}

/* ------------------------------------------------- Sector checkboxes ---- */

/* Ten options shown at once rather than hidden behind a dropdown: members can
   register in several sectors, and a picker that only reveals one choice at a
   time hides the fact that more than one is allowed. */
.ti-sectors{border:0;margin:0 0 1.15rem;padding:0}
.ti-sectors legend{padding:0;margin-bottom:.55rem}
.ti-sectors__grid{
	display:grid;gap:.4rem;
	grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.ti-sectors__item{
	display:flex;align-items:flex-start;gap:.6rem;
	margin:0;padding:.6rem .75rem;
	background:var(--ti-white,#fff);
	border:1px solid var(--ti-gray-300,#D3DAE5);border-radius:8px;
	font-size:.9rem;line-height:1.35;cursor:pointer;
	transition:border-color .15s ease,background .15s ease;
}
.ti-sectors__item:hover{border-color:var(--ti-blue-400,#4E90D0)}
.ti-sectors__item input{margin:.15rem 0 0;flex:0 0 auto;accent-color:var(--ti-navy-700,#113A63)}
.ti-sectors__item:has(input:checked){
	background:var(--ti-blue-100,#E8F0FA);
	border-color:var(--ti-navy-600,#1A4E80);
}
.ti-sectors.has-error .ti-sectors__item{border-color:#C0392B}

/* Explains why there is no password field on the last step. */
.ti-note--info{
	margin:0 0 1.15rem;padding:.85rem 1rem;
	background:var(--ti-blue-100,#E8F0FA);
	border-left:3px solid var(--ti-navy-600,#1A4E80);border-radius:6px;
	color:var(--ti-navy-800,#0A2A4A);font-size:.9rem;line-height:1.5;
}

/* ------------------------------------------------------ Reveal password -- */

.ti-pw{position:relative;display:block}
.ti-pw .ti-input{padding-right:2.9rem;width:100%}

.ti-pw__toggle{
	position:absolute;top:50%;right:.5rem;transform:translateY(-50%);
	display:inline-flex;align-items:center;justify-content:center;
	width:2rem;height:2rem;padding:0;
	background:none;border:0;border-radius:6px;cursor:pointer;
	color:#7A8699;
}
.ti-pw__toggle:hover,.ti-pw__toggle:focus-visible{color:#113A63;background:#F4F6F9}

/* The eye is drawn in CSS rather than shipped as an icon, so the button has no
   text to translate and no image to load. Pressed state = password visible,
   shown by striking the eye through. */
.ti-pw__toggle::before{
	content:"";
	width:19px;height:19px;
	background:currentColor;
	-webkit-mask:var(--ti-eye) center/contain no-repeat;
	mask:var(--ti-eye) center/contain no-repeat;
}
.ti-pw__toggle{
	--ti-eye:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
}
.ti-pw__toggle[aria-pressed="true"]{
	color:#113A63;
	--ti-eye:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='m4 20 16-16'/%3E%3C/svg%3E");
}