/* ============================================================
   THE HERO: STEP-BY-STEP EXECUTION (home page, 2026-10-22).
   One workflow run in the Askpilot app. Built on the Track every workflow
   pieces in css/exec-ui.css (.xu-app frame, .xu-prog with .xu-task and
   .xu-count, .xu-sess with .xu-feed and .xu-composer); this file adds the
   real menu on the left, the two panes at the same width, and the session
   feed the way the app draws it: events, the Ask agent's work (tools,
   result), an email, scheduled checks, a gap in time, the Input needed
   card for an approval. js/hero-exec.js plays it; the markup is the
   finished frame. Every box keeps its size while it plays.
   ============================================================ */

.he-stage { max-width: 1136px; margin: 54px auto 0; }
/* outlined in ink, like the other boxes that show Askpilot itself (the
   Askpilot card in Replace, the PROCESS.md file) */
.he-app { height: 640px; border: 1.5px solid var(--ink, #16121A); }
.he-app p, .he-app ul, .he-app ol { margin: 0; }

/* the two panes, the progress as wide as the session */
.he-app .xu-prog { flex: 1 1 0; width: auto; min-width: 0; }
.he-app .xu-sess { flex: 1 1 0; }
.he-app .xu-tasks { padding: 22px 20px 0; }
/* the task list keeps the room above the count; on a phone, where a long
   run outgrows it, the list moves up so the newest tasks stay in view and the
   oldest fade out at the top, as the session feed does */
.he-tl { flex: 1; min-height: 0; overflow: hidden; }
.he-tl.is-scrolled { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px); mask-image: linear-gradient(180deg, transparent 0, #000 28px); }
.he-app.is-anim .xu-tasks { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.he-app .xu-count { margin-top: 12px !important; }
.he-app .xu-tasks::before { left: 27px; }
.he-pane-h, .he-top { font-size: 13.5px; }
.he-app .xu-task small svg { color: #A21CAF; }

/* ---------- the menu ---------- */
.he-side { flex: none; width: 212px; display: flex; flex-direction: column; padding: 6px 10px 14px 14px; }
.he-org { display: flex; align-items: center; gap: 9px; padding: 0 2px 14px; }
.he-org-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid #E4E4E9; background: #fff; color: #6B7280; }
.he-org-ico svg { width: 15px; height: 15px; }
.he-org b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.he-collapse { display: grid; color: #6B7280; }
.he-collapse svg { width: 16px; height: 16px; }
.he-nav { display: grid; gap: 2px; }
.he-nav-i { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-size: 13px; color: #2A2530; }
.he-nav-i svg { flex: none; width: 16px; height: 16px; }
.he-tabs { display: flex; gap: 10px; margin: 18px 8px 8px !important; font-size: 13px; }
.he-tabs b { font-weight: 700; }
.he-tabs span { color: #6B7280; }
.he-sess { list-style: none; padding: 0; display: grid; gap: 3px; }
.he-s { position: relative; display: flex; gap: 7px; padding: 6px 8px; border-radius: 8px; }
.he-s-i { flex: none; width: 13px; height: 13px; margin-top: 2px; color: #4B5563; }
.he-s > span { min-width: 0; }
.he-s b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.he-s small { display: block; font-size: 10.5px; color: #8B8492; }
.he-s.is-on { background: #EBEBEF; }
/* the running dot, as on the other app screens */
.he-run { position: absolute; right: 9px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: #5B5BF5; animation: he-blink 1.6s ease-in-out infinite; }
.he-await {
    display: none; position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 999px;
    background: #FEF3C7; color: #92400E; font-style: normal; font-size: 9.5px; font-weight: 700;
}
.he-user { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 0 2px; }
.he-uav { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #E1E1E6; background: #fff; font-size: 9.5px; font-weight: 700; }
.he-user b { font-size: 13px; font-weight: 700; }

/* ---------- the session's title bar ---------- */
.he-top { gap: 9px; }
.he-tile { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid #ECECF0; background: #fff; }
.he-tile img { width: 14px; height: 14px; }
.he-tt { min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.he-top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.he-auto {
    display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px;
    border: 1px solid #E4E4E9; background: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.he-auto svg { width: 13px; height: 13px; color: #6B7280; }
.he-auto em { font-style: normal; font-weight: 500; color: #6B7280; }
.he-done { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid #E4E4E9; background: #fff; color: #4B5563; }
.he-done svg { width: 12px; height: 12px; }

/* ---------- the feed ---------- */
.he-app .xu-feed-in { gap: 16px; padding: 20px 22px 12px; }
.he-e { font-size: 13px; line-height: 1.45; }
/* an event from a source */
.he-ev { padding: 10px 12px 11px; border: 1px solid #E7E7EB; border-radius: 12px; background: #fff; }
.he-ev-h { display: flex; align-items: center; gap: 8px; }
.he-ev-h b { font-weight: 700; }
.he-ev-h time { margin-left: auto; font-size: 11.5px; color: #9CA3AF; }
.he-ev-b, .he-ev-f { margin-top: 6px !important; font-size: 12px; color: #6B7280; }
.he-ev-q { margin-top: 7px !important; padding: 7px 10px; border-radius: 9px; background: #F6F6F8; font-size: 12.5px; color: #16121A; }
.he-ev-f { display: flex; align-items: center; gap: 3px; color: #4B5563; font-weight: 600; }
.he-ev-f svg { width: 12px; height: 12px; }
/* the Ask agent's work */
.he-ask { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; }
.he-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid #ECECF0; background: #fff; }
.he-av img { width: 14px; height: 14px; }
.he-ask-b { min-width: 0; display: grid; gap: 7px; padding-top: 2px; }
.he-ask.is-working .he-ask-b { gap: 0; }
.he-ask-h { display: flex; align-items: center; gap: 8px; }
.he-ask-h b { font-weight: 700; }
.he-ask-st { font-size: 12px; color: #6B7280; }
.he-worked { display: inline-flex; align-items: center; gap: 2px; }
.he-worked svg { width: 12px; height: 12px; }
.he-working { display: none; align-items: center; gap: 2px; }
.he-working i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: he-dot 1s ease-in-out infinite; }
.he-working i:first-of-type { margin-left: 3px; }
.he-working i:nth-of-type(2) { animation-delay: .15s; }
.he-working i:nth-of-type(3) { animation-delay: .3s; }
.he-tools { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.he-tools li {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 6px; border-radius: 7px;
    border: 1px solid #ECECF0; background: #FAFAFB; font-size: 11.5px; font-weight: 600; color: #374151;
}
.he-tools img { width: 12px; height: 12px; }
.he-ask-t { color: #16121A; }
/* an email it sent */
.he-mail { border: 1px solid #E7E7EB; border-radius: 10px; background: #fff; overflow: hidden; font-size: 12px; }
.he-mail-r { display: flex; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #F2F2F4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.he-mail-r span { flex: none; width: 46px; color: #9CA3AF; }
.he-mail-body { padding: 8px 10px; color: #4B5563; }
.he-mail-f { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-top: 1px solid #F2F2F4; color: #9CA3AF; font-size: 11px; }
.he-sent { display: inline-flex; align-items: center; gap: 4px; color: #15803D; font-weight: 700; }
.he-sent svg { width: 10px; height: 10px; }
/* a scheduled check, and what it listens for */
.he-note { display: grid; gap: 4px; padding-left: 34px; }
.he-note p { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #4B5563; }
.he-note svg { flex: none; width: 13px; height: 13px; color: #6B7280; }
/* time passing */
.he-gap { display: flex; align-items: center; gap: 10px; color: #9CA3AF; font-size: 11.5px; font-weight: 600; }
.he-gap::before, .he-gap::after { content: ""; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, #DDDDE3 0 4px, transparent 4px 8px); }
/* Input needed: an action that waits for a person */
.he-input { margin-left: 34px; padding: 11px 12px 12px; border: 1px solid #F0C6F5; border-radius: 12px; background: #FDF7FE; }
.he-input-k { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #A21CAF; }
.he-input-k svg { width: 13px; height: 13px; }
.he-input-q { margin-top: 7px !important; font-weight: 700; }
.he-input-c { margin-top: 2px !important; font-size: 12px; color: #6B7280; }
.he-opts { list-style: none; padding: 0; display: grid; gap: 5px; margin-top: 9px !important; }
.he-opts li { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid #E7E7EB; border-radius: 9px; background: #fff; font-size: 12px; transition: border-color .25s, background-color .25s; }
.he-opts i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: #F1F1F4; font-style: normal; font-size: 10.5px; font-weight: 700; transition: background-color .25s, color .25s; }
.he-opts li.is-picked { border-color: #16121A; }
.he-opts li.is-picked i { background: #16121A; color: #fff; }
.he-input-f { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px !important; font-size: 12px; font-weight: 600; }
.he-skip { color: #6B7280; }
.he-submit { padding: 5px 12px; border-radius: 8px; background: #16121A; color: #fff; transition: transform .2s; }
.he-input-ok { display: none; align-items: center; gap: 6px; margin-top: 10px !important; font-size: 12px; font-weight: 700; color: #15803D; }
.he-input-ok svg { width: 11px; height: 11px; }
/* once answered: the choice stays, the buttons give way to who approved it */
.he-input.is-approved .he-input-f { display: none; }
.he-input.is-approved .he-input-ok { display: flex; }
.he-input.is-approved .he-opts li:not(.is-picked) { opacity: .5; }

/* ---------- the message box ---------- */
.he-composer p { font-size: 13px; color: #9CA3AF; }
.he-srcs { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 999px; border: 1px solid #E4E4E9; font-size: 11.5px; font-weight: 600; color: #4B5563; }
.he-srcs svg { width: 13px; height: 13px; }
.he-send { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #E9E7EE; color: #fff; transition: background-color .25s; }
.he-send svg { width: 13px; height: 13px; }
.he-ico-stop { display: none; }
/* while the Ask agent works, the send button is a stop button */
.he-app.is-working .he-send { background: #16121A; }
.he-app.is-working .he-ico-send { display: none; }
.he-app.is-working .he-ico-stop { display: block; }

/* ============================================================
   THE PLAY (js/hero-exec.js adds .is-anim)
   ============================================================ */
.he-app.is-anim .he-e { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }
.he-app.is-anim .he-e.is-in { opacity: 1; transform: none; }
/* the Ask agent at work: "Working", then what it used and found opens
   below it (a height and opacity transition: Chrome drew text that had
   been display:none and then animated a shade too light) */
.he-ask.is-working .he-worked { display: none; }
.he-ask.is-working .he-working { display: inline-flex; }
.he-out { display: grid; gap: 7px; }
.he-app.is-anim .he-out { max-height: 420px; transition: max-height .55s cubic-bezier(.2, .8, .2, 1), opacity .4s .1s; }
.he-app.is-anim .he-ask.is-working .he-out { max-height: 0; opacity: 0; overflow: hidden; }
/* the approval card, open and waiting */
.he-app.is-anim .he-input.is-pressing .he-submit { transform: scale(.94); }
/* the session: new at the top of Open, waiting for input, running */
.he-app.is-anim .he-s.is-new:not(.is-in) { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.he-app.is-anim .he-s.is-new { max-height: 52px; transition: max-height .45s cubic-bezier(.2, .8, .2, 1), opacity .4s, padding .45s; }
.he-app.is-anim .he-s.is-new.is-ping { background: #E4E6FF; }
.he-s.is-await .he-await { display: inline-block; }
.he-s.is-await .he-run { display: none; }
/* before the session exists, its title bar and the progress title wait */
.he-app.is-anim .he-top > *, .he-app.is-anim .he-pane-h > * { transition: opacity .4s; }
.he-app.is-anim:not(.is-open) .he-top > *, .he-app.is-anim:not(.is-open) .he-pane-h > * { opacity: 0; }
.he-app.is-anim .xu-count { transition: opacity .4s; }
.he-app.is-anim:not(.is-planned) .xu-count { opacity: 0; }
.he-app.is-anim .xu-task small { transition: opacity .3s; }

@keyframes he-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes he-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
    .he-side { width: 196px; }
    .he-app .xu-feed-in { padding: 18px 16px 10px; }
}
@media (max-width: 980px) {
    .he-side { display: none; }
}
@media (max-width: 767px) {
    .he-stage { margin-top: 36px; }
    .he-app { height: auto; }
    .he-app .xu-prog { flex: none; height: 400px; }
    .he-app:not(.is-anim) .xu-prog { height: auto; }
    .he-app .xu-sess { flex: none; height: 520px; }
    .he-app .xu-tasks { padding: 18px 14px 0; }
    .he-app .xu-tasks::before { left: 21px; }
    /* the session's name comes first: the auto-run control keeps only its clock */
    .he-auto { gap: 0; padding: 0 7px; font-size: 0; }
    .he-auto em { display: none; }
    .he-input, .he-note { margin-left: 0; padding-left: 0; }
    .he-input { padding: 10px 11px 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .he-run, .he-working i { animation: none; }
}

/* The hero enters top to bottom (css/v8.css: title, description, buttons,
   platform row); the app arrives last, on the cue the old demo used. The play
   in js/hero-exec.js waits for it to land. */
.hero--static .he-stage {
    opacity: 0;
    transform: translateY(10px);
    animation: hero-compare-in 560ms cubic-bezier(0.16, 1, 0.3, 1) 1020ms forwards;
}
@media (prefers-reduced-motion: reduce) {
    .hero--static .he-stage { opacity: 1; transform: none; animation: none; }
}