/* /embroidery-file-converter/ page styles. Built from /assets/polyatic.css tokens only (no new UI colours or fonts;
   the fabric swatches and thread chips are the design's own colours, set from data). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(min-width:920px){.em-duo{grid-template-columns:minmax(0,1.5fr) minmax(19rem,.8fr)}.em-side{align-self:start}}

/* drop zone (the polyatic file-tool component) */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;text-align:center;min-height:9rem;padding:1.5rem 1.25rem;border:2px dashed var(--line-2);border-radius:0.875rem;background:var(--surface-2);cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop:focus-visible,.drop.drag{border-color:var(--accent);background:var(--accent-soft)}
.drop b{font-size:1.0625rem}
.drop small{color:var(--muted)}
.has-file .drop{min-height:0;padding:0.75rem 1rem;flex-direction:row;gap:0.75rem}
.has-file .drop small{display:none}
.has-file .drop .em-drop-icon{width:1.5rem;height:1.5rem;border-width:2px}
.em-drop-icon{width:3rem;height:3rem;border:3px solid var(--ink);border-radius:50%;position:relative;background:var(--surface)}
.em-drop-icon::after{content:"";position:absolute;left:18%;right:18%;top:42%;height:0.375rem;border-top:3px dashed var(--accent)}
.hint{font-size:0.8125rem;color:var(--muted);margin:0.625rem 0.125rem 0;min-height:1.125rem}
.hint.bad{color:var(--bad);font-weight:600}

/* list of open files */
.em-files[hidden],.em-work[hidden],#facts[hidden],.em-warn[hidden],.em-err[hidden]{display:none}
.em-files{list-style:none;margin:0.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.375rem;max-height:12rem;overflow:auto}
.em-files button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:0.125rem;text-align:left;padding:0.5rem 0.75rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.em-files button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.em-files button.bad .em-fs{color:var(--bad)}
.em-fn{font-weight:600;font-size:0.875rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.em-fs{font-size:0.75rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* viewer */
.em-work{margin-top:0.875rem}
.em-tools{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 1rem;margin-bottom:0.625rem}
.em-fabric{display:flex;align-items:center;gap:0.3125rem;flex-wrap:wrap}
.em-k{font-family:var(--mono);font-size:0.6875rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-right:0.125rem}
.em-sw{width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid var(--line-2);cursor:pointer;padding:0}
.em-sw[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:2px}
.em-pick{display:inline-grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;border:1px dashed var(--line-2);overflow:hidden;cursor:pointer}
.em-pick input{width:2.5rem;height:2.5rem;border:0;padding:0;background:none;cursor:pointer}
.em-check{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.875rem;cursor:pointer}
.em-check input{accent-color:var(--accent);width:1.0625rem;height:1.0625rem}
.em-zoom{display:inline-flex;gap:0.25rem;margin-left:auto}
.em-ibtn{min-width:2.25rem;height:2.25rem;padding:0 0.5rem;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:0.5rem;cursor:pointer;font:inherit;font-weight:600;font-size:1rem;line-height:1}
.em-ibtn:hover{border-color:var(--ink)}
.em-fit{font-size:0.8125rem;min-width:3.25rem;font-variant-numeric:tabular-nums}
.em-stage{border:1px solid var(--line);border-radius:0.625rem;overflow:hidden;background:var(--surface-2)}
.em-stage canvas{display:block;width:100%;touch-action:pan-y;cursor:zoom-in}
.em-stage.zoomed canvas{touch-action:none;cursor:grab}
.em-tip{font-size:0.75rem;color:var(--muted);margin:0.5rem 0.125rem 0}
.em-notes{margin:0.5rem 0 0;padding-left:1.125rem;font-size:0.8125rem;color:var(--ink-2);line-height:1.5}

/* facts */
.em-summary{font-size:0.875rem;margin:0 0 0.75rem;overflow-wrap:anywhere}
.em-err{margin:0 0 0.75rem;padding:0.625rem 0.75rem;border:1px solid var(--bad);border-radius:0.5rem;color:var(--bad);font-weight:600;font-size:0.875rem}
.em-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.em-stats .v{font-size:1.125rem}
.em-u{font-size:0.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.em-time{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem;font-size:0.875rem;margin:0.75rem 0 0}
.em-time select{font:inherit;font-size:0.8125rem;padding:0.25rem 0.375rem;border:1px solid var(--line-2);border-radius:0.375rem;background:var(--surface);color:var(--ink)}
.em-h{font-size:0.8125rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:500;margin:1.125rem 0 0.5rem}
.em-threads{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.3125rem;max-height:14rem;overflow:auto;counter-reset:th}
.em-threads li{display:grid;grid-template-columns:1.375rem 1.25rem minmax(0,1fr) auto;align-items:center;gap:0.375rem;font-size:0.875rem;counter-increment:th}
.em-threads li::before{content:counter(th);font-family:var(--mono);font-size:0.75rem;color:var(--muted);text-align:right}
.em-chip{width:1.125rem;height:1.125rem;border-radius:0.25rem;border:1px solid var(--line-2)}
.em-n{font-variant-numeric:tabular-nums;color:var(--muted);font-size:0.8125rem}
.em-mut{color:var(--muted);font-size:0.8125rem}
.em-hoops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.25rem}
.em-hoops li{display:flex;justify-content:space-between;gap:0.5rem;font-size:0.875rem;padding:0.3125rem 0.5rem;border-radius:0.375rem;background:var(--surface-2)}
.em-hoops li.ok b{color:var(--ok)}
.em-hoops li.no b{color:var(--muted);font-weight:500}
.em-small{font-size:0.75rem;color:var(--muted);margin:0.5rem 0 0;line-height:1.5}
.em-save{display:flex;flex-wrap:wrap;gap:0.5rem}
.em-warn{margin:0.625rem 0 0;padding:0.625rem 0.75rem 0.625rem 1.75rem;border:1px solid var(--line);border-left:0.25rem solid var(--warn);border-radius:0.5rem;background:var(--surface-2);font-size:0.8125rem;line-height:1.5}
.em-png{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;margin-bottom:0.5rem}
.em-modes{margin:0;flex:0 0 auto}
.em-modes button{flex:0 0 auto;padding:0.375rem 0.875rem}
.em-steps li,.em-cannot li{margin-bottom:0.5rem}