/* Housing Court Filer — Anonymous account screens (sign in, accept invitation).
   Moved out of Login.razor.css: those rules were scoped to Login.razor, so /invite carried the
   same class names but none of the styling. Loaded by Login.razor and AcceptInvite.razor, and
   every rule is prefixed with .login-page so no signed-in module's styling changes. */

.login-page{
  /* A tick drawn once here so .invite-rules can mask it in a single colour. */
  --hcf-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:40px 20px;
  background:radial-gradient(circle at 50% 0,rgba(228,182,79,.13),transparent 32rem),#f5f7fa;
}
.login-page .login-container{width:min(100%,430px)}
.login-page .login-brand{display:block;width:fit-content;margin:0 auto 24px}
.login-page .login-brand img{display:block;width:220px;max-width:70vw;height:auto}
.login-page .login-card{padding:36px}
.login-page .login-heading{margin-bottom:28px;text-align:center}
.login-page .login-heading h1{margin-bottom:8px}
.login-page .login-heading p{margin:0}
.login-page .login-heading p,
.login-page .login-help,
.login-page .login-security{color:var(--hcf-text-meta)}
.login-page .login-alert{
  display:grid;
  gap:2px;
  margin-bottom:20px;
  padding:12px 14px;
  border:1px solid #efc2c2;
  border-radius:10px;
  color:var(--hcf-text-danger);
  background:#fff6f6;
  font-size:var(--hcf-text-body);
}
.login-page .login-notice{
  display:grid;
  gap:2px;
  margin-bottom:20px;
  padding:12px 14px;
  border:1px solid #bfe0d3;
  border-radius:10px;
  color:var(--hcf-text-success);
  background:#f2fbf7;
  font-size:var(--hcf-text-body);
}
.login-page .login-form{display:grid;gap:20px}
.login-page .login-field{display:grid;gap:7px}
.login-page .login-field input::placeholder{color:var(--hcf-text-meta)}
.login-page .login-field input[autocomplete=one-time-code][inputmode=numeric]{letter-spacing:var(--hcf-tracking-code)}
.login-page .login-submit{
  width:100%;
  margin-top:2px;
  transition:background .15s ease,transform .15s ease;
}
.login-page .login-submit:active{transform:translateY(1px)}
.login-page .login-help{
  margin:24px 0 0;
  padding-top:20px;
  border-top:1px solid var(--hcf-line);
  text-align:center;
  font-size:var(--hcf-text-small);
}
.login-page .login-factor-options{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 16px}
.login-page .login-factor-options a{color:var(--hcf-text-link);font-weight:var(--hcf-weight-bold);text-decoration:none}
.login-page .login-resend-form{margin-top:12px;text-align:center}
.login-page .login-resend-form button{border:0;background:transparent;color:var(--hcf-text-link);font-size:var(--hcf-text-small);font-weight:var(--hcf-weight-bold);cursor:pointer}
.login-page .login-security{margin:18px 0 0;text-align:center;font-size:var(--hcf-text-caption)}

/* Password success leads here before any code is sent. The large, whole-row controls make the
   delivery destination explicit and keep the choice usable with touch, keyboard, and screen readers. */
.login-page.mfa-choice-page .login-card{padding:40px 36px}
.login-page.mfa-choice-page .login-heading{margin-bottom:28px}
.login-page .mfa-method-list{display:grid;gap:12px}
.login-page .mfa-method{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:16px;
  align-items:center;
  width:100%;
  min-height:76px;
  padding:12px 16px;
  text-align:left;
}
.login-page .mfa-method-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:8px;color:var(--hcf-text-meta);background:var(--hcf-ivory)}
.login-page .mfa-method-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.login-page .mfa-method-copy{display:grid;gap:4px}
.login-page .mfa-back{width:100%;margin-top:20px}

/* Accept invitation. The card carries more context than sign-in does — whoever opens the link
   has to recognise the invitation as theirs before choosing a password. */
.login-page .invite-badge{
  display:flex;
  align-items:center;
  gap:7px;
  width:fit-content;
  margin:0 auto 18px;
  padding:5px 13px 5px 10px;
  border:1px solid #ecd6a2;
  border-radius:999px;
  color:var(--hcf-text-warning);
  background:#fff8e8;
  font-size:var(--hcf-text-caption);
  font-weight:var(--hcf-weight-label);
  letter-spacing:var(--hcf-tracking-caps);
  text-transform:uppercase;
}
.login-page .invite-badge svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.login-page .invite-summary{
  display:grid;
  gap:1px;
  margin:0 0 24px;
  border:1px solid var(--hcf-line);
  border-radius:12px;
  background:var(--hcf-line);
  overflow:hidden;
}
.login-page .invite-summary>div{
  display:grid;
  grid-template-columns:minmax(0,7rem) minmax(0,1fr);
  gap:12px;
  align-items:baseline;
  padding:11px 14px;
  background:#fbfcfe;
}
.login-page .invite-summary dt{color:var(--hcf-text-meta);font-size:var(--hcf-text-column)}
.login-page .invite-summary dd{margin:0;color:var(--hcf-text);font-size:var(--hcf-text-table);font-weight:var(--hcf-weight-bold);overflow-wrap:anywhere}

.login-page .invite-password{position:relative;display:grid}
.login-page .invite-password input{padding-right:74px}
.login-page .invite-reveal{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  min-height:34px;
  padding:0 10px;
  border:0;
  border-radius:7px;
  color:var(--hcf-text-meta);
  background:transparent;
  font-size:var(--hcf-text-column);
  font-weight:var(--hcf-weight-label);
}
.login-page .invite-reveal:hover{background:#eef2f8}

.login-page .invite-rules{display:grid;gap:7px;margin:-6px 0 0;padding:0;list-style:none}
.login-page .invite-rules li{
  display:grid;
  grid-template-columns:16px minmax(0,1fr);
  gap:8px;
  align-items:center;
  color:var(--hcf-text-meta);
  font-size:var(--hcf-text-column);
}
.login-page .invite-rules li::before{
  content:"";
  width:12px;
  height:12px;
  margin-left:2px;
  border:1.5px solid #c3cddb;
  border-radius:50%;
}
.login-page .invite-rules li.is-met{color:var(--hcf-text-success)}
.login-page .invite-rules li.is-met::before{
  width:16px;
  height:16px;
  margin-left:0;
  border:0;
  border-radius:0;
  background:#10634a;
  -webkit-mask:var(--hcf-tick) center/12px 12px no-repeat;
  mask:var(--hcf-tick) center/12px 12px no-repeat;
}

.login-page .invite-expired{display:grid;justify-items:center;text-align:center}
.login-page .invite-expired-icon{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  margin-bottom:18px;
  border-radius:50%;
  color:var(--hcf-text-danger);
  background:#fdf1f1;
}
.login-page .invite-expired-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-page .invite-expired .login-heading{margin-bottom:22px}
.login-page .invite-expired .login-submit{margin-top:0}

@media (max-width:520px){
  .login-page{place-items:start center;padding:28px 14px}
  .login-page .login-brand{margin-bottom:18px}
  .login-page .login-card{padding:28px 22px}
  .login-page.mfa-choice-page .login-card{padding:30px 20px}
  .login-page .mfa-method{gap:12px;padding:12px}
  .login-page .invite-summary>div{grid-template-columns:minmax(0,1fr);gap:2px}
}