/* GRO sign-in ("Today" look). Logo, "GRO" and the form only. Light only: no theme toggle before sign-in.
   Every colour, size and font comes from /css/tokens.css. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh); color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; cursor: default; }
body::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 280px; background: var(--navy); z-index: -1; }
button { cursor: pointer; font: inherit; }
.shell { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: var(--s7) var(--s4); }
.panel { width: 100%; max-width: 460px; background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--shadow-sheet); }
.word { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s5); font-family: var(--font-head); font-size: var(--fs-q); font-weight: 800; color: var(--navy); letter-spacing: .5px; }
.word .mark { width: 64px; height: 64px; border-radius: var(--r-md); background: var(--white); border: var(--border) solid var(--line); display: grid; place-items: center; overflow: hidden; }
.word .mark img { width: 58px; height: 58px; display: block; }
h2 { margin: 0 0 var(--s4); font-family: var(--font-head); font-size: var(--fs-h2); line-height: var(--lh-head); font-weight: 700; color: var(--ink); }
.field { display: block; margin: 0 0 var(--s4); }
.field > span { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s2); font-weight: 700; }
.field input { width: 100%; min-height: var(--input-h); padding: 0 var(--s4); font: inherit; font-size: var(--fs-lead); color: var(--ink); background: var(--surface); border: var(--border-2) solid var(--line-strong); border-radius: var(--r-md); cursor: text; }
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--surface-2); }
.field input[aria-invalid="true"] { border-color: var(--late-line); }
.caps { display: block; margin-top: var(--s2); font-size: var(--fs-min); color: var(--late); font-weight: 700; }
.go { position: relative; width: 100%; min-height: var(--tap-done); margin-top: var(--s2); padding: 0 var(--s4); font-family: var(--font-head); font-size: var(--fs-lead); font-weight: 700; color: var(--on-blue); background: var(--blue); border: 0; border-radius: var(--r-md); }
.go:hover:not(:disabled) { background: var(--blue-hover); }
.go:focus-visible { outline: none; box-shadow: var(--focus); }
.go:disabled { opacity: .5; cursor: not-allowed; }
.go.busy span { visibility: hidden; }
.go.busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid var(--on-navy-line); border-top-color: var(--white); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.linkish { min-height: var(--tap); padding: 0 var(--s2); font-size: var(--fs-min); font-weight: 700; color: var(--blue); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.linkish:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.field > span .linkish { min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s3); margin: calc(var(--s3) * -1) 0; font-size: var(--fs-min); }
.under { display: block; margin: var(--s3) auto 0; }
.alert { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); font-size: var(--fs-min); font-weight: 700; color: var(--late); background: var(--late-bg); border-radius: var(--r-md); }
.note { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); font-size: var(--fs-min); color: var(--ink); background: var(--surface-2); border-radius: var(--r-md); }
.otp { display: flex; gap: var(--s2); margin: 0 0 var(--s4); }
.otp input { width: 48px; height: var(--input-h); text-align: center; font-size: var(--fs-h2); font-family: var(--font-head); color: var(--ink); border: var(--border-2) solid var(--line-strong); border-radius: var(--r-sm); cursor: text; min-width: 0; flex: 1; }
.otp input:nth-child(4) { margin-left: var(--s2); }
.otp input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--surface-2); }
.otp.bad input { border-color: var(--late-line); }
.rules { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1) var(--s3); font-size: var(--fs-min); color: var(--ink-2); }
.rules li::before { content: '\25CB'; margin-right: var(--s2); }
.rules li.ok { color: var(--ok); }
.rules li.ok::before { content: '\2713'; }
.qr-wrap { display: flex; gap: var(--s4); align-items: flex-start; margin: 0 0 var(--s4); flex-wrap: wrap; }
.qr { width: 160px; height: 160px; flex: none; }
.qr img, .qr canvas { width: 160px !important; height: 160px !important; }
.key { font-size: var(--fs-min); color: var(--ink-2); min-width: 0; flex: 1; }
.key span { display: block; margin-bottom: var(--s1); font-weight: 700; }
.key code { display: block; margin-bottom: var(--s2); font-size: var(--fs-min); color: var(--ink); word-break: break-all; }
@media (prefers-reduced-motion: reduce) { .go.busy::after { animation-duration: 2s; } }
@media (max-width: 560px) { .shell { padding: var(--s5) var(--s3); } .panel { padding: var(--s5) var(--s4); } .rules { grid-template-columns: 1fr; } }