/* The sign-in pages, in the Nexhelm brand: warm paper ground, deep ink, forest green for actions, gold for the mark. */
:root {
  --ground: #fbfaf9; --surface: #ffffff; --surface-2: #f7f4ee; --hover: #f5f1ea; --side: #f2eee6;
  --ink: #14110c; --muted: #5f5749; --rule: #e6e0d5; --line-strong: #d6cebf; --primary: #221f1a; --primary-hover: #14110c;
  --accent: #2f4a33; --accent-tint: #e3ece1; --accent-ink: #2f4a33; --gold: #d9a520;
  --ok-bg: #e2eedf; --bad-bg: #f6e0da; --info-bg: #e8ecef;
  --font: Inter, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --r: 10px; --rc: 9px;
  --lift: 0 -1px 0 0 rgba(0,0,0,.22) inset, 0 2px 6px 0 rgba(0,0,0,.18);
  color-scheme: light;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; caret-color: var(--accent) }
a { color: var(--accent-ink); text-underline-offset: 3px }
button, input { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px }
h1 { margin: 0; text-wrap: balance; font-weight: 650 }
p { margin: 0 }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--rc); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .15s ease, box-shadow .15s ease }
.btn:hover { background: var(--hover) }
.btn:active { background: var(--side) }
.btn.pri { background: var(--primary); color: #fff; box-shadow: var(--lift); font-weight: 600 }
.btn.pri:hover { background: var(--primary-hover) }
.btn[disabled] { opacity: .5; cursor: not-allowed }
.btn.wide { width: 100%; height: 44px; font-size: 15px; border-radius: 11px }
@media (pointer: coarse) { .btn { min-height: 44px } }

.field { display: grid; gap: 5px; min-width: 0 }
.field label { font-size: 13.5px; font-weight: 500 }
.field input { width: 100%; min-height: 44px; border: 1px solid var(--rule); border-radius: var(--rc); background: var(--surface-2); padding: 6px 10px; font-size: 14.5px }
.field input:focus { background: var(--surface); border-color: var(--accent); outline: 2px solid var(--accent-tint); outline-offset: 0 }

.callout { background: var(--info-bg); color: var(--ink); border-radius: var(--r); padding: 12px 14px; font-size: 14px }
.callout.bad { background: var(--bad-bg) } .callout.ok { background: var(--ok-bg) }

.nxbrand { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; font-size: 19px; letter-spacing: -0.01em; color: var(--ink) }
.nxmark { width: 23px; height: 18px; background: var(--gold); -webkit-mask: url("/assets/nexhelm-mark.png") center / contain no-repeat; mask: url("/assets/nexhelm-mark.png") center / contain no-repeat; flex: none }
.nxprod { font-size: 12.5px; font-weight: 600; color: var(--accent-ink); background: var(--accent-tint); border-radius: 999px; padding: 2px 9px; letter-spacing: 0 }

.signin { min-height: 100vh; display: grid; place-items: center; padding: 32px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px));
  background: radial-gradient(1100px 520px at 50% -8%, #f3ecdc 0%, rgba(243, 236, 220, 0) 70%), var(--ground) }
.signin-wrap { width: min(420px, 100%); display: grid; gap: 22px; justify-items: center }
.signin-card { width: 100%; background: var(--surface); border-radius: 14px; padding: 30px 28px; display: grid; gap: 16px;
  box-shadow: 0 0 0 1px rgba(60, 50, 34, .07), 0 18px 40px -18px rgba(60, 50, 34, .28) }
.signin-card h1 { font-size: 26px; line-height: 1.25; letter-spacing: -0.025em; margin-bottom: 4px }
.signin-card .meta { color: var(--muted); font-size: 14.5px }
.signin-card .links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px }
.signin-card .links a { color: var(--accent-ink); font-weight: 500 }
.signin-foot { color: var(--muted); font-size: 13px; text-align: center }