/* Sign-in surfaces (office code, sign in, sign up, forgot, reset, licence): the real dispatch board behind one white panel. */
:root{--navy:#072746;--navy-2:#0d3a66;--on-navy:#f3f4fa;--on-navy-mut:#b4b8d4;--gold:#FEBE05;--gold-d:#e5aa00;--green:#2fb257;
  --ink:#1c1f33;--muted:#626880;--line:#d8dae5;--sunk:#f3f4f8;--red:#d93a3f;--red-bg:#fde8e8;--green-bg:#e3f6e9;
  --font:"Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:light}
*{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%;overscroll-behavior-y:none;height:100%}
body.auth{margin:0;min-height:100%;font:15px/1.5 var(--font);color:var(--ink);background:var(--navy);display:grid;grid-template-columns:minmax(0,1fr) 420px;font-variant-numeric:tabular-nums}
::selection{background:var(--gold);color:var(--navy)}
a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#9aa3bd}a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}.scene :focus-visible{outline-color:var(--gold)}

/* ---- the board behind the door ---- */
.scene{position:relative;overflow:hidden;color:var(--on-navy);display:flex;flex-direction:column;justify-content:space-between;padding:calc(1.6rem + env(safe-area-inset-top)) 2.4rem 2.2rem;min-height:100dvh;isolation:isolate}
.scene .still{position:absolute;inset:0;z-index:-2;background:var(--navy) url(/assets/brand/board-still.webp) right top/cover no-repeat;filter:saturate(.7) contrast(1.05);opacity:.6;transform:scale(1.02);-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 85%);mask-image:linear-gradient(180deg,#000 50%,transparent 85%)}
.scene .wash{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,39,70,.75) 0%,rgba(7,39,70,0) 28%),linear-gradient(100deg,rgba(7,39,70,.15) 0%,rgba(7,39,70,.55) 60%,rgba(7,39,70,.9) 100%),linear-gradient(0deg,rgba(7,39,70,.9) 0%,rgba(7,39,70,0) 50%)}
.scene .brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.05rem;color:#fff;text-decoration:none;letter-spacing:-.01em}
.scene .brand img{width:34px;height:34px;border-radius:9px;background:#fff;object-fit:contain}
.scene .word{max-width:34rem}
.scene .word h2{margin:0 0 .35rem;font-size:clamp(2rem,3.6vw,3.3rem);line-height:1.05;letter-spacing:-.025em;font-weight:600;text-wrap:balance}
.scene .word p{margin:0;color:var(--on-navy-mut);font-size:1.05rem;max-width:30rem}
.scene .word ul{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.45rem;max-width:32rem}
.scene .word li{position:relative;padding-left:1.6rem;color:#e6e9f4;font-size:1rem}
.scene .word li::before{content:"";position:absolute;left:.1rem;top:.55rem;width:.75rem;height:.4rem;border-left:2.5px solid #e6e9f4;border-bottom:2.5px solid #e6e9f4;transform:rotate(-45deg) translateY(-30%)}

/* ---- the panel ---- */
.panel{background:#fff;display:flex;flex-direction:column;padding:calc(2.2rem + env(safe-area-inset-top)) 2.25rem calc(1.4rem + env(safe-area-inset-bottom));height:100dvh;overflow:auto;box-shadow:-1px 0 0 rgba(7,39,70,.08)}
.panel>form,.panel>.body{display:flex;flex-direction:column;gap:1rem;flex:1}
.panel h1{font-size:1.65rem;line-height:1.15;margin:0;font-weight:600;letter-spacing:-.02em;color:var(--navy)}
.panel h1+p{margin-top:-.45rem}
.panel p{margin:0}.muted{color:var(--muted)}.small{font-size:.86rem}
.field{display:flex;flex-direction:column;gap:.3rem;font-weight:500;font-size:.84rem;min-width:0}.field>span{color:var(--muted)}.field small{font-weight:400;color:var(--muted);font-size:.8rem}
input,select{font:inherit;padding:.6rem .8rem;border:1px solid #c0c5d6;border-radius:9px;background:#fff;color:var(--ink);width:100%;min-height:46px;caret-color:var(--navy);transition:border-color .15s,box-shadow .15s}
input::placeholder{color:#6b7190}
input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(254,190,5,.35)}
input.code{font-size:1.5rem;font-weight:600;letter-spacing:.01em;min-height:56px;padding:.5rem .9rem;text-transform:lowercase}
.chk-line{display:flex;gap:.6rem;align-items:center;font-size:.92rem;cursor:pointer}.chk-line input{width:1.1rem;height:1.1rem;min-height:0;margin:0;accent-color:var(--navy);flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem 1.1rem;border:1px solid #c0c5d6;border-radius:9px;background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;min-height:48px;width:auto;white-space:nowrap;text-decoration:none;transition:background .15s,transform .15s}
.btn:hover{background:var(--sunk)}.btn:active{transform:translateY(1px)}.btn.block{width:100%}
.btn.primary{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:700;font-size:1.02rem}.btn.primary:hover{background:var(--gold-d);border-color:var(--gold-d)}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}.btn.dark:hover{background:var(--navy-2)}
.flash{padding:.7rem .9rem;border-radius:9px;background:var(--green-bg);color:#14602c;font-weight:500}.flash.err{background:var(--red-bg);color:#a3262a}
.links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.92rem}
.rule{border:0;border-top:1px solid var(--line);margin:.2rem 0}
.panel .credit{margin-top:auto;padding-top:1.6rem;font-size:.82rem;color:var(--muted)}.credit a{color:inherit}
.terms{font-weight:400;font-size:.9rem;align-items:flex-start}.terms input{margin-top:.2rem}
.hp{position:absolute;left:-9999px}

/* one authored moment: the board settles into view and the panel lifts in */
@media (prefers-reduced-motion:no-preference){
  .scene .still{animation:settle .9s cubic-bezier(.2,.7,.2,1) both}
  .panel>form,.panel>.body{animation:lift .5s cubic-bezier(.2,.7,.2,1) .08s both}
  @keyframes settle{from{opacity:.2;transform:scale(1.06)}to{opacity:.6;transform:scale(1.02)}}
  @keyframes lift{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* iPad portrait and below: the board becomes a band, the panel takes the width */
@media (max-width:900px){
  body.auth{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .scene .still{background-size:auto 200%;background-position:right 22% top 18%;opacity:.7;-webkit-mask-image:none;mask-image:none}.scene .wash{background:linear-gradient(0deg,rgba(7,39,70,.92) 0%,rgba(7,39,70,.35) 55%,rgba(7,39,70,.25) 100%)}
  .scene{min-height:0;height:min(42vh,340px);padding:calc(1.2rem + env(safe-area-inset-top)) 1.4rem 1.3rem}
  .scene .word h2{font-size:clamp(1.5rem,6vw,2.3rem)}.scene .word p,.scene .word ul{display:none}
  .panel{height:auto;overflow:visible;padding:1.6rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom));box-shadow:none;border-radius:18px 18px 0 0;margin-top:-16px}
}
@media (max-width:520px){.scene{height:min(32vh,220px)}}
@media (min-width:1600px){body.auth{grid-template-columns:minmax(0,1fr) 460px}.panel{padding-left:2.8rem;padding-right:2.8rem}}

/* ---- intuitive extras: password reveal, address preview, strength, busy buttons, help ---- */
.pw{position:relative;display:flex}.pw input{padding-right:4.8rem}
.pw .show{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--navy);font:inherit;font-weight:600;font-size:.86rem;padding:.45rem .6rem;border-radius:7px;cursor:pointer;min-height:36px}
.pw .show:hover{background:var(--sunk)}
.preview{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;font-size:.84rem;color:var(--muted);background:var(--sunk);border:1px dashed #c6cbdc;border-radius:9px;padding:.5rem .7rem;overflow-wrap:anywhere}
.preview b{color:var(--navy);font-weight:600}
.meter{display:flex;gap:.25rem;margin-top:.1rem}.meter i{flex:1;height:5px;border-radius:99px;background:#e3e6f0;transition:background .2s}
.meter[data-s="1"] i:nth-child(-n+1){background:var(--red)}.meter[data-s="2"] i:nth-child(-n+2){background:#e08a00}.meter[data-s="3"] i:nth-child(-n+3){background:#7bb82a}.meter[data-s="4"] i{background:var(--green)}
.mtext{font-size:.8rem;color:var(--muted);min-height:1.2em}
.btn.busy{pointer-events:none;opacity:.75}.btn.busy::after{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.busy::after{animation:none}}
.help{font-size:.88rem;color:var(--muted);line-height:1.45}.help a{font-weight:600}
.sec{margin:.2rem 0 -.2rem;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.field input[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(217,58,63,.15)}
.assure{text-align:center;font-size:.84rem;color:var(--muted)}
.panel :focus-visible{outline:3px solid var(--navy);outline-offset:2px}.panel input:focus-visible{outline:none}
/* the sign-up form is long: keep it compact so it fits a laptop screen */
#rf{gap:.7rem}#rf .field{gap:.22rem}#rf input{min-height:42px;padding:.45rem .75rem}#rf .sec{margin-top:.3rem}#rf .preview{padding:.4rem .65rem;font-size:.8rem}#rf .meter{margin-top:0}#rf .credit{padding-top:.8rem}
@media (max-height:760px) and (min-width:901px){.panel{padding-top:1.4rem}}