/* The account pages (sign-in, spaces, plan & billing) share the workspace's
   palette rather than a near-miss of their own: these are board.css's values
   under the names this stylesheet already uses, so every rule below keeps
   working and the two halves of the product stop disagreeing about what grey is.
   Anything new belongs in board.css's vocabulary. */
:root {
  --bg: #f6f8f7;       /* board.css --page   */
  --card: #ffffff;     /* board.css --surface */
  --ink: #14201b;
  --muted: #5c6b64;
  --faint: #8a978f;
  --line: #dde4e0;
  --line-2: #e8edea;
  --col: #edf1ef;      /* the quiet fill behind a column, a chip, a track */
  --accent: #2f6f4f;   /* herd green */
  --done: #2f855a;
  --warn: #b45309;
  --error: #b3261e;
  --shadow: 0 1px 2px rgba(20,32,27,.10), 0 2px 8px rgba(20,32,27,.05);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* A button that reads as a link. For an action that belongs in running text but
   must POST (the sign-in page's "send the confirmation link again"), where an
   <a href> would be the wrong element. */
.linklike {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent);
}
.linklike:hover { text-decoration: underline; }
.linklike:disabled { color: var(--muted); cursor: default; text-decoration: none; }

.topbar {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: 0.7rem 1.25rem;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.topbar .brand {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 800; color: var(--ink);
}
.topbar .brand:hover { text-decoration: none; }
.topbar .brand .logo {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 800;
}
.topbar nav { display: flex; gap: 1.25rem; margin-left: auto; }
.topbar nav a { color: var(--muted); font-size: 0.88rem; }
.topbar nav a:hover { color: var(--accent); text-decoration: none; }

.content { max-width: 880px; margin: 2rem auto; padding: 0 1.25rem; }
h1 { font-size: 1.5rem; }
.muted { color: var(--muted); }
.error { color: var(--error); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1rem 0;
}
.auth-card { max-width: 340px; margin: 6rem auto; }

form label { display: block; margin: 0.5rem 0; font-size: 0.9rem; color: var(--muted); }
form input {
  display: block; width: 100%; margin-top: 0.25rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 6px;
  font: inherit;
}
/* Textareas and selects were unstyled until the profile page had one of each.
   Same box as `form input` above rather than a second look for the same job. */
form textarea, form select {
  display: block; width: 100%; margin-top: 0.25rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; background: #fff;
}
form textarea { resize: vertical; }
form label small { display: block; margin-top: 0.3rem; font-size: 0.8rem; }
form input:disabled { background: #f3f5f4; color: var(--muted); }

.inline-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.inline-form label { margin: 0; }
.inline-form input { width: auto; }

/* --- profile picture ------------------------------------------------------ */
.avatar-row { display: flex; gap: 1.25rem; align-items: center; }
.avatar-preview {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; color: #fff; font-weight: 600; font-size: 1.4rem;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }

button {
  padding: 0.5rem 0.9rem; border: 0; border-radius: 6px;
  background: var(--accent); color: #fff; font: inherit; cursor: pointer;
}
button:hover { filter: brightness(1.05); }

table.grid { width: 100%; border-collapse: collapse; margin-top: 1rem; }
table.grid th, table.grid td {
  text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line);
}
table.grid th { font-size: 0.8rem; text-transform: uppercase; color: var(--muted); }

.secret {
  background: #0f1720; color: #d6e2ff; padding: 0.9rem; border-radius: 8px;
  white-space: pre-wrap; word-break: break-all;
}

/* An aside the page needs read but that is nobody's fault - "paid plans aren't
   enabled on this deployment". Not .error: nothing went wrong. */
.notice {
  background: #fff8e1; border: 1px solid #f0d98a; color: #6b5900;
  border-radius: 8px; padding: 0.75rem 1rem; margin: 0.75rem 0;
}

/* The plan cards themselves live in plans.css, loaded by the two pages that
   show them, so onboarding and billing cannot drift into two different cards. */
button.secondary {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent);
}
.onboarding { max-width: 900px; margin: 2rem auto; }

/* --- Google sign-in button + divider (auth pages) ------------------------- */
.or-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.1rem 0; color: #6b7280; font-size: .8rem;
}
.or-divider::before, .or-divider::after {
  content: ""; flex: 1; height: 1px; background: #e5e7eb;
}
.google-btn {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  padding: .55rem .75rem; border: 1px solid #d1d5db; border-radius: 6px;
  text-decoration: none; color: inherit; font-weight: 600;
}
.google-btn:hover { background: rgba(0,0,0,.03); }