/* The sign-in page: a white sheet with the form on the left, a pallet rack in elevation filling the rest. The
 * tokens come from app.css (the sign face, the rack's blue and the beams' orange, the floor tape). */
body.login-page { overflow: auto; background: var(--page); }
.signin { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 460px) 1fr; }
.signin-panel { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; padding: 34px clamp(28px, 4vw, 56px) 28px;
  background: var(--surface); border-right: 1px solid var(--border); box-shadow: 8px 0 32px rgba(23, 32, 51, 0.06); }
.signin-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-sign); font-size: 17px; font-weight: 600; letter-spacing: 0.005em; }
.signin-brand .mark { width: 24px; height: 24px; border-radius: 5px; background: var(--accent); position: relative; flex: 0 0 auto; }
.signin-brand .mark::after { content: ""; position: absolute; left: 5px; right: 5px; top: 6px; height: 3px; background: #fff; box-shadow: 0 5px 0 #fff, 0 10px 0 #fff; opacity: 0.92; }
.signin-body { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 340px; }
.signin-title { margin: 0 0 8px; font-family: var(--font-sign); font-size: 34px; font-weight: 600; line-height: 1.05; letter-spacing: -0.012em; color: var(--ink); }
.signin-lead { margin: 0 0 26px; color: var(--ink-2); font-size: 14px; line-height: 1.5; max-width: 34ch; }
.signin-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.signin-field[hidden] { display: none; }
.signin-field input { font-size: 15px; font-weight: 400; min-height: 42px; padding: 9px 12px; border-radius: 6px; border-color: var(--border-strong); }
.signin-field input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.signin-submit { width: 100%; justify-content: center; min-height: 44px; margin-top: 8px; border-radius: 6px; font-size: 14.5px; font-weight: 600; }
.signin-submit:disabled { opacity: 0.6; }
.signin-submit:focus-visible, .signin-remote .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.signin-error { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 6px; padding: 9px 12px; border-radius: 6px; background: var(--bad-bg); color: var(--bad-text); font-size: 13px; line-height: 1.4; }
.signin-error::before { content: "!"; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--critical); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.signin-error[hidden] { display: none; }
.signin-wait { color: var(--ink-3); }
.signin-wait[hidden] { display: none; }
.signin-remote[hidden] { display: none; }
.signin-note { margin: 0; max-width: 40ch; color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
.signin-note:empty { display: none; }

/* the rack in elevation (src/login.js draws it) */
.signin-art { position: relative; margin: 0; overflow: hidden; background: linear-gradient(180deg, #e9edf2 0%, #dfe5ec 72%, #d6dde5 100%); }
.signin-art .rack-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-floor { fill: #c9d0d8; }
.art-shadow { fill: #aeb7c2; opacity: 0.55; }
.art-tape { fill: var(--tape); }
.art-upright { fill: var(--rack); }
.art-hole { fill: #173c61; opacity: 0.55; }
.art-foot { fill: #173c61; }
.art-beam { fill: var(--beam); }
.art-beam-edge { fill: #f39a5b; }
.art-loc { fill: #fbfbf8; }
.art-loc-text { font-family: var(--font-sign); font-size: 2.5px; font-weight: 600; fill: var(--ink); letter-spacing: 0.02em; }
.art-bars { fill: var(--ink); }
.art-carton { stroke: rgba(80, 56, 24, 0.35); stroke-width: 0.35; }
.art-carton-tape { fill: rgba(255, 244, 220, 0.45); }
.art-carton-label { fill: #fbfbf8; }
.art-stack { transform-box: fill-box; transform-origin: 50% 100%; animation: art-settle 520ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }
@keyframes art-settle {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .art-stack { animation: none; } }

@media (max-width: 760px) {
  .signin { grid-template-columns: 1fr; grid-template-rows: 170px auto; }
  .signin-art { order: -1; }
  .signin-panel { border-right: 0; box-shadow: none; padding: 22px 16px 24px; }
  .signin-body { max-width: none; }
  .signin-title { font-size: 28px; }
}