/* The Office entrance: the sign-in door at /ops/ and the set-a-password page behind it.

   This file declares no colours of its own. Every value it paints with comes from
   assets/tokens.css, on the Studio ground, which both pages switch on with
   data-ground="staff". That is the whole point of it: the door used to carry its own
   hand-typed palette, so it drifted away from the app it opens. Now the only way to
   change how this door looks is to change the one token file, and the brand guard
   (functions/brand-guard.test.js) fails the build if a colour is ever typed back in here.

   The shapes are Office V2's: warm paper, a quiet card, a serif heading, square-ish
   corners and a solid oxblood button. Nothing here is decorative for its own sake. */

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  padding:var(--ll-space-7) var(--ll-space-5);
  display:grid;
  place-items:center;
  background:var(--ll-ground);
  color:var(--ll-ink);
  font-family:var(--ll-font-sans);
  font-size:16px;
  line-height:var(--ll-leading-body);
}

.card{
  width:100%;
  max-width:456px;
  border:1px solid var(--ll-line);
  border-radius:var(--ll-radius-sm);
  background:var(--ll-surface);
  box-shadow:var(--ll-shadow);
  overflow:hidden;
}

.top{padding:var(--ll-space-6) var(--ll-space-6) 0}
.brand{
  display:flex;
  align-items:center;
  gap:var(--ll-space-3);
  font-family:var(--ll-font-display);
  font-size:21px;
  font-weight:600;
  color:var(--ll-ink);
}
/* The bulb. It is the studio's own mark, at the size it reads at on a card. */
.brand svg{display:block;width:26px;height:35px;flex:0 0 26px}
.eyebrow{
  margin-top:var(--ll-space-6);
  color:var(--ll-accent);
  font-size:var(--ll-text-xs);
  font-weight:700;
  letter-spacing:var(--ll-tracking-eyebrow);
  text-transform:uppercase;
}

.body{padding:var(--ll-space-2) var(--ll-space-6) var(--ll-space-6)}

h1,h2{
  margin:0 0 var(--ll-space-2);
  font-family:var(--ll-font-display);
  font-size:32px;
  font-weight:600;
  line-height:var(--ll-leading-tight);
  color:var(--ll-ink);
}
.sub{margin:0 0 var(--ll-space-5);color:var(--ll-ink-soft);font-size:var(--ll-text-body)}

label{
  display:block;
  margin:var(--ll-space-4) 0 var(--ll-space-1);
  color:var(--ll-ink);
  font-size:var(--ll-text-sm);
  font-weight:600;
}

input{
  display:block;
  width:100%;
  min-height:var(--ll-tap-min);
  padding:var(--ll-space-3);
  border:1px solid var(--ll-line);
  border-radius:var(--ll-radius-sm);
  background:var(--ll-surface);
  color:var(--ll-ink);
  font-family:var(--ll-font-sans);
  font-size:16px;
}
input:hover{border-color:var(--ll-line-strong)}

.btn{
  display:block;
  width:100%;
  min-height:var(--ll-tap-min);
  margin:var(--ll-space-5) 0 0;
  padding:var(--ll-space-3) var(--ll-space-4);
  border:1px solid var(--ll-accent);
  border-radius:var(--ll-radius-sm);
  background:var(--ll-accent);
  color:var(--ll-on-accent);
  font-family:var(--ll-font-sans);
  font-size:var(--ll-text-body);
  font-weight:600;
  cursor:pointer;
}
.btn:hover{background:var(--ll-accent-deep);border-color:var(--ll-accent-deep)}
.btn:disabled{opacity:.55;cursor:default}

.link{
  display:block;
  width:100%;
  min-height:var(--ll-tap-min);
  margin:var(--ll-space-1) 0 0;
  padding:var(--ll-space-3) var(--ll-space-2);
  border:0;
  border-radius:var(--ll-radius-sm);
  background:none;
  color:var(--ll-accent);
  font-family:var(--ll-font-sans);
  font-size:var(--ll-text-btn);
  font-weight:600;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.link:hover{text-decoration:underline}

/* "or" between the password form and the desk-code way in. */
.divider{
  display:flex;
  align-items:center;
  gap:var(--ll-space-3);
  margin-top:var(--ll-space-4);
  color:var(--ll-ink-soft);
  font-size:var(--ll-text-sm);
}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--ll-line)}

/* A code read out at the desk is typed by hand, so it gets room to breathe. */
.code{letter-spacing:.18em;font-variant-numeric:tabular-nums;text-transform:uppercase}

.msg{margin-top:var(--ll-space-4);font-size:var(--ll-text-sm);overflow-wrap:anywhere}
.msg:empty{display:none}
.msg.err{color:var(--ll-danger)}
.msg.ok{color:var(--ll-positive)}

.hide{display:none!important}

.spin{
  display:inline-block;
  vertical-align:-2px;
  width:14px;height:14px;
  margin-right:var(--ll-space-2);
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:var(--ll-radius-pill);
  animation:office-auth-spin .7s linear infinite;
}
@keyframes office-auth-spin{to{transform:rotate(360deg)}}

@media(max-width:520px){
  body{padding:var(--ll-space-5) var(--ll-space-4);align-items:start}
  .top{padding:var(--ll-space-5) var(--ll-space-5) 0}
  .body{padding:var(--ll-space-2) var(--ll-space-5) var(--ll-space-5)}
  h1,h2{font-size:28px}
  .eyebrow{margin-top:var(--ll-space-5)}
}