:root{font-family:Arial,Helvetica,sans-serif;color:#f5f9ff;background:#123f7a;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:22px 22px;min-height:100vh}header{padding:28px 4%;display:flex;align-items:center;justify-content:space-between;color:#c4d7ec;font-size:13px}.brand{font-size:23px;color:white;letter-spacing:1px}main{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:36px;padding:20px 4%}.scene{min-width:0}h1{font-size:clamp(30px,3.8vw,58px);line-height:1.08;margin:0;letter-spacing:-1.5px}canvas{width:100%;height:450px;display:block}.controls{display:flex;gap:12px;align-items:center}button{border:1px solid #8cb6e4;background:#235991;color:white;border-radius:8px;padding:10px 16px;cursor:pointer}input[type=range]{flex:1;min-width:50px;accent-color:#b6dfff}output{width:60px;font-variant-numeric:tabular-nums}#phase{color:#c4d7ec;font-size:14px;min-height:20px}aside{margin-top:20px;padding:32px;border:1px solid #82b1df;border-radius:15px;background:#174c83;align-self:start;box-shadow:0 12px 45px #062d5620}h2{font-size:38px;margin:0 0 12px}aside p{margin:0 0 32px;color:#deebff}label{display:block;font-size:14px;font-weight:600;margin-bottom:22px}label input,select{display:block;width:100%;margin-top:9px;padding:14px;border:1px solid #86acda;border-radius:9px;background:#123d70;font-size:15px;color:white}input::placeholder{color:#b9cfe7}.login{width:100%;background:#2878ca;font-weight:700;font-size:16px}button:disabled,select:disabled,input:disabled{opacity:1;cursor:default}hr{border:0;border-top:1px solid #7394b7;margin:27px 0}small{color:#d0e0f3}footer{padding:8px 4% 24px;color:#afc7e1;font-size:12px}@media(max-width:800px){main{grid-template-columns:1fr}aside{max-width:450px;width:100%;margin:auto}canvas{height:360px}header span{max-width:130px;text-align:right}h1{font-size:36px}}

.stage{position:relative}#bend-detail{position:absolute;left:0;top:8px;width:220px;margin:0;padding:10px 12px 8px;background:#123f7af5;border:1px solid #719eca;border-radius:10px;pointer-events:none;visibility:hidden}#bend-detail figcaption{font-size:13px;font-weight:600;letter-spacing:.3px}#bend-detail svg{display:block;width:100%;height:145px}#bend-detail text{fill:#dfedff;font:14px Arial,sans-serif}#bend-detail .leader{stroke:#99bee6;fill:none}#bend-detail small{font-size:10px;color:#b4cde7}@media(max-width:800px){#bend-detail{width:175px;top:4px;padding:8px}#bend-detail svg{height:110px}}

#punch-detail{position:absolute;left:0;top:8px;width:220px;margin:0;padding:10px 12px 8px;background:#123f7af5;border:1px solid #719eca;border-radius:10px;pointer-events:none;visibility:hidden}#punch-detail svg{display:block;width:100%;height:145px}@media(max-width:800px){#punch-detail{width:175px;top:4px;padding:8px}#punch-detail svg{height:110px}}

/* Local login appearance. Development controls are opt-in via ?debug. */
.login-preview h1{font-size:clamp(28px,3vw,44px);letter-spacing:-1px}
.company-brand img{display:block;width:235px;max-width:70vw;height:auto}
.company-brand div{font-size:14px;letter-spacing:.15px;margin-top:10px;color:#deebff}
.login-preview:not(.debug) .controls,.login-preview:not(.debug) #phase,.login-preview:not(.debug) .testlinks,.login-preview:not(.debug) footer,.login-preview:not(.debug) header>span{display:none}
@media(max-width:800px){.login-preview h1{font-size:29px}.login-preview main{padding-top:6px}.company-brand div{font-size:12px}}
.company-brand img{background:#fff;padding:10px 14px;border-radius:3px;width:255px}

/* Refined blueprint login */
body.login-preview{background-color:#103b69;background-image:linear-gradient(#dcefff0b 1px,transparent 1px),linear-gradient(90deg,#dcefff0b 1px,transparent 1px),linear-gradient(#dcefff05 1px,transparent 1px),linear-gradient(90deg,#dcefff05 1px,transparent 1px);background-size:50px 50px,50px 50px,10px 10px,10px 10px;position:relative;isolation:isolate}
.login-preview:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('references/catalogue-detail.svg') right -130px top -50px / 900px auto no-repeat,url('references/catalogue-detail.svg') left -330px bottom -80px / 1050px auto no-repeat;opacity:.055}
.login-preview header{justify-content:flex-start;gap:28px;padding:30px 4% 24px}
.login-preview .company-brand{flex:0 0 auto}
.login-preview .company-brand img{width:185px;max-width:none;padding:0;background:none;border-radius:0;filter:brightness(0) invert(1);opacity:.94}
.login-preview header h1{font-size:clamp(12px,1.5vw,22px);font-weight:400;letter-spacing:.25px;line-height:1.4;white-space:nowrap;margin:0}
.login-preview header>span{margin-left:auto}
.login-preview main{grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:center}
.login-preview .stage{padding:22px;background:#103b6966}
.drawing-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.65}
.login-preview #bend-detail,.login-preview #punch-detail{left:30px;top:30px}
.login-preview aside{margin:0;padding:24px;border-radius:10px;background:#174a7799;border-color:#b9dafa66;box-shadow:0 12px 36px #06274620}
.login-preview h2{font-size:29px;margin-bottom:8px}
.login-preview aside p{font-size:14px;margin-bottom:22px}
.login-preview label{font-size:12px;margin-bottom:15px}
.login-preview label input,.login-preview select{padding:10px 12px;margin-top:7px;font-size:14px;border-radius:6px}
.login-preview .login{padding:11px;font-size:14px;border-radius:6px}
.login-preview hr{margin:20px 0 16px}.login-preview small{font-size:11px}
@media(max-width:800px){.login-preview header{gap:18px;padding:24px 4%}.login-preview .company-brand img{width:150px}.login-preview header h1{font-size:14px;letter-spacing:0}.login-preview main{grid-template-columns:1fr;gap:24px}.login-preview aside{max-width:340px;margin:auto}.login-preview .stage{padding:18px}.login-preview canvas{height:340px}.login-preview #bend-detail,.login-preview #punch-detail{left:24px;top:24px}}
@media(max-width:480px){.login-preview header{gap:12px}.login-preview .company-brand img{width:102px}.login-preview header h1{font-size:10px}.login-preview .stage{padding:14px}.login-preview canvas{height:300px}}
/* Centered square drawing with adjacent sign-in. */
.login-preview{--layout-width:1120px}
.login-preview header,.login-preview main{width:calc(100% - 48px);max-width:var(--layout-width);margin-inline:auto;padding-left:0;padding-right:0}
.login-preview main{grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding-top:8px;padding-bottom:30px}
.login-preview .stage{width:100%;aspect-ratio:1;padding:20px}
.login-preview .stage canvas{height:100%;width:100%;position:absolute;inset:20px;width:calc(100% - 40px);height:calc(100% - 40px)}
.login-preview aside{width:100%;max-width:none;align-self:center}
.company-brand{position:relative}
.company-brand:after{content:"";position:absolute;inset:0;background:#e3262e;mask:url('references/acblechform-logo.png') center / 100% 100% no-repeat;-webkit-mask:url('references/acblechform-logo.png') center / 100% 100% no-repeat;clip-path:inset(63% 68% 0 22%);pointer-events:none}
@media(min-width:560px) and (max-width:800px){.login-preview main{grid-template-columns:minmax(0,1fr) 225px;gap:18px}.login-preview aside{padding:18px}.login-preview h2{font-size:25px}.login-preview aside p{margin-bottom:16px}.login-preview label{margin-bottom:12px}.login-preview hr{margin:15px 0}.login-preview .stage{padding:12px}.login-preview .stage canvas{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px)}.login-preview #bend-detail,.login-preview #punch-detail{width:105px;left:18px;top:18px;padding:5px}.login-preview #bend-detail svg,.login-preview #punch-detail svg{height:70px}}
@media(max-width:559px){.login-preview header,.login-preview main{width:calc(100% - 32px)}.login-preview main{grid-template-columns:1fr}.login-preview aside{max-width:340px}.login-preview .stage canvas{inset:16px;width:calc(100% - 32px);height:calc(100% - 32px)}}
.login-preview{display:flex;flex-direction:column;justify-content:center;min-height:100svh}
.login-preview header,.login-preview main{flex:none}
/* The form's measured height determines the desktop square, not spare width. */
.login-preview{--login-width:300px;--layout-gap:28px}
.login-preview main{grid-template-columns:var(--square-side,450px) var(--login-width);gap:var(--layout-gap);align-items:start}
.login-preview aside{width:var(--login-width);max-width:100%;margin:0;align-self:start}
.login-preview .stage{width:100%;aspect-ratio:1}
.login-preview.stacked main{grid-template-columns:minmax(0,1fr)}
.login-preview.stacked aside{margin-inline:auto}
.login-preview .company-brand img{clip-path:polygon(0 0,100% 0,100% 100%,34% 100%,34% 62%,23% 62%,23% 100%,0 100%)}
.company-brand:after{clip-path:inset(62% 66% 0 23%)}

.login-preview .flash-message{padding:10px;border:1px solid #f6b5af;border-radius:6px;color:#fff;background:#7f263b66;margin-bottom:16px}.login-preview :focus-visible{outline:2px solid #b9e5ff;outline-offset:3px}