/* ============================================================================================
   AndyStrategy — the registration page ("Your organisation").

   The sign-in page's shell with a wider form and the parts only this page has: the three-step
   progress rail, the five organisation shapes as choosable cards, the custom-structure row, and the
   structure preview. The shell, the type, the fields and the button come from andy-auth.css, which
   this page loads first — this sheet only adds what is new, so the two pages cannot drift apart in
   the parts they share.

   Measurements are the design's (Downloads/2254b615…png, 1536x1024), read out with
   .dsh/probe-line.php rather than estimated. Icon colours come from the icon pack, which is a CSS
   mask: a mask uses the alpha channel only, so the pack's own #2563EB never reaches the page and
   every icon takes the colour of the text around it. That also means the palette decision recorded
   in ASSETS.md §2 stays in one place — the token — instead of being baked into fourteen files.
   ============================================================================================ */

/* --- the icon pack, as masks ------------------------------------------------------------- */
.as-icon{
	display:inline-block;width:24px;height:24px;flex:0 0 auto;
	background:currentColor;
	-webkit-mask-size:contain;mask-size:contain;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:center;mask-position:center;
}
.as-icon--people{-webkit-mask-image:url("../img/register/people.svg");mask-image:url("../img/register/people.svg")}
.as-icon--layers{-webkit-mask-image:url("../img/register/layers.svg");mask-image:url("../img/register/layers.svg")}
.as-icon--lightning{-webkit-mask-image:url("../img/register/lightning.svg");mask-image:url("../img/register/lightning.svg")}
.as-icon--lock{-webkit-mask-image:url("../img/register/lock.svg");mask-image:url("../img/register/lock.svg")}
.as-icon--individual{-webkit-mask-image:url("../img/register/individual.svg");mask-image:url("../img/register/individual.svg")}
.as-icon--unit{-webkit-mask-image:url("../img/register/unit.svg");mask-image:url("../img/register/unit.svg")}
.as-icon--department{-webkit-mask-image:url("../img/register/department.svg");mask-image:url("../img/register/department.svg")}
.as-icon--division{-webkit-mask-image:url("../img/register/division.svg");mask-image:url("../img/register/division.svg")}
.as-icon--corporate{-webkit-mask-image:url("../img/register/corporate.svg");mask-image:url("../img/register/corporate.svg")}
.as-icon--custom{-webkit-mask-image:url("../img/register/custom-structure.svg");mask-image:url("../img/register/custom-structure.svg")}
.as-icon--check{-webkit-mask-image:url("../img/register/check-circle.svg");mask-image:url("../img/register/check-circle.svg")}
.as-icon--chevron{-webkit-mask-image:url("../img/register/chevron-right.svg");mask-image:url("../img/register/chevron-right.svg")}

/* --- the shell, over the sign-in page's -------------------------------------------------- */
/* The form panel is a COLUMN here, and that is the whole reason this rule exists: the sign-in page
   has one child, so `.auth__main`'s row centred it and looked right; this page has two (the sign-in
   line and the form) and a row put them side by side, with the step rail running off to the left of
   the form column. */
.reg__main{flex-direction:column;align-items:center}
.reg__top{display:flex;width:100%;max-width:660px;justify-content:flex-end;align-items:center;gap:7px;margin:0 0 20px;color:#7b899d;font-size:13.5px}
.reg__top a{color:var(--blue);font-weight:700}
.reg__top a:hover{color:var(--blue-dark)}

/* The design's photograph panel carries the lockup with its tagline, no eyebrow, and a motto of its
   own; the form side is a wider column because it holds two fields per row in places. */
.reg__tagline{margin:12px 0 0;color:#9dc0ea;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.reg__mottoRule{width:34px;height:2px;margin:0 0 16px;background:#2a7fe0;border:0}
.reg__motto{margin:0;color:#7fa8cd;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.7}
.reg__aside-foot{margin-top:auto;padding-top:34px}

.reg__stack{max-width:660px;margin-top:0}

/* --- the three-step rail ----------------------------------------------------------------- */
/* The route is one page, and the rail says so honestly: step one is the account, step two the
   organisation, and step three is where the application takes over once it is created. */
.steps{display:flex;align-items:flex-start;margin:0 0 30px;padding:0;list-style:none}
.steps li{position:relative;flex:1 1 0;text-align:center}
.steps li+li::before{
	content:"";position:absolute;top:15px;right:50%;left:-50%;height:1px;background:#dfe6f0;z-index:0;
}
.steps__dot{
	position:relative;z-index:1;display:inline-grid;place-items:center;
	width:32px;height:32px;border-radius:50%;background:#fff;
	border:1.5px solid #cdd8e6;color:#8a9ab0;font-size:13.5px;font-weight:700;
}
.steps__label{display:block;margin-top:9px;color:#8a9ab0;font-size:12.5px;font-weight:600}
/* The number is what the step being worked on shows; the tick is what a step already passed shows.
   Both marks are in the markup and CSS decides which is visible, so the rail is correct without a
   script — the wizard only moves the classes. */
.steps__dot .as-icon{display:none;width:15px;height:15px}
.steps li.is-done:not(.is-active) .steps__dot .as-icon{display:inline-block}
.steps li.is-done:not(.is-active) .steps__dot .steps__num{display:none}
.steps li.is-done .steps__dot{border-color:var(--blue);color:var(--blue)}
.steps li.is-active .steps__dot{border-color:var(--blue);background:var(--blue);color:#fff}
.steps li.is-active .steps__label{color:var(--blue)}
.steps li.is-done .steps__label{color:#4c5c72}

/* --- panels ------------------------------------------------------------------------------ */
.reg__panel{padding-bottom:4px}
.reg__panel[hidden]{display:none}
.reg__title{margin:0 0 8px;color:var(--navy);font-size:27px;font-weight:800;letter-spacing:-.02em}
.reg__sub{margin:0 0 26px;max-width:62ch;color:#6b7c92;font-size:14.5px;line-height:1.6}
.reg__group{margin:0 0 12px}
.reg__groupLabel{display:block;color:#33445c;font-size:13.5px;font-weight:700}
.reg__hint{margin:0 0 16px;color:#8a9ab0;font-size:12.5px;line-height:1.55}
.reg__row{display:flex;gap:16px}
.reg__row .field{flex:1 1 0}

/* --- the five shapes --------------------------------------------------------------------- */
.shapes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 12px}
.shape{
	position:relative;display:flex;flex-direction:column;align-items:center;
	padding:14px 10px 12px;border:1.5px solid #e2e9f2;border-radius:12px;background:#fff;
	text-align:center;cursor:pointer;
}
.shape:hover{border-color:#c7d7ea}
.shape input{
	appearance:none;-webkit-appearance:none;
	position:absolute;top:11px;left:11px;width:17px;height:17px;margin:0;
	border:1.5px solid #cdd8e6;border-radius:50%;background:#fff;cursor:pointer;
}
.shape input:checked{border-color:var(--blue)}
.shape input:checked::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--blue)}
.shape input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.shape__title{margin:2px 0 4px;color:var(--navy);font-size:14px;font-weight:700}
.shape__desc{margin:0 0 12px;color:#8a9ab0;font-size:11.5px;line-height:1.45;min-height:34px}
.shape__icon{width:30px;height:30px;margin:0 0 13px;color:var(--blue)}
.shape__levels{margin-top:auto;color:#5b6b82;font-size:11.5px;font-weight:600}
/* The selected card, and the :has() here is why no script is needed for it. The marker itself is
   the real radio, restyled, so keyboard use and the browser's own grouping are untouched. */
.shape:has(input:checked){border-color:var(--blue);background:#f2f7ff}

/* --- custom structure -------------------------------------------------------------------- */
.custom-structure{
	display:flex;align-items:center;gap:12px;width:100%;
	margin:0 0 22px;padding:14px 16px;border:1.5px solid #e2e9f2;border-radius:12px;
	background:#fff;color:#5b6b82;font-size:13px;text-align:left;
}
.custom-structure[disabled]{cursor:not-allowed;opacity:.85}
.custom-structure:hover{border-color:#c7d7ea}
.custom-structure input{
	appearance:none;-webkit-appearance:none;flex:0 0 auto;width:17px;height:17px;margin:0;
	border:1.5px solid #cdd8e6;border-radius:50%;background:#fff;
}
.custom-structure input:checked{border-color:var(--blue)}
.custom-structure input:checked::after{content:"";display:block;margin:2.5px;width:9px;height:9px;border-radius:50%;background:var(--blue)}
.custom-structure__text{flex:1 1 auto}
.custom-structure .as-icon--chevron{width:16px;height:16px;color:#9aa7b8}
/* The row's marker, drawn rather than an input: the application has no custom shape to choose, so
   this control is disabled and a real radio would promise a choice that is not there. */
.custom-structure__radio{flex:0 0 auto;width:17px;height:17px;border:1.5px solid #cdd8e6;border-radius:50%;background:#fff}

/* --- structure preview ------------------------------------------------------------------- */
.preview{margin:0 0 26px;padding:16px 18px 20px;border:1.5px solid #e2e9f2;border-radius:12px;background:#fff}
.preview__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.preview__head span:first-child{color:#33445c;font-size:13px;font-weight:700}
.preview__chip{padding:4px 10px;border-radius:999px;background:#eaf2ff;color:var(--blue);font-size:11.5px;font-weight:700}
.preview__tree{display:flex;flex-direction:column;align-items:center}
.preview__node{
	padding:8px 14px;border:1.5px solid #dfe6f0;border-radius:8px;background:#f4f7fb;
	color:#4c5c72;font-size:11.5px;font-weight:600;white-space:nowrap;
}
.preview__node--root{border-color:var(--navy);background:var(--navy);color:#fff}
.preview__children{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px;padding-top:0}
/* The bus and the stubs, drawn with borders: a horizontal line across the children, and a short
   vertical under it on each one. No SVG, so it survives any number of tiers. */
.preview__children::before{content:"";position:absolute;top:-13px;left:10%;right:10%;height:1.5px;background:#dfe6f0}
.preview__children .preview__node{position:relative}
.preview__children .preview__node::before{content:"";position:absolute;top:-13px;left:50%;width:1.5px;height:13px;background:#dfe6f0}
.preview__tree>.preview__node--root+.preview__children::after{
	content:"";position:absolute;top:-26px;left:50%;width:1.5px;height:13px;background:#dfe6f0;
}

/* --- actions ----------------------------------------------------------------------------- */
.reg__actions{display:flex;align-items:center;gap:14px;margin-top:4px}
.reg__back{flex:0 0 132px;padding:13px 18px;border:1.5px solid #dfe6f0;border-radius:10px;background:#fff;color:#4c5c72;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.reg__back:hover{border-color:#c7d7ea}
.reg__submit{flex:1 1 auto}
/* The wizard's own controls only appear when there is a script to run them: without JavaScript both
   panels are on the page and the one submit button at the bottom does the whole job. Continue and
   Back are the two that mean nothing without it. */
.reg__continue{display:none}
.js .reg__continue{display:inline-flex}
.reg__back{display:none}
.js .reg__back{display:inline-flex}
.req{color:#c53030}
.reg__captcha{display:flex;align-items:center;gap:14px}
.reg__captcha input{flex:1 1 auto}
.reg__captcha img{border:1px solid #dde5ef;border-radius:8px}
.reg__errors{margin:0 0 20px;padding:12px 15px;border-radius:10px;border-left:3px solid #c53030;background:#fdf2f2;color:#8a2020;font-size:13px}
.reg__errors ul{margin:6px 0 0;padding-left:18px;list-style:disc}
.reg__errors li{margin:2px 0}

/* --- responsive ------------------------------------------------------------------------- */
@media (max-width:1100px){
	.shapes{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
	.reg__stack{max-width:620px}
	.reg__aside-foot{padding-top:26px}
}
@media (max-width:600px){
	.shapes{grid-template-columns:repeat(2,minmax(0,1fr))}
	.reg__title{font-size:22px}
	.steps__label{font-size:11px}
	.reg__actions{flex-direction:column-reverse;align-items:stretch}
	.reg__row{flex-direction:column;gap:0}
	.preview__children{gap:6px}
	.preview__node{padding:6px 9px;font-size:10.5px}
}