/* =============================================================================
   AIToolsay — Sidebar cards  (Request-a-Tool CTA + Popular Tools)
   -----------------------------------------------------------------------------
   Markup lives in components/public/sidebar.blade.php and is always rendered
   inside `.sidebars` (layouts/public.blade.php is the only include point).
   Prefix is `.aitsb-`.

   ── THE HEADER BANDS ARE COLOUR-AGNOSTIC — read before editing ─────────────
   Both bands take their fill from an ADMIN SETTING (/admin/settings/sidebars →
   Background), 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 on `.aitsb-head`: the admin's choice would be ignored or
   fought. All depth is `background-image` (white/black alpha) + currentColor,
   which layers over ANY base hue. Same contract as ai-tool-hero.css and
   ai-related-tools.css. (Site quirk: the live value is `bg-red` painting BLUE —
   the Tabler palette is remapped to the brand in custom.ltr.css.)

   Header ALIGNMENT is admin-set too (`text-start|center|end` printed on the
   band), so nothing here may hard-code a justification — see `.aitsb-head-in`.

   ── SPECIFICITY ────────────────────────────────────────────────────────────
   The old markup used Tabler's `.list-group-item`, which custom.ltr.css owns at
   (0,3,2) for colours and (0,4,2) for :hover, in both themes. Rather than fight
   four rules, the rows are no longer list-group items at all — they are plain
   `.aitsb-row` anchors, which also fixes a real bug: only the TEXT used to be
   clickable, so the icon and the row's padding did nothing.
   Everything is scoped `.sidebars .aitsb-card <thing>` → (0,3,0), which clears
   floating-widgets' `.card a:hover{color:#2060C0}` (0,2,0). That rule is an
   inline <style> before </body>, so it wins every tie — (0,2,0) is not enough.
   ========================================================================== */

.sidebars .aitsb-card {
  /* ── INK vs GRADIENT: these two sets are NOT interchangeable ──────────────
     --sb-2 / --sb-3 are INK. They carry text and glyphs, so on dark they are
     deliberately PALE (#8CBEFA / #A9CFFC) to stay legible on a dark surface.
     --sb-g1..g3 are FILL. They sit UNDER white text, so they must stay deep
     enough for white to read in BOTH themes.

     Every gradient surface here uses --sb-g*. It used to build them out of
     --sb-1/--sb-2/--sb-3 and then repaint each one in a separate dark override,
     and that shipped a live bug: the Request-a-Tool button rendered white text
     on the pale ink ramp (#8CBEFA → #A9CFFC, ~1.7:1) whenever the override
     didn't win — stale cache, a missed selector, a lost tie — and the label
     vanished. A gradient that is correct by construction cannot regress that
     way, and it removes four override rules. Never point a fill at an ink token.

     THE FILL RAMP IS MEASURED, NOT PICKED BY EYE. White-on-fill contrast:
        #2E6FD0  4.88:1     #2762C2  5.81:1     #1B4E9E  7.98:1
     so the WORST point of the gradient still clears WCAG AA (4.5:1) for the
     14px label — and clears the 3:1 non-text minimum for the white glyphs on
     the icon tiles. The old brand ramp topped out at #4C8DF2 = 3.28:1 in light
     and #5C9BF5 = 2.81:1 in dark: both fail, which is why the label read as
     washed out even once the pale-ink bug was gone. Anything lighter than
     ~#2E6FD0 under white text fails — check before changing these. */
  --sb-1: #4C8DF2;
  --sb-2: #3680ED;
  --sb-3: #2060C0;

  --sb-g1: #2E6FD0;
  --sb-g2: #2762C2;
  --sb-g3: #1B4E9E;

  --sb-glow: 54, 128, 237;

  --sb-surface: #fff;
  --sb-line: #eaeef5;
  --sb-ink: #16202c;
  --sb-ink-2: #5b6779;
  --sb-tint: rgba(54, 128, 237, .085);

  /* +1 in LTR, -1 in RTL. Drives the physical-axis values that have no logical
     equivalent — box-shadow offsets and translateX. */
  --sb-dir: 1;

  position: relative;
  overflow: hidden;              /* clips the band's corners + the last row's tint */
  border: 1.5px solid var(--sb-line);
  border-radius: 14px;
  background: var(--sb-surface);
  box-shadow: 0 1px 2px rgba(16, 26, 40, .04);
}
[dir="rtl"] .sidebars .aitsb-card { --sb-dir: -1; }

/* ═══════════════════════════════════════════════════════════════════════════
   1 · SHARED HEADER BAND
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebars .aitsb-card > .card-header.aitsb-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px 12px 0 0;

  /* Depth only — never a background-color. See the header note. */
  background-image:
    radial-gradient(135% 170% at 6% -45%, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .14));
  transition: background-image .35s ease;
}

/* Decorative bloom on the trailing edge — clipped by overflow, and inert.
   NOTE: scrollWidth > clientWidth on this element is EXPECTED because of it. */
.sidebars .aitsb-card > .card-header.aitsb-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -85%;
  inset-inline-end: -14%;
  inline-size: 190px;
  block-size: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .17), rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
  transition: transform .5s cubic-bezier(.2, .8, .3, 1), opacity .4s ease;
}

/* The band carries Bootstrap `d-block` (display:block !important), so the flex
   row has to be a child — and it INHERITS the admin's text-align rather than
   setting its own justification, so `text-center` / `text-end` keep working. */
.sidebars .aitsb-card .aitsb-head-in {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
}
.sidebars .aitsb-card > .card-header.aitsb-head.text-center .aitsb-head-in { justify-content: center; }
.sidebars .aitsb-card > .card-header.aitsb-head.text-end    .aitsb-head-in { justify-content: flex-end; }

/* Glass tile — same language as the tool hero and the Related Tools band,
   two sizes down for a 356px column. */
.sidebars .aitsb-card .aitsb-head-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 10px;
  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 6px 14px -7px 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;
}
.sidebars .aitsb-card .aitsb-head-ic svg { inline-size: 17px; block-size: 17px; display: block; }

.sidebars .aitsb-card > .card-header.aitsb-head .card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -.015em;
  color: #fff;
  /* Headings WRAP. The CTA's default copy ("Can't find the tool you need?") is
     long and the column is narrow — there is no ellipsis anywhere in this file. */
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Restrained band hover — it is a label, not a control, so it must not imply one. */
@media (hover: hover) and (pointer: fine) {
  .sidebars .aitsb-card:hover > .card-header.aitsb-head {
    background-image:
      radial-gradient(135% 170% at 6% -45%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 60%),
      linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .13));
  }
  .sidebars .aitsb-card:hover > .card-header.aitsb-head::after {
    transform: translate3d(-16px, 10px, 0) scale(1.1);
    opacity: .85;
  }
  .sidebars .aitsb-card:hover .aitsb-head-ic {
    transform: translateY(-1px) scale(1.05);
    background: rgba(255, 255, 255, .26);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · REQUEST-A-TOOL CTA
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebars .aitsb-card .aitsb-cta-body {
  position: relative;
  padding: 20px 18px 22px;
  /* background-IMAGE only, so the card's own surface colour still shows through
     underneath in either theme. */
  background-image:
    radial-gradient(120% 85% at 50% 0%, rgba(var(--sb-glow), .07), rgba(var(--sb-glow), 0) 62%);
}

/* The anchor of the card. Rounded square, not a circle — matches the Advanced
   Options header chip, the model-picker tiles and the trust strip, so the whole
   product reads as one system. */
.sidebars .aitsb-card .aitsb-cta-ic {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--sb-g1), var(--sb-g2) 50%, var(--sb-g3));
  color: #fff;
  /* The wide low-alpha spread IS the halo — a blurred pseudo-element was tried
     and is not worth an extra paint layer for the same look. */
  box-shadow: 0 0 0 7px rgba(var(--sb-glow), .07),
              0 12px 24px -10px rgba(var(--sb-glow), .6),
              inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .28s ease;
}
.sidebars .aitsb-card .aitsb-cta-ic svg { inline-size: 25px; block-size: 25px; display: block; }

.sidebars .aitsb-card .aitsb-cta-copy {
  margin: 0 0 16px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--sb-ink-2);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.sidebars .aitsb-card .aitsb-cta-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-inline-size: 100%;
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sb-g1), var(--sb-g2) 52%, var(--sb-g3));
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
  text-decoration: none;
  box-shadow: 0 10px 20px -9px rgba(var(--sb-glow), .65),
              inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1), box-shadow .22s ease;
}
/* Label above the sheen. */
.sidebars .aitsb-card .aitsb-cta-btn > * { position: relative; z-index: 1; }
.sidebars .aitsb-card .aitsb-cta-btn svg {
  flex: 0 0 auto;
  inline-size: 14px;
  block-size: 14px;
  display: block;
  transition: transform .28s cubic-bezier(.34, 1.4, .64, 1);
}
[dir="rtl"] .sidebars .aitsb-card .aitsb-cta-btn svg { transform: scaleX(-1); }

/* Sheen sweep, parked off the leading edge. */
.sidebars .aitsb-card .aitsb-cta-btn::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0));
  transform: skewX(-16deg);
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .sidebars .aitsb-card .aitsb-cta-body:hover .aitsb-cta-ic {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 0 0 11px rgba(var(--sb-glow), .09),
                0 18px 32px -12px rgba(var(--sb-glow), .7),
                inset 0 1px 0 rgba(255, 255, 255, .32);
  }
  .sidebars .aitsb-card .aitsb-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -12px rgba(var(--sb-glow), .8),
                inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  /* Transition declared HERE, not on the base rule, so un-hover snaps the sheen
     back to its park instead of sweeping it backwards. */
  .sidebars .aitsb-card .aitsb-cta-btn:hover::after {
    opacity: 1;
    transform: skewX(-16deg) translateX(calc(360% * var(--sb-dir)));
    transition: transform .75s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
  }
  .sidebars .aitsb-card .aitsb-cta-btn:hover svg { transform: translateX(calc(3px * var(--sb-dir))); }
  [dir="rtl"] .sidebars .aitsb-card .aitsb-cta-btn:hover svg { transform: scaleX(-1) translateX(3px); }
}

.sidebars .aitsb-card .aitsb-cta-btn:active { transform: translateY(0) scale(.98); }

/* ═══════════════════════════════════════════════════════════════════════════
   CTA INK LOCK — the floating-widgets hijack           (fixed 2026-08-09)
   ───────────────────────────────────────────────────────────────────────────
   partials/floating-widgets.blade.php injects an inline <style> before
   </body> — after every stylesheet on the page — carrying:

       .card a:hover                  { color: #2060C0 }    (0,2,1)
       body.theme-dark .card a:hover  { color: #60A4F5 }    (0,3,2)

   This CTA is an <a> inside `.card`, and the rule that paints it white is
   `.sidebars .aitsb-card .aitsb-cta-btn` at (0,3,0). The LIGHT rule loses to
   that on class count, which is why this only ever went wrong in dark: the
   dark twin ties on classes and wins by two elements. Hovering the button in
   dark mode therefore repainted its label #60A4F5 — measured 1.89:1 on the
   lightest gradient stop, against 4.88–7.98:1 for the white it should be. The
   label is a bare <span> and the arrow is stroke="currentColor", so both only
   INHERIT from the <a> and both went with it.

   Note the sibling `.aitsb-row` links are hit by the same rule but are NOT
   affected: every piece of their text (`.aitsb-row-t`, `-ic`, `-go`) carries
   its own colour at (0,3,0)+, so nothing of theirs inherits. This button is
   the one control in the kit whose text has no rule of its own.

   `!important` is deliberate rather than a specificity bump: the offending
   declaration is injected per page AFTER this file, so a page can always add
   one more — the same conclusion ai-coffee-btn.css and premium-article.css
   reached about the same rule. Scope is one control and one property.
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebars .aitsb-card a.aitsb-cta-btn,
.sidebars .aitsb-card a.aitsb-cta-btn:hover,
.sidebars .aitsb-card a.aitsb-cta-btn:focus,
.sidebars .aitsb-card a.aitsb-cta-btn:focus-visible,
.sidebars .aitsb-card a.aitsb-cta-btn:active { color: #fff !important; }
/* Forcing the children to inherit removes the split where an override lands on
   the <a> and repaints the label while the glyph keeps its own colour. */
.sidebars .aitsb-card a.aitsb-cta-btn > span,
.sidebars .aitsb-card a.aitsb-cta-btn > svg { color: inherit !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   3 · POPULAR TOOLS LIST
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebars .aitsb-card .aitsb-list { display: block; }

.sidebars .aitsb-card .aitsb-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-inline-size: 0;
  padding: 11px 14px;
  border-block-start: 1px solid var(--sb-line);
  text-decoration: none;
  color: inherit;
  transition: background-color .18s ease, box-shadow .2s ease;
}
.sidebars .aitsb-card .aitsb-row:first-child { border-block-start: 0; }

.sidebars .aitsb-card .aitsb-row-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 10px;
  background: var(--sb-tint);
  color: var(--sb-2);
  transition: background .2s ease, color .2s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .22s ease;
}
.sidebars .aitsb-card .aitsb-row-ic svg { inline-size: 19px; block-size: 19px; display: block; }

/* WAS `.text-body.d-block.text-nowrap` — a nowrap link in a 356px column with no
   truncation, so a long tool name simply ran out of the card. Tool names here go
   up to "AI Social Calendar Generator" and beyond; they WRAP now. */
.sidebars .aitsb-card .aitsb-row-t {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.008em;
  color: var(--sb-ink);
  overflow-wrap: anywhere;
  transition: color .18s ease;
}

/* Hidden at rest on a real pointer — a 12-row list with a permanent chevron on
   every row is noise. On touch, where :hover never resolves, it is given a
   resting opacity instead so the rows still read as tappable. */
.sidebars .aitsb-card .aitsb-row-go {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 18px;
  block-size: 18px;
  color: var(--sb-2);
  opacity: 0;
  transform: translateX(calc(-4px * var(--sb-dir)));
  transition: opacity .18s ease, transform .24s cubic-bezier(.34, 1.4, .64, 1);
}
.sidebars .aitsb-card .aitsb-row-go svg { inline-size: 15px; block-size: 15px; display: block; }
[dir="rtl"] .sidebars .aitsb-card .aitsb-row-go svg { transform: scaleX(-1); }

@media (hover: none), (pointer: coarse) {
  .sidebars .aitsb-card .aitsb-row-go { opacity: .4; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .sidebars .aitsb-card .aitsb-row:hover {
    background-color: var(--sb-tint);
    /* Inset accent bar on the LEADING edge — the same motif as the ToC rows,
       the model-picker's selected item and the nav rails. `inset` box-shadow
       has no logical form, hence --sb-dir. */
    box-shadow: inset calc(3px * var(--sb-dir)) 0 0 var(--sb-2);
  }
  .sidebars .aitsb-card .aitsb-row:hover .aitsb-row-ic {
    background: linear-gradient(135deg, var(--sb-g1), var(--sb-g3));
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 7px 15px -7px rgba(var(--sb-glow), .7),
                inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  .sidebars .aitsb-card .aitsb-row:hover .aitsb-row-t { color: var(--sb-3); }
  .sidebars .aitsb-card .aitsb-row:hover .aitsb-row-go { opacity: 1; transform: none; }
}

.sidebars .aitsb-card .aitsb-row:active { background-color: var(--sb-tint); }

/* ═══════════════════════════════════════════════════════════════════════════
   3b · RECENT POSTS
   ───────────────────────────────────────────────────────────────────────────
   Same `.aitsb-row` chassis as Popular Tools — so the hover tint, accent bar,
   chevron and focus ring are inherited rather than re-declared — plus a media
   slot and a date line.

   TWO MEDIA SHAPES, and which one appears is an admin setting
   (Settings → General → featured images in sidebar):
     ON  → `.aitsb-post-thumb`, a 56px cover crop on EVERY row. A post with no
           image — or one whose file 404s — falls back to the tinted plate and
           glyph inside that same 56px box, so the text column still lines up
           down the list.
     OFF → `.aitsb-post-ic`, the same 36px tint tile Popular Tools uses.
   Mixing the two sizes in one list is what this split exists to prevent.
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebars .aitsb-card .aitsb-post-body {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Icon tile — identical geometry to `.aitsb-row-ic`, so a thumbnail-less
   Recent Posts card is indistinguishable in rhythm from Popular Tools. */
.sidebars .aitsb-card .aitsb-post-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 10px;
  background: var(--sb-tint);
  color: var(--sb-2);
  transition: background .2s ease, color .2s ease,
              transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease;
}
.sidebars .aitsb-card .aitsb-post-ic svg { inline-size: 19px; block-size: 19px; display: block; }

.sidebars .aitsb-card .aitsb-post-thumb {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 12px;
  /* Tinted, so a slow-loading, missing or 404'd cover leaves a brand-coloured
     plate with the fallback glyph on it rather than a white hole. */
  background: var(--sb-tint);
  color: var(--sb-2);
  /* Hairline over the photo — a light cover crop otherwise bleeds into a light
     card with no edge at all. Inset, so it sits ON the image, not around it. */
  box-shadow: inset 0 0 0 1px rgba(16, 26, 40, .1);
  transition: box-shadow .22s ease;
}
/* The photo is laid OVER the fallback glyph rather than replacing it, so
   `onerror="this.remove()"` reveals the plate underneath with no layout shift
   and no broken-image icon. */
.sidebars .aitsb-card .aitsb-post-thumb img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: block;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.2, .8, .3, 1);
}
.sidebars .aitsb-card .aitsb-post-thumb svg { inline-size: 22px; block-size: 22px; display: block; }

.sidebars .aitsb-card .aitsb-post-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sb-ink-2);
  /* Dates are short and fixed-format; wrapping one mid-string looks like a bug,
     and there is always room for it on its own line under a wrapping title. */
  white-space: nowrap;
}
.sidebars .aitsb-card .aitsb-post-date svg {
  flex: 0 0 auto;
  inline-size: 12px;
  block-size: 12px;
  display: block;
  opacity: .8;
}

@media (hover: hover) and (pointer: fine) {
  .sidebars .aitsb-card .aitsb-row:hover .aitsb-post-ic {
    background: linear-gradient(135deg, var(--sb-g1), var(--sb-g3));
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 7px 15px -7px rgba(var(--sb-glow), .7),
                inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  /* The photo scales INSIDE its clipped box — the box itself must not move, or
     it drifts out of alignment with the rows above and below. */
  .sidebars .aitsb-card .aitsb-row:hover .aitsb-post-thumb img { transform: scale(1.09); }
  .sidebars .aitsb-card .aitsb-row:hover .aitsb-post-thumb {
    box-shadow: inset 0 0 0 1px rgba(var(--sb-glow), .45),
                0 7px 16px -8px rgba(var(--sb-glow), .6);
  }
  /* When the cover is missing the plate is what the eye lands on, so it gets the
     same gradient treatment the icon tiles get — otherwise a fallback row reads
     as dead next to a row with a photo. */
  .sidebars .aitsb-card .aitsb-row:hover .aitsb-post-thumb svg { color: #fff; }
  .sidebars .aitsb-card .aitsb-row:hover .aitsb-post-thumb {
    background: linear-gradient(135deg, var(--sb-g1), var(--sb-g3));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4 · FOCUS
   ───────────────────────────────────────────────────────────────────────────
   custom.ltr.css has a light-mode-only `body:not(.admin-shell):not(.theme-dark)
   a:focus-visible` at (0,3,2) that kills the outline, rings with a generic
   box-shadow AND forces `border-radius:6px` — so a focused row or pill would
   visibly square its corners. These are (0,4,1) and restate the radius rather
   than fighting the reset's mechanism.
   ═══════════════════════════════════════════════════════════════════════════ */

body:not(.admin-shell) .sidebars .aitsb-card .aitsb-row:focus-visible {
  outline: none;
  border-radius: 0;
  background-color: var(--sb-tint);
  box-shadow: inset 0 0 0 2px rgba(var(--sb-glow), .55);
}
body:not(.admin-shell) .sidebars .aitsb-card .aitsb-row:focus-visible .aitsb-row-go { opacity: 1; transform: none; }

body:not(.admin-shell) .sidebars .aitsb-card .aitsb-cta-btn:focus-visible {
  outline: none;
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--sb-surface),
              0 0 0 6px rgba(var(--sb-glow), .45),
              0 10px 20px -9px rgba(var(--sb-glow), .55);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5 · RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────
   The sidebar is `col-lg-3`, so below 992px it stops being a rail and becomes a
   full-width block under the article. The cards get roomier there, not smaller —
   the constraint that made them tight was the column, and it is gone.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
  .sidebars .aitsb-card .aitsb-cta-body { padding: 22px 20px 24px; }
  .sidebars .aitsb-card .aitsb-cta-copy { font-size: 14px; }
  .sidebars .aitsb-card .aitsb-row { padding: 12px 16px; }
  .sidebars .aitsb-card .aitsb-row-t { font-size: 14px; }
  .sidebars .aitsb-card .aitsb-post-date { font-size: 12px; }
}

/* Tablet: the list is the one card that benefits from two columns — 12 rows
   stacked full-width is a lot of scrolling on the way to the footer. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .sidebars .aitsb-card .aitsb-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The first-child reset no longer covers the top row once there are two
     columns, and the inline-start divider only belongs on the second column. */
  .sidebars .aitsb-card .aitsb-row:nth-child(2) { border-block-start: 0; }
  .sidebars .aitsb-card .aitsb-row:nth-child(even) { border-inline-start: 1px solid var(--sb-line); }
}

@media (max-width: 575.98px) {
  .sidebars .aitsb-card > .card-header.aitsb-head { padding: 13px 14px; }
  .sidebars .aitsb-card .aitsb-cta-body { padding: 18px 15px 20px; }
  .sidebars .aitsb-card .aitsb-cta-ic { inline-size: 52px; block-size: 52px; border-radius: 15px; }
  .sidebars .aitsb-card .aitsb-cta-ic svg { inline-size: 23px; block-size: 23px; }
  .sidebars .aitsb-card .aitsb-cta-copy { font-size: 13.5px; margin-block-end: 15px; }
  /* Full-width tap target on a phone — a centred pill with dead space either
     side is the one place this button is genuinely harder to hit. */
  .sidebars .aitsb-card .aitsb-cta-btn { inline-size: 100%; padding: 12px 18px; }
  .sidebars .aitsb-card .aitsb-row { padding: 11px 14px; gap: 10px; }
  .sidebars .aitsb-card .aitsb-row-ic,
  .sidebars .aitsb-card .aitsb-post-ic { inline-size: 34px; block-size: 34px; border-radius: 9px; }
  .sidebars .aitsb-card .aitsb-row-ic svg,
  .sidebars .aitsb-card .aitsb-post-ic svg { inline-size: 18px; block-size: 18px; }
  .sidebars .aitsb-card .aitsb-row-t { font-size: 13.5px; }
  .sidebars .aitsb-card .aitsb-post-thumb { inline-size: 52px; block-size: 52px; border-radius: 11px; }
  .sidebars .aitsb-card .aitsb-post-thumb svg { inline-size: 20px; block-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebars .aitsb-card > .card-header.aitsb-head,
  .sidebars .aitsb-card > .card-header.aitsb-head::after,
  .sidebars .aitsb-card .aitsb-head-ic,
  .sidebars .aitsb-card .aitsb-cta-ic,
  .sidebars .aitsb-card .aitsb-cta-btn,
  .sidebars .aitsb-card .aitsb-cta-btn svg,
  .sidebars .aitsb-card .aitsb-row,
  .sidebars .aitsb-card .aitsb-row-ic,
  .sidebars .aitsb-card .aitsb-row-t,
  .sidebars .aitsb-card .aitsb-row-go,
  .sidebars .aitsb-card .aitsb-post-ic,
  .sidebars .aitsb-card .aitsb-post-thumb,
  .sidebars .aitsb-card .aitsb-post-thumb img { transition: none; }

  .sidebars .aitsb-card:hover > .card-header.aitsb-head::after,
  .sidebars .aitsb-card:hover .aitsb-head-ic,
  .sidebars .aitsb-card .aitsb-cta-body:hover .aitsb-cta-ic,
  .sidebars .aitsb-card .aitsb-cta-btn:hover,
  .sidebars .aitsb-card .aitsb-cta-btn:active,
  .sidebars .aitsb-card .aitsb-cta-btn:hover svg,
  .sidebars .aitsb-card .aitsb-row:hover .aitsb-row-ic,
  .sidebars .aitsb-card .aitsb-row:hover .aitsb-post-ic,
  .sidebars .aitsb-card .aitsb-row:hover .aitsb-post-thumb img { transform: none; }

  .sidebars .aitsb-card .aitsb-cta-btn:hover::after { opacity: 0; }
  .sidebars .aitsb-card .aitsb-row-go { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · DARK
   ───────────────────────────────────────────────────────────────────────────
   The bands keep their brand fill — they are the sidebar's only blocks of
   colour. Only the overlays change, so they sit on the dark canvas instead of
   glowing off it.
   ═══════════════════════════════════════════════════════════════════════════ */

body.theme-dark .sidebars .aitsb-card {
  --sb-1: #5C9BF5;
  --sb-2: #8CBEFA;          /* lifted for contrast on the dark chip tint */
  --sb-3: #A9CFFC;          /* hover ink — must stay LIGHT on dark, not dark */
  --sb-glow: 96, 164, 245;

  /* NO dark override for --sb-g*. The fill ramp is already AA-safe under white
     in both themes, and lightening it "because the card is dark" is exactly the
     move that made the label unreadable. Only the INK ramp changes below. */

  --sb-surface: #17171A;
  --sb-line: rgba(255, 255, 255, .08);
  --sb-ink: #F5F5F6;
  --sb-ink-2: #A0A0A6;
  --sb-tint: rgba(96, 164, 245, .12);

  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

body.theme-dark .sidebars .aitsb-card > .card-header.aitsb-head {
  background-image:
    radial-gradient(135% 170% at 6% -45%, 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 .sidebars .aitsb-card .aitsb-head-ic {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .18);
}

/* NOTE: there are deliberately NO dark repaints for the CTA button, the CTA
   icon or the hover chips any more. They read --sb-g*, which the block above
   already swapped, so every gradient surface is correct in both themes from one
   token set. Re-adding per-surface dark overrides is how the white-on-pale
   button bug got in — don't. */

/* The light hairline over a cover crop is drawn in near-black, which is
   invisible on a dark card — a photo would run straight into the surface. */
body.theme-dark .sidebars .aitsb-card .aitsb-post-thumb {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

/* A white sheen flares on a dark button — tint it so it reads as a highlight. */
body.theme-dark .sidebars .aitsb-card .aitsb-cta-btn::after {
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
}

body:not(.admin-shell).theme-dark .sidebars .aitsb-card .aitsb-cta-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--sb-surface),
              0 0 0 6px rgba(var(--sb-glow), .5);
}