/* Pipeline — single stylesheet.
   Design tokens + components for all views.
   Kept under 300 lines per spec §1. */

:root {
  --c-bg:           #fafaf9;
  --c-surface:      #ffffff;
  --c-surface-2:    #f4f4f2;
  --c-border:       #e5e5e1;
  --c-border-strong:#cfcfc9;
  --c-text:         #1a1a18;
  --c-text-soft:    #555550;
  --c-text-muted:   #8a8a83;
  --c-accent:       #2a6df4;
  --c-accent-hover: #1e57cf;
  --c-danger:       #c0322a;
  --c-danger-bg:    #fdecea;
  --c-warn:         #b8741a;
  --c-warn-bg:      #fff4e0;
  --c-success:      #1e7a3a;
  --c-success-bg:   #e7f6ec;
  --c-info-bg:      #eaf1ff;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 28px;

  --r-1: 4px; --r-2: 6px; --r-3: 10px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.05);
  --shadow-2: 0 8px 24px rgba(0,0,0,.12);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-sans); font-size: var(--t-md); line-height: 1.5;
  color: var(--c-text); background: var(--c-bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { margin: 0 0 var(--s-3); font-weight: 600; }
h1 { font-size: var(--t-2xl); } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-lg); }
p  { margin: 0 0 var(--s-3); }
a  { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--f-mono); font-size: .92em; }

/* Top bar + nav */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-5);
  background: var(--c-surface); border-bottom: 1px solid var(--c-border);
}
.topbar__brand { font-weight: 700; letter-spacing: .01em; }
.topbar__nav { display: flex; gap: var(--s-4); margin-left: var(--s-6); }
.topbar__nav a {
  color: var(--c-text-soft); font-size: var(--t-sm); font-weight: 500;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-2);
}
.topbar__nav a:hover { background: var(--c-surface-2); text-decoration: none; color: var(--c-text); }
.topbar__nav a.is-active { color: var(--c-text); background: var(--c-surface-2); }
.topbar__user { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); color: var(--c-text-soft); }

.container { max-width: 1200px; margin: 0 auto; padding: var(--s-6) var(--s-5); }
.container--narrow { max-width: 420px; margin: var(--s-8) auto; padding: 0 var(--s-5); }
.container--wide { max-width: 1400px; }

.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-3); padding: var(--s-5); box-shadow: var(--shadow-1); }
.card + .card { margin-top: var(--s-4); }
.card__title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-4); }
.card__title .muted { font-size: var(--t-sm); }

/* Forms */
.form { display: flex; flex-direction: column; gap: var(--s-4); }
.form__row { display: flex; flex-direction: column; gap: var(--s-2); }
.form__row--inline { flex-direction: row; align-items: center; gap: var(--s-3); }
.form__label { font-size: var(--t-sm); font-weight: 500; color: var(--c-text-soft); }
.form__input, .form__select, .form__textarea {
  font: inherit; color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-2);
  padding: var(--s-3); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.form__textarea { min-height: 100px; resize: vertical; font-family: var(--f-sans); }
.form__input:focus, .form__select:focus, .form__textarea:focus {
  border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(42,109,244,.15);
}
.form__error {
  font-size: var(--t-sm); color: var(--c-danger); background: var(--c-danger-bg);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-2);
  border: 1px solid #f5cbc7; display: none;
}
.form__error.is-visible { display: block; }
.form__hint { font-size: var(--t-xs); color: var(--c-text-muted); }

/* Buttons */
.btn {
  font: inherit; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  transition: background .12s, border-color .12s, color .12s;
}
.btn:disabled { cursor: not-allowed; opacity: .6; }
.btn--primary { background: var(--c-accent); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--c-accent-hover); }
.btn--ghost { background: transparent; color: var(--c-text-soft); border-color: var(--c-border-strong); }
.btn--ghost:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-text); }
.btn--danger { background: transparent; color: var(--c-danger); border-color: var(--c-danger); }
.btn--danger:hover:not(:disabled) { background: var(--c-danger-bg); }
.btn--sm { padding: var(--s-2) var(--s-3); font-size: var(--t-sm); }

/* Badges */
.badge {
  display: inline-block; padding: 2px var(--s-2); border-radius: 999px;
  font-size: var(--t-xs); font-weight: 500; line-height: 1.5;
  background: var(--c-surface-2); color: var(--c-text-soft); border: 1px solid var(--c-border);
  white-space: nowrap;
}
.badge--cmg      { background: var(--c-info-bg);    color: #1e57cf; border-color: #c7d8ff; }
.badge--agency   { background: var(--c-success-bg); color: var(--c-success); border-color: #c7ebd1; }
.badge--bootcamp { background: var(--c-warn-bg);    color: var(--c-warn);    border-color: #f1d9af; }
.badge--hot      { background: #ffe7e3; color: var(--c-danger); border-color: #f8c1ba; }
.badge--score    { font-variant-numeric: tabular-nums; }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table th, .table td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--c-border); }
.table th { font-weight: 600; color: var(--c-text-soft); background: var(--c-surface-2); cursor: pointer; user-select: none; position: sticky; top: 0; }
.table th[aria-sort="ascending"]::after  { content: " ▲"; color: var(--c-text-muted); font-size: var(--t-xs); }
.table th[aria-sort="descending"]::after { content: " ▼"; color: var(--c-text-muted); font-size: var(--t-xs); }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover { background: var(--c-surface-2); }

/* Filter bar */
.filterbar { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); align-items: flex-end; }
.filterbar .form__row { flex: 0 0 auto; min-width: 140px; }
.filterbar .form__input, .filterbar .form__select { padding: var(--s-2) var(--s-3); font-size: var(--t-sm); }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: none; align-items: center; justify-content: center; z-index: 100; padding: var(--s-4); }
.modal.is-open { display: flex; }
.modal__panel { background: var(--c-surface); border-radius: var(--r-3); width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; padding: var(--s-5); box-shadow: var(--shadow-2); }
.modal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-4); }
.modal__close { background: none; border: none; cursor: pointer; font-size: var(--t-xl); color: var(--c-text-muted); }
.modal__actions { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-5); }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline__item { padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border); }
.timeline__item:last-child { border-bottom: none; }
.timeline__head { display: flex; gap: var(--s-3); align-items: baseline; font-size: var(--t-sm); }
.timeline__date { color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.timeline__body { margin-top: var(--s-2); color: var(--c-text-soft); white-space: pre-wrap; }

/* AI box */
.ai-box { border-left: 3px solid var(--c-accent); padding-left: var(--s-4); }
.ai-box dl { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-2) var(--s-4); margin: 0; }
.ai-box dt { color: var(--c-text-soft); font-size: var(--t-sm); font-weight: 500; }
.ai-box dd { margin: 0; }

/* Hot prospect cards (Today view) */
.hot { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-3); }
.hot__card { padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-2); background: var(--c-surface); }
.hot__head { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-2); }
.hot__name { font-weight: 600; }
.hot__line { color: var(--c-text-soft); font-size: var(--t-sm); margin-bottom: var(--s-2); }
.hot__action { font-weight: 500; margin-bottom: var(--s-3); }
.hot__btns { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* Stats bar */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); }
.stat { padding: var(--s-3); background: var(--c-surface-2); border-radius: var(--r-2); }
.stat__label { font-size: var(--t-xs); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.stat__value { font-size: var(--t-xl); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Banner */
.banner { padding: var(--s-3) var(--s-4); border-radius: var(--r-2); margin-bottom: var(--s-4); font-size: var(--t-sm); }
.banner--warn   { background: var(--c-warn-bg);   color: var(--c-warn);   border: 1px solid #f1d9af; }
.banner--danger { background: var(--c-danger-bg); color: var(--c-danger); border: 1px solid #f5cbc7; }

/* Login-specific */
.login__brand { text-align: center; font-weight: 700; font-size: var(--t-lg); margin-bottom: var(--s-2); }
.login__sub   { text-align: center; font-size: var(--t-sm); color: var(--c-text-muted); margin-bottom: var(--s-6); }

/* Util */
.muted { color: var(--c-text-muted); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.spacer { flex: 1; }
.hidden { display: none !important; }
.toast {
  position: fixed; bottom: var(--s-5); right: var(--s-5); padding: var(--s-3) var(--s-4);
  background: var(--c-text); color: #fff; border-radius: var(--r-2); font-size: var(--t-sm);
  box-shadow: var(--shadow-2); opacity: 0; transform: translateY(8px);
  transition: opacity .15s, transform .15s; pointer-events: none; z-index: 200; max-width: 360px;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 720px) {
  .container { padding: var(--s-4) var(--s-3); }
  .topbar { padding: var(--s-3); flex-wrap: wrap; gap: var(--s-2); }
  .topbar__nav { margin-left: 0; order: 3; flex-basis: 100%; }
  .ai-box dl { grid-template-columns: 1fr; }
  .ai-box dt { margin-top: var(--s-3); }
  .table { font-size: var(--t-xs); }
  .table th, .table td { padding: var(--s-2); }
}