/* ============================================================
   MeMachine — signup, login, account.

   The same world as the landing page, quieter. These three pages are
   a FORM ON PRINTER STOCK: a mono header strip that labels and counts,
   a sheet with a hairline rule, a red stamp where the machine has
   marked the page, and human sentences in Source Sans 3.

   Deliberately NOT importing landing.css. That file is the whole
   marketing page — chrome, hero, station chain, six demo modules — and
   none of it is needed to type an email address into a box. This is
   ~6KB and re-declares only the tokens it uses. The fonts are the same
   self-hosted files, so they are already in cache when someone arrives
   from the landing page.
   ============================================================ */

@font-face {
  font-family: 'Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/landing/fonts/plexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/landing/fonts/plexmono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/landing/fonts/plexmono-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/landing/fonts/sourcesans3-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/landing/fonts/caveat-var.woff2') format('woff2');
}

:root {
  --paper:      #f7f4ed;
  --paper-deep: #efe9db;
  --stock:      #fffdf7;
  --ink:        #17140f;
  --ink-2:      #3a332a;
  --ink-press:  #0b0906; /* hover/active ink — still warm, never #000 */
  --graphite:   #6e6659;
  --rule:       rgba(23, 20, 15, 0.16);
  --rule-soft:  rgba(23, 20, 15, 0.075);
  --pen:        #c1301b;
  --pen-deep:   #8f2011;
  --amber:      #b0802a;
  --live:       #2f6b3c;

  /* Byte-identical to landing.css:99-101 and public/styles.css:111-114. These
     had forked: the mono stack dropped 'Cascadia Mono' and Consolas (the two
     Windows fallbacks, on a Windows-first product) for Menlo, the sans put
     BlinkMacSystemFont where every other surface has 'Segoe UI', and the hand
     stack lost 'Bradley Hand'. That only shows up when the woff2 fails to
     load — exactly the moment the auth pages should still look like the rest
     of the site. Keep all three in sync with landing.css. */
  --mono: 'Plex Mono', ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
  --sans: 'Source Sans 3', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.62 var(--sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 64px;
}

/* -------------------- the header strip -------------------- */

.strip {
  width: 100%;
  max-width: 620px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 18px;
  border-bottom: 1px solid var(--rule);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}

.strip a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.strip a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.strip .mark { color: var(--ink); font-weight: 600; letter-spacing: 0.18em; }

/* -------------------- the sheet -------------------- */

main {
  width: 100%;
  max-width: 620px;
  background: var(--stock);
  border: 1px solid var(--rule);
  padding: 40px 40px 36px;
  margin-top: 40px;
  box-shadow: 0 1px 0 var(--rule-soft), 0 18px 40px -34px rgba(23, 20, 15, 0.5);
}

.stamp {
  display: inline-block;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pen);
  border: 1.5px solid var(--pen);
  padding: 6px 9px 5px;
  transform: rotate(-1.6deg);
  margin-bottom: 22px;
}
.stamp.amber { color: var(--amber); border-color: var(--amber); }
.stamp.live  { color: var(--live);  border-color: var(--live); }

h1 {
  font: 600 30px/1.18 var(--sans);
  letter-spacing: -0.012em;
  margin: 0 0 14px;
}

.lede { margin: 0 0 26px; color: var(--ink-2); }
.lede strong { font-weight: 600; color: var(--ink); }

p { margin: 0 0 14px; }
a { color: var(--pen); }
a:hover { color: var(--pen-deep); }

hr {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  margin: 28px 0;
}

/* -------------------- the terms line --------------------
   Above the button, never in a footnote. What someone is agreeing to
   has to be visible at the moment they agree to it. */

.terms {
  border-left: 2px solid var(--amber);
  padding: 2px 0 2px 14px;
  margin: 0 0 24px;
  font-size: 15.5px;
  color: var(--ink-2);
}
.terms .k { font: 500 11px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 4px; }

/* -------------------- fields -------------------- */

label {
  display: block;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 7px;
}

.field { margin-bottom: 20px; }

input {
  width: 100%;
  font: 400 17px/1.4 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 12px 13px;
  transition: border-color .12s ease, background .12s ease;
}
input:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--stock);
}
input::placeholder { color: rgba(110, 102, 89, 0.65); }

.hint { font-size: 14px; color: var(--graphite); margin: 7px 0 0; }

/* -------------------- the button -------------------- */

button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 15px/1 var(--sans);
  letter-spacing: 0.01em;
  color: var(--stock);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 15px 24px;
  cursor: pointer;
  transition: background .12s ease, transform .06s ease;
}
button:hover:not(:disabled) { background: var(--ink-press); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; }
button.wide { width: 100%; justify-content: center; }

button.ghost {
  color: var(--ink);
  background: transparent;
  border-color: var(--rule);
  font-weight: 500;
}
button.ghost:hover:not(:disabled) { background: var(--paper-deep); border-color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* -------------------- messages -------------------- */

.note {
  font-size: 15.5px;
  padding: 13px 15px;
  margin: 0 0 22px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.note.bad   { border-color: rgba(193, 48, 27, .5); color: var(--pen-deep); background: rgba(193, 48, 27, .05); }
.note.good  { border-color: rgba(47, 107, 60, .5); color: var(--live);     background: rgba(47, 107, 60, .05); }
.note[hidden] { display: none; }

/* -------------------- the account readout --------------------
   A receipt, not a dashboard. Rows the machine printed about you. */

.readout {
  border-top: 1px solid var(--rule);
  margin: 26px 0 0;
}
.readout .row {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.readout .k {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--graphite);
  flex: 0 0 auto;
}
.readout .v { text-align: right; font-size: 16px; }
.readout .v.mono { font-family: var(--mono); font-size: 14px; }

.hand {
  font: 400 22px/1.35 var(--hand);
  color: var(--pen);
  transform: rotate(-0.7deg);
  margin: 24px 0 0;
}

footer {
  width: 100%;
  max-width: 620px;
  margin-top: 26px;
  font: 400 11px/1.7 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
footer a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
footer a:hover { color: var(--ink); }

@media (max-width: 560px) {
  main { padding: 30px 22px 28px; margin-top: 26px; }
  h1 { font-size: 25px; }
  body { font-size: 16.5px; }
  .readout .row { flex-direction: column; gap: 3px; }
  .readout .v { text-align: left; }
}