/* ============================================================================
   AIToolsay — FAQ kit (.aitsq-*)
   ----------------------------------------------------------------------------
   ONE accordion for the whole site. Before this, six modules each shipped their
   own (.hpx-faq, .exp-faq, .gptd-faq, .glo-acc, .bizp-faq, and the tools page's
   .aits-faq) — six sets of hover rules, six sets of dark twins, and only one of
   them finished. This file is the finished one; every module points at it.

   It is modelled on the /tools treatment, with the bug that made that version
   unusable elsewhere removed: there, the rules that style the question and the
   answer text were scoped to `.aits-home`, so anywhere outside the tools page
   the copy fell through to the site default and the answer body rendered as
   unstyled text. That is the "text is hidden" report. Nothing here is scoped to
   a page wrapper.

   Namespace: every selector starts `.aitsq`. The page also carries `.aits-*`,
   `.aitshd-*`, `.hpx-*` and a Bootstrap/Tabler base, so a bare `.item` or
   `.list` here would collide with all of them.

   Colour comes only from the global `--aits-*` tokens, so light/dark is
   inherited rather than re-declared — the one exception is the two shadows on
   coloured surfaces, which need a real dark twin and get one at the bottom.

   Direction-agnostic: the accent spine uses `inset-inline-start`, so this same
   file serves LTR and RTL with no flipped copy.
   ========================================================================= */

/* The band is the last thing on most pages that carry it, and the footer
   starts immediately after — measured at a 0px gap on /guides, so the last
   question sat flush against the marquee strip the footer opens with. The
   bottom margin mirrors the top one.

   The second rule is not belt-and-braces, it is the whole trick. Collapsing
   would normally stop this doubling up where a section DOES follow, but
   `.dir-faq-sect` carries `padding-bottom: 8px`, and padding on the parent
   blocks a child's bottom margin from collapsing through it. Left alone the
   gap on /glossary measured 128px — 64 here, 8 of padding, and 56 from the
   next band's own margin-top. So the margin is withdrawn whenever a section
   follows and is already spacing itself; what is left is exactly one gap,
   which is what collapsing would have given for free.

   `is-bare` is excluded. That variant renders inside someone else's card (the
   GPT detail page, the business section), where trailing space is the host's
   business and 64px would push the card's own padding out of shape. */
.aitsq {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 64px;
}

.aitsq:not(.is-bare) { margin-bottom: 64px; }
.dir-faq-sect:has(+ section) > .aitsq { margin-bottom: 0; }

/* ── Where the contact nudge sits ───────────────────────────────────────────
   Two copies exist in the markup and exactly ONE is ever in the layout. Which
   one depends entirely on whether the intro rail is a side column:

     below 1024px  the rail is a block ABOVE the accordion, so a nudge inside it
                   lands between the heading and the first question — a contact
                   CTA to scroll past before reaching the answers. The `is-foot`
                   copy closes the list instead.
     1024px and up the rail is a real side column and the nudge belongs in it,
                   under the heading, where it also inherits the sticky.

   `display: none` and not `visibility`/`opacity`: the hidden copy has to be out
   of the layout, out of the tab order and out of the accessibility tree, or
   there are two identical links to the same page. */
.aitsq-help.is-aside { display: none; }

/* The foot copy is a direct grid child of `.aitsq`, so the grid's own row gap
   already separates it from the accordion — the base `margin-top` that the
   aside copy needs would double it. */
.aitsq-help.is-foot { margin-top: 0; }

@media (min-width: 1024px) {
    .aitsq {
        grid-template-columns: minmax(270px, 350px) minmax(0, 1fr);
        gap: 48px;
        align-items: start;
    }

    /* Tracks the reader down a long accordion. 104px clears the sticky header. */
    .aitsq-aside { position: sticky; top: 104px; }

    .aitsq-help.is-aside { display: flex; }
    .aitsq-help.is-foot  { display: none; }
}

/* Bare mode — accordion only, for callers that print their own heading or that
   repeat the list once per category. Collapses back to a single column so the
   list uses the full width instead of sitting in the narrower right-hand track. */
.aitsq.is-bare {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
}

@media (min-width: 1024px) {
    .aitsq.is-bare { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ── Intro rail ──────────────────────────────────────────────────────── */

.aitsq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--aits-blue-tint);
    border: 1px solid var(--aits-blue-line, rgba(54, 128, 237, .22));
    color: var(--aits-blue-dark);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.aitsq-eyebrow svg { width: 13px; height: 13px; flex: none; }

.aitsq-title {
    margin: 0 0 12px;
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.028em;
    line-height: 1.14;
    color: var(--aits-ink);
}

.aitsq-sub {
    margin: 0;
    max-width: 46ch;
    font-size: 15px;
    line-height: 1.68;
    color: var(--aits-mut);
}

/* Contact nudge. An <a>, so `.aitshd a`-style inherit rules elsewhere cannot
   leave it colourless — every colour below is stated outright. */
.aitsq-help {
    /* Every colour on the card comes from these five, so a tone is a
       five-line override and never a second copy of the card. The card is
       blue unless a modifier says otherwise. */
    --aitsq-help-tint: var(--aits-blue-tint);
    --aitsq-help-line: var(--aits-blue-line, rgba(54, 128, 237, .22));
    --aitsq-help-a: var(--aits-blue);
    --aitsq-help-b: var(--aits-blue-dark);
    --aitsq-help-glow: rgba(54, 128, 237, .7);
    --aitsq-help-chip: var(--aits-blue-dark);

    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--aitsq-help-tint);
    border: 1px solid var(--aitsq-help-line);
    color: var(--aits-ink);
    text-decoration: none;
    transition: transform .22s var(--ease, ease), box-shadow .22s var(--ease, ease);
}

/* The rule above is (0,1,0) and only covers the resting state, so hover has to
   be stated separately — and it has to out-rank TWO globals, not one:

     Tabler          a:hover                  (0,1,1)
     v2 partials     .v2x a:hover             (0,2,1)   ← public-partials-styles.css

   `.aitsq-help:hover` is (0,2,0). It clears Tabler, which is why the homepage
   never underlined, and loses to `.v2x` — which is every OTHER page this
   section renders on, because those wrap their content in `.v2x` and the
   homepage wraps it in `.hpx`. So the bug was invisible exactly where it was
   most looked at. `.aitsq .aitsq-help:hover` is (0,3,0) and clears both; the
   ancestor is free to add because both variants of the card render inside
   `<section class="aitsq">`.

   It must be the ANCHOR that resets. text-decoration propagates from the
   element that sets it and a descendant cannot take it back, so a `none` on
   the heading or the sub-line would change nothing — which is what makes this
   look like an un-fixable underline when it is fixed one level too low.

   Focus and active are listed because they hit the same globals. The card
   already signals itself with a lift, a shadow and the arrow chip; an
   underline on top reads as a broken link style rather than as emphasis. */
.aitsq .aitsq-help:hover,
.aitsq .aitsq-help:focus,
.aitsq .aitsq-help:focus-visible,
.aitsq .aitsq-help:active{ text-decoration: none; }

.aitsq-help-ico {
    flex: none;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--aitsq-help-a), var(--aitsq-help-b));
    color: #fff;
    box-shadow: 0 8px 18px -8px var(--aitsq-help-glow);
}

.aitsq-help-ico svg { width: 19px; height: 19px; }

.aitsq-help-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.aitsq-help-tx strong {
    font-size: 14px; font-weight: 700;
    letter-spacing: -.01em;
    color: var(--aits-ink);
}

.aitsq-help-tx span {
    font-size: 12.5px; line-height: 1.4;
    color: var(--aits-mut);
}

.aitsq-help-go {
    flex: none;
    margin-inline-start: auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--aits-card);
    border: 1px solid var(--aitsq-help-line);
    color: var(--aitsq-help-chip);
    transition: background-color .2s var(--ease, ease), color .2s var(--ease, ease), transform .2s var(--ease, ease);
}

.aitsq-help-go svg { width: 16px; height: 16px; }

/* ── Tones ──────────────────────────────────────────────────────────────────
   The nudge is no longer always "contact us": the homepage stacks a report
   route and a submit route under it, and a red card and a green card is how a
   reader tells them apart before reading a word. Only the five tone variables
   move — same box, same type, same arrow, so nothing here is a second design.

   Stated as raw values with the shared token as the preferred source, because
   --aits-red-soft and --aits-green-ink exist ONLY in the light block of
   custom.*.css. They have no dark twin, which is the trap claim.css,
   business.css and guides-public.css each hit and each documented: a tint that
   never darkens plus ink that never lightens is invisible after dark. The
   dark section below supplies the twins this file needs. */
.aitsq-help.is-danger {
    --aitsq-help-tint: var(--aits-red-soft, #FFECEC);
    --aitsq-help-line: rgba(224, 49, 49, .24);
    --aitsq-help-a: var(--aits-red, #E03131);
    --aitsq-help-b: var(--aits-red-ink, #B71C1C);
    --aitsq-help-glow: rgba(224, 49, 49, .55);
    --aitsq-help-chip: var(--aits-red-ink, #B71C1C);
}

.aitsq-help.is-success {
    --aitsq-help-tint: var(--aits-green-soft, #E6FCF3);
    --aitsq-help-line: rgba(12, 166, 120, .24);
    --aitsq-help-a: var(--aits-green, #0CA678);
    --aitsq-help-b: var(--aits-green-ink, #087F5B);
    --aitsq-help-glow: rgba(12, 166, 120, .55);
    --aitsq-help-chip: var(--aits-green-ink, #087F5B);
}

/* Stacked cards. The 26px above the first one is its separation from the copy
   in the rail and has to stay; repeating it between the cards would read as
   three unrelated boxes rather than one stack. Scoped to `.is-aside` because
   the foot copies are grid children of `.aitsq` and already carry its row gap
   — a margin there would double it. */
.aitsq-help.is-aside + .aitsq-help.is-aside { margin-top: 10px; }

/* ── Accordion ───────────────────────────────────────────────────────── */

.aitsq-list { display: grid; gap: 12px; }

.aitsq-item {
    position: relative;
    border: 1px solid var(--aits-line);
    border-radius: 18px;
    background: var(--aits-card);
    transition: border-color .22s var(--ease, ease), box-shadow .22s var(--ease, ease),
                transform .22s var(--ease, ease), background-color .22s var(--ease, ease);
}

/* Accent spine — grows on hover, stays while open. `inset-inline-start` rather
   than `left` so the RTL build needs no flipped copy of this file. */
.aitsq-item::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 16px;
    width: 3px; height: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--aits-blue), var(--aits-blue-dark));
    transition: height .3s var(--ease, ease);
}

.aitsq-item[open] {
    border-color: var(--aits-blue-line, rgba(54, 128, 237, .26));
    background: linear-gradient(180deg, var(--aits-blue-tint) 0%, var(--aits-card) 42%);
    box-shadow: 0 20px 44px -30px rgba(54, 128, 237, .85);
}

.aitsq-item[open]::before { height: calc(100% - 32px); }

.aitsq-item > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    padding: 18px 20px;
    border-radius: 18px;
}

/* Both are needed: WebKit uses the pseudo-element, everyone else the marker. */
.aitsq-item > summary::-webkit-details-marker { display: none; }
.aitsq-item > summary::marker { content: ''; }

.aitsq-item > summary:focus-visible {
    outline: 2px solid var(--aits-blue);
    outline-offset: -2px;
}

/* NOT scoped to a page wrapper — this is the rule whose absence made the
   question text unstyled everywhere except the tools page. */
.aitsq-q {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: clamp(.98rem, .94rem + .22vw, 1.08rem);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.014em;
    color: var(--aits-ink);
    transition: color .2s var(--ease, ease);
}

/* Plus that rotates into a minus. Drawn with two gradient bars rather than an
   icon font, so it cannot render as a blank box on a build without the glyph. */
.aitsq-mark {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 10px;
    background:
        linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
        var(--aits-blue-tint);
    color: var(--aits-blue);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), background-color .22s var(--ease, ease),
                color .22s var(--ease, ease), box-shadow .22s var(--ease, ease);
}

.aitsq-item[open] .aitsq-mark {
    transform: rotate(135deg);
    background:
        linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
        var(--aits-blue);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(54, 128, 237, .9);
}

.aitsq-a { padding: 0 20px 18px 23px; }

/* Targets the wrapper AND any paragraph inside it: module answers arrive as
   plain text, as nl2br output, or as an admin's rich-text block, and all three
   have to read the same. */
.aitsq-a,
.aitsq-a p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--aits-mut);
}

.aitsq-a p + p { margin-top: 10px; }

.aitsq-a a {
    color: var(--aits-blue-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aitsq-item[open] .aitsq-a { animation: aitsqReveal .3s cubic-bezier(.32, .72, .4, 1) both; }

@keyframes aitsqReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ── Hover — real pointers only, or the state sticks after a tap ─────── */

@media (hover: hover) {
    .aitsq-item:hover {
        border-color: var(--aits-blue-line, rgba(54, 128, 237, .26));
        transform: translateY(-2px);
        box-shadow: 0 18px 36px -28px rgba(54, 128, 237, .8);
    }

    .aitsq-item:hover::before { height: calc(100% - 32px); }
    .aitsq-item:hover .aitsq-q { color: var(--aits-blue-dark); }
    .aitsq-item:not([open]):hover .aitsq-mark { background-color: rgba(54, 128, 237, .18); }

    .aitsq-help:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 32px -22px var(--aitsq-help-glow);
    }

    .aitsq-help:hover .aitsq-help-go {
        background: var(--aitsq-help-a);
        color: #fff;
        transform: translateX(2px);
    }
}

.aitsq-help:focus-visible {
    outline: 2px solid var(--aits-blue);
    outline-offset: 3px;
}

/* ── Dark mode ───────────────────────────────────────────────────────── */

body.theme-dark .aitsq-item { background: var(--aits-surface-2, var(--dk-surface,#131317)); }

body.theme-dark .aitsq-item[open] {
    background: linear-gradient(180deg, var(--aits-blue-tint) 0%, var(--aits-surface-2, var(--dk-surface,#131317)) 46%);
    /* The light-mode shadow is a blue glow tuned to a white card; on a dark
       surface it reads as haze, so it goes rather than being re-tinted. */
    box-shadow: none;
}

body.theme-dark .aitsq-item:hover { box-shadow: 0 18px 36px -28px rgba(0, 0, 0, .8); }
body.theme-dark .aitsq-mark { color: var(--aits-blue-light); }
body.theme-dark .aitsq-item[open] .aitsq-mark { color: #fff; }
body.theme-dark .aitsq-item:hover .aitsq-q { color: var(--aits-blue-light); }
body.theme-dark .aitsq-eyebrow { color: var(--aits-blue-light); }
body.theme-dark .aitsq-help { box-shadow: none; }
body.theme-dark .aitsq-help:hover { box-shadow: 0 16px 32px -22px rgba(0, 0, 0, .8); }
body.theme-dark .aitsq-help-go { background: var(--aits-surface-2, var(--dk-surface,#131317)); color: var(--aitsq-help-chip); }

/* The twins the semantic hues never got. Tints drop to a low alpha of the hue
   itself so they darken with the page, and the chip ink goes to the light end
   of each ramp so it clears AA on that tint — the -ink tokens are tuned for
   white and stay unreadable here. */
body.theme-dark .aitsq-help { --aitsq-help-chip: var(--aits-blue-light); }
body.theme-dark .aitsq-help.is-danger {
    --aitsq-help-tint: rgba(224, 49, 49, .16);
    --aitsq-help-line: rgba(255, 135, 135, .30);
    --aitsq-help-chip: #FF8787;
}
body.theme-dark .aitsq-help.is-success {
    --aitsq-help-tint: rgba(12, 166, 120, .16);
    --aitsq-help-line: rgba(56, 217, 169, .30);
    --aitsq-help-chip: #38D9A9;
}
body.theme-dark .aitsq-a a { color: var(--aits-blue-light); }

/* ── Small screens ───────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .aitsq { margin-top: 48px; gap: 22px; }
    .aitsq:not(.is-bare) { margin-bottom: 48px; }
    .dir-faq-sect:has(+ section) > .aitsq { margin-bottom: 0; }
    .aitsq-title { margin-bottom: 10px; }
    .aitsq-sub { font-size: 14.5px; }
    .aitsq-list { gap: 10px; }
    .aitsq-item { border-radius: 16px; }

    .aitsq-item > summary {
        gap: 12px;
        min-height: 56px;
        padding: 15px 14px;
        border-radius: 16px;
    }

    .aitsq-q { font-size: .96rem; line-height: 1.42; }

    .aitsq-mark {
        width: 28px; height: 28px;
        border-radius: 9px;
        background-size: 11px 2px, 2px 11px, auto;
    }

    .aitsq-a { padding: 0 14px 15px 17px; }
    .aitsq-a, .aitsq-a p { font-size: 13.8px; line-height: 1.7; }

    .aitsq-help { margin-top: 20px; padding: 12px 13px; gap: 12px; border-radius: 16px; }

    /* The lift needs a hover to come back from — on touch it would stick. */
    .aitsq-item:hover, .aitsq-help:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aitsq-item, .aitsq-item::before, .aitsq-mark, .aitsq-help, .aitsq-help-go { transition: none; }
    .aitsq-item:hover, .aitsq-help:hover { transform: none; }
    .aitsq-item[open] .aitsq-a { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §HELPPRM — the grid card's surface, on the help cards        (2026-08-25)
   ═══════════════════════════════════════════════════════════════════════════
   The three nudge cards were a flat tint with a 2px lift. This gives them the
   four-layer surface the /ai-directory grid card wears (§TCPRM in
   public-dir-bands.css), rebuilt against THIS card's own tone system rather
   than copied — same construction, same numbers, three tones instead of eight.

     1 · a diagonal wash, 152deg, lit corner to far corner
     2 · a top accent bar that grows from nothing on hover
     3 · a corner bloom hung off the top-right, swelling as it brightens
     4 · a tone edge that steps up, and a deeper lift

   ── WHAT IS DELIBERATELY NOT PORTED ───────────────────────────────────────
   §TCPRM's fifth layer is `.dir-tc::before`, a conic gradient rotating around
   the border through a mask-composite ring. It is left out for two reasons,
   not one. It needs an `@property` registration and a keyframe that live in
   public-dir-bands.css, a sheet no page carrying this card loads — so it would
   arrive here as a third copy of the same animation. And three of these cards
   stack in a 300px rail: on a 308px product card in a grid of twelve the ring
   reads as one card catching the light, on a stack of three it reads as three
   things spinning at the reader.

   ── THE ALPHA RAMP IS §CATPRM'S, TO THE NUMBER ────────────────────────────
   .075 / .055 / .20 / .20 in light and .13 / .09 / .30 / .17 in dark are the
   same four §CATPRM declares and §TCPRM and §WHYPRM reuse. A blue help card
   and a blue product card are then lit to the same depth by construction. The
   dark values are all HIGHER because a 5% tint that reads over white is
   invisible over near-black.

   ── THE TRIPLET FLIPS WITH THE THEME, AND HAS TO ──────────────────────────
   `--aqh-rgb` is not just the tone: it is the tone AT THE WEIGHT THIS THEME
   draws it. Dark already re-points `--aitsq-help-line` and `--aitsq-help-chip`
   at the light end of each hue (#FF8787, #38D9A9, --aits-blue-light) because
   the base hue is invisible on a dark ground. The triplet follows the same
   three values, or a hover edge computed from `224,49,49` would come out
   DARKER than the resting one and the card would dim as you pointed at it.

   ── `background-image`, NEVER THE SHORTHAND ───────────────────────────────
   `.aitsq-help` sets its colour with `background: var(--aitsq-help-tint)`. A
   shorthand here would reset that to transparent and strip the tint off every
   card. Source order does the rest: this block is last in the file, so its
   `background-image` wins while the shorthand above still owns the colour.
   Same trap §TCPRM-WASH documents. */

/* 1 · the tone triplet and the ramp */
.aitsq-help {
    --aqh-rgb: 54, 128, 237;
    --aqh-a1: .075;   /* wash, the lit corner */
    --aqh-a2: .055;   /* wash, the far corner */
    --aqh-edge: .20;  /* the tinted hairline */
    --aqh-bloom: .20; /* the corner bloom's hot end */
}

.aitsq-help.is-danger  { --aqh-rgb: 224,  49,  49; }
.aitsq-help.is-success { --aqh-rgb:  12, 166, 120; }

body.theme-dark .aitsq-help {
    --aqh-rgb: 96, 164, 245;   /* --aits-blue-light, the ink twin */
    --aqh-a1: .13;
    --aqh-a2: .09;
    --aqh-edge: .30;
    --aqh-bloom: .17;
}

body.theme-dark .aitsq-help.is-danger  { --aqh-rgb: 255, 135, 135; }
body.theme-dark .aitsq-help.is-success { --aqh-rgb:  56, 217, 169; }


/* 2 · the surface — topmost layer first: accent bar, then wash.
   The bar is sized to nothing across at rest (`0 3px`) so `background-size`
   has somewhere to animate FROM, and `background-position: 50% 0` grows it
   from the centre out — what `transform: scaleX()` does on a span. The wash
   fades to `rgba(same-hue, 0)` and never to the `transparent` KEYWORD, which
   interpolates through transparent black and leaves a grey fringe.

   `isolation: isolate` is what lets the bloom below sit at `z-index: -1`
   without escaping to the page behind the card. */
.aitsq-help {
    position: relative;
    isolation: isolate;
    background-image:
        linear-gradient(90deg,
            rgba(var(--aqh-rgb), 0)    0%,
            rgba(var(--aqh-rgb), .85) 50%,
            rgba(var(--aqh-rgb), 0)  100%),
        linear-gradient(152deg,
            rgba(var(--aqh-rgb), var(--aqh-a1)) 0%,
            rgba(var(--aqh-rgb), 0)            48%,
            rgba(var(--aqh-rgb), var(--aqh-a2)) 100%);
    background-repeat: no-repeat;
    background-position: 50% 0, 0 0;
    background-size: var(--aqh-bar-w, 0) 3px, 100% 100%;
    transition:
        transform .22s var(--ease, ease),
        box-shadow .22s var(--ease, ease),
        border-color .2s ease,
        background-size .32s cubic-bezier(.16, 1, .3, 1);
}


/* 3 · the corner bloom. The centre sits OUTSIDE the box on purpose, so what
   lands on the card is the falloff rather than a circle drawn on it — the
   grid card's single most recognisable cue. Scaled to this card: 180×150 at
   `calc(100% + 20px) -44px`, against §TCPRM's 260×230 at `+32px -60px`, since
   this box is a quarter the height.

   No `overflow: hidden` on the card, and none is wanted: `border-radius:
   inherit` makes the pseudo clip its own gradient, and clipping the card
   itself would cut the icon chip's outer glow off at the edge. */
.aitsq-help::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(180px 150px at calc(100% + 20px) -44px,
        rgba(var(--aqh-rgb), var(--aqh-bloom)) 0%,
        rgba(var(--aqh-rgb), 0) 72%) no-repeat;
    opacity: .92;
    transform-origin: 100% 0;
    transition: opacity .36s ease, transform .52s cubic-bezier(.16, 1, .3, 1);
}


/* 4 · state. The bar grows, the bloom swells from the corner it hangs off,
   the edge steps up by §TCPRM-STATE's own +.22, and the lift goes from 2px to
   4px — half the grid card's 6px, because this card is a fifth of its height
   and a 6px hop on a 68px box reads as a jump rather than a lift.

   `border-color` is restated rather than driven through `--aitsq-help-line`:
   that variable is the RESTING edge and three tone blocks above set it, so
   the hover step has to be computed from the triplet instead. */
@media (hover: hover) {
    .aitsq-help:hover {
        --aqh-bar-w: calc(100% - 44px);
        transform: translateY(-4px);
        border-color: rgba(var(--aqh-rgb), calc(var(--aqh-edge) + .22));
        box-shadow:
            0 22px 40px -28px var(--aitsq-help-glow),
            0 6px 14px -12px rgba(16, 24, 40, .10);
    }

    body.theme-dark .aitsq-help:hover {
        box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .85);
    }

    .aitsq-help:hover::after { opacity: 1; transform: scale(1.14); }
}

/* Keyboard reaches the same surface. The outline itself is left to the rule
   above — it is an accessibility affordance and should not tone-cycle. */
.aitsq-help:focus-visible { --aqh-bar-w: calc(100% - 44px); }


/* 5 · reduced motion and forced colours, following §TCPRM-A11Y: the bar is
   simply PRESENT rather than growing and the bloom does not swell, so the
   information the hover carried is kept and the motion is not. Under forced
   colours every layer here is decoration the OS palette has no opinion
   about, and it all comes off. */
@media (prefers-reduced-motion: reduce) {
    .aitsq-help,
    .aitsq-help::after { transition: none; }

    .aitsq-help:hover { --aqh-bar-w: calc(100% - 44px); transform: none; }
    .aitsq-help:hover::after { transform: none; }
}

@media (forced-colors: active) {
    .aitsq-help { background-image: none; }
    .aitsq-help::after { display: none; }
}