/* Repostle — the door (sign-in shell + set-password page).
 *
 * One family for the two pages that stand between a person and their
 * desk: public/index.html (the shell at /signin) and
 * public/set-password.html. The visual language is the house's — the
 * landing page's and the office desk's warm paper, ink, and burnt-
 * orange accent, Georgia for display type (landing.css / desk.css
 * variables, same values) — arranged the way Build Pro's door is
 * arranged: a centered brand mark, the product name, the product
 * line, then one card with labeled fields and a full-width primary
 * button. Awesome on phone and wide; no bare-default-browser look.
 *
 * The corner light/dark toggle is /theme.js + /theme.css (product
 * standard, same corner as every other surface); the dark theme here
 * is keyed off [data-theme="dark"] with the desk's dark variables, so
 * the door matches the house it opens into in both themes. This file
 * is deliberately NOT one of the field service worker's cached shell
 * assets, so the door always renders from the network copy.
 */
:root {
  --paper: #faf6ee;
  --paper-deep: #f3ecdc;
  --card: #fffdf8;
  --ink: #211d16;
  --ink-soft: #554c3e;
  --rule: #d8cdb4;
  --accent: #9a3f16;
  --accent-ink: #ffffff;
  --accent-soft: #f7e3d3;
  --field-bg: #ffffff;
  --bad: #a02c1e;
  --bad-soft: #fbe9e4;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(33, 29, 22, 0.05), 0 8px 24px rgba(33, 29, 22, 0.06);
}
html[data-theme="dark"] body.rp-door {
  --paper: #171410;
  --paper-deep: #201b15;
  --card: #262119;
  --ink: #f0e9d8;
  --ink-soft: #c9bda1;
  --rule: #4c4331;
  --accent: #e08a4c;
  --accent-ink: #241207;
  --accent-soft: #3d2716;
  --field-bg: #1b1712;
  --bad: #f0937f;
  --bad-soft: #3d1d1a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.rp-door {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

/* ---- the centered column ---- */
.door-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* top padding clears the fixed corner toggle (12px + 40px) */
  padding: 4.25rem 1.25rem 2.5rem;
}

/* ---- brand block: stamp, name, the product line ---- */
.door-brand { text-align: center; margin-bottom: 1.5rem; }
.door-stamp {
  width: 64px; height: 64px; border-radius: 50%;
  display: block; margin: 0 auto;
}
.door-brand h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.1rem; font-weight: 700; line-height: 1.15;
  letter-spacing: -0.01em; margin: 0.75rem 0 0.3rem;
}
.door-tagline {
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  color: var(--ink-soft); font-size: 1.05rem; margin: 0;
}

/* ---- the card ---- */
.door-card {
  width: 100%; max-width: 25.5rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.6rem 1.45rem;
}
.door-card h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem; font-weight: 600; line-height: 1.2;
  margin: 0 0 0.25rem;
}
.door-state { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 1.15rem; }
.door-state.door-state-err { color: var(--bad); font-weight: 600; }

/* ---- fields ---- */
.field { margin-bottom: 1rem; }
.field label {
  display: block; font-weight: 600; font-size: 0.92rem;
  margin-bottom: 0.35rem;
}
.field input {
  width: 100%; padding: 0.72rem 0.8rem;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--field-bg); color: var(--ink);
  font: inherit; font-size: 1rem;
}
.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

/* ---- the primary door button (and its secondary twin) ---- */
.door-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 3rem; margin-top: 0.35rem;
  padding: 0.6rem 1.2rem;
  background: var(--accent); border: 1px solid var(--accent);
  color: var(--accent-ink);
  border-radius: 10px;
  font: inherit; font-size: 1.02rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
}
.door-btn:hover { filter: brightness(1.07); }
.door-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.door-btn.secondary {
  background: transparent; border-color: var(--rule); color: var(--ink);
  font-weight: 600;
}
.door-btn.secondary:hover { border-color: var(--ink-soft); filter: none; }
.door-alt { margin: 0.9rem 0 0; }

/* ---- form error: a notice, never bare red text ---- */
.auth-err { margin: 0; }
.auth-err:not(:empty) {
  margin-top: 1rem;
  background: var(--bad-soft); color: var(--bad);
  border: 1px solid var(--bad); border-radius: 8px;
  padding: 0.7rem 0.9rem; font-size: 0.95rem; font-weight: 600;
}

/* ---- under the card ---- */
.door-foot {
  margin-top: 1.6rem; text-align: center;
  color: var(--ink-soft); font-size: 0.9rem;
}
.door-foot a { color: var(--ink-soft); text-underline-offset: 3px; }
.door-foot a:hover { color: var(--accent); }

@media (max-width: 480px) {
  .door-card { padding: 1.35rem 1.15rem 1.2rem; }
  .door-brand h1 { font-size: 1.85rem; }
}