#spool-dialog{overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior:contain}
#spool-dialog .spool-form,#spool-assist,#spool-assist>*{min-width:0;max-width:100%}
#spool-assist { margin: 16px 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); overflow-wrap:anywhere; }
.spool-colour-actions { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.spool-colour-actions:has(> [hidden]:first-child):has(> [hidden]:nth-child(2)):has(> [hidden]:last-child) { display: none; }
.spool-multicolour-help{display:block;margin-top:8px;line-height:1.45}
.spool-gradient-field{display:grid;gap:8px;align-content:start;font-size:.875rem}
.spool-gradient-preview{display:block;min-height:48px;border:1px solid var(--line);border-radius:10px}
.spool-colour-source{grid-column:1 / -1;margin:-6px 0 0}
#spool-assist [hidden], .spool-fields [hidden] { display: none !important; }
.assist-methods { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 24px; }
.assist-methods button { flex: 1; font-size: .8125rem; padding: 8px 12px; white-space: nowrap; }
.assist-methods button[aria-pressed=true] { color: var(--accent); border-color: var(--accent); background: var(--tint); }
.assist-input-row { display: flex; align-items: end; gap: 8px; }
.assist-input-row label { flex: 1; min-width: 0; }
.assist-input-row input { width: 100%; }
.assist-input-row button { flex: none; }
#assist-scan-panel>.assist-input-row { margin-top: 18px; }
#spool-dialog .spool-fields { gap:20px 16px; }
#spool-dialog .spool-fields>label { display:flex; flex-direction:column; gap:8px; }
#spool-dialog .dialog-head { align-items:start; gap:20px; margin-bottom:20px; }
#assist-scan { min-height: 44px; margin-top: 4px; }
#spool-assist .meta { margin: 10px 0; max-width: 75ch; }
.assist-scan-feedback{margin:12px 0 0;padding:10px 12px;border:1px solid var(--accent);border-radius:var(--control-radius);background:var(--tint);color:var(--text);font-size:.875rem;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.assist-result { margin-top: 14px; }
.assist-result strong { display: block; overflow-wrap: anywhere; }
.assist-result button { display: block; width: 100%; text-align: left; margin-top: 8px; }
.assist-photo-picker{display:grid;gap:8px;font-weight:600}
#assist-photo-file{width:100%;min-width:0;max-width:100%}
#assist-photo-preview{display:block;max-width:100%;max-height:260px;object-fit:contain;margin:12px 0;border:1px solid var(--line);border-radius:12px}
#assist-photo-review{margin:16px 0}
#assist-photo-review label{display:grid;gap:8px}
#assist-photo-text{width:100%;min-width:0;resize:vertical}
#assist-photo-recheck{margin-top:8px}
#assist-photo-barcode{margin-top:16px}
#assist-camera-frame{margin-top:12px}
.assist-camera-viewport{position:relative;width:100%;aspect-ratio:4/3;max-height:min(52dvh,420px);overflow:hidden;border-radius:12px;background:#101820}
#spool-assist video{display:block;width:100%;height:100%;object-fit:cover;background:#101820;transform-origin:center}
#spool-assist video[data-rotation="90"]{transform:rotate(90deg) scale(1.34)}
#spool-assist video[data-rotation="180"]{transform:rotate(180deg)}
#spool-assist video[data-rotation="270"]{transform:rotate(270deg) scale(1.34)}
.assist-scan-guide{position:absolute;inset:28% 7%;border:2px solid rgb(255 255 255 / .9);border-radius:10px;box-shadow:0 2px 18px rgb(0 0 0 / .4);pointer-events:none}
.assist-scan-guide::after{content:"";position:absolute;inset-block-start:50%;inset-inline:8%;height:2px;background:var(--accent);box-shadow:0 1px 8px rgb(0 0 0 / .5)}
.assist-camera-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.assist-camera-tools p{margin:0;color:var(--muted);font-size:.75rem}
.assist-camera-tools button{flex:none;min-height:44px}
.spool-fields select + input { margin-top: 6px; }
.assist-source { overflow-wrap: anywhere; font-size: .8125rem; }
.assist-source a{display:inline-flex;align-items:center;min-height:44px}
#spool-assist :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#assist-status:empty{display:none}
#assist-barcode summary{cursor:pointer;min-height:44px;padding:10px 0;font-size:.875rem;font-weight:600}
#assist-fallbacks{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.assist-fallback-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.assist-fallback-actions>*{min-width:0;max-width:100%}
#assist-web-search{display:inline-flex;min-height:44px;align-items:center;font-size:.875rem}
#assist-catalogue-panel,#assist-reuse{margin-top:10px;border-top:1px solid var(--line)}
.spool-save-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-block:12px;border-top:1px solid var(--line);background:var(--surface)}
.spool-form .spool-save-actions button{flex:1 1 170px;width:auto;min-height:44px}
#spool-dialog[data-scan-state="active"] .spool-save-actions{display:none}
#spool-dialog[data-scan-state="active"] .assist-input-row,#spool-dialog[data-scan-state="active"] .assist-scan-note{display:none}
@media (max-width: 480px) { #spool-dialog :is(input,select,textarea){font-size:16px} .assist-methods{grid-template-columns:repeat(2,minmax(0,1fr))} #assist-scan-panel>summary{margin-bottom:4px} #assist-scan{width:100%;margin-bottom:4px} .assist-input-row { flex-wrap: wrap; } .assist-input-row label { flex-basis: 100%; } .assist-input-row button { flex: 1; } .assist-camera-viewport{aspect-ratio:1;max-height:min(46dvh,380px)} .assist-fallback-actions>*{width:100%;justify-content:center} .spool-form .spool-save-actions{position:static;flex-wrap:nowrap;padding:12px 0 calc(8px + env(safe-area-inset-bottom))}.spool-form .spool-save-actions button{flex:1 1 0;min-width:0} }