/* ============================================================================
   code-input.css - Prism-highlighted editing field shared by code tools
   ============================================================================
   Loaded by:  text-cleaner/strip-html-tags.php,
                webdev-tools/css-minify.php,
                webdev-tools/html-table-generator.php (read-only output side)
   Purpose:    The code-input overlay: a Prism-highlighted <pre> (.code-highlight)
               sits behind a transparent <textarea> (.code-input) so code
               (HTML/CSS) renders in color while the textarea keeps the caret
               and editing. Both layers share identical box metrics + font so
               the highlight stays aligned under the caret.
   Load order: AFTER tool-input.css. Requires prism.min.css/js on the page.
   ============================================================================ */

.code-input-wrap {
    position: relative;
    width: 100%;
}

.code-input-wrap > .code-highlight,
.code-input-wrap > .code-input {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1rem;
    line-height: 1.5;
    padding: .375rem .75rem;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    white-space: pre-wrap;
    word-break: break-word;
    box-sizing: border-box;
}

.code-input-wrap > .code-highlight {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    background: #f8f9fa;
    color: #212529;
    overflow: auto;
    pointer-events: none;
}

.code-input-wrap > .code-highlight code {
    font: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
    display: block;
    white-space: inherit;
}

.code-input-wrap > .code-input {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    min-height: 288px;
    background: transparent;
    color: transparent;
    caret-color: #222;
    resize: both;
}

.code-input-wrap > .code-input:focus {
    background-color: transparent;
    color: transparent;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .25);
}

.code-input-wrap > .code-input::selection {
    background: rgba(13, 110, 253, .25);
}