/* Sign-in family (/login and /login/forgot-pin), 2026-10-31.
   One home for the card both pages share. The parts are the glass kit's
   (ng-card, ng-title, ng-eyebrow, ng-field, ng-input, ng-primary, ng-check,
   ng-text-action); this file only places them and keeps every target at 44px
   on any device, because the same card is the crew's door on the iPad. */
.river-login-body{display:flex;align-items:center;justify-content:center;
  padding:var(--s-6) var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom, 0px))}
.river-login-theme{position:fixed;top:calc(var(--s-4) + env(safe-area-inset-top, 0px));right:var(--s-4)}
.river-login-card{width:100%;max-width:400px;padding:var(--s-6);box-shadow:var(--ng-shadow-raised)}
.river-login-head{display:grid;gap:var(--s-1);margin:0 0 var(--s-4)}
.river-login-mark{display:block;width:var(--s-8);height:var(--s-8);margin:0 0 var(--s-3);border-radius:var(--r-std);object-fit:cover}
.river-login-help{margin:0;color:var(--ng-ink2);font-size:var(--t-body);line-height:1.45}
.river-login-head .river-login-help{margin-top:var(--s-1)}
.river-login-form,#login-form{display:grid;gap:var(--s-4)}
.river-login-field .ng-input{font-size:max(16px, var(--ng-t-input))}
.river-login-field .river-login-input-err{border-color:var(--ng-danger);box-shadow:inset 0 0 0 1px var(--ng-danger)}
.river-login-field__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
/* "Forgot PIN?" sits on the PIN label's row: a full 44px link, never a 17px line of text. */
.river-login-field__row .ng-text-action{min-height:44px;margin-block:calc((44px - 1.4em) / -2);padding-inline:var(--s-2);margin-inline-end:calc(var(--s-2) * -1)}
.river-login-check{min-height:44px;width:100%}
.river-login-btn{min-height:48px;width:100%}
.river-login-err{display:flex;gap:var(--s-2);align-items:flex-start;margin:0;padding:var(--s-3);border-radius:var(--r-std);
  background:var(--ng-danger-bg);color:var(--ng-danger);font-size:var(--t-body);font-weight:600;line-height:1.4}
.river-login-alt,.river-login-back{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;
  margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--ng-hairline);border-radius:0;
  color:var(--ng-ink2);font-size:var(--ng-t-control);font-weight:600;text-decoration:none}
@media (hover:hover){.river-login-alt:hover,.river-login-back:hover{color:var(--ng-ink1);text-decoration:underline;text-underline-offset:3px}}
.river-login-alt:focus-visible,.river-login-back:focus-visible{outline:2px solid var(--ng-focus);outline-offset:2px;border-radius:var(--r-std)}

/* Name picker (static/login-name-picker.js): every option is a 44px row, the list
   never runs past the screen (the script sets max-height from the space left). */
.river-name-wrap{position:relative}
.river-name-wrap.river-name-selected input#name-input{padding-right:calc(var(--s-8) * 2 + var(--s-3))}
.river-name-change{position:absolute;right:0;top:50%;transform:translateY(-50%);min-height:44px}
.river-name-list{position:absolute;left:0;right:0;z-index:40;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s-1);background:var(--ng-card);border:1px solid var(--ng-hairline-strong);border-radius:var(--r-std);
  box-shadow:var(--ng-shadow-raised)}
.river-name-list-below{top:100%;margin-top:var(--s-1)}
.river-name-list-above{bottom:100%;margin-bottom:var(--s-1)}
.river-name-opt{display:flex;align-items:center;min-height:44px;padding:0 var(--s-3);border-radius:var(--r-std);
  font-size:var(--t-body);font-weight:500;color:var(--ng-ink1);cursor:pointer}
.river-name-opt-active,.river-name-opt:hover{background:var(--ng-soft)}
.river-name-opt-active{box-shadow:inset 0 0 0 2px var(--ng-focus)}
.river-name-empty{padding:var(--s-3);font-size:var(--t-body);color:var(--ng-ink2)}