/* Let seller grade comps, agent side.
   The seller's own page carries its own styles inline, in server/gradepage.js,
   because it is served to a phone with no app stylesheet and nothing here
   reaches it. One CSS file per feature, so two features never edit the same
   stylesheet. */

.gcmp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line, #e5e9f0);
}
.gcmp-row:last-child { border-bottom: 0; }

.gcmp-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.gcmp-pick {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line, #e5e9f0);
  border-radius: 8px;
  padding: 6px 10px;
}

.gcmp-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
  cursor: pointer;
}
.gcmp-opt input { margin-top: 4px; flex: 0 0 auto; }
.gcmp-opt span { min-width: 0; }

/* The picked list and the source list can both be long. The modal already
   scrolls; this stops the two of them turning it into one very long scroll
   with no landmark in it. */
/* 420 rather than 200 since the photo strips: a picked row is now about
   130px tall, and 200 showed a comp and a half. */
#gcmp-picked { max-height: 420px; overflow-y: auto; }

/* The column mapper. Shown whenever the server has split a header, including
   when the parse failed, because that is exactly when it is needed. */
.gcmp-map {
  border: 1px solid var(--line, #e5e9f0);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--bg-soft, #f7f9fc);
}
.gcmp-maprow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.gcmp-mapcell {
  flex: 0 0 42%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.gcmp-maprow select { flex: 1; min-width: 0; }

/* The picked list carries the order and the condition line, because those two
   are where the agent's argument actually lives. */
.gcmp-picked-row { align-items: flex-start; }
.gcmp-ord { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.gcmp-ord button { line-height: 1; padding: 1px 6px; }
.gcmp-ord button[disabled] { opacity: .3; cursor: default; }
.gcmp-note { width: 100%; margin-top: 4px; font-size: 13px; }

/* Sold or still competing. Worth a glance in the picked list, because which
   of the two a card is changes what the reveal says. */
.gcmp-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  vertical-align: 1px;
}
.gcmp-tag.sold { background: #eef2f7; color: #5b6b80; }
.gcmp-tag.live { background: #e6f0ff; color: #1d4ed8; }

/* Both paste boxes fill the column. Without this they take the textarea's
   default `cols` width, which looks merely odd on a desktop and leaves a
   phone typing into a box narrower than half the screen, with the button
   stranded beside it. Found at 375px once the phone layout landed. */
.gcmp-card textarea,
#gcmp-adv,
#gcmp-paste,
#gcmp-cap {
  width: 100%;
  display: block;
  resize: vertical;
}

/* The photo strip on a picked comp. Every photo the capture brought is here;
   the numbered ones are on the card, in that order. It scrolls sideways so a
   24-photo listing costs one row of height, not four. */
.gcmp-shots {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-top: 6px;
  padding-bottom: 4px;
}
.gcmp-shot {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 63px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-soft, #f0f3f8);
  cursor: pointer;
  opacity: .45;
}
.gcmp-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcmp-shot.on { border-color: var(--accent, #1d4ed8); opacity: 1; }
.gcmp-shot b {
  position: absolute;
  top: 3px;
  left: 3px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent, #1d4ed8);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.gcmp-shot:not(.on) b { display: none; }
/* A photo the relay could not fetch: gone from the CDN, or never there. The
   seller's page goes through the same relay and will not show it either, so
   it says so here, where the agent can take it off the card. */
.gcmp-shot.dead img { visibility: hidden; }
.gcmp-shot.dead::after {
  content: 'did not load';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--muted, #5b6b80);
}

/* A captured home that matched none of the picked comps. */
.gcmp-unmatched {
  border: 1px solid var(--line, #e5e9f0);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
}
.gcmp-unmatched .gcmp-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}
.gcmp-unmatched .gcmp-inline input { width: 110px; }
.gcmp-unmatched .gcmp-inline select { max-width: 100%; }