/* Scoped to the additional developer tools. */
#extra-tool .extra-controls, #extra-tool .extra-results { min-width: 0; }
#extra-tool .extra-controls .field { margin-bottom: 18px; }
#extra-tool .extra-controls input[type="color"] { min-height: 48px; padding: 4px; }
#extra-tool .extra-output { width: 100%; min-height: 260px; margin: 8px 0 16px; resize: vertical; white-space: pre; overflow: auto; font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
#extra-tool .extra-preview { margin-bottom: 22px; max-width: 100%; }
#extra-tool .extra-layout { resize: horizontal; overflow: auto; width: 100%; min-width: 150px; max-width: 100%; min-height: 220px; border: 1px dashed #617b9b; padding: 12px; border-radius: 10px; }
#extra-tool .extra-layout-card { min-width: 0; overflow-wrap: anywhere; padding: 20px 10px; background: #173e67; color: #fff; border: 1px solid #529bea; border-radius: 8px; text-align: center; }
#extra-tool .extra-type-sample { overflow-wrap: anywhere; line-height: 1.3; margin: 0; }
#extra-tool .extra-space-row { margin-bottom: 12px; font-size: 13px; }
#extra-tool .extra-space-bar { display: block; max-width: 100%; height: 10px; margin-top: 5px; border-radius: 3px; background: #48a8ff; }
#extra-tool .extra-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 12px; overflow: hidden; }
#extra-tool .extra-swatch { min-height: 70px; padding: 12px; white-space: pre-line; font: 600 14px/1.5 ui-monospace, monospace; }
#extra-tool .extra-image { display: block; width: auto; max-width: 100%; max-height: 420px; border-radius: 10px; }
#extra-tool button:disabled { opacity: .5; cursor: not-allowed; }
#extra-tool .actions { flex-wrap: wrap; }
#extra-tool .tool-note { overflow-wrap: anywhere; }
.tool-directory [hidden] { display: none !important; }