/* Step flow layer — Liubai tokens only. Exported HTML and the article's reading typography are not themed. */
[hidden]{display:none!important}
.ux-kicker{font-size:var(--lb-text-xs);font-weight:var(--lb-weight-semibold);letter-spacing:.14em;color:var(--lb-text-muted)}
.ux-guide{display:flex;align-items:center;justify-content:space-between;gap:var(--lb-space-6);border:1px solid var(--lb-divider);border-radius:var(--lb-radius-lg);padding:var(--lb-space-6);margin:var(--lb-space-5) 0;background:var(--lb-surface);color:var(--lb-text)}
.ux-guide h1,.ux-guide h2{font-size:var(--lb-text-xl);margin:var(--lb-space-2) 0}
.ux-guide p{font-size:var(--lb-text-sm);color:var(--lb-text-secondary);margin:var(--lb-space-2) 0}

/* Step tabs: outlined rows with a number circle; current step brightened and its circle filled */
.ux-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lb-gap-inline);margin:0 0 var(--lb-space-16)}
.ux-steps button{justify-content:flex-start;gap:var(--lb-space-3);min-height:var(--lb-touch);padding:0 var(--lb-space-4);background:var(--lb-surface);border:1px solid var(--lb-border);color:var(--lb-text-secondary);font-weight:var(--lb-weight-medium);white-space:nowrap}
.ux-steps button:hover{border-color:var(--lb-border-strong);color:var(--lb-text);background:var(--lb-surface)}
.ux-steps button[aria-current=step]{background:var(--lb-selected-bg);border-color:var(--lb-border-strong);color:var(--lb-text-strong);font-weight:var(--lb-weight-semibold)}
.ux-step-n{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--lb-icon);color:var(--lb-icon);font-size:var(--lb-text-xs);font-weight:var(--lb-weight-semibold);line-height:1}
.ux-steps button[aria-current=step] .ux-step-n{background:var(--lb-check-fill);border-color:transparent;color:var(--lb-check-mark)}

.ux-actions{display:flex;flex-wrap:wrap;gap:var(--lb-gap-inline);margin:var(--lb-space-5) 0}
.ux-actions button{min-height:var(--lb-touch)}
#localArticleCheck[data-error=true]{display:flex;gap:var(--lb-space-2);align-items:flex-start;padding:var(--lb-space-3);border:1px solid var(--lb-danger-border);background:var(--lb-danger-bg);color:var(--lb-danger);border-radius:var(--lb-radius-md);font-size:var(--lb-text-md)}
#localArticleCheck[data-error=true]::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.2'/%3E%3C/svg%3E") center/contain no-repeat}
.ux-ai-details{padding:var(--lb-space-5);border:1px solid var(--lb-divider);border-radius:var(--lb-radius-lg);margin:var(--lb-space-5) 0}
.ux-delivery{min-height:350px}
.ux-delivery>p{max-width:650px;line-height:1.85;color:var(--lb-text-secondary)}
.ux-delivery h2{margin-top:var(--lb-space-2)}
.ux-preview-dialog{width:min(960px,94vw);max-width:94vw;padding:var(--lb-space-5)}
.ux-preview-dialog iframe{display:block;width:100%;height:75vh;border:0;border-radius:var(--lb-radius-md);background:var(--lb-white);margin-top:var(--lb-space-4)} /* the exported page renders as-is */
.ux-expanded{position:fixed!important;inset:20px!important;z-index:80;background:var(--lb-surface);box-shadow:var(--lb-shadow-overlay);padding:var(--lb-space-6)!important;width:auto!important}
.ux-expanded iframe{height:80vh!important}

/* "Next step" sits in the editor's bottom action row (moved there by experience.js). */
.editor>button:first-child{display:inline-flex;margin:0 0 var(--lb-space-5)}
.editor-head{clear:both}
.editor-head button{white-space:nowrap}

/* Article body: reading typography kept from the original editor (not themed). */
#richBody{min-height:420px;line-height:1.9;font-size:18px}
details{margin:0}
.editor>details:first-of-type,.editor>label+details{margin-top:var(--lb-space-6)}

@media(max-width:760px){
 .ux-guide{align-items:stretch;flex-direction:column;padding:var(--lb-space-4)}
 .ux-steps{grid-template-columns:1fr;gap:var(--lb-space-2);margin-bottom:var(--lb-space-12)}
 .ux-actions{flex-direction:column;align-items:stretch}
 .ux-actions>*{width:100%}
 .ux-expanded{inset:8px!important;padding:var(--lb-space-3)!important}
 .intro h1{font-size:var(--lb-text-2xl)}
 #richBody{min-height:280px}
}