/* /image-to-svg/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts).
   The only literal colours are the preview backdrops the visitor picks (white, black), as on
   /remove-white-background/, and the outline-view stroke that must contrast with that backdrop. */
.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}

@media(min-width:920px){.sv-duo{grid-template-columns:minmax(0,1.5fr) minmax(21rem,1fr)}}
.sv-side{display:grid;gap:1rem;align-content:start}

.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;text-align:center;min-height:11rem;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);max-width:36ch}
@media(min-width:920px){.sv-drop{min-height:20rem}}
/* icon: a pixel staircase turning into a smooth curve */
.sv-drop-icon{width:2.75rem;height:2.75rem;border:2px solid var(--ink);border-radius:0.375rem;background:
  radial-gradient(circle at 100% 100%,transparent 0 58%,var(--accent) 59% 70%,transparent 71%),
  repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--line-2) calc(25% - 1px) 25%),
  repeating-linear-gradient(0deg,transparent 0 calc(25% - 1px),var(--line-2) calc(25% - 1px) 25%),var(--surface)}
.has-image .drop{display:none}

.hint{font-size:0.8125rem;color:var(--muted);margin:0.75rem 0.125rem 0;min-height:1.125rem}
.hint.bad{color:var(--bad);font-weight:600}
.has-image .hint{margin-top:0;margin-bottom:0.5rem}

.sv-work[hidden]{display:none}
.sv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem 0.75rem;margin:0 0 0.5rem;font-size:0.8125rem;color:var(--muted)}
.sv-zoom{display:inline-flex;align-items:center;gap:0.25rem}
.sv-zoom button{min-width:2.25rem;height:2.25rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.sv-zoom button:hover{border-color:var(--ink)}
.sv-zoom output{min-width:3.25rem;text-align:center;font-family:var(--mono);font-size:0.75rem}
.sv-bar 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)}
.sv-bd{display:inline-flex;align-items:center;gap:0.375rem;white-space:nowrap}
.sv-bar .check{display:inline-flex;align-items:center;gap:0.375rem;color:var(--ink-2)}

.sv-panes{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.sv-cap{display:block;font-family:var(--mono);font-size:0.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 0.25rem}
.sv-pane{overflow:auto;max-height:min(62vh,38rem);border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2)}
.sv-pane[data-bd="checker"]{background:repeating-conic-gradient(var(--line-2) 0 25%,var(--surface) 0 50%) 0 0/1rem 1rem}
.sv-pane[data-bd="white"]{background:#fff}
.sv-pane[data-bd="black"]{background:#000}
.sv-inner{width:calc(var(--z,1) * 100%)}
.sv-inner canvas,.sv-inner svg{display:block;width:100%;height:auto}
.sv-inner canvas{image-rendering:pixelated}
.sv-out.busy .sv-inner svg{opacity:.55;transition:opacity .2s}
.sv-pane.outline svg g{fill:none;stroke:#000;stroke-width:1px}
.sv-pane.outline svg path{vector-effect:non-scaling-stroke}
.sv-pane.outline[data-bd="black"] svg g{stroke:#fff}

.sv-stats{margin:0.625rem 0.125rem 0;font-family:var(--mono);font-size:0.75rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.sv-photo{margin:0.75rem 0 0;padding:0.75rem 0.875rem;border:1px solid var(--line);border-left:0.25rem solid var(--warn);border-radius:0.5rem;background:var(--surface-2);font-size:0.875rem;line-height:1.5;color:var(--ink-2)}
.sv-photo[hidden]{display:none}
.sv-photo b{color:var(--ink)}
.sv-link{border:0;background:none;padding:0.25rem 0;margin-left:auto;color:var(--muted);font:inherit;font-size:0.8125rem;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sv-link:hover{color:var(--accent)}

.sv-sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 0.75rem}
.sv-panel .field{margin-bottom:1rem}
.sv-panel .field:last-child{margin-bottom:0}
.sv-panel .field[hidden]{display:none}
.sv-help{display:block;font-size:0.75rem;color:var(--muted);margin-top:0.25rem;line-height:1.45}
.sv-check{display:flex;align-items:center;gap:0.5rem;margin:0 0 1rem;font-size:0.9375rem;color:var(--ink-2)}
.sv-check:last-child{margin-bottom:0}
.sv-check[hidden]{display:none}
.sv-k{display:block;font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:0.375rem}
.sv-panel select{width:100%}
.sv-modes{margin-bottom:1rem}
.modes button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

/* palette: one row per colour */
.sv-palette{list-style:none;margin:0;padding:0;display:grid;gap:0.375rem;max-height:24rem;overflow:auto}
.sv-palette li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0.25rem 0.5rem;padding:0.375rem 0.5rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface)}
.sv-palette li.gone{opacity:.6}
.sv-palette input[type=color]{width:2rem;height:2rem;padding:0;border:1px solid var(--line-2);border-radius:0.375rem;background:none;cursor:pointer}
.sv-hex{font-family:var(--mono);font-size:0.75rem;overflow-wrap:anywhere}
.sv-pct{font-family:var(--mono);font-size:0.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.sv-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0.375rem 0.75rem;align-items:center;font-size:0.8125rem;color:var(--ink-2)}
.sv-acts select{width:auto;font:inherit;font-size:0.8125rem;padding:0.125rem 0.25rem;border:1px solid var(--line-2);border-radius:0.375rem;background:var(--surface);color:var(--ink)}
.sv-acts label{display:inline-flex;align-items:center;gap:0.25rem}

.sv-size{font-family:var(--mono);font-size:0.8125rem;color:var(--ink-2);margin:0 0 0.75rem}
.sv-dl{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.75rem}
.sv-dl .btn{flex:1 1 8rem}
.btn:disabled{opacity:.5;cursor:default;filter:none}
.sv-code summary{cursor:pointer;font-size:0.875rem;color:var(--ink-2)}
.sv-code textarea{display:block;width:100%;min-height:10rem;margin-top:0.5rem;padding:0.5rem;font-family:var(--mono);font-size:0.6875rem;line-height:1.4;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2);color:var(--ink);resize:vertical}

.note{font-size:0.8125rem;color:var(--muted);margin:0.5rem 0.125rem 0;line-height:1.5}
.chip:focus-visible,.modes button:focus-visible,.drop:focus-visible,.btn:focus-visible,.sv-zoom button:focus-visible,.sv-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.explainer .sv-steps,.explainer .sv-cannot{color:var(--muted);font-size:0.9375rem;margin:0 0 0.75rem;padding-left:1.25rem}
.explainer .sv-steps li,.explainer .sv-cannot li{margin:0 0 0.5rem}
.explainer .sv-steps b,.explainer .sv-cannot b{color:var(--ink)}
.explainer table{max-width:none;display:block;overflow-x:auto}

@media (prefers-reduced-motion:reduce){.drop,.sv-out.busy .sv-inner svg{transition:none}}