/* ===========================================================================
   ux/assets/signin.css — the split sign-in screen.

   Used by login.php (HR team) and by the signed-out view of clock.php
   (staff). The form sits on the left on the page's own ground; on the right
   is the brand panel from includes/signin_panel.php — the "E" with the parts
   of HR circling it. Everything is scoped under .signin so neither page's
   other styles are touched.

   The panel is one visual world in both themes, the way a cover is: it does
   not swap palettes with the form beside it. The form column follows
   html[data-theme=dark], which theme.php resolves before first paint.

   Below 980px the panel is dropped and the form takes the screen: on a phone
   the picture would push the form below the fold, which is the wrong trade on
   a page whose only job is to let someone in.
   =========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal; font-weight: 400 800; font-display: swap;
  /* the copy that exists — auth.css points at ux/assets/pms/fonts/, which 404s */
  src: url("../../hr/assets/fonts/jakarta-var.woff2") format("woff2");
}

.signin {
  --si-surface: #ffffff; --si-ink: #1a1919; --si-ink-2: #39434e; --si-muted: #5f6b78;
  --si-brand: #3f7aa7;   --si-brand-ink: #155a86;
  --si-border: #e3eaf1;  --si-fill: #f3f6f9; --si-fill-2: #e9eff5;
  display: grid; grid-template-columns: minmax(400px, 1fr) minmax(0, 1.18fr);
  width: 100%; box-sizing: border-box;   /* auto width shrank it to its columns, centred */
  min-height: 100dvh; background: var(--si-surface); color: var(--si-ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[data-theme=dark] .signin {
  --si-surface: #11161c; --si-ink: #e8eef5; --si-ink-2: #c2ccd7; --si-muted: #aab5c1;
  --si-brand: #3f7aa7;   --si-brand-ink: #8cc6ec;
  --si-border: #262e38;  --si-fill: #1a2129; --si-fill-2: #212a33;
}

/* login.php's body is laid out by auth.css as a centred card on a wash; the
   split screen fills the window instead. */
body.login-page.si-page { display: block; padding: 0; min-height: 100dvh; background: var(--a-surface, #fff); }
/* clock.php's signed-out view, likewise: its wrapper centres a column. */
.signin > .clock-wrap.si-form { max-width: none; margin: 0; }

/* ── the form column ─────────────────────────────────────────────────── */
.si-form { box-sizing: border-box; min-height: 100dvh; min-width: 0;
           padding: 34px clamp(24px, 5.5vw, 84px) 28px;
           display: flex; flex-direction: column;
           animation: si-in .55s cubic-bezier(.2,.8,.2,1) both; }
.si-top { display: flex; align-items: center; }
.si-top .brandlogo img { height: 36px; width: auto; }
/* (display is left to auth.css, which shows the light or the dark copy of the
   logo by theme — setting it here showed both at once) */
.si-mid { width: 100%; max-width: 400px; margin: auto 0; padding: 44px 0 36px; }
.si-eyebrow { display: block; margin: 0 0 12px; font-size: 11.5px; font-weight: 800;
              letter-spacing: .15em; text-transform: uppercase; color: var(--si-brand-ink); }
.signin h1.si-h1 { margin: 0; text-align: left; font-size: clamp(25px, 2.4vw, 30px);
                   font-weight: 800; letter-spacing: -.6px; line-height: 1.15; color: var(--si-ink); }
.signin p.si-sub { margin: 10px 0 26px; text-align: left; font-size: 15px; line-height: 1.55;
                   color: var(--si-muted); max-width: 36ch; }
.si-foot { font-size: 13.5px; color: var(--si-muted); display: flex; align-items: center;
           justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* Inputs: a soft fill rather than a box, the outline arriving on focus. */
.signin input[type=text], .signin input[type=password] {
  height: 46px; border-radius: 12px; border: 1px solid transparent;
  background: var(--si-fill); color: var(--si-ink); box-shadow: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.signin input[type=text]:hover, .signin input[type=password]:hover { background: var(--si-fill-2); }
.signin input[type=text]:focus, .signin input[type=password]:focus {
  outline: none; background: var(--si-surface); border-color: var(--si-brand);
  box-shadow: 0 0 0 4px rgba(63,122,167,.18); }

/* Show / hide password. */
/* The passkey route is the quiet one, as on the card it replaced: offered
   first, but most people sign in with a password, so it does not take the fill. */
.si-form a.btn.primary { background: var(--si-surface); color: var(--si-brand-ink);
  border: 1px solid var(--si-border); box-shadow: none; height: 46px; }
.si-form a.btn.primary:hover { background: var(--si-fill); filter: none; box-shadow: none; }

.si-pw { position: relative; }
.si-pw input { padding-right: 48px !important; }
.signin button.si-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 9px;
  background: transparent; color: var(--si-muted); cursor: pointer; display: grid; place-items: center;
  box-shadow: none; filter: none; }
.signin button.si-eye:hover { background: var(--si-fill-2); color: var(--si-ink-2); }
.signin button.si-eye:focus-visible { outline: 2px solid var(--si-brand); outline-offset: 1px; }
.si-eye svg { width: 19px; height: 19px; }
.si-eye .si-eye-off { display: none; }
.si-eye[aria-pressed=true] .si-eye-on { display: none; }
.si-eye[aria-pressed=true] .si-eye-off { display: block; }

/* The supporting grey text, a size up and — in dark — a step brighter, so it
   reads at a glance instead of sinking into the ground. auth.css sets these
   at 11.5–12px in its own muted tone; the split screen has the room. */
.signin label { font-size: 13px; color: var(--si-muted); }
.signin .orline { font-size: 13px; color: var(--si-muted); }
.signin .theme-switch .theme-opt { color: var(--si-muted); }
.si-staff .cl-login-form p { font-size: 13.5px !important; color: var(--si-muted) !important; }

/* ── the staff page's own pieces ─────────────────────────────────────── */
/* The portal's sign-in card loses its box: on the split screen the column is
   the card, as on the HR team's page. */
.si-staff .si-card-form { background: none; border: 0; box-shadow: none; padding: 0; margin: 0;
                          max-width: none; }
/* The standing warning keeps every word, at the form's width and edge, set
   smaller so it reads as the policy it is rather than a second form. */
.si-staff .signwarn { width: 100%; max-width: 400px; margin: 0 0 28px; box-sizing: border-box;
                      border-radius: 14px; box-shadow: none; }
.si-staff .signwarn > div { padding: 14px 16px !important; }
.si-staff .signwarn h2 { font-size: 12px; margin: 0 0 6px; }
.si-staff .signwarn p { font-size: 12px; line-height: 1.55; margin: 0 0 7px; }
.si-staff .signwarn p.lead { font-size: 12.5px; }
.si-staff .si-mid { padding-bottom: 28px; }
.si-staff .cl-foot { margin-top: auto; text-align: left; padding: 0; }
.si-staff .cl-logout-bar { margin: 0 0 18px; border-radius: 12px; }

/* ── the panel ───────────────────────────────────────────────────────── */
.si-panel { position: sticky; top: 0; height: 100dvh; min-height: 640px; overflow: hidden;
  isolation: isolate; box-sizing: border-box; color: #fff;
  background: linear-gradient(158deg, #4683b2 0%, #2c5f8b 40%, #163655 100%);
  padding: clamp(40px, 7vh, 76px) 0 0 clamp(32px, 4.2vw, 68px);
  display: flex; flex-direction: column; gap: clamp(22px, 4vh, 40px); }
/* the faint grid */
.si-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 85%);
          mask-image: radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 85%); }
.si-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.si-blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .55; }
.si-b1 { width: 440px; height: 440px; background: #8cc6ec; top: -150px; right: -110px;
         animation: si-drift1 19s ease-in-out infinite alternate; }
.si-b2 { width: 380px; height: 380px; background: #5b35a8; bottom: -120px; left: -90px; opacity: .45;
         animation: si-drift2 23s ease-in-out infinite alternate; }
.si-b3 { width: 280px; height: 280px; background: #f29a63; bottom: 16%; right: 10%; opacity: .28;
         animation: si-drift3 17s ease-in-out infinite alternate; }

.si-copy { padding-right: clamp(32px, 4.2vw, 68px); }
.si-head { margin: 0; font-size: clamp(32px, 3.3vw, 46px); font-weight: 800; letter-spacing: -1.2px;
           line-height: 1.07; }
.si-head span { display: block; animation: si-up .7s cubic-bezier(.2,.8,.2,1) both; }
.si-head span:nth-child(2) { animation-delay: .12s; }
.si-head span:nth-child(3) { animation-delay: .24s; }
.si-head u { text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(#ffb38a, #ffb38a) left 100% / 0 3px no-repeat;
  animation: si-underline .7s cubic-bezier(.2,.8,.2,1) .8s forwards; }
.si-tag { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.86);
          max-width: 46ch; animation: si-up .7s cubic-bezier(.2,.8,.2,1) .35s both; }
/* each highlighted word lights in turn */
.si-hl { border-radius: 6px; padding: 1px 4px; margin: 0 -4px; animation: si-hl 8s infinite; }
.si-hl2 { animation-delay: 2s; } .si-hl3 { animation-delay: 4s; } .si-hl4 { animation-delay: 6s; }

/* the browser window */
.si-win { position: relative; flex: 1; min-height: 440px; border-radius: 20px 0 0 0;
  background: rgba(8, 26, 46, .34); border: 1px solid rgba(255,255,255,.15); border-right: 0; border-bottom: 0;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.6);
  animation: si-up .9s cubic-bezier(.2,.8,.2,1) .45s both; overflow: hidden; }
.si-bar { display: flex; gap: 7px; padding: 16px 18px; }
.si-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.28); }
.si-bar i:first-child { background: #ff8a7a; } .si-bar i:nth-child(2) { background: #ffd27a; }
.si-addr { position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: min(380px, 66%); height: 30px; box-sizing: border-box; border-radius: 9px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; gap: 8px; padding: 0 12px; overflow: hidden;
  font: 500 12.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: rgba(255,255,255,.92); }
.si-addr svg { width: 12px; height: 12px; flex: none; opacity: .75; }
.si-url { white-space: nowrap; overflow: hidden; }
.si-url b { font-weight: 500; opacity: .6; }
.si-caret { display: inline-block; width: 1.5px; height: 14px; background: #fff; margin-left: 1px;
            vertical-align: -2px; animation: si-blink 1s steps(1) infinite; }

/* the hub and what circles it */
.si-plane { position: absolute; inset: 52px 0 0 0; display: grid; place-items: center; }
.si-plane > * { grid-area: 1 / 1; }
.si-orbit { position: relative; width: 400px; height: 400px; animation: si-rot 96s linear infinite; }
.si-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.si-lines line { stroke: rgba(255,255,255,.2); stroke-width: 1; }
.si-lines .si-pulse { stroke: #fff; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 7 400; stroke-dashoffset: 7; opacity: 0; animation: si-run 3.3s linear infinite; }
.si-sat { position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translateX(158px) rotate(calc(-1 * var(--a))); }
.si-spin { width: 0; height: 0; animation: si-rot 96s linear infinite reverse; }
.si-card { position: absolute; transform: translate(-50%, -50%); box-sizing: border-box;
  /* sized to its name, not fixed: "Announcements" ran out of a 142px card */
  width: max-content; min-width: 132px; max-width: 178px; padding: 11px 12px 12px; border-radius: 14px; color: #fff;
  background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 16px 34px -18px rgba(0,0,0,.55);
  display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center;
  animation: si-pop .6s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: calc(.7s + var(--i, 0) * .09s); }
.si-ic { grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
         background: rgba(255,255,255,.16); }
.si-ic svg { width: 16px; height: 16px; }
.si-cl { font-size: 12.5px; font-weight: 800; letter-spacing: -.1px; line-height: 1.2; white-space: nowrap; }
.si-cs { font-size: 10.5px; line-height: 1.3; color: rgba(255,255,255,.72); }
.si-hub { position: relative; width: 86px; height: 86px; border-radius: 26px; background: #fff;
  display: grid; place-items: center; z-index: 2;
  box-shadow: 0 0 0 9px rgba(255,255,255,.09), 0 20px 44px -12px rgba(0,0,0,.5);
  animation: si-pop .7s cubic-bezier(.2,.9,.3,1.25) .55s both; }
.si-hub img { width: 64px; height: 64px; border-radius: 16px; display: block; }
.si-ring { width: 112px; height: 112px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4);
           animation: si-ring 3.8s ease-out infinite; opacity: 0; }
.si-ring2 { animation-delay: 1.9s; }

/* the window narrows with the screen; the picture inside keeps its proportions */
@media (max-width: 1360px) { .si-plane { transform: scale(.88); transform-origin: 50% 40%; } }
@media (max-width: 1180px) { .si-plane { transform: scale(.76); } .si-head { letter-spacing: -.9px; } }
@media (max-height: 760px) { .si-plane { transform: scale(.78); } }
@media (max-width: 980px) {
  .signin { grid-template-columns: 1fr; }
  .si-panel { display: none; }
  .si-mid { margin: auto; }
}

/* ── motion ──────────────────────────────────────────────────────────── */
@keyframes si-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes si-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes si-pop { from { opacity: 0; scale: .82; } to { opacity: 1; scale: 1; } }
@keyframes si-rot { to { rotate: 360deg; } }
@keyframes si-underline { to { background-size: 100% 3px; } }
@keyframes si-blink { 50% { opacity: 0; } }
@keyframes si-run { 0% { stroke-dashoffset: 7; opacity: 0; } 12% { opacity: 1; }
                    80% { opacity: 1; } 100% { stroke-dashoffset: -160; opacity: 0; } }
@keyframes si-ring { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(3.1); opacity: 0; } }
@keyframes si-hl { 0%, 3% { background: transparent; box-shadow: none; }
                   7%, 21% { background: rgba(255,255,255,.17); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
                   26%, 100% { background: transparent; box-shadow: none; } }
@keyframes si-drift1 { to { transform: translate(-90px, 70px) scale(1.12); } }
@keyframes si-drift2 { to { transform: translate(110px, -60px) scale(.92); } }
@keyframes si-drift3 { to { transform: translate(-70px, -90px) scale(1.18); } }

/* Someone whose device asks for less motion gets the finished picture, still. */
@media (prefers-reduced-motion: reduce) {
  .signin *, .signin *::before, .signin *::after { animation: none !important; transition: none !important; }
  .si-head u { background-size: 100% 3px; }
  .si-lines .si-pulse, .si-ring, .si-caret { display: none; }
}