/* Hub /outils/ and category pages on the LE LABO IA design system: search and filters,
   catalogue by category, tool cards with their logo, free account invitation.
   Sources: .dev/outils-pipeline/template-hub.html, template-category.html, _tool-card.html.
   Classes mdy-outils-*, tokens only. Tool pages use tool-detail.css. */

/* 1. Shared pieces: label, logo tile, tool card. */
.mdy-outils-label {
  display: inline-flex;
  align-items: center;
  gap: var(--labo-space-2);
  margin: 0;
  color: var(--labo-glow-start);
  font-family: var(--labo-font-mono);
  font-size: var(--labo-font-size-caption);
  font-weight: var(--labo-font-weight-medium);
  letter-spacing: var(--labo-letter-spacing-label);
  text-transform: uppercase;
}
.mdy-outils-logo {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--labo-control-md);
  height: var(--labo-control-md);
  overflow: hidden;
  border: var(--labo-border-width-hairline) solid var(--labo-border-strong);
  border-radius: var(--labo-radius-sm);
  background: var(--labo-canvas);
  color: var(--labo-text);
  font: var(--labo-font-weight-bold) var(--labo-font-size-lead) / 1 var(--labo-font-display);
}
.mdy-outils-logo img { display: block; width: 100%; height: 100%; padding: 14%; object-fit: contain; }
.mdy-outils-logo[data-plate="light"] { border-color: var(--labo-palette-line); background: var(--labo-palette-paper); color: var(--labo-palette-ink); }

.mdy-outils-card { height: 100%; align-content: start; background: var(--labo-canvas); }
.mdy-outils-card__head { display: flex; align-items: center; gap: var(--labo-space-3); min-width: 0; }
.mdy-outils-card__head .mdy-card__title { min-width: 0; font-size: var(--labo-font-size-lead); overflow-wrap: anywhere; }
.mdy-outils-card .mdy-card__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.mdy-outils-card__tags { display: flex; flex-wrap: wrap; gap: var(--labo-space-2); margin: 0; }
a.mdy-outils-card:hover .mdy-card__title { color: var(--mdy-link); }

/* 2. Category page heading. */
.mdy-outils-head { padding-block: var(--labo-space-8); }
.mdy-outils-back { justify-self: start; min-height: var(--labo-target-min); color: var(--labo-text-muted); font-weight: var(--labo-font-weight-medium); }
.mdy-outils-eyebrow { display: inline-flex; align-items: center; gap: var(--labo-space-2); }
.mdy-outils-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.mdy-outils-cards > li { display: grid; }

/* 3. Hub heading: promise and numbers, the largest categories beside them. */
.mdy-outils-hub-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: var(--labo-space-8) var(--mdy-gutter);
}
.mdy-outils-hub-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -50% -10% auto 10%;
  height: 120%;
  background: radial-gradient(closest-side, var(--labo-glow-halo), transparent);
  opacity: 0.7;
  pointer-events: none;
}
.mdy-outils-hub-hero__grid { display: grid; gap: var(--labo-space-7); align-items: center; max-width: var(--labo-container-content); margin-inline: auto; }
.mdy-outils-hub-hero__grid > * { min-width: 0; }
.mdy-outils-hub-hero__copy { display: grid; gap: var(--labo-space-4); }
.mdy-outils-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--labo-space-3);
  max-width: 560px;
  margin: var(--labo-space-3) 0 0;
}
.mdy-outils-stats > div {
  display: grid;
  align-content: start;
  gap: var(--labo-space-2);
  padding: var(--labo-space-4);
  border: var(--labo-border-width-hairline) solid var(--labo-border);
  border-radius: var(--labo-radius-md);
  background: color-mix(in srgb, var(--labo-surface) 80%, transparent);
}
.mdy-outils-stats dt { color: var(--labo-text-muted); font-family: var(--labo-font-mono); font-size: var(--labo-font-size-caption); letter-spacing: var(--labo-letter-spacing-label); text-transform: uppercase; }
.mdy-outils-stats dd { order: -1; margin: 0; font-family: var(--labo-font-display); font-size: var(--labo-font-size-title-1); font-weight: var(--labo-font-weight-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.mdy-outils-mix {
  display: grid;
  gap: var(--labo-space-4);
  padding: var(--labo-space-6) var(--labo-space-5);
  border: var(--labo-border-width-hairline) solid var(--labo-border-strong);
  border-radius: var(--labo-radius-lg);
  background: var(--labo-surface);
  box-shadow: 0 var(--labo-space-6) var(--labo-space-9) calc(-1 * var(--labo-space-6)) var(--labo-glow-halo);
}
.mdy-outils-mix ol { display: grid; gap: var(--labo-space-1); margin: 0; padding: 0; list-style: none; }
.mdy-outils-mix ol a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--labo-space-2) var(--labo-space-3);
  padding-block: var(--labo-space-2);
  color: var(--labo-text);
  text-decoration: none;
}
.mdy-outils-mix ol a > span { font-weight: var(--labo-font-weight-semibold); }
.mdy-outils-mix ol a:hover > span { color: var(--mdy-link); }
.mdy-outils-mix b { font-family: var(--labo-font-display); font-size: var(--labo-font-size-lead); font-variant-numeric: tabular-nums; }
.mdy-outils-mix small { color: var(--labo-text-muted); font-family: var(--labo-font-body); font-size: var(--labo-font-size-caption); font-weight: var(--labo-font-weight-medium); }
.mdy-outils-mix i { position: relative; grid-column: 1 / -1; height: var(--labo-space-1); overflow: hidden; border-radius: var(--labo-radius-pill); background: var(--labo-hover); }
.mdy-outils-mix i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--mdy-outils-bar);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--labo-glow-start), var(--labo-glow-end));
}
.mdy-outils-mix .mdy-link { justify-self: start; min-height: var(--labo-target-min); }
@media (min-width: 1000px) {
  .mdy-outils-hub-hero { padding-block: var(--labo-space-9) var(--labo-space-8); }
  .mdy-outils-hub-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: var(--labo-space-8); }
}

/* 4. Search and filters. The decision steps and secondary filters step aside during a query. */
.mdy-outils-discovery { gap: var(--labo-space-4); }
.mdy-outils-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--labo-space-3); align-items: center; }
.mdy-outils-search-row > .mdy-outils-search { max-width: none; }
.mdy-outils-search .labo9-input { min-height: var(--labo-control-lg); border-radius: var(--labo-radius-pill); background: var(--labo-canvas); }
.mdy-outils-hub [data-discovery-clear][hidden] { display: none; }
.mdy-outils-filters, .mdy-outils-filter-options { display: flex; flex-wrap: wrap; gap: var(--labo-space-2); }
.mdy-outils-filters .mdy-chip, .mdy-outils-filter-options .mdy-chip { min-height: var(--labo-target-min); }
.mdy-outils-refine {
  border: var(--labo-border-width-hairline) solid var(--labo-border);
  border-radius: var(--labo-radius-md);
  background: var(--labo-canvas);
}
.mdy-outils-refine summary {
  display: flex;
  align-items: center;
  gap: var(--labo-space-2);
  min-height: var(--labo-target-min);
  padding: var(--labo-space-2) var(--labo-space-4);
  border-radius: var(--labo-radius-md);
  font-weight: var(--labo-font-weight-semibold);
  list-style: none;
  cursor: pointer;
}
.mdy-outils-refine summary::-webkit-details-marker { display: none; }
.mdy-outils-refine summary .labo9-icon:last-child { margin-inline-start: auto; color: var(--labo-text-muted); transition: transform var(--labo-motion-fast); }
.mdy-outils-refine[open] summary .labo9-icon:last-child { transform: rotate(180deg); }
.mdy-outils-refine summary:hover { background: var(--labo-hover); }
.mdy-outils-refine__content { display: grid; gap: var(--labo-space-5); padding: var(--labo-space-3) var(--labo-space-4) var(--labo-space-5); }
.mdy-outils-filter-group { display: grid; gap: var(--labo-space-2); }
[data-discovery-has-query="true"] .mdy-outils-filters,
[data-discovery-has-query="true"] .mdy-outils-refine,
[data-discovery-has-query="true"] .mdy-outils-decision {
  display: none;
}
.mdy-outils-hub:has(.mdy-chip[aria-current="true"]) .mdy-outils-decision { display: none; }

/* 5. Decision steps. */
.mdy-outils-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--labo-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdy-outils-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--labo-space-2) var(--labo-space-4);
  align-content: start;
  padding: var(--labo-space-5);
  border: var(--labo-border-width-hairline) solid var(--labo-border);
  border-radius: var(--labo-radius-lg);
  background: var(--labo-surface);
}
.mdy-outils-steps b {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: var(--labo-control-lg);
  height: var(--labo-control-lg);
  border: var(--labo-border-width-hairline) solid var(--labo-border-strong);
  border-radius: var(--labo-radius-pill);
  color: var(--labo-glow-start);
  font: var(--labo-font-weight-medium) var(--labo-font-size-lead) / 1 var(--labo-font-mono);
}
.mdy-outils-steps h3 { margin: 0; font-size: var(--labo-font-size-title-3); }
.mdy-outils-steps p { margin: 0; color: var(--labo-text-muted); line-height: var(--labo-line-height-reading); }

/* 6. Catalogue by category. */
.mdy-outils-empty {
  padding: var(--labo-space-7) var(--labo-space-5);
  border: var(--labo-border-width-hairline) dashed var(--labo-border-strong);
  border-radius: var(--labo-radius-lg);
  color: var(--labo-text-muted);
  text-align: center;
}
.mdy-outils-catalog { display: grid; scroll-margin-top: calc(var(--mdy-header-height) + var(--labo-space-5)); }
.mdy-outils-section {
  display: grid;
  gap: var(--labo-space-5);
  padding-block: var(--labo-space-6);
  border-top: var(--labo-border-width-hairline) solid var(--labo-border);
  scroll-margin-top: calc(var(--mdy-header-height) + var(--labo-space-4));
}
.mdy-outils-section:first-child { padding-top: 0; border-top: 0; }
.mdy-outils-section__head { display: flex; align-items: center; gap: var(--labo-space-3); }
.mdy-outils-section__head h3 { margin: 0; font-size: clamp(var(--labo-font-size-title-3), 2.4vw, var(--labo-font-size-heading)); }
.mdy-outils-section__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--labo-control-lg);
  height: var(--labo-control-lg);
  border-radius: var(--labo-radius-sm);
  color: var(--labo-glow-start);
  background: color-mix(in srgb, var(--labo-glow-start) 12%, transparent);
}

/* Free account invitation of the historical category page (ia-generative.html). */
.mdy-outils-ask__title { margin: 0; font-family: var(--labo-font-display); font-size: var(--labo-font-size-heading); font-weight: var(--labo-font-weight-bold); line-height: var(--labo-line-height-snug); text-wrap: balance; }

/* 7. Further reading tiles. */
.mdy-outils-further {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--labo-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdy-outils-further > li { display: grid; }
.mdy-outils-tile { height: 100%; }
.mdy-outils-tile__icon {
  display: grid;
  place-items: center;
  width: var(--labo-control-lg);
  height: var(--labo-control-lg);
  border-radius: var(--labo-radius-sm);
  color: var(--labo-glow-start);
  background: color-mix(in srgb, var(--labo-glow-start) 12%, transparent);
}

@media (max-width: 640px) {
  .mdy-outils-head, .mdy-outils-hub-hero { padding-block: var(--labo-space-7); }
  .mdy-outils-stats dd { font-size: var(--labo-font-size-title-2); }
  .mdy-outils-stats > div { padding: var(--labo-space-3); }
  .mdy-outils-search-row { grid-template-columns: minmax(0, 1fr); }
  .mdy-outils-search-row .labo9-button { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .mdy-outils-refine summary .labo9-icon:last-child { transition: none; }
}