/* Shared by every logged-in/auth-adjacent page (index, admin, billing, correct,
   contact, login, signup, verify). Pairs with brand.css, which must be linked
   first — it provides the fonts (@font-face), the --paper/--ink/--mat/--thread
   palette, and the header.site/.nav branded header component. This file covers
   everything below the header: page body, cards, forms, buttons. */

body {
  margin: 0;
  font-family: 'Body', Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper);
}
/* The landing page's cutting-mat texture (brand.css) as the app's own backdrop —
   fixed attachment so it stays put while the page content scrolls over it, giving
   a slight 3D/parallax feel for free, no JS. Add class="mat-grid" to <body>. */
body.mat-grid { background-attachment: fixed; }
/* Pre-auth-check pages start hidden (requireAuth()/showAuthedPage() in
   auth-guard.js reveal them) so a logged-out visitor never sees a content
   flash before the login redirect fires. Previously only index.html defined
   this locally — admin/billing/login/signup/verify used class="hidden" too
   but had no rule backing it. */
body.hidden { display: none; }
main { max-width: 480px; margin: 0 auto; padding: 20px; }

.card {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 18px;
}
label { display: block; margin-bottom: 12px; }
label span {
  display: block;
  margin-bottom: 4px;
  font-family: 'Heading', sans-serif; font-stretch: 80%;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mat);
}
input[type="email"], input[type="password"], input[type="text"] {
  font: inherit;
  font-size: 16px; /* under 16px, iPhone Safari zooms the page in when the field is tapped */
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid var(--chalk);
  border-radius: var(--radius);
}
button, .btn {
  font-family: 'Heading', sans-serif; font-stretch: 80%;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  /* Without this, a real <button> and a styled <a>/<label> compute a different
     default line-height from their own UA font metrics — same padding, visibly
     different heights (measured 36px vs 41px) even with identical CSS otherwise. */
  line-height: 1;
  border: 2px solid var(--thread);
  border-radius: var(--radius);
  background: var(--thread);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { background: var(--thread-deep); border-color: var(--thread-deep); }
/* Signup page: what you get, above the form. */
.signup-perks { list-style: none; margin: 0 0 18px; padding: 0; font-size: 15px; }
.signup-perks li { padding: 3px 0 3px 26px; position: relative; }
.signup-perks li::before { content: "\2713"; position: absolute; left: 4px; color: var(--thread); font-weight: 700; }

/* The main form button: a full-width, finger-sized target on a phone. */
form button[type="submit"] { font-size: 15px; padding: 13px 18px; }
@media (max-width: 600px) { form button[type="submit"] { width: 100%; } }
.btn.green { background: var(--mat); border-color: var(--ink); color: var(--paper); }
.btn.green:hover { background: var(--mat-deep); border-color: var(--ink); }
.btn.ghost { background: transparent; color: var(--mat); border-color: var(--mat); }
.btn.ghost:hover { background: var(--mat); color: var(--paper); }
/* Ghost buttons living inside the dark header bar (Logout, Admin, Back-to-jobs) need
   the light variant so they're readable against --mat instead of dark-on-dark. Scoped
   to .auth-strip so every page gets this automatically, not just one-off overrides. */
.auth-strip .btn.ghost { background: transparent; border-color: var(--paper); color: var(--paper); }
.auth-strip .btn.ghost:hover { background: var(--paper); color: var(--mat); }
.auth-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.muted { color: var(--chalk); }
.error { color: #c0392b; margin: 8px 0; }
.success { color: #1e7a42; margin: 8px 0; }