/* Sign in and Register — one split-screen shell, one set of controls.
 *
 * Both pages ask a stranger to type their details into a box, so they get the same
 * furniture: brand panel on the left, a single column of fields on the right, and the
 * bronze button as the only thing on the page competing for a click. Whatever differs
 * between them is content, not styling.
 *
 * Self-contained on purpose — these pages do not load site.css, so nothing here has to
 * out-specify the older green-and-serif rules.
 */
:root{
  --forest:#1b2018; --forest-2:#2b3026; --forest-3:#4e503e;
  --bronze:#d4b45c; --bronze-2:#c1a454; --bronze-3:#8a7433;
  --bronze-tint:#f7f0dd; --bronze-line:#e6d6aa;
  --ink:#232620; --ink-2:#3c4038; --muted:#6f7268;
  --paper:#fff; --paper-2:#faf9f5; --paper-3:#f2f0e9;
  --line:#e6e3da; --line-2:#d5d1c4;
  --bad:#8a3a22; --bad-bg:#fbeee9; --bad-line:#e9c4b6;
  /* The admin's "ok" green, for the one thing on these pages that is done and settled. */
  --ok:#3f7d45; --ok-2:#346a3a; --ok-bg:#eef5ec; --ok-line:#c5dabf;

  --sh-card:0 1px 2px rgba(27,32,24,.04), 0 18px 50px rgba(27,32,24,.10);
  --ring:0 0 0 3px rgba(212,180,92,.35);
  --r-sm:9px; --r:11px; --r-lg:18px;
}
*{box-sizing:border-box}

/* `hidden` is only a user-agent rule, and any author `display` outranks it whatever the
   specificity — so .verify and .verified, which are laid out by class and shown by attribute,
   were drawn on page load and the sign-up form opened claiming the number was already proved.
   Said once here rather than as a :not([hidden]) on every rule that sets display. */
[hidden]{display:none !important}

html,body{margin:0}
body{
  background:var(--paper-2);color:var(--ink);
  font:15px/1.55 "Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
:where(button,a,input,select,textarea):focus-visible{outline:none;box-shadow:var(--ring)}

/* ---------- split shell ----------
   minmax(0,…) rather than a bare fr: a plain fr floors at the column's min-content, and one
   long unbreakable string in either pane would then push the whole page wider than the
   screen instead of wrapping. */
/* Side by side, the two panes own the window between them: the brand is a fixed board that
   never moves, and the form column is the only thing that scrolls. Stacked (below), the page
   goes back to scrolling as a whole, because a pinned board above a scrolling box on a phone
   just eats the screen. */
.auth{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  height:100vh;height:100dvh;overflow:hidden;
}
.auth > *{min-width:0;height:100%}
.auth-brand p,.auth-brand h2,.auth-card p,.auth-card h1{overflow-wrap:break-word}

/* ---------- left: brand ---------- */
.auth-brand{
  position:relative;overflow:hidden;color:#eef1ea;display:flex;flex-direction:column;
  padding:44px 52px;
  background:
    radial-gradient(105% 75% at 72% 16%, rgba(212,180,92,.16) 0%, transparent 60%),
    linear-gradient(150deg,var(--forest) 0%,var(--forest-2) 58%,#3b3e30 100%);
}
/* The town plan itself, ghosted in — the thing both pages are ultimately about. */
.auth-brand::before{
  content:"";position:absolute;right:-26%;bottom:-18%;width:96%;height:96%;
  background:url("/map/assets/townplan-site.webp") no-repeat center/contain;
  opacity:.12;transform:rotate(-6deg);pointer-events:none;
  mask-image:radial-gradient(70% 70% at 40% 40%,#000 40%,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 70% at 40% 40%,#000 40%,transparent 78%);
}
/* Painted after the plan, so the copy in the lower half always has dark behind it
   however busy that corner of the drawing happens to be. */
.auth-brand::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(23,27,20,.92) 0%,rgba(23,27,20,.55) 38%,rgba(23,27,20,0) 72%);
}
.auth-brand > *{position:relative;z-index:1}
.auth-logo{display:inline-block;width:92px;text-decoration:none}
.auth-logo img{width:100%;height:auto;display:block}

.auth-pitch{margin-top:auto}
.auth-pitch h2{
  font-weight:800;font-size:clamp(27px,3vw,39px);line-height:1.08;
  letter-spacing:-.025em;margin:0 0 14px;max-width:17ch;color:#fff;
}
.auth-pitch p{font-size:16px;color:rgba(255,255,255,.72);margin:0;max-width:46ch}

/* Two shapes share this slot: login's coverage/access pair, register's numbered steps. */
.auth-extra{margin-top:32px;border-top:1px solid rgba(255,255,255,.14);padding-top:22px}

.auth-meta{display:flex;gap:30px;flex-wrap:wrap}
.auth-meta .k{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze);margin:0 0 5px;font-weight:700;
}
.auth-meta .v{font-weight:700;font-size:14.5px;color:#fff;margin:0}

.auth-steps{display:flex;flex-direction:column;gap:15px}
.auth-step{display:flex;gap:14px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.72)}
.auth-step i{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(212,180,92,.16);border:1px solid rgba(212,180,92,.45);
  color:var(--bronze);font-style:normal;font-weight:800;font-size:12.5px;
}
.auth-step b{display:block;color:#fff;font-weight:700}

/* ---------- right: the form ---------- */
/* A column: the card, then the version line under it. The card centres itself with margin:auto
   rather than justify-content:center — centring a flex item that is taller than its scroll
   container pushes its top above the scrollable area, where it cannot be reached. Auto margins
   centre only while there is room to spare, and give it all up otherwise. */
.auth-panel{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:44px 32px;background:var(--paper-2);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#cdcabd transparent;
}
.auth-panel::-webkit-scrollbar{width:10px}
.auth-panel::-webkit-scrollbar-thumb{
  background-color:#cdcabd;border-radius:20px;border:3px solid transparent;background-clip:content-box;
}
.auth-card{flex:none;width:100%;max-width:412px;margin:auto}
.auth-card h1{font-weight:800;font-size:29px;letter-spacing:-.022em;margin:0 0 6px;color:var(--forest)}
.auth-card .hint{color:var(--muted);font-size:15px;margin:0 0 28px}

/* Register runs two panes; the rail says which one you are on. */
.auth-dots{display:flex;align-items:center;gap:10px;margin:0 0 24px}
.auth-dots i{
  width:27px;height:27px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--paper-3);border:1px solid var(--line);color:var(--muted);
  font-style:normal;font-size:12.5px;font-weight:800;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.auth-dots i.on{background:var(--bronze);border-color:var(--bronze-2);color:var(--forest)}
.auth-dots span{flex:1;height:2px;background:var(--line);border-radius:2px}

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:17px}
.field label{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
}
.field input[type=text],.field input[type=email],
.field input[type=password],.field select{
  width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);
  font:inherit;font-size:15px;background:var(--paper);color:var(--ink);
  transition:border-color .16s ease,box-shadow .16s ease;
}
/* Required fields: a red asterisk after the label, added by class so the label text stays plain. */
.field label.req::after{content:" *";color:var(--bad);font-weight:800}
.field input::placeholder{color:#a8a89d}
.field input:focus,.field select:focus{outline:none;border-color:var(--bronze-2);box-shadow:var(--ring)}
.field .err:empty{display:none}
.field .err{color:var(--bad);font-size:12.5px}
.field .note{color:var(--muted);font-size:12.5px}

/*newly added code*/
/*    .field label[for="Email"].req::after {
        content: none;
    }*/

/* Show-password toggle. The button lives inside the box rather than beside it, so the field is
   still one control: the input keeps room for it on the right, and the eye never overlaps what
   is typed. Off the tab order on purpose — the key a keyboard reaches for after a password is
   the one that signs in. Drawn by auth-password.js; without it the field is a plain box. */
.field .pass{position:relative;display:block}
.field .pass > input[type=text],.field .pass > input[type=password]{padding-right:46px}
.pass-eye{
  position:absolute;top:50%;right:7px;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;
  padding:0;border:0;background:none;border-radius:var(--r-sm);
  color:var(--muted);cursor:pointer;transition:color .16s ease,background-color .16s ease;
}
.pass-eye:hover{color:var(--ink-2);background:var(--paper-3)}
.pass-eye:focus-visible{outline:none;box-shadow:var(--ring)}
.pass-eye[aria-pressed=true]{color:var(--bronze-3)}
.pass-eye svg{
  width:19px;height:19px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.pass-eye .eye-off,.pass-eye[aria-pressed=true] .eye-on{display:none}
.pass-eye[aria-pressed=true] .eye-off{display:block}

/* Dial code and number read as one control. The number is the part somebody is actually
   typing, so it takes whatever the dial code and the button leave. Say so explicitly: without
   a flex here the input falls back to its own width:100% as a basis, and three boxes each
   asking for the whole row squeeze the only one that matters down to its own padding. */
.field-phone{display:flex;gap:9px}
.field-phone select{width:104px;flex:none}
.field-phone input[type=text],.field-phone input[type=email]{flex:1;min-width:0}

/* Proving the number before there is an account. The button sits in the phone row and the code
   box directly under it, so the three read as one control the way the dial code and the number
   already do.

   A proved number is the one thing drawn green: the button and the chip under it both say
   "done", in the admin's ok green, so it cannot be mistaken for a button still waiting on you. */
.verify-block{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.verify{display:flex;gap:9px}
.verify input{flex:1;min-width:0}
/* Send code / Resend and Verify share one width, so the two rows' boxes end on the same line
   and the button doesn't change size as its label does. */
.field-phone .btn-inline,.verify .btn-inline{width:116px}
.field .note:empty{display:none}
/* Disabled, but finished rather than unavailable — so solid green, not the greyed-out bronze. */
.btn-solid.is-verified:disabled{
  background:linear-gradient(115deg,var(--ok),var(--ok-2));border-color:transparent;color:#fff;cursor:default;
}

.remember{display:flex;align-items:center;gap:10px;margin:4px 0 24px;font-size:14px;color:var(--ink-2);cursor:pointer}
.remember input{width:17px;height:17px;accent-color:var(--bronze-2);flex:none}

/* The two things somebody does at a password box: stay signed in, or admit they cannot get in
   at all. Side by side, because a reset link tucked under the button is a support call. */
.auth-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 24px}
.auth-row .remember{margin:0}
.auth-link{font-size:13.5px;font-weight:700;color:var(--bronze-3);text-decoration:none;text-underline-offset:2px}
.auth-link:hover{text-decoration:underline}

.btn{
  display:inline-block;width:100%;border:1px solid transparent;border-radius:var(--r);
  padding:14px 26px;font:inherit;font-size:15px;font-weight:800;letter-spacing:.02em;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:filter .16s ease,transform .1s ease,border-color .16s ease,color .16s ease;
}
.btn-solid{background:linear-gradient(115deg,var(--bronze),var(--bronze-2));color:var(--forest)}
.btn-solid:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn-solid:disabled{background:#cfc6ab;color:rgba(27,32,24,.5);cursor:not-allowed;filter:none}
.btn-ghost{background:var(--paper);border-color:var(--line-2);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--bronze-2);color:var(--forest)}

/* The buttons that sit in a field row rather than under one — Send code, Verify. Below .btn
   and not above it: the two rules have the same weight, so the one declared first loses, and
   .btn's width:100% turns a button meant to sit at the end of a row into the row. inline-flex
   because the row stretches these to the height of the input beside them, and a stretched
   inline-block leaves its label at the top. */
.btn-inline{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;flex:none;padding:12px 16px;font-size:13.5px;white-space:nowrap;
}

.btn-row{display:flex;gap:10px}
.btn-row .btn{width:auto;flex:1}
.btn-row .btn-ghost{flex:0 0 38%}

.auth-alert{
  background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad);
  border-radius:var(--r);padding:11px 14px;margin-bottom:20px;font-size:13.5px;
}
.auth-alert:empty{display:none}
.auth-alert ul{margin:0;padding-left:18px}

/* A standing fact rather than a problem — how long a mailed link lasts, what a reset costs
   you. Bronze so it reads as an aside; .auth-alert stays the only red thing on the page. */
.auth-note{
  background:var(--bronze-tint);border:1px solid var(--bronze-line);color:var(--ink-2);
  border-radius:var(--r);padding:13px 15px;margin:0 0 22px;font-size:13.5px;
}
.auth-note p{margin:0}
.auth-note p + p{margin-top:8px}
.auth-note b{color:var(--forest)}

.auth-foot{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
.auth-foot a{color:var(--bronze-3);font-weight:700;text-underline-offset:2px}

/* Which build this is, under the form column — the first thing a support call asks, and the
   one thing here a visitor can read before signing in. Same number, from the same place, as
   the admin sidebar shows once they have. */
.auth-colophon{
  flex:none;margin:28px auto 0;
  font-size:12px;letter-spacing:.04em;color:var(--muted);text-align:center;
}
.auth-colophon .ver{
  margin-left:8px;padding-left:9px;border-left:1px solid var(--line-2);
  font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2);
}

/* ---------- narrow ---------- */
/* Not enough height to pin the board without cutting the bottom off it — let the page scroll
   normally instead of clipping content nobody can reach. */
@media (min-width:901px) and (max-height:660px){
  .auth,.auth > *{height:auto}
  .auth{overflow:visible}
  .auth-panel{overflow-y:visible}
}

/* A dial code, a number and a button do not fit one phone-width line. The button drops to its
   own row rather than squeezing the number field down to four visible digits. */
@media (max-width:520px){
  .field-phone,.verify{flex-wrap:wrap}
  .field-phone .btn-inline,.verify .btn-inline{width:100%;flex:1 0 100%}
}

@media (max-width:900px){
  .auth{grid-template-columns:minmax(0,1fr);height:auto;overflow:visible}
  .auth > *{height:auto}
  .auth-panel{overflow-y:visible}
  .auth-brand{padding:28px 26px;min-height:auto}
  .auth-brand::before{opacity:.09;right:-34%}
  .auth-logo{width:74px}
  .auth-pitch{margin-top:26px}
  .auth-pitch h2{font-size:26px}
  .auth-pitch p{max-width:none}
  .auth-extra{margin-top:22px}
  .auth-panel{padding:32px 24px}
}
/* One pixel under the threshold at which iOS stops zooming the page on focus. */
@media (max-width:760px){
  .field input[type=text],.field input[type=email],.field input[type=password],
  .field select,.field textarea{font-size:16px}
}
@media (max-width:420px){
  .btn-row{flex-direction:column}
  .btn-row .btn,.btn-row .btn-ghost{flex:1 1 auto;width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}