:root {
  --ivory: #FDFBF7;
  --charcoal: #1C1C1C;
  --gold: #C9A227;
  --gray-100: #F5F3EF;
  --gray-300: #D4D0C8;
  --gray-500: #8A8578;
  --gray-700: #4A4A4A;
  --green: #2F7D4F;
  --amber: #B07A12;
  --red: #A33227;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--ivory);
  color: var(--charcoal);
  line-height: 1.6;
}

.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }

/* Top bar */
.topbar {
  background: var(--charcoal);
  color: var(--ivory);
  padding: 14px 0;
  margin-bottom: 28px;
}
.topbar .wrap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.logo {
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 2px 8px;
  font-size: 0.8rem;
  letter-spacing: 1px;
}
.topbar h1 { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.3px; }
.tagline { color: var(--gray-500); font-size: 0.8rem; }

/* Cards */
.card {
  background: #fff;
  border: 1px solid var(--gray-300);
  border-left: 3px solid var(--gold);
  padding: 24px;
  margin-bottom: 22px;
}
.card.is-hidden, .is-hidden { display: none; }

.step {
  font-size: 0.72rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.num {
  background: var(--charcoal);
  color: var(--gold);
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 0.72rem;
}

.note { font-size: 0.86rem; color: var(--gray-700); margin-bottom: 16px; }

/* Fields */
.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-500);
  margin-bottom: 6px;
}
.field em { text-transform: none; letter-spacing: 0; font-style: normal; opacity: 0.75; }

input[type="url"], textarea {
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  background: var(--ivory);
  color: var(--charcoal);
  border-radius: 2px;
}
textarea { resize: vertical; line-height: 1.55; }
input:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: -1px; }

/* Buttons */
.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
button {
  font: inherit;
  font-size: 0.88rem;
  padding: 10px 18px;
  border: 1px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--ivory);
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
button.ghost { background: transparent; color: var(--charcoal); }
button.apply { background: var(--gold); border-color: var(--gold); color: var(--charcoal); font-weight: 600; }
button:hover:not(:disabled) { opacity: 0.85; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

.hint { font-size: 0.82rem; color: var(--gray-500); }
.hint.error { color: var(--red); }
.hint.ok { color: var(--green); }

/* Analysis */
.verdict-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.score {
  font-size: 2.3rem;
  font-weight: 300;
  line-height: 1;
  padding: 10px 16px;
  border: 2px solid currentColor;
}
.score small { font-size: 0.85rem; opacity: 0.7; }
.score.good { color: var(--green); }
.score.mid { color: var(--amber); }
.score.bad { color: var(--red); }
.verdict { font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.rationale { font-size: 0.92rem; color: var(--gray-700); flex: 1 1 280px; min-width: 0; }

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--gray-300);
  border-bottom: 1px solid var(--gray-300);
  margin-bottom: 14px;
}
.fields div > dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-500);
}
.fields div > dd { font-size: 0.9rem; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  font-size: 0.75rem;
  padding: 3px 9px;
  border-radius: 2px;
}
.chip--ok {
  background: rgba(47, 125, 79, 0.08);
  border-color: rgba(47, 125, 79, 0.35);
  color: var(--green);
}
.chip--gap {
  background: rgba(163, 50, 39, 0.07);
  border-color: rgba(163, 50, 39, 0.3);
  color: var(--red);
}
.chip--muted {
  background: transparent;
  border-style: dashed;
  color: var(--gray-500);
}

/* Score breakdown -- the arithmetic behind the number */
.meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 24px;
  margin-bottom: 16px;
}
.meter-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.meter-top span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-500);
}
.meter-top b { font-size: 1rem; font-weight: 600; }
.meter-top small { font-size: 0.72rem; color: var(--gray-500); font-weight: 400; }
.meter-track { height: 4px; background: var(--gray-100); border: 1px solid var(--gray-300); }
.meter-track i { display: block; height: 100%; background: var(--gold); }
.meter-note { font-size: 0.72rem; color: var(--gray-500); margin-top: 5px; line-height: 1.35; }

.flag {
  font-size: 0.8rem;
  padding: 8px 12px;
  margin-bottom: 14px;
  border-left: 3px solid currentColor;
}
.flag--block { color: var(--red); background: rgba(163, 50, 39, 0.06); }
.flag--warn { color: var(--amber); background: rgba(176, 122, 18, 0.07); }

.chip-group { margin-top: 14px; }
.chip-group h4 {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-500);
  font-weight: 400;
  margin-bottom: 7px;
}
.chip-group .count {
  display: inline-block;
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 8px;
  font-size: 0.68rem;
}

/* Resume preview -- approximates the PDF, not pixel-exact */
.paper-shell { margin-top: 20px; overflow-x: auto; background: var(--gray-100); padding: 18px; }
/* Sizes are em-relative so the preview tracks the PDF: app.js sets this
   element's font-size to the body size the renderer actually chose, and the
   multipliers below mirror config() in resume-pdf.js. */
.paper {
  position: relative;
  width: 8.5in;
  min-height: 11in;
  margin: 0 auto;
  padding: 0.53in;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.18);
  font-family: "Times New Roman", Times, serif;
  font-size: 10.5pt;
  line-height: 1.24;
  color: #000;
}
/* No page-boundary marker here on purpose. Browser Times metrics run a little
   looser than jsPDF's, so this preview is ~0.4in taller than the file it
   previews; a hard line at 11in would report spills that do not exist. The PDF
   renderer measures its own layout and reports the real page count, which the
   hint above the preview shows. */
.paper-caption {
  max-width: 8.5in;
  margin: 8px auto 0;
  font-size: 0.74rem;
  color: var(--gray-500);
  text-align: center;
}
.paper .r-name { text-align: center; font-size: 1.72em; font-weight: 700; letter-spacing: 0.5px; line-height: 1.1; }
.paper .r-headline { text-align: center; font-size: 0.98em; font-weight: 700; margin-top: 2px; }
.paper .r-contact { text-align: center; font-size: 0.86em; margin-top: 3px; }
.paper .r-section {
  font-size: 1.02em;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid #000;
  margin: 0.6em 0 0.28em;
  padding-bottom: 2px;
}
.paper .r-entry { display: flex; justify-content: space-between; gap: 16px; font-size: 1em; font-weight: 700; margin-top: 0.35em; }
.paper .r-entry .r-dates { white-space: nowrap; }
.paper ul { list-style: none; margin: 0.15em 0; }
.paper li { padding-left: 1.05em; text-indent: -1.05em; margin-bottom: 0.1em; }
.paper li::before { content: "\2022  "; }
.paper .r-skill { margin-bottom: 0.1em; }
.paper .r-proj-title { font-size: 1em; font-weight: 700; margin-top: 0.5em; }
/* The PDF has no paragraph margins, so drop the browser's default 1em or the
   preview runs materially taller than the page it is previewing. */
.paper p { margin: 0 0 0.12em; }
/* Metric emphasis -- the only bold inside prose, so numbers carry the glance. */
.paper b { font-weight: 700; }

/* Toast */
.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  background: var(--charcoal);
  color: var(--ivory);
  padding: 12px 20px;
  font-size: 0.86rem;
  box-shadow: 0 3px 14px rgba(0,0,0,0.3);
  max-width: 90vw;
}
.toast.error { background: var(--red); }
.toast.ok { background: var(--green); }

@media (max-width: 620px) {
  .topbar .wrap { gap: 8px; }
  .tagline { flex-basis: 100%; }
  .card { padding: 18px 16px; }
}