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

   The portal's variables and classes, transplanted unchanged, so a
   Board member who signs in to both sites is not left wondering whether
   one of them is a forgery.

   These are the PORTAL's colours, not the public site's. #6E1F32 here,
   #6E2B3D on the home page. Deliberate: the only people who reach this
   page also use the portal, and matching the system they already trust
   matters more than matching the marketing pages they arrived from.
   ------------------------------------------------------------------ */

:root{
  --maroon:#6E1F32;
  --maroon-dark:#4B0F1B;
  --maroon-light:#8B3247;
  --gold:#B08D4F;
  --gold-light:#DAC99B;
  --gold-pale:#EFE4C8;
  --cream:#F7F1E4;
  --paper:#FFFFFF;
  --ink:#241016;
  --ink-soft:#5D4A50;
  --line:#E3D9C8;
  --ok:#2E6B45;      --ok-bg:#E7F1EA;
  --warn:#8A5A12;    --warn-bg:#FBF0DA;
  --bad:#9B2226;     --bad-bg:#F9E7E7;
  --radius:10px;
  --shadow:0 1px 3px rgba(36,16,22,.10), 0 6px 20px rgba(36,16,22,.06);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--cream);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased;
}

.centre-wrap{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  padding:1rem;width:100%}
.centre{text-align:center}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem;box-shadow:var(--shadow)}
.card.narrow{max-width:460px;margin:0 auto;width:100%}

h1{font-size:1.45rem;font-weight:600;color:var(--maroon);line-height:1.2}
.muted{color:var(--ink-soft)}
.small{font-size:.92rem}
.tiny{font-size:.82rem}

.stack{display:block}
.field{margin-bottom:.85rem}
.field label{display:block;font-size:.88rem;font-weight:600;color:var(--ink);
  margin-bottom:.3rem}

input[type=email],input[type=text]{
  width:100%;padding:.62rem .7rem;font:inherit;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:8px;min-height:44px}
input:focus{outline:2px solid var(--gold);outline-offset:-1px;border-color:var(--gold)}

/* Six digits must read as six digits and must not shift while typing. */
.code-input{font-size:1.7rem;letter-spacing:.45em;text-align:center;
  font-variant-numeric:tabular-nums;padding-left:.45em}

.hint{font-size:.82rem;color:var(--ink-soft);margin-top:.35rem}

/* min-height is a thumb target, not a rounding error. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.62rem 1.1rem;font:inherit;font-weight:600;cursor:pointer;
  border-radius:8px;border:1px solid var(--maroon);background:var(--maroon);
  color:#fff;text-decoration:none;min-height:44px}
.btn:hover{background:var(--maroon-dark);border-color:var(--maroon-dark)}
.btn.block{width:100%}
.btn.ghost{background:#fff;color:var(--maroon)}
.btn.ghost:hover{background:var(--gold-pale)}
.btn.small{font-size:.88rem;padding:.45rem .8rem;min-height:38px}
.btn-row{display:flex;gap:.5rem;margin-top:.7rem}

/* One message element for everything, so a screen reader announces it and
   a sighted reader learns where to look. */
.msg{padding:.7rem .85rem;border-radius:8px;border:1px solid;margin-bottom:.9rem;
  font-size:.92rem}
.msg.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.msg.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.msg.bad{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.hidden{display:none}

a{color:var(--maroon)}

.footnote{padding:0 1rem 1.6rem;text-align:center}