/* ============================================================================
   §TOOLSCAT — /tools/{slug}, the delta over the shared directory kit.
   ----------------------------------------------------------------------------
   The tool-category hub renders on v2-public-directory-listing.css — the SAME
   sheet /ai-directory and eighteen other verticals use — so the two pages
   cannot drift. This file holds only what is different about internal tools,
   and is linked AFTER that sheet so equal-specificity ties fall this way.

   There are exactly three differences:

     1. LOGOS ARE INLINE SVG, NOT <img>. Directory listings store a `logo`
        file; internal tools store an icon KEY (`pages.icon_name`) that
        App\Support\ToolIcons renders as an inline <svg> — see
        [[tool-icons-pipeline]]. The kit sizes `img` inside every logo tile and
        says nothing about `svg`, so each tile needs its glyph twin here.

     2. NO RATINGS, NO REVIEWS, NO PRICING. Internal tools carry none of the
        three, so `.dir-tc-rate` never renders and the meta row holds status +
        tag pills instead. Nothing to restyle — but see `.dir-tc-meta` below,
        which needs a min-height so a card with no pills still lines its button
        up with the card beside it.

     3. The ad zone sits BELOW the grid rather than inside it, because
        `.dir-tc` takes its hue from :nth-child(8n+x) and an <article> in the
        flow shifts every tone under it.

   Everything is scoped `.v2x.aitsy-cat` (the page's own root class) so a rule
   written here can never reach another vertical even by accident.
   ========================================================================= */

/* ── 1 · INLINE-SVG LOGO TILES ───────────────────────────────────────────────
   The kit's rules are `.dir-tc-logo img{width:60%;height:60%}` and
   `.dir-lc-logo img{width:70%;height:70%}`. A percentage would collapse an
   inline SVG that has no intrinsic box, so these are absolute — matched to the
   66px / 52px tiles they sit in. `stroke="currentColor"` on the glyph means it
   follows the tile's tone ink, which the grid tile already sets and the list
   tile did not. */
.v2x.aitsy-cat .dir-tc-logo svg { width: 30px; height: 30px; display: block; }
.v2x.aitsy-cat .dir-lc-logo     { color: var(--dtc-ink-dark); }
.v2x.aitsy-cat .dir-lc-logo svg { width: 26px; height: 26px; display: block; }

/* Hero orbit tiles. The kit sizes `img` to fill the padded box; the glyph twin
   does the same so a category with an uploaded icon and one without are the
   same size on the ring. */
.v2x.aitsy-cat .dir-hh-tile svg { width: 100%; height: 100%; display: block; color: var(--brand-blue); }
body.theme-dark .v2x.aitsy-cat .dir-hh-tile svg { color: var(--brand-blue-light); }

/* The bookmark's glyph. The kit's `.dir-tc-bk` is a 28px grid cell with no
   rule for its child, because the directory passes an <x-lucide> that carries
   width/height attributes. Ours does too — this is the belt to that braces, so
   a future markup change cannot blow the chip open. */
.v2x.aitsy-cat .dir-tc-bk svg { width: 16px; height: 16px; }

/* ── 2 · CARD META ROW ───────────────────────────────────────────────────────
   `.dir-tc-btn` is pinned with margin-top:auto so buttons line up across a
   row — but only while every card above it is the same height. The directory
   guarantees that: every listing has a rating, so `.dir-tc-meta` always has
   content. A tool may have neither a status nor a tag, so the row needs a
   floor of its own or its card's button rides up one line.
   See [[card-footer-margin-auto-trap]] for the sibling-margin version of this
   same bug. */
.v2x.aitsy-cat .dir-tc-meta { min-height: 23px; }

/* Tag pills are lower-cased content the admin typed; keep them from stretching
   a card when someone enters a long phrase. */
.v2x.aitsy-cat .dir-tc-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.v2x.aitsy-cat .dir-lc-meta .dir-tc-pill { max-width: 180px; }

/* The CTA arrow is wrapped in a <span> rather than being the svg itself, so
   the kit's `.dir-tc-btn .arr{transform:translateX(3px)}` hover has an inline
   box to move — and transform does nothing to a bare inline element. */
.v2x.aitsy-cat .dir-tc-btn .arr { display: inline-flex; align-items: center; }

/* ── 3 · AD ZONE ─────────────────────────────────────────────────────────────
   One full-width slot between the results and the pagination. */

/* ── 4 · ACTIVE HERO CHIP ────────────────────────────────────────────────────
   The hero's popular-tag chips double as a filter on this page (the directory's
   only run a search), so the one that is applied has to say so. Tokens are the
   kit's own accent pair, not new colours. */
.v2x.aitsy-cat .dir-hh-chip.is-on {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(54, 128, 237, .6);
}
body.theme-dark .v2x.aitsy-cat .dir-hh-chip.is-on {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}

/* ── 5 · EMPTY CATEGORY LINE ─────────────────────────────────────────────────
   `.dir-tc-cat` holds 17px of height whether or not there is a category, which
   is what keeps names and descriptions on the same baseline across a row. The
   placeholder span needs that height without also picking up a focus ring or a
   pointer. */
.v2x.aitsy-cat .dir-tc-cat:empty { pointer-events: none; }