/* SVG to 3D page only (loaded after tools-v2.css) */
.drop-zone { display: grid; gap: 8px; padding: 16px; border: 2px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.drop-zone.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.drop-zone input[type="file"] { max-width: 100%; font: inherit; }
.drop-zone .field-note { margin: 0; }
.svg-file-name { font-weight: 700; overflow-wrap: anywhere; }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool-layout > .tool-form, .drop-zone { min-width: 0; }
.drop-zone input[type="file"] { width: 100%; min-width: 0; }
/* A model that is not a closed mesh: downloads stay available, flagged with an outline and a warning sign (not colour only) */
.tool-actions .btn[data-flagged="true"] { outline: 2px dashed var(--warn); outline-offset: 2px; }
.tool-actions .btn[data-flagged="true"]::before { content: "\26A0\FE0E\00A0"; }
/* Visible while a model is being built (the build runs on the page's main thread and can take a few seconds) */
.svg-building { margin: 0; font-weight: 600; color: var(--accent); }
.svg-building[hidden] { display: none; }
.tool-actions .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
/* Touch targets of at least 44 x 44 CSS px (QA T2, WCAG 2.5.5); a checkbox is operated through its label */
.drop-zone input[type="file"] { min-height: 44px; }
.drop-zone .link-btn { display: inline-flex; align-items: center; min-height: 44px; }
.tool-form label.check { min-height: 44px; }
.tool-form label.check input { width: 22px; height: 22px; }
.tool-form input[type="color"] { min-height: 44px; }
/* Fields in a row line up at the bottom when one label wraps to two lines (ES at 390 px, QA T2) */
.tool-form .row { align-items: end; }