/* The Tools index.
 *
 * Its own sheet, per the house rule that one feature does not edit another's
 * stylesheet.
 *
 * The rule the layout is built around: the button that RUNS something leads
 * its own side of the row and never gets pushed to the far right edge by a
 * spacer. The My To Do dock is fixed to the bottom right corner above
 * everything, and two action rows have already shipped with their button
 * underneath it. Here the row is a two-column grid, so the button's position
 * is set by the grid and not by whatever is left over.
 */

.tools-head { margin-bottom: 18px; }
.tools-head p { margin-bottom: 12px; max-width: 70ch; }

.tools-group { margin-bottom: 22px; }

.tools-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tools-group-head h3 { font-size: 15px; }

.tools-card { padding: 0; overflow: hidden; }

.tool-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.tool-row:last-child { border-bottom: none; }
.tool-row:hover { background: #f8fafc; }

/* min-width:0 is load bearing: a grid child defaults to min-width:auto and a
   long description then refuses to shrink, pushing the button off the row. */
.tool-text { min-width: 0; }
.tool-text b { display: block; margin-bottom: 2px; }
.tool-text .muted { max-width: 78ch; }

.tool-row button { white-space: nowrap; }

/* A tool that cannot run is dimmed and says why, rather than being left out.
   An absent row reads as a feature nobody built. */
.tool-off { opacity: .68; }
.tool-why { color: var(--amber, #b45309); margin-top: 3px; }

/* The listing picker. Rows rather than a select, because a deal is an address
   and a stage and a price, and a one-line option cannot show all three. */
.tool-pick { display: flex; flex-direction: column; gap: 6px; }

.tool-pick-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}

.tool-pick-row:hover { background: #f0f6ff; border-color: var(--blue); }
.tool-pick-row[disabled] { cursor: not-allowed; }
.tool-pick-row[disabled]:hover { background: #fff; border-color: var(--border); }

/* The search box and the My listings / Everyone's switch, above the groups.
   Sticky, so the box is still there after scrolling down a long stage. */
.tool-pick-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: -1px;
  z-index: 1;
  background: #fff;
  padding-bottom: 8px;
}
.tool-pick-bar input[type="search"] { flex: 1 1 260px; min-width: 0; }
.tool-pick-scope { margin: 0; }
.tool-pick-scope .chip { display: inline-flex; align-items: center; gap: 6px; }
#tool-pick-note:empty { display: none; }
#tool-pick-note { margin-bottom: 6px; }

/* One stage. Listed opens by itself; the rest start folded so the list is a
   short column of stages with counts, and searching opens every one that has
   a match. */
.tool-pick-group { margin-top: 10px; }
.tool-pick-group > summary {
  cursor: pointer;
  padding: 6px 2px;
  list-style-position: inside;
  user-select: none;
}
.tool-pick-group > .tool-pick { margin-top: 4px; }

/* 860px, NOT a number chosen for this sheet. That is where phone.css swaps
   the rail for the bottom tab bar and where three blocks in styles.css turn
   the layout over, and a sheet that picked its own breakpoint would leave a
   hundred-pixel band where the app is in phone mode and this card is not.
   Measured at 800px wide, which is inside exactly that band. */
@media (max-width: 860px) {
  /* Stacked on a handset, with the button full width under the description.
     Side by side, the description was two words per line, and a right-aligned
     button sat under the fixed My To Do dock in the bottom right corner. */
  .tool-row { grid-template-columns: 1fr; gap: 9px; }
  .tool-row button { width: 100%; }
}