/* signin.css — the Datonet sign-in page. One file, vendored UNCHANGED into every internal tool.
   Same surface as https://sso.datonet.co.za/ (the portal's standalone panel), with a small closed
   disclosure for the break-glass password form. Markup and states: ui/signin.html.
   Assets the app serves next to itself: /brand/datonet-grey.png, /brand/spacegrotesk-latin.woff2,
   /brand/spacegrotesk-latin-ext.woff2 (copy from ui/img and ui/fonts).
   Scoped under .sso-signin and carries its own tokens, so it cannot fight the host app's CSS. */
@font-face { font-family: 'Space Grotesk'; font-weight: 300 700; font-display: swap;
  src: url('/brand/spacegrotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-weight: 300 700; font-display: swap;
  src: url('/brand/spacegrotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

.sso-signin {
  --void: #0B0E14; --surface: #141925; --raised: #1E2433; --rule: #2A3142; --rule-soft: #1F2534;
  --ink: #E6EAF2; --ink-2: #B4BCCB; --muted: #929292; --faint: #5E6677;
  --accent: #00FFFF; --accent-ink: #06181A; --focus: var(--accent);
  --bad: #FF4D6D; --bad-text: #FF8DA1; --bad-tint: #3E1220;
  --font-ui: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs: 11.5px; --text-sm: 13px; --text-base: 14.5px; --text-lg: 18px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 6px; --radius-lg: 14px; --control-h: 40px; --tracking-label: .08em; --dur-fast: 120ms;

  min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  margin: 0; background: var(--void); color: var(--ink); font-family: var(--font-ui);
  font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; color-scheme: dark;
}
.sso-signin *, .sso-signin *::before, .sso-signin *::after { box-sizing: border-box; }
/* the host page behind the panel: no white strip, no flash, whatever the app's own reset does */
html:has(> body > .sso-signin), html:has(> body > #root > .sso-signin), body:has(> .sso-signin), body:has(> #root > .sso-signin) { margin: 0; background: #0B0E14; }
.sso-signin .center { display: grid; place-items: center; padding: var(--space-8) var(--space-4); }
.sso-signin .panel { width: min(100%, 400px); background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); display: grid; gap: var(--space-4); }
.sso-signin .panel.bad { border-left: 3px solid var(--bad); }

/* wordmark: raster artwork through a mask, follows currentColor (the Neuropol font has a kerning bug) */
.sso-signin .wordmark { display: inline-block; aspect-ratio: 866 / 106; width: 168px; background: currentColor; color: var(--muted);
  -webkit-mask: url('/brand/datonet-grey.png') center / contain no-repeat; mask: url('/brand/datonet-grey.png') center / contain no-repeat; }

.sso-signin h1 { margin: 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.2; color: var(--ink); }
.sso-signin p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.sso-signin .fine { color: var(--muted); font-size: var(--text-xs); }

/* every state = colour PLUS a glyph or a word */
.sso-signin .notice { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3);
  border-radius: var(--radius-sm); border: 1px solid var(--rule); background: var(--raised); font-size: var(--text-sm); color: var(--ink); }
.sso-signin .notice.bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bad-tint); color: var(--bad-text); }
.sso-signin .glyph { font-weight: 700; flex: none; }

.sso-signin .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%;
  height: var(--control-h); padding-inline: var(--space-4); border-radius: var(--radius-sm); font: inherit; font-weight: 600;
  font-size: var(--text-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.sso-signin .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.sso-signin .btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, white); }
.sso-signin .btn-ghost { background: var(--raised); color: var(--ink); border-color: var(--rule); }
.sso-signin .btn-ghost:hover { border-color: var(--muted); }
.sso-signin .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sso-signin .btn:disabled { opacity: .55; cursor: not-allowed; }

/* break-glass: a small disclosure, closed by default, under a hairline */
.sso-signin .breakglass { border-top: 1px solid var(--rule-soft); padding-top: var(--space-3); }
.sso-signin .breakglass summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.sso-signin .breakglass summary::-webkit-details-marker { display: none; }
.sso-signin .breakglass summary::after { content: '▾'; margin-left: auto; color: var(--faint); transition: transform var(--dur-fast); }
.sso-signin .breakglass[open] summary::after { transform: rotate(180deg); }
.sso-signin .breakglass summary:hover { color: var(--ink-2); }
.sso-signin .breakglass summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.sso-signin .breakglass form { display: grid; gap: var(--space-3); padding-top: var(--space-3); }
.sso-signin .breakglass .fine { margin-top: calc(-1 * var(--space-1)); }

.sso-signin .field { display: grid; gap: var(--space-1); }
.sso-signin .field label { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.sso-signin .field input { width: 100%; height: var(--control-h); padding-inline: var(--space-3); background: var(--raised); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius-sm); font: inherit; outline: 2px solid transparent; outline-offset: 1px;
  transition: border-color var(--dur-fast); }
.sso-signin .field input::placeholder { color: var(--faint); }
.sso-signin .field input:hover { border-color: var(--muted); }
.sso-signin .field input:focus { border-color: var(--accent); outline-color: var(--focus); }

.sso-signin footer { padding: var(--space-4); text-align: center; font-size: var(--text-xs); color: var(--faint); }
.sso-signin footer a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .sso-signin *, .sso-signin *::after { transition: none !important; } }