/* WebSight. Product surface: dense, warm-neutral, state-rich.
   Tokens and rationale live in DESIGN.md. */

:root {
  /* Ground and surfaces, lightest recessed to lightest raised */
  --bg:       #EFE9E1;
  --well:     #E7E0D6;
  --panel:    #FBF8F4;
  --surface:  #FEFCF9;

  --ink:      #1C1917;
  --ink-2:    #57504A;
  --ink-3:    #6E665E;

  --line:     rgba(28, 25, 23, 0.13);
  --line-2:   rgba(28, 25, 23, 0.22);

  --accent:      #C2410C;
  --accent-ink:  #9A3412;
  --accent-tint: rgba(194, 65, 12, 0.09);

  /* Status. Each pairs with a word in the markup; color is never alone. */
  --st-scraped:  #3B6494;  --st-scraped-bg:  rgba(59, 100, 148, 0.10);
  --st-enriched: #6B4E8A;  --st-enriched-bg: rgba(107, 78, 138, 0.10);
  --st-built:    #4F6B45;  --st-built-bg:    rgba(79, 107, 69, 0.11);
  --st-ready:    #8A6A28;  --st-ready-bg:    rgba(138, 106, 40, 0.11);
  --st-sent:     #57504A;  --st-sent-bg:     rgba(87, 80, 74, 0.10);
  --st-failed:   #9A3412;  --st-failed-bg:   rgba(154, 52, 18, 0.09);

  --display: 'DM Serif Display', 'Hoefler Text', Georgia, serif;
  --sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 3px;
  --r:    6px;

  /* Warm-tinted, never gray. Gray shadows on a warm ground read as dirt. */
  --sh-1:  0 1px 2px rgba(64, 42, 32, .07), 0 1px 1px rgba(64, 42, 32, .05);
  --sh-2:  0 2px 4px rgba(64, 42, 32, .07), 0 4px 12px rgba(64, 42, 32, .06);
  --sh-3:  0 8px 28px rgba(64, 42, 32, .13), 0 2px 6px rgba(64, 42, 32, .08);
  --sh-in: inset 0 1px 2px rgba(64, 42, 32, .09);
  --lit:   inset 0 1px 0 rgba(255, 255, 255, .7);

  --ease: cubic-bezier(0.23, 1, 0.32, 1);

  /* Semantic z-scale. No arbitrary values anywhere in this file. */
  --z-sticky:  10;
  --z-toolbar: 20;
  --z-overlay: 30;
  --z-dialog:  40;
  --z-toast:   50;
}

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

/* A component class with its own display value outranks the UA sheet's
   [hidden] rule, so hiding by attribute silently fails. Same trap as a
   utility `hidden` losing to a later component class. */
[hidden] { display: none !important; }

html { font-size: 15px; }

body {
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.933rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Paper grain. Multiply over the ground so raised panels stay clean. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── App shell ────────────────────────────────────────────────────────────
   Fills the viewport. The results region takes the remainder and scrolls
   inside itself, so the page itself never scrolls and never runs out of
   content the way the v2 document did. */

.shell {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  height: 100dvh;
  min-height: 0;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  height: 52px;
  background: var(--panel);
  border-bottom: 1px solid var(--line-2);
  box-shadow: var(--sh-1), var(--lit);
  position: relative;
  z-index: var(--z-toolbar);
}

.wordmark {
  font-family: var(--display);
  font-size: 1.34rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.wordmark span { color: var(--accent); }

.masthead-rule { flex: 1; height: 1px; background: var(--line); }

.integrations { display: flex; align-items: center; gap: 14px; }

.integration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--line-2);
  box-shadow: var(--sh-in);
  flex: none;
}
.integration[data-on="true"]  .dot { background: var(--st-built); box-shadow: 0 0 0 2px rgba(79,107,69,.16); }
.integration[data-on="false"] .dot { background: var(--line-2); }

/* ── Control bar ────────────────────────────────────────────────────────── */

.controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-1);
  position: relative;
  z-index: var(--z-sticky);
}

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field--grow { flex: 1 1 260px; }

label, .label {
  font-family: var(--mono);
  font-size: 0.667rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

input[type="text"], select {
  font-family: var(--sans);
  font-size: 0.933rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 0 11px;
  height: 38px;
  box-shadow: var(--sh-in);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
input[type="text"]::placeholder { color: var(--ink-3); }

input[type="text"]:hover:not(:disabled), select:hover:not(:disabled) { border-color: rgba(28,25,23,.34); }

input[type="text"]:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--sh-in), 0 0 0 3px var(--accent-tint);
}

select {
  appearance: none;
  padding-right: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E665E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

input:disabled, select:disabled, button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 0.867rem;
  font-weight: 500;
  height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--sh-1);
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease),
              transform 100ms var(--ease), box-shadow 140ms var(--ease);
}
.btn:hover:not(:disabled) { background: #fff; border-color: rgba(28,25,23,.34); box-shadow: var(--sh-2); }
.btn:active:not(:disabled) { transform: scale(0.97); box-shadow: var(--sh-1); }
.btn:focus-visible { outline: none; box-shadow: var(--sh-1), 0 0 0 3px var(--accent-tint); border-color: var(--accent); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
  padding: 0 20px;
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary:hover:not(:disabled) { background: #A93709; border-color: #A93709; box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.18); }

.btn--sm { height: 28px; padding: 0 10px; font-size: 0.8rem; }

/* Touch targets stay 44px on coarse pointers without bloating the desktop UI. */
@media (pointer: coarse) {
  .btn, input[type="text"], select { min-height: 44px; }
  .btn--sm { min-height: 36px; }
}

.spinner {
  width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 999px;
  animation: spin 620ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Stats and pipeline ─────────────────────────────────────────────────── */

.readout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(280px, 1.6fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
}

.stat {
  background: var(--panel);
  padding: 11px 16px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.stat-n {
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--ink);
  transition: color 200ms var(--ease);
}
.stat[data-live="true"] .stat-n { color: var(--accent); }

.stat-k {
  font-family: var(--mono);
  font-size: 0.667rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pipeline {
  background: var(--panel);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  min-width: 0;
}

.pipeline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.pipeline-msg {
  font-family: var(--mono);
  font-size: 0.733rem;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pipeline-pct {
  font-family: var(--mono);
  font-size: 0.733rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  flex: none;
}

.track {
  height: 5px;
  background: var(--well);
  border-radius: 999px;
  box-shadow: var(--sh-in);
  overflow: hidden;
}
.fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 320ms var(--ease);
}
.fill[data-state="failed"] { background: var(--st-failed); }
.fill[data-state="done"]   { background: var(--st-built); }

.stages { display: flex; gap: 4px; }
.stage {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 5px;
  border-top: 2px solid var(--line);
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage[data-state="live"] { color: var(--accent-ink); border-top-color: var(--accent); }
.stage[data-state="done"] { color: var(--ink-2);     border-top-color: var(--st-built); }
.stage[data-state="failed"] { color: var(--st-failed); border-top-color: var(--st-failed); }

/* ── Results ────────────────────────────────────────────────────────────── */

.results {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--well);
}

.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line-2);
  flex-wrap: wrap;
}

.results-count {
  font-family: var(--mono);
  font-size: 0.733rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.scroller {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

table { width: 100%; border-collapse: separate; border-spacing: 0; }

thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--panel);
  text-align: left;
  font-family: var(--mono);
  font-size: 0.667rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 1px 0 var(--line-2);
  white-space: nowrap;
}

tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  vertical-align: middle;
}

tbody tr { transition: background-color 130ms var(--ease); }
tbody tr:hover td { background: #fff; }

.biz { font-weight: 600; color: var(--ink); line-height: 1.3; }
.biz-sub { font-size: 0.8rem; color: var(--ink-3); }

.num {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  white-space: nowrap;
}
.rating { color: var(--ink); font-weight: 500; }

.muted { color: var(--ink-3); }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 0.633rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 999px; background: currentColor; flex: none; }

.badge[data-s="scraped"]  { color: var(--st-scraped);  background: var(--st-scraped-bg); }
.badge[data-s="enriched"] { color: var(--st-enriched); background: var(--st-enriched-bg); }
.badge[data-s="built"]    { color: var(--st-built);    background: var(--st-built-bg); }
.badge[data-s="ready"]    { color: var(--st-ready);    background: var(--st-ready-bg); }
.badge[data-s="sent"]     { color: var(--st-sent);     background: var(--st-sent-bg); }
.badge[data-s="failed"]   { color: var(--st-failed);   background: var(--st-failed-bg); }

.row-actions { display: flex; gap: 5px; justify-content: flex-end; }

/* ── Skeleton, empty, error ─────────────────────────────────────────────── */

.skeleton {
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--well) 25%, #F1EBE3 50%, var(--well) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  padding: 40px 24px;
  min-height: 100%;
}

.notice-title { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.notice-body  { font-size: 0.9rem; color: var(--ink-2); max-width: 46ch; line-height: 1.6; }
.notice-hint  {
  font-family: var(--mono);
  font-size: 0.733rem;
  color: var(--ink-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 7px 11px;
  margin-top: 4px;
  max-width: 60ch;
  text-align: left;
  line-height: 1.6;
}
.notice--error .notice-title { color: var(--st-failed); }

.toast {
  position: fixed;
  bottom: 18px; left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: var(--z-toast);
  background: var(--ink);
  color: #F7F3ED;
  font-size: 0.867rem;
  padding: 10px 16px;
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.toast[hidden] { display: block !important; opacity: 0; transform: translateX(-50%) translateY(8px); pointer-events: none; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .readout { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pipeline { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .integrations { display: none; }
  .controls { padding: 12px 14px; gap: 10px; }
  .masthead, .results-bar { padding-inline: 14px; }
  .masthead { height: 46px; }

  /* Four tiles across in one compact strip. On a phone these are a glance,
     not a readout, so they give their vertical space back to the leads. */
  .readout { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat { padding: 8px 10px; }
  .stat-n { font-size: 1.05rem; }
  .stat-k { font-size: 0.6rem; letter-spacing: 0.05em; }
  .pipeline { grid-column: 1 / -1; padding: 8px 14px; gap: 5px; }
  .stages { display: none; }

  .results-bar { padding-block: 7px; }

  /* The table stops being a table. Each lead becomes a stacked card that
     keeps the same DOM and the same sort order, paired two fields to a row
     so a phone still shows more than one lead at a time. */
  thead { display: none; }
  table, tbody { display: block; width: 100%; }

  tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "biz    biz"
      "rating reviews"
      "owner  email"
      "status actions";
    gap: 2px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-1);
    margin: 9px 14px;
    padding: 11px 13px;
  }
  tbody td { display: block; border-bottom: none; padding: 0; background: none; }
  tbody td:nth-child(1) { grid-area: biz; margin-bottom: 4px; }
  tbody td:nth-child(2) { grid-area: rating; }
  tbody td:nth-child(3) { grid-area: reviews; }
  tbody td:nth-child(4) { grid-area: owner; }
  tbody td:nth-child(5) { grid-area: email; min-width: 0; overflow-wrap: anywhere; }
  tbody td:nth-child(6) { grid-area: status; align-self: center; }
  tbody td:nth-child(7) { grid-area: actions; }

  tbody td[data-col]::before {
    content: attr(data-col);
    display: block;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  tbody td:nth-child(1)::before { display: none; }
  tbody td:nth-child(6)::before { display: none; }

  tbody tr:hover td { background: none; }
  .row-actions { justify-content: flex-end; padding-top: 6px; }
}

@media (max-width: 420px) {
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  tbody tr { grid-template-columns: 1fr; grid-template-areas: "biz" "rating" "reviews" "owner" "email" "status" "actions"; }
  tbody tr { grid-template-columns: 1fr 1fr; grid-template-areas: "biz biz" "rating reviews" "owner owner" "email email" "status actions"; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}