/* ORB's sign-in (in front of Authelia): Seraph dark, a wire tree growing with the
   orb going round it, and the form underneath. */
html, body { margin: 0; min-height: 100%; background: var(--page); color: var(--ink); overflow-x: hidden; }
body { font: 400 14px/1.45 var(--display); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; display: flex; flex-direction: column; min-height: 100dvh; }
#tree { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }

.bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px;
  height: 40px; padding: env(safe-area-inset-top) 16px 0; font: 600 10px/1 var(--mono); letter-spacing: 0.3em; pointer-events: none;
}
.bar span { font-weight: 400; color: var(--ink-faint); letter-spacing: 0.24em; font-size: 8px; }
.bar em { margin-left: auto; font: 500 7.5px/1 var(--mono); font-style: normal; letter-spacing: 0.26em; color: var(--sig); }

.gate {
  position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: 420px; margin: auto auto 0;
  padding: 0 20px calc(22px + env(safe-area-inset-bottom));
}
.gate::before { /* the ground fading into the form */
  content: ''; position: absolute; left: -20px; right: -20px; top: -40px; bottom: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--void-rgb), 0), rgba(var(--void-rgb), 0.9) 40px, rgb(var(--void-rgb)) 100%);
}
.label { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 500 8.5px/1 var(--mono); letter-spacing: 0.3em; color: var(--ink-faint); }
.label i { width: 5px; height: 5px; background: var(--sig); box-shadow: 0 0 8px rgba(var(--sig-rgb), 0.9); }

label { display: block; margin-top: 18px; font: 500 8px/1 var(--mono); letter-spacing: 0.28em; color: var(--ink-dim); }
input:not([type='checkbox']) {
  display: block; width: 100%; box-sizing: border-box; height: 44px; margin-top: 4px; padding: 0 2px;
  font: 400 17px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink); background: none;
  border: 0; border-bottom: 1px solid var(--hair-strong); border-radius: 0; outline: none; caret-color: var(--sig);
  transition: border-color 0.2s;
}
input:not([type='checkbox']):focus { border-bottom-color: var(--ink); }
.pw { position: relative; display: block; }
.pw input { padding-right: 58px; }
.pw button {
  position: absolute; right: 0; bottom: 8px; height: 28px; padding: 0 8px; font: 500 7.5px/1 var(--mono); letter-spacing: 0.24em;
  color: var(--ink-faint); background: none; border: 1px solid var(--hair); border-radius: 0; cursor: pointer;
}

.keep { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--ink-faint); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.keep input { position: absolute; opacity: 0; pointer-events: none; }
.keep .box { position: relative; flex: none; width: 14px; height: 14px; border: 1px solid var(--hair-strong); }
.keep input:checked + .box { border-color: var(--ink); }
.keep input:checked + .box::after { content: ''; position: absolute; inset: 3px; background: var(--sig); }
.keep input:focus-visible + .box { outline: 1px solid var(--ink); outline-offset: 2px; }

#go {
  position: relative; display: block; width: 100%; height: 52px; margin-top: 22px; overflow: hidden;
  font: 600 11px/1 var(--mono); letter-spacing: 0.34em; color: var(--void); background: var(--ink);
  border: 1px solid var(--ink); border-radius: 0; outline: 1px solid var(--hair-strong); outline-offset: 3px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#go span { position: relative; }
#go:active { background: var(--ink-dim); }
#go:disabled { cursor: default; }
#go.busy::before { /* a line of the orb's light running across while it checks */
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%;
  background: linear-gradient(90deg, transparent, rgba(var(--sig-rgb), 0.55), transparent); animation: run 1s linear infinite;
}
@keyframes run { to { left: 100%; } }
.err { min-height: 1.4em; margin: 12px 0 0; font: 500 10px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--ember); }
.err:empty { visibility: hidden; }
.shake { animation: shake 0.4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.foot { margin: 8px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-faint); }

/* in: the orb's light fills the screen */
.flash { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--fx, 50%) var(--fy, 40%), #fff 0%, rgba(var(--sig-rgb), 0.95) 38%, rgb(var(--sig-rgb)) 100%); transition: opacity 0.9s; }
.flash.on { opacity: 1; transition: opacity 0.45s; }

@media (min-height: 760px) { .gate { padding-bottom: calc(40px + env(safe-area-inset-bottom)); } }
@media (orientation: landscape) and (max-height: 560px) {
  body { flex-direction: row; }
  .gate { margin: auto 0 auto auto; padding: 50px 24px 20px; max-width: 380px; }
  .gate::before { left: -80px; right: 0; top: 0; background: linear-gradient(to right, rgba(var(--void-rgb), 0), rgb(var(--void-rgb)) 80px); }
}
@media (prefers-reduced-motion: reduce) { #go.busy::before, .shake { animation: none; } }