/* ==========================================================================
   Bryder Group, the staff sign-in at /staff/ (22 Oct 2026).
   Only /staff/index.html loads this, after calm.css and ribbon-auth.css, so
   the client sign-in at /portal/ and every other page are untouched. Every
   rule here is under body.staff-signin.

   One card in the middle of the page on the misty Southland photo from the
   home page (assets/img/hero/approach.jpg) under a deep green wash: the form
   on a white half, the quick links on a green half with a big faint
   padlock. The two halves stack on a phone, form first. Light only, like
   the rest of bryder.co.nz (calm.css has no dark theme).

   auth.js reads the markup (data-auth-form, data-auth-keep, data-sso and so
   on), so this file only changes how it looks. The states the script sets
   stay obvious: [hidden], data-state on the status line, aria-busy and
   disabled on the buttons.
   ========================================================================== */

/* The page under the photo is the deep green too, so an overscroll on a
   phone never flashes the paper colour from calm.css. */
html:has(body.staff-signin) { background: #12201C; }
body.staff-signin {
  --ss-deep: #12201C;
  --ss-green: #0D5A4E;
  --ss-mint: #8BE6D7;
  --ss-field: rgba(18, 32, 28, 0.24);
  --ss-icon-bg: #EEF3F1;
  min-height: 100vh;
  background: transparent;
  color: var(--ink);
}

/* The photo sits on its own fixed layer, so it stays put while a short
   phone screen scrolls, without background-attachment: fixed (which phones
   ignore or repaint badly). The wash keeps the white card the brightest
   thing on the page and the links under it readable. The page itself sits
   on a layer above it (.ss, z-index 1). */
body.staff-signin::before {
  content: "";
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(90% 70% at 12% 8%, rgba(22, 185, 165, 0.30), rgba(22, 185, 165, 0) 60%),
    linear-gradient(160deg, rgba(8, 124, 112, 0.50) 0%, rgba(13, 90, 78, 0.62) 38%, rgba(18, 32, 28, 0.86) 100%),
    url("/assets/img/hero/approach.jpg") center 40% / cover no-repeat,
    var(--ss-deep);
}

/* ---- the page: the card, centred, and two small links under it ----------- */
.staff-signin .ss {
  position: relative; z-index: 1;
  display: grid; justify-items: center; align-content: center; gap: 14px;
  min-height: 100vh; min-height: 100svh;
  padding: clamp(16px, 3vw, 36px) 16px;
}

.staff-signin .ss-card {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  width: min(1000px, 100%);
  border-radius: 22px; overflow: hidden;
  background: var(--sheet);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 40px 80px -30px rgba(0, 0, 0, 0.55);
}

/* ---- the form half ---------------------------------------------------------- */
.staff-signin .ss-main { min-width: 0; padding: clamp(28px, 3.6vw, 48px); }
.staff-signin .ss-brand { display: inline-block; border-radius: 6px; }
.staff-signin .ss-brand img { height: 38px; width: auto; }

.staff-signin .ss-title {
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: clamp(30px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -0.026em; font-weight: 680;
}
.staff-signin .ss-lede { margin-top: 8px; font-size: 17px; line-height: 1.5; color: var(--soft); }

.staff-signin .ss-form { gap: 16px; margin-top: 22px; }
.staff-signin .ss-field { gap: 8px; }
.staff-signin .ss-field label { font-size: 14px; font-weight: 620; color: var(--ink); }

/* A field with a small grey block holding its icon, as one rounded box. The
   ring goes on the box when the input inside has focus. */
.staff-signin .ss-input {
  position: relative; display: flex; align-items: stretch;
  border: 1px solid var(--ss-field); border-radius: 12px; overflow: hidden;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.staff-signin .ss-input:hover { border-color: rgba(18, 32, 28, 0.45); }
.staff-signin .ss-input:focus-within { border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(22, 185, 165, 0.28); }
.staff-signin .ss-input__icon {
  flex: none; display: grid; place-items: center; width: 50px;
  background: var(--ss-icon-bg); color: var(--soft);
  border-right: 1px solid rgba(18, 32, 28, 0.1);
}
.staff-signin .ss-input:focus-within .ss-input__icon { color: var(--ink-3); }
.staff-signin .ss-input input {
  flex: 1; min-width: 0; min-height: 52px; padding: 12px 14px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font-size: 16px; color: var(--ink);
}
.staff-signin .ss-input input:hover, .staff-signin .ss-input input:focus { border: 0; background: transparent; outline: none; }
.staff-signin .ss-input input::placeholder { color: #6B817C; }
.staff-signin .field--password .ss-input input { padding-right: 78px; }
.staff-signin .ss-input .pw-toggle {
  top: 6px; bottom: 6px; right: 6px; height: auto; min-width: 62px;
  border-radius: 8px; font-size: 14px; font-weight: 640; color: var(--ink-2);
}
.staff-signin .ss-input .pw-toggle:hover { background: var(--ss-icon-bg); }
.staff-signin .ss-input .pw-toggle:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 0; }

/* Keep me signed in and Forgot password? on one row, each an easy target. */
.staff-signin .ss-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: -4px; }
.staff-signin .ss-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--ink); cursor: pointer; }
.staff-signin .ss-check input { flex: none; width: 19px; height: 19px; margin: 0; accent-color: var(--ink-3); cursor: pointer; }
.staff-signin .ss-check input:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 3px; }
.staff-signin .ss-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--ink-3);
  text-decoration: underline; text-decoration-color: rgba(8, 124, 112, 0.4); text-underline-offset: 3px;
}
.staff-signin .ss-link:hover { color: var(--ink-2); text-decoration-color: currentColor; }

.staff-signin .ss-submit { width: 100%; min-height: 54px; margin-top: 0; border-radius: 12px; font-size: 17px; }

/* Continue with Microsoft (and, until that is on, Open Microsoft 365): a
   white button with a firm edge, the same size as Sign in. */
.staff-signin .ss-sso, .staff-signin .ss-fallback { display: grid; gap: 16px; }
.staff-signin .ss-sso[hidden], .staff-signin .ss-fallback[hidden] { display: none; }
.staff-signin .ss-ms {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 54px; padding: 12px 18px;
  border: 1.5px solid rgba(18, 32, 28, 0.3); border-radius: 12px;
  background: #fff; color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 620; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.staff-signin .ss-ms svg { flex: none; }
.staff-signin .ss-ms:hover { border-color: var(--ink); background: #F6F8F7; }
.staff-signin .ss-ms[aria-busy="true"] { cursor: progress; opacity: 0.75; }
.staff-signin .ss-or {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; letter-spacing: 0.04em; color: var(--soft);
}
.staff-signin .ss-or::before, .staff-signin .ss-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.staff-signin .ss-meta {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-2);
  font-size: 14px; line-height: 1.55; color: var(--soft);
}
.staff-signin .ss-meta a { color: var(--ink); text-underline-offset: 3px; }

/* ---- the green half: quick links over a big faint padlock ------------------ */
.staff-signin .ss-side {
  position: relative; overflow: hidden; min-width: 0;
  padding: clamp(28px, 3.6vw, 44px);
  color: rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(22, 185, 165, 0.34), rgba(22, 185, 165, 0) 62%),
    linear-gradient(165deg, var(--ss-green) 0%, #0E4038 48%, var(--ss-deep) 100%);
}
.staff-signin .ss-lock {
  position: absolute; right: -10%; bottom: -8%; width: 78%; max-width: 380px; height: auto;
  color: rgba(255, 255, 255, 0.08); pointer-events: none;
}
.staff-signin .ss-side__in { position: relative; display: grid; align-content: start; }
.staff-signin .ss-kicker { font-size: 12px; font-weight: 640; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ss-mint); }
.staff-signin .ss-side__title { margin-top: 10px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.02em; color: #fff; }
.staff-signin .ss-side__text { margin-top: 8px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.76); }

.staff-signin .ss-links { display: grid; gap: 8px; margin-top: 22px; }
.staff-signin .ss-tool {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px;
  background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}
.staff-signin .ss-tool:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.28); }
.staff-signin .ss-tool img { flex: none; width: 36px; height: 36px; border-radius: 9px; object-fit: cover; background: #fff; }
.staff-signin .ss-tool__name { display: block; font-size: 15px; line-height: 1.25; font-weight: 620; }
.staff-signin .ss-tool__meta { display: block; margin-top: 1px; font-size: 13px; color: rgba(255, 255, 255, 0.68); }
.staff-signin .ss-help {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px;
  font-size: 15px; font-weight: 620; color: #fff; text-underline-offset: 4px;
}
.staff-signin .ss-side a:focus-visible { outline: 2px solid var(--ss-mint); outline-offset: 2px; }

/* ---- under the card --------------------------------------------------------- */
.staff-signin .ss-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.staff-signin .ss-foot a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 10px;
  font-size: 15px; font-weight: 560; color: rgba(255, 255, 255, 0.88); text-decoration: none;
}
.staff-signin .ss-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.staff-signin .ss-foot a:focus-visible { outline: 2px solid var(--ss-mint); outline-offset: 2px; }

/* ---- tablets and phones: the halves stack, form first ------------------------ */
@media (max-width: 820px) {
  .staff-signin .ss { align-content: start; }
  .staff-signin .ss-card { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .staff-signin .ss-lock { width: 52%; max-width: 280px; right: -12%; bottom: -6%; }
}
@media (max-width: 479px) {
  .staff-signin .ss { padding: 16px 16px 24px; gap: 12px; }
  .staff-signin .ss-card { border-radius: 18px; }
  .staff-signin .ss-main { padding: 24px 20px 22px; }
  .staff-signin .ss-side { padding: 24px 20px; }
  .staff-signin .ss-brand img { height: 32px; }
  .staff-signin .ss-title { margin-top: 20px; font-size: 30px; }
  .staff-signin .ss-lede { font-size: 16px; }
  .staff-signin .ss-form { margin-top: 20px; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .staff-signin .ss-input, .staff-signin .ss-ms, .staff-signin .ss-tool { transition: none; }
}