/*
 * 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, at the same --slip-scale
 * and 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: calc(var(--space-3) * var(--slip-scale));
}

.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: calc(var(--space-4) * var(--slip-scale));
  min-height: calc(150px * var(--slip-scale));
  padding: calc(var(--space-4) * var(--slip-scale));
  border-radius: calc(18px * var(--slip-scale));
  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 999px rgb(var(--text-rgb) / 0.04);
}

.tools-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--space-2) * var(--slip-scale));
}

/* The Add More Values teaser's icon box, as the card's mark. */
.tools-card__icon {
  display: grid;
  place-items: center;
  width: calc(40px * var(--slip-scale));
  height: calc(40px * var(--slip-scale));
  border-radius: calc(12px * var(--slip-scale));
  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(20px * var(--slip-scale));
  padding: 0 calc(8px * var(--slip-scale));
  border-radius: var(--radius-full);
  font-size: calc(var(--text-2xs) * var(--slip-scale));
  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: 2px;
  min-width: 0;
}

.tools-card__title {
  color: var(--text);
  font-size: calc(var(--text-xl) * var(--slip-scale));
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.tools-card__sub {
  color: var(--text-muted);
  font-size: calc(var(--text-sm) * var(--slip-scale));
  font-weight: var(--weight-medium);
  line-height: 1.3;
}

/* 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: calc(var(--space-3) * var(--slip-scale));
  min-height: calc(120px * var(--slip-scale));
  padding: calc(12px * var(--slip-scale));
}

.tools[data-density="3"] .tools-card__title {
  font-size: calc(var(--text-md) * var(--slip-scale));
}

.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);
}