/* ============================================================================
   text-to-base-converter.css - Text to Base Converter
   ============================================================================
   Loaded by:  converter-tools/text-to-base-converter.php
   Purpose:    Scoped styles for the output cards (.tbc-*). The right column
               holds a 2x2 grid of base cards (binary, octal, decimal, hex)
               that appear/disappear based on the Show setting. When a single
               base is selected, a full-height textarea replaces the grid.
   Load order: AFTER tool-input.css. Scoped to .tbc-* so the styles never leak
               into other tool pages.
   ============================================================================ */

.tbc-output-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.tbc-card {
    min-width: 0;
}

.tbc-output {
    height: 120px;
    font-family: Consolas, Menlo, monospace;
    font-size: 0.85rem;
    background: #ffffff;
    white-space: pre;
    overflow: auto;
    resize: vertical;
}

/* Single-base output (matches input textarea min-height) */
.tbc-single-wrap {
    display: flex;
    flex-direction: column;
}

.tbc-single-output {
    flex: 1;
    min-height: calc(1.5em + .75rem + 2px);
    font-family: Consolas, Menlo, monospace;
    font-size: 0.85rem;
    background: #f9f8f8;
    white-space: pre;
    overflow: auto;
    resize: vertical;
}

.tbc-settings {
    margin-bottom: 16px;
}

@media only screen and (max-width: 767px) {
    .tbc-output-grid {
        grid-template-columns: 1fr;
    }
}