/* ============================================================
   WORKFLOW MANAGEMENT (home page, #workflow-management, 2026-10-22).
   Every workflow in the business in one list: the Askpilot Workflows
   screen as the app draws it, for a made-up business. Sidebar (the
   business, Run workflow, Workflows, Sources, Settings, the Open sessions,
   the user), then the list: Name, Access, Trigger, Updated, an on/off
   switch and a row menu. js/workflow-hub.js plays it; the markup is the
   finished frame. The app keeps one height while it plays.
   ============================================================ */

.wm { padding: 112px 0; border-top: 1px solid var(--line); }
.wm .sec-lede { max-width: 780px; margin: 18px auto 0; }
.wm-stage { max-width: 1120px; margin: 56px auto 0; }

.wm-app {
    display: flex; height: 600px; overflow: hidden;
    border: 1.5px solid #16121A; border-radius: 24px; background: #fff;
    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; line-height: 1.35; color: #16121A; text-align: left;
}
.wm-app p, .wm-app ul, .wm-app h4 { margin: 0; }
.wm-app svg { flex: none; }

/* ---------- the sidebar ---------- */
.wm-side {
    flex: none; width: 228px; display: flex; flex-direction: column;
    padding: 16px 12px 14px; background: #FAFAFA; border-right: 1px solid #EEEEF1;
}
.wm-org { display: flex; align-items: center; gap: 9px; padding: 0 4px 16px; }
.wm-org-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid #E4E4E9; background: #fff; color: #6B7280; }
.wm-org-ico svg { width: 15px; height: 15px; }
.wm-org b { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-collapse { display: grid; color: #6B7280; }
.wm-collapse svg { width: 16px; height: 16px; }
.wm-nav { display: grid; gap: 2px; }
.wm-nav-i { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-size: 0.8125rem; color: #2A2530; }
.wm-nav-i svg { width: 16px; height: 16px; }
.wm-nav-i.is-on { background: #EDEDF0; font-weight: 600; }
.wm-tabs { display: flex; gap: 10px; margin: 18px 8px 8px !important; font-size: 0.8125rem; }
.wm-tabs b { font-weight: 700; }
.wm-tabs span { color: #6B7280; }
.wm-sess { list-style: none; padding: 0; display: grid; gap: 4px; }
.wm-s { display: flex; gap: 7px; padding: 5px 8px; border-radius: 8px; transition: background-color .8s; }
.wm-s svg { width: 13px; height: 13px; margin-top: 2px; color: #4B5563; }
/* a session shows the icon of the tool that started it; the Run workflow
   icon only when someone started it by hand */
.wm-s img { flex: none; width: 13px; height: 13px; margin-top: 2px; }
.wm-s span { min-width: 0; }
.wm-s b { display: block; font-size: 0.75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-s small { display: block; font-size: 0.625rem; color: #8B8492; }
.wm-user { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 0 4px; }
.wm-user b { flex: 1; font-size: 0.8125rem; font-weight: 700; }

.wm-av {
    flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid #E1E1E6; background: #F4F4F7; font-style: normal; font-size: 0.5938rem; font-weight: 700; color: #16121A;
}

/* ---------- the list ---------- */
.wm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 26px 28px 0; }
.wm-h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; }
.wm-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-bottom: 16px; border-bottom: 1px solid #EEEEF1; }
.wm-search {
    display: flex; align-items: center; gap: 8px; width: 250px; height: 34px; padding: 0 12px;
    border: 1px solid #DCDCE1; border-radius: 9px; font-size: 0.8125rem; color: #9CA3AF; transition: border-color .3s, box-shadow .3s;
}
.wm-search svg { width: 14px; height: 14px; }
.wm-search em { font-style: normal; }
.wm-q { color: #16121A; white-space: pre; }
.wm-search.has-q { border-color: #16121A; box-shadow: 0 0 0 3px rgba(22, 18, 26, .06); }
.wm-search.has-q em { display: none; }
.wm-search.has-q .wm-q::after { content: ""; display: inline-block; width: 1px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #16121A; animation: wm-caret .8s steps(1) infinite; }
.wm-new { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 1px solid #DCDCE1; border-radius: 9px; font-size: 0.8125rem; font-weight: 650; }
.wm-new b { font-weight: 500; font-size: 1rem; }

.wm-thead, .wm-row {
    display: grid; align-items: center; column-gap: 18px; padding: 0 12px;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.1fr) minmax(0, 1.65fr) 124px 30px 22px;
}
.wm-thead { height: 42px; flex: none; border-bottom: 1px solid #EEEEF1; font-size: 0.75rem; font-weight: 700; }
.wm-thead > span:nth-child(3), .wm-thead > span:nth-child(4) { text-align: right; }
.wm-rows { flex: 1; min-height: 0; overflow: hidden; }
.wm-row {
    height: 46px; overflow: hidden; border-bottom: 1px solid #F3F3F5;
    transition: background-color .5s, opacity .35s, height .35s cubic-bezier(.2, .8, .2, 1), transform .4s cubic-bezier(.16, 1, .3, 1);
}
.wm-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wm-name svg { width: 15px; height: 15px; color: #4B5563; }
.wm-name b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-acc { display: flex; align-items: center; gap: 8px; min-width: 0; color: #2A2530; }
.wm-acc > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-trig { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; color: #2A2530; }
.wm-trig > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-trig img, .wm-api { width: 15px; height: 15px; border-radius: 4px; transition: box-shadow .3s; }
.wm-api { display: grid; place-items: center; border-radius: 50%; background: #16121A; }
.wm-api svg { width: 10px; height: 10px; }
.wm-trig.is-none { color: #9CA3AF; }
.wm-upd { text-align: right; white-space: nowrap; color: #2A2530; transition: color .3s; }
.wm-upd.is-now { color: #15803D; font-weight: 650; }
.wm-swc { display: flex; justify-content: center; }
.wm-sw { position: relative; display: block; width: 28px; height: 16px; border-radius: 999px; background: #C9CDD3; transition: background-color .25s; }
.wm-sw::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(20, 17, 26, .25); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
}
.wm-sw.is-on { background: #16121A; }
.wm-sw.is-on::after { transform: translateX(12px); }
.wm-more { color: #6B7280; font-weight: 800; letter-spacing: 1px; text-align: center; }

/* ---------- the play (only once js/workflow-hub.js adds .is-anim) ---------- */
.wm.is-anim .wm-row:not(.is-in) { opacity: 0; transform: translateY(6px); }
/* a new session slides open at the top of Open, lit for a moment (a
   transition rather than a keyframe: Chrome drew text that had been
   display:none and then animated a shade too light) */
.wm-s { max-height: 44px; transition: max-height .45s cubic-bezier(.2, .8, .2, 1), opacity .4s, padding .45s, background-color .8s; }
.wm.is-anim .wm-s.is-later:not(.is-in) { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.wm.is-anim .wm-s.is-in:not(.is-seen) { background: #EEF0FF; }
/* a trigger fires: the row lights up and its source icon rings */
.wm-row.is-fire { background: #F6F6FF; }
.wm-row.is-fire .wm-trig img, .wm-row.is-fire .wm-api { animation: wm-ring 1.1s ease-out; }
/* a change: the row lights up for a moment */
.wm-row.is-flash { background: #FBF4FB; }
/* the search narrows the list: rows that do not match fold away */
.wm-row.is-out { height: 0; opacity: 0; border-bottom-color: transparent; }
.wm-app.is-fade .wm-rows, .wm-app.is-fade .wm-sess { opacity: 0; transition: opacity .4s; }
.wm-rows, .wm-sess { transition: opacity .4s; }

@keyframes wm-ring { 0% { box-shadow: 0 0 0 0 rgba(76, 76, 224, .5); } 100% { box-shadow: 0 0 0 9px rgba(76, 76, 224, 0); } }
@keyframes wm-caret { 50% { opacity: 0; } }

/* ---------- narrower screens ---------- */
@media (max-width: 1180px) {
    .wm-side { width: 204px; }
    .wm-thead, .wm-row { grid-template-columns: minmax(0, 1.6fr) 26px minmax(0, 1.5fr) 112px 30px 22px; column-gap: 14px; }
    .wm-acc > span { display: none; }
    .wm-thead > span:nth-child(2) { font-size: 0; }
}
@media (max-width: 960px) {
    .wm-side { display: none; }
}
@media (max-width: 767px) {
    .wm { padding: 72px 0; }
    .wm-stage { margin-top: 36px; }
    .wm-app { height: 586px; border-radius: 20px; }
    .wm-main { padding: 18px 14px 0; }
    .wm-h1 { font-size: 1.125rem; }
    .wm-bar { margin-top: 12px; padding-bottom: 12px; }
    .wm-search { flex: 1; width: auto; }
    .wm-thead { display: none; }
    /* each workflow: the name over its trigger, then who it runs for and its switch */
    .wm-row {
        height: 50px; padding: 0 4px; column-gap: 10px;
        grid-template-columns: minmax(0, 1fr) 26px 30px;
        grid-template-areas: "name av sw" "trig av sw";
        align-content: center; row-gap: 2px;
    }
    .wm-name { grid-area: name; }
    .wm-acc { grid-area: av; }
    .wm-trig { grid-area: trig; justify-content: flex-start; padding-left: 23px; font-size: 0.6875rem; color: #6B7280; }
    .wm-trig img, .wm-api { width: 12px; height: 12px; }
    .wm-swc { grid-area: sw; }
    .wm-upd, .wm-more { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wm-search.has-q .wm-q::after { animation: none; }
}