/* Deliberately minimal - the visual design is a separate pass (the owner's decision, 2026-09-07).
   Everything here is layout and legibility, nothing is a look. What matters now is that the pages WORK and
   that every outcome is visible; making them attractive is a change to this file and no other. */

:root {
  --ink: #e8e8ec;
  --dim: #9a9aa6;
  --bg: #14141a;
  --panel: #1d1d26;
  --line: #2e2e3c;
  --accent: #6c8cff;
  --bad: #ff6b6b;
  --good: #57d38c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1rem 4rem;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 34rem; margin: 0 auto; }
main.wide { max-width: 52rem; }

header { max-width: 52rem; margin: 0 auto 2.5rem; display: flex; gap: 1.5rem; align-items: baseline; }
header .brand { font-weight: 700; letter-spacing: .04em; }
header nav { margin-left: auto; display: flex; gap: 1.2rem; }

a { color: var(--accent); }

h1 { font-size: 1.6rem; margin: 0 0 .5rem; }
h2 { font-size: 1.05rem; margin: 2rem 0 .5rem; }
p.lead { color: var(--dim); margin-top: 0; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem;
}

label { display: block; margin: 1rem 0 .3rem; font-size: .88rem; color: var(--dim); }

input {
  width: 100%;
  padding: .6rem .7rem;
  background: #12121a;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
  margin-top: 1.5rem;
  width: 100%;
  padding: .7rem;
  background: var(--accent);
  color: #0d0d14;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button:disabled { opacity: .5; cursor: default; }

.hint { font-size: .82rem; color: var(--dim); margin-top: .3rem; }

/* ⚠️ One place for every outcome, success and failure alike. A page that shows errors somewhere and
   confirmations somewhere else teaches people to look in two places, and they check neither. */
.message {
  margin-top: 1.5rem;
  padding: .8rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-size: .92rem;
}

.message[hidden] { display: none; }
.message.bad { border-color: var(--bad); color: var(--bad); }
.message.good { border-color: var(--good); color: var(--good); }

/* The reason code beside the sentence. It is for a program, and it is also what makes a support
   conversation possible. */
.message .reason { display: block; margin-top: .4rem; font-size: .78rem; color: var(--dim); }