/* Subscriber account pages — sign up, log in, verify, account. §7A
   A separate stylesheet (not the inline block in index.html) so the four small
   pages share one look and it lives in one file. Same palette as the listings
   page, light and dark. CSP-clean: this is /static, served by the app. */
:root {
  --ink: #16202c; --muted: #64748b; --line: #e6ecf3; --bg: #fff;
  --panel: #f6f8fb; --accent: #f97316; --navy: #1e3a5f; --green: #15803d;
  --err: #b91c1c; --err-bg: #fef2f2; --ok: #15803d; --ok-bg: #f0fdf4;
  --tip: #9a3412; --tip-bg: #fff7ed; --tip-line: #fdba74;
  /* Input borders are darker than the card/divider line. --line is deliberately
     faint for hairline rules; on an empty text box that same faintness reads as
     "nothing here to fill in". A field has to look like a field. */
  --field: #cbd5e1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eef6; --muted: #93a4b8; --line: #263445; --bg: #0f1620;
    --panel: #161f2b; --navy: #7dd3fc; --green: #4ade80;
    --err: #fca5a5; --err-bg: #2a1414; --ok: #86efac; --ok-bg: #10231a;
    --tip: #fdba74; --tip-bg: #2a1c0e; --tip-line: #b45309;
    --field: #3b4a5e;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink); background: var(--panel);
  min-height: 100vh; display: flex; flex-direction: column;
}
.nav { background: var(--ink); color: #fff; }
@media (prefers-color-scheme: dark) { .nav { background: #060b12; } }
.nav .wrap { max-width: 1180px; margin: 0 auto; padding: 12px 16px; }
.logo { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #fff; text-decoration: none; }
.logo span { color: #fb923c; }

main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; }
.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 30px 28px; width: 100%; max-width: 420px;
  box-shadow: 0 1px 3px rgba(16,32,44,.06);
}
.card h1 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 4px; }
.card .sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; }

label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin: 14px 0 5px; }
input, textarea {
  width: 100%; background: var(--bg); color: var(--ink);
  border: 1px solid var(--field); border-radius: 9px; padding: 11px 12px;
  font: 15px inherit; font-family: inherit;
}
textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Checkbox row ("Remember my email for 30 days"). Overrides the field-label
   styling above: this is a sentence you read, not a field name. The whole row
   is the label, so the words are part of the tap target — it has to be easy to
   hit on a phone. */
   Written as label.check, not .check, so it can never lose to the bare `label`
   rule above no matter what order things end up in — losing it stacks the box
   on top of the words and centres them, which is exactly wrong. */
label.check { display: flex; align-items: center; gap: 9px; margin: 16px 0 0;
  font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--ink); cursor: pointer; }
label.check input { width: 16px; height: 16px; flex: none; margin: 0; accent-color: var(--accent); cursor: pointer; }

button.go, a.go {
  display: block; width: 100%; text-align: center; margin-top: 22px;
  background: var(--accent); color: #fff; border: 0; border-radius: 9px;
  padding: 13px; font: 700 15px inherit; font-family: inherit; cursor: pointer; text-decoration: none;
}
button.go:hover, a.go:hover { background: #ea6c0c; }

.alt { text-align: center; margin-top: 18px; font-size: 14px; color: var(--muted); }
/* Two links, one line, with a dot between them. They wrap to two lines by
   themselves on a narrow phone rather than being forced to fit. */
.alt.two { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 12px; }
.alt.two span { color: var(--line); }
@media (prefers-color-scheme: dark) { .alt.two span { color: #3b4a5e; } }
.alt a { color: var(--navy); font-weight: 600; text-decoration: none; }
.alt a:hover { text-decoration: underline; }

.msg { border-radius: 9px; padding: 11px 13px; font-size: 14px; margin-bottom: 18px; }
.msg.err { background: var(--err-bg); color: var(--err); border: 1px solid var(--err); }
.msg.ok  { background: var(--ok-bg);  color: var(--ok);  border: 1px solid var(--ok); }
/* The way OUT of an error — "you may already have an account from texting us".
   Amber, not red: it has to catch the eye as hard as the error above it (people
   read the red box and give up), while still reading as help rather than as a
   second thing that went wrong. The thick left rule ties it to the error box it
   follows. */
.msg.tip {
  background: var(--tip-bg); color: var(--tip); border: 1px solid var(--tip-line);
  border-left: 4px solid var(--accent); line-height: 1.55; margin-top: -6px;
}
.msg.tip b { display: block; margin-bottom: 3px; font-size: 15px; }
.msg.tip a { color: var(--tip); font-weight: 700; text-decoration: underline; }

.rows { margin-top: 6px; }
.rows .r { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rows .r:last-child { border-bottom: 0; }
.rows .r .k { color: var(--muted); }
.rows .r .v { font-weight: 600; }
.badge { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; border-radius: 4px; padding: 2px 7px; }
.badge.free { background: #e8edf3; color: #52657c; }
.badge.paid { background: #dcfce7; color: #166534; }
.center { text-align: center; }
.big { font-size: 34px; margin-bottom: 10px; }