/* The sign-in screen: Icefield's shared sign-in design (Crew Dispatch's, kept so every
   Icefield product's reads the same), on Timekeeping's tokens. The server draws it
   (server/src/auth/screen.ts) with no script needed, so it's there in the first frame
   whatever the bundle is doing; this file and the logos beside it are all it loads.

   The tokens are frontend/src/styles.css's, restated: the screen doesn't load the app's
   bundle. The few the app has no use for (--ink-4, --fill-3, --r-xl, the shadows, motion)
   are the reference's. What says it's Timekeeping rather than another Icefield product is
   the four brand-rule colours, off Arian's mark, and the mark itself. */

:root {
  color-scheme: light dark;

  /* The strip across the top, lightest at both ends and darkest in the middle. Read by eye
     off the mark, light to dark: the strap, the warm background, its shadowed side, the
     dark swoosh. Kept in step with frontend/src/styles.css. */
  --brand-rule-h: 6px;
  --brand-rule-1: #ecc48f;
  --brand-rule-2: #d49a5a;
  --brand-rule-3: #a56a37;
  --brand-rule-4: #5c361b;
  --brand-rule: linear-gradient(
    90deg,
    var(--brand-rule-1) 0%,
    var(--brand-rule-2) 17%,
    var(--brand-rule-3) 33%,
    var(--brand-rule-4) 50%,
    var(--brand-rule-3) 67%,
    var(--brand-rule-2) 83%,
    var(--brand-rule-1) 100%
  );

  --brand-primary: #1f4e79;

  --bg: #f5f5f7;
  --surface: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --ink-3: #6e6e73;
  --ink-4: #86868b;
  --separator: rgba(0, 0, 0, 0.09);
  --fill-1: rgba(116, 116, 128, 0.08);
  --fill-2: rgba(116, 116, 128, 0.12);
  --fill-3: rgba(116, 116, 128, 0.18);
  --red: #d70015;
  --red-tint: rgba(255, 59, 48, 0.1);

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', system-ui, Roboto, sans-serif;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --border-width: 1px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --t-fast: 140ms;
}

/* Dark follows the device, with no switch, as the app does: the neutral tokens restated,
   so everything inside follows. */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-primary: #7fb0e0;
    --bg: #000000;
    --surface: #1c1c1e;
    --ink: #f5f5f7;
    --ink-2: #d1d1d6;
    --ink-3: #98989d;
    --ink-4: #8e8e93;
    --separator: rgba(255, 255, 255, 0.12);
    --fill-1: rgba(118, 118, 128, 0.18);
    --fill-2: rgba(118, 118, 128, 0.24);
    --fill-3: rgba(118, 118, 128, 0.32);
    --red: #ff6961;
    --red-tint: rgba(255, 69, 58, 0.18);
    /* A shadow that lifts white off grey does nothing on black: harder and deeper, and the
       card gets a hairline of its own below. */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 20px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
  }
}

/* ── Base ──────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; }
body { font: 16px/1.45 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1 { margin: 0; font-weight: 600; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* ── The brand rule ────────────────────────────────────────────────────────
   Fixed, so it needs nothing from the layout. A 200%-wide copy of the symmetric gradient
   drifting back and forth reads as the colour slowly washing along the strip: slow and
   small on purpose. */
.brand-rule {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--brand-rule-h);
  background: var(--brand-rule);
  background-size: 200% 100%;
  animation: brand-rule-drift 18s ease-in-out infinite alternate;
}
@keyframes brand-rule-drift {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

/* ── The screen ────────────────────────────────────────────────────────────
   One centred card on the grouped background: the mark, then the one button. */
.auth-shell {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  padding: 40px 20px;
  background: var(--bg);
}

.card { background: var(--surface); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-1); margin-bottom: 20px; }
/* The doubled class is load-bearing: a plain .auth-card ties with .card and loses on
   source order, and its radius, padding, shadow and margin silently do nothing. */
.card.auth-card {
  width: 100%;
  max-width: 420px;
  margin-bottom: 0;
  padding: 34px 32px 30px;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

.auth-head { text-align: center; }
/* Arian's mark is the app icon on its own, with no wordmark, so the name is set in type
   beneath it. About the size the mark is inside the reference's lockup. */
.auth-icon { display: block; width: 88px; height: 88px; margin: 0 auto 14px; }
.auth-title { margin: 0; font-size: 1.375rem; line-height: 1.28; font-weight: 600; letter-spacing: -0.021em; color: var(--ink); }
.auth-tagline { margin: 4px 0 0; font-size: 0.9375rem; line-height: 1.35; color: var(--ink-3); }

/* <picture> carries the dark-surface variant of a mark without changing the layout. */
.auth-mark { display: contents; }

.auth-body { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.auth-body form { display: contents; }

/* ── Controls ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 14px;
  border: none; border-radius: var(--r-sm);
  background: var(--fill-2); color: var(--ink);
  cursor: pointer;
  font-size: 0.875rem; font-weight: 500; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--fill-3); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Microsoft's own sign-in button, black on white, so it reads as that button. ICE does the
   signing in, with Microsoft. */
.login-ms {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 16px;
  min-height: 44px;
  background: #000; color: #fff;
  border: none;
}
.login-ms:hover:not(:disabled) { background: #1a1a1a; }
.login-ms:disabled { background: var(--fill-2); color: var(--ink-4); }
.login-msal-off { margin: 10px 0 0; text-align: center; }

/* The server's message, as written for a person to read, above the button, which still
   works. */
.error { background: var(--red-tint); color: var(--red); padding: 11px 14px; border-radius: var(--r-md); font-size: 0.875rem; margin-bottom: 14px; }
.hint { font-size: 0.78rem; color: var(--ink-4); line-height: 1.4; }

/* ── The footer ────────────────────────────────────────────────────────────
   Icefield's mark on its own, signature-sized, signing the screen. */
.auth-footer { display: flex; align-items: center; gap: 8px; color: var(--ink-4); font-size: 0.78rem; }
.auth-footer-logo { height: 50px; width: auto; opacity: 0.8; }

@media (prefers-color-scheme: dark) {
  /* --shadow-2 alone dissolves into black; the hairline holds the card's edge. Three
     classes, so it outranks .card.auth-card on specificity. */
  .auth-shell .card.auth-card { box-shadow: var(--shadow-2), inset 0 0 0 var(--border-width) var(--separator); }
  /* Microsoft's button inverts on a dark background: white plate, black lettering. */
  .auth-shell .login-ms { background: #fff; color: #000; }
  .auth-shell .login-ms:hover:not(:disabled) { background: #e6e6e6; }
  .auth-shell .login-ms:disabled { background: var(--fill-2); color: var(--ink-4); }
}

/* Less movement when the system asks for it, the brand rule's drift included: it freezes
   on a frame rather than disappearing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}