/* einkphotoframes.com: small additions to the shared kit. All text uses the kit's --text/--muted/--link so it stays
   readable in light and dark mode; the only fixed colours are the ink swatches, which carry no text. */
.buy { display: flex; flex-wrap: wrap; gap: 8px; }
.sources { font-size: 0.92rem; }
.spec th { width: 32%; }
table.compare td small { color: var(--muted); }

.swatches { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 1em 0; }
.swatches li { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.swatch { display: inline-block; width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--line); }

/* Photo converter */
.tool input[type="range"] { padding: 0; }
.tool input[type="file"] { padding: 7px; }
.tool output { font-weight: 400; color: var(--muted); }
.compare-images { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .compare-images { grid-template-columns: 1fr; } }
.compare-images figure { margin: 0; }
.compare-images figcaption { font-weight: 650; margin-bottom: 6px; }
/* White card behind the canvases: the images are photos, so the box stays light in dark mode too */
.canvas-box { background: #ffffff; border: 1px solid var(--line); border-radius: 8px; padding: 6px; overflow: auto; }
.canvas-box canvas { display: block; width: 100%; height: auto; }
.results.zoomed .compare-images { grid-template-columns: 1fr; }
.results.zoomed .canvas-box { max-height: 70vh; }
.results.zoomed .canvas-box canvas { width: auto; max-width: none; image-rendering: pixelated; }