/* ═══════════════════════════════════════════════════════════════════════════
   aits-save.css — the one save / favourite button, site-wide (2026-09-24)
   ---------------------------------------------------------------------------
   Styles for <x-public.save-button> and its script, assets/js/aits-save.js.
   Linked by every public layout, so a card can carry the button on any page.

   Three looks, one behaviour:
     icon   the AI Directory's own bookmark (`.dir-tc-bk`) — top-right on a
            `.dir-tc` card, boxed at the end of a `.dir-lc` list row. The
            baseline below is written at LOW specificity (`:where()`), so the
            directory sheet and every kit that already styles `.dir-tc-bk` —
            or hides it, as /search does at (0,5,0) — still wins; this only
            fills in on listings whose sheet never had the rule.
     pill   `.aits-save-pill`, the labelled button for pages outside the V2
            detail kit (tool pages). V2 detail pages keep their own
            `.atd-fav-btn` pill — same state classes.
     share  a fifth button in the article share strip (`.pa-share__btn`).

   States: `.is-on` (saved) on every look, `.is-fav` too on pills; `.is-pop`
   plays once when an item is saved. Tokens fall back to literals, so the
   file works on pages that never load the V2 token layer.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --aits-save-ink:   #3680ED;
    --aits-save-deep:  #2060C0;
    --aits-save-light: #60A4F5;
    --aits-save-tint:  rgba(54,128,237,.12);
    --aits-save-grad:  linear-gradient(135deg, #60A4F5 0%, #3680ED 52%, #2060C0 100%);
}

/* The saved / not-saved icon pair swaps with the `hidden` attribute, which
   loses to ANY author `display` — the V2 topbar pill sets
   `.atd-pillbtn .ic svg{display:block}` — so it is enforced here. */
[data-aits-save] [data-aits-on][hidden],
[data-aits-save] [data-aits-off][hidden] { display: none !important; }

/* ── 1. Icon button (listing cards) ─────────────────────────────────────── */
:where(.dir-tc) .dir-tc-bk {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 3;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #c2c6d4;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
[dir="rtl"] :where(.dir-tc) .dir-tc-bk { right: auto; left: 11px; }
:where(.dir-tc) .dir-tc-bk:hover { background: var(--aits-save-tint); color: var(--aits-save-ink); transform: scale(1.1); }
:where(.dir-tc) .dir-tc-bk.is-on { color: var(--aits-save-ink); }
:where(.dir-tc) .dir-tc-bk:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(54,128,237,.28); }
:where(.dir-tc) .dir-tc-bk svg { display: block; }

/* List rows: a boxed button at the end of the row, not a floating corner. */
:where(.dir-lc-side) .dir-tc-bk {
    position: static;
    width: 36px;
    height: 36px;
    border: 1px solid #E6E8EE;
    border-radius: 10px;
    background: #fff;
}

body.theme-dark :where(.dir-tc) .dir-tc-bk { color: #5c6270; }
body.theme-dark :where(.dir-tc) .dir-tc-bk:hover { background: rgba(54,128,237,.16); color: var(--aits-save-light); }
body.theme-dark :where(.dir-tc) .dir-tc-bk.is-on { color: var(--aits-save-light); }
body.theme-dark :where(.dir-lc-side) .dir-tc-bk { background: rgba(29,29,34,.9); border-color: rgba(255,255,255,.10); }

/* One pop when an item is saved (every look). */
[data-aits-save].is-pop { animation: aits-save-pop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes aits-save-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.28); }
    70%  { transform: scale(.92); }
    100% { transform: scale(1); }
}

/* ── 2. Labelled pill (pages outside the V2 detail kit) ─────────────────── */
.aits-save-pill {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 15px 8px 12px;
    border: 1.5px solid #DADFE8;
    border-radius: 999px;
    background: #fff;
    color: #1F2937;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease, border-color .2s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
/* ::before — the brand fill that sweeps in from the leading edge on hover
   and stays when saved; ::after — one sheen across it. Both sit under the
   label, so it never loses contrast mid-transition. */
.aits-save-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--aits-save-grad);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .4s cubic-bezier(.16,1,.3,1);
}
[dir="rtl"] .aits-save-pill::before { transform-origin: 100% 50%; }
.aits-save-pill::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    width: 45%;
    z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
    transform: skewX(-18deg);
    transition: inset-inline-start .7s cubic-bezier(.16,1,.3,1);
    pointer-events: none;
}
.aits-save-pill svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
@media (hover: hover) {
    .aits-save-pill:hover { border-color: var(--aits-save-ink); color: var(--aits-save-deep); transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(54,128,237,.6); }
    .aits-save-pill:hover svg { transform: rotate(-8deg) scale(1.1); }
    .aits-save-pill.is-on:hover::after { inset-inline-start: 125%; }
}
.aits-save-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(54,128,237,.3); }
.aits-save-pill:active { transform: scale(.97); }
.aits-save-pill.is-on { border-color: transparent; color: #fff; box-shadow: 0 10px 22px -12px rgba(54,128,237,.75); }
.aits-save-pill.is-on::before { transform: none; }
.aits-save-pill.is-on:hover { color: #fff; }

body.theme-dark .aits-save-pill { background: rgba(29,29,34,.92); border-color: rgba(255,255,255,.14); color: #E8EAF0; }
body.theme-dark .aits-save-pill:hover { color: #fff; border-color: var(--aits-save-light); }
body.theme-dark .aits-save-pill.is-on { border-color: transparent; color: #fff; }

/* The tool page header row (livewire/public/pages): the pill closes the row;
   on a phone the row wraps and the pill moves up beside the tool icon instead
   of dropping under the title.

   The wrap used to leave it on a third line below the subtitle, which read as
   a stray button at the bottom of the band. Reordering is enough to pin it to
   the top corner: icon and pill share the first row (`auto` start margin pushes
   the pill to the far end), and the title block takes the whole second row.
   No absolute positioning, so the band still sizes to its content and the
   title can never run underneath the pill. */
.tool-header-flex.has-save > .aits-save-pill { flex-shrink: 0; margin-inline-start: 14px; }
@media (max-width: 575.98px) {
    .tool-header-flex.has-save { flex-wrap: wrap; row-gap: 10px; align-items: center; }
    .tool-header-flex.has-save > .tool-lucide { order: 1; }
    .tool-header-flex.has-save > .aits-save-pill { order: 2; margin-inline-start: auto; }
    .tool-header-flex.has-save > .flex-grow-1 { order: 3; flex-basis: 100%; }
}

/* ── 3. Save in the article share strip ─────────────────────────────────── */
.pa-share__btn[data-net="save"]:hover,
.pa-share__btn[data-net="save"]:focus-visible { background: var(--aits-save-ink); border-color: var(--aits-save-ink); color: #fff; box-shadow: 0 12px 22px -10px rgba(54,128,237,.9); }
.pa-share__btn[data-net="save"].is-on { background: var(--aits-save-grad); border-color: transparent; color: #fff; }
.pa-share__btn[data-net="save"] svg { width: 1em; height: 1em; }

/* ── 3b. Mini (row-end bookmark on compact link lists — the /tools wall) ──
   The row keeps its full link; the button sits over the link's right end,
   which reserves room for it (`li.has-save > a`), so a title is never run
   under it. Faint at rest, full on the row's hover or focus, always full
   once saved; on touch screens (no hover) it is simply always visible. */
li.has-save { position: relative; }
.aits-cat-list li.has-save > a { padding-inline-end: 36px; }
.aits-save-mini {
    position: absolute;
    top: 50%;
    inset-inline-end: -6px;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--aits-faint, #9CA3AF);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity .18s ease, color .18s ease, background-color .18s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
    -webkit-tap-highlight-color: transparent;
}
.aits-save-mini svg { display: block; }
@media (hover: hover) {
    .aits-save-mini { opacity: .45; }
    li.has-save:hover .aits-save-mini,
    li.has-save:focus-within .aits-save-mini { opacity: 1; }
    .aits-save-mini:hover { background: var(--ctint, var(--aits-save-tint)); color: var(--cc, var(--aits-save-ink)); transform: translateY(-50%) scale(1.12); }
}
.aits-save-mini.is-on { opacity: 1; color: var(--cc, var(--aits-save-ink)); }
.aits-save-mini:focus-visible { outline: none; opacity: 1; box-shadow: 0 0 0 3px rgba(54,128,237,.28); }
.aits-save-mini.is-pop { animation: aits-save-pop-mini .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes aits-save-pop-mini {
    0%   { transform: translateY(-50%) scale(1); }
    40%  { transform: translateY(-50%) scale(1.3); }
    100% { transform: translateY(-50%) scale(1); }
}
body.theme-dark .aits-save-mini { color: #6B7280; }
body.theme-dark .aits-save-mini.is-on { color: var(--cc, var(--aits-save-light)); }

/* ── 4. Toasts ───────────────────────────────────────────────────────────── */
.aits-save-toasts {
    position: fixed;
    inset-block-end: 20px;
    inset-inline-end: 20px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}
.aits-save-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(380px, calc(100vw - 32px));
    padding: 10px 12px 10px 10px;
    border: 1px solid #ECECEC;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px -18px rgba(15,23,42,.35);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.45;
    color: #111;
    pointer-events: auto;
    animation: aits-save-toast-in .38s cubic-bezier(.16,1,.3,1) both;
}
.aits-save-toast.is-out { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.aits-save-toast__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #34D399, #0CA678);
}
.aits-save-toast.is-off .aits-save-toast__ico { background: linear-gradient(135deg, #94A3B8, #64748B); }
.aits-save-toast.is-bad .aits-save-toast__ico { background: linear-gradient(135deg, #FF6B6B, #E03131); }
.aits-save-toast__ico svg { width: 13px; height: 13px; }
.aits-save-toast__msg { min-width: 0; overflow-wrap: anywhere; }
.aits-save-toast__go {
    flex: 0 0 auto;
    margin-inline-start: 4px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--aits-save-tint);
    color: var(--aits-save-deep);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.aits-save-toast__go:hover { background: var(--aits-save-ink); color: #fff; text-decoration: none; }
@keyframes aits-save-toast-in {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
body.theme-dark .aits-save-toast { border-color: #2A2A30; background: #17171B; color: #F4F5F7; box-shadow: 0 18px 44px -18px rgba(0,0,0,.85); }
body.theme-dark .aits-save-toast__go { background: rgba(96,164,245,.16); color: #93BEFF; }
body.theme-dark .aits-save-toast__go:hover { background: var(--aits-save-ink); color: #fff; }

@media (max-width: 600px) {
    .aits-save-toasts { inset-inline: 12px; inset-block-end: 14px; align-items: stretch; }
    .aits-save-toast { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    [data-aits-save].is-pop,
    .aits-save-toast { animation: none; }
    .aits-save-pill,
    .aits-save-pill::before,
    .aits-save-pill::after,
    .aits-save-pill svg { transition: none; }
    .aits-save-pill:hover { transform: none; }
}