/* Plain CSS, no framework and no build step. The screen has to stay readable by
 * whoever picks this up next, and the bucket colours have to survive being read
 * quickly -- a recruiter is scanning for "does anyone actually know this person".
 */

:root {
  --ink: #1b1c1e;
  --muted: #5c6169;
  --line: #dcdfe3;
  --page: #f7f8fa;
  --card: #ffffff;
  --strong: #1f7a4d;
  --probable: #2f6ba8;
  --possible: #8a6a1f;
  --coincidental: #74787e;
  --warn: #9a3412;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1rem 6rem;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

main { max-width: 52rem; margin: 0 auto; }

.masthead { font-size: 1.5rem; margin: 0; }
.tagline { color: var(--muted); margin: 0.25rem 0 1.5rem; }

/* -- the form -- */

form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.25rem;
}

label { display: block; font-weight: 600; margin-bottom: 0.35rem; }

textarea, input[type="text"], input[type="number"], input[type="password"], select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  font-weight: 400;
}

textarea { resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

.row { display: flex; gap: 1rem; margin-top: 1rem; }
.row label { flex: 1; }

details { margin-top: 1rem; }
summary { cursor: pointer; color: var(--muted); }
details .meta { margin: 0.5rem 0; }

button {
  margin-top: 1rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: default; }

/* Progress and failure share one line, so failure has to look different. In muted
 * grey, "that is a link and this cannot open it" reads like a status update. */
.status { min-height: 1.5rem; color: var(--muted); margin: 1rem 0; }
.status.error {
  color: var(--warn);
  border-left: 4px solid var(--warn);
  background: #fff7ed;
  padding: 0.6rem 0.8rem;
}

/* -- results -- */

.block { margin-top: 2rem; }
.block h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }

.header { border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.header h1 { font-size: 1.35rem; margin: 0 0 0.25rem; }

.meta { color: var(--muted); margin: 0.2rem 0; }
.comeet { margin: 0.2rem 0; }
.note { color: var(--muted); font-style: italic; margin: 0.2rem 0; }

/* The caveat is the difference between "nobody knows them" and "nobody we have
 * data for knows them". It sits above the results and is not styled to be
 * skippable. */
.caveat {
  margin-top: 1.5rem;
  padding: 0.75rem 0.9rem;
  border-left: 4px solid var(--warn);
  background: #fff7ed;
  color: var(--warn);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--coincidental);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}
.bucket-strong { border-left-color: var(--strong); }
.bucket-probable { border-left-color: var(--probable); }
.bucket-possible { border-left-color: var(--possible); }

.card-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.who { font-weight: 600; }
.rank { color: var(--muted); }
.score { color: var(--muted); font-size: 0.85rem; margin-left: auto; }

.chip {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  background: var(--page);
  border: 1px solid var(--line);
  color: var(--muted);
}
.bucket-strong .chip { color: var(--strong); border-color: var(--strong); }
.bucket-probable .chip { color: var(--probable); border-color: var(--probable); }
.bucket-possible .chip { color: var(--possible); border-color: var(--possible); }

.headline { margin: 0.5rem 0 0.4rem; }

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0;
  font-size: 0.9rem;
}
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.cap { margin: 0.5rem 0 0; color: var(--warn); }
.empty { color: var(--muted); }

.contact .why { margin: 0.4rem 0; color: var(--muted); }
.contact .ask { margin-top: 0.25rem; padding: 0.35rem 0.8rem; }
.ask-feedback { margin-left: 0.6rem; color: var(--warn); font-size: 0.9rem; }
.ask-feedback.ok { color: var(--strong); }

/* -- the other two pages -- */

.nav {
  max-width: 52rem;
  margin: 0 auto 1.5rem;
  display: flex;
  gap: 1.25rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.6rem;
}
.nav a { color: var(--muted); text-decoration: none; }
.nav a.here { color: var(--ink); font-weight: 600; }
.nav a:hover { color: var(--ink); }

/* Pushed to the right rather than sitting in the tab order of the links -- who you
   are is status, not navigation, and it should not read as a fourth page. */
.whoami { margin-left: auto; color: var(--muted); }
.nav .signout { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.nav .signout:hover { color: var(--ink); }

/* -- sign in -- */

.signin { max-width: 26rem; padding-top: 3rem; }
.signin input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.signin .note { margin-top: 2rem; font-size: 0.9rem; }

.tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.tab {
  margin: 0;
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}
.tab.here { background: var(--ink); color: #fff; border-color: var(--ink); }

button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
button.small { padding: 0.25rem 0.6rem; margin-top: 0; font-size: 0.85rem; }
.linkish {
  margin: 0; padding: 0; border: 0; background: none;
  color: var(--ink); font-weight: 600; font-size: 1rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

.actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.actions button { margin-top: 0; }

/* A company or employee that needs attention: no size band, or no history. */
.bucket-warn { border-left-color: var(--warn); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.6rem 1rem;
  margin-top: 0.6rem;
}
.field { display: block; font-weight: 400; margin: 0; }
.field-label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.2rem; font-weight: 600; }
.field.checkbox { display: flex; align-items: center; gap: 0.45rem; }
.field.checkbox input { width: auto; }

.detail { margin-top: 0.75rem; }
.detail textarea { font-family: inherit; font-size: inherit; }
.employee-row .detail:empty { display: none; }

/* Who this is: the fields Bob would have supplied, collapsed because most reviews are
   about the positions and only some are about the person. */
.roster { margin-bottom: 0.75rem; }
.roster summary { font-weight: 600; color: var(--ink); }

/* Marked for deletion, not detached: it comes back if they click again, and nothing
   happens until Save. Struck through and faded so the card still reads as itself. */
.position .remove { margin-left: auto; font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.position .remove:hover { color: var(--warn); }
.position.removed { border-left-color: var(--warn); opacity: 0.55; }
.position.removed .who { text-decoration: line-through; }
.position.removed input, .position.removed select { text-decoration: line-through; }

.period { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; }
.period input, .period select { width: auto; flex: 1; }

.inline-upload {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed var(--line);
}
.inline-upload .field-label { margin: 0; }
.inline-upload button { margin-top: 0; }

.panel .card { margin-top: 0.75rem; }