/* ============================================================
   CENTRALISED OPERATIONS (home page, 2026-10-23): "Always know
   what's running, and what's next." Workflow management and controlled
   execution as two boxes side by side, each its old title, centred, over
   its screen:
     left   the Workflows screen, compact (the phone layout of
            css/workflow-hub.css): each workflow's name over its trigger,
            then its owner and its switch; no sidebar, no table head
     right  the session screen without its sidebar (css/exec-ui.css): the
            run's progress beside its chat
   Both screens keep one height while they play (600px). Below 1024px the
   boxes stack; phones keep the screens' own phone layouts. (Tried and
   dropped, back to this at Dom's word: a white card around each with a
   pink picture area; the screens framed inside a card; the screens filling
   a card under a title.)
   ============================================================ */
.ops { padding: 112px 0; border-top: 1px solid var(--line); }
.ops .xu-format { margin-top: 26px; }
.ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1136px; margin: 0 auto; }
.ops-box { min-width: 0; }
.ops .ops-box.wm { padding: 0; border-top: 0; }
.ops-h { margin: 0 0 20px; font-size: 1.625rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); text-align: center; }
.ops .wm-stage, .ops .xu-stage { max-width: none; margin: 0; }

/* ---- left: the Workflows screen, compact ---- */
.ops .wm-app { height: 600px; }
.ops .wm-side { display: none; }
.ops .wm-main { padding: 20px 16px 0; }
.ops .wm-h1 { font-size: 1.1875rem; }
.ops .wm-bar { margin-top: 14px; padding-bottom: 12px; }
.ops .wm-search { flex: 1; width: auto; }
.ops .wm-thead { display: none; }
.ops .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;
}
.ops .wm-name { grid-area: name; }
.ops .wm-acc { grid-area: av; }
.ops .wm-acc > span { display: none; }
.ops .wm-trig { grid-area: trig; justify-content: flex-start; padding-left: 23px; font-size: 0.6875rem; color: #6B7280; }
.ops .wm-trig img, .ops .wm-api { width: 12px; height: 12px; }
.ops .wm-swc { grid-area: sw; }
.ops .wm-upd, .ops .wm-more { display: none; }

/* ---- right: the run's progress beside its chat ---- */
.ops .xu-side { display: none; }
.ops .xu-app { height: 600px; padding-left: 10px; }
.ops .xu-prog { width: 52%; }

@media (max-width: 1023px) {
    .ops-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 760px; }
}
@media (max-width: 767px) {
    .ops { padding: 72px 0; }
    .ops-h { font-size: 1.375rem; margin-bottom: 16px; }
    .ops-h br { display: none; }
    .ops .wm-app { height: 586px; }
    /* the session screen goes back to its own phone layout: progress over chat */
    .ops .xu-app { height: auto; padding: 10px; }
    .ops .xu-prog { width: auto; }
}