/* The Listing checks card on a deal, and the frame the tools open in.
   One sheet for the whole family, because the four tools are deliberately one
   shape and four sheets would let them drift apart. */

.lc-card { margin-top: 12px; }

.lc-list { display: flex; flex-direction: column; gap: 0; padding: 4px 16px 10px; }

/* A row per tool: what it answers on the left, the way in on the right. The
   name and the sentence under it are the whole pitch, so the sentence says
   what question the tool answers rather than what the tool is called again. */
.lc-tool { display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--border); }
.lc-tool:last-child { border-bottom: 0; }
.lc-tool-text { flex: 1; min-width: 0; }
.lc-tool-text b { display: block; }
.lc-tool .btn { flex: none; }

/* The instructions above the frame. Open by default and collapsible, because
   the first person to open a tool needs every line and the fifth needs none of
   them, and a scroll past four steps to reach the tool is its own small tax. */
.lc-how { margin: 0 0 10px; }
.lc-how > summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 2px 0; }
.lc-steps { margin: 6px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.55; }
.lc-steps li { margin-bottom: 3px; }
.lc-steps b { font-weight: 600; }
.lc-note { margin: 8px 0 0; }
/* The warning uses the app's own .banner.warn rather than a colour of its own,
   so a tool that cannot be finished looks like every other thing in this app
   that cannot be finished. */
.lc-how .banner { margin: 8px 0 0; }

/* Loading a file into the framed page from out here, for a report page that
   has no way in of its own. */
.lc-load { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.lc-load .lc-bad { color: #b91c1c; font-weight: 600; }

/* Matches the RepairScope frame: these are single-screen tools and the modal
   is the whole point of not sending the agent off to another tab. */
.lc-body { padding-bottom: 0; }
.lc-frame {
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 440px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

@media (max-width: 620px) {
  .lc-tool { flex-direction: column; align-items: stretch; gap: 8px; }
  .lc-tool .btn { width: 100%; }
}

/* The CompScope verdict on a deal card. One line, because the card is a
   summary: the report itself is one click away and carries the reasoning. */
.cs-verdict-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px; }