/* =============================================================================
   AIToolsay — Related Tools section  (tool pages)
   -----------------------------------------------------------------------------
   The "more from this category" block that closes every tool page. Markup lives
   in livewire/public/pages.blade.php (the `type == 'tool'` branch) and is tagged
   `.aitrt-sec`; this file is @once'd from that same branch, so it never loads on
   a non-tool page.

   ── THE HEADER BAND IS COLOUR-AGNOSTIC — read before editing ──────────────
   Its fill comes from an ADMIN SETTING (Settings → Background for Related
   Tools), which prints a Tabler class like `.bg-red` onto the header, and those
   set `background-color … !important`. So nothing here may declare a
   background-color: the admin's choice would be ignored or fought. All depth is
   built from `background-image` (white/black alpha gradients) + currentColor,
   which layers over ANY base hue. Same contract as ai-tool-hero.css.
   (Site quirk: the live value is `bg-red` and it paints BLUE — the whole Tabler
   palette is remapped to the brand in custom.ltr.css. Don't "fix" the name.)

   ── SPECIFICITY NOTES — three live rules have to be cleared ────────────────
     premium-article.css  #tool-box .card > .card-header .card-title
                          (1,3,0) !important  → matches this h3 too, because the
                          section sits inside #tool-box. Beaten with (1,5,0)
                          + !important via the extra `.aitrt-head`.
     floating-widgets     `.card a:hover{color:#2060C0}` (0,2,0), and it is an
                          INLINE <style> before </body>, so it wins every tie.
                          Everything here carries `#tool-box` → (1,x,0).
     custom.ltr.css       body:not(.admin-shell):not(.theme-dark) a:focus-visible
                          (0,3,2) — kills the outline and rings with a generic
                          box-shadow, light mode only. The focus rule below is
                          (1,4,1) and rings with box-shadow rather than fighting
                          the outline reset (same trap as the Generate CTA).

   Logical properties throughout + a --rt-dir flip so RTL mirrors correctly.
   ========================================================================== */

#tool-box .aitrt-sec {
  --rt-1: #4C8DF2;
  --rt-2: #3680ED;
  --rt-3: #2060C0;
  --rt-glow: 54, 128, 237;
  --rt-surface: #fff;
  --rt-surface-2: #F8FAFE;
  --rt-line: #e6ebf3;
  --rt-ink: #16202c;
  --rt-ink-2: #5b6779;
  --rt-tint: rgba(54, 128, 237, .09);
  --rt-dir: 1;
}
[dir="rtl"] #tool-box .aitrt-sec { --rt-dir: -1; }

/* ── HEADER BAND ────────────────────────────────────────────────────────────
   background-IMAGE only. A soft light source top-left, a gentle shade at the
   bottom, plus a clipped bloom on the trailing edge. */
#tool-box .aitrt-sec > .card > .card-header.aitrt-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 18px 22px;
  border: 0;
  border-radius: 10px 10px 0 0;
  background-image:
    radial-gradient(125% 150% at 8% -35%, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .13));
  transition: background-image .35s ease;
}

#tool-box .aitrt-sec > .card > .card-header.aitrt-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -70%;
  inset-inline-end: -6%;
  inline-size: 280px;
  block-size: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
  transition: transform .5s cubic-bezier(.2, .8, .3, 1), opacity .4s ease;
}

/* The header carries Bootstrap `d-block`, so the flex row is a child. */
#tool-box .aitrt-sec .aitrt-head-in {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Glass tile — same language as the tool hero's icon chip. */
#tool-box .aitrt-sec .aitrt-head-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38),
              0 8px 18px -8px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
              background .25s ease, box-shadow .25s ease;
}
#tool-box .aitrt-sec .aitrt-head-ic svg { inline-size: 22px; block-size: 22px; display: block; }

#tool-box .aitrt-sec .aitrt-head-txt { flex: 1 1 auto; min-inline-size: 0; }

/* !important + (1,5,0) to clear premium-article.css — see the header note. */
#tool-box .aitrt-sec > .card > .card-header.aitrt-head .card-title {
  margin: 0 0 2px !important;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  color: #fff !important;
  /* wrap, never clip — there is no ellipsis anywhere in this component */
  overflow-wrap: anywhere;
}
/* !important because the band also carries Bootstrap's `.text-white`
   (color:#fff !important), which would otherwise flatten the hierarchy. */
#tool-box .aitrt-sec .aitrt-head-sub {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, .82) !important;
  overflow-wrap: anywhere;
}

/* ── BODY / GRID ────────────────────────────────────────────────────────────
   Explicit column steps, not auto-fit: the item count is admin-configurable
   (Settings → Number of Related Tools), and auto-fit picks tracks that leave
   stray orphans at tablet width. 1 / 2 / 3 is predictable at every count. */
#tool-box .aitrt-sec .aitrt-body {
  padding: 18px 20px 20px;
  /* background-IMAGE only, so it layers over whatever the card surface is in
     either theme — a faint wash that lifts the tiles off the panel. */
  background-image: radial-gradient(120% 90% at 50% -20%, rgba(var(--rt-glow), .05), rgba(var(--rt-glow), 0) 60%);
}

#tool-box .aitrt-sec .aitrt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@media (min-width: 576px) {
  #tool-box .aitrt-sec .aitrt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  #tool-box .aitrt-sec .aitrt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── CARD ───────────────────────────────────────────────────────────────── */
#tool-box .aitrt-sec .aitrt-card {
  position: relative;
  /* VISIBLE, deliberately — the corner ribbon has to overhang the top-inline-end
     corner or its folded tails get bitten off by the border radius, which is the
     whole thing that makes it read as a ribbon rather than a painted triangle.
     The hover sheen still needs clipping, so it lives on `.aitrt-fx` below,
     which carries its own overflow:hidden. Do not put `overflow:hidden` back
     here without moving the ribbon somewhere else first. */
  overflow: visible;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 13px;
  min-block-size: 74px;
  padding: 14px 15px;
  border: 1.5px solid var(--rt-line);
  border-radius: 14px;
  background-color: var(--rt-surface);
  /* Specular gloss on the top ~45%, then a faint brand wash at the foot. Done
     as ONE background-image on the card, not a ::before overlay: an overlay of
     white-on-white is invisible in light mode and only ever showed up in dark,
     which is exactly what a gradient stop does for free.
     NOT an accent bar, and don't turn it into one — a solid 3px rule cannot
     follow a 14px corner radius. That was tried on the trust strip and on the
     prompt composer and rejected on sight both times. */
  background-image: linear-gradient(180deg,
      rgba(255, 255, 255, .7) 0%,
      rgba(255, 255, 255, 0) 45%,
      rgba(var(--rt-glow), .03) 100%);
  box-shadow: 0 1px 2px rgba(16, 26, 40, .04);
  text-decoration: none;
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1),
              border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Clipping layer for the hover sheen. It exists because the CARD is
   overflow:visible (see above) — without it the sheen would be seen parked off
   the leading edge at rest and would fly out past the card while sweeping.
   `border-radius: inherit` keeps it on the card's curve at every breakpoint. */
#tool-box .aitrt-sec .aitrt-fx {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

/* Hover sheen sweep — parked off the leading edge, crosses on hover. */
#tool-box .aitrt-sec .aitrt-fx::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  transform: skewX(-16deg);
  opacity: 0;
  pointer-events: none;
}

/* ── ICON TILE ──────────────────────────────────────────────────────────── */
#tool-box .aitrt-sec .aitrt-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 12px;
  background: var(--rt-tint);
  color: var(--rt-2);
  transition: background .22s ease, color .22s ease,
              transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease;
}
#tool-box .aitrt-sec .aitrt-ic svg {
  display: block;
  inline-size: 21px;
  block-size: 21px;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── TEXT ───────────────────────────────────────────────────────────────────
   A wrapping flex so the NEW pill sits AFTER the name when there is room and
   drops to the next line when there isn't. Putting the badge inside the title
   element instead makes it the thing that gets clipped on a narrow card — that
   failure has been hit repeatedly in the mega menus. */
#tool-box .aitrt-sec .aitrt-txt {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
}
#tool-box .aitrt-sec .aitrt-name {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--rt-ink);
  /* Tool names run long ("AI Emergency Preparedness Kit List"). Wrap them. */
  overflow-wrap: anywhere;
  transition: color .2s ease;
}

/* ── NEW RIBBON ─────────────────────────────────────────────────────────────
   A folded corner banner across the top-inline-end corner. Same family as the
   old `.ribbon-wrapper` it replaces, rebuilt: brand-grade gradient instead of a
   flat `--tblr-red`, a specular highlight, a shaded fold, a cast shadow that
   follows the clipped silhouette, and a hover response.

   TWO ELEMENTS, and both are load-bearing:
     .aitrt-ribbon         carries the drop-shadow.
     .aitrt-ribbon::before carries the geometry (clip-path + mask).
   They cannot be merged. `clip-path` and `mask` cut the element's own shadow
   away with it, so a box-shadow here would be invisible — the shadow has to sit
   on a parent, as a `filter: drop-shadow()`, which is applied to the already-
   clipped result and so traces the actual fold rather than a rectangle.

   COLOUR IS ONE TOKEN. Change --rb-1/2/3 + --rb-glow together to restyle it.
   Brand blue would be   #5C9BF5 / #3680ED / #2060C0, glow 54,128,237.
   Emerald would be      #34D399 / #10B981 / #059669, glow 16,185,129.
   Red is kept because a "new" flag has to out-shout a page whose every other
   accent is already brand blue — including this card's own icon tile. */
#tool-box .aitrt-sec .aitrt-ribbon {
  --rb-d: 7px;              /* fold depth — also drives the mask's diagonal */
  --rb-1: #FF7A72;
  --rb-2: #EE3B44;
  --rb-3: #C4162A;
  --rb-glow: 196, 22, 42;

  position: absolute;
  z-index: 3;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 0;
  block-size: 0;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(var(--rb-glow), .35));
  transition: filter .22s ease;
}

#tool-box .aitrt-sec .aitrt-ribbon::before {
  content: attr(data-ribbon);
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  /* 29.29% is (1 - cos45°): the exact offset that lands a 45° band on the
     corner. Don't round it — the tails stop meeting the edges if you do. */
  transform: translate(29.29%, -100%) rotate(45deg);
  transform-origin: bottom left;
  padding: 3px 24px calc(var(--rb-d) + 3px);

  font-family: inherit;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 1px 1.5px rgba(90, 6, 16, .5);

  background:
    /* the fold, shaded so the tails read as tucked behind the card */
    linear-gradient(rgba(0, 0, 0, .38) 0 0) bottom / 100% var(--rb-d) no-repeat,
    /* specular along the top edge of the band */
    linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 58%),
    /* main ramp */
    linear-gradient(135deg, var(--rb-1), var(--rb-2) 48%, var(--rb-3));
  background-clip: padding-box;

  /* clip-path cuts the two tails; the mask bevels their ends to 45° so they
     look folded rather than snipped square. */
  clip-path: polygon(0 0, 100% 0, 100% 100%,
             calc(100% - var(--rb-d)) calc(100% - var(--rb-d)),
             var(--rb-d) calc(100% - var(--rb-d)), 0 100%);
  -webkit-mask:
    linear-gradient(135deg, transparent calc(50% - var(--rb-d) * .707), #fff 0) bottom left,
    linear-gradient(-135deg, transparent calc(50% - var(--rb-d) * .707), #fff 0) bottom right;
  -webkit-mask-size: 300vmax 300vmax;
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}

/* RTL: the corner mirrors, so the rotation and its origin must mirror too —
   `inset-inline-end` alone only moves it, it doesn't turn it around. */
[dir="rtl"] #tool-box .aitrt-sec .aitrt-ribbon::before {
  transform: translate(-29.29%, -100%) rotate(-45deg);
  transform-origin: bottom right;
}

/* The go chip is vertically centred on the trailing edge and the ribbon crosses
   that same corner, so on a short card they can come within a few px of each
   other. Nudging the content in on a ribboned card keeps them clear. */
#tool-box .aitrt-sec .aitrt-card.is-new { padding-inline-end: 19px; }

/* ── GO CHIP ────────────────────────────────────────────────────────────────
   Visible at rest (at .5), not revealed from nothing — a chip that only exists
   on hover reads as broken on touch, where there is no hover at all. */
#tool-box .aitrt-sec .aitrt-go {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 9px;
  background: transparent;
  color: var(--rt-ink-2);
  opacity: .6;
  transition: background .22s ease, color .22s ease, opacity .22s ease,
              transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease;
}
#tool-box .aitrt-sec .aitrt-go svg { display: block; inline-size: 15px; block-size: 15px; }
[dir="rtl"] #tool-box .aitrt-sec .aitrt-go svg { transform: scaleX(-1); }

/* Content children have to stack above the .aitrt-fx sheen layer (z-index 0).
   THE EXCLUSIONS ARE LOAD-BEARING — do not simplify this back to `> *`.
   `> *` is (1,3,0) and beats a plain `.aitrt-fx` / `.aitrt-ribbon` rule at
   (1,2,0), so it silently rewrote both of them from `absolute` to `relative`:
   the sheen layer collapsed into a 0-width flex item (its ::after then had
   nothing to be positioned against) and the ribbon dropped out of the corner
   into the middle of the card. Neither throws — they just quietly render wrong,
   and a raised specificity on the other rules would still lose the tie on
   source order, since both are declared above this line. */
#tool-box .aitrt-sec .aitrt-card > *:not(.aitrt-fx):not(.aitrt-ribbon):not(.aitrt-sr) {
  position: relative;
  z-index: 1;
}

/* ── HOVER ──────────────────────────────────────────────────────────────────
   Gated so a tap on a phone can't leave a card stuck in its lifted state. */
@media (hover: hover) and (pointer: fine) {
  #tool-box .aitrt-sec > .card > .card-header.aitrt-head:hover {
    background-image:
      radial-gradient(125% 150% at 8% -35%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 60%),
      linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .12));
  }
  #tool-box .aitrt-sec > .card > .card-header.aitrt-head:hover::after {
    transform: translate3d(-22px, 12px, 0) scale(1.08);
    opacity: .85;
  }
  #tool-box .aitrt-sec > .card > .card-header.aitrt-head:hover .aitrt-head-ic {
    transform: translateY(-2px) scale(1.04);
    background: rgba(255, 255, 255, .26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48),
                0 12px 24px -10px rgba(0, 0, 0, .45);
  }

  #tool-box .aitrt-sec .aitrt-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--rt-glow), .45);
    background-color: var(--rt-surface-2);
    box-shadow: 0 14px 30px -16px rgba(var(--rt-glow), .55),
                0 3px 8px -4px rgba(16, 26, 40, .06);
  }
  /* 360% of the sheen's OWN width (45% of the card) = 162% of the card, which
     clears the far edge from either start position. 340% left a visible sliver
     parked inside the card in RTL, where `inset-inline-start` resolves to
     `right` and the travel is 160% rather than 153%. The transition lives here,
     not on the base rule, so un-hover snaps the sheen back to its park instantly
     instead of sweeping it backwards. */
  #tool-box .aitrt-sec .aitrt-card:hover .aitrt-fx::after {
    opacity: 1;
    transform: skewX(-16deg) translateX(calc(360% * var(--rt-dir)));
    transition: transform .75s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
  }
  #tool-box .aitrt-sec .aitrt-card:hover .aitrt-ic {
    background: linear-gradient(135deg, var(--rt-1), var(--rt-3));
    color: #fff;
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 8px 18px -7px rgba(var(--rt-glow), .7),
                inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  #tool-box .aitrt-sec .aitrt-card:hover .aitrt-ic svg { transform: scale(1.08); }
  #tool-box .aitrt-sec .aitrt-card:hover .aitrt-name { color: var(--rt-3); }
  #tool-box .aitrt-sec .aitrt-card:hover .aitrt-go {
    opacity: 1;
    background: linear-gradient(135deg, var(--rt-1), var(--rt-3));
    color: #fff;
    transform: translateX(calc(3px * var(--rt-dir)));
    box-shadow: 0 6px 14px -6px rgba(var(--rt-glow), .75);
  }
  /* The ribbon lifts with the card, so it only needs its shadow to deepen and
     its ramp to brighten. Brightness rides on the SAME filter as the shadow —
     two `filter` declarations would overwrite each other, not compose. */
  #tool-box .aitrt-sec .aitrt-card:hover .aitrt-ribbon {
    filter: drop-shadow(0 5px 9px rgba(var(--rb-glow), .48)) brightness(1.06) saturate(1.04);
  }
}

/* Keyboard press / touch press — the one state that must also work on a phone. */
#tool-box .aitrt-sec .aitrt-card:active { transform: translateY(-1px) scale(.995); }

/* ── FOCUS ──────────────────────────────────────────────────────────────────
   (1,4,1) beats the site-wide a:focus-visible reset at (0,3,2), and rings with
   a box-shadow like the rest of the site rather than fighting its outline:none.
   The `border-radius:6px` that reset also applies is restated here, or a focused
   card would square off its corners. */
body:not(.admin-shell) #tool-box .aitrt-sec .aitrt-card:focus-visible {
  outline: none;
  border-radius: 14px;
  border-color: rgba(var(--rt-glow), .55);
  box-shadow: 0 0 0 3px rgba(var(--rt-glow), .3),
              0 12px 26px -16px rgba(var(--rt-glow), .5);
}
/* Match the hover payoff on keyboard focus so the card reads the same way. */
body:not(.admin-shell) #tool-box .aitrt-sec .aitrt-card:focus-visible .aitrt-go {
  opacity: 1;
  background: linear-gradient(135deg, var(--rt-1), var(--rt-3));
  color: #fff;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  #tool-box .aitrt-sec > .card > .card-header.aitrt-head { padding: 15px 16px; }
  #tool-box .aitrt-sec .aitrt-head-in { gap: 12px; }
  #tool-box .aitrt-sec .aitrt-head-ic { inline-size: 40px; block-size: 40px; border-radius: 12px; }
  #tool-box .aitrt-sec .aitrt-head-ic svg { inline-size: 20px; block-size: 20px; }
  #tool-box .aitrt-sec .aitrt-head-sub { font-size: 12px; }
  #tool-box .aitrt-sec > .card > .card-header.aitrt-head::after { inline-size: 200px; block-size: 200px; }
  #tool-box .aitrt-sec .aitrt-body { padding: 15px 16px 17px; }
}

@media (max-width: 575.98px) {
  /* The header is a plain icon + text flex row at every width now that the count
     pill is gone. It used to need a 2×2 grid here to stop the pill wrapping and
     stranding itself against the right edge — if a third item is ever added back
     to this band, that problem comes back with it. */
  #tool-box .aitrt-sec .aitrt-grid { gap: 10px; }
  #tool-box .aitrt-sec .aitrt-card { min-block-size: 68px; padding: 12px 13px; gap: 12px; border-radius: 13px; }
  #tool-box .aitrt-sec .aitrt-ic { inline-size: 40px; block-size: 40px; border-radius: 11px; }
  #tool-box .aitrt-sec .aitrt-ic svg { inline-size: 19px; block-size: 19px; }
  #tool-box .aitrt-sec .aitrt-name { font-size: 14px; }
  #tool-box .aitrt-sec .aitrt-go { inline-size: 26px; block-size: 26px; border-radius: 8px; }
  /* The card loses 6px of height here but the ribbon is sized off its own text,
     so at the desktop size it reaches past the card's vertical midpoint and
     starts to read as the main event. Scale it with the card. */
  #tool-box .aitrt-sec .aitrt-ribbon { --rb-d: 6px; }
  #tool-box .aitrt-sec .aitrt-ribbon::before {
    padding: 2.5px 20px calc(var(--rb-d) + 2.5px);
    font-size: 8.5px;
    letter-spacing: .09em;
  }
  #tool-box .aitrt-sec .aitrt-card.is-new { padding-inline-end: 17px; }
  body:not(.admin-shell) #tool-box .aitrt-sec .aitrt-card:focus-visible { border-radius: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  #tool-box .aitrt-sec > .card > .card-header.aitrt-head,
  #tool-box .aitrt-sec > .card > .card-header.aitrt-head::after,
  #tool-box .aitrt-sec .aitrt-head-ic,
  #tool-box .aitrt-sec .aitrt-card,
  #tool-box .aitrt-sec .aitrt-fx::after,
  #tool-box .aitrt-sec .aitrt-ribbon,
  #tool-box .aitrt-sec .aitrt-ic,
  #tool-box .aitrt-sec .aitrt-ic svg,
  #tool-box .aitrt-sec .aitrt-go,
  #tool-box .aitrt-sec .aitrt-name { transition: none; }
  #tool-box .aitrt-sec > .card > .card-header.aitrt-head:hover::after,
  #tool-box .aitrt-sec > .card > .card-header.aitrt-head:hover .aitrt-head-ic,
  #tool-box .aitrt-sec .aitrt-card:hover,
  #tool-box .aitrt-sec .aitrt-card:active,
  #tool-box .aitrt-sec .aitrt-card:hover .aitrt-ic,
  #tool-box .aitrt-sec .aitrt-card:hover .aitrt-ic svg,
  #tool-box .aitrt-sec .aitrt-card:hover .aitrt-go { transform: none; }
  #tool-box .aitrt-sec .aitrt-card:hover .aitrt-fx::after { opacity: 0; }
}

/* Screen-reader text for the ribbon. `data-ribbon` is rendered by CSS `content`,
   which assistive tech is not obliged to announce, so the word is also in the
   DOM for real. `.sr-only` is NOT usable here — on this site it exists only
   inside fontawesome.min.css, which no public layout is guaranteed to load. */
#tool-box .aitrt-sec .aitrt-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── DARK ───────────────────────────────────────────────────────────────────
   The band keeps its brand fill — it is this block's one piece of colour. Only
   the overlay changes: less top glare, more bottom shade, so it sits on the
   dark canvas instead of glowing off it. */
body.theme-dark #tool-box .aitrt-sec {
  --rt-1: #5C9BF5;
  --rt-2: #8CBEFA;          /* lifted for contrast on the dark chip tint */
  --rt-3: #A9CFFC;          /* hover ink — must stay legible on a dark tile */
  --rt-glow: 96, 164, 245;
  --rt-surface: #17171A;
  --rt-surface-2: #1C1C21;
  --rt-line: rgba(255, 255, 255, .1);
  --rt-ink: #F5F5F6;
  --rt-ink-2: #A0A0A6;
  --rt-tint: rgba(96, 164, 245, .14);
}
/* The ribbon on dark. The ramp is lifted and desaturated a touch — the light
   ramp's deep #C4162A goes almost black against a #17171A card, which loses the
   fold entirely — and the cast shadow is warmed so it still separates from the
   tile instead of vanishing into it. */
body.theme-dark #tool-box .aitrt-sec .aitrt-ribbon {
  --rb-1: #FF8F86;
  --rb-2: #F14C55;
  --rb-3: #D2263A;
  --rb-glow: 241, 76, 85;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
}
@media (hover: hover) and (pointer: fine) {
  body.theme-dark #tool-box .aitrt-sec .aitrt-card:hover .aitrt-ribbon {
    filter: drop-shadow(0 5px 11px rgba(var(--rb-glow), .4)) brightness(1.05);
  }
}
body.theme-dark #tool-box .aitrt-sec > .card > .card-header.aitrt-head {
  background-image:
    radial-gradient(125% 150% at 8% -35%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .22));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3);
}
body.theme-dark #tool-box .aitrt-sec .aitrt-head-ic {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .18);
}
/* The light-mode gloss is far too bright on a near-black tile — it reads as a
   smear rather than a highlight — so the whole gradient is restated, not tuned. */
body.theme-dark #tool-box .aitrt-sec .aitrt-card {
  background-image: linear-gradient(180deg,
      rgba(255, 255, 255, .05) 0%,
      rgba(255, 255, 255, 0) 45%,
      rgba(var(--rt-glow), .05) 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
/* Same reason: a white sheen sweep flares on dark. Tint it brand instead. */
body.theme-dark #tool-box .aitrt-sec .aitrt-fx::after {
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(var(--rt-glow), .16), rgba(255, 255, 255, 0));
}
@media (hover: hover) and (pointer: fine) {
  body.theme-dark #tool-box .aitrt-sec > .card > .card-header.aitrt-head:hover {
    background-image:
      radial-gradient(125% 150% at 8% -35%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%),
      linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .2));
  }
  body.theme-dark #tool-box .aitrt-sec .aitrt-card:hover {
    box-shadow: 0 14px 32px -16px rgba(var(--rt-glow), .4),
                0 3px 8px -4px rgba(0, 0, 0, .5);
  }
  /* Restated inside the dark block: the light-mode gradient rules above sit at
     the same weight, and this block comes later, so anything the dark block
     touches must repaint the hover states it would otherwise leave behind. */
  body.theme-dark #tool-box .aitrt-sec .aitrt-card:hover .aitrt-ic,
  body.theme-dark #tool-box .aitrt-sec .aitrt-card:hover .aitrt-go {
    background: linear-gradient(135deg, var(--rt-1), #2A6BCC);
    color: #fff;
  }
}
body.theme-dark #tool-box .aitrt-sec .aitrt-card:focus-visible .aitrt-go {
  background: linear-gradient(135deg, var(--rt-1), #2A6BCC);
  color: #fff;
}