/* The live hero demo keeps readable type; the canvas crops instead of shrinking. */
.demo-showcase .faithful-editor{font-size:12px;line-height:1.45;grid-template-columns:minmax(0,1fr) 190px}
.demo-showcase .faithful-main{border:0;border-radius:0;min-height:0}
.demo-showcase .faithful-inspector{border-inline-start:1px solid #e8e9e5;border-radius:0;overflow:auto}
.demo-showcase .faithful-inspector header{min-height:42px;font-size:13px}
.demo-showcase .faithful-meta{font-size:12px;padding:6px 12px}
.demo-showcase .faithful-meta{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:12px}
.demo-showcase .faithful-meta>div{grid-column:1/-1;grid-template-columns:subgrid;min-height:33px;align-items:center}
.demo-showcase .faithful-meta>div>span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.demo-showcase .faithful-meta>div>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-showcase .faithful-toolbar{font-size:12px;min-height:36px}
.demo-showcase .faithful-settings h4{font-size:12px;line-height:1.4}
.demo-showcase .faithful-setting{grid-template-columns:minmax(0,1fr);gap:5px;padding-block:5px;font-size:12px}
.demo-showcase .faithful-input,.demo-showcase .faithful-style>*,.demo-showcase .faithful-range{font-size:12px;min-height:26px}
.demo-showcase .faithful-input{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.demo-showcase .faithful-input .ui-icon{float:right}
.demo-showcase .faithful-canvas{margin:0;padding:18px 12px;overflow:auto;overscroll-behavior:contain}
.demo-showcase .faithful-template{width:100%;max-width:380px;margin:0 auto}
.demo-showcase .faithful-message{padding-top:24px}
.demo-showcase .faithful-message h3{font-family:Arial,sans-serif;font-size:25px;line-height:1.15;letter-spacing:-.035em;margin-inline:20px;overflow-wrap:anywhere}
.demo-showcase .faithful-message p{font-size:13px;line-height:1.55;margin:0 20px 12px}
.demo-showcase .faithful-cta{font-size:13px;min-height:36px;width:auto;max-width:220px}
.demo-showcase .faithful-next{flex-direction:column}
.demo-showcase .faithful-mini-chat{width:100%;font-size:12px;transform:none;line-height:1.45}
.demo-showcase .faithful-mini-chat p{line-height:1.5}
.demo-showcase .faithful-flow{font-size:13px;line-height:1.5}
.demo-showcase .workflow-title{font-size:13px;padding:12px}
.demo-showcase .workflow-card header{font-size:13px;flex-wrap:wrap;line-height:1.5}
.demo-showcase .workflow-field h4{font-size:12px;line-height:1.5}
.demo-showcase .workflow-field{padding:12px 24px 12px 12px;min-width:0}
.demo-showcase .workflow-field li,.demo-showcase .workflow-field p{overflow-wrap:anywhere}
@container(max-width:560px){
 .demo-showcase .faithful-editor{grid-template-columns:minmax(0,1fr)}
 .demo-showcase .faithful-inspector{display:none}
 .demo-showcase .faithful-template{max-width:380px}
 .demo-showcase .workflow-card-body{padding:8px}
}
body .demo-showcase .faithful-tabs.preview-language-group{font-size:12px}

/* Product tabs use natural widths and one baseline, never equal-width tiles.
   On narrow canvases the rail scrolls horizontally instead of shrinking labels. */
body .faithful-tabs.preview-language-group,
.demo-showcase .workflow-tabs{
 display:flex;flex-flow:row nowrap;align-items:stretch;justify-content:flex-start;gap:0;
 height:auto;min-height:42px;max-width:100%;min-width:0;padding:0;
 border:0;border-radius:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;
 scrollbar-width:thin;white-space:nowrap;font:400 12px/1.4 Arial,sans-serif;
 background:linear-gradient(to top,#e7e7e7 1px,transparent 1px),#f7f7f7;
}
body .faithful-tabs.preview-language-group>span,
body .faithful-tabs.preview-language-group>.preview-add-language,
.demo-showcase .workflow-tabs>span{
 display:inline-flex;align-items:center;justify-content:flex-start;flex:0 0 auto;
 gap:8px;min-width:0;max-width:none;min-height:42px;margin:0;padding:10px 14px;
 font:inherit;line-height:1.4;white-space:nowrap;overflow-wrap:normal;
 border:1px solid #e7e7e7;border-radius:0;
 background:#f7f7f7;color:#303030;box-shadow:none;
}
body .faithful-tabs.preview-language-group>span:first-child,
.demo-showcase .workflow-tabs>span:first-child{border-start-start-radius:12px}
body .faithful-tabs.preview-language-group>.preview-add-language,
.demo-showcase .workflow-tabs>span:last-child{border-inline-end:1px solid #e7e7e7;border-start-end-radius:12px}
body .faithful-tabs.preview-language-group>span.active,
.demo-showcase .workflow-tabs>span.active{
 background:#fff;border-bottom-color:#fff;border-start-start-radius:12px;
 border-start-end-radius:12px;font-weight:600;box-shadow:none;
}
body .faithful-tabs.preview-language-group>.preview-add-language:hover{background:#f0f0ef;border-color:#e7e7e7}
body .faithful-tabs.preview-language-group>.preview-add-language:focus-visible{outline:2px solid #526247;outline-offset:-3px}
.faithful-tab-close{display:inline-flex;align-items:center;font:16px/1 Arial,sans-serif;color:#777}
.faithful-tabs .demo-language-icon{width:13px;height:13px;flex:0 0 13px;display:grid;place-items:center;border:1px solid #777;border-radius:50%}
.faithful-tabs .demo-language-icon .ui-icon{display:block;width:8px;height:8px;margin:0;--icon:url('icons/lucide/plus.svg')}
.editor-glyph{display:block;width:14px;height:14px;flex:0 0 14px}
.faithful-sender{display:flex;align-items:center;gap:10px;min-width:0}
.faithful-sender>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.faithful-meta>div:not(:last-child)>span:last-child{background:#fcfcfc;border-radius:5px;padding:5px 8px}
.faithful-meta>div:last-child>span:last-child{padding-inline:8px}
.faithful-toolbar{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;gap:0;scrollbar-width:thin}
.faithful-toolbar>.ui-icon,.faithful-toolbar>.redo{margin-inline:10px;flex:none}
.faithful-personalize,.faithful-tool{display:inline-flex;align-items:center;gap:7px;padding-inline:16px;border-inline-start:1px solid #92928e;flex:0 0 auto;line-height:1.4}
.demo-showcase .faithful-meta{padding-inline:20px}
.demo-showcase .faithful-meta>div{gap:12px;padding-block:3px;min-height:38px}
.demo-showcase .faithful-meta>div>span:first-child{white-space:nowrap;overflow:visible;text-overflow:clip;overflow-wrap:normal;hyphens:none}
.demo-showcase .faithful-toolbar{min-height:44px}
.demo-showcase .workflow-tabs{width:max-content;max-width:100%;position:relative;margin-bottom:-1px;z-index:1;background:transparent}
.demo-showcase .workflow-tabs>span{min-height:38px;padding:8px 12px}
.demo-showcase .workflow-tabs b{font:400 12px/1.4 Arial,sans-serif;padding:2px 8px;background:#aff8c5;white-space:nowrap}
.demo-showcase .workflow-tabs i{display:block;flex:0 0 6px;width:6px;height:6px;background:#aff8c5}
.demo-showcase .workflow-tabs .demo-language-label{line-height:1.4;white-space:nowrap}
.demo-showcase .workflow-envelope{
 display:grid;grid-template-columns:minmax(80px,22%) minmax(0,1fr) 20px;
 gap:12px;padding:12px 16px;border:1px solid #e7e7e7;border-radius:12px;border-start-start-radius:0;
 font-size:13px;line-height:1.5;min-width:0;
}
.demo-showcase .workflow-envelope>div{min-width:0}
.demo-showcase .workflow-envelope>div:first-child{border-inline-end:1px solid #ddd;padding-inline-end:12px}
.demo-showcase .workflow-envelope>div>span{margin-bottom:4px;white-space:normal}
.demo-showcase .workflow-envelope p{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-showcase .workflow-more{display:block;align-self:center;text-align:center;font-size:16px}
.demo-showcase .workflow-card{border-color:#ddd;border-radius:12px;margin-bottom:38px}
.demo-showcase .workflow-card header{padding:14px 18px;gap:8px;flex-wrap:nowrap;min-height:54px;font-size:14px}
.demo-showcase .workflow-card header strong{min-width:0;overflow-wrap:normal}
.demo-showcase .workflow-card header>span:not(.workflow-delete){flex:none}
.demo-showcase .workflow-icon{width:17px;height:17px}
.demo-showcase .workflow-delete{flex:none}
.demo-showcase .workflow-card-body{padding:16px;gap:12px}
.demo-showcase .workflow-field{padding:16px 30px 16px 16px;border-color:#ddd;border-radius:12px}
.demo-showcase .workflow-template{padding-inline-end:16px}
.demo-showcase .workflow-field h4{font-size:13px;margin-bottom:6px}
.demo-showcase .workflow-template>h4{margin-bottom:12px}
.demo-showcase .workflow-rail:before{border-top:0;border-radius:0;top:var(--workflow-start,28px);bottom:0}
.demo-showcase .workflow-card:before{top:var(--workflow-anchor,27px);height:0;border:0;border-top:1px solid #0064e6;border-radius:0}
.demo-showcase .workflow-add{top:-29px;width:22px;height:22px;inset-inline-start:-36px;background:#f7f7f7}
@container(max-width:430px){
 .demo-showcase .faithful-meta{padding-inline:12px}
 .demo-showcase .faithful-meta{column-gap:12px}
 .demo-showcase .workflow-card header{padding:12px 10px;font-size:13px;gap:6px;flex-wrap:wrap}
 .demo-showcase .workflow-card-body{padding:10px;gap:10px}
 .demo-showcase .workflow-field{padding:12px 20px 12px 10px}
 .demo-showcase .workflow-template{padding-inline-end:10px}
 .demo-showcase .workflow-envelope{grid-template-columns:70px minmax(0,1fr) 12px;gap:8px;padding:10px;font-size:12px}
 .demo-showcase .workflow-envelope>div:first-child{padding-inline-end:8px}
 .demo-showcase .workflow-add{inset-inline-start:-28px}
}
/* Adjacent tabs share a single stroke; the active tab owns its curved sides. */
body .faithful-tabs.preview-language-group>span+span,
body .faithful-tabs.preview-language-group>span+.preview-add-language,
.demo-showcase .workflow-tabs>span+span{margin-inline-start:-1px}
body .faithful-tabs.preview-language-group>span.active,
.demo-showcase .workflow-tabs>span.active{position:relative;z-index:2}
body .faithful-tabs.preview-language-group>span:has(+span.active),
.demo-showcase .workflow-tabs>span:has(+span.active){border-inline-end-color:transparent}
body .faithful-tabs.preview-language-group>span.active+span,
body .faithful-tabs.preview-language-group>span.active+.preview-add-language,
.demo-showcase .workflow-tabs>span.active+span{border-inline-start-color:transparent;border-end-start-radius:0}
.demo-showcase .workflow-tabs .demo-language-icon{width:13px;height:13px;flex-basis:13px}
/* Give the mobile canvas useful viewing space after the editor chrome. */
@media(max-width:600px){.reference-hero-grid .reference-media.demo-showcase{height:640px;max-height:none}}

/* The trigger is the first connected node, not a floating card beside the rail. */
.demo-showcase .workflow-trigger:before{display:block}

/* Extend the inactive surface under the active tab's rounded shoulder so
   its top stroke meets the curve instead of starting across an empty notch. */
.demo-showcase .workflow-tabs>span.active+span{
 margin-inline-start:-12px;padding-inline-start:23px;
 border-inline-start:0;border-end-start-radius:0;
}
.demo-showcase .workflow-tabs>span.active{border-inline-end:1px solid #e7e7e7}
.demo-showcase .workflow-tabs>span.active:after{
 content:"";position:absolute;inset-inline-end:-12px;bottom:-1px;
 width:12px;height:12px;box-sizing:border-box;pointer-events:none;
 border-inline-start:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7;
 border-end-start-radius:12px;background:#f7f7f7;
 box-shadow:-4px 4px 0 3px #fff;
}
[dir="rtl"] .demo-showcase .workflow-tabs>span.active:after{box-shadow:4px 4px 0 3px #fff}

/* Long localized labels keep their own line when two columns would crowd the value. */
.demo-showcase .faithful-meta.is-stacked-meta{grid-template-columns:minmax(0,1fr)}
.demo-showcase .faithful-meta.is-stacked-meta>div{grid-template-columns:minmax(0,1fr);gap:4px;padding-block:7px}

/* A shared text line box keeps labels and status badges on the same axis. */
body .faithful-tabs.preview-language-group>span,
body .faithful-tabs.preview-language-group>.preview-add-language,
.demo-showcase .workflow-tabs>span{align-items:center;line-height:20px}
body .faithful-tabs.preview-language-group>span>span:not(.demo-language-icon),
body .faithful-tabs.preview-language-group>.preview-add-language>.demo-language-label,
.demo-showcase .workflow-tabs>span>span:not(.demo-language-icon),
.demo-showcase .workflow-tabs>span>b{
 display:inline-flex;align-items:center;align-self:center;line-height:20px;
 margin-block:0;vertical-align:middle;
}
.demo-showcase .workflow-tabs>span>i,
.demo-showcase .workflow-tabs .demo-language-icon,
.faithful-tabs .demo-language-icon{align-self:center;margin-block:0}