:root {
  --ink: #1b1f23;
  --dim: #5b6570;
  --line: #d9dee3;
  --bg: #f7f8fa;
  --card: #fff;
  --accent: #1f5f8b;
  --warn: #a4341f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ── chrome ─────────────────────────────────────────────────────────── */
.bar {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .8rem 1.5rem;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 600; text-decoration: none; color: var(--ink); }
.bar nav { display: flex; gap: 1.1rem; }
.bar nav a { color: var(--dim); text-decoration: none; }
.bar nav a:hover { color: var(--accent); }
.bar .out { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.who { color: var(--dim); font-size: .875rem; }

main { max-width: 60rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
footer { max-width: 60rem; margin: 0 auto; padding: 0 1.5rem 3rem; color: var(--dim); font-size: .8rem; }

h1 { font-size: 1.55rem; margin: 0 0 .4rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .6rem; }

.head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; }
.head > :last-child { margin-left: auto; }

.narrow { max-width: 34rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1.6rem; }

/* ── messages ───────────────────────────────────────────────────────── */
.flash { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.flash li {
  padding: .6rem .9rem; border-radius: 6px; margin-bottom: .5rem;
  background: #e8f1f7; border: 1px solid #c3dcec;
}
.flash li.bad { background: #fbecea; border-color: #eec8c1; color: var(--warn); }

.note { color: var(--dim); font-size: .9rem; }
.empty { color: var(--dim); }

/* ── forms ──────────────────────────────────────────────────────────── */
label { display: block; margin: 0 0 1rem; font-size: .9rem; color: var(--dim); }
input, select, textarea {
  display: block; width: 100%; margin-top: .3rem;
  padding: .5rem .6rem; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 5px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

label.check { display: flex; align-items: center; gap: .5rem; color: var(--ink); }
label.check input { width: auto; margin: 0; }

.two, .three { display: grid; gap: 0 1rem; }
.two { grid-template-columns: 1fr 1fr; }
.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 40rem) { .two, .three { grid-template-columns: 1fr; } }

.checks { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-bottom: 1rem; }

fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 1.2rem 1.2rem .4rem; margin: 0 0 1.5rem; background: var(--card); }
legend { padding: 0 .4rem; font-size: .85rem; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }

button, .button {
  display: inline-block; padding: .55rem 1.1rem; font: inherit; cursor: pointer;
  color: #fff; background: var(--accent); border: 1px solid var(--accent);
  border-radius: 5px; text-decoration: none;
}
button:hover, .button:hover { filter: brightness(1.1); }
button.secondary { color: var(--accent); background: transparent; }
button.link { padding: 0; color: var(--dim); background: none; border: 0; text-decoration: underline; }
a.quiet { color: var(--dim); margin-left: 1rem; }
.actions { margin-top: 1.5rem; }

.search { display: flex; gap: .6rem; margin-bottom: 1.5rem; }
.search input { margin: 0; }

/* ── the interview ──────────────────────────────────────────────────── */
.rail { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; padding: 0; margin: 0 0 1.6rem; font-size: .78rem; }
.rail li { padding: .2rem .6rem; border: 1px solid var(--line); border-radius: 20px; color: var(--dim); background: var(--card); }
.rail li.now { color: #fff; background: var(--accent); border-color: var(--accent); }
.rail li.done { color: var(--ink); }
.rail li.skip { text-decoration: line-through; opacity: .55; }

.asks { padding-left: 1.1rem; margin: 0 0 1.2rem; }
.asks li { margin-bottom: .35rem; }
.ask { margin: 1.2rem 0 .2rem; font-weight: 500; }

/* ── the resume, and what it seems to say ───────────────────────────── */
.upload .row { display: flex; gap: .6rem; align-items: center; margin-bottom: .8rem; }
.upload input[type=file] { margin: 0; padding: .4rem; }
.upload .row button { flex: none; }
.held { font-size: .85rem; color: var(--dim); margin: 0 0 .8rem; }

/* Suggestions are visually quieter than the fields they feed. They are not
   answers yet, and should not look like answers. */
fieldset.suggest { background: #fbfcfd; border-style: dashed; }
.found { list-style: none; padding: 0; margin: 0 0 .8rem; }
.found li {
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem .1rem; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.found li:last-child { border-bottom: 0; }
.found li > div { flex: 1; min-width: 0; }
.found .when { color: var(--dim); font-size: .82rem; margin-left: .5rem; white-space: nowrap; }
.button.small { padding: .25rem .7rem; font-size: .82rem; flex: none; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1.2rem; }
.chips li { padding: .25rem .7rem; background: #eef2f5; border-radius: 20px; font-size: .82rem; }

details { margin: 1.2rem 0; }
summary { cursor: pointer; color: var(--dim); font-size: .9rem; }

/* ── tables and facts ───────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
th, td { padding: .55rem .8rem; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.slim { max-width: 26rem; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 0 0 1.5rem; }
.facts dt { color: var(--dim); font-size: .85rem; }
.facts dd { margin: 0; }
.facts.wide { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.facts.wide dt { grid-row: 1; }
.facts.wide dd { grid-row: 2; font-size: 1.15rem; }

.block ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.block li { white-space: pre-line; }

/* ── skills ─────────────────────────────────────────────────────────── */
.skillcols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
@media (max-width: 40rem) { .skillcols { grid-template-columns: 1fr; } }
.sub-head { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dim); margin: 1rem 0 .4rem; }
.skills { list-style: none; padding: 0; margin: 0; }
.skills li { display: flex; align-items: baseline; gap: .6rem; padding: .3rem 0;
  border-bottom: 1px solid var(--line); }
.skills li:last-child { border-bottom: 0; }
.skills small { color: var(--dim); font-size: .78rem; }
.sk { flex: 1; }
/* importance as a short bar - five levels, quiet to solid */
.lvl { flex: none; width: 34px; height: 6px; border-radius: 3px; background: #e6eaee; position: relative; }
.lvl::after { content: ""; position: absolute; inset: 0 auto 0 0; border-radius: 3px;
  background: var(--accent); }
.lvl.l1::after { width: 20%; opacity: .45; }
.lvl.l2::after { width: 40%; opacity: .6; }
.lvl.l3::after { width: 60%; opacity: .75; }
.lvl.l4::after { width: 80%; opacity: .9; }
.lvl.l5::after { width: 100%; }

/* ── confirming a client's skills ───────────────────────────────────── */
.suggest-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.suggest-list li { display: grid; grid-template-columns: 1fr auto;
  gap: .2rem .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.suggest-list li:last-child { border-bottom: 0; }
.suggest-list label.check { margin: 0; }
.suggest-list select { width: auto; margin: 0; font-size: .85rem; padding: .25rem .4rem; }
/* the quote sits under both columns, quieter than the claim it supports */
.ev { grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--dim);
  padding-left: 1.6rem; font-style: italic; }
.ev .dim { font-style: normal; opacity: .8; }
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .1rem 1rem; margin-bottom: 1rem; }
.pickgrid label.check { font-size: .88rem; margin: 0; }

.chipline { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.2rem; }
.chip { padding: .2rem .6rem; background: #eef2f5; border-radius: 20px; font-size: .8rem; }
.fit { display: inline-block; width: 60px; height: 8px; border-radius: 4px;
  background: #e6eaee; position: relative; vertical-align: middle; }
.fit::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w);
  background: var(--accent); border-radius: 4px; }
.gone td { opacity: .5; text-decoration: line-through; }
form.danger { margin-top: 1.5rem; }
tr.now td { background: #f2f7fb; }

/* the rail is navigation now, not a progress bar */
.rail li a { color: inherit; text-decoration: none; display: block; }
.rail li { cursor: pointer; }
.rail li:hover { border-color: var(--accent); }
.rail li.done { border-color: #b9c9d6; }
.rail li.done a::before { content: "\2713\00a0"; color: var(--accent); }

/* the mark sits with the wordmark rather than floating beside it */
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand img { display: block; border-radius: 50%; }