/* ArbLogix brand, taken from Marc's prototype (docs/marcs-ideas/ArbLogix_Prototype_10-5-26.html).
   Contrast checked against WCAG 2.2: text ≥ 4.5:1, borders and focus ≥ 3:1, in both themes. */
:root {
  color-scheme: light dark;
  --navy: #0F1F3D; --navy2: #1A2D52; --gold: #C9A24B; --gold-soft: #F3EAD3;
  --bg: #EEF1F5; --surface: #FFFFFF; --ink: #0F1F3D; --ink2: #4A5874; --line: #D6DCE6;
  --fail: #AE3434; --fail-bg: #F8E3E3;
  --field-line: #7B879C;            /* input borders: 3.6:1 on white */
  --focus: #0F1F3D;                 /* gold is only 2.4:1 on white, so light mode focuses in navy */
  --btn-bg: var(--navy); --btn-ink: #FFFFFF;
  --display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1528; --surface: #13213D; --ink: #E8ECF4; --ink2: #A5B1C8; --line: #26385F;
    --gold-soft: #3A3220; --fail: #F08A8A; --fail-bg: #3D1C22; --navy2: #1F3563;
    --field-line: #5A72A6; --focus: var(--gold);
    --btn-bg: var(--gold); --btn-ink: #1B1405;   /* navy on navy would be invisible */
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1528; --surface: #13213D; --ink: #E8ECF4; --ink2: #A5B1C8; --line: #26385F;
  --gold-soft: #3A3220; --fail: #F08A8A; --fail-bg: #3D1C22; --navy2: #1F3563;
  --field-line: #5A72A6; --focus: var(--gold);
  --btn-bg: var(--gold); --btn-ink: #1B1405;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 15px; line-height: 1.5;
}
button, input { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

.topbar {
  background: var(--navy); color: #fff; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.topbar :focus-visible { outline-color: var(--gold); }   /* 6.8:1 on navy */
.brand { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: .5px; line-height: 1; }
.brand b { color: var(--gold); font-weight: 800; }
.brand small {
  display: block; font-family: var(--body); font-weight: 500; font-size: 12px;
  color: #AFC0DD; letter-spacing: 0; margin-top: 6px;
}

main { max-width: 960px; margin: 0 auto; padding: 40px 16px 64px; }
h1 { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1.1; margin: 0 0 8px; }
h2 { font-family: var(--display); font-weight: 700; font-size: 22px; margin: 0 0 12px; }
.muted { color: var(--ink2); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 24px; margin-top: 24px;
}
.login { max-width: 400px; margin: 48px auto 0; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field > span:first-child, .field > label { font-weight: 600; font-size: 14px; }
.field input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--field-line); border-radius: 6px; background: var(--bg);
  font-size: 16px;   /* below 16px, iOS zooms in on focus */
}
.field input[aria-invalid="true"] { border-color: var(--fail); }
.password { position: relative; }
.password input { padding-right: 72px; }
.reveal {
  position: absolute; top: 0; right: 0; height: 100%; min-width: 64px;
  background: none; border: 0; border-radius: 0 6px 6px 0; padding: 0 12px;
  color: var(--ink2); font-size: 13px; font-weight: 600; cursor: pointer;
}

.btn {
  min-height: 44px; background: var(--btn-bg); color: var(--btn-ink); border: 0; border-radius: 6px;
  padding: 10px 16px; cursor: pointer; font-weight: 600;
}
.btn.block { width: 100%; }
.btn.ghost { background: transparent; border: 1px solid #AFC0DD; color: #fff; }
.btn:disabled { opacity: .6; cursor: progress; }
.error {
  background: var(--fail-bg); color: var(--fail); border-radius: 6px;
  padding: 10px 12px; margin: 0 0 16px; font-weight: 600;
}
.error:empty { display: none; }

.badge {
  display: inline-block; background: var(--gold-soft); color: var(--ink);
  border: 1px solid var(--gold); border-radius: 999px; padding: 2px 10px;
  font-size: 13px; font-weight: 600; text-transform: capitalize;
}
.members { list-style: none; margin: 0; padding: 0; }
.members li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.members li:first-child { border-top: 0; }

@media (max-width: 600px) {
  .topbar { padding: 14px 16px; }
  .brand { font-size: 26px; }
  main { padding-top: 24px; }
  .login { margin-top: 24px; }
}