/* ==========================================================================
   Tools
   Loaded after main.css, on the Tools page only. It is built from main.css's
   own tokens and components (the page hero, the service cards, the tag, the
   search field), so nothing in main.css changes. These rules only add what a
   directory of logos needs: the search bar, the category list beside the
   results, a tile for each logo, and a quiet card for a tool that is coming.
   ========================================================================== */

/* ---------- The bar: search and count ---------- */
.tools__bar { display: grid; gap: 12px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.tools__search .field__box { height: 58px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-sm); }
.tools__search input { font-size: 1.04rem; }
.tools__count { margin: 0; text-align: right; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .04em; color: var(--ink-4); }

/* ---------- Categories beside the results ---------- */
.tools__grid { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.tools__side { position: sticky; top: 112px; }
.tools__label { margin: 0 0 12px 14px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.tools__cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tools__cat {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 10px 14px; border: 0; border-radius: 12px; cursor: pointer; text-align: left;
  background: transparent; font: inherit; font-size: .96rem; color: var(--ink-2);
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.tools__cat small { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-4); }
.tools__cat:hover { background: var(--paper-2); color: var(--ink); }
.tools__cat[aria-pressed="true"] { background: var(--white); color: var(--ink); font-weight: 560; box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-sm); }
.tools__cat:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Two groups: available now, coming soon ---------- */
.tools__main { display: grid; gap: clamp(36px, 4.4vw, 60px); min-width: 0; }
.tools__group[hidden], .tools [data-item][hidden], .tools__empty[hidden] { display: none; }
.tools__ghead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 18px; }
.tools__gtitle { margin: 0; font-size: 1.32rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; display: inline-flex; align-items: center; gap: 10px; }
.tools__gtitle small { font-family: var(--f-mono); font-size: .74rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-4); }
.tools__gnote { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-3); }

/* A tool is the site's own service card, with its logo in a tile instead of an icon. */
.tools .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tools__card { position: relative; }
.tools__logo {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-sm);
}
.tools__logo svg { width: 26px; height: 26px; fill: currentColor; }

/* A tool that is coming does not lift or look clickable: it is not a link. */
.tools__card--soon:hover { transform: none; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
.tools__tag { position: absolute; top: 22px; right: 22px; }
.tag--soon { background: var(--blue-50); color: var(--blue-700); box-shadow: inset 0 0 0 1px var(--blue-100); }

.tools__empty { padding: clamp(28px, 4vw, 48px); border-radius: 22px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.tools__empty p { margin: 0 auto; max-width: 34rem; line-height: 1.6; color: var(--ink-2); }
.tools__empty p + p { margin-top: 10px; color: var(--ink-3); font-size: .95rem; }
.tools__fine { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--ink-4); }

/* The note about asking for a tool that is not here. */
.tools__ask code { padding: 2px 7px; border-radius: 6px; background: var(--paper-2); font-family: var(--f-mono); font-size: .88em; color: var(--ink); }

/* ---------- Narrow screens ---------- */
@media (max-width: 1040px) {
  .tools .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .tools__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tools__side { position: static; }
  .tools__label { margin-left: 0; }
  .tools__cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .tools__cats::-webkit-scrollbar { display: none; }
  .tools__cats li { flex: none; }
  .tools__cat { width: auto; gap: 8px; white-space: nowrap; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); }
  .tools__cat[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
  .tools__cat[aria-pressed="true"] small { color: rgba(255, 255, 255, .62); }
}
@media (max-width: 680px) {
  .tools .svc-grid { grid-template-columns: minmax(0, 1fr); }
}