/* Elmamsflow workspace preview — matches the real app (app.elmamsflow.com). Builds on .em-app in home.css. */
.st--warn { background: #FFF1E0; color: #8A4B00; }
.st--err { background: #FDECEC; color: #9B2C2C; }
.wsp .em-app-side nav { gap: 1px; }
.wsp .em-app-side button { padding: .5rem .7rem; font-size: .82rem; }
.wsp .em-app-side button svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wsp .em-app-main { padding: 1.1rem 1.3rem; }

/* header + layout switch */
.wsp-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.wsp-hello { display: flex; align-items: center; gap: .65rem; }
.wsp-mono { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--em-navy); color: #fff; font: 700 .72rem var(--em-display); flex: none; }
.wsp-hello small { display: block; font: 700 .62rem Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #B4570B; }
.wsp-hello b { display: block; font: 300 1.2rem var(--em-display); letter-spacing: -.03em; color: var(--em-navy); }
.wsp-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 11px; border: 1px solid var(--em-line); background: #fff; }
.wsp-switch button { position: relative; z-index: 1; border: 0; background: none; padding: .42rem .8rem; border-radius: 8px; font: 700 .74rem Manrope, sans-serif; color: var(--em-muted); cursor: pointer; transition: color .25s; white-space: nowrap; }
.wsp-switch::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 8px; background: var(--em-navy); transition: transform .32s var(--em-ease); }
.wsp-switch.is-full::before { transform: none; }
.wsp-switch:not(.is-full)::before { transform: translateX(100%); }
.wsp-switch button.is-on { color: #fff; }
.wsp-layout { display: none; }
.wsp-layout.is-on { display: block; animation: wspIn .4s var(--em-ease) both; }
@keyframes wspIn { from { opacity: 0; transform: translateY(6px); } }

/* figure tiles */
.wsp-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem; margin-bottom: .7rem; }
.wsp-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wsp-kpis > div { border: 1px solid var(--em-line); border-radius: 12px; padding: .6rem .7rem; display: grid; gap: .2rem; min-width: 0; background: #fff; }
.wsp-kpis small { font: 700 .56rem Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--em-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsp-kpis b { font: 300 1.35rem/1.05 var(--em-display); letter-spacing: -.04em; color: var(--em-navy); white-space: nowrap; }
.wsp-kpis b i { font-size: .7rem; font-style: normal; color: var(--em-muted); }
.wsp-kpis em { font-style: normal; font-size: .62rem; font-weight: 700; color: var(--em-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsp-kpis em.up { color: #1B6B3A; }

/* cards */
.wsp-grid { display: grid; grid-template-columns: 1.05fr 1fr .9fr; gap: .6rem; }
.wsp-card { border: 1px solid var(--em-line); border-radius: 14px; padding: .75rem .85rem; background: #fff; min-width: 0; }
.wsp-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; }
.wsp-head b { font: 600 .8rem var(--em-display); color: var(--em-navy); }
.wsp-head span { font-size: .64rem; font-weight: 700; color: var(--em-blue-d); }
.wsp-pill { padding: .1rem .5rem; border-radius: 999px; background: #FDECEC; color: #9B2C2C !important; }
.wsp-lbl { font: 700 .56rem Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--em-muted); }

/* pulse */
.wsp-pulse-row { display: flex; align-items: center; gap: .3rem; }
.wsp-pulse { width: 46%; max-width: 150px; flex: none; }
.wsp-orbit { fill: none; }
.wsp-orbit--1 { stroke: rgba(30,136,229,.2); } .wsp-orbit--2 { stroke: rgba(91,60,196,.2); } .wsp-orbit--3 { stroke: rgba(27,138,76,.2); }
.wsp-dot--pack { fill: #1E88E5; } .wsp-dot--hold { fill: #B4570B; } .wsp-dot--packed { fill: #5B3CC4; } .wsp-dot--road { fill: #1B8A4C; opacity: .7; }
.wsp-spin { transform-origin: 200px 200px; }
.wsp-spin--1 { animation: wspSpin 80s linear infinite; } .wsp-spin--2 { animation: wspSpin 130s linear infinite reverse; } .wsp-spin--3 { animation: wspSpin 200s linear infinite; }
@keyframes wspSpin { to { transform: rotate(360deg); } }
.wsp-core { transform-origin: 200px 200px; animation: wspBeat 2.4s ease-in-out infinite; }
@keyframes wspBeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.05); } 24% { transform: scale(1); } }
.wsp-halo { fill: none; stroke: rgba(247,148,29,.55); stroke-width: 2; transform-origin: 200px 200px; animation: wspHalo 2.4s ease-out infinite; }
@keyframes wspHalo { from { transform: scale(1); opacity: .5; } to { transform: scale(1.65); opacity: 0; } }
.wsp-core-n { fill: #fff; font: 300 42px Sora, sans-serif; letter-spacing: -1.5px; }
.wsp-core-l { fill: #FFF3E6; font: 800 12px Manrope, sans-serif; letter-spacing: 1.4px; }
.wsp-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.wsp-legend li { display: flex; align-items: center; gap: .4rem; padding: .3rem 0; border-top: 1px solid #EFF3F8; font-size: .68rem; font-weight: 600; color: var(--em-ink); }
.wsp-legend li:first-child { border-top: 0; }
.wsp-legend b { margin-left: auto; color: var(--em-navy); }
.wsp-legend i, .wsp-needs i { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.wsp-legend .pack { background: #1E88E5; } .wsp-legend .hold { background: #B4570B; } .wsp-legend .packed { background: #5B3CC4; } .wsp-legend .road { background: #1B8A4C; }

/* shipping speed */
.wsp-speed { display: flex; align-items: flex-end; gap: .7rem; }
.wsp-speed > b { font: 300 2rem/1 var(--em-display); letter-spacing: -.05em; color: #1B6B3A; }
.wsp-speed ol { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; height: 52px; align-items: end; }
.wsp-speed li { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 2px; text-align: center; }
.wsp-speed li i { align-self: end; display: block; border-radius: 4px; background: #1B8A4C; transform-origin: bottom; }
.wsp-speed li i.w { background: #F7941D; }
.wsp-speed small { font-size: .5rem; font-weight: 700; color: var(--em-muted); }
.em-app.is-in .wsp-speed li i { animation: wspGrowY .9s var(--em-ease) both; }
@keyframes wspGrowY { from { transform: scaleY(0); } }
.wsp-ages { margin-top: .55rem; display: grid; gap: .35rem; }
.wsp-stack { display: flex; gap: 2px; height: 9px; border-radius: 5px; overflow: hidden; }
.wsp-stack i:nth-child(1) { background: #1E88E5; } .wsp-stack i:nth-child(2) { background: #8EC1EE; } .wsp-stack i:nth-child(3) { background: #F7941D; }
.wsp-ages p { display: flex; justify-content: space-between; gap: .4rem; margin: 0; font-size: .6rem; font-weight: 600; color: var(--em-muted); }
.wsp-ages p b { color: var(--em-navy); font-size: .74rem; }

/* needs you */
.wsp-needs { list-style: none; margin: 0; padding: 0; }
.wsp-needs li { display: flex; align-items: center; gap: .45rem; padding: .4rem 0; border-top: 1px solid #EFF3F8; font-size: .68rem; font-weight: 600; color: var(--em-ink); }
.wsp-needs li:first-child { border-top: 0; }
.wsp-needs span { flex: 1; min-width: 0; }
.wsp-needs em { font-style: normal; padding: .2rem .5rem; border-radius: 999px; background: var(--em-ice); color: var(--em-blue-d); font-size: .6rem; font-weight: 800; white-space: nowrap; }
.wsp-needs .err { background: #C0352A; } .wsp-needs .warn { background: #B4570B; } .wsp-needs .blue { background: #1E88E5; }

/* full view */
.wsp-lede { font-size: .85rem; color: var(--em-ink); margin: 0 0 .7rem; }
.wsp-lede b { color: var(--em-navy); } .wsp-warn { color: #C0352A; font-weight: 700; }
.wsp-today { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .7rem; }
.wsp-today div { padding: .65rem .75rem; border-radius: 12px; background: var(--em-mist); display: grid; gap: .15rem; }
.wsp-today small { font-size: .6rem; font-weight: 700; color: var(--em-muted); text-transform: uppercase; letter-spacing: .08em; }
.wsp-today b { font: 300 1.4rem var(--em-display); color: var(--em-navy); }
.wsp-flow { width: 100%; height: 90px; display: block; }
.wsp-flow .a { fill: rgba(30,136,229,.08); }
.wsp-flow .l1, .wsp-flow .l2 { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.wsp-flow .l1 { stroke: #1E88E5; } .wsp-flow .l2 { stroke: #F7941D; }

/* other sections */
.wsp-note { margin: .8rem 0 0; padding: .6rem .8rem; border-radius: 10px; background: var(--em-ice); font-size: .74rem; color: var(--em-ink); }
.wsp-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.wsp-chips i { font-style: normal; padding: .28rem .6rem; border-radius: 999px; border: 1px solid var(--em-line); font-size: .7rem; color: var(--em-ink); }
.wsp-chips i b { color: var(--em-navy); }
.wsp-chips i.err { background: #FDECEC; border-color: #F5C2BC; color: #9B2C2C; }
.wsp-inv { display: grid; }
.wsp-inv > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; padding: .55rem 0; border-top: 1px solid #EFF3F8; }
.wsp-inv > div:first-child { border-top: 0; }
.wsp-inv span b { display: block; font-size: .82rem; color: var(--em-navy); }
.wsp-inv span small { font-size: .68rem; color: var(--em-muted); }
.wsp-inv em { font-style: normal; font: 600 .86rem var(--em-display); color: var(--em-navy); white-space: nowrap; }
.wsp-th { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #EAF3FD, #DCE8F6); color: var(--em-blue-d); font: 700 .66rem var(--em-display); }
.wsp-th--kit { background: linear-gradient(135deg, #F3EEFD, #E4DBFA); color: #5B3CC4; }
.wsp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.wsp-bars li { display: grid; grid-template-columns: 110px 1fr 36px; align-items: center; gap: .6rem; font-size: .76rem; color: var(--em-ink); }
.wsp-bars i { height: 9px; border-radius: 5px; background: var(--em-mist); overflow: hidden; }
.wsp-bars em { display: block; height: 100%; background: #1E88E5; border-radius: 5px; transform-origin: left; }
.em-app.is-in .wsp-bars em { animation: wspGrowX 1s var(--em-ease) both; }
@keyframes wspGrowX { from { transform: scaleX(0); } }
.wsp-bars b { text-align: right; color: var(--em-navy); }
.wsp-running { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .8rem; }
.wsp-running div { padding: .6rem .7rem; border: 1px solid var(--em-line); border-radius: 12px; display: grid; gap: .15rem; }
.wsp-running small { font-size: .6rem; font-weight: 700; color: var(--em-muted); }
.wsp-running b { font: 400 1rem var(--em-display); color: var(--em-navy); }
.wsp-pricing { display: grid; grid-template-columns: 1.3fr 1fr; gap: .8rem; align-items: start; }
.wsp-pricing td small { display: block; font-size: .64rem; font-weight: 500; color: var(--em-muted); }
.wsp-pricing td.r { text-align: right; font-family: var(--em-display); }
.wsp-est { border-radius: 14px; background: var(--em-navy); color: #fff; padding: .85rem .95rem; display: grid; gap: .4rem; }
.wsp-est .wsp-lbl { color: #8CBFF3; }
.wsp-est p { display: flex; justify-content: space-between; margin: 0; padding: .35rem .55rem; border-radius: 8px; background: rgba(255,255,255,.07); font-size: .72rem; }
.wsp-est-out { display: grid; margin-top: .2rem; }
.wsp-est-out small, .wsp-est-out span { font-size: .66rem; color: #C9D6E6; }
.wsp-est-out b { font: 300 1.9rem/1.05 var(--em-display); color: #FFB25B; letter-spacing: -.04em; }
.wsp-stores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.wsp-stores > div { border: 1px solid var(--em-line); border-radius: 14px; padding: .85rem; display: grid; gap: .35rem; align-content: start; }
.wsp-stores > div.is-on { border-color: #B7DFC5; background: #F6FBF8; }
.wsp-stores b { font-size: .86rem; color: var(--em-navy); }
.wsp-stores small { font-size: .66rem; color: var(--em-muted); }
.wsp-stores em { font-style: normal; font-size: .66rem; color: var(--em-ink); }
.wsp-stores .st { justify-self: start; }
.wsp-store { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; font: 800 .7rem Manrope, sans-serif; }
.wsp-store--shopify { background: #5E8E3E; } .wsp-store--woo { background: #7F54B3; } .wsp-store--csv { background: var(--em-navy); font-size: .56rem; }
.wsp-cat { display: block; width: max-content; margin-bottom: .3rem; padding: .1rem .45rem; border-radius: 999px; background: #FDECEC; color: #9B2C2C; font-size: .6rem; font-weight: 800; }
.wsp-file { display: block; width: max-content; margin-top: .4rem; padding: .25rem .55rem; border-radius: 8px; background: #fff; border: 1px solid var(--em-line); font-size: .66rem; font-weight: 700; color: var(--em-blue-d); }

/* the hero copy is zoomed down; the tour and the pop-up have more room */
.em-app--modal .wsp-kpis b { font-size: 1.6rem; }
.em-app--modal .wsp-pulse { max-width: 190px; }

/* the preview adapts to its own width (hero, tour, pop-up, phone), not the window's */
.wsp .em-app-main { container-type: inline-size; }
@container (max-width: 700px) {
	.wsp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 560px) {
	.wsp-grid { grid-template-columns: 1fr 1fr; }
	.wsp-card--needs { grid-column: 1 / -1; }
}
@container (max-width: 420px) {
	.wsp-kpis, .wsp-kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wsp-grid, .wsp-pricing, .wsp-stores { grid-template-columns: minmax(0, 1fr); }
	.wsp-running, .wsp-today { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	.wsp-kpis, .wsp-kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wsp-grid, .wsp-pricing, .wsp-stores { grid-template-columns: minmax(0, 1fr); }
	.wsp-running, .wsp-today { grid-template-columns: repeat(2, 1fr); }
	.wsp-inv > div { grid-template-columns: auto minmax(0, 1fr) auto; }
	.wsp-inv > div .st { display: none; }
	.wsp-bars li { grid-template-columns: 90px 1fr 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.wsp-spin, .wsp-core, .wsp-halo, .wsp-layout.is-on, .em-app.is-in .wsp-speed li i, .em-app.is-in .wsp-bars em { animation: none !important; }
}

.em-signin-line { font-size: .95rem; }
.em-signin-line a { color: #FFB25B !important; font-weight: 700; text-decoration: none !important; display: inline-flex; align-items: center; gap: .3rem; min-height: 28px; }
.em-signin-line a:hover { color: #fff !important; }