/*
 * SureTOOLS (SureTools.js) — the toolkit tab's one screen.
 *
 * Drawn in the Slip Builder's vocabulary on purpose: the root carries `.slip`
 * as well as `.tools`, so the header card, the counter blob, the category
 * pills, the section labels, the teaser row and the toasts are the very same
 * rules in slip-builder.css and slip-controls.css, on the same motion
 * scale. Only what a launcher adds that a form does
 * not is here: the tool cards and their tags. The category rail is the
 * shared `.slip-rail` in slip-controls.css.
 *
 * Separation is tonal, as on the Slip Builder — white cards on the off-white
 * page, the sunken grey inside them — and nothing casts a shadow.
 */

/* --- Tool cards ---------------------------------------------------------------- */

/* Two a row by default; the dev switch on the heading sets three. */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.tools[data-density="3"] .tools-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * The strategy card's frame — the same radius, padding, height and press —
 * without its radio semantics: a tool is launched, not selected, so there is
 * no lifted state and no accent border.
 */
.tools-card {
  --press-scale: 0.97;

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--space-3);
  min-height: calc(128px * var(--scale));
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

/* Touch-down darkens the fill a few percent, as every slip control does. */
.tools-card[data-pressed="true"] {
  box-shadow: inset 0 0 0 calc(999px * var(--scale)) rgb(var(--text-rgb) / 0.04);
}

.tools-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-15);
}

/* The Add More Values teaser's icon box, as the card's mark. */
.tools-card__icon {
  display: grid;
  place-items: center;
  width: var(--control-sm);
  height: var(--control-sm);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

/* The launch beat: the strategy dot's pop, on the mark, on tap. */
.tools-card[data-anim="select"] .tools-card__icon {
  animation: slip-dot-pop var(--sd-pop) var(--se-spring);
}

/* The "Tuned by Banker-Led" chip's size, in three tones. */
.tools-card__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: calc(17px * var(--scale));
  padding: 0 var(--space-15);
  border-radius: var(--radius-full);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.tools-card__tag[data-tag="new"] {
  background: var(--accent-tint);
  color: var(--accent);
}

.tools-card__tag[data-tag="pro"] {
  background: var(--gold-bg);
  color: var(--gold);
}

.tools-card__tag[data-tag="soon"] {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.tools-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
}

.tools-card__title {
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
}

.tools-card__sub {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

/* Three a row: a third of the frame is too narrow for a line under the title,
   so the card tightens to its mark and its name. */
.tools[data-density="3"] .tools-card {
  gap: var(--space-2);
  min-height: calc(102px * var(--scale));
  padding: var(--space-2);
}

.tools[data-density="3"] .tools-card__title {
  font-size: var(--text-sm);
}

.tools[data-density="3"] .tools-card__sub {
  display: none;
}

/* --- Request a tool --------------------------------------------------------------- */

/* The teaser row leads somewhere rather than opening, so its chevron points on. */
.tools-request__chevron {
  transform: rotate(-90deg);
}