/* signin.css — the sign-in page.

   A SIGN-IN PAGE IS NOT A LANDING PAGE. Everybody who arrives here has already decided; the job is
   to get them through the door and out of the way. So: no marketing header, no nav, no footer
   links, no hero. One small card, centred, and the two fields that matter.

   Modelled on the density and restraint of Google's sign-in — a narrow card, a lot of white space,
   quiet type, one primary action bottom-right — in BlackHills.biz's own colours. Borrowing the
   LAYOUT idiom, never the branding.

   EXTERNAL, like everything else: the CSP is style-src 'self'.

   ============================================================================
   DO NOT VERTICALLY CENTRE THIS PAGE. Randy has asked for it small and high up
   FIVE OR SIX TIMES and it keeps coming back — 2026-09-08: "that damn HUGE
   HUGE login screen… childish, not professional."

   The card was never the problem. At 448px with 22px type it is already modest,
   which is why every past fix shrank a number, changed nothing anyone could
   feel, and got reverted. What made it feel enormous was
   `justify-content: center` on a 100vh body: on a desktop monitor that floats a
   small box in the middle of an acre of empty page, and the eye reads the PAGE,
   not the card. Centring is also what every rebuild reaches for, because it is
   the Google idiom — and Google gets away with it in a browser window that is
   mostly chrome. Ours is a full screen.

   So the card now sits near the TOP. If a future pass "tidies" this back to
   centred, it will be the seventh time, and it will be wrong again.
   ============================================================================ */

.si-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* NOT center. See the banner above. */
  justify-content: flex-start;
  /* High, but not jammed against the edge. A fixed value rather than a vh unit:
     the distance from the top of a screen that reads as "near the top" is the
     same on a laptop and a 32-inch monitor, and a percentage makes it grow with
     exactly the screens where this went wrong. */
  padding: 56px 16px 24px;
  background: #f4f8f2;
  color: #243d24;
  font: 400 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.si {
  width: 100%;
  /* 380, down from 448. Two short fields do not need 28 characters of width. */
  max-width: 380px;
  background: #fff;
  border: 1px solid #ccd8c8;
  border-radius: 8px;
  /* Was 40/40/32. The padding was doing as much of the "huge" as the width. */
  padding: 24px 26px 20px;
  box-shadow: 0 2px 8px rgba(0,40,0,0.07);
}

/* ---- the top of the card ---- */

.si__brand { display: block; text-align: center; margin-bottom: 12px; }
.si__brand img { height: 24px; width: auto; }

.si__h {
  margin: 0;
  text-align: center;
  /* Lighter than the rest of the app's headings on purpose. A sign-in page should feel calm, and
     800-weight at 26px reads as a sales pitch. 18px, down from 22: this is a label on a door, not
     a headline. */
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #243d24;
}
.si__s {
  margin: 3px 0 18px;
  text-align: center;
  font-size: 13.5px;
  color: #4a6a46;
}

/* Sign-UP has six fields rather than two, so it gets a little more width and pairs them up. Same
   card, same restraint — a second stylesheet for the page next door is how two pages that should
   look identical stop looking identical. */
.si--wide { max-width: 460px; }
.si__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.si__grid .si__f--full { grid-column: 1 / -1; }
@media (max-width: 520px) {
  .si__grid { grid-template-columns: 1fr; }
}

/* ---- fields ---- */

.si__f { margin-bottom: 11px; }
.si__l {
  display: block;
  margin-bottom: 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4a6a46;
}
/* "— optional", "— 8+ characters". Part of the label, and deliberately quieter than it. */
.si__l em { font-style: normal; font-weight: 400; color: #7a9876; }
.si__i {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 15px;
  color: #243d24;
  background: #fff;
  border: 1px solid #ccd8c8;
  border-radius: 6px;
  /* 9px, not 12. Still a comfortable target — the mobile block below keeps 46px controls where
     a finger is doing the work. */
  padding: 9px 11px;
  outline: none;
}
.si__i:hover  { border-color: #a4bca0; }
.si__i:focus  { border-color: #2f8a1f; box-shadow: 0 0 0 3px rgba(47,138,31,.15); }

.si__forgot { margin: -4px 0 0; font-size: 13px; }
.si__forgot a { color: #2f8a1f; font-weight: 600; text-decoration: none; }
.si__forgot a:hover { text-decoration: underline; }

/* ---- the one row of actions ----
   Secondary on the left, primary on the right — the shape people already know from every sign-in
   page they use. */

.si__act {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
}
/* Some of these rows have only the primary action — a page with nothing to say on the left. An
   empty <span> holds the space so the button stays right-aligned rather than jumping to the left
   on one page out of five. */
.si__act > span:empty { flex: 1 1 auto; }
/* The resend form IS the row on verify-sent, so it must not add a second box around it. */
.si form > .si__act { margin-top: 16px; }
.si__alt { font-size: 13.5px; font-weight: 600; color: #2f8a1f; text-decoration: none; }
.si__alt:hover { text-decoration: underline; }

/* Used on a <button> AND on an <a> — the "Send me a new one" / "Back to sign in" pages have no form
   to submit, and a button that is really a link should still look like the primary action. So it
   carries everything an anchor needs to sit correctly: inline-flex to centre its own text, and no
   underline. */
.si__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: #2f8a1f;
  color: #fff;
  font: 700 14.5px/1 inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease;
}
.si__go:hover { background: #226815; color: #fff; text-decoration: none; }
.si__go:focus-visible { outline: 2px solid #243d24; outline-offset: 2px; }

/* ---- messages ---- */

.si__msg {
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.si__msg--err { background: #fbeeec; border-color: #e6b8b0; color: #8a3b32; }
.si__msg--ok  { background: #f0f7ec; border-color: #a4bca0; color: #174a0e; }

/* What happens after the button. Sits between the fields and the action, because that is when
   somebody wonders. */
.si__note {
  margin: 20px 0 0;
  padding: 10px 12px;
  background: #f0f7ec;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #4a6a46;
}
.si__note b { color: #174a0e; }

/* The agreement line, under the button (1k, 2026-09-06). Deliberately NOT boxed like .si__note:
   that box is what happens next, this is the small print, and giving them the same weight would
   make the terms look like an announcement. Sits below .si__act, so it reads after the decision. */
.si__fine {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: #7a9876;
  text-align: center;
}
.si__fine a { color: #4a6a46; text-decoration: underline; }
.si__fine a:hover { color: #2f8a1f; }

/* ---- below the card ---- */
/* One quiet way back to the site, and nothing else. */

.si__foot { margin: 18px 0 0; font-size: 13px; color: #7a9876; text-align: center; }
.si__foot a { color: #4a6a46; text-decoration: none; }
.si__foot a:hover { text-decoration: underline; }

@media (max-width: 520px) {
  .si-body { padding: 0; background: #fff; }
  /* Full-bleed on a phone: a bordered card floating on a tinted page wastes the only screen there
     is, and every native sign-in screen fills it. The desktop complaint does not apply here —
     there is no acre of empty page on a phone. */
  .si {
    max-width: none;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 32px 22px 24px;
  }
  /* Thumbs, not mice. The tightened desktop padding is reversed for touch. */
  .si__i { padding: 12px 13px; font-size: 16px; }
  .si__act { flex-direction: column-reverse; align-items: stretch; }
  .si__go  { width: 100%; min-height: 46px; }
  .si__alt { text-align: center; }
}