/* Predictive Layer — CA C-36 target table.
   Styled to match the public site at origination.solutions.

   Brand values below are copied from the live stylesheet
   https://origination.solutions/styles.css?v=88 (identical to the local site
   copy at origination_solutions_web/styles.css). Do not hand-edit a hex here
   without re-checking the live file.

   Light page (#FFFFFF) with dark ink (#0A2342), teal accent (#087E8B) and
   mint tag fills (#C7FFDA). Fonts are the four the site self-hosts:
   DM Sans, Playfair Display (wordmark), Space Grotesk, JetBrains Mono.
   No CDN, no framework, no build step. */

@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand tokens (verbatim from the live :root) ---- */
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  --brand-ink: #0A2342;       /* Oxford Blue: ink, dark bands, primary buttons */
  --brand-accent: #087E8B;    /* Teal: links, data, active states */
  --brand-mint: #C7FFDA;      /* Tea Green: tag / chip fills only */
  --brand-muted: #5C7080;
  --brand-mid: #7A9AA8;
  --brand-paper: #F3F6F8;
  --brand-deep-teal: #063E3B; /* the site's #problem band */
  --brand-amber: #DE9C55;     /* word-level accent only */

  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Playfair Display", "Times New Roman", Times, serif;
  --font-ui: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --shadow-elevated: 0 30px 70px -35px color-mix(in oklab, var(--brand-ink) 40%, transparent);
  --shadow-panel: 0 24px 60px -40px color-mix(in oklab, var(--brand-ink) 22%, transparent);

  /* ---- App aliases ---- */
  --background: #FFFFFF;
  --foreground: var(--brand-ink);
  --card: #FFFFFF;
  --primary: var(--brand-ink);
  --primary-foreground: #FFFFFF;
  --accent: var(--brand-accent);
  --accent-2: color-mix(in oklab, var(--brand-accent) 82%, #000); /* darker teal for small text */
  --accent-dim: color-mix(in oklab, var(--brand-accent) 18%, transparent);
  --muted: var(--brand-paper);
  --muted-foreground: color-mix(in oklab, var(--brand-ink) 58%, var(--brand-muted)); /* #2B425C */
  --border: color-mix(in oklab, var(--brand-mid) 42%, var(--brand-muted));            /* #688191 */
  --line-soft: color-mix(in oklab, var(--brand-ink) 8%, transparent);
  --input: color-mix(in oklab, var(--brand-ink) 18%, transparent);
  --ring: var(--brand-accent);
  --radius-xs: 4px;           /* buttons and chips, as on the site */
  --radius-input: 7px;        /* .field input on the site */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 24px 56px;
}

/* ---------- Header (navy band, like the site's .band-ink) ---------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--brand-ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-panel);
}

.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }

.brand-mark {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--brand-mint);
  box-shadow: none;
}
/* Half-disc, flat left edge: the site logo's shape, single colour. */
.brand-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: var(--brand-accent);
  border-radius: 0 18px 18px 0;
}

.brand-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
}

.brand-sub {
  margin: 3px 0 0;
  color: color-mix(in oklab, #fff 84%, var(--brand-ink));
  font-size: 0.9rem;
}

.header-client {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.client-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: var(--brand-mint);
  border: 1px solid transparent;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}

.client-note { color: color-mix(in oklab, #fff 84%, var(--brand-ink)); font-size: 0.82rem; }

/* ---------- Panels ---------- */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-panel);
  margin-bottom: 22px;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.panel-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.panel-note { margin: 0; color: var(--muted-foreground); font-size: 0.84rem; }

/* ---------- Stats bar ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.summary-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-panel);
}

.summary-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.summary-value {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--brand-ink);
}

.summary-value.is-plain { color: var(--foreground); }

.summary-sub {
  margin: 6px 0 0;
  font-size: 0.79rem;
  color: var(--muted-foreground);
}

.summary-sub .split { font-family: var(--font-mono); }

/* ---------- Workspace layout ---------- */
.workspace {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* Grid children must be allowed to shrink, or the wide table forces the page
   itself to scroll sideways on narrow screens. */
.workspace > * { min-width: 0; }

.filters {
  position: sticky;
  top: 16px;
  padding: 20px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  margin-bottom: 0;
}

.filters-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.link-btn {
  border: none;
  background: none;
  padding: 0;
  color: var(--accent-2);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--brand-accent) 45%, transparent);
}
.link-btn:hover { color: var(--brand-ink); }

.filter-block { margin-bottom: 18px; }

.filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.filter-count {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent-2);
}

.modeled-tag {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-ink);
  background: var(--brand-mint);
  border: 1px solid color-mix(in oklab, var(--brand-accent) 26%, transparent);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
}

.text-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 8px 10px;
}

.text-input::placeholder { color: var(--muted-foreground); }

.text-input:focus,
.text-input:focus-visible {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.text-input-sm { padding: 5px 8px; font-size: 0.84rem; }

.range-row { display: flex; align-items: center; gap: 8px; }
.range-row .text-input { width: 100%; }
.range-dash { color: var(--muted-foreground); }

.facet-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 190px;
  overflow-y: auto;
  padding-right: 4px;
}

.facet-list-short { max-height: none; overflow: visible; }

.facet {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  padding: 3px 5px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}

.facet:hover { background: var(--brand-paper); }

.facet input { accent-color: var(--brand-accent); margin: 0; }

.facet-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.facet-n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.facet-empty { font-size: 0.82rem; color: var(--muted-foreground); padding: 4px; }

/* ---------- Switch ---------- */
.toggle-block { margin-bottom: 0; }

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }

.switch input { position: absolute; opacity: 0; pointer-events: none; }

.switch-track {
  position: relative;
  width: 38px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  background: var(--brand-paper);
  border: 1px solid var(--border);
  transition: background 140ms ease, border-color 140ms ease;
}

.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--brand-ink) 30%, transparent);
  transition: transform 140ms ease;
}

.switch input:checked + .switch-track { background: var(--brand-accent); border-color: var(--brand-accent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

.switch-label { font-size: 0.9rem; }

.filter-hint { margin: 8px 0 0; font-size: 0.76rem; color: var(--muted-foreground); }

/* ---------- Table ---------- */
.table-panel { padding: 20px 20px 10px; margin-bottom: 0; }

.table-head { margin-bottom: 14px; }

.sorts-note { max-width: 320px; text-align: right; }

.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 280px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table.targets {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

table.targets thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--brand-paper);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: bottom;
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  white-space: nowrap;
  user-select: none;
}

table.targets thead th.sortable { cursor: pointer; }

table.targets thead th.sortable:hover { color: var(--brand-accent); }

table.targets thead th .th-inner { display: inline-flex; align-items: center; gap: 5px; }

table.targets thead th.is-sorted { color: var(--brand-accent); }

.sort-arrow { font-family: var(--font-mono); font-size: 0.7rem; }

/* Numeric columns (Tenure, Headcount, Revenue, Score) line up with their cells.
   Column order is fixed in table.js COLUMNS. */
table.targets thead th:nth-child(7),
table.targets thead th:nth-child(9),
table.targets thead th:nth-child(10),
table.targets thead th:nth-child(11) { text-align: right; }

table.targets thead th:nth-child(11) .th-inner { justify-content: flex-end; }

table.targets tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--muted-foreground);
}

table.targets tbody tr:last-child td { border-bottom: none; }

table.targets tbody tr:hover td { background: color-mix(in oklab, var(--brand-accent) 5%, #fff); }

/* Column colours; the element-qualified selectors outrank the row rule above. */
table.targets tbody td.cell-company { min-width: 200px; font-weight: 500; color: var(--foreground); }

.cell-company .lic {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted-foreground);
}

.cell-name {
  min-width: 88px;
  white-space: pre-line;
  line-height: 1.35;
}

.cell-phone {
  min-width: 118px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: nowrap;
}

.cell-loc { min-width: 130px; }

.cell-loc .county { display: block; color: var(--muted-foreground); font-size: 0.76rem; }

.cell-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: right;
  white-space: nowrap;
}
table.targets tbody td.cell-num { color: var(--foreground); }

.cell-modeled .cell-range {
  color: var(--muted-foreground);
  font-weight: 400;
  font-size: 0.85em;
}

.cell-reason { min-width: 300px; max-width: 440px; line-height: 1.45; }
table.targets tbody td.cell-reason { color: var(--foreground); }

.cell-wc { white-space: nowrap; min-width: 72px; }

.cell-personnel { min-width: 140px; line-height: 1.35; }

.cell-personnel .personnel-sub {
  display: block;
  color: var(--muted-foreground);
  font-size: 0.76rem;
}

.cell-grade { white-space: nowrap; }

.cell-flags { min-width: 110px; }

/* Empty state: table.js puts one full-width .facet-empty cell in the tbody. */
table.targets tbody td.facet-empty {
  text-align: center;
  padding: 44px 16px;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  background: transparent;
}

.chip {
  display: inline-block;
  margin: 0 3px 3px 0;
  padding: 1px 7px;
  border-radius: var(--radius-xs);
  font-size: 0.71rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted-foreground);
  background: var(--brand-paper);
  border: 1px solid var(--border);
}

.chip-primary {
  color: var(--accent-2);
  background: color-mix(in oklab, var(--brand-accent) 12%, #fff);
  border-color: color-mix(in oklab, var(--brand-accent) 34%, #fff);
}

.chip-modeled {
  color: var(--brand-ink);
  background: var(--brand-mint);
  border-color: color-mix(in oklab, var(--brand-accent) 24%, transparent);
}

.chip-sold {
  color: var(--brand-ink);
  background: color-mix(in oklab, var(--brand-amber) 20%, #fff);
  border-color: color-mix(in oklab, var(--brand-amber) 48%, #fff);
}
.chip-dead { color: var(--muted-foreground); background: var(--brand-paper); }

.score {
  display: inline-block;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: center;
  color: #fff;
  background: var(--brand-accent);
}

/* Rules score 0-5, one teal ramp. Text colour flips where the fill gets dark. */
.score.s0 { background: var(--brand-paper); color: var(--muted-foreground); }
.score.s1 { background: color-mix(in oklab, var(--brand-accent) 14%, #fff); color: var(--accent-2); }
.score.s2 { background: color-mix(in oklab, var(--brand-accent) 30%, #fff); color: var(--brand-ink); }
.score.s3 { background: color-mix(in oklab, var(--brand-accent) 48%, #fff); color: var(--brand-ink); }
.score.s4 { background: color-mix(in oklab, var(--brand-accent) 70%, #fff); color: var(--brand-ink); }
.score.s5 { background: var(--brand-accent); color: #fff; }

.grade {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 500;
}

.grade-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.grade-gold .grade-dot { background: var(--brand-amber); }
.grade-silver .grade-dot { background: var(--brand-mid); }
.grade-bronze .grade-dot { background: color-mix(in oklab, var(--brand-amber) 55%, var(--brand-ink)); }
.grade-thin .grade-dot { background: color-mix(in oklab, var(--brand-mid) 55%, var(--brand-paper)); }
.grade-pts { font-family: var(--font-mono); font-weight: 400; color: var(--muted-foreground); }

tr.is-removed td { background: color-mix(in oklab, var(--brand-amber) 7%, #fff); }
tr.is-removed:hover td { background: color-mix(in oklab, var(--brand-amber) 12%, #fff); }
tr.is-removed .cell-company { font-weight: 500; }

.table-foot { display: flex; justify-content: center; padding: 12px 0 6px; }

/* ---------- Buttons (site treatment: 4px radius, .btn sizes) ---------- */
.refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--primary-foreground);
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-xs);
  padding: 0 1.35rem;
  height: 2.75rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.refresh-btn:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.refresh-btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* ---------- Notice ---------- */
.notice {
  padding: 26px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--muted-foreground);
  background: var(--brand-paper);
}

.notice code {
  font-family: var(--font-mono);
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-size: 0.86rem;
}

/* ---------- Footer (deep teal band, like the site's #problem section) ---------- */
.footer {
  margin-top: 26px;
  text-align: center;
  background: var(--brand-deep-teal);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.footer p { margin: 4px 0; }
#footer-generated {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: #fff;
}
.footer-note {
  font-size: 0.79rem;
  color: color-mix(in oklab, #fff 82%, var(--brand-deep-teal));
  max-width: 720px;
  margin: 6px auto 0;
}

/* ---------- Auth (Clerk) ---------- */
.auth-slot { margin-left: 12px; display: flex; align-items: center; }
/* Clerk overwrites the class attribute of the element it mounts into with its
   own classes, so the id selector is what keeps the card centered. That id
   rule also outranks the UA [hidden] rule, so the empty gate needs
   #signin-gate[hidden] to put it back to display:none. */
#signin-gate,
.signin-gate { display: flex; justify-content: center; width: auto; padding: 3rem 0; }
#signin-gate[hidden] { display: none; }

/* ---------- Invite gate ---------- */
.invite-gate { display: flex; justify-content: center; width: auto; padding: 3rem 0; }
.invite-gate[hidden] { display: none; }

.invite-card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: 26px 24px;
}

.invite-title {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.invite-note {
  margin: 0 0 18px;
  font-size: 0.85rem;
  color: var(--muted-foreground);
}

.invite-form { display: flex; flex-direction: column; gap: 10px; }

.invite-input {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invite-submit { align-self: flex-start; }
.invite-submit:disabled { opacity: 0.6; cursor: default; }

.invite-error { margin: 14px 0 0; font-size: 0.85rem; color: #A83A3F; }
.invite-error[hidden] { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .workspace { grid-template-columns: 1fr; }
  .filters { position: static; max-height: none; }
}

@media (max-width: 760px) {
  .page { padding: 20px 14px 44px; }
  .header { padding: 16px 18px; }
  .header-client { align-items: flex-start; }
  .brand-name { font-size: 1.3rem; }
  .table-wrap { max-height: 65vh; }
}