/* Approved light-blue catalog. All rules stay within the new section/dialog. */
#workflow, #workflow-dialog { --wf-ink:#244b70; --wf-muted:#5e7f99; --wf-line:#cbdfee; font-family:inherit; color:var(--wf-ink); }
#workflow *, #workflow-dialog * { box-sizing:border-box; }
#workflow { margin:0; padding:16px 0 56px; scroll-margin-top:20px; }
#workflow>.works-heading { border-top:0; padding-top:13px; }
#workflow .wf-body { display:grid; grid-template-columns:minmax(250px,.36fr) minmax(0,1fr); gap:clamp(32px,4vw,74px); align-items:center; }
#workflow .wf-intro { min-width:0; padding-bottom:6px; }
#workflow .wf-lead { margin:0 0 15px; font-size:clamp(21px,1.6vw,28px); line-height:1.65; color:#355977; font-weight:500; }
#workflow .wf-intro-description { margin:0 0 30px; font-size:13px; line-height:1.9; color:var(--wf-muted); }
#workflow .wf-capabilities { border-top:1px solid #d0e2ef; }
#workflow .wf-capability { display:grid; grid-template-columns:76px minmax(0,1fr); gap:14px; padding:20px 0; border-bottom:1px solid #d0e2ef; align-items:baseline; }
#workflow .wf-capability h3 { margin:0; font-size:15px; line-height:1.7; font-weight:600; color:#365e7e; }
#workflow .wf-capability p { margin:0; font-size:12px; line-height:1.95; color:#65849d; }
#workflow .wf-intro-note { margin:26px 0 0; font:10px/1.8 Consolas,monospace; letter-spacing:1.7px; color:#6d8da6; }
/* Original node-connection crest; no browser chrome or text toolbar. */
#workflow .wf-frame { min-width:0; }
#workflow .wf-window { min-width:0; border:1px solid #c4dfee; border-radius:24px; overflow:hidden; background:linear-gradient(145deg,#edf8ff,#e6f3ff); box-shadow:inset 0 1px 0 #fff,0 18px 45px #31648c0b; }
#workflow .wf-crown { height:64px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#d8edfa80,transparent); pointer-events:none; }
#workflow .wf-crown svg { display:block; width:min(76%,640px); height:58px; overflow:visible; }
#workflow .wf-trace { stroke:#90b6d0; stroke-width:1; }
#workflow .wf-trace-soft { stroke:#c2dae9; stroke-width:1; }
#workflow .wf-hub-halo { stroke:#b3d4e8; stroke-width:1; fill:#e4f3ff; }
#workflow .wf-hub { stroke:#84aecb; stroke-width:1; fill:#a9cfe9; }
#workflow .wf-port { fill:#eaf7ff; stroke:#98bed7; stroke-width:1; }
#workflow .wf-catalog { padding:0 16px 18px 24px; }
#workflow .wf-columns, #workflow .wf-entry { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,.65fr) 62px 8px; gap:clamp(10px,1.2vw,20px); align-items:center; }
#workflow .wf-columns { padding:0 14px; height:30px; margin:0 14px 8px 0; color:#63839c; font-size:11px; letter-spacing:.5px; }
#workflow .wf-viewport { height:clamp(390px,26vw,440px); overflow-y:auto; overflow-x:hidden; padding:2px 7px 10px 2px; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#91b6d3 #d4e6f4; }
#workflow .wf-viewport::-webkit-scrollbar { width:6px; }
#workflow .wf-viewport::-webkit-scrollbar-track { background:#d4e6f4; border-radius:6px; }
#workflow .wf-viewport::-webkit-scrollbar-thumb { background:#91b6d3; border-radius:6px; }
#workflow .wf-entries { display:grid; gap:7px; }
#workflow .wf-entry { width:100%; min-height:58px; padding:8px 14px; margin:0; appearance:none; border:1px solid #d2e4f2; border-radius:8px; background:#f5faff; text-align:left; font:inherit; cursor:pointer; box-shadow:none; transition:border-color .18s,background .18s; }
#workflow .wf-entry:hover, #workflow .wf-entry:focus-visible { background:#edf7ff; border-color:#a9cbe5; }
#workflow .wf-entry[hidden] { display:none; }
#workflow .wf-entry-name { display:flex; gap:13px; align-items:center; min-width:0; color:#355977; font-size:clamp(13px,.92vw,16px); font-weight:500; line-height:1.5; }
#workflow .wf-thumb { display:block; width:76px; height:40px; flex:none; object-fit:cover; border:1px solid #c5d9e9; border-radius:4px; background:#192c38; }
#workflow .wf-entry-function { font-size:clamp(11px,.73vw,13px); line-height:1.6; color:#5f7f98; }
#workflow .wf-entry-kind { font:11px/1.5 Consolas,sans-serif; color:#557f9f; }
#workflow .wf-entry-arrow { width:6px; height:6px; border-right:1px solid #789cb8; border-top:1px solid #789cb8; transform:rotate(45deg); }
#workflow .wf-module-preview { width:76px; height:40px; border:1px solid #c5daeb; border-radius:4px; flex:none; display:flex; align-items:center; justify-content:center; gap:4px; background:#e4f0f9; position:relative; }
#workflow .wf-module-preview b { font-size:8px; font-weight:400; color:#7395af; }
#workflow .wf-mini-node { height:19px; width:25px; border:1px solid #b3cce1; border-radius:3px; background:#f8fcff; font-size:9px; color:#567b99; display:flex; align-items:center; justify-content:center; }
#workflow .wf-mini-node:last-child { background:#cce1f1; color:#4f7695; border-color:#a9c8df; }
#workflow .wf-skill-preview { font-size:10px; color:#567993; }
#workflow .wf-skill-preview small { position:absolute; bottom:3px; left:0; right:0; font:7px/1.2 Consolas,monospace; text-align:center; color:#6988a0; }
#workflow .wf-skill-preview>span { margin-bottom:6px; }
#workflow .wf-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#workflow :is(button,.wf-viewport):focus-visible, #workflow-dialog :is(button,a,.wf-image-stage):focus-visible { outline:2px solid #4e89b5; outline-offset:2px; }
.navigation .workflow-nav[href] { cursor:pointer; }

#workflow-dialog { padding:0; width:min(1180px,calc(100vw - 48px)); max-width:none; max-height:calc(100dvh - 48px); margin:auto; border:1px solid #bcd8ed; border-radius:20px; background:#edf7ff; box-shadow:0 26px 90px #18385638; overflow:auto; }
#workflow-dialog::backdrop { background:#18365070; backdrop-filter:blur(6px); }
#workflow-dialog .wf-detail-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:25px 28px 20px; border-bottom:1px solid var(--wf-line); background:#e5f2fc; }
#workflow-dialog .wf-detail-kind { margin:0 0 9px; font:11px/1.4 Consolas,sans-serif; letter-spacing:1.2px; color:#5b829f; }
#workflow-dialog #wf-detail-title { margin:0; padding:0; font-size:clamp(20px,2vw,28px); font-weight:600; letter-spacing:0; line-height:1.4; }
#workflow-dialog #wf-detail-title::before { content:none; }
#workflow-dialog .wf-close { flex:none; width:40px; height:40px; padding:0; border:1px solid #c1daec; border-radius:50%; background:#f5fbff; color:#3b6482; font:25px/1 sans-serif; cursor:pointer; }
#workflow-dialog .wf-close:hover { background:#dceefa; }
#workflow-dialog .wf-detail-body { padding:22px 28px 28px; }
#workflow-dialog .wf-description { margin:0 0 24px; max-width:860px; color:#567892; font-size:14px; line-height:1.9; }
#workflow-dialog .wf-image-tools { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:0 0 12px; }
#workflow-dialog .wf-image-tabs { display:flex; gap:8px; flex-wrap:wrap; }
#workflow-dialog .wf-image-tools button { appearance:none; border:1px solid #c4dbea; border-radius:6px; padding:8px 12px; background:#f4faff; color:#527a98; font-family:inherit; font-size:12px; line-height:1.5; cursor:pointer; min-height:36px; }
#workflow-dialog .wf-image-tools button[aria-pressed=true] { background:#d5eafa; border-color:#91b9d5; color:#315b79; }
#workflow-dialog .wf-image-stage { max-height:56dvh; overflow:auto; border:1px solid #c4dceb; border-radius:9px; background:#dceaf5; scrollbar-width:thin; scrollbar-color:#83adc9 #dceaf5; }
#workflow-dialog .wf-image-stage img { display:block; width:100%; height:auto; max-width:none; margin:auto; }
#workflow-dialog .wf-image-stage[data-zoom=true] img { width:var(--wf-image-width); max-width:none; margin:0; }
#workflow-dialog .wf-image-status { margin:10px 0 0; color:#5f7f98; font-size:12px; line-height:1.6; }
#workflow-dialog .wf-image-link { display:inline-block; color:#326c95; margin-left:8px; text-decoration:underline; text-underline-offset:3px; }
#workflow-dialog .wf-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:24px 0 0; margin:24px 0 0; border-top:1px solid var(--wf-line); }
#workflow-dialog .wf-step { padding:0 24px; border-left:1px solid var(--wf-line); }
#workflow-dialog .wf-step:first-child { padding-left:0; border-left:0; }
#workflow-dialog .wf-step:last-child { padding-right:0; }
#workflow-dialog .wf-step-label { margin:0 0 12px; font-size:11px; letter-spacing:2px; color:#6a8ca6; }
#workflow-dialog .wf-step h3 { margin:0 0 10px; font-size:17px; line-height:1.5; font-weight:600; }
#workflow-dialog .wf-step p:last-child { margin:0; font-size:13px; color:#5f7f98; line-height:1.9; }
#workflow-dialog [hidden] { display:none!important; }
html.wf-modal-open { overflow:hidden; }

@media(max-width:1450px) and (min-width:1051px) {
 #workflow .wf-body { grid-template-columns:minmax(240px,.33fr) minmax(0,1fr); gap:32px; }
 #workflow .wf-capability { grid-template-columns:1fr; gap:6px; padding:16px 0; }
 #workflow .wf-columns, #workflow .wf-entry { grid-template-columns:minmax(0,1fr) minmax(145px,.64fr) 50px 6px; gap:10px; }
 #workflow .wf-entry-name { gap:10px; }
 #workflow :is(.wf-thumb,.wf-module-preview) { width:64px; height:36px; }
}
@media(max-width:1050px) {
 #workflow .wf-body { grid-template-columns:1fr; gap:28px; }
 #workflow .wf-intro { display:grid; grid-template-columns:1fr 1fr; column-gap:38px; }
 #workflow .wf-lead, #workflow .wf-intro-description, #workflow .wf-intro-note { grid-column:1; }
 #workflow .wf-capabilities { grid-column:2; grid-row:1 / 4; align-self:center; }
 #workflow .wf-capability { padding:14px 0; }
 #workflow .wf-intro-note { margin-top:0; }
 #workflow .wf-lead { margin:0 0 12px; }
 #workflow .wf-viewport { height:420px; }
 #workflow .wf-columns, #workflow .wf-entry { grid-template-columns:minmax(0,1fr) minmax(160px,.66fr) 54px 6px; gap:12px; }
 #workflow .wf-entry-name { font-size:14px; }
 #workflow .wf-entry-function { font-size:11px; }
}
@media(max-width:760px) {
 #workflow { padding:16px 0 36px; }
 #workflow>.works-heading { padding-top:19px; }
 #workflow .wf-body { gap:26px; }
 #workflow .wf-intro { display:block; }
 #workflow .wf-lead { font-size:22px; margin:0 0 10px; }
 #workflow .wf-intro-description { font-size:12px; margin-bottom:22px; }
 #workflow .wf-capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
 #workflow .wf-capability { display:block; padding:15px 12px; border-bottom:1px solid #d0e2ef; }
 #workflow .wf-capability:first-child { padding-left:0; }
 #workflow .wf-capability:last-child { padding-right:0; }
 #workflow .wf-capability h3 { font-size:14px; margin-bottom:6px; }
 #workflow .wf-capability p { font-size:11px; }
 #workflow .wf-intro-note { display:none; }
 #workflow .wf-crown { height:48px; }
 #workflow .wf-crown svg { width:90%; height:42px; }
 #workflow .wf-window { border-radius:15px; }
 #workflow .wf-catalog { padding:0 8px 12px 12px; }
 #workflow .wf-columns { display:none; }
 #workflow .wf-viewport { height:460px; padding-right:5px; }
 #workflow .wf-entry { grid-template-columns:minmax(0,1fr) 49px 5px; grid-template-rows:auto auto; gap:3px 8px; padding:10px; min-height:80px; }
 #workflow .wf-entry-name { grid-column:1; grid-row:1; font-size:13px; gap:9px; }
 #workflow :is(.wf-thumb,.wf-module-preview) { width:58px; height:32px; }
 #workflow .wf-entry-function { grid-column:1 / 3; grid-row:2; font-size:10px; margin-top:2px; }
 #workflow .wf-entry-kind { grid-column:2; grid-row:1; font-size:10px; justify-self:end; }
 #workflow .wf-entry-arrow { grid-column:3; grid-row:1 / 3; }
 #workflow .wf-mini-node { font-size:8px; width:20px; height:17px; }
 #workflow .wf-module-preview { gap:2px; }
 #workflow .wf-skill-preview { font-size:9px; }
 #workflow .wf-skill-preview small { font-size:6px; }
 #workflow-dialog { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); border-radius:15px; }
 #workflow-dialog .wf-detail-header { padding:18px 16px; gap:10px; }
 #workflow-dialog .wf-detail-body { padding:18px 16px 22px; }
 #workflow-dialog .wf-description { font-size:13px; }
 #workflow-dialog .wf-close { width:36px; height:36px; }
 #workflow-dialog .wf-steps { grid-template-columns:1fr; gap:20px; padding-top:20px; }
 #workflow-dialog .wf-step { padding:0 0 18px; border-left:0; border-bottom:1px solid var(--wf-line); }
 #workflow-dialog .wf-step:last-child { padding:0; border:0; }
 #workflow-dialog .wf-step-label { margin-bottom:7px; }
 #workflow-dialog .wf-step h3 { font-size:16px; margin-bottom:6px; }
}
@media(max-width:390px) {
 #workflow .wf-capabilities { display:block; }
 #workflow .wf-capability { display:grid; grid-template-columns:72px 1fr; gap:10px; padding:12px 0; }
 #workflow .wf-capability h3 { margin:0; }
 #workflow .wf-entry { padding:9px 7px; gap:3px 5px; }
 #workflow .wf-entry-name { gap:7px; font-size:12px; }
 #workflow :is(.wf-thumb,.wf-module-preview) { width:50px; height:30px; }
}
@media(prefers-reduced-motion:reduce) { #workflow .wf-entry { transition:none; } }