/* ============================================================
   WORKFLOW TRACKING (home page, 2026-10-21). The app while a workflow
   runs. Only the session's progress has words: the invoice chase from
   the PROCESS.md section above, its trigger and its tasks. The sidebar
   and the session beside it are skeletons that react to the progress.

   The markup is the finished frame, which is what reduced motion and
   no-JS readers see. js/exec-ui.js adds .is-anim and plays the progress
   from its first task: each task opens, the session gains an entry,
   the task closes; a call adds a task that needs approval. Every box
   keeps its size while it plays, so the page never moves.
   ============================================================ */

.xu { padding: 112px 0; border-top: 1px solid var(--line); }

.xu-stage { max-width: 1120px; margin: 0 auto; }

/* Two rows on a laptop: the first title, "Track every workflow, step by
   step," was a few pixels wider than the wrap at the shared 72px, so from
   1024px up the type scales with the wrap (about 69px at full width). The
   later titles keep that size. Below that it wraps like every other title. */
@media (min-width: 1024px) {
    .xu .sec-title { font-size: calc(min(100vw - 64px, 1136px) / 16.4); }
}

/* Under the title (Dom, 23 Oct 2026): one pill that names the format the
   plan comes from, with a violet "Learn more" to the PROCESS.md guide. */
.xu-format {
    display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
    margin: 26px auto 0; padding: 5px 5px 5px 6px;
    border: 1px solid var(--line, #EAE3E1); border-radius: 999px; background: #fff;
    box-shadow: 0 1px 2px rgba(20, 17, 26, .04), 0 10px 24px -16px rgba(20, 17, 26, .22);
    font-size: 0.9375rem; line-height: 1.3; color: var(--body, #4E4854);
}
.xu-format-ico {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--pink-wash, #FFF3FF); border: 1px solid #F3DDF3; color: var(--brand-magenta, #D53BD5);
}
.xu-format-ico svg { width: 16px; height: 16px; }
.xu-format-t b { font-weight: 750; color: var(--ink, #16121A); }
.xu-format-btn {
    flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 7px 14px 7px 16px;
    border-radius: 999px; background: var(--brand-magenta, #D53BD5); color: #fff;
    font-size: 0.875rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 1px 2px rgba(120, 20, 120, .25);
    transition: background-color var(--t-fast, 160ms), transform var(--t-fast, 160ms);
}
.xu-format-btn svg { width: 14px; height: 14px; transition: transform var(--t-fast, 160ms); }
.xu-format-btn:hover { background: #BE2EBE; color: #fff; }
.xu-format-btn:hover svg { transform: translateX(2px); }
.xu-format-btn:focus-visible { outline: 2px solid var(--brand-magenta, #D53BD5); outline-offset: 2px; }
/* on a phone the words take the width (the icon goes), in even lines,
   and the button drops under them */
@media (max-width: 480px) {
    .xu-format {
        flex-direction: column; gap: 10px;
        padding: 12px 14px 14px; border-radius: 20px; font-size: 0.875rem;
    }
    .xu-format-ico { display: none; }
    .xu-format-t { text-align: center; text-wrap: balance; }
    .xu-format-btn { margin-left: 0; }
}

.xu-app {
    --xu-ink: #16121A;
    --xu-mut: #6B7280;
    --xu-line: #E7E7EB;
    --xu-sk: #E8E8EC;
    --xu-pink: #E9A3F5;
    display: flex; gap: 10px;
    height: 640px; padding: 10px 10px 0 0;
    border: 1.5px solid #16121A; border-radius: 24px; overflow: hidden;
    background: #F7F7F8;
    box-shadow: 0 24px 50px -20px rgba(17, 24, 39, 0.22), 0 2px 6px -2px rgba(17, 24, 39, 0.06);
    font-size: 13px; color: var(--xu-ink); text-align: left;
}
.xu-app p { margin: 0; }

/* ---- skeleton pieces ---- */
.xu-sk {
    display: block; flex: none; width: var(--w, 100%); max-width: 100%; height: 9px;
    border-radius: 999px; background: var(--xu-sk);
}
/* bars that share a row give way on a narrow phone instead of spilling out */
.xu-sess-top > .xu-sk:nth-child(2),
.xu-skcard-h > .xu-sk { flex: 0 1 auto; min-width: 24px; }
.xu-sk--mut { height: 8px; background: #EFEFF2; }
.xu-sk--txt { height: 8px; }
.xu-sk--link { height: 8px; background: #E3EAFB; }
.xu-sk--tile { width: 24px; height: 24px; border-radius: 7px; }
.xu-sk--ico { width: 16px; height: 16px; border-radius: 5px; }
.xu-sk--pill { width: 108px; height: 28px; border-radius: 999px; }
.xu-sk--btn { width: 28px; height: 28px; border-radius: 8px; }
.xu-sk--chip { width: 118px; height: 24px; border-radius: 8px; }
.xu-sk--logo { width: 13px; height: 13px; border-radius: 3px; }
.xu-sk--tab { background: #DCDCE1; }
.xu-sk--avatar { width: 22px; height: 22px; border-radius: 999px; }

/* ---- sidebar: as on the other app screens, the nav, the Open and Done
   tabs, and the list of sessions, with the one being shown selected ---- */
.xu-side { flex: none; display: flex; flex-direction: column; width: 212px; padding: 18px 10px 12px 16px; }
.xu-side-brand { display: flex; align-items: center; gap: 10px; padding: 0 4px; margin-bottom: 20px; }
.xu-side-nav { display: grid; gap: 2px; }
.xu-side-item,
.xu-side-sess { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; }
.xu-side-sub { display: flex; align-items: center; gap: 12px; padding: 20px 10px 8px; }
.xu-side-list { display: grid; gap: 2px; }
.xu-side-sess { gap: 9px; }
.xu-side-sess.is-on { background: #EBEBEE; }
.xu-side-sess.is-on .xu-sk { background: #DCDCE1; }
.xu-side-dot { flex: none; margin-left: auto; width: 6px; height: 6px; border-radius: 999px; background: #5B5BF5; }
.xu-side-user {
    margin-top: auto; display: flex; align-items: center; gap: 9px;
    padding: 12px 10px 0; border-top: 1px solid #ECECEF;
}

/* ---- the two panes ---- */
.xu-prog,
.xu-sess {
    display: flex; flex-direction: column; min-width: 0;
    background: #fff; border: 1px solid var(--xu-line); border-bottom: 0;
    border-radius: 14px 14px 0 0;
}
.xu-prog { flex: none; width: 300px; overflow: hidden; }
.xu-prog-in { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.xu-sess { flex: 1; }

.xu-pane-h,
.xu-sess-top {
    flex: none; display: flex; align-items: center; gap: 9px;
    height: 52px; padding: 0 18px;
    border-bottom: 1px solid #EFEFF2;
}
.xu-pane-h { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.xu-pane-h svg { flex: none; width: 16px; height: 16px; }
.xu-sess-btns { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---- the progress: the one part with words ---- */
.xu-tasks {
    position: relative; list-style: none;
    display: grid; gap: 20px; margin: 0; padding: 22px 18px 0;
}
/* --xu-line is set by the script as tasks arrive; without it the line
   runs from the first icon to the last dot */
.xu-tasks::before {
    content: ""; position: absolute; left: 25px; top: 30px; z-index: 1;
    height: var(--xu-line, calc(100% - 56px));
    width: 1px; background: #E5E5EA;
    transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.xu-task {
    position: relative; display: flex; align-items: flex-start; gap: 12px;
    font-size: 13px; font-weight: 600; line-height: 1.4; text-wrap: pretty;
}
.xu-task > i {
    flex: none; position: relative; z-index: 2;
    width: 15px; height: 15px; margin-top: 1px;
    display: grid; place-items: center; background: #fff; border-radius: 999px;
}
.xu-task > i::before {
    content: ""; width: 7px; height: 7px; border-radius: 999px; background: #D4D6DD;
    transition: background-color 0.3s ease;
}
.xu-task > i svg { display: none; }
.xu-task.is-active > i::before { background: var(--xu-pink); }
.xu-task.is-done > i { background: var(--xu-ink); color: #fff; }
.xu-task.is-done > i::before { display: none; }
.xu-task.is-done > i svg { display: block; width: 9px; height: 9px; }
.xu-task.is-event { font-weight: 700; }
.xu-task.is-event > svg,
.xu-task.is-event > img { flex: none; position: relative; z-index: 2; width: 15px; height: 15px; background: #fff; }
.xu-task small {
    display: flex; align-items: center; gap: 5px; margin-top: 4px;
    font-size: 12px; font-weight: 500; color: var(--xu-mut);
}
.xu-task small svg { flex: none; width: 12px; height: 12px; color: #9CA3AF; }
/* the task that needs a person stays marked */
.xu-task.is-flag { background-color: #FCEFFE; box-shadow: 0 0 0 7px #FCEFFE; border-radius: 4px; }

.xu-count {
    align-self: center; margin: auto 0 18px !important;
    padding: 7px 14px; border: 1px solid var(--xu-line); border-radius: 999px;
    background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
    font-size: 12.5px; font-weight: 600;
}

/* ---- the session, as skeletons ---- */
/* Pinned to the newest entry. Without the script the column sits at the
   bottom, so a short window loses its oldest entry under the fade rather
   than the newest one. The fade covers only the top padding. */
.xu-feed {
    position: relative; flex: 1; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px);
            mask-image: linear-gradient(to bottom, transparent 0, #000 20px);
}
.xu-feed-in {
    flex: none; display: flex; flex-direction: column; gap: 22px;
    width: 100%; max-width: 600px; margin: 0 auto; padding: 22px 28px 14px;
}
.xu-skrow { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.xu-skl { display: grid; gap: 9px; padding-top: 3px; }
.xu-skcard {
    grid-column: 2; margin-top: 12px;
    border: 1px solid var(--xu-line); border-radius: 12px; background: #fff;
}
.xu-skcard-h { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #F1F1F4; }
.xu-skcard-b { display: grid; gap: 9px; padding: 14px; }
.xu-skwait { display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.xu-skwait > i:first-child { flex: none; width: 8px; height: 8px; border-radius: 999px; background: #D4D6DD; }

.xu-composer { flex: none; width: 100%; max-width: 600px; margin: 0 auto; padding: 8px 28px 16px; }
.xu-composer-box {
    display: grid; gap: 16px; padding: 14px 12px 10px 14px;
    border: 1px solid var(--xu-line); border-radius: 14px; background: #fff;
    box-shadow: 0 2px 8px -2px rgba(17, 24, 39, 0.08);
}
.xu-composer-row { display: flex; align-items: center; justify-content: space-between; }

/* ============================================================
   THE PLAY (js/exec-ui.js), only with .is-anim
   ============================================================ */

.xu-app.is-anim .xu-feed { justify-content: flex-start; }
.xu-app.is-anim .xu-feed-in { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease; }

/* moving to another session: the progress and the session fade, the
   next one is put in, and they come back */
.xu-prog-in { transition: opacity 0.35s ease; }
.xu-side-sess { transition: background-color 0.3s ease; }
.xu-side-sess .xu-sk { transition: background-color 0.3s ease; }
.xu-app.is-switch .xu-prog-in,
.xu-app.is-switch .xu-feed-in { opacity: 0; }

/* between loops what was added fades before it is cleared */
.xu-tasks,
.xu-count { transition: opacity 0.45s ease; }
.xu-app.is-fade .xu-feed-in,
.xu-app.is-fade .xu-tasks,
.xu-app.is-fade .xu-count { opacity: 0; }

/* new tasks and session entries come in */
.xu-app.is-anim .xu-skrow,
.xu-app.is-anim .xu-skwait,
.xu-app.is-anim .xu-skcard {
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.xu-app.is-anim .xu-skrow.is-in,
.xu-app.is-anim .xu-skwait.is-in,
.xu-app.is-anim .xu-skcard.is-in { opacity: 1; transform: none; }
.xu-app.is-anim .xu-task {
    opacity: 0; transform: translateX(-6px);
    transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s ease, box-shadow 0.5s ease;
}
.xu-app.is-anim .xu-task.is-in { opacity: 1; transform: none; }
.xu-count.is-bump { animation: xu-bump 0.45s cubic-bezier(0.16, 1, 0.3, 1); }

/* the open task breathes; a closed one pops its tick */
.xu-app.is-anim .xu-task.is-active > i::before,
.xu-app.is-anim .xu-skwait.is-on > i:first-child { animation: xu-dot 1.6s ease-in-out infinite; }
.xu-skwait.is-on > i:first-child { background: var(--xu-pink); }
.xu-app.is-anim .xu-task.is-done > i { animation: xu-pop 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
/* the entry being written shimmers; a new event lands with a ring */
.xu-skrow.is-working .xu-sk:not(.xu-sk--tile) {
    background: linear-gradient(90deg, #E8E8EC 25%, #F7F7F9 40%, #E8E8EC 60%);
    background-size: 300% 100%;
    animation: xu-shimmer 1.3s ease-in-out infinite;
}
.xu-skrow.is-ping > .xu-sk--tile { animation: xu-ping 1.3s ease-out 2; }
/* the selected session is running, as the other app screens show it */
.xu-app.is-anim .xu-side-dot { animation: xu-blink 1.6s ease-in-out infinite; }
@keyframes xu-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

@keyframes xu-ping {
    0% { box-shadow: 0 0 0 0 rgba(213, 59, 213, 0.42); }
    75%, 100% { box-shadow: 0 0 0 8px rgba(213, 59, 213, 0); }
}
@keyframes xu-dot {
    0% { box-shadow: 0 0 0 0 rgba(213, 59, 213, 0.38); }
    70%, 100% { box-shadow: 0 0 0 5px rgba(213, 59, 213, 0); }
}
@keyframes xu-pop {
    0% { transform: scale(0.3); }
    70% { transform: scale(1.18); }
    100% { transform: none; }
}
@keyframes xu-bump {
    0% { transform: none; }
    40% { transform: scale(1.07); }
    100% { transform: none; }
}
@keyframes xu-shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

@media (max-width: 1100px) {
    .xu-prog { width: 272px; }
}
/* the sidebar goes first, as on the other app screens */
@media (max-width: 980px) {
    .xu-side { display: none; }
    .xu-app { padding-left: 10px; }
}
/* phones: the progress above the session, both at a fixed height, so the
   section is the same size from the first frame to the last */
@media (max-width: 767px) {
    .xu { padding: 72px 0; }
    .xu-app { flex-direction: column; height: auto; padding: 10px; border-radius: 20px; }
    .xu-prog,
    .xu-sess { border-bottom: 1px solid var(--xu-line); border-radius: 14px; }
    .xu-prog { width: auto; height: 418px; }
    .xu-sess { flex: none; height: 440px; }
    .xu-count { margin: auto 0 16px !important; }
    .xu-sess-top { padding: 0 12px; }
    .xu-sk--pill { width: 28px; }
    .xu-feed-in { padding: 18px 14px 10px; gap: 18px; }
    .xu-composer { padding: 8px 12px 12px; }
}
/* the smallest phones wrap one more task line, so the progress gets the room */
@media (max-width: 359px) {
    .xu-prog { height: 446px; }
}

@media (prefers-reduced-motion: reduce) {
    .xu-tasks::before, .xu-feed-in { transition: none; }
}