/* HiveView Client Portal sign-in, the gate. Dark HiveView brand (gold on near-black).
   No inline styles/scripts: all served from /assets so the global CSP stays strict. */
:root {
  --bg: #0a0c10; --panel: #11141b; --gold: #e8b24a; --ink: #f4f1ea;
  --muted: rgba(244, 241, 234, 0.6); --line: rgba(244, 241, 234, 0.12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased; display: grid; place-items: center; overflow: hidden; }

.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 15% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 60%),
              radial-gradient(55% 45% at 100% 100%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%); }
.bg::after { content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask: radial-gradient(circle at 50% 40%, #000, transparent 75%); mask: radial-gradient(circle at 50% 40%, #000, transparent 75%); }

.shell { position: relative; z-index: 1; width: min(92vw, 420px); padding: 1.5rem; }
.card { position: relative; background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1px solid var(--line); border-radius: 20px; padding: clamp(1.6rem, 5vw, 2.4rem); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); overflow: hidden; }
.card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--gold), transparent); }

.brand { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1.6rem; }
.mark { font-weight: 800; letter-spacing: 0.04em; font-size: 1.15rem; color: var(--ink); }
.mark span { color: var(--gold); }
.tag { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

.card h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; }
.sub { color: var(--muted); font-size: 0.92rem; margin-top: 0.4rem; }
label { display: block; margin-top: 1.3rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); }
input { width: 100%; margin-top: 0.45rem; padding: 0.9rem 1rem; font-size: 16px; font-family: inherit; color: var(--ink); background: rgba(0, 0, 0, 0.25); border: 1.5px solid var(--line); border-radius: 12px; transition: border-color 0.15s, box-shadow 0.15s; }
input::placeholder { color: rgba(244, 241, 234, 0.6); }
input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 26%, transparent); }
input[name=code] { letter-spacing: 0.4em; font-size: 1.25rem; text-align: center; font-weight: 700; }

button[type=submit] { margin-top: 1.5rem; width: 100%; padding: 1rem; font-family: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; color: #16120a; background: var(--gold); border: 0; border-radius: 999px; transition: transform 0.15s var(--ease), filter 0.15s var(--ease); }
button[type=submit]:hover { transform: translateY(-1px); filter: brightness(1.06); }
button[type=submit]:disabled { opacity: 0.6; cursor: default; transform: none; }
.link { display: inline-flex; align-items: center; min-height: 24px; margin-top: 0.9rem; margin-right: 1rem; background: none; border: 0; color: color-mix(in srgb, var(--gold) 85%, var(--ink)); font-weight: 700; cursor: pointer; font-size: 0.85rem; text-decoration: underline; padding: 0.25rem 0.15rem; }

.status { margin-top: 1rem; font-size: 0.88rem; min-height: 1.2em; }
.status.err { color: #ff8f7a; }
.status.ok { color: #7fd9a6; }
[data-email] { color: var(--gold); font-weight: 700; }
.foot { margin-top: 1.4rem; text-align: center; font-size: 0.74rem; color: var(--muted); }
.foot + .foot { margin-top: 0.4rem; }
.foot a { color: color-mix(in srgb, var(--gold) 85%, var(--ink)); text-decoration: underline; }

/* filmic grain (self-hosted svg, so CSP img-src 'self' covers it) */
.grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background: url('/assets/grain.svg'); }

/* cinematic entrance + slow ambient drift on the glow */
@keyframes hvRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hvStep { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hvDrift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -14px, 0); } }
.card { animation: hvRise 0.7s var(--ease) both; }
.bg { animation: hvDrift 22s ease-in-out infinite; }
[data-step]:not([hidden]) { animation: hvStep 0.45s var(--ease) both; }

/* outbound transition: wash the dark gate to near-white so it cross-dissolves into the light client hero */
@keyframes hvLeave { from { opacity: 1; } to { opacity: 0; transform: scale(0.985); } }
body.leaving { background: #faf8f3; transition: background 0.35s var(--ease); }
body.leaving .shell { animation: hvLeave 0.35s var(--ease) both; }
/* keyboard focus rings */
button[type=submit]:focus-visible, .link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card, [data-step]:not([hidden]) { opacity: 1; transform: none; }
}