/* Interactive CSS demos (see ref_interactive() in includes/ref_helpers.php).
   Same look as the old pasted-HTML demos; rules are scoped to .ref-it so they
   do not clash with the old rules in references.css. */

/* Two columns (replaces the old Bootstrap row / col-md-6 border-end) */
.ref-it__cols{display:grid;grid-template-columns:1fr 1fr;margin:0 -.75rem;height:100%;}
.ref-it__col{padding:0 .75rem;min-width:0;}
.ref-it__col--opts{border-right:1px solid var(--bs-border-color,#dee2e6);}
@media (max-width:767.98px){
	.ref-it__cols{grid-template-columns:1fr;row-gap:1rem;}
	.ref-it__col--opts{border-right:none;}
}

/* Old styles, unchanged */
.ref-it.interactive-cont{min-height:385px; border:none;}
.ref-it .interactive-values {display: flex;flex-direction: column; gap:10px;height:355px;}
.ref-it .interactive-values label {display: flex;align-items: center;flex-grow:1;padding: 4px 10px;background-color: hsl(var(--white));border: 1px solid #e1e2e7;border-radius: 4px;height:100%}
.ref-it .interactive-values input[type="radio"] {position: absolute;opacity: 0;}
.ref-it .interactive-values input[type="radio"]:checked + label {box-shadow: 0 0 3px blue;}
.ref-it .interactive-values label:hover {box-shadow: 0 0 1px blue;cursor:pointer;}
.ref-it .interactive-values .toolbar{display:none !important;}
.ref-it .interactive-values .code-toolbar {margin-bottom:0px;}
.ref-it .interactive-values pre{border:none !important;padding-top:0!important}

.ref-it .interactive-values pre{padding:0!important;background:hsl(var(--white))}
.ref-it .interactive-values pre code{white-space:pre-wrap !important;}
.ref-it.interactive-cont{padding:15px;}
.ref-it.interactive-cont .int-demo{padding:10px;display:flex;align-items:center;justify-content:center;height:calc(355px - 38px);text-align:center;position:relative;width:100%;overflow:auto}

/* "View code" button: looks like Bootstrap's btn btn-secondary btn-sm in a d-grid mt-2 */
.ref-it__view{display:block;width:100%;margin-top:.5rem;padding:.25rem .5rem;font:inherit;font-size:.875rem;line-height:1.5;color:#fff;background:#6c757d;border:1px solid #6c757d;border-radius:.25rem;cursor:pointer;}
.ref-it__view:hover{background:#5c636a;border-color:#565e64;}

/* "View code" dialog (native <dialog>, replaces the Bootstrap modal) */
.ref-it__dialog{width:min(800px,92vw);max-height:85vh;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;padding:0;color:inherit;background:var(--bs-body-bg,#fff);}
.ref-it__dialog::backdrop{background:rgba(0,0,0,.5);}
.ref-it__dialog-head{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--bs-border-color,#dee2e6);}
.ref-it__dialog-head form{margin:0;}
.ref-it__close{background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:inherit;}
.ref-it__dialog-body{padding:1rem;}
.ref-it__topic{font-weight:600;margin:12px 0 6px;}
.ref-it__dialog pre{margin:0 0 8px;overflow:auto;}
.ref-it__dialog{position:fixed;inset:0;margin:auto;}