input[disabled], select[disabled], button[disabled] { cursor: not-allowed; opacity: 0.5; }

/* Small fixed-width numeric inputs used in the demo */
.small-input { width: 52px !important; }
.tiny-input { width: 50px !important; }

/* Medium select used for border-radius control */
.select-medium { width: 180px !important; }

/* Utility: visually hidden (for screen-reader-only content) */
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Code view sizing: make textareas fill their container and be responsive.
The .code-container is centered and capped on very wide screens so
users can save the `#librarycode` contents as a full .html file. */
.code-container { width: 100%; margin: 0 auto; box-sizing: border-box; padding: 0 0.30rem; }
.code-textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace; font-size: 0.95rem; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 6px; background: #fff; color: #111; }
.code-textarea.short { min-height: 3.25rem; max-height: 10rem; resize: vertical; }
.code-textarea.long { min-height: 18rem; max-height: 60vh; resize: vertical; }

/* Cap .code-container width at very large screens to avoid extremely wide textareas */
@media (min-width: 992px) {
	.code-container { max-width: 1100px; }
}
@media (min-width: 1400px) {
	.code-container { max-width: 1800px; }
}