/*
 * Echox Platform — design tokens.
 *
 * Ported deliberately from the marketing site (~/echox/web/src/app/globals.css) so the product and
 * the front door read as one company. Deep navy ground, warm ivory paper, brass accent, and small
 * radii throughout: this should read as a firm that handles other people's money, not as a startup.
 *
 * The site expresses these through Tailwind's @theme; the product is plain CSS custom properties.
 * The VALUES are the contract — if the palette moves there, move it here in the same commit.
 */

:root {
  --ink: #0f2033;
  --ink-deep: #0a1724;
  --ink-soft: #16293d;
  --ink-line: #26394d;

  --ivory: #faf7f1;
  --paper: #fffdf8;
  --white: #ffffff;

  --brass: #a5793a;
  --brass-light: #c9a063;

  --slate: #5c6773;
  --slate-2: #8a939d;
  --slate-3: #364a5e;
  --line: #e4ded2;
  --line-soft: #efeae0;

  /* on navy */
  --mist: #a9b4c0;
  --mist-bright: #e4e9ee;
  --mist-dim: #7d8b9b;
  --mist-faint: #55677c;

  --danger: #8c3b3b;
  --success: #4b7a5a;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Auth layout ───────────────────────────────────────────────────────────
   Split screen: navy identity panel, ivory working panel. The pattern every
   serious PM product uses (Buildium, AppFolio, Rentvine) because it gives the
   brand somewhere to live without crowding the one thing the user came to do.
   Collapses to the form alone on small screens — a tenant paying rent on a
   phone should not scroll past a marketing panel to reach the password field. */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
}

.auth-brand {
  background: var(--ink);
  color: var(--mist-bright);
  padding: 3.5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* A single hairline of brass along the seam. The logo's brass arm is the only
   other place the colour appears at this size — keep it rare. */
.auth-brand::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: var(--brass);
}

.auth-brand-copy { max-width: 30rem; }

.auth-brand h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 2.4vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0 0 1.1rem;
}

.auth-brand p {
  color: var(--mist);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0;
}

.auth-brand-foot {
  display: flex;
  gap: 1.75rem;
  font-size: 0.82rem;
  color: var(--mist-faint);
}

.auth-brand-foot a { color: var(--mist-dim); text-decoration: none; }
.auth-brand-foot a:hover { color: var(--mist-bright); }

.auth-panel {
  background: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}

.auth-form-wrap { width: 100%; max-width: 24rem; }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.6rem;
}

.auth-form-wrap h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.85rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
  color: var(--ink);
}

.auth-sub {
  color: var(--slate);
  font-size: 0.94rem;
  margin: 0 0 2rem;
}

/* ── Form ───────────────────────────────────────────────────────────────── */

.field { margin-bottom: 1.15rem; }

.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--slate-3);
  margin-bottom: 0.4rem;
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"] {
  width: 100%;
  padding: 0.72rem 0.85rem;
  font-family: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:hover { border-color: #d6cfc0; }

.field input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(165, 121, 58, 0.14);
}

.field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.field-row a {
  font-size: 0.8rem;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.field-row a:hover { color: var(--brass); border-bottom-color: var(--brass); }

.check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--slate);
  margin: 1.35rem 0 1.6rem;
  cursor: pointer;
}

.check input { accent-color: var(--brass); width: 15px; height: 15px; }

.btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  font-family: inherit;
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--ivory);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn:hover { background: var(--ink-soft); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.auth-alt {
  margin-top: 1.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--slate);
}

.auth-alt a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.auth-alt a:hover { border-bottom-color: var(--brass); color: var(--brass); }

/* ── Messages ───────────────────────────────────────────────────────────── */

.notice {
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  margin-bottom: 1.5rem;
  border: 1px solid;
}

.notice-error {
  background: #fdf4f4;
  border-color: #e8d2d2;
  color: var(--danger);
}

/* Deliberately loud. This build cannot authenticate anyone, and the screen must
   not imply otherwise — a login that looks real and is not is worse than none. */
.notice-stub {
  background: #fbf6ec;
  border-color: #e6d9bf;
  color: #6b5324;
}

.validation-message { color: var(--danger); font-size: 0.82rem; display: block; margin-top: 0.35rem; }

/* ── Narrow ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; min-height: 100dvh; }
  .auth-brand {
    padding: 2rem 1.75rem;
    gap: 1.75rem;
  }
  .auth-brand::after { width: 100%; height: 3px; top: auto; bottom: 0; }
  .auth-brand-copy h1 { font-size: 1.5rem; }
  .auth-brand-copy p, .auth-brand-foot { display: none; }
  .auth-panel { padding: 2.5rem 1.5rem 3.5rem; align-items: flex-start; }
}

/* ── Signed-in shell ────────────────────────────────────────────────────── */

.shell { min-height: 100vh; display: flex; flex-direction: column; }

.shell-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 2rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.shell-user { display: flex; align-items: center; gap: 1rem; font-size: 0.88rem; color: var(--slate); }

.linkish {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.linkish:hover { color: var(--brass); border-bottom-color: var(--brass); }

.shell-body { padding: 3.5rem 2rem; max-width: 44rem; }

.shell-body h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
}

.lede { color: var(--slate); font-size: 1rem; max-width: 34rem; }

.lede code, .facts code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--line-soft);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.facts dt { color: var(--slate-2); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; padding-top: 0.15rem; }
.facts dd { margin: 0; color: var(--ink); }