/* Shared styling for the account pages (register, sign in, your account).
   Same tokens as index.html, kept in one file because three pages now share them. */
:root { color-scheme: dark }

body {
  margin: 0;
  background: #0A1628;
  color: #C8D4DD;
  font: 16px/1.55 system-ui, Segoe UI, Roboto, sans-serif;
}

main { max-width: 560px; margin: 0 auto; padding: 28px 20px 56px }
h1 { font-size: 30px; letter-spacing: .02em; margin: 0 0 8px }
a { color: #E0B658 }
small, .muted { color: #7D93A8 }

.lede { color: #8FA3B5; margin: 0 0 28px }

/* ---- header, identical to the home page so the pages feel like one site ---- */
.top { border-bottom: 1px solid #1D3853; background: #071020 }
.top .inner {
  max-width: 760px; margin: 0 auto; padding: 14px 20px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px;
}
.mark {
  font-size: 20px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #C9A24E; text-decoration: none; margin-right: auto;
}
.top nav { display: flex; flex-wrap: wrap; gap: 6px 18px }
.top nav a { color: #8FA3B5; text-decoration: none; font-size: 15px }
.top nav a:hover { color: #F2ECE0 }
.top nav a[aria-current="page"] { color: #F2ECE0 }

/* ---- forms ---- */
.field { margin: 0 0 18px }
label { display: block; font-weight: 600; margin: 0 0 6px; font-size: 15px }

input[type=text], input[type=email], input[type=password] {
  width: 100%; box-sizing: border-box;
  background: #0D2137; color: #F2ECE0;
  border: 1px solid #1D3853; border-radius: 6px;
  padding: 11px 12px; font: inherit;
}
input:focus { outline: 2px solid #C9A24E; outline-offset: 1px; border-color: #C9A24E }
input[aria-invalid="true"] { border-color: #E06C5A }

.hint { display: block; color: #7D93A8; font-size: 13.5px; margin: 6px 0 0 }

.btn {
  display: inline-block; background: #C9A24E; color: #1A1206; font-weight: 700;
  padding: 13px 26px; border-radius: 6px; text-decoration: none; font-size: 17px;
  border: 0; cursor: pointer; font-family: inherit;
}
.btn:hover:not(:disabled) { background: #E0B658 }
.btn:disabled { opacity: .55; cursor: default }
.btn-block { width: 100% }

.form-foot { margin: 18px 0 0; font-size: 15px; color: #8FA3B5 }

/* The honeypot. Hidden from people, left in the DOM for anything filling every field it
   finds. Not `display:none`, which the better bots check for. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

/* ---- messages ---- */
.msg { padding: 12px 16px; border-radius: 6px; margin: 0 0 20px; border-left: 4px solid }
.msg-error { background: #2A1310; border-color: #E06C5A; color: #F0C9C2 }
.msg-ok    { background: #0F2A1C; border-color: #59B37A; color: #C6E8D3 }
.msg-info  { background: #0D2137; border-color: #C9A24E }
[hidden] { display: none !important }

/* ---- the account page ---- */
.card { background: #0D2137; border: 1px solid #1D3853; border-radius: 8px; padding: 16px 18px; margin: 0 0 14px }
.card h2 { margin: 0 0 4px; font-size: 18px; border: 0; padding: 0 }
.row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline }
.row .grow { margin-right: auto }
.slot-empty { color: #7D93A8; font-style: italic }
.pill { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: #8FA3B5;
        border: 1px solid #1D3853; border-radius: 999px; padding: 2px 10px }
.pill-on { color: #9FD7B4; border-color: #2F5E44 }

@media (max-width: 640px) { main { padding: 20px 16px 40px } h1 { font-size: 25px } }