:root {
  --bg: #f5f6f8; --panel: #ffffff; --panel-2: #f9fafb; --text: #111827; --muted: #6b7280; --faint: #9ca3af;
  --line: #e5e7eb; --line-strong: #d1d5db;
  --accent: #2563eb; --accent-soft: #eff4ff; --accent-text: #ffffff;
  --ok: #15803d; --ok-soft: #ecfdf3; --warn: #b45309; --warn-soft: #fff7ed; --bad: #b91c1c; --bad-soft: #fef2f2;
  --bar: #e5e7eb; --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115; --panel: #171a21; --panel-2: #1c2029; --text: #e7e9ee; --muted: #9aa1ad; --faint: #6b7280;
    --line: #262b36; --line-strong: #343a47;
    --accent: #6d9cff; --accent-soft: #1b2540; --accent-text: #0b1020;
    --ok: #4ade80; --ok-soft: #12261b; --warn: #fbbf24; --warn-soft: #2a2112; --bad: #f87171; --bad-soft: #2b1515;
    --bar: #262b36; --shadow: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }

/* ---------- header ---------- */
header { position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--line); }
.header-inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; letter-spacing: -.01em;
  white-space: nowrap; flex: none; }
.brand-mark { width: 34px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 750; letter-spacing: .03em; }
.brand-sub { color: var(--muted); font-weight: 500; }
.who { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; min-width: 0; }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main { max-width: 1120px; margin: 0 auto; padding: 28px 20px 80px; }
.narrow { max-width: 760px; margin: 0 auto; }
.page-title { margin: 0 0 4px; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.page-sub { margin: 0 0 24px; color: var(--muted); }

/* ---------- cards ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card-head h2 { margin: 0; font-size: 15px; font-weight: 650; }
.card-head .hint { color: var(--muted); font-size: 13px; }
.card-body { padding: 20px; }
.card-body.flush { padding: 0; }

/* ---------- form bits ---------- */
label, .label { display: block; font-size: 13px; font-weight: 550; color: var(--text); margin-bottom: 6px; }
.field { margin-bottom: 18px; }
input[type=text], input[type=email], select {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--panel); color: var(--text); font: inherit; font-size: 14px; }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[readonly] { background: var(--panel-2); color: var(--muted); }
/* Clerk's sign-in/sign-up card is light, so our dark input style above made its fields hard to read. Its fields (email,
   code, password) take the colours of Clerk's own "Continue" button instead: #2f3037 with white text. */
input.cl-formFieldInput, .cl-formFieldInput input {
  background: #2f3037 !important; border-color: #2f3037 !important; color: #fff !important;
  -webkit-text-fill-color: #fff; caret-color: #fff; }
input.cl-formFieldInput::placeholder, .cl-formFieldInput input::placeholder { color: rgba(255, 255, 255, .6); -webkit-text-fill-color: rgba(255, 255, 255, .6); }
input.cl-formFieldInput:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #2f3037 inset; -webkit-text-fill-color: #fff; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

button { font: inherit; font-size: 14px; font-weight: 550; height: 38px; padding: 0 16px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
button:hover:not(:disabled) { background: var(--panel-2); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.primary:hover:not(:disabled) { filter: brightness(1.06); background: var(--accent); }
button.small { height: 30px; padding: 0 10px; font-size: 13px; }
button:disabled { opacity: .5; cursor: default; }
.link { background: none !important; border: none; color: var(--accent); padding: 0; height: auto; font-weight: 550; }
.link:hover { text-decoration: underline; }

/* data type picker */
.types { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.type { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; font-weight: 400; background: var(--panel); }
.type input { position: absolute; opacity: 0; pointer-events: none; }
.type .icon { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--panel-2);
  display: grid; place-items: center; color: var(--muted); }
.type .t { font-weight: 600; font-size: 14px; }
.type .d { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.type:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.type:has(input:checked) .icon { background: var(--accent); color: var(--accent-text); }
.type:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* drop zone */
.drop { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); padding: 36px 20px; text-align: center;
  background: var(--panel-2); transition: border-color .15s, background .15s; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop .drop-icon { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; background: var(--panel);
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); }
.drop .drop-title { font-weight: 600; font-size: 15px; }
.drop .drop-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.drop .actions { margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.resume-note { margin-bottom: 14px; }

/* ---------- progress ---------- */
.bar { height: 8px; background: var(--bar); border-radius: 99px; overflow: hidden; }
.bar > div { height: 100%; background: var(--accent); width: 0; border-radius: 99px; transition: width .4s; }
.bar.big { height: 12px; margin: 14px 0 6px; }
.bar.ok > div { background: var(--ok); }
.bar.thin { height: 6px; min-width: 90px; }
.progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.progress-pct { font-size: 34px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 18px; }
.stat { background: var(--panel); padding: 12px 14px; }
.stat .n { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 12px; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.tile .n { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile .l { color: var(--muted); font-size: 13px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--panel-2); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--panel-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.nowrap { white-space: nowrap; }
.empty { text-align: center; color: var(--muted); padding: 28px 16px; }
.sub { color: var(--muted); font-size: 12.5px; }
td .sub { overflow-wrap: anywhere; }   /* long emails wrap instead of widening the table */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.path { word-break: break-all; }
/* Each upload is two rows: its columns, then a full-width line with where the data is. */
tr.upload td { border-bottom: none; padding-bottom: 4px; }
tr.location-row td { padding-top: 0; }
tr.upload:hover + tr.location-row td, tr.upload:has(+ tr.location-row:hover) td { background: var(--panel-2); }
.location { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.location .mono { color: var(--muted); word-break: break-all; flex: 0 1 auto; min-width: 0; }
.location a, .location button { flex: none; }
.location a { font-size: 13px; font-weight: 550; white-space: nowrap; }
.cell-progress { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.cell-progress .sub { white-space: nowrap; }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px;
  font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.badge.info { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); } .muted { color: var(--muted); }

/* notices */
.notice { padding: 12px 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line);
  font-size: 14px; margin: 0 0 16px; }
.notice.bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.notice.ok { background: var(--ok-soft); border-color: transparent; color: var(--text); }
.notice.info { background: var(--accent-soft); border-color: transparent; }
.copy-row { display: flex; gap: 8px; margin: 10px 0 8px; }
.copy-row input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.failures { max-height: 340px; overflow: auto; }
/* pre-upload checks */
.checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line); }
.check.warn { background: var(--warn-soft); border-color: transparent; }
.check-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 13px; background: var(--accent-soft); color: var(--accent); }
.check.warn .check-mark { background: var(--warn); color: var(--panel); }
.check-title { font-weight: 600; }
.check-examples { margin-top: 6px; color: var(--muted); overflow-wrap: anywhere; }
.checks-summary summary { cursor: pointer; color: var(--warn); font-size: 13px; font-weight: 550; }
.checks-summary ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }

/* Garmr post-upload checks on /ops */
.garmr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.garmr-label { font-size: 13px; font-weight: 600; }
.garmr-results { flex-basis: 100%; }
.garmr-results summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 550; }
.garmr-detail { margin-top: 8px; display: grid; gap: 8px; font-size: 13px; }
.garmr-table { font-size: 13px; }
.garmr-table th, .garmr-table td { padding: 6px 8px; }
.garmr-files .link { font-size: 13px; }

/* check results shared with the client (client page + ops preview) */
.results { display: grid; gap: 12px; }
.results-head { padding: 14px 16px; border-radius: 10px; background: var(--panel-2); }
.results-head.ok { background: var(--ok-soft); } .results-head.warn { background: var(--warn-soft); }
.results-head.info { background: var(--accent-soft); }
.results-head, .results-repos > li { color: var(--text); }   /* tone shows in the background and badges, not the text */
.results-head.warn .results-headline { color: var(--warn); } .results-head.ok .results-headline { color: var(--ok); }
.results-headline { font-weight: 650; font-size: 15px; }
.results-todo { margin-top: 2px; font-size: 14px; }
.results-repos { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.results-repos > li { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.results-repos > li:last-child { border-bottom: none; }
.results-repo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.results-repo .mono { overflow-wrap: anywhere; }
.results-reasons { margin: 6px 0 0; padding-left: 20px; font-size: 13.5px; }
.results-ready { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  padding: 14px 16px; margin: 0 0 20px; border-radius: var(--radius); background: var(--accent-soft);
  border: 1px solid var(--accent); }
.results-ready-text { display: grid; gap: 2px; font-size: 14px; }
.results-ready-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 6px; border-top: 1px dashed var(--line); }
.share-preview { flex-basis: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }

.row-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* done screen */
.done-mark { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px;
  background: var(--ok-soft); color: var(--ok); }
.done-mark.warn { background: var(--warn-soft); color: var(--warn); }

/* ops layout */
.ops-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.ops-grid > .side { position: sticky; top: 80px; }
@media (max-width: 1180px) {
  .ops-grid { grid-template-columns: 1fr; }
  .ops-grid > .side { position: static; order: -1; }
  .side #invite { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; align-items: end; }
  .side #invite .field { margin-bottom: 14px; }
  .side #invite button[type=submit] { margin-bottom: 14px; }
  .side #inv-result { grid-column: 1 / -1; margin-top: 0 !important; }
}

/* ops: left sidebar (Overview | Upload history) */
body.ops-page .header-inner, body.ops-page main { max-width: 1440px; }
.ops-shell { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 24px; align-items: start; }
.ops-nav { position: sticky; top: 84px; display: grid; gap: 2px; }
.ops-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--muted);
  text-decoration: none; font-size: 14px; font-weight: 550; }
.ops-nav a:hover { background: var(--panel); color: var(--text); }
.ops-nav a.active { background: var(--accent-soft); color: var(--accent); }
.ops-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ops-main { min-width: 0; }

/* upload history */
.filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.filters input[type=search] { flex: 2 1 220px; width: auto; height: 34px; padding: 0 10px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-size: 13.5px; }
.filters select { flex: 1 1 150px; width: auto; height: 34px; font-size: 13.5px; padding: 0 8px; }
.filter-actions { display: flex; gap: 8px; margin-left: auto; }
.filter-actions button { height: 34px; }
table.history th, table.history td { padding: 10px 10px; vertical-align: top; }
table.history th:first-child, table.history td:first-child { padding-left: 16px; }
table.history td:first-child { min-width: 190px; }
table.history td.prof { min-width: 110px; }
button.toggle { width: 30px; padding: 0; }
button.toggle svg { transition: transform .15s; }
button.toggle[aria-expanded=true] svg { transform: rotate(180deg); }
table.history tr.hist-row:has(+ tr.detail-row:not(.hidden)) td { border-bottom: none; }
table.history tr.detail-row td { background: var(--panel-2); padding-top: 4px; }
.small-link { font-size: 13px; }
.history-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
  border-top: 1px solid var(--line); min-height: 54px; }

@media (max-width: 1000px) {
  .ops-shell { grid-template-columns: 1fr; gap: 16px; }
  .ops-nav { position: static; display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
  .ops-nav a { white-space: nowrap; }
}

#signin { display: flex; justify-content: center; padding: 48px 0; }
.hidden { display: none !important; }

@media (max-width: 600px) {
  main { padding: 20px 16px 60px; }
  .header-inner { padding: 0 16px; }
  .brand-sub, .who span { display: none; }
  th, td { padding: 10px 12px; }
  .progress-pct { font-size: 28px; }
}

/* ---------- people: access on/off (/ops "Companies and people") ---------- */
.person-actions { display: inline-flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
button.small.danger { color: var(--bad); border-color: var(--bad-soft); }
button.small.danger:hover { background: var(--bad-soft); }
tr.revoked td:nth-child(3) { color: var(--muted); text-decoration: line-through; }

/* Clerk's show/hide-password eye sits on the dark #2f3037 field (above): make it light so it is visible. */
.cl-formFieldInputShowPasswordButton, .cl-formFieldInputShowPasswordButton svg, .cl-formFieldInputShowPasswordIcon {
  color: rgba(255, 255, 255, .75) !important; }
.cl-formFieldInputShowPasswordButton:hover, .cl-formFieldInputShowPasswordButton:hover svg,
.cl-formFieldInputShowPasswordButton:focus-visible svg { color: #fff !important; }

/* Upload history: profiler CSV name under its Yes badge */
.prof-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }