/* ============================================================
   SET IT UP FROM YOUR AI AGENT (home page, 2026-10-23). The Custom
   integrations section (css/custom-tools.css) with the How it works box's
   story as its first tab, Workflow: these are the pieces that tab adds.
   The section's data-s says which tab is open (js/custom-tools.js).
   ============================================================ */

/* the tabs' layout, wide and narrow: css/setup-split.css */

/* the left card's title names what is set up, tab by tab (Dom) */
.ct-ttl-l { display: none; }
.ct[data-s="wf"] .ct-ttl-l--wf, .ct[data-s="wfedit"] .ct-ttl-l--wfedit, .ct[data-s="wfreview"] .ct-ttl-l--wfreview, .ct[data-s="wftpl"] .ct-ttl-l--wftpl,
.ct[data-s="mcp"] .ct-ttl-l--mcp, .ct[data-s="api"] .ct-ttl-l--api,
.ct[data-s="hook"] .ct-ttl-l--hook, .ct[data-s="out"] .ct-ttl-l--out, .ct[data-s="app"] .ct-ttl-l--app { display: inline; }

/* the workflow tabs' own right card titles and their live label (the
   integration tabs keep theirs) */
.ct-ttl--wf, .ct-ttl--wfedit, .ct-ttl--wfreview, .ct-ttl--wftpl, .ct-live-wf { display: none !important; }
.ct[data-s^="wf"] .ct-ttl:not(.ct-ttl--wf):not(.ct-ttl--wfedit):not(.ct-ttl--wfreview):not(.ct-ttl--wftpl),
.ct[data-s^="wf"] .ct-live b:not(.ct-live-wf) { display: none !important; }
.ct[data-s="wf"] .ct-ttl--wf, .ct[data-s="wfedit"] .ct-ttl--wfedit, .ct[data-s="wfreview"] .ct-ttl--wfreview, .ct[data-s="wftpl"] .ct-ttl--wftpl,
.ct[data-s^="wf"] .ct-live-wf { display: inline !important; }

/* the review tab's numbers */
.ct-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 !important; }
.ct-stats p { margin: 0; padding: 10px 10px 9px; border: 1px solid #ECE8EE; border-radius: 10px; background: #fff; }
.ct-stats b { display: block; font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #16121A); }
.ct-stats span { display: block; margin-top: 2px; font-size: .6875rem; line-height: 1.3; color: #8B8492; }

/* a todo the chat just changed */
.ct-upd {
    flex: none; margin-left: auto; padding: 2px 8px; border-radius: 999px;
    background: var(--pink-wash, #FFF3FF); color: var(--brand-magenta, #D53BD5);
    font-size: .6875rem; font-style: normal; font-weight: 700;
}

/* on a phone most of those titles take two lines: every tab keeps room for
   two, so the card does not change height when the tab changes */
@media (max-width: 767px) {
    .ct--setup .ct-card .ho-card-title { min-height: 2.5em; }
}

/* a run's state, on the right of its row */
.ct-pill {
    flex: none; margin-left: auto; padding: 2px 8px; border-radius: 999px;
    font-size: .6875rem; font-style: normal; font-weight: 700; white-space: nowrap;
}
.ct-pill--ok { background: #EAF7F0; color: #1E7A4E; }
.ct-pill--mute { background: #F3F1F2; color: #8B8492; }
.ct-pill--wait { background: #FFF4E5; color: #B45309; }
.ct-pill--run { background: var(--pink-wash, #FFF3FF); color: var(--brand-magenta, #D53BD5); }

/* where the workflow changed, between the runs before and after */
.ct-ver {
    display: flex; align-items: center; gap: 10px; margin: 2px 0 !important;
    font-size: .6875rem; font-weight: 700; color: var(--brand-magenta, #D53BD5); white-space: nowrap;
}
.ct-ver::before, .ct-ver::after { content: ""; flex: 1; height: 1px; background: #F1D9F1; }
.ct-ver span { overflow: hidden; text-overflow: ellipsis; }

/* "Start from a template" (Dom, 26 Oct 2026: the ready-made workflows as a
   tab of this section): Claude lists Askpilot's ready-made workflows in the
   chat as small template cards; the one you pick is outlined in ink */
.ct-tpls { list-style: none; display: grid; gap: 6px; margin: 10px 0 0 22px; padding: 0; }
.ct-tpl {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center;
    padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid #ECE8EE;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.ct-tpl-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #EEF1FF; color: #4C6BEE; }
.ct-tpl-ico svg { width: 15px; height: 15px; }
.ct-tpl p { margin: 0; min-width: 0; }
.ct-tpl b { display: block; font-size: .75rem; font-weight: 750; line-height: 1.3; color: var(--ink, #16121A); }
.ct-tpl p span { display: block; font-size: .6875rem; line-height: 1.35; color: #8B8492; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-tpl-logos { display: flex; gap: 3px; }
.ct-tpl-logos img { width: 16px; height: 16px; padding: 1px; border-radius: 5px; border: 1px solid #ECE8EE; background: #fff; }
.ct-tpl--pick.is-in { border-color: var(--ink, #16121A); box-shadow: 0 0 0 1px var(--ink, #16121A); }
/* the workflow made from a template says so */
.ct-from {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; vertical-align: 2px;
    background: #EEF1FF; color: #3F5EE0; font-size: .625rem; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

/* 26 Oct 2026 (Dom): Industries moved up, before the setup section, and
   took its plain look; the setup section (#setup, "Already use Claude or
   ChatGPT?") moved down into this place and took this section's light
   ground: two very light clouds of colour rising from its foot and a faint
   pink light behind its title. On every page with the section (the
   solution pages too, to match the home page). */
#setup.ct--setup { position: relative; isolation: isolate; overflow-x: clip; }
#setup.ct--setup::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(44% 34% at 50% 0%, rgba(242, 123, 230, .08), transparent 72%),
        radial-gradient(42% 46% at 18% 108%, rgba(213, 59, 213, .07), transparent 70%),
        radial-gradient(44% 48% at 84% 106%, rgba(90, 120, 240, .065), transparent 70%);
}